字典树ok

src/api/system-boot/dic.ts

@@ -1,6 +1,6 @@
 import createAxios from '@/utils/request'
 
-export const deleteStatistical = (id) => {
+export const dicDelete = (id: string) => {
     let form = new FormData()
     form.append('id', id)
     return createAxios({
@@ -12,3 +12,19 @@ export const deleteStatistical = (id) => {
         data: form
     })
 }
+
+export function dicAdd(data: any) {
+    return createAxios({
+        url: '/system-boot/dic/add',
+        method: 'post',
+        data: data
+    })
+}
+
+export function dicUpdate(data: any) {
+    return createAxios({
+        url: '/system-boot/dic/update',
+        method: 'put',
+        data: data
+    })
+}

src/views/auth/role/index.vue

@@ -18,7 +18,7 @@
             ></Tree>
             <el-empty style="width: 100%; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
         </div>
-        <popupForm ref="popupRef"></popupForm>
+        <PopupForm ref="popupRef"></PopupForm>
     </div>
 </template>
 <script setup lang="ts">
@@ -33,7 +33,7 @@ import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuc
 import { mainHeight } from '@/utils/layout'
 import { del } from '@/api/user-boot/role'
 import { ElMessage } from 'element-plus'
-import popupForm from './popupForm.vue'
+import PopupForm from './popupForm.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 
 const adminInfo = useAdminInfo()
@@ -98,16 +98,23 @@ tableStore.table.params.searchValue = ''
 
 provide('tableStore', tableStore)
 const filterData = (arr: any[]) => {
-    return arr.filter((item: any) => {
+    // return arr.filter((item: any) => {
+    //     item.name = item.title
+    //     if (item.children.length) {
+    //         item.children = filterData(item.children)
+    //     }
+    //     return item.type === 0
+    // })
+    arr.forEach((item: any) => {
         item.name = item.title
         if (item.children.length) {
-            item.children = filterData(item.children)
+            filterData(item.children)
         }
-        return item.type === 0
     })
 }
 functionTree().then((res: any) => {
-    menuTree.value = filterData(res.data)
+    filterData(res.data)
+    menuTree.value = res.data
 })
 
 const currentChange = (data: any) => {

src/views/govern/setting/statisticalType/binding.vue

@@ -61,7 +61,7 @@
                                 <template v-if="node.level === 1">
                                     <div class="ml5">({{ data.children.length }})</div>
                                     <div style="flex: 1"></div>
-                                    <el-popconfirm title="确定删除该分组吗?" @confirm="deleteStatisticalGroup(data)">
+                                    <el-popconfirm title="确定删除该分组吗?" @confirm="dicDeleteGroup(data)">
                                         <template #reference>
                                             <Icon name="el-icon-Delete" class="ml10" style="cursor: pointer"></Icon>
                                         </template>
@@ -88,7 +88,7 @@ import { ref, inject } from 'vue'
 import { CascaderValue, ElMessage } from 'element-plus'
 import { addStatistical, queryStatistical } from '@/api/system-boot/csstatisticalset'
 import PopupAdd from './add.vue'
-import { deleteStatistical } from '@/api/system-boot/dic'
+import { dicDelete } from '@/api/system-boot/dic'
 defineOptions({
     name: 'govern/setting/statisticalType/binding'
 })
@@ -225,11 +225,11 @@ const rightCheckChange = () => {
     })
 }
 
-const deleteStatisticalGroup = (data: any) => {
+const dicDeleteGroup = (data: any) => {
     if (data.children.length) {
         return ElMessage.warning('该分组下有指标，不能删除')
     }
-    deleteStatistical(data.value).then(res => {
+    dicDelete(data.value).then(res => {
         ElMessage.success('删除成功')
         toData.value = toData.value.filter(item => item.value !== data.value)
     })

src/views/govern/setting/statisticalType/index.vue

@@ -19,7 +19,7 @@ import TableHeader from '@/components/table/header/index.vue'
 import PopupBinding from './binding.vue'
 import PopupAdd from './add.vue'
 import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
-import { deleteStatistical } from '@/api/system-boot/dic'
+import { dicDelete } from '@/api/system-boot/dic'
 
 defineOptions({
     name: 'govern/setting/statisticalType'
@@ -73,7 +73,7 @@ const tableStore = new TableStore({
                         title: '确定删除该菜单吗？'
                     },
                     click: row => {
-                        deleteStatistical(row.id).then(() => {
+                        dicDelete(row.id).then(() => {
                             init()
                         })
                     }

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

@@ -1,26 +1,26 @@
 <template>
-    <div class='default-main' style='position: relative;'>
+    <div class="default-main" style="position: relative">
         <TableHeader>
             <template #select>
-                <el-form-item label='过滤筛选'>
+                <el-form-item label="过滤筛选">
                     <el-input
-                        style='width: 240px'
-                        v-model='tableStore.table.params.searchValue'
+                        style="width: 240px"
+                        v-model="tableStore.table.params.searchValue"
                         clearable
-                        placeholder='请输入名称或编码筛选'
+                        placeholder="请输入名称或编码筛选"
                     />
                 </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>
-        <Detail ref='detailRef' :detail='detail' @close='detail = null' v-if='detail'></Detail>
+        <Table ref="tableRef" />
+        <PopupEdit ref="popupEditRef"></PopupEdit>
+        <Detail ref="detailRef" :detail="detail" @close="detail = null" v-if="detail"></Detail>
     </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'

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 = () => {}
+const addMenu = () => {
+    popupFormRef.value.open('新增字典类型')
+}
 </script>

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

@@ -0,0 +1,83 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
+                <el-form-item label="字典名称:" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入字典名称"></el-input>
+                </el-form-item>
+                <el-form-item label="序号:" prop="sort" class="top">
+                    <el-input v-model="form.sort" placeholder="请输入序号"></el-input>
+                </el-form-item>
+                <el-form-item label="编码:" prop="code" class="top">
+                    <el-input v-model="form.code" placeholder="请输入字典编码"></el-input>
+                </el-form-item>
+                <el-form-item label="描述:" class="top">
+                    <el-input v-model="form.remark" placeholder="请输入字典描述"></el-input>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { dicAdd, dicUpdate } from '@/api/system-boot/dic'
+
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+// do not use same name with ref
+const form = reactive({
+    name: '',
+    code: '',
+    remark: '',
+    sort: 0,
+    type: 0,
+    pid: 0,
+    id: ''
+})
+const rules = {
+    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+    sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+    code: [{ required: true, message: '编码不能为空', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+        form.sort = 0
+        form.pid = 0
+        form.type = 0
+    }
+}
+const submit = async () => {
+    if (form.id) {
+        await dicUpdate(form)
+    } else {
+        await dicAdd(form)
+    }
+    ElMessage.success('保存成功')
+    tableStore.index()
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>

types/table.d.ts

@@ -77,7 +77,7 @@ declare global {
     interface OptButton {
         // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮,basicButton=普通按钮
         render: 'tipButton' | 'confirmButton' | 'moveButton' | 'basicButton'
-        name: string
+        name?: string
         title?: string
         text?: string
         class?: string