xps-web-v5/src/views/biz/mapping/index.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup name="BizObjectMappingList">
import { ElMessage } from 'element-plus'
import {
  deleteObjectMappingById,
  getObjectAttrListById,
} from '@/api/biz/bizObjectMappingApi'
const props = withDefaults(defineProps<{
  bizId: number
  objectId: number
}>(), {
  bizId: 0,
  objectId: 0,
})

// 数据
const state = reactive({
  title: '',
  dialogVisible: false,
  loading: false,
  search: {
    keywords: '',
  },
  conditions: {
    bizId: props.bizId,
    objectId: props.objectId,
  },
  dataList: [],
  actionType: 1,
})

// 查询数据
const getData = async () => {
  state.loading = true
  const { bizId, objectId } = state.conditions
  const { data } = await getObjectAttrListById(bizId, objectId)
  state.loading = false
  state.dataList = data
}

const objectMappingTableRef = ref()

function onObjectMappingAdd() {
  state.actionType = 2
}

async function onObjectMappingDelete(row: any) {
  const { bizId, objectId } = state.conditions
  const mappingId = row.mappingId
  await deleteObjectMappingById(bizId, objectId, mappingId)
  ElMessage.success('删除成功')
}

onMounted(() => {
  getData()
  nextTick(() => {
  })
})
</script>

<template>
  <div class="absolute-container">
    <div class="container">
      <tool-bar>
        <template #left>
          <h4>模型映射</h4>
        </template>
        <template #right>
          <el-input v-model="state.search.keywords" placeholder="请输入关键词筛选" clearable style="width: 200px;" />
          <el-button style="margin-left:10px" @click="getData">
            <template #icon>
              <el-icon>
                <svg-icon name="i-ep:search" />
              </el-icon>
            </template>
          </el-button>

          <el-button type="default" @click="onObjectMappingAdd">
            <template #icon>
              <el-icon>
                <svg-icon name="i-ep:plus" />
              </el-icon>
            </template>
          </el-button>
        </template>
      </tool-bar>

      <el-table ref="objectMappingTableRef" :data="state.dataList" class="list-table" size="small" border stripe highlight-current-row>
        <el-table-column type="index" label="序号" header-align="center" align="center" width="70" />

        <el-table-column label="模型" header-align="center" align="center" width="300">
          <template #default="scope">
            <span>{{ scope.row.mappingModelTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column label="对象" header-align="center" align="center" width="300">
          <template #default="scope">
            <span>{{ scope.row.mappingObjectTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column label="映射代码" header-align="center" align="center">
          <template #default="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.mappingCode" size="small" />
            <span v-else>{{ scope.row.mappingCode }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="是否要删除此行？" style="margin-left: 10px;" @confirm="onObjectMappingDelete(scope.row)">
              <template #reference>
                <el-button type="danger" plain size="small">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-main {
  :deep(.el-table) {
    height: 100%;

    .el-table__row {
      .index {
        display: inline-block;
      }

      .delete {
        display: none;
      }

      &:hover {
        .index {
          display: none;
        }

        .delete {
          display: inline-block;
        }
      }

      .el-tag.sortable,
      .el-tag.sortable .el-icon {
        cursor: s-resize;
      }
    }
  }
  h4{
    padding: 0;
    margin: 0;
  }
}
</style>