字典管理ok

src/views/setting/dictionary/list/detail.vue

@@ -1,7 +1,12 @@
 <template>
-    <div class='default-main'>
+    <div class='dictiontary-list-detail'>
         <TableHeader>
             <template #select>
+                <el-page-header @back="$emit('close')" style='display: flex;align-items: center'>
+                    <template #content>
+                        <span class='text-large font-600 mr-3'> {{ props.detail.name }}详情信息 </span>
+                    </template>
+                </el-page-header>
                 <el-form-item label='过滤筛选'>
                     <el-input
                         style='width: 240px'
@@ -12,11 +17,11 @@
                 </el-form-item>
             </template>
             <template #operation>
-                <el-button :icon='Plus' type='primary' @click='add'>新增字典类型</el-button>
+                <el-button :icon='Plus' type='primary' @click='add'>新增</el-button>
             </template>
         </TableHeader>
         <Table ref='tableRef' />
-        <PopupEdit ref='popupEditRef'></PopupEdit>
+        <PopupDetailEdit ref='popupEditRef'></PopupDetailEdit>
     </div>
 </template>
 <script setup lang='ts'>
@@ -26,49 +31,54 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { ElMessage } from 'element-plus'
-import PopupEdit from './popupEdit.vue'
+import PopupDetailEdit from './popupDetailEdit.vue'
 import { dictTypeDelete } from '@/api/system-boot/dictType'
-import router from '@/router'
-
+import { dictDataDelete } from '@/api/system-boot/dicData'
 
 defineOptions({
     name: 'setting/dictionary/list/detail'
 })
+
+interface Props {
+    detail: anyObj
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    detail: () => {
+        return {}
+    }
+})
 const popupEditRef = ref()
 const tableStore = new TableStore({
-    url: '/system-boot/dictType/list',
+    url: '/system-boot/dictData/getTypeIdData',
     method: 'POST',
     column: [
-        { title: '序号', type: 'seq', width: '60' },
         { title: '名称', field: 'name' },
         { title: '编码', field: 'code' },
-        { title: '开启等级', field: 'openLevelName' },
-        { title: '开启算法', field: 'openDescribeName' },
+        { title: '排序', field: 'sort' },
+        { title: '计算值', field: 'value' },
+        { title: '事件等级', field: 'levelName' },
+        { title: '算法描述', field: 'algoDescribe' },
         { title: '状态', field: 'stateName' },
-        { title: '字典描述', field: 'remark' },
-        { title: '创建时间', field: 'createTime' },
-        { title: '更新时间', field: 'updateTime' },
         {
             title: '操作',
             width: '180',
             render: 'buttons',
             fixed: 'right',
             buttons: [
-                {
-                    title: '查看',
-                    type: 'primary',
-                    icon: 'el-icon-ZoomIn',
-                    render: 'tipButton',
-                    click: row => {
-                    }
-                },
                 {
                     title: '编辑',
                     type: 'primary',
                     icon: 'el-icon-EditPen',
                     render: 'tipButton',
                     click: row => {
-                        popupEditRef.value.open('编辑字典类型', row)
+                        popupEditRef.value.open('编辑', {
+                            ...row,
+                            openDescribe: props.detail.openDescribe,
+                            openLevel: props.detail.openLevel,
+                            typeName: props.detail.name + row.name,
+                            typeId: props.detail.id
+                        })
                     }
                 },
                 {
@@ -83,7 +93,7 @@ const tableStore = new TableStore({
                         title: '确定删除该字典类型吗？'
                     },
                     click: row => {
-                        dictTypeDelete([row.id]).then(() => {
+                        dictDataDelete([row.id]).then(() => {
                             ElMessage.success('删除成功')
                             tableStore.index()
                         })
@@ -95,8 +105,25 @@ const tableStore = new TableStore({
     loadCallback: () => {
         tableStore.table.data.forEach((item: any) => {
             item.stateName = item.state === 1 ? '正常' : '删除'
-            item.openLevelName = item.openLevel === 1 ? '开启' : '不开启'
-            item.openDescribeName = item.openDescribe === 1 ? '开启' : '不开启'
+            switch (item.level) {
+                case 0:
+                    item.levelName = '普通'
+                    break
+                case 1:
+                    item.levelName = '中等'
+                    break
+                case 2:
+                    item.levelName = '严重'
+                    break
+                default:
+                    item.levelName = '未知'
+                    break
+            }
+            for (let key in item) {
+                if (typeof item[key] !== 'number') {
+                    item[key] = item[key] || '/'
+                }
+            }
         })
     }
 })
@@ -104,11 +131,34 @@ const tableStore = new TableStore({
 provide('tableStore', tableStore)
 tableStore.table.params.searchValue = ''
 tableStore.table.params.searchState = 0
+tableStore.table.params.typeId = props.detail.id
+if (props.detail.openLevel !== 1) {
+    tableStore.table.column = tableStore.table.column.filter((item: any) => item.field !== 'levelName' )
+}
+if (props.detail.openDescribe !== 1) {
+    tableStore.table.column = tableStore.table.column.filter((item: any) => item.field !== 'algoDescribe')
+}
 onMounted(() => {
     tableStore.index()
 })
 const add = () => {
-    popupEditRef.value.open('新增字典类型')
+
+    popupEditRef.value.open('新增', {
+        openLevel: props.detail.openLevel,
+        openDescribe: props.detail.openDescribe,
+        typeName: props.detail.name,
+        typeId: props.detail.id
+    })
 }
 
-</script>
+</script>
+<style lang='scss'>
+.dictiontary-list-detail {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: #fff;
+}
+</style>