fs-admin/src/views/system/Dict.vue

<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'
import { getDictList, getDictValue, saveDict, deleteDict, saveDictValue, deleteDictValue } from '@/api/dict'

const CRUD: ICRUD = {
  create(data) {
    return saveDict(data)
  },
  update(data) {
    return saveDict(data)
  },
  getList(data) {
    return getDictList(data).then((res: any) => {
      if (res.rows.length) {
        curRow.value = res.rows[0]
      }
      return {
        list: res.rows,
        total: res.total
      }
    })
  },
  delete(data) {
    return deleteDict({ ids: data.id })
  },
  deleteBatch(data) {
    return deleteDict(data)
  }
}

const itemCRUD: ICRUD = {
  create(data) {
    data['dictType.id'] = curRow.value.id
    return saveDictValue(data)
  },
  update(data) {
    data['dictType.id'] = curRow.value.id
    return saveDictValue({
      dictValueId: data.id,
      ['dictType.id']: curRow.value.id,
      label: data.label,
      value: data.value,
      sort: data.sort
    })
  },
  getList() {
    return getDictValue(curRow.value.id)
  },
  delete(data) {
    return deleteDictValue({ dictValueId: data.id, dictTypeId: curRow.value.id })
  }
}

const dictFormConfig = reactive<BasicForm>({
  span: 24,
  formItems: [
    {
      label: '字典名称',
      value: '',
      name: 'description',
      type: 'input',
      rules: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
      search: true
    },
    {
      label: '字典值',
      value: '',
      name: 'type',
      type: 'input',
      rules: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
    }
  ]
})

const curRow = ref<any>(null)
const handleRowClick = ({ row }: { row: any }) => {
  console.log(row)
  curRow.value = row
}
const rowClassName = ({ row }: { row: any }) => {
  if (row.id === curRow.value.id) {
    return 'active'
  }
}

const itemTableRef = ref<any>(null)
watch(curRow, () => {
  itemTableRef.value?.refresh()
})

const dictItemFormConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      label: '标签',
      value: '',
      name: 'label',
      type: 'input',
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
    },
    {
      label: '键值',
      value: '',
      name: 'value',
      type: 'input',
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      label: '排序',
      value: '',
      name: 'sort',
      type: 'input-number',
      props: {
        maxlength: 11
      }
    }
  ]
})
</script>

<template>
  <el-row :gutter="16" class="h-full">
    <el-col :span="12" class="h-full">
      <pro-table
        :crud="CRUD"
        :formConfig="dictFormConfig"
        :row-class-name="rowClassName"
        @cell-click="handleRowClick"
        :queryConfig="{ fold: false }"
      >
        <vxe-column field="description" title="字典名称"></vxe-column>
        <vxe-column field="type" title="字典值"></vxe-column>
      </pro-table>
    </el-col>
    <el-col :span="12">
      <div class="bg-white h-full">
        <pro-table
          ref="itemTableRef"
          :crud="itemCRUD"
          :formConfig="dictItemFormConfig"
          :selection="false"
          v-if="curRow"
        >
          <template #header>
            <div class="pb-15px mb-20px font-bold" style="border-bottom: 1px solid var(--el-border-color)">
              {{ curRow.description }}
            </div>
          </template>
          <vxe-column field="label" title="标签"></vxe-column>
          <vxe-column field="value" title="键值"></vxe-column>
        </pro-table>
        <el-empty v-else description="请选择左侧数据后操作"></el-empty>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
:deep(.active) {
  background-color: #f5f7fa !important;
  .el-table-fixed-column--right {
    background-color: #f5f7fa !important;
  }
}
</style>