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

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

<script lang="ts" setup name="BizObjectAttrList">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { dataType } from '@/utils/tool'
import {
  createObjectAttr,
  deleteObjectAttrById,
  getObjectAttrListById,
  updateObjectAttr,
} from '@/api/biz/bizObjectAttrApi'
const props = withDefaults(defineProps<{
  bizId: number
  objectId: number
}>(), {
  bizId: 0,
  objectId: 0,
})

const bizId = props.bizId
const objectId = props.objectId

interface ObjectAttr {
  bizId: number
  objectId: number
  attrId: number
  attrTitle: string
  attrCode: string
  mappingCode: string
  attrType: number
  attrLength: number
  attrDecimals: number
  isNotNull: number
  comment: string
  sortNo: number
  isEdit: boolean
}

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

const formRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
  objectTitle: [
    { required: true, message: '请输入对象标题', trigger: 'blur' },
  ],
  objectType: [
    { required: true, message: '请输入对象类型', trigger: 'blur' },
  ],
  objectCode: [
    { required: true, message: '请输入对像代码', trigger: 'blur' },
  ],
  comment: [
    { required: false, message: '请输入简要描述', trigger: 'blur' },
  ],
})

// 查询数据
const getData = async () => {
  state.loading = true
  const { data } = await getObjectAttrListById(bizId, objectId)
  state.loading = false
  state.attrs = data
  data.forEach((attr: ObjectAttr) => {
    attr.isEdit = false
  })
}

const attrsTableRef = ref()
const attrsTableKey = ref(0)

function onAttrAdd() {
  state.attrs.push({
    bizId,
    objectId,
    attrId: 0,
    attrTitle: '', // 名称
    attrCode: '', // 代码
    mappingCode: '',
    attrType: 0, // 类型
    attrLength: 0, // 长度
    attrDecimals: 0, // 小数位数
    isNotNull: 0, // 是否为空
    comment: '', // 注释
    sortNo: 0,
    isEdit: true,
  })
  state.actionType = 1
}

function onAttrEdit(row: any) {
  row.isEdit = true
  state.actionType = 2
}

async function onAttrDelete(row: any) {
  const { bizId, objectId } = state.conditions
  const attrId = row.attrId
  const { msg } = await deleteObjectAttrById(bizId, objectId, attrId)
  ElMessage.success(msg)
  await getData()
}

function onAttrCancel(row: any, index: number) {
  row.isEdit = false
  if (state.actionType === 1) {
    state.attrs.splice(index, 1)
  }
  state.actionType = 0
}

async function onAttrSave(row: any) {
  row.isEdit = false
  if (state.actionType === 1) {
    const { msg } = await createObjectAttr(row)
    ElMessage.success(msg)
    state.dialogVisible = false
  }
  else {
    const { msg } = await updateObjectAttr(row)
    ElMessage.success(msg)
    state.dialogVisible = false
  }
  await getData()
}

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="onAttrAdd">
            <template #icon>
              <el-icon>
                <svg-icon name="i-ep:plus" />
              </el-icon>
            </template>
          </el-button>
        </template>
      </tool-bar>

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

        <el-table-column label="名称" header-align="center" align="center" width="150">
          <template #default="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.attrTitle" size="small" />
            <span v-else>{{ scope.row.attrTitle }}</span>
          </template>
        </el-table-column>

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

        <el-table-column label="映射代码" header-align="center" align="center" width="120">
          <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="类型" header-align="center" align="center" width="120">
          <template #default="scope">
            <data-type-selector v-if="scope.row.isEdit" v-model="scope.row.attrType" />
            <span v-else>{{ dataType(scope.row.attrType) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="长度" header-align="center" align="center" width="120">
          <template #default="scope">
            <el-input-number
              v-if="scope.row.isEdit"
              v-model="scope.row.attrLength" style="width:90px"
              :min="0"
              controls-position="right"
              size="small"
            />
            <span v-else>{{ scope.row.attrLength }}</span>
          </template>
        </el-table-column>

        <el-table-column label="小数位数" header-align="center" align="center" width="120">
          <template #default="scope">
            <el-input-number
              v-if="scope.row.isEdit"
              v-model="scope.row.attrDecimals" style="width:90px"
              :min="0"
              controls-position="right"
              size="small"
            />
            <span v-else>{{ scope.row.attrDecimals }}</span>
          </template>
        </el-table-column>

        <el-table-column label="是否为空" header-align="center" align="center" width="90">
          <template #default="scope">
            <el-checkbox
              v-if="scope.row.isEdit"
              v-model="scope.row.isNotNull"
              :true-label="1"
              :false-label="0"
            >
              {{ scope.row.isNotNull === 1 ? '是' : '否' }}
            </el-checkbox>
            <span v-else>{{ scope.row.isNotNull === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="注释">
          <template #default="scope">
            <el-input v-if="scope.row.isEdit" v-model="scope.row.comment" size="small" />
            <span v-else>{{ scope.row.comment }}</span>
          </template>
        </el-table-column>

        <el-table-column header-align="center" align="center" width="70">
          <template #header>
            排序
          </template>
          <template #default>
            <el-tag type="info" class="sortable">
              <el-icon>
                <svg-icon name="i-ep:d-caret" />
              </el-icon>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="140" align="center">
          <template #default="scope">
            <template v-if="scope.row.isEdit">
              <div>
                <el-button type="primary" plain size="small" @click="onAttrSave(scope.row)">
                  保存
                </el-button>
                <el-button type="primary" plain size="small" @click="onAttrCancel(scope.row, scope.$index)">
                  取消
                </el-button>
              </div>
            </template>

            <template v-else>
              <div>
                <el-button type="primary" plain size="small" @click="onAttrEdit(scope.row)">
                  编辑
                </el-button>
                <el-popconfirm title="是否要删除此行？" style="margin-left: 10px;" @confirm="onAttrDelete(scope.row)">
                  <template #reference>
                    <el-button type="danger" plain size="small">
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </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;
        }
      }
    }
  }

  h5{
    padding: 0;
    margin: 0;
  }
}
</style>