From 9257129ed7288a1e0909245566bc2382e657c339 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=95=E9=87=91=E6=B3=BD?= <1098696801@qq.com>
Date: Wed, 23 Mar 2022 20:59:44 +0800
Subject: [PATCH] =?UTF-8?q?dynamic=20component=20=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/magic-api/component/系统管理/group.json  |  10 +
 .../component/系统管理/字典管理/group.json    |  10 +
 .../component/系统管理/字典管理/列表.ms       | 230 ++++++++++++++++++
 .../src/views/system/menu/menu-form.vue       |  20 +-
 4 files changed, 266 insertions(+), 4 deletions(-)
 create mode 100644 data/magic-api/component/系统管理/group.json
 create mode 100644 data/magic-api/component/系统管理/字典管理/group.json
 create mode 100644 data/magic-api/component/系统管理/字典管理/列表.ms

diff --git a/data/magic-api/component/系统管理/group.json b/data/magic-api/component/系统管理/group.json
new file mode 100644
index 0000000..f349a2f
--- /dev/null
+++ b/data/magic-api/component/系统管理/group.json
@@ -0,0 +1,10 @@
+{
+  "properties" : { },
+  "id" : "9bf92d503f4242d39a0f271c577aa3ac",
+  "name" : "系统管理",
+  "type" : "component",
+  "parentId" : "0",
+  "path" : "sys",
+  "paths" : [ ],
+  "options" : [ ]
+}
\ No newline at end of file
diff --git a/data/magic-api/component/系统管理/字典管理/group.json b/data/magic-api/component/系统管理/字典管理/group.json
new file mode 100644
index 0000000..4f1fc8f
--- /dev/null
+++ b/data/magic-api/component/系统管理/字典管理/group.json
@@ -0,0 +1,10 @@
+{
+  "properties" : { },
+  "id" : "6bee7576eea04963a573b21bb657784d",
+  "name" : "字典管理",
+  "type" : "component",
+  "parentId" : "9bf92d503f4242d39a0f271c577aa3ac",
+  "path" : "dict",
+  "paths" : [ ],
+  "options" : [ ]
+}
\ No newline at end of file
diff --git a/data/magic-api/component/系统管理/字典管理/列表.ms b/data/magic-api/component/系统管理/字典管理/列表.ms
new file mode 100644
index 0000000..503fdb2
--- /dev/null
+++ b/data/magic-api/component/系统管理/字典管理/列表.ms
@@ -0,0 +1,230 @@
+{
+  "properties" : { },
+  "id" : "995e2ee59d574429b8e3da3513c05a43",
+  "script" : null,
+  "groupId" : "6bee7576eea04963a573b21bb657784d",
+  "name" : "列表",
+  "createTime" : 1648017481335,
+  "updateTime" : 1648026074180,
+  "lock" : null,
+  "createBy" : null,
+  "updateBy" : null,
+  "path" : "list",
+  "description" : null
+}
+================================
+<template>
+  <div class="app-container">
+
+    <mb-search :where="tableOptions.where" @search="reloadTable" />
+
+    <el-row class="toolbar-container">
+      <el-button v-permission="'dict:save'" class="filter-item" type="primary" icon="ElPlus" @click="handleCreate">
+        添加13asdf
+      </el-button>
+    </el-row>
+
+    <mb-table ref="table" v-bind="tableOptions" />
+
+    <mb-dialog ref="dictDialog" :title="dialogTitle" width="640px" @confirm-click="save($event)">
+      <template #content>
+        <el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="80px">
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="字典类型" prop="dictType">
+                <mb-select v-model="temp.dictType" type="dict_type" width="185px" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="类型" prop="type">
+                <el-input v-model="temp.type" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="排序" prop="sort">
+                <el-input v-model="temp.sort" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="描述" prop="descRibe">
+                <el-input v-model="temp.descRibe" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="备注" prop="remarks">
+                <el-input v-model="temp.remarks" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </template>
+    </mb-dialog>
+
+  </div>
+</template>
+
+<script setup>
+
+import { ref, reactive, getCurrentInstance, nextTick } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const tableOptions = reactive({
+  url: 'dict/list',
+  page: true,
+  where: {
+    type: {
+      type: 'input',
+      label: '类型',
+      value: ''
+    },
+    dictType: {
+      type: 'select',
+      label: '字典类型',
+      value: '',
+      properties: {
+        'all-option': true,
+        type: 'dict_type'
+      }
+    }
+  },
+  cols: [
+    {
+      field: 'type',
+      label: '类型'
+    },
+    {
+      field: 'descRibe',
+      label: '描述'
+    },
+    {
+      field: 'dictType',
+      label: '字典类型',
+      width: 200,
+      dictType: 'dict_type'
+    },
+    {
+      field: 'remarks',
+      label: '备注',
+      width: 200
+    },
+    {
+      field: 'sort',
+      label: '排序',
+      width: 100
+    },
+    {
+      label: '操作',
+      type: 'btns',
+      width: 220,
+      fixed: 'right',
+      btns: [
+        {
+          permission: 'dict:save',
+          label: '修改',
+          type: 'text',
+          icon: 'ElEdit',
+          click: (row) => {
+            handleUpdate(row)
+          }
+        },
+        {
+          permission: 'dict:delete',
+          label: '删除',
+          type: 'text',
+          icon: 'ElDelete',
+          click: (row) => {
+            proxy.$common.handleDelete({
+              url: 'dict/delete',
+              id: row.id,
+              done: () => {
+                reloadTable()
+                proxy.$common.getDictData()
+              }
+            })
+          }
+        }
+      ]
+    }
+  ]
+})
+
+const dictId = ref('')
+const temp = ref(getTemp())
+const dialogTitle = ref('')
+const rules = reactive({
+  dictType: [{ required: true, message: '请输入标签', trigger: 'change' }],
+  type: [{ required: true, message: '请输入类型', trigger: 'change' }],
+  sort: [{ required: true, message: '请输入排序', trigger: 'change' }],
+  descRibe: [{ required: true, message: '请输入描述', trigger: 'change' }]
+})
+const table = ref()
+const dictDialog = ref()
+const dataForm = ref()
+
+function getTemp() {
+  return {
+    id: '',
+    dictType: '',
+    type: '',
+    sort: 0,
+    descRibe: '',
+    remarks: ''
+  }
+}
+
+function reloadTable() {
+  table.value.reloadList()
+}
+
+function getSort() {
+  proxy.$get('dict/sort').then(res => {
+    temp.value.sort = res.data
+  })
+}
+
+function handleCreate() {
+  temp.value = getTemp()
+  getSort()
+  dialogTitle.value = '添加'
+  dictDialog.value.show()
+  nextTick(() => {
+    dataForm.value.clearValidate()
+  })
+}
+
+function save(d) {
+  dataForm.value.validate((valid) => {
+    if (valid) {
+      d.loading()
+      proxy.$post('dict/save', temp.value).then((response) => {
+        d.hideLoading()
+        temp.value.id = response.data
+        dictDialog.value.hide()
+        proxy.$notify({
+          title: '成功',
+          message: dialogTitle.value + '成功',
+          type: 'success',
+          duration: 2000
+        })
+        reloadTable()
+        proxy.$common.getDictData()
+      }).catch(() => d.hideLoading())
+    }
+  })
+}
+
+function handleUpdate(row) {
+  proxy.$common.objAssign(temp.value, row)
+  dialogTitle.value = '修改'
+  dictDialog.value.show()
+  nextTick(() => {
+    dataForm.value.clearValidate()
+  })
+}
+
+</script>
diff --git a/magic-boot-ui/src/views/system/menu/menu-form.vue b/magic-boot-ui/src/views/system/menu/menu-form.vue
index 09d088d..db87307 100644
--- a/magic-boot-ui/src/views/system/menu/menu-form.vue
+++ b/magic-boot-ui/src/views/system/menu/menu-form.vue
@@ -27,8 +27,15 @@
     <el-form-item label="菜单链接" prop="url" v-if="menuType == 'menu'">
       <el-input v-model="temp.url" />
     </el-form-item>
-    <el-form-item label="关联组件" prop="componentId" v-if="menuType == 'menu'">
-      <mb-select v-model="temp.componentId" url="/component/select" width="100%" />
+    <el-form-item label="关联组件" prop="componentName" v-if="menuType == 'menu'">
+      <treeselect
+        v-model="temp.componentName"
+        :disable-branch-nodes="true"
+        :show-count="true"
+        :options="componentTree"
+        :key="temp.componentName"
+        style="position: fixed;z-index:999999;width: 850px;"
+      />
     </el-form-item>
     <el-form-item label="权限标识" prop="permission" v-if="menuType == 'button'">
       <el-input v-model="temp.permission" />
@@ -97,7 +104,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['reload-table'])
-
+const componentTree = ref()
 const dataForm = ref()
 const iconDialog = ref()
 const menuType = ref('menu')
@@ -113,9 +120,14 @@ const getTemp = () => {
     pid: 0,
     icon: '',
     keepAlive: 1,
-    componentId: ''
+    componentName: ''
   }
 }
+
+proxy.$get('component/select').then(res => {
+  componentTree.value = res.data
+})
+
 const temp = ref(getTemp())
 
 var validateUrl = (rule, value, callback) => {