pqs-9100_client/frontend/src/views/system/dictionary/dictData/index.vue

<template>
  <el-dialog class='table-box' v-model='dialogVisible' top='114px'
             :style="{ height: height+'px', maxHeight: height+'px', overflow: 'hidden' }" title='字典数据'
             :width='width'
             :modal='false'>
    <div class='table-box' :style="{height:(height-64)+'px',maxHeight:(height-64)+'px',overflow:'hidden'}">
      <ProTable ref='proTable' :columns="columns" :request-api='getDictDataListByTypeId' :initParam="initParam">
        <template #tableHeader="scope">
          <el-button type="primary" :icon="CirclePlus" @click="openDialog('add')">新增</el-button>
          <el-button type='primary' :icon='Download' plain>导出</el-button>
          <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
                     @click="batchDelete(scope.selectedListIds)">
            批量删除
          </el-button>
        </template>

        <template #operation="scope">
          <el-button type="primary" link :icon="EditPen" @click="openDialog('edit', scope.row)">编辑</el-button>
          <el-button type="primary" link :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </ProTable>
    </div>
  </el-dialog>
  <DataPopup :refresh-table='proTable?.getTableList' ref='dataPopup'/>
</template>

<script setup lang="tsx" name="dictData">
import {CirclePlus, Delete, Download, EditPen} from '@element-plus/icons-vue'
import {Dict} from '@/api/system/dictionary/interface'
import {ProTableInstance, ColumnProps} from '@/components/ProTable/interface'
import {useHandleData} from '@/hooks/useHandleData'
import DataPopup from '@/views/system/dictionary/dictData/components/dataPopup.vue'
import {
  getDictDataListByTypeId,
  deleteDictData,
} from "@/api/system/dictionary/dictData";

const proTable = ref<ProTableInstance>()
const dialogVisible = ref(false)
//字典数据所属的字典类型Id
const dictTypeId = ref('')
const dictTypeName = ref('')


const initParam = reactive({typeId: ''})

const dataPopup = ref()

const props = defineProps({
  width: {
    type: Number,
    default: 800,
  },
  height: {
    type: String,
    default: '744px',
  },
})

const columns = reactive<ColumnProps<Dict.ResDictData>[]>([
  {type: 'selection', fixed: 'left', width: 70},
  {type: 'index', fixed: 'left', width: 70, label: '序号'},
  {
    prop: 'name',
    label: '名称',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'code',
    label: '编码',
    width: 180,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'value',
    label: '值',
    width: 180
  },
  {
    prop: 'level',
    label: '事件等级',
    width: 180,
    render: scope => {
      return (
          <>
            {
                (<el-tag type={scope.row.level === 1 ? 'info' : scope.row.level === 2 ? 'warning' : 'danger'}>
                  {scope.row.level === 1 ? '普通' : scope.row.level === 2 ? '中等' : '严重'}
                </el-tag>)
            }
          </>
      )
    }
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 180
  },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    minWidth: 300
  },
])

const open = (row: Dict.ResDictType) => {
  dialogVisible.value = true
  dictTypeId.value = row.id
  dictTypeName.value = row.name
  initParam.typeId = row.id
}

defineExpose({open})

// 打开 dialog(新增、查看、编辑)
const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => {
  dataPopup.value?.open(titleType, dictTypeId.value, dictTypeName.value, row)
}

// 批量删除字典数据
const batchDelete = async (id: string[]) => {
  await useHandleData(deleteDictData, id, '删除所选字典数据')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 删除字典数据
const handleDelete = async (params: Dict.ResDictData) => {
  await useHandleData(deleteDictData, [params.id], `删除【${params.name}】字典数据`)
  proTable.value?.getTableList()
}
</script>