字典树ok

src/views/setting/dictionary/tree/index.vue

@@ -1,27 +1,109 @@
 <template>
-    <div class="default-main">
-        <TableHeader datePicker> </TableHeader>
-        <Table ref="tableRef" />
+    <div class='default-main'>
+        <div class='custom-table-header'>
+            <div style='flex: 1; font-weight: 700'>字典树列表</div>
+            <el-button :icon='Plus' type='primary' @click='addMenu'>新增字典类型</el-button>
+        </div>
+        <Table ref='tableRef' />
+        <PopupForm ref='popupFormRef'></PopupForm>
     </div>
 </template>
-<script setup lang="ts">
+<script setup lang='ts'>
 import { Plus } from '@element-plus/icons-vue'
 import { ref, onMounted, provide } from 'vue'
 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 PopupForm from './popupForm.vue'
+import { dicDelete } from '@/api/system-boot/dic'
 
 defineOptions({
     name: 'setting/dictionary/tree'
 })
+
+const popupFormRef = ref()
 const tableStore = new TableStore({
     url: '/system-boot/dic/dicTree',
     method: 'GET',
     column: [
-        { title: '推送用户', field: 'userName', align: 'center' },
-        { title: '推送内容', field: 'showName', align: 'center' },
-        { title: '推送时间', field: 'sendTime', align: 'center' },
-    ]
+        { title: '字典名称', field: 'name', treeNode: true, align: 'left' },
+        // { title: '排序', field: 'sort',width:'80'  },
+        { title: '编码', field: 'code' },
+        { title: '描述', field: 'remark' },
+        {
+            title: '状态',
+            field: 'status',
+            width: '80',
+            render: 'tag',
+            custom: {
+                0: 'success',
+                1: 'warning',
+                2: 'danger'
+            },
+            replaceValue: {
+                0: '正常',
+                1: '禁用',
+                2: '删除'
+            }
+        },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    title: '新增',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'tipButton',
+                    click: row => {
+                        popupFormRef.value.open('新增字典类型', {
+                            name: '',
+                            code: '',
+                            remark: '',
+                            sort: 0,
+                            type: 0,
+                            pid: row.id,
+                            id: ''
+                        })
+                    }
+                },
+                {
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupFormRef.value.open('编辑字典类型', row)
+                    }
+                },
+                {
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该字典类型吗？'
+                    },
+                    click: row => {
+                        dicDelete(row.id).then(() => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.statusName = item.status === 0 ? '正常' : item.status === 1 ? '停用' : '删除'
+        })
+    }
 })
 
 provide('tableStore', tableStore)
@@ -29,5 +111,7 @@ tableStore.table.params.searchState = 0
 onMounted(() => {
     tableStore.index()
 })
-const addMenu = () => {}
-</script>
+const addMenu = () => {
+    popupFormRef.value.open('新增字典类型')
+}
+</script>