修改报表绑定指标

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 })

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>

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()

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>