From 0c71b2ac32984f5491f1248eb82d30c48684a920 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Tue, 25 Nov 2025 15:15:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8A=A5=E8=A1=A8=E7=BB=91?=
 =?UTF-8?q?=E5=AE=9A=E6=8C=87=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/admin/index.vue                   | 251 ++++++++--------
 src/utils/router.ts                           |   2 +-
 src/views/govern/reportForms/bind.vue         | 191 ++++++++-----
 src/views/govern/reportForms/form.vue         | 214 +++++++-------
 src/views/govern/reportForms/index.vue        | 270 +++++++++---------
 src/views/govern/reportForms/luckysheet.vue   |  52 ++--
 .../setting/dictionary/component/add.vue      |  12 +-
 .../setting/dictionary/component/addTree.vue  | 139 +++++++++
 .../setting/dictionary/component/index.vue    |  58 ++--
 .../setting/dictionary/tree/popupForm.vue     | 168 +++++------
 10 files changed, 785 insertions(+), 572 deletions(-)
 create mode 100644 src/views/setting/dictionary/component/addTree.vue

diff --git a/src/layouts/admin/index.vue b/src/layouts/admin/index.vue
index eb5661f..27bdac1 100644
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -1,125 +1,126 @@
-<template>
-    <component :is='config.layout.layoutMode'></component>
-</template>
-
-<script setup lang='ts'>
-import { reactive } from 'vue'
-import { useConfig } from '@/stores/config'
-import { useNavTabs } from '@/stores/navTabs'
-import { useAdminInfo } from '@/stores/adminInfo'
-import { useDictData } from '@/stores/dictData'
-import { useRoute } from 'vue-router'
-import Default from '@/layouts/admin/container/default.vue'
-import Classic from '@/layouts/admin/container/classic.vue'
-import Streamline from '@/layouts/admin/container/streamline.vue'
-import Double from '@/layouts/admin/container/double.vue'
-import { onMounted, onBeforeMount } from 'vue'
-import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
-import router from '@/router/index'
-import { useEventListener } from '@vueuse/core'
-import { isEmpty } from 'lodash-es'
-import { setNavTabsWidth } from '@/utils/layout'
-import { adminBaseRoutePath } from '@/router/static'
-import { getRouteMenu, dictDataCache } from '@/api/auth'
-import { getAreaList, areaSelect } from '@/api/common'
-import { BasicDictData } from '@/stores/interface'
-import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'
-
-defineOptions({
-    components: { Default, Classic, Streamline, Double }
-})
-
-const navTabs = useNavTabs()
-const config = useConfig()
-const route = useRoute()
-const adminInfo = useAdminInfo()
-const dictData = useDictData()
-const state = reactive({
-    autoMenuCollapseLock: false
-})
-
-onMounted(() => {
-    // if (!adminInfo.token) return router.push({ name: 'login' })
-
-    init()
-    setNavTabsWidth()
-    useEventListener(window, 'resize', setNavTabsWidth)
-})
-onBeforeMount(() => {
-    onAdaptiveLayout()
-    useEventListener(window, 'resize', onAdaptiveLayout)
-})
-
-const init = async () => {
-    await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(),getAllUserSimpleList()]).then(res => {
-        dictData.state.area = res[0].data
-        dictData.state.basic = res[1].data
-        // dictData.state.userList=res[4].data
-        adminInfo.dataFill(res[2].data)
-        // dictData.state.areaTree = res[3].data
-    })
-    /**
-     * 后台初始化请求，获取站点配置，动态路由等信息
-     */
-    getRouteMenu().then((res: any) => {
-        const handlerMenu = (data: any) => {
-            data.forEach((item: any) => {
-                item.routePath =
-                    item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
-                item.path = item.routePath
-                item.name = item.routePath
-                item.keepalive = item.routePath
-                item.component = item.routeName
-                    ? item.routeName.indexOf('/src/views/') > -1
-                        ? item.routeName
-                        : `/src/views/${item.routeName}/index.vue`
-                    : ''
-                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
-                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
-                if (item.children) {
-                    handlerMenu(item.children)
-                }
-            })
-        }
-        handlerMenu(res.data)
-        handleAdminRoute(res.data)
-        if (route.params.to) {
-            const lastRoute = JSON.parse(route.params.to as string)
-            if (lastRoute.path != adminBaseRoutePath) {
-                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
-                routePush({ path: lastRoute.path, query: query })
-                return
-            }
-        }
-        // 跳转到第一个菜单
-        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
-        if (firstRoute) routePush(firstRoute.path)
-    })
-}
-
-const onAdaptiveLayout = () => {
-    let defaultBeforeResizeLayout = {
-        layoutMode: config.layout.layoutMode,
-        menuCollapse: config.layout.menuCollapse
-    }
-
-    const clientWidth = document.body.clientWidth
-    if (clientWidth < 1024) {
-        /**
-         * 锁定窗口改变自动调整 menuCollapse
-         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
-         */
-        if (!state.autoMenuCollapseLock) {
-            state.autoMenuCollapseLock = true
-            config.setLayout('menuCollapse', true)
-        }
-        config.setLayout('shrink', true)
-        config.setLayoutMode('Classic')
-    } else {
-        state.autoMenuCollapseLock = false
-        config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
-        config.setLayout('shrink', false)
-        config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
-    }
-}
-</script>
+<template>
+    <component :is='config.layout.layoutMode'></component>
+</template>
+
+<script setup lang='ts'>
+import { reactive } from 'vue'
+import { useConfig } from '@/stores/config'
+import { useNavTabs } from '@/stores/navTabs'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { useDictData } from '@/stores/dictData'
+import { useRoute } from 'vue-router'
+import Default from '@/layouts/admin/container/default.vue'
+import Classic from '@/layouts/admin/container/classic.vue'
+import Streamline from '@/layouts/admin/container/streamline.vue'
+import Double from '@/layouts/admin/container/double.vue'
+import { onMounted, onBeforeMount } from 'vue'
+import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
+import router from '@/router/index'
+import { useEventListener } from '@vueuse/core'
+import { isEmpty } from 'lodash-es'
+import { setNavTabsWidth } from '@/utils/layout'
+import { adminBaseRoutePath } from '@/router/static'
+import { getRouteMenu, dictDataCache } from '@/api/auth'
+import { getAreaList, areaSelect } from '@/api/common'
+import { BasicDictData } from '@/stores/interface'
+import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'
+
+defineOptions({
+    components: { Default, Classic, Streamline, Double }
+})
+
+const navTabs = useNavTabs()
+const config = useConfig()
+const route = useRoute()
+const adminInfo = useAdminInfo()
+const dictData = useDictData()
+const state = reactive({
+    autoMenuCollapseLock: false
+})
+
+onMounted(() => {
+    // if (!adminInfo.token) return router.push({ name: 'login' })
+
+    init()
+    setNavTabsWidth()
+    useEventListener(window, 'resize', setNavTabsWidth)
+})
+onBeforeMount(() => {
+    onAdaptiveLayout()
+    useEventListener(window, 'resize', onAdaptiveLayout)
+})
+
+const init = async () => {
+    await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(),getAllUserSimpleList()]).then(res => {
+        dictData.state.area = res[0].data
+        dictData.state.basic = res[1].data
+        // dictData.state.userList=res[4].data
+        adminInfo.dataFill(res[2].data)
+        // dictData.state.areaTree = res[3].data
+    })
+    /**
+     * 后台初始化请求，获取站点配置，动态路由等信息
+     */
+    getRouteMenu().then((res: any) => {
+        const handlerMenu = (data: any) => {
+            data.forEach((item: any) => {
+                item.routePath =
+                    item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
+                item.path = item.routePath
+                item.name = item.routePath
+                item.keepalive = item.routePath
+                item.component = item.routeName
+                    ? item.routeName.indexOf('/src/views/') > -1
+                        ? item.routeName
+                        : `/src/views/${item.routeName}/index.vue`
+                    : ''
+                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
+                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
+                if (item.children) {
+                    handlerMenu(item.children)
+                }
+            })
+        }
+        handlerMenu(res.data)
+        handleAdminRoute(res.data)
+        if (route.params.to) {
+            const lastRoute = JSON.parse(route.params.to as string)
+
+            if (lastRoute.path != adminBaseRoutePath) {
+                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
+                routePush({ path: lastRoute.path, query: query })
+                return
+            }
+        }
+        // 跳转到第一个菜单
+        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+        if (firstRoute) routePush(firstRoute.path)
+    })
+}
+
+const onAdaptiveLayout = () => {
+    let defaultBeforeResizeLayout = {
+        layoutMode: config.layout.layoutMode,
+        menuCollapse: config.layout.menuCollapse
+    }
+
+    const clientWidth = document.body.clientWidth
+    if (clientWidth < 1024) {
+        /**
+         * 锁定窗口改变自动调整 menuCollapse
+         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
+         */
+        if (!state.autoMenuCollapseLock) {
+            state.autoMenuCollapseLock = true
+            config.setLayout('menuCollapse', true)
+        }
+        config.setLayout('shrink', true)
+        config.setLayoutMode('Classic')
+    } else {
+        state.autoMenuCollapseLock = false
+        config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
+        config.setLayout('shrink', false)
+        config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
+    }
+}
+</script>
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 49fbbf7..545f3b0 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -10,7 +10,7 @@ import { compact, isEmpty, reverse } from 'lodash-es'
 import { isAdminApp } from '@/utils/common'
 import { getRouteMenu, dictDataCache } from '@/api/auth'
 import { adminBaseRoutePath } from '@/router/static'
-const route = useRouter()
+const route:any = useRouter()
 /**
  * 导航失败有错误消息的路由push
  * @param to — 导航位置，同 router.push
diff --git a/src/views/govern/reportForms/bind.vue b/src/views/govern/reportForms/bind.vue
index 1e41c0e..53701f4 100644
--- a/src/views/govern/reportForms/bind.vue
+++ b/src/views/govern/reportForms/bind.vue
@@ -1,76 +1,115 @@
-<template>
-    <el-tabs v-model.trim="activeName" class="demo-tabs">
-        <el-tab-pane label="数据单位" name="0">
-            绑定数据单位:
-            <el-cascader :popper-append-to-body="false" ref="cascaderUnit" placeholder="请选择数据单位" v-model.trim="value"
-                :options="options1" filterable @change="handleChange" :props="{
-                    value: 'code',
-                    label: 'name'
-                }"></el-cascader>
-        </el-tab-pane>
-        <el-tab-pane label="数据指标" name="1">
-            绑定数据指标:
-            <el-cascader :popper-append-to-body="false" ref="cascaderUnit" placeholder="请选择数据指标" v-model.trim="value"
-                :options="options2" filterable @change="handleChange" :props="{
-                    value: 'name',
-                    label: 'showName'
-                }"></el-cascader>
-        </el-tab-pane>
-        <el-tab-pane label="合格率判定" name="2">
-            绑定合格率判定:
-            <el-cascader :popper-append-to-body="false" ref="cascaderhgl" placeholder="请选择数据合格率" v-model.trim="value"
-                :options="options3" filterable @change="handleChange" :props="{
-                    value: 'name',
-                    label: 'showName'
-                }"></el-cascader>
-        </el-tab-pane>
-        <el-tab-pane label="监测点台账指标" name="3">
-            绑定数据指标:
-            <el-cascader :popper-append-to-body="false" ref="cascaderjcd" placeholder="请选择监测点台账" v-model.trim="value"
-                :options="options4" filterable @change="handleChange" :props="{
-                    value: 'name',
-                    label: 'showName'
-                }"></el-cascader>
-        </el-tab-pane>
-    </el-tabs>
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { codeDicTree } from '@/api/system-boot/dictTree'
-import { targetLimitChooseTree, getIndex, terminalChooseTree } from '@/api/harmonic-boot/luckyexcel'
-const emit = defineEmits(['setValue'])
-
-const activeName = ref('0')
-const value = ref([])
-
-const options1 = ref([])
-const options2 = ref([])
-const options3 = ref([])
-const options4: any = ref([])
-
-const handleChange = (e: any) => {
-    value.value = []
-
-    emit('setValue', e)
-}
-
-codeDicTree({ code: 'Device_Unit' }).then(res => {
-    options1.value = res.data
-})
-getIndex().then(res => {
-    options2.value = res.data
-})
-targetLimitChooseTree().then(res => {
-    options3.value = res.data
-})
-terminalChooseTree().then(res => {
-    options4.value = res.data
-})
-
-onMounted(() => { })
-</script>
-<style lang="scss" scoped>
-:deep(.el-tab-pane) {
-    padding: 10px;
-}
-</style>
+<template>
+    <el-tabs v-model.trim="activeName" class="demo-tabs">
+        <el-tab-pane label="数据单位" name="0">
+            绑定数据单位:
+            <el-cascader
+                :popper-append-to-body="false"
+                ref="cascaderUnit"
+                placeholder="请选择数据单位"
+                v-model.trim="value"
+                :options="options1"
+                filterable
+                @change="handleChange"
+                :props="{
+                    value: 'code',
+                    label: 'name'
+                }"
+            ></el-cascader>
+        </el-tab-pane>
+        <el-tab-pane label="数据指标" name="1">
+            <div class="mb10" style="text-align: end;">
+                <el-radio-group v-model="frontAndBack">
+                    <el-radio-button label="治理前" :value="0" />
+                    <el-radio-button label="治理后" :value="1" />
+                </el-radio-group>
+            </div>
+            <div>
+                绑定数据指标:
+                <el-cascader
+                    :popper-append-to-body="false"
+                    ref="cascaderUnit"
+                    placeholder="请选择数据指标"
+                    v-model.trim="value"
+                    :options="options2"
+                    filterable
+                    @change="handleChange"
+                    :props="{
+                        value: 'name',
+                        label: 'showName'
+                    }"
+                ></el-cascader>
+            </div>
+        </el-tab-pane>
+        <el-tab-pane label="合格率判定" name="2">
+            绑定合格率判定:
+            <el-cascader
+                :popper-append-to-body="false"
+                ref="cascaderhgl"
+                placeholder="请选择数据合格率"
+                v-model.trim="value"
+                :options="options3"
+                filterable
+                @change="handleChange"
+                :props="{
+                    value: 'name',
+                    label: 'showName'
+                }"
+            ></el-cascader>
+        </el-tab-pane>
+        <el-tab-pane label="监测点台账指标" name="3">
+            绑定数据指标:
+            <el-cascader
+                :popper-append-to-body="false"
+                ref="cascaderjcd"
+                placeholder="请选择监测点台账"
+                v-model.trim="value"
+                :options="options4"
+                filterable
+                @change="handleChange"
+                :props="{
+                    value: 'name',
+                    label: 'showName'
+                }"
+            ></el-cascader>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { codeDicTree } from '@/api/system-boot/dictTree'
+import { targetLimitChooseTree, getIndex, terminalChooseTree } from '@/api/harmonic-boot/luckyexcel'
+const emit = defineEmits(['setValue'])
+
+const activeName = ref('0')
+const value = ref([])
+
+const options1 = ref([])
+const options2 = ref([])
+const options3 = ref([])
+const options4: any = ref([])
+const frontAndBack = ref(0)
+
+const handleChange = (e: any) => {
+    value.value = []
+    emit('setValue', e, activeName.value == '1' ? frontAndBack.value : 0)
+}
+codeDicTree({ code: 'Device_Unit' }).then(res => {
+    options1.value = res.data
+})
+getIndex().then(res => {
+    options2.value = res.data
+})
+targetLimitChooseTree().then(res => {
+    options3.value = res.data
+})
+terminalChooseTree().then(res => {
+    options4.value = res.data
+})
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+:deep(.el-tab-pane) {
+    padding: 10px;
+}
+</style>
diff --git a/src/views/govern/reportForms/form.vue b/src/views/govern/reportForms/form.vue
index b4fadd1..4336470 100644
--- a/src/views/govern/reportForms/form.vue
+++ b/src/views/govern/reportForms/form.vue
@@ -1,107 +1,107 @@
-<template>
-    <el-dialog draggable :title="title" v-model.trim="formVisible" width="30%" :before-close="closeDialog">
-        <el-form :model="formdata" label-width="100px" :rules="rules" ref="ruleForm">
-            <el-form-item label="模板名称:" prop="name">
-                <el-input maxlength="32" show-word-limit placeholder="模板名称" v-model.trim="formdata.name"
-                    style="width: 100%"></el-input>
-            </el-form-item>
-            <el-form-item label="部门:" prop="deptId">
-                <Area v-model.trim="formdata.deptId" style="width: 100%" collapse-tags
-                    :props="{ multiple: true, label: 'name', value: 'id', emitPath: false }" />
-            </el-form-item>
-
-            <el-form-item label="模板类型:" prop="reportType">
-                <el-select style="width: 100%" v-model.trim="formdata.reportType" placeholder="请选择模板类型">
-                    <el-option v-for="item in classificationData" :key="item.id" :label="item.label"
-                        :value="item.id"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="报表类型:" prop="reportForm">
-                <el-select style="width: 100%" v-model.trim="formdata.reportForm" placeholder="请选择报表类型">
-                    <el-option v-for="item in reportFormList" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <el-button @click="closeDialog">取 消</el-button>
-            <el-button type="primary" @click="preservation">确 定</el-button>
-        </template>
-    </el-dialog>
-</template>
-<script setup lang="ts">
-import Area from '@/components/form/area/index.vue'
-import { getCustomReportTemplateById } from '@/api/harmonic-boot/luckyexcel'
-import { ref, reactive } from 'vue'
-const emit = defineEmits(['submitForm'])
-const title = ref('')
-const list = ref({})
-const ruleForm = ref()
-const formVisible = ref(false)
-const classificationData = [
-    {
-        label: '电能质量报表类型',
-        id: '1'
-    },
-    {
-        label: '用能报表类型',
-        id: '2'
-    }
-]
-const reportFormList = [
-    {
-        value: '1',
-        label: '分析报表'
-    },
-    {
-        value: '2',
-        label: '统计报表'
-    },
-    {
-        value: '3',
-        label: '自定义报表'
-    }
-]
-const rules = {
-    name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
-    deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
-    reportType: [{ required: true, message: '请选择模板类型', trigger: 'change' }],
-    reportForm: [{ required: true, message: '请选择报表类型', trigger: 'change' }]
-}
-const formdata = ref({
-    name: '',
-    deptId: [],
-    reportType: '',
-    reportForm: ''
-})
-// 确定
-const preservation = () => {
-    ruleForm.value.validate((valid: boolean) => {
-        if (valid) {
-            emit('submitForm', formdata.value, title.value)
-         
-        }
-    })
-}
-const shutDown = () => {
-    formVisible.value = false
-}
-
-// 关闭
-const closeDialog = () => {
-    formVisible.value = false
-}
-const open = (text: string, row?: any) => {
-    title.value = text
-    if (row.id) {
-        getCustomReportTemplateById({ id: row.id }).then(res => {
-            formdata.value = res.data
-            formdata.value.deptId = res.data.valueTitle.split(',')
-        })
-    }
-
-    formVisible.value = true
-}
-defineExpose({ open,shutDown })
-</script>
-<style lang="scss" scoped></style>
+<template>
+    <el-dialog draggable :title="title" v-model.trim="formVisible" width="30%" :before-close="closeDialog">
+        <el-form :model="formdata" label-width="100px" :rules="rules" ref="ruleForm">
+            <el-form-item label="模板名称:" prop="name">
+                <el-input maxlength="32" show-word-limit placeholder="模板名称" v-model.trim="formdata.name"
+                    style="width: 100%"></el-input>
+            </el-form-item>
+            <!-- <el-form-item label="部门:" prop="deptId">
+                <Area v-model.trim="formdata.deptId" style="width: 100%" collapse-tags
+                    :props="{ multiple: true, label: 'name', value: 'id', emitPath: false }" />
+            </el-form-item> -->
+
+            <el-form-item label="模板类型:" prop="reportType">
+                <el-select style="width: 100%" v-model.trim="formdata.reportType" placeholder="请选择模板类型">
+                    <el-option v-for="item in classificationData" :key="item.id" :label="item.label"
+                        :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="报表类型:" prop="reportForm">
+                <el-select style="width: 100%" v-model.trim="formdata.reportForm" placeholder="请选择报表类型">
+                    <el-option v-for="item in reportFormList" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="closeDialog">取 消</el-button>
+            <el-button type="primary" @click="preservation">确 定</el-button>
+        </template>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import Area from '@/components/form/area/index.vue'
+import { getCustomReportTemplateById } from '@/api/harmonic-boot/luckyexcel'
+import { ref, reactive } from 'vue'
+const emit = defineEmits(['submitForm'])
+const title = ref('')
+const list = ref({})
+const ruleForm = ref()
+const formVisible = ref(false)
+const classificationData = [
+    {
+        label: '电能质量报表类型',
+        id: '1'
+    },
+    {
+        label: '用能报表类型',
+        id: '2'
+    }
+]
+const reportFormList = [
+    {
+        value: '1',
+        label: '分析报表'
+    },
+    {
+        value: '2',
+        label: '统计报表'
+    },
+    {
+        value: '3',
+        label: '自定义报表'
+    }
+]
+const rules = {
+    name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
+    deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
+    reportType: [{ required: true, message: '请选择模板类型', trigger: 'change' }],
+    reportForm: [{ required: true, message: '请选择报表类型', trigger: 'change' }]
+}
+const formdata = ref({
+    name: '',
+    deptId: [],
+    reportType: '',
+    reportForm: ''
+})
+// 确定
+const preservation = () => {
+    ruleForm.value.validate((valid: boolean) => {
+        if (valid) {
+            emit('submitForm', formdata.value, title.value)
+         
+        }
+    })
+}
+const shutDown = () => {
+    formVisible.value = false
+}
+
+// 关闭
+const closeDialog = () => {
+    formVisible.value = false
+}
+const open = (text: string, row?: any) => {
+    title.value = text
+    if (row.id) {
+        getCustomReportTemplateById({ id: row.id }).then(res => {
+            formdata.value = res.data
+            formdata.value.deptId = res.data.valueTitle.split(',')
+        })
+    }
+
+    formVisible.value = true
+}
+defineExpose({ open,shutDown })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/govern/reportForms/index.vue b/src/views/govern/reportForms/index.vue
index f817799..b1cc149 100644
--- a/src/views/govern/reportForms/index.vue
+++ b/src/views/govern/reportForms/index.vue
@@ -1,135 +1,135 @@
-<template>
-    <div class="default-main">
-        <div v-show="show && lookShow">
-            <TableHeader ref="TableHeaderRef">
-                <template #operation>
-                    <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
-                </template>
-            </TableHeader>
-            <Table ref="tableRef" />
-        </div>
-        <luckysheet ref="luckysheetRef" v-if="!show" @shutDown="shutDown" />
-        <!-- 查看 -->
-        <look ref="lookRef" v-if="!lookShow" @shutDown="shutDown" />
-        <!-- 绑定 -->
-        <department ref="departmentRef" />
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide, nextTick } from 'vue'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import { delTemplate } from '@/api/harmonic-boot/luckyexcel'
-import { useDictData } from '@/stores/dictData'
-import { ElMessage } from 'element-plus'
-import luckysheet from './luckysheet.vue'
-import look from './look.vue'
-import department from './department.vue'
-defineOptions({
-    name: 'govern/reportForms/index'
-})
-const luckysheetRef = ref()
-const lookRef = ref()
-const departmentRef = ref()
-const show = ref(true)
-const lookShow = ref(true)
-const tableStore: any = new TableStore({
-    url: '/harmonic-boot/customReport/getTemplateList',
-    method: 'POST',
-    isWebPaging: true,
-    column: [
-        { field: 'name', title: '模板名称' },
-        { field: 'reportForm', title: '模板类型',formatter: (row) => {
-            return row.cellValue == 1 ? '电能质量报表类型' : row.cellValue == 2 ? '用能报表类型' : ''
-} },
-        { field: 'updateBy', title: '更新用户' },
-        { field: 'createTime', title: '创建时间' , sortable: true},
-        { field: 'updateTime', title: '更新时间', sortable: true },
-        {
-            title: '操作',
-            width: '220',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '查看 ',
-                    type: 'primary',
-                    icon: 'el-icon-Plus',
-                    render: 'basicButton',
-                    click: row => {
-                        lookShow.value = false
-                        setTimeout(() => {
-                            lookRef.value.open(row)
-                        }, 10)
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-Plus',
-                    render: 'basicButton',
-                    click: row => {
-                        show.value = false
-                        setTimeout(() => {
-                            luckysheetRef.value.open('编辑报表模板', row)
-                        }, 10)
-                    }
-                },
-                // {
-                //     name: 'edit',
-                //     title: '绑定',
-                //     type: 'primary',
-                //     icon: 'el-icon-Plus',
-                //     render: 'basicButton',
-                //     click: row => {
-                //         departmentRef.value.open(row)
-                //     }
-                // },
-                {
-                    name: 'del',
-                    text: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除？'
-                    },
-                    click: row => {
-                        delTemplate({ tempId: row.id, deptId: row.deptId }).then(res => {
-                            ElMessage.success('删除成功')
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-
-    loadCallback: () => {}
-})
-tableStore.table.params = {}
-tableStore.table.params.pageSize = 20
-tableStore.table.params.pageNum = 1
-
-provide('tableStore', tableStore)
-// 关闭
-const shutDown = () => {
-    show.value = true
-    lookShow.value = true
-    tableStore.index()
-}
-const add = () => {
-    show.value = false
-    setTimeout(() => {
-        luckysheetRef.value.open('新增报表模板')
-    }, 10)
-}
-onMounted(() => {
-    tableStore.index()
-})
-</script>
+<template>
+    <div class="default-main">
+        <div v-show="show && lookShow">
+            <TableHeader ref="TableHeaderRef">
+                <template #operation>
+                    <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
+                </template>
+            </TableHeader>
+            <Table ref="tableRef" />
+        </div>
+        <luckysheet ref="luckysheetRef" v-if="!show" @shutDown="shutDown" />
+        <!-- 查看 -->
+        <look ref="lookRef" v-if="!lookShow" @shutDown="shutDown" />
+        <!-- 绑定 -->
+        <department ref="departmentRef" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { delTemplate } from '@/api/harmonic-boot/luckyexcel'
+import { useDictData } from '@/stores/dictData'
+import { ElMessage } from 'element-plus'
+import luckysheet from './luckysheet.vue'
+import look from './look.vue'
+import department from './department.vue'
+defineOptions({
+    name: 'govern/reportForms/index'
+})
+const luckysheetRef = ref()
+const lookRef = ref()
+const departmentRef = ref()
+const show = ref(true)
+const lookShow = ref(true)
+const tableStore: any = new TableStore({
+    url: '/harmonic-boot/customReport/getTemplateList',
+    method: 'POST',
+    isWebPaging: true,
+    column: [
+        { field: 'name', title: '模板名称' },
+        { field: 'reportForm', title: '模板类型',formatter: (row) => {
+            return row.cellValue == 1 ? '电能质量报表类型' : row.cellValue == 2 ? '用能报表类型' : ''
+} },
+        { field: 'updateBy', title: '更新用户' },
+        { field: 'createTime', title: '创建时间' , sortable: true},
+        { field: 'updateTime', title: '更新时间', sortable: true },
+        {
+            title: '操作',
+            width: '220',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '查看 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        lookShow.value = false
+                        setTimeout(() => {
+                            lookRef.value.open(row)
+                        }, 10)
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        show.value = false
+                        setTimeout(() => {
+                            luckysheetRef.value.open('编辑报表模板', row)
+                        }, 10)
+                    }
+                },
+                // {
+                //     name: 'edit',
+                //     title: '绑定',
+                //     type: 'primary',
+                //     icon: 'el-icon-Plus',
+                //     render: 'basicButton',
+                //     click: row => {
+                //         departmentRef.value.open(row)
+                //     }
+                // },
+                {
+                    name: 'del',
+                    text: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除？'
+                    },
+                    click: row => {
+                        delTemplate({ tempId: row.id, deptId: row.deptId }).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {}
+})
+tableStore.table.params = {}
+tableStore.table.params.pageSize = 20
+tableStore.table.params.pageNum = 1
+
+provide('tableStore', tableStore)
+// 关闭
+const shutDown = () => {
+    show.value = true
+    lookShow.value = true
+    tableStore.index()
+}
+const add = () => {
+    show.value = false
+    setTimeout(() => {
+        luckysheetRef.value.open('新增报表模板')
+    }, 10)
+}
+onMounted(() => {
+    tableStore.index()
+})
+</script>
diff --git a/src/views/govern/reportForms/luckysheet.vue b/src/views/govern/reportForms/luckysheet.vue
index 7362603..212aec1 100644
--- a/src/views/govern/reportForms/luckysheet.vue
+++ b/src/views/govern/reportForms/luckysheet.vue
@@ -1,8 +1,14 @@
 <template>
     <div class="default-main">
         <div class="mb10" style="display: flex; justify-content: flex-end">
-            <el-upload ref="upload" action="" :auto-upload="false" :show-file-list="false" :limit="1"
-                :on-change="beforeUpload">
+            <el-upload
+                ref="upload"
+                action=""
+                :auto-upload="false"
+                :show-file-list="false"
+                :limit="1"
+                :on-change="beforeUpload"
+            >
                 <el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
             </el-upload>
             <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
@@ -54,13 +60,13 @@ const info = () => {
     luckysheet.create(options.value)
 }
 //绑定value
-const setValue = (e: any) => {
+const setValue = (e: any, frontAndBack: number) => {
     let data = luckysheet.getRange()
     luckysheet.setCellValue(
         data[0].row[0],
         data[0].column[0],
         {
-            v: e[e.length - 1],
+            v: frontAndBack == 0 ? e[e.length - 1] : `~` + e[e.length - 1],
             tr: e
         }
         //  checkedNodes[0].data.label
@@ -119,24 +125,28 @@ const submitForm = (formdata: any, text: string) => {
     params.append('reportForm', formdata.reportForm)
     ElMessage.info('正在保存请稍等!')
     if (text == '新增报表模板') {
-        addTemplate(params).then(res => {
-            ElMessage.success('新增成功!')
-            formFer.value.shutDown()
-            emit('shutDown')
-        }).catch(err => {
-            ElMessage.error('保存失败!')
-            formFer.value.shutDown()
-        })
+        addTemplate(params)
+            .then(res => {
+                ElMessage.success('新增成功!')
+                formFer.value.shutDown()
+                emit('shutDown')
+            })
+            .catch(err => {
+                ElMessage.error('保存失败!')
+                formFer.value.shutDown()
+            })
     } else if (text == '编辑报表模板') {
         params.append('id', list.value.id)
-        dateTemplateup(params).then(res => {
-            ElMessage.success('编辑成功!')
-            formFer.value.shutDown()
-            emit('shutDown')
-        }).catch(err => {
-            ElMessage.error('保存失败!')
-            formFer.value.shutDown()
-        })
+        dateTemplateup(params)
+            .then(res => {
+                ElMessage.success('编辑成功!')
+                formFer.value.shutDown()
+                emit('shutDown')
+            })
+            .catch(err => {
+                ElMessage.error('保存失败!')
+                formFer.value.shutDown()
+            })
     }
 }
 const open = async (text: string, row?: any) => {
@@ -150,7 +160,7 @@ const open = async (text: string, row?: any) => {
     info()
 }
 defineExpose({ open })
-onMounted(() => { })
+onMounted(() => {})
 </script>
 <style lang="scss" scoped>
 :deep(.el-tab-pane) {
diff --git a/src/views/setting/dictionary/component/add.vue b/src/views/setting/dictionary/component/add.vue
index 674b967..51776da 100644
--- a/src/views/setting/dictionary/component/add.vue
+++ b/src/views/setting/dictionary/component/add.vue
@@ -19,7 +19,7 @@
                 <el-form-item class="top" label="组件路径" prop="path">
                     <el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
                 </el-form-item>
-                <el-form-item class="top" label="组件查询时间">
+                <!-- <el-form-item class="top" label="组件查询时间">
                     <el-radio-group v-model="form.timeKey" style="width: 100%">
                         <el-radio-button label="年" value="1" />
                         <el-radio-button label="季" value="2" />
@@ -27,7 +27,7 @@
                         <el-radio-button label="周" value="4" />
                         <el-radio-button label="日" value="5" />
                     </el-radio-group>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item class="top" label="组件排序" prop="sort">
                     <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
                 </el-form-item>
@@ -54,15 +54,13 @@ import { ref, inject, onMounted, type Component, defineAsyncComponent, h, markRa
 import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useDictData } from '@/stores/dictData'
-import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
 import IconSelector from '@/components/baInput/components/iconSelector.vue'
 import html2canvas from 'html2canvas'
-
+const emit = defineEmits(['cancel','submit'])
 const dictData = useDictData()
 const dialogVisible = ref(false)
 const title = ref('')
-const tableStore = inject('tableStore') as TableStore
 const formRef = ref()
 // 注意不要和表单ref的命名冲突
 const form = ref<anyObj>({
@@ -121,6 +119,7 @@ const submit = () => {
                     image: url
                 }).then(res => {
                     ElMessage.success('新增成功!')
+                    emit('submit')
                     cancel()
                 })
             } else {
@@ -131,6 +130,7 @@ const submit = () => {
                     image: url
                 }).then(res => {
                     ElMessage.success('修改成功!')
+                       emit('submit')
                     cancel()
                 })
             }
@@ -176,7 +176,7 @@ const registerComponent = (path: string): Component | string | null => {
     }
 }
 const cancel = () => {
-    tableStore.index()
+    emit('cancel')
     dialogVisible.value = false
 }
 defineExpose({ open })
diff --git a/src/views/setting/dictionary/component/addTree.vue b/src/views/setting/dictionary/component/addTree.vue
new file mode 100644
index 0000000..fece197
--- /dev/null
+++ b/src/views/setting/dictionary/component/addTree.vue
@@ -0,0 +1,139 @@
+<template>
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
+        <div style="display: flex">
+            <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
+                <el-form-item class="top" label="上级树">
+                    <el-cascader
+                        v-model="form.system"
+                        :options="customDeptOption"
+                        :props="props"
+                        clearable
+                        filterable
+                        placeholder="请选择上级树"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+                <el-form-item class="top" label="树名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
+                </el-form-item>
+
+                <el-form-item class="top" label="树排序" prop="sort">
+                    <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="cancel">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject, onMounted, type Component, defineAsyncComponent, h, markRaw } from 'vue'
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useDictData } from '@/stores/dictData'
+import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
+
+import { componentTree } from '@/api/user-boot/user'
+const dictData = useDictData()
+const emit = defineEmits(['cancel', 'submit'])
+const dialogVisible = ref(false)
+const title = ref('')
+const formRef = ref()
+// 注意不要和表单ref的命名冲突
+const form = ref<anyObj>({
+    name: '',
+    sort: 100,
+    system: ''
+})
+const props = { label: 'name', value: 'id', checkStrictly: true }
+const rules = {
+    name: [{ required: true, message: '请输输入树名称', trigger: 'blur' }],
+    system: [{ required: true, message: '请先择父组件节点', trigger: 'change' }],
+
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+}
+const customDeptOption: any = ref([])
+onMounted(() => {})
+
+const open = (text: string, data?: anyObj) => {
+    getFather()
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        let Data = JSON.parse(JSON.stringify(data))
+        form.value.system = Data.systemType
+        form.value.name = Data.name
+        form.value.sort = Data.sort
+    }
+}
+// 查询父节点
+const getFather = () => {
+    componentTree().then(res => {
+        customDeptOption.value = deletePathNotNull(JSON.parse(JSON.stringify(res.data)))
+    })
+}
+
+// 递归删除path不为null的数据
+function deletePathNotNull(data:any) {
+    // 若为数组，遍历处理每个元素
+    if (Array.isArray(data)) {
+        const filtered = []
+        for (let item of data) {
+            // 递归处理子节点
+            if (item.children && item.children.length > 0) {
+                item.children = deletePathNotNull(item.children)
+            }
+            // 仅保留path为null或空字符串的节点
+            if (item.path === null || item.path === '') {
+                filtered.push(item)
+            }
+        }
+        return filtered
+    }
+    // 若为单个对象（递归子节点时用）
+    if (typeof data === 'object' && data !== null) {
+        if (data.children && data.children.length > 0) {
+            data.children = deletePathNotNull(data.children)
+        }
+        return data.path === null || data.path === '' ? data : null
+    }
+    return data
+}
+const submit = () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (title.value == '新增树') {
+                await componentAdd({
+                    ...form.value,
+                    systemType: form.value.system[0],
+                    pid: form.value.system[1]
+                }).then(res => {
+                    ElMessage.success('新增成功!')
+                    emit('submit')
+                    cancel()
+                })
+            } else {
+                await componentEdit({
+                    ...form.value,
+                    systemType: form.value.system[0],
+                    pid: form.value.system[1]
+                }).then(res => {
+                    ElMessage.success('修改成功!')
+                    emit('submit')
+                    cancel()
+                })
+            }
+        }
+    })
+}
+
+const cancel = () => {
+    emit('cancel')
+    dialogVisible.value = false
+}
+defineExpose({ open })
+</script>
diff --git a/src/views/setting/dictionary/component/index.vue b/src/views/setting/dictionary/component/index.vue
index 1eec510..05fc27d 100644
--- a/src/views/setting/dictionary/component/index.vue
+++ b/src/views/setting/dictionary/component/index.vue
@@ -2,22 +2,29 @@
     <div class="default-main">
         <TableHeader :showSearch="false">
             <template v-slot:operation>
-                <el-button type="primary" @click="add" icon="el-icon-Plus">新增</el-button>
+                <el-button type="primary" @click="addTree" icon="el-icon-Plus">新增树</el-button>
+                <el-button type="primary" @click="add" icon="el-icon-Plus">新增组件</el-button>
             </template>
         </TableHeader>
-        <Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
-            :scroll-y="{ enabled: true }" />
-        <Add ref="addRef" v-if="addFlag" @onSubmit="tableStore.index()" />
+        <Table
+            ref="tableRef"
+            :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
+            :scroll-y="{ enabled: true }"
+        />
+        <Add ref="addRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
+        <!-- 新增树 -->
+        <Tree ref="treeRef" v-if="addFlag" @cancel="cancel" @submit="tableStore.index()" />
     </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, provide,nextTick } from 'vue'
+import { ref, onMounted, provide, nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import { useDictData } from '@/stores/dictData'
 import { ElMessage } from 'element-plus'
 import TableHeader from '@/components/table/header/index.vue'
 import Add from './add.vue'
+import Tree from './addTree.vue'
 import { deleteSubassembly } from '@/api/user-boot/dept'
 defineOptions({
     name: 'component'
@@ -25,6 +32,7 @@ defineOptions({
 const addRef = ref()
 const addFlag = ref(false)
 const tableRef = ref()
+const treeRef = ref()
 const treeData: any = ref([])
 const tableStore = new TableStore({
     url: '/user-boot/component/componentTree',
@@ -39,7 +47,7 @@ const tableStore = new TableStore({
             width: '80',
             render: 'icon'
         },
-        { field: 'code', title: '组件标识', minWidth: '100', },
+        { field: 'code', title: '组件标识', minWidth: '100' },
         { field: 'path', title: '组件路径' },
         { field: 'image', title: '组件展示', render: 'image' },
         {
@@ -53,13 +61,18 @@ const tableStore = new TableStore({
                     type: 'primary',
                     icon: 'el-icon-Plus',
                     render: 'basicButton',
-                    disabled: row => {
-                        return row.path == '' || row.path == null
-                    },
+
                     click: row => {
                         addFlag.value = true
                         setTimeout(() => {
-                            addRef.value.open('修改组件', row)
+                            if (row.path == '' || row.path == null) {
+                                // 修改树
+                                treeRef.value.open('修改树', row)
+                            } else {
+                                // 组件修改
+
+                                addRef.value.open('修改组件', row)
+                            }
                         }, 100)
                     }
                 },
@@ -69,9 +82,7 @@ const tableStore = new TableStore({
                     type: 'danger',
                     icon: 'el-icon-Delete',
                     render: 'confirmButton',
-                    disabled: row => {
-                        return row.path == '' || row.path == null
-                    },
+
                     popconfirm: {
                         confirmButtonText: '确认',
                         cancelButtonText: '取消',
@@ -79,10 +90,13 @@ const tableStore = new TableStore({
                         title: '确定删除？'
                     },
                     click: row => {
-                        deleteSubassembly({ id: row.id }).then(() => {
-                            ElMessage.success('删除成功!')
-                            tableStore.index()
-                        })
+                        if (row.path == '' || row.path == null) {
+                        } else {
+                            deleteSubassembly({ id: row.id }).then(() => {
+                                ElMessage.success('删除成功!')
+                                tableStore.index()
+                            })
+                        }
                     }
                 }
             ]
@@ -127,6 +141,16 @@ const add = () => {
         addRef.value.open('新增组件')
     }, 100)
 }
+// 新增数
+const addTree = () => {
+    addFlag.value = true
+    setTimeout(() => {
+        treeRef.value.open('新增树')
+    }, 100)
+}
+const cancel = () => {
+    addFlag.value = false
+}
 provide('tableStore', tableStore)
 onMounted(() => {
     tableStore.index()
diff --git a/src/views/setting/dictionary/tree/popupForm.vue b/src/views/setting/dictionary/tree/popupForm.vue
index 805ba46..59568aa 100644
--- a/src/views/setting/dictionary/tree/popupForm.vue
+++ b/src/views/setting/dictionary/tree/popupForm.vue
@@ -1,84 +1,84 @@
-<template>
-    <el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" :title="title">
-        <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
-                <el-form-item label="字典名称:" prop="name">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入字典名称"></el-input>
-                </el-form-item>
-                <el-form-item label="序号:" prop="sort" class="top">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.sort" placeholder="请输入序号"></el-input>
-                </el-form-item>
-                <el-form-item label="编码:" prop="code" class="top">
-                    <el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入字典编码"></el-input>
-                </el-form-item>
-                <el-form-item label="描述:" class="top">
-                    <el-input maxlength="32" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" show-word-limit v-model.trim="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: 100,
-    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 = 100
-        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>
+<template>
+    <el-dialog class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
+                <el-form-item label="字典名称:" prop="name">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入字典名称"></el-input>
+                </el-form-item>
+                <el-form-item label="序号:" prop="sort" class="top">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.sort" placeholder="请输入序号"></el-input>
+                </el-form-item>
+                <el-form-item label="编码:" prop="code" class="top">
+                    <el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入字典编码"></el-input>
+                </el-form-item>
+                <el-form-item label="描述:" class="top">
+                    <el-input maxlength="32" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" show-word-limit v-model.trim="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: 100,
+    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 = 100
+        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>