imeik-bizui 1.8.6 → 1.8.7

package/dist/bizui/src/CommonDepartmentCascader/index.vue

@@ -1,8 +1,12 @@
 <template>
+  <!-- 部门级联选择器组件 -->
   <div :class="!isView ? 'w-full' : 'inline'">
+    <!-- 查看模式 -->
     <template v-if="isView">
+      <!-- 企业微信移动端展示 -->
       <div v-if="isWxWorkMobile && needShowMore" class="mobile-text-container">
         <span v-if="!plantText">-</span>
+        <!-- 展开状态 -->
         <div v-else-if="showAll" :id="`plantText-${random}`" class="show-all-text">
           {{ plantText }}
           <div class="btn-text" @click="showMore">
@@ -10,6 +14,7 @@
             <img class="icon-retract" src="https://imeikud.oss-cn-beijing.aliyuncs.com/pcUploads/1724846415100/icon-retract.png" />
           </div>
         </div>
+        <!-- 收起状态 -->
         <div v-else class="show-limit-text">
           {{ plantText }}
           <div class="btn-text show-more" @click="showMore">
@@ -18,8 +23,11 @@
           </div>
         </div>
       </div>
+      <!-- PC端展示 -->
       <template v-else-if="plantText">
-        <span v-if="showAll" class="viewText showAll">{{ plantText }}</span>
+        <!-- 展示全部文本 -->
+        <span v-if="showAllWhenView" class="viewText showAll">{{ plantText }}</span>
+        <!-- 悬浮显示全部文本 -->
         <el-popover v-else trigger="hover">
           <div class="departmentPopover">{{ plantText }}</div>
           <span slot="reference" class="viewText">{{ plantText }}</span>
@@ -28,6 +36,7 @@
       <span v-else>-</span>
     </template>
 
+    <!-- 编辑模式 - 级联选择器 -->
     <el-cascader
       v-else
       ref="select"
@@ -36,7 +45,7 @@
       class="w-full"
       v-bind="$attrs"
       :props="cascaderProps"
-      :options="options"
+      :options="filteredOptions"
       :placeholder="$attrs.placeholder || (optionsLoading ? '加载中...' : '请选择部门')"
       :collapse-tags="$attrs.collapseTags || collapseTags"
       :clearable="$attrs.clearable !== false"
@@ -50,40 +59,54 @@
 <script>
 import emitter from 'element-ui/src/mixins/emitter'
 import { listDepartmentWithVirtual } from '../../api/permission'
-import { tree2Array, getLabelByValue } from '../../utils/index'
 
+/**
+ * 部门级联选择器组件
+ * 支持查看和编辑两种模式
+ * 支持企业微信移动端和PC端展示
+ * 支持单选和多选
+ * 支持展开收起
+ */
 export default {
   name: 'CommonDepartmentCascader',
   mixins: [emitter],
   props: {
+    // 选择器的值
     value: {
       type: [String, Number, Array],
       default: undefined
     },
+    // 是否多选
     multiple: {
       type: Boolean,
       default: false
     },
+    // 多选时是否折叠标签
     collapseTags: {
       type: Boolean,
       default: false
     },
+    // 是否返回选中节点的完整路径
     emitPath: {
       type: Boolean,
       default: false
     },
+    // 选项的值字段
     propValue: {
       type: String,
       default: 'departmentCode'
     },
+    // 次级菜单的展开方式
     expandTrigger: {
       type: String,
       default: 'click'
     },
+    // 是否严格的遵守父子节点不互相关联
     checkStrictly: {
       type: Boolean,
       default: false
     },
+    // 额外的请求参数
     extra: {
       type: Object,
       default() {
@@ -96,25 +119,44 @@ export default {
       default: false
     },
     // 查看的时候是否展示全部
-    showAll: {
+    showAllWhenView: {
       type: Boolean,
-      default: true
+      default: false
     },
-    // 是否仅展示主公司
+    // 是否只展示主公司 爱美客信息技术 这个为true可以提高性能，很多数据可以不用处理了
     onlyMainCompany: {
       type: Boolean,
       default: true
+    },
+    // 指定某个部门节点 如果要制定展示某个部门的数据 通过制定这个属性 比如市场发展中心为virtual-A03
+    specificOrgCode: {
+      type: String,
+      default: ''
+    },
+    // 指定某个部门节点以后是否展示根节点 有时候根节点只有一项 不想展示可以指定为false
+    hasRoot: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
+      // 组件内部使用的值
       myValue: undefined,
+      // 选项列表
       options: [],
+      // 是否正在加载选项
       optionsLoading: false,
+      // 子节点是否有未选中的
       childHasUnChecked: false,
+      // 是否展示全部
       showAll: true,
+      // 是否需要展示更多按钮
       needShowMore: true,
-      random: Math.random() * 100
+      // 随机数,用于生成唯一id
+      random: Math.random() * 100,
+      // 选项映射表
+      optionMap: {}
     }
   },
   computed: {
@@ -128,6 +170,10 @@ export default {
       // 企业微信移动端
       return result
     },
+
+    /**
+     * 级联选择器配置
+     */
     cascaderProps() {
       return {
         multiple: this.multiple,
@@ -139,26 +185,64 @@ export default {
         checkStrictly: this.checkStrictly
       }
     },
+
+    /**
+     * 展示的文本
+     * 根据选中的值从optionMap中获取对应的部门名称
+     */
     plantText() {
-      const arr = tree2Array(this.options, { key: 'childDepartments' })
-      const vals = [].concat(this.myValue) // 单选的时候也转成数组
       const list = []
 
-      vals.map((i) => {
-        list.push(getLabelByValue(arr, i, { labelKey: 'departmentName', valueKey: this.propValue }))
-        return i
-      })
+      if (Array.isArray(this.myValue)) {
+        this.myValue.forEach((i) => {
+          const item = this.optionMap[i]
+          if (item) {
+            list.push(item.departmentName)
+          }
+        })
+      } else {
+        const item = this.optionMap[this.myValue]
+        if (item) {
+          list.push(item.departmentName)
+        }
+      }
 
       return list.join(', ')
+    },
+
+    /**
+     * 指定某个部门节点以后展示的选项
+     * 如果指定了specificOrgCode,则只展示该部门节点
+     */
+    specificOptions() {
+      let result = this.options || []
+      if (this.specificOrgCode && this.optionMap[this.specificOrgCode]) {
+        result = [this.optionMap[this.specificOrgCode]]
+      }
+      return result || []
+    },
+
+    /**
+     * 通过hasRoot过滤后的选项
+     * 如果hasRoot为false且只有一个根节点,则展示其子节点
+     */
+    filteredOptions() {
+      if (!this.hasRoot && this.specificOptions && this.specificOptions.length === 1 && this.specificOptions[0] && this.specificOptions[0].childDepartments) {
+        return this.specificOptions[0].childDepartments || []
+      } else {
+        return this.specificOptions || []
+      }
     }
   },
   watch: {
+    // 监听外部value变化
     value: {
       immediate: true,
       handler() {
         this.setMyValue()
       }
     },
+    // 监听文本变化,判断是否需要展示更多按钮
     plantText: {
       immediate: true,
       handler(val) {
@@ -181,14 +265,23 @@ export default {
     }
   },
   created() {
+    // 组件创建时获取选项
     this.getOptions()
   },
   methods: {
+    /**
+     * 展开更多
+     * 切换展开收起状态并触发showMore事件
+     */
     showMore() {
       this.showAll = !this.showAll
       this.$emit('showMore', this.showAll)
     },
 
+    /**
+     * 设置级联选择器的值
+     * 深拷贝外部value值到内部myValue
+     */
     setMyValue() {
       try {
         this.myValue = JSON.parse(JSON.stringify(this.value))
@@ -197,6 +290,10 @@ export default {
       }
     },
 
+    /**
+     * 获取选项
+     * 调用接口获取部门列表
+     */
     getOptions() {
       const params = {
         ...this.extra
@@ -210,7 +307,7 @@ export default {
             }
             let resData = res.data || []
             if (this.onlyMainCompany) {
-              resData = resData.filter(item => {
+              resData = resData.filter((item) => {
                 return item.orgCode === 'virtual-201'
               })
             }
@@ -222,17 +319,31 @@ export default {
         })
     },
 
+    /**
+     * 处理选项
+     * 递归处理部门列表,生成optionMap映射表
+     */
     dealList(arr) {
-      return arr.map((i) => {
-        if (i.childDepartments && i.childDepartments.length) {
-          this.dealList(i.childDepartments)
+      return arr.map((item) => {
+        if (item.orgCode) {
+          this.$set(this.optionMap, item.orgCode, item)
+        }
+        if (item[this.propValue]) {
+          this.$set(this.optionMap, item[this.propValue], item)
+        }
+        if (item.childDepartments && item.childDepartments.length) {
+          this.dealList(item.childDepartments)
         } else {
-          delete i.childDepartments
+          delete item.childDepartments
         }
-        return i
+        return item
       })
     },
 
+    /**
+     * 处理级联选择器值变化
+     * 触发input和change事件,并通知表单项值变化
+     */
     handleChange() {
       this.$emit('input', this.myValue)
       this.$emit('change', this.myValue)
@@ -242,6 +353,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+/* 移动端文本容器样式 */
 .mobile-text-container {
   position: relative;
   .show-more {
@@ -253,7 +365,7 @@ export default {
       position: absolute;
       bottom: 0;
       right: 48px;
-      background: linear-gradient( 270deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+      background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
       width: 60px;
       height: 31px;
     }
@@ -268,20 +380,23 @@ export default {
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
     font-size: 14px;
-    color: #3285F6;
+    color: #3285f6;
     // line-height: 31px;
-    .icon-retract, .icon-show-more {
+    .icon-retract,
+    .icon-show-more {
       width: 16px;
       height: 16px;
       margin-left: 4px;
     }
   }
 }
+/* 收起状态文本样式 */
 .show-limit-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* 查看模式文本样式 */
 .viewText {
   max-width: max-content;
   overflow: hidden;
@@ -297,6 +412,7 @@ export default {
   }
 }
 
+/* 标签项样式 */
 .labelItem {
   display: flex;
   align-items: center;
@@ -315,6 +431,7 @@ export default {
   }
 }
 
+/* 部门弹出框样式 */
 .departmentPopover {
   max-width: 300px;
   max-height: 200px;