修复mb-tree绑定bug

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

@@ -8,29 +8,28 @@
       <el-input v-model="searchValue" placeholder="输入关键字进行过滤" @input="tree.filter(searchValue)" :style="{ width: searchWidth }" />
     </div>
     <el-tree
-        v-if="refreshTree"
+      v-if="refreshTree"
-        ref="tree"
+      ref="tree"
-        :data="treeData"
+      :data="treeData"
-        v-bind="props.props"
+      v-bind="props.props"
-        node-key="id"
+      node-key="id"
-        :default-expand-all="defaultExpandAll"
+      :default-expand-all="defaultExpandAll"
-        :default-checked-keys="checkedIds"
+      @check-change="checkChange"
-        @check-change="checkChange"
+      @node-click="nodeClick"
-        @node-click="nodeClick"
+      :props="defaultProps"
-        :props="defaultProps"
+      :filter-node-method="searchTree"
-        :filter-node-method="searchTree"
+      :style="style"
-        :style="style"
     />
   </div>
 </template>
 
 <script setup>
 
-import { watch, ref, reactive, defineExpose, nextTick, getCurrentInstance, onBeforeMount, onMounted } from 'vue'
+import { watch, ref, reactive, defineExpose, nextTick, getCurrentInstance, onBeforeMount } from 'vue'
 
 const { proxy } = getCurrentInstance()
 
-const emit = defineEmits(['update:select-values', 'check-change', 'node-click', 'mounted'])
+const emit = defineEmits(['update:modelValue', 'check-change', 'node-click', 'mounted'])
 
 const props = defineProps({
   url: {
@@ -41,7 +40,7 @@ const props = defineProps({
     type: Object,
     default: () => {}
   },
-  selectValues: {
+  modelValue: {
     type: String,
     default: ''
   },
@@ -71,8 +70,6 @@ const props = defineProps({
   }
 })
 
-const checkedIds = ref(props.selectValues.split(','))
-
 const tree = ref()
 const treeData = ref([])
 const defaultProps = reactive({
@@ -88,13 +85,16 @@ onBeforeMount(async () => {
   await loadTreeData()
 })
 
-onMounted(() => {
+watch(() => props.modelValue, (value) => {
-  emit('mounted')
+  nextTick(() => selectIds(value))
 })
 
-watch(() => props.selectValues, async () => {
+function selectIds(ids){
-  checkedIds.value = props.selectValues.split(',')
+  ids = ids.split(',')
-})
+  for(var i=0;i<ids.length;i++){
+    tree.value && tree.value.setChecked(ids[i],true,false)
+  }
+}
 
 function searchTree(value, data) {
   if (!value) return true
@@ -113,6 +113,7 @@ async function loadTreeData() {
       treeData.value = res.data.list
     })
     refreshTree.value = true
+    nextTick(() => selectIds(props.modelValue))
   }
 }
 
@@ -126,8 +127,7 @@ function checkChange(node) {
   for (var i = 0; i < checkedNodes.length; i++) {
     selectMenus.push(checkedNodes[i].id)
   }
-  console.log(selectMenus.join(','))
+  emit('update:modelValue', selectMenus.join(','))
-  emit('update:select-values', selectMenus.join(','))
   emit('check-change', selectMenus.join(','))
 }
 

magic-boot-ui/src/views/system/role/role-assign-permissions.vue

@@ -1,5 +1,5 @@
 <template>
-  <mb-tree ref="tree" :props="{ 'show-checkbox': true }" url="/system/menu/tree" :search="true" search-width="230px" v-model:select-values="menus" />
+  <mb-tree ref="tree" v-model="menus" :props="{ 'show-checkbox': true }" url="/system/menu/tree" :search="true" search-width="230px" />
 </template>
 
 <script setup>

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

@@ -41,13 +41,13 @@
           <el-row :gutter="24">
             <el-col :span="12">
               <el-form-item label="菜单权限" prop="menus">
-                <mb-tree ref="tree" :props="{ 'show-checkbox': true }" style="height: 270px; overflow: auto" url="/system/menu/tree" :search="true" v-model:select-values="temp.menus" />
+                <mb-tree ref="tree" v-model="temp.menus" :props="{ 'show-checkbox': true }" style="height: 270px; overflow: auto" url="/system/menu/tree" :search="true" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="数据权限" prop="permission">
                 <mb-select v-model="temp.permission" :options="permissionData" />
-                <mb-tree v-if="temp.permission == 1" style="height: 270px; overflow: auto" :props="{ 'check-strictly': true, 'show-checkbox': true }" ref="office" url="/system/office/tree" v-model:select-values="temp.offices" />
+                <mb-tree v-if="temp.permission == 1" style="height: 270px; overflow: auto" :props="{ 'check-strictly': true, 'show-checkbox': true }" ref="office" url="/system/office/tree" v-model="temp.offices" />
               </el-form-item>
             </el-col>
           </el-row>

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

@@ -15,7 +15,7 @@
     <div class="left">
       <mb-tree
         url="/system/office/tree"
-        :el="{ 'expand-on-click-node': false,'show-checkbox': true }"
+        :props="{ 'expand-on-click-node': false,'show-checkbox': true }"
         :checked-ids="[tableOptions.where.officeId]"
         :expand="false"
         :search="true"