用户管理 责任领域添加全选功能

jero-web/src/views/system/modules/UserModal.vue

@@ -76,10 +76,24 @@
           </a-select>
         </a-form-item>
         <a-form-item v-if='viewshow' :label="$t('NareaOfResponsibility')" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <j-multi-select-tag class="box-input" v-model="dutyTerritories"
-                             :placeholder="$t('PleaseSelect')+$t('NareaOfResponsibility')"
-                             :type="'select'"
-                             :triggerChange="false" :dictCode="'duty_territory'"/>
+<!--          <j-multi-select-tag class="box-input" v-model="dutyTerritories"-->
+<!--                             :placeholder="$t('PleaseSelect')+$t('NareaOfResponsibility')"-->
+<!--                             :type="'select'"-->
+<!--                             :triggerChange="false" :dictCode="'duty_territory'"/>-->
+          <a-select
+            class="box-input" v-model="dutyTerritories"
+            mode="multiple"
+            :placeholder="$t('PleaseSelect')+$t('NareaOfResponsibility')"
+            showArrow
+            @change="onChange"
+          >
+            <!-- 这个是自定义的一个全选项，展示在所有下拉项的顶部位置 -->
+            <a-select-option value="0" key="0">{{$t('selectAll')}}</a-select-option>
+            <!-- 下面的是正常要循环渲染的下拉项 -->
+            <a-select-option v-for="item in dutylist" :value="item.title">
+              {{ item.title }}
+            </a-select-option>
+          </a-select>
       </a-form-item>
         <a-form-item v-if='viewshowbrand' :label="$t('brand')" :labelCol="labelCol" :wrapperCol="wrapperCol">
 <!--          <j-multi-select-tag  v-model="brands"-->
@@ -240,8 +254,10 @@
         confirmDirty: false,
         viewshow: false,
         viewshowbrand: false,
+        jobsStr:'',
         selectedDepartKeys: [], //保存用户选择部门id
         brandsList: [], //保存用户选择部门id
+        dutylist: [], //保存用户选择部门id
         checkedDepartKeys: [],
         checkedDepartNames: [], // 保存部门的名称 =>title
         checkedDepartNameString: '', // 保存部门的名称 =>title
@@ -380,6 +396,15 @@
           }
         })
       },
+      getdutylist(){
+        getAction('/sys/dict/getDictItems/duty_territory', {}).then((res) => {
+          if (res.success) {
+            this.dutylist = res.result
+          } else {
+            this.dutylist = []
+          }
+        })
+      },
       loadUserRoles(userid) {
         queryUserRole({ userid: userid }).then((res) => {
           if (res.success) {
@@ -494,12 +519,45 @@
         this.refresh()
         this.edit({ activitiSync: '1' })
       },
+      onChange(val) {
+        // val 拿到的是数组格式的数据，比如：['测试1','测试3']
+        const res = this.dutyTerritories.join(',')
+        this.jobsStr = res
+        this.dutyTerritories = this.checkAll(val, this.dutylist)
+      },
+      checkAll(arr, modelList) {
+        // arr是onChange中的val数组 modelList是下拉框List
+        let length = arr.length
+        let list = arr
+        // 遍历已经选中的选项
+        arr.forEach(element => {
+          // 当数组中存在0，说明此时进行全选/取消全选
+          if (element === '0') {
+            // 当数组长度为最大长度且最后一个元素为0时，说明此时在全选的基础上又点击全选，则取消全选
+            if (length - 1 === modelList.length && arr[length - 1] === '0') {
+              list = []
+              // 取消全选时，jobsStr需要重置为空，否则全选的数据还会展示在下拉输入框中
+              this.jobsStr = ''
+            } else {
+              // 当不是取消全选操作，只要数组中出现了0则说明进行了全选操作
+              list = []
+              for (let i in modelList) {
+                list.push(modelList[i].title)
+                // 全选时，也需要给jobsStr 赋值，拿到所有的下拉选项，并进行数据格式转换
+                this.jobsStr = list.join(',')
+              }
+            }
+          }
+        })
+        return list
+      },
       edit(record) {
         this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
         let that = this
         this.disabled = false
         that.initialRoleList()
         that.barndslist()
+        that.getdutylist()
         if (record.activitiSync) {
           this.disabled = true
         }