refactor: 修改selectTree組件的value屬性为默认值modelValue,添加toRefs

修改selectTree組件的value屬性为默认值modelValue,使其支持v-model缺省,给部门,用户页面添加toRefs，使其组件使用时不用加dataMap.

src/components/TreeSelect/index.vue

@@ -16,8 +16,8 @@
             ref="selectTree"
             :accordion="accordion"
             :data="options"
-            :props="props.props"
-            :node-key="props.props.value"
+            :props="state.props"
+            :node-key="state.props.value"
             :expand-on-click-node="false"
             :default-expanded-keys="defaultExpandedKey"
             :filter-node-method="filterNode"
@@ -29,11 +29,10 @@
 </template>
 
 <script setup>
-import {defineEmits, ref, getCurrentInstance, nextTick, onMounted, computed, watch} from "vue";
+import {defineEmits, ref, getCurrentInstance ,nextTick,onMounted,computed,watch} from "vue";
+const { proxy } = getCurrentInstance();
 
-const {proxy} = getCurrentInstance();
-
-const props = defineProps({
+const state = defineProps({
   /* 配置项 */
   props: {
     type: Object,
@@ -45,34 +44,38 @@ const props = defineProps({
       }
     }
   },
-  // 自动收起
+  /* 自动收起 */
   accordion: {
     type: Boolean,
     default: () => {
       return false
     }
   },
-  // 双向数据绑定的值
-  value: {
+  /**当前双向数据绑定的值 */
+  modelValue: {
     type: [String, Number],
     default: ''
   },
+  /**当前的数据 */
   options: {
     type: Array,
     default: () => []
   },
+  /**输入框内部的文字 */
   placeholder: {
     type: String,
     default: ''
   }
 })
 
-const emit = defineEmits(['update:value']);
+const emit = defineEmits(['update:modelValue']);
 
 const valueId = computed({
-  get: () => props.value,
+  get: () => {
+    return state.modelValue
+  },
   set: (val) => {
-    emit('update:value', val)
+    emit('update:modelValue', val)
   }
 });
 const valueTitle = ref('');
@@ -81,43 +84,38 @@ const defaultExpandedKey = ref([]);
 function initHandle() {
   nextTick(() => {
     const selectedValue = valueId.value;
-    if (selectedValue !== null && typeof (selectedValue) !== "undefined") {
+    if(selectedValue !== null && typeof (selectedValue) !== "undefined"){
       const node = proxy.$refs.selectTree.getNode(selectedValue)
       if (node) {
-        valueTitle.value = node.data[props.props.label]
+        valueTitle.value = node.data[state.props.label]
         proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
         defaultExpandedKey.value = [selectedValue] // 设置默认展开
-      } else {
+      }else{
         clearHandle()
       }
     }
   })
 }
-
 function handleNodeClick(node) {
-  valueTitle.value = node[props.props.label]
-  valueId.value = node[props.props.value];
+  valueTitle.value = node[state.props.label]
+  valueId.value = node[state.props.value];
   defaultExpandedKey.value = [];
   proxy.$refs.treeSelect.blur()
   selectFilterData('')
 }
-
 function selectFilterData(val) {
   proxy.$refs.selectTree.filter(val)
 }
-
 function filterNode(value, data) {
   if (!value) return true
-  return data[props.props['label']].indexOf(value) !== -1
+  return data[state.props['label']].indexOf(value) !== -1
 }
-
 function clearHandle() {
   valueTitle.value = ''
   valueId.value = ''
   defaultExpandedKey.value = [];
   clearSelected()
 }
-
 function clearSelected() {
   const allNode = document.querySelectorAll('#tree-option .el-tree-node')
   allNode.forEach((element) => element.classList.remove('is-current'))
@@ -143,7 +141,7 @@ watch(valueId, () => {
   font-weight: normal;
 }
 
-ul li .el-tree .el-tree-node__content {
+ul li  .el-tree .el-tree-node__content {
   height: auto;
   padding: 0 20px;
   box-sizing: border-box;
@@ -152,8 +150,8 @@ ul li .el-tree .el-tree-node__content {
 :deep(.el-tree-node__content:hover),
 :deep(.el-tree-node__content:active),
 :deep(.is-current > div:first-child),
-:deep( .el-tree-node__content:focus ) {
+:deep( .el-tree-node__content:focus ){
   background-color: mix(#fff, #409EFF, 90%);
   color: #409EFF;
 }
-</style>
+</style>