fix 代码注释

hookehuyr
Commit 20b956fa99ddd41d01dbcc9966dd999062b5a402 20b956fa 1 parent 64dacace
Showing 1 changed file with 145 additions and 62 deletions
src/components/OrgPickerField/MyComponent.vue
--- a/src/components/OrgPickerField/MyComponent.vue
View file @20b956f
+++ b/src/components/OrgPickerField/MyComponent.vue
View file @20b956f
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-05 19:27:33
+ * @LastEditTime: 2024-08-06 11:42:29
  * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
  * @Description: 树形组件
 -->
@@ -323,6 +323,19 @@ const tabList = computed(() => {
 const maxWidth = ref(0);
+/**
+ * 计算选中框数量
+ * 选中框的数量 >= 1
+ * @returns {boolean}
+ */
+const treeCheckedCount = computed(() => {
+  let dept_count = checkedGroup.value.dept.length;
+  let user_count = checkedGroup.value.user.length;
+  let role_count = checkedGroup.value.role.length;
+
+  return dept_count + user_count + role_count >= 1;
+});
+
 onMounted(async () => {
   // TAG: 获取后台数据
   const flowDeptList = await getFlowDeptListAPI({ form_code: $route.query.code });
@@ -333,11 +346,12 @@ onMounted(async () => {
   if (flowRoleList.code) {
     dept_list = flowRoleList.data;
   }
+  // TEST
+  check_type.value = 'single'; // 默认单选
   // 获取已选中数据
   // 如果有默认值处理
   props.value = props.component_props.default;
-  // TEST
+  //
-  check_type.value = ''; // 默认单选
   if (props.value) {
     props.value.forEach(item => {
       if (item.type === 'dept') {
@@ -357,7 +371,7 @@ onMounted(async () => {
   })
 });
-const openTree = () => {
+const openTree = () => { // 点击组件展示框回调
   if (props.component_props.readonly) return false; // 只读判断
   // 打开弹窗
   showPopover.value = true;
@@ -377,10 +391,20 @@ const openTree = () => {
   });
 }
-
+/**
+ * 点击节点详情
+ * @param {*} id
+ * @param {*} type
+ * @param {*} name
+ * @param {*} mobile
+ */
 const node_info = ref({});
 const show_detail = ref(false);
-const clickNode = ({ id, type, name, mobile='' }) => { // 点击显示选择详情
+
+/******************** END ****************/
+
+// 点击显示框，显示节点详情
+const clickNode = ({ id, type, name, mobile='' }) => {
   if (!props.component_props.readonly) return false; // 非只读不予许操作
   const obj = {
     dept: '部门',
@@ -399,21 +423,36 @@ const clickNode = ({ id, type, name, mobile='' }) => { // 点击显示选择详
   show_detail.value = true;
 }
+/**
+ * 勾选数据结构
+ * @type {Object}
+ * @property {Array} dept 组织结构
+ * @property {Array} role 角色
+ * @property {Array} user 成员
+ */
 const emitCheckedGroup = ref({
   dept: [], // 组织结构
   role: [], // 角色
   user: [] // 成员
 });
+/**
+ * 勾选数据---发送表单数据
+ * @type {Array}
+ */
 const tree_select_value = ref([]);
-const onCancelClick = () => {
+/******* 搜索输入项 *******/
+const showPopover = ref(false); // 显示/隐藏弹框
+
+const onCancelClick = () => { // 取消操作
   showPopover.value = false;
 }
-const onConfirmClick = () => {
+
+const onConfirmClick = () => { // 确定操作
   showPopover.value = false;
   if (is_search.value) {
-    onCloseSearch()
+    onCloseSearch();
   }
   //
   emitCheckedGroup.value = _.cloneDeep(checkedGroup.value);
@@ -421,12 +460,10 @@ const onConfirmClick = () => {
   tree_select_value.value = [].concat(...Object.values(emitCheckedGroup.value));
 }
-/******* 搜索输入项 *******/
+const searchInputRef = ref(null); // 搜索输入框Ref
-const showPopover = ref(false); // 显示/隐藏弹框
+const searchValue = ref(''); // 搜索输入框值
-
-const searchInputRef = ref(null);
-const searchValue = ref('');
 const is_search = ref(false); // 默认不显示搜索框
+
 /**
  * 搜索选中结果集
  * @param {Number} id
@@ -440,18 +477,24 @@ const onSearchBlur = async () => { // 搜索框失去焦点
     if (check_type.value === 'single') {
       if (treeCheckedCount.value) {
         let arr = [...checkedGroup.value.dept, ...checkedGroup.value.role, ...checkedGroup.value.user]
+        let current = arr[0]; // 单选模式下，勾选值只会有一个
+        //
         for (const key in data) {
           const element = data[key];
+          // 遍历数组，设置特定元素的禁用状态
           element.forEach(item => {
-            if (item.id === arr[0].id) { // 禁用其他
+            if (item.id === current.id) {
+              // 设置该项不禁用
               item.disabled = false;
             } else {
+              // 设置该项禁用
               item.disabled = true;
             }
           });
         }
       }
     }
+    // 赋值搜索结果集
     user_dept_role.value = data;
   }
 }
@@ -507,7 +550,10 @@ const checkedGroup = ref({
   user: [] // 成员
 });
-const resetRoleDisabled = () => {
+/**
+ * 重置角色Tab列表的disable状态
+ */
+const resetRoleDisable = () => {
   // 如果角色没有选中，解除禁用
   if (!role_checked.value.length) {
     roleList.value.forEach(item => {
@@ -516,8 +562,11 @@ const resetRoleDisabled = () => {
   }
 }
-const resetUserDisabled = () => {
+/**
-  // 如果角色没有选中，解除禁用
+* 重置成员Tab列表的disable状态
+*/
+const resetUserDisable = () => {
+  // 如果成员没有选中，解除禁用
   if (!user_checked.value.length) {
     userList.value.forEach(item => {
       item.disabled = false;
@@ -525,22 +574,27 @@ const resetUserDisabled = () => {
   }
 }
+/**
+* 重置搜索结果列表的disable状态
+*/
 const resetSearchDisable = () => {
   for (const key in user_dept_role.value) {
     const element = user_dept_role.value[key];
     element.forEach(item => {
       item.disabled = false;
-      // search_result_checked.value.forEach(val => {
-      //   if (item.id === val) { // 禁用其他
-      //     item.disabled = false;
-      //   } else {
-      //     item.disabled = true;
-      //   }
-      // })
     });
   }
 }
+/**
+ * 重置所有列表的disable状态
+ */
+const resetAllDisable = () => {
+  resetRoleDisable(); // 重置角色禁用状态
+  resetUserDisable(); // 重置成员禁用状态
+  resetSearchDisable(); // 重置搜索结果禁用状态
+}
+
 const onRemoveDeptTag = (dept) => { // 移除部门标签
   // 移除选中框显示
   const index = checkedGroup.value.dept.findIndex(item => JSON.stringify(item) === JSON.stringify(dept));
@@ -552,9 +606,7 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
   search_result_checked.value.splice(idx, 1);
   // 单选模式
   if (check_type.value === 'single') {
-    resetRoleDisabled();// 重置角色禁用状态
+    resetAllDisable();
-    resetUserDisabled(); // 重置成员禁用状态
-    resetSearchDisable(); // 重置搜索结果禁用状态
   }
 }
@@ -569,9 +621,7 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
   search_result_checked.value.splice(i, 1);
   // 单选模式
   if (check_type.value === 'single') {
-    resetRoleDisabled();// 重置角色禁用状态
+    resetAllDisable();
-    resetUserDisabled(); // 重置成员禁用状态
-    resetSearchDisable(); // 重置搜索结果禁用状态
   }
 }
@@ -586,9 +636,7 @@ const onRemoveUserTag = (user) => { // 移除成员标签
   search_result_checked.value.splice(i, 1);
   // 单选模式
   if (check_type.value === 'single') {
-    resetRoleDisabled(); // 重置角色禁用状态
+    resetAllDisable();
-    resetUserDisabled(); // 重置成员禁用状态
-    resetSearchDisable(); // 重置搜索结果禁用状态
   }
 }
@@ -597,9 +645,6 @@ const tabRef = ref(null);
 const tabActive = ref(0);
 const deptTreeRef = ref();
-
-const userList = ref([]);
-
 const onClickTab = ({ title }) => { // tab点击事件
   nextTick(() => {
     if (title === '组织结构') {
@@ -647,6 +692,7 @@ const roleListReset = () => { // 角色重置列表
 const userListReset = () => { // 成员重置列表
   userTreeRef.value.setData(role_list);
   userTreeRef.value.setExpand(35697, true);
+  // 单选模式
   if (check_type.value === 'single') {
     if (treeCheckedCount.value) { // 已勾选值一个
       if (checkedGroup.value.user.length) {
@@ -673,13 +719,18 @@ const userListReset = () => { // 成员重置列表
 const select_dept_value = ref(); // 组织结构树形选中值
 const deptTreeDisableAll = ref(false); // 组织结构树形禁用
-const getDeptTreeData = () => { // 获取组织结构数据
+// const getDeptTreeData = () => { // 获取组织结构数据
-  deptTreeRef.value.setData(role_list);
+//   deptTreeRef.value.setData(role_list);
-  // 默认展开第一个
+//   // 默认展开第一个
-  deptTreeRef.value.setExpand(35697, true);
+//   deptTreeRef.value.setExpand(35697, true);
-}
+// }
-const deptTreeCheck = (node) => { // 组织结构单选勾中
+/**
+ * 组织结构单选勾中
+ * @param {*} node
+ */
+const deptTreeCheck = (node) => {
+  // 单选模式
   if (check_type.value === 'single') {
     if (treeCheckedCount.value) {
       showToast('单选模式下，只能勾选一个')
@@ -689,7 +740,12 @@ const deptTreeCheck = (node) => { // 组织结构单选勾中
   }
 }
-const deptTreeUncheck = (node) => {  // 组织结构单选取消
+/**
+ * 组织结构单选取消
+ * @param {*} node
+ */
+const deptTreeUncheck = (node) => {
+  // 单选模式
   if (check_type.value === 'single') {
     // 移除选中框显示
     const index = checkedGroup.value['dept'].findIndex(item => item.id === node.id);
@@ -697,15 +753,12 @@ const deptTreeUncheck = (node) => {  // 组织结构单选取消
   }
 }
-const treeCheckedCount = computed(() => { // 选中框的数量是否大于一
+/**
-  let dept_count = checkedGroup.value.dept.length;
+ * 组织结构勾选回调
-  let user_count = checkedGroup.value.user.length;
+ * @param {*} arr
-  let role_count = checkedGroup.value.role.length;
+ */
-
+const deptTreeCheckedChange = (arr) => {
-  return dept_count + user_count + role_count >= 1;
+  // 单选模式
-});
-
-const deptTreeCheckedChange = (arr) => { // 组织结构勾选回调
   if (check_type.value === 'single') {
     if (treeCheckedCount.value) {
       return false
@@ -723,10 +776,21 @@ const deptTreeCheckedChange = (arr) => { // 组织结构勾选回调
 /**************** END *****************/
 /************* 角色模块 ***************/
-const role_checked = ref([]); // 角色多选选中值
+/**
+ * 角色选中值集合
+ */
+const role_checked = ref([]);
+/**
+ * 角色列表数据集合
+ */
 const roleList = ref([]);
-const roleChangeMethod = (val) => { // 角色多选组点击回调
+/**
+ * 角色多选值变化回调
+ * @param {*} val
+ */
+const roleChangeMethod = (val) => {
+  // 单选模式
   if (check_type.value === 'single') {
     if (treeCheckedCount.value) {
       return;
@@ -738,11 +802,17 @@ const roleChangeMethod = (val) => { // 角色多选组点击回调
   checkedGroup.value.role = result.filter(item => item !== undefined);
 }
-const onRoleClick = (role, evt) => { // 角色单击回调
+/**
+ * 角色单击选项回调
+ * @param {*} role
+ * @param {*} evt
+ */
+const onRoleClick = (role, evt) => {
   if (role.disabled) { // 节点禁用时不能操作
     showToast('单选模式下，只能勾选一个')
     return;
   }
+  // 单选模式
   if (check_type.value === 'single') {
     // 移除选中框显示
     const index = checkedGroup.value['role'].findIndex(item => item === role.id);
@@ -758,7 +828,7 @@ const onRoleClick = (role, evt) => { // 角色单击回调
       });
     }
     // 如果没有选中，解除禁用
-    resetRoleDisabled();
+    resetRoleDisable();
   }
 }
 /**************** END *****************/
@@ -766,12 +836,20 @@ const onRoleClick = (role, evt) => { // 角色单击回调
 /************* 成员模块 ***************/
 const userTreeRef = ref();
 const select_user_value = ref(); // 成员树形选中值
-const user_checked = ref([]); // 成员多选选中值
+/**
+ * 成员选中值集合
+ */
+const user_checked = ref([]);
+
+/**
+ * 成员Tab列表
+ */
+const userList = ref([]);
 const onUserTreeClick = (node) => { // 点击成员树形回调
   userList.value = node.user;
   user_checked.value = checkedGroup.value.user.map(item => item.id);
-  // 单选模式判断
+  // 单选模式
   if (check_type.value === 'single') {
     if (treeCheckedCount.value) { // 已勾选值一个
       if (checkedGroup.value.user.length) { // 成员列表有勾选值
@@ -789,7 +867,7 @@ const onUserTreeClick = (node) => { // 点击成员树形回调
         userList.value = []
       }
     } else {
-      resetUserDisabled();
+      resetUserDisable();
     }
   }
 }
@@ -830,10 +908,12 @@ const onCheckUserChange = (val, evt) => {
       }
     }
   });
-  if (val.disabled) { // 节点禁用时不能操作
+  // 节点禁用时不能操作
+  if (val.disabled) {
     showToast('单选模式下，只能勾选一个')
     return;
   }
+  // 单选模式
   if (check_type.value === 'single') {
     // 移除选中框显示
     const index = checkedGroup.value['user'].findIndex(item => item === val.id);
@@ -849,12 +929,15 @@ const onCheckUserChange = (val, evt) => {
       });
     }
     // 如果没有选中，解除禁用
-    resetUserDisabled();
+    resetUserDisable();
   }
 }
 /**************** END *****************/
 /***************** 搜索结果集模块 ********************/
+/**
+ * 搜索结果集合
+ */
 const user_dept_role = ref({
   dept: [],
   role: [],