修改组件录入、新增项目管理

2025-05-28 16:45:50 +08:00
parent 06d4f0ec91
commit 80bdda9abc
8 changed files with 845 additions and 321 deletions
--- a/src/views/setting/dictionary/component/add.vue
+++ b/src/views/setting/dictionary/component/add.vue
@@ -1,28 +1,46 @@
 <template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
-        <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef">
-            <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="system">
-                <el-cascader
-                    v-model="form.system"
-                    :options="customDeptOption"
-                    :props="props"
-                    placeholder="请选择父组件节点"
-                    style="width: 100%"
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="930px" :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="组件名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
+                </el-form-item>
+                <el-form-item class="top" label="父组件节点" prop="system">
+                    <el-cascader
+                        v-model="form.system"
+                        :options="customDeptOption"
+                        :props="props"
+                        placeholder="请选择父组件节点"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+                <el-form-item label="组件图标" prop="icon">
+                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                </el-form-item>
+                <el-form-item class="top" label="组件标识" prop="code">
+                    <el-input v-model="form.code" placeholder="请输入组件菜单选取"></el-input>
+                </el-form-item>
+                <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="组件排序" prop="sort">
+                    <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
+                </el-form-item>
+            </el-form>
+            <div style="max-width: 600px; overflow: hidden">
+                <div class="ml10" style="font-weight: 600">组件展示</div>
+                <component
+                    :is="registerComponent(form.path)"
+                    v-if="registerComponent(form.path)"
+                    class="pd10 GridLayout"
+                    :key="form.path"
+                    :height="'350px'"
+                    :width="'533px'"
                />
-            </el-form-item>
-            <el-form-item class="top" label="组件标识" prop="code">
-                <el-input v-model="form.code" placeholder="请输入组件菜单选取"></el-input>
-            </el-form-item>
-            <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="组件排序" prop="sort">
-                <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
-            </el-form-item>
-        </el-form>
+                <!-- <div  class="pd10">组件加载失败...</div> -->
+                <el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
+            </div>
+        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
@@ -32,12 +50,14 @@
    </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, type Component } from 'vue'
 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 dictData = useDictData()
 const dialogVisible = ref(false)
 const title = ref('')
@@ -55,7 +75,8 @@ const props = { label: 'name', value: 'id' }
 const rules = {
    code: [{ required: true, message: '请输入组件标识', trigger: 'blur' }],
    name: [{ required: true, message: '请输输入组件名称', trigger: 'blur' }],
-    system: [{ required: true, message: '请输选父组件节点', trigger: 'change' }],
+    system: [{ required: true, message: '请先择父组件节点', trigger: 'change' }],
+    icon: [{ required: true, message: '请先择组件图标', trigger: 'change' }],
    path: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
 }
@@ -80,23 +101,31 @@ const open = (text: string, data?: anyObj) => {
    }
 }
 const submit = () => {
-    console.log('🚀 ~ form:', form.value)
-    console.log('🚀 ~ formRef.value.validate ~ title.value:', title.value)
-
    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
+            let url = ''
+            await html2canvas(document.querySelector('.GridLayout'), {
+                scale: 2
+            }).then(canvas => {
+                url = canvas.toDataURL('image/png')
+                console.log('🚀 ~ html2canvas ~ url:', url)
+            })
            if (title.value == '新增组件') {
-                await componentAdd({ ...form.value, systemType: form.value.system[0], pid: form.value.system[1] }).then(
-                    res => {
-                        ElMessage.success('新增成功!')
-                        cancel()
-                    }
-                )
+                await componentAdd({
+                    ...form.value,
+                    systemType: form.value.system[0],
+                    pid: form.value.system[1],
+                    image: url
+                }).then(res => {
+                    ElMessage.success('新增成功!')
+                    cancel()
+                })
            } else {
                await componentEdit({
                    ...form.value,
                    systemType: form.value.system[0],
-                    pid: form.value.system[1]
+                    pid: form.value.system[1],
+                    image: url
                }).then(res => {
                    ElMessage.success('修改成功!')
                    cancel()
@@ -105,6 +134,44 @@ const submit = () => {
        }
    })
 }
+// 组件映射
+const componentMap = reactive(new Map<string, Component | string>())
+// 动态注册组件
+const registerComponent = (path: string): Component | string | null => {
+    if (!path) return null
+    if (path.slice(-4) != '.vue') return null
+
+    const cacheKey = path
+
+    // 使用缓存的组件
+    if (componentMap.has(cacheKey)) {
+        return componentMap.get(cacheKey)!
+    }
+
+    try {
+        // 动态导入组件
+        const modules = import.meta.glob('@/views/**/*.vue')
+        if (!modules[path]) {
+            console.error(`组件加载失败: ${path}`)
+            return null
+        }
+
+        const AsyncComponent = defineAsyncComponent({
+            loader: modules[path],
+            loadingComponent: () => h('div', '加载中...'),
+            errorComponent: ({ error }) => h('div', `加载错误: ${error.message}`),
+            delay: 200,
+            timeout: 10000
+        })
+
+        // 保存到映射中
+        componentMap.set(cacheKey, markRaw(AsyncComponent))
+        return AsyncComponent
+    } catch (error) {
+        console.error('注册组件失败:', error)
+        return null
+    }
+}
 const cancel = () => {
    tableStore.index()
    dialogVisible.value = false
--- a/src/views/setting/dictionary/component/index.vue
+++ b/src/views/setting/dictionary/component/index.vue
@@ -36,8 +36,16 @@ const tableStore = new TableStore({
    showPage: false,
    column: [
        { field: 'name', title: '功能组件名称', align: 'left', treeNode: true },
+        {
+            title: '组件图标',
+            field: 'icon',
+            align: 'center',
+            width: '80',
+            render: 'icon'
+        },
        { field: 'code', title: '组件标识' },
        { field: 'path', title: '组件路径' },
+        { field: 'image', title: '组件展示', render: 'image' },
        {
            title: '操作',
            render: 'buttons',