vue3-treeselect 改为 el-tree-select

magic-boot-ui/src/components/magic/data/mb-treeselect.vue

@@ -1,5 +1,5 @@
 <template>
-  <treeselect v-model="selectValue" :options="options" :key="modelValue" :placeholder="placeholder || (itemLabel && '请选择' + itemLabel)" :show-count="true" v-bind="props.props" />
+  <el-tree-select v-model="selectValue" :data="options" :key="modelValue" :placeholder="placeholder || (itemLabel && '请选择' + itemLabel)" v-bind="props.props" />
 </template>
 
 <script setup>

magic-boot-ui/src/scripts/globalProperties.js

@@ -1,6 +1,4 @@
 import * as PlusIcons from '@element-plus/icons-vue'
-import Treeselect from 'vue3-treeselect'
-import 'vue3-treeselect/dist/vue3-treeselect.css'
 import request from './request'
 import global from './global'
 import common from './common'
@@ -27,6 +25,5 @@ const install = (app) => {
   for(var key in PlusIcons) {
     app.component(`El${key}`, PlusIcons[key])
   }
-  app.component('treeselect', Treeselect)
 }
 export default install

magic-boot-ui/src/scripts/treeTable.js

@@ -41,7 +41,7 @@ treeTable.genTree = (children) => {
   for(var i in children){
     var chi = {}
     chi.label = children[i].name
-    chi.id = children[i].id
+    chi.value = children[i].id
     if(children[i].children && children[i].children.length > 0){
       chi.children = treeTable.genTree(children[i].children)
     }

magic-boot-ui/src/views/lowcode/code-gen-form.vue

@@ -71,7 +71,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="上级菜单" prop="pid">
-              <treeselect v-model="genInfo.info.pid" :options="menuTree" :key="genInfo.info.pid" style="position: fixed;z-index:999999;width: 548px;" />
+              <el-tree-select v-model="genInfo.info.pid" :data="menuTree" :key="genInfo.info.pid" style="width: 100%" check-strictly />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -102,7 +102,7 @@
   proxy.$get('/system/menu/tree').then(res => {
     menuTree.value = [{
       label: '根节点',
-      id: '0',
+      value: '0',
       children: proxy.$treeTable.genTree(res.data.list)
     }]
   })

magic-boot-ui/src/views/system/menu/menu-form.vue

@@ -17,7 +17,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="上级菜单" prop="pid">
-          <treeselect v-model="temp.pid" :options="menuTree" :key="temp.pid" style="position: relative;z-index:999999;" />
+          <el-tree-select v-model="temp.pid" :data="menuTree" :key="temp.pid" style="width: 100%" check-strictly />
         </el-form-item>
       </el-col>
     </el-row>
@@ -28,15 +28,7 @@
       <el-input v-model="temp.url" />
     </el-form-item>
     <el-form-item label="关联组件" prop="componentName" v-if="menuType == 'menu'">
-      <treeselect
-        v-model="temp.componentName"
-        :disable-branch-nodes="true"
-        :show-count="true"
-        placeholder=""
-        :options="componentTree"
-        :key="temp.componentName"
-        style="position: fixed;z-index:999998;width: 850px;"
-      />
+      <el-tree-select v-model="temp.componentName" :data="componentTree" :key="temp.componentName" style="width: 100%" placeholder=" " />
     </el-form-item>
     <el-form-item label="权限标识" prop="permission" v-if="menuType == 'button'">
       <el-input v-model="temp.permission" />
@@ -88,8 +80,6 @@
 <script setup>
 import { ref, reactive, watch, nextTick, getCurrentInstance, defineExpose } from 'vue'
 import MenuIcons from './menu-icons'
-import Treeselect from 'vue3-treeselect'
-import 'vue3-treeselect/dist/vue3-treeselect.css'
 
 const { proxy } = getCurrentInstance()
 
@@ -121,7 +111,7 @@ const getTemp = () => {
     pid: 0,
     icon: '',
     keepAlive: 0,
-    componentName: null
+    componentName: ''
   }
 }
 

magic-boot-ui/src/views/system/menu/menu-list.vue

@@ -245,7 +245,7 @@ onMounted(() => reloadTable())
 watch(menuData, () => {
   menuTree.value = [{
     label: '根节点',
-    id: '0',
+    value: '0',
     children: proxy.$treeTable.genTree(menuData.value)
   }]
 })

magic-boot-ui/src/views/system/office/office-list.vue

@@ -43,7 +43,7 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="上级机构" prop="pid">
-                <treeselect v-model="temp.pid" :options="officeTree" :key="temp.pid" />
+                <el-tree-select v-model="temp.pid" :key="temp.pid" :data="officeTree" style="width: 100%" check-strictly />
               </el-form-item>
             </el-col>
           </el-row>
@@ -74,8 +74,6 @@
 </template>
 
 <script setup>
-import Treeselect from 'vue3-treeselect'
-import 'vue3-treeselect/dist/vue3-treeselect.css'
 
 import { ref, reactive, onMounted, watch, nextTick, getCurrentInstance } from 'vue'
 const { proxy } = getCurrentInstance()
@@ -229,7 +227,7 @@ onMounted(() => {
 watch(officeData, () => {
   officeTree.value = [{
     label: '根节点',
-    id: '0',
+    value: '0',
     children: proxy.$treeTable.genTree(officeData.value)
   }]
 })

magic-boot-ui/src/views/system/user/user-form.vue

@@ -27,7 +27,7 @@
     <el-row :gutter="24">
       <el-col :span="12">
         <el-form-item label="组织机构" prop="officeId">
-          <treeselect v-model="temp.officeId" :options="officeTree" :key="temp.officeId" :show-count="true" placeholder="请选择组织机构" />
+          <mb-treeselect url="/system/user/offices" v-model="temp.officeId" :key="temp.officeId" placeholder="请选择组织机构" check-strictly />
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -47,7 +47,7 @@
 
 <script setup>
 
-import { ref, reactive, onBeforeMount, getCurrentInstance, nextTick, defineExpose } from 'vue'
+import { ref, reactive, getCurrentInstance, nextTick, defineExpose } from 'vue'
 
 const emit = defineEmits(['reload-table'])
 const { proxy } = getCurrentInstance()
@@ -59,17 +59,9 @@ const rules = reactive({
   officeId: [{ required: true, message: '请选择组织机构', trigger: 'change' }]
 })
 const temp = ref(getTemp())
-const officeTree = ref([])
 const isForm = ref(true)
 const dataForm = ref()
 
-onBeforeMount(() => {
-  proxy.$get('/system/user/offices').then(res => {
-    officeTree.value = res.data.list
-    proxy.$treeTable.deleteEmptyChildren(officeTree.value)
-  })
-})
-
 function getTemp() {
   return {
     id: '',