From 87334541dd6b6cda2a4d4e2b3196f3ba3c1990cc Mon Sep 17 00:00:00 2001
From: zc <>
Date: Sun, 26 Dec 2021 13:51:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9selectTree?=
 =?UTF-8?q?=E7=B5=84=E4=BB=B6=E7=9A=84value=E5=B1=AC=E6=80=A7=E4=B8=BA?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=80=BCmodelValue,=E6=B7=BB=E5=8A=A0toRefs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改selectTree組件的value屬性为默认值modelValue,使其支持v-model缺省,给部门,用户页面添加toRefs，使其组件使用时不用加dataMap.
---
 src/components/TreeSelect/index.vue |  50 +++++-----
 src/views/system/dept/index.vue     |  90 ++++++++++--------
 src/views/system/user/index.vue     | 137 +++++++++++++++++++---------
 3 files changed, 169 insertions(+), 108 deletions(-)

diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
index 5d135a29..f99e0ec3 100644
--- a/src/components/TreeSelect/index.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 4286203b..73359477 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -3,14 +3,14 @@
 
     <el-form
         size="mini"
-        :model="dataMap.queryParams"
+        :model="queryParams"
         ref="queryForm"
         :inline="true"
-        v-show="dataMap.showSearch"
+        v-show="showSearch"
     >
       <el-form-item>
         <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button type="danger" :icon="Delete" :disabled="dataMap.single" @click="handleDelete">删除
+        <el-button type="danger" :icon="Delete" :disabled="single" @click="handleDelete">删除
         </el-button>
       </el-form-item>
 
@@ -18,7 +18,7 @@
           prop="name"
       >
         <el-input
-            v-model="dataMap.queryParams.name"
+            v-model="queryParams.name"
             placeholder="请输入部门名称"
             size="small"
             @keyup.enter="handleQuery"
@@ -28,13 +28,13 @@
           prop="status"
       >
         <el-select
-            v-model="dataMap.queryParams.status"
+            v-model="queryParams.status"
             placeholder="部门状态"
             clearable
             size="small"
         >
           <el-option
-              v-for="dict in dataMap.statusOptions"
+              v-for="dict in statusOptions"
               :key="dict.dictValue"
               :label="dict.dictLabel"
               :value="dict.dictValue"
@@ -62,12 +62,12 @@
     </el-form>
 
     <el-table
-        v-loading="dataMap.loading"
-        :data="dataMap.deptList"
+        v-loading="loading"
+        :data="deptList"
         row-key="id"
         default-expand-all
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-        @selection-change = "handleSelectionChange"
+        @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column prop="name" label="部门名称"/>
@@ -119,16 +119,16 @@
 
     <!-- 添加或修改部门对话框 -->
     <el-dialog
-        :title="dataMap.title"
-        v-model="dataMap.open"
+        :title="title"
+        v-model="open"
         width="600px"
         @open="dialogshow"
         @closed="cancel"
     >
       <el-form
           ref="formDialog"
-          :model="dataMap.formVal"
-          :rules="dataMap.rules"
+          :model="formVal"
+          :rules="rules"
           label-width="80px"
       >
         <el-form-item
@@ -136,19 +136,19 @@
             prop="parentId"
         >
           <tree-select
-              :options="dataMap.deptOptions"
+              :options="deptOptions"
               placeholder="选择上级部门"
-              v-model:value="dataMap.formVal.parentId"
+              v-model="formVal.parentId"
           />
         </el-form-item>
         <el-form-item label="部门名称" prop="name">
-          <el-input v-model="dataMap.formVal.name" placeholder="请输入部门名称"/>
+          <el-input v-model="formVal.name" placeholder="请输入部门名称"/>
         </el-form-item>
         <el-form-item label="显示排序" prop="sort">
-          <el-input-number v-model="dataMap.formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
+          <el-input-number v-model="formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
         </el-form-item>
         <el-form-item label="部门状态">
-          <el-radio-group v-model="dataMap.formVal.status">
+          <el-radio-group v-model="formVal.status">
             <el-radio :label="1">正常</el-radio>
             <el-radio :label="0">禁用</el-radio>
           </el-radio-group>
@@ -175,7 +175,7 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, reactive, unref, ref} from 'vue'
+import {onMounted, reactive, unref, ref, toRefs} from 'vue'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 import {listDept, getDept, delDept, updateDept, addDept, getDeptSelectList} from '@/api/system/dept'
 import TreeSelect from '@/components/TreeSelect/Index.vue'
@@ -249,6 +249,8 @@ const dataMap = reactive({
 const queryForm = ref(ElForm)
 const formDialog = ref(ElForm)
 
+
+
 /**
  * 删除按钮
  * */
@@ -348,30 +350,42 @@ function submitForm() {
 /** 删除按钮操作 */
 async function handleDelete(row: any) {
   const ids = [row.id || dataMap.ids].join(',')
-    ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-       delDept(ids).then(rps=>{
-         getList()
-         ElMessage.success('删除成功')
-       }).catch(e=>{
-         console.log(`删除失败:${e}`)
-       })
-      }).catch(() =>
-        ElMessage.info('已取消删除')
-    )
-}
-
-
-function getDeptId(e: any) {
-  dataMap.formVal.parentId = e
+  ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    delDept(ids).then(rps => {
+      getList()
+      ElMessage.success('删除成功')
+    }).catch(e => {
+      console.log(`删除失败:${e}`)
+    })
+  }).catch(() =>
+      ElMessage.info('已取消删除')
+  )
 }
 
 function dialogshow() {
   getTreeselect()
 }
+const {
+  ids, single,
+  multiple,
+  disabled,
+  isAdd,
+  originOptions, props, loading,
+  // 显示搜索条件
+  showSearch,
+  // 表格树数据
+  deptList,
+  // 部门树选项
+  deptOptions,
+  // 弹出层标题
+  title,
+  // 是否显示弹出层
+  open, statusOptions, queryParams, formVal, deptidfix, rules
+} = toRefs(dataMap)
 
 onMounted(() => {
   getList()
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 625ffedb..84506ca0 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -8,7 +8,7 @@
       >
         <div class="head-container">
           <el-input
-              v-model="dataMap.deptName"
+              v-model="deptName"
               placeholder="请输入部门名称"
               clearable
               size="small"
@@ -19,8 +19,8 @@
         <div class="head-container">
           <el-tree
               ref="treeRef"
-              :data="dataMap.deptOptions"
-              :props="dataMap.defaultProps"
+              :data="deptOptions"
+              :props="defaultProps"
               :expand-on-click-node="false"
               :filter-node-method="filterNode"
               default-expand-all
@@ -34,9 +34,9 @@
           :xs="24"
       >
         <el-form
-            v-show="dataMap.showSearch"
+            v-show="showSearch"
             ref="queryForm"
-            :model="dataMap.queryParams"
+            :model="queryParams"
             :inline="true"
 
         >
@@ -55,7 +55,7 @@
                 plain
                 :icon="Edit"
                 size="mini"
-                :disabled="dataMap.single"
+                :disabled="single"
                 @click="handleUpdate"
             >
               修改
@@ -65,7 +65,7 @@
                 plain
                 :icon="Delete"
                 size="mini"
-                :disabled="dataMap.multiple"
+                :disabled="multiple"
                 @click="handleDelete"
             >
               删除
@@ -77,7 +77,7 @@
               prop="keywords"
           >
             <el-input
-                v-model="dataMap.queryParams.keywords"
+                v-model="queryParams.keywords"
                 placeholder="用户名/昵称/手机号"
                 clearable
                 size="small"
@@ -90,7 +90,7 @@
               prop="mobile"
           >
             <el-input
-                v-model="dataMap.queryParams.mobile"
+                v-model="queryParams.mobile"
                 placeholder="请输入手机号码"
                 clearable
                 size="small"
@@ -103,14 +103,14 @@
               prop="status"
           >
             <el-select
-                v-model="dataMap.queryParams.status"
+                v-model="queryParams.status"
                 placeholder="用户状态"
                 clearable
                 size="small"
                 style="width: 200px"
             >
               <el-option
-                  v-for="dict in dataMap.statusOptions"
+                  v-for="dict in statusOptions"
                   :key="dict.dictValue"
                   :label="dict.dictLabel"
                   :value="dict.dictValue"
@@ -137,8 +137,8 @@
         </el-form>
 
         <el-table
-            v-loading="dataMap.loading"
-            :data="dataMap.userList"
+            v-loading="loading"
+            :data="userList"
             @selection-change="handleSelectionChange"
         >
           <el-table-column
@@ -147,14 +147,14 @@
               align="center"
           />
           <el-table-column
-              v-if="dataMap.columns[0].visible"
+              v-if="columns[0].visible"
               key="id"
               label="用户编号"
               align="center"
               prop="id"
           />
           <el-table-column
-              v-if="dataMap.columns[1].visible"
+              v-if="columns[1].visible"
               key="username"
               label="用户名称"
               align="center"
@@ -162,7 +162,7 @@
               :show-overflow-tooltip="true"
           />
           <el-table-column
-              v-if="dataMap.columns[2].visible"
+              v-if="columns[2].visible"
               key="nickname"
               label="用户昵称"
               align="center"
@@ -170,7 +170,7 @@
               :show-overflow-tooltip="true"
           />
           <el-table-column
-              v-if="dataMap.columns[3].visible"
+              v-if="columns[3].visible"
               key="deptName"
               label="部门"
               align="center"
@@ -178,7 +178,7 @@
               :show-overflow-tooltip="true"
           />
           <el-table-column
-              v-if="dataMap.columns[4].visible"
+              v-if="columns[4].visible"
               key="mobile"
               label="手机号码"
               align="center"
@@ -187,7 +187,7 @@
           />
 
           <el-table-column
-              v-if="dataMap.columns[5].visible"
+              v-if="columns[5].visible"
               key="status"
               label="状态"
               align="center"
@@ -203,7 +203,7 @@
             </template>
           </el-table-column>
           <el-table-column
-              v-if="dataMap.columns[6].visible"
+              v-if="columns[6].visible"
               label="创建时间"
               align="center"
               prop="gmtCreate"
@@ -248,10 +248,10 @@
         </el-table>
 
         <pagination
-            v-show="dataMap.total>0"
-            :total="dataMap.total"
-            v-model:page="dataMap.queryParams.page"
-            v-model:limit="dataMap.queryParams.limit"
+            v-show="total>0"
+            :total="total"
+            v-model:page="queryParams.page"
+            v-model:limit="queryParams.limit"
             @pagination="getList"
         />
       </el-col>
@@ -259,8 +259,8 @@
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog
-        :title="dataMap.title"
-        v-model="dataMap.open"
+        :title="title"
+        v-model="open"
         width="600px"
         append-to-body
         @opened="showDialog"
@@ -268,8 +268,8 @@
     >
       <el-form
           ref="addForm"
-          :model="dataMap.formVal"
-          :rules="dataMap.rules"
+          :model="formVal"
+          :rules="rules"
           label-width="80px"
       >
         <el-row>
@@ -279,7 +279,7 @@
                 prop="nickname"
             >
               <el-input
-                  v-model="dataMap.formVal.nickname"
+                  v-model="formVal.nickname"
                   placeholder="请输入用户昵称"
               />
             </el-form-item>
@@ -290,9 +290,9 @@
                 prop="deptId"
             >
               <tree-select
-                  :options="dataMap.deptOptions"
+                  :options="deptOptions"
                   placeholder="请选择归属部门"
-                  v-model:value="dataMap.formVal.deptId"
+                  v-model="formVal.deptId"
               />
             </el-form-item>
           </el-col>
@@ -304,7 +304,7 @@
                 prop="mobile"
             >
               <el-input
-                  v-model="dataMap.formVal.mobile"
+                  v-model="formVal.mobile"
                   placeholder="请输入手机号码"
                   maxlength="11"
               />
@@ -316,7 +316,7 @@
                 prop="email"
             >
               <el-input
-                  v-model="dataMap.formVal.email"
+                  v-model="formVal.email"
                   placeholder="请输入邮箱"
                   maxlength="50"
               />
@@ -326,21 +326,21 @@
         <el-row>
           <el-col :span="12">
             <el-form-item
-                v-if="dataMap.formVal.userId === undefined"
+                v-if="formVal.userId === undefined"
                 label="用户名称"
                 prop="userName"
             >
               <el-input
-                  v-model="dataMap.formVal.username"
+                  v-model="formVal.username"
                   placeholder="请输入用户名称"
               />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="状态">
-              <el-radio-group v-model="dataMap.formVal.status">
+              <el-radio-group v-model="formVal.status">
                 <el-radio
-                    v-for="dict in dataMap.statusOptions"
+                    v-for="dict in statusOptions"
                     :key="dict.dictValue"
                     :label="dict.dictValue"
                 >
@@ -355,11 +355,11 @@
           <el-col :span="12">
             <el-form-item label="用户性别">
               <el-select
-                  v-model="dataMap.formVal.gender"
+                  v-model="formVal.gender"
                   placeholder="请选择"
               >
                 <el-option
-                    v-for="dict in dataMap.sexOptions"
+                    v-for="dict in sexOptions"
                     :key="dict.value"
                     :label="dict.name"
                     :value="dict.value"
@@ -370,12 +370,12 @@
           <el-col :span="12">
             <el-form-item label="角色">
               <el-select
-                  v-model="dataMap.formVal.roleIds"
+                  v-model="formVal.roleIds"
                   multiple
                   placeholder="请选择"
               >
                 <el-option
-                    v-for="item in dataMap.roleOptions"
+                    v-for="item in roleOptions"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
@@ -390,12 +390,12 @@
 
           <el-col :span="12">
             <el-form-item
-                v-if="dataMap.formVal.id === undefined"
+                v-if="formVal.id === undefined"
                 label="用户密码"
                 prop="password"
             >
               <el-input
-                  v-model="dataMap.formVal.password"
+                  v-model="formVal.password"
                   placeholder="请输入用户密码"
                   type="password"
               />
@@ -432,7 +432,7 @@ import TreeSelect from '@/components/TreeSelect/Index.vue'
 import {listRoles} from '@/api/system/role'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 
-import {reactive, ref, unref, onMounted, watchEffect, getCurrentInstance} from 'vue'
+import {reactive, ref, unref, onMounted, watchEffect, getCurrentInstance,toRefs} from 'vue'
 import {ElMessage, ElMessageBox, ElTree} from 'element-plus'
 
 
@@ -780,6 +780,55 @@ function showDialog() {
   loadRoleOptions()
 }
 
+const {
+  props,
+  addformFlag,
+  // 阻止触发switch  change事件
+  tigger,
+  // 遮罩层
+  loading,
+  // 选中数组
+  ids,
+  // 非单个禁用
+  single,
+  // 非多个禁用
+  multiple,
+  // 显示搜索条件
+  showSearch,
+  // 总条数
+  total,
+  originOptions,
+  // 用户表格数据
+  userList,
+  // 弹出层标题
+  title,
+  // 部门树选项
+  deptOptions,
+  // 是否显示弹出层
+  open,
+  // 部门名称
+  deptName,
+  // 默认密码
+  initPassword,
+  // 日期范围
+  dateRange,
+  // 状态数据字典
+  statusOptions,
+  // 性别状态字典
+  sexOptions,
+  // 角色选项
+  roleOptions,
+  // 表单参数
+  formVal,
+  defaultProps,
+  // 查询参数
+  queryParams,
+  // 列信息
+  columns,
+  // 表单校验
+  rules
+
+} = toRefs(dataMap)
 </script>
 <style lang="scss" scoped>
 .small-padding {