字典数据前后端接口编写、调试

frontend/src/views/system/dictionary/dictData/index.vue

@@ -1,9 +1,139 @@
 <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="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 lang="tsx" setup>
+
+<script setup lang="tsx" name="dictData">
+import {CirclePlus, Delete, 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 dictTypeCode = ref('')
 
 
+const initParam = reactive({typeId: ''})
 
+const dataPopup = ref()
 
-</script>
+const props = defineProps({
+  width: {
+    type: String,
+    default: '800px',
+  },
+  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 (
+          <>
+            {scope.row.level === 0 || scope.row.level === null || scope.row.level === undefined ?
+                (<span>—</span>) :
+                (<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
+  dictTypeCode.value = row.code
+  initParam.typeId = row.id
+}
+
+defineExpose({open})
+
+// 打开 dialog(新增、查看、编辑)
+const openDialog = (titleType: string, row: Partial<Dict.ResDictData> = {}) => {
+  dataPopup.value?.open(titleType, dictTypeId.value, dictTypeCode.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>