update 选人组件调整

src/api/api.js

@@ -31,6 +31,11 @@ const uploadFile = (params) => postAction('/sys/common/upload', params)
 
 // 获取部门列表数据
 const getDepartmentList = (params) => getAction('/sys/sysDepart/queryTreeList', params)
+// 部门管理
+const queryDepartTreeList = (params) => getAction('/sys/sysDepart/queryTreeList', params)
+
+// 获取角色下拉数据
+const queryAllRole = (params) => getAction('/sys/role/queryall', params)
 
 // 获取人员信息列表
 const getPersonInfoList = (params) => getAction('/process/fb/processFbInfo/getNodeList', params)
@@ -138,6 +143,8 @@ export {
   getFileInfo,
   uploadFile,
   getDepartmentList,
+  queryDepartTreeList,
+  queryAllRole,
   getSSOUserInfo,
 
   getPersonInfoList,

src/assets/less/list.less

@@ -3,14 +3,17 @@
   background: @global-bg;
   display: flex;
   flex-direction: column;
+
   .list-box {
     flex: 1;
     overflow: auto;
     padding: @pad-base;
-    .van-swipe-cell{
+
+    .van-swipe-cell {
       border-radius: 0.1rem;
     }
-    .van-swipe-cell + .van-swipe-cell{
+
+    .van-swipe-cell + .van-swipe-cell {
       margin-top: 0.24rem;
     }
   }
@@ -24,71 +27,30 @@
   position: relative;
   border-radius: 0.1rem;
 
-  & + .item-box{
-    margin-top: 0.24rem;
-  }
-
-  // 左滑后 样式的变化
-  &.item-box-has-swipe{
-    border-radius: 0.1rem 0 0 0.1rem;
-    .item-state{
-      border-radius: 0 0 0 0.1rem;
-    }
-  }
   // 标题的文字
   .item-title {
     font-size: 0.28rem;
-    text-align: left;
+    word-break: break-word;
-    display: flex;
-    align-items: center;
-    span {
-      display: inline-block;
-      text-align: left;
-    }
-
-    .title {
-      width: 3.05rem;
-    }
-
-    .score {
-      font-size: 0.2rem;
-      line-height: 0.2rem;
-      border-radius: .16rem .16rem .16rem .02rem;
-      background-color: #F2F2F2;
-      padding: 0.07rem 0.15rem;
-      max-width: 2rem;
-      .green{
-        color: #25C4A0;
-      }
-      .red{
-        color: #FF4C4C;
-      }
-    }
   }
 
   //  内容部分
   .item-content {
-    padding: 0.2rem 0;
+    padding-top: 0.2rem;
-    & > span {
+    display: flex;
+
+    &-item {
+      margin-right: 0.2rem;
+      width: calc(50% - 0.1rem);
       display: flex;
-      align-items: baseline;
-      color: @font-color;
-      font-size: 0.22rem;
-      text-align: left;
     }
-    & > span + span {
+
-      margin-top: 0.1rem;
+    &-item > .text {
-    }
-    .label {
-      display: inline-block;
-      width: 1.2rem;
-      text-align: left;
-    }
-    .text{
-      white-space: pre-wrap;
-      word-break: break-all;
       flex: 1;
-      width: 0;
+      word-break: break-word;
+    }
+
+    &-item:nth-child(2n) {
+      margin-right: 0;
     }
   }
 
@@ -98,20 +60,23 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     & > span {
       display: flex;
       align-items: center;
-      img{
+
+      img {
         width: 0.36rem;
         height: 0.36rem;
       }
+
       span {
         margin-left: 0.1rem;
       }
     }
   }
 
-  .item-state{
+  .item-state {
     width: 1rem;
     height: 0.48rem;
     line-height: 0.48rem;

src/components/SelectUser.vue

@@ -1,52 +1,84 @@
 <!-- 选择评价人员 -->
 <template>
-  <van-popup class="history-list-popup" v-model="isShow" position="right" :style="{ width: '100%', height: '100%' }" >
+  <van-popup class="history-list-popup" v-model="isShow" position="right" :style="{ width: '100%', height: '100%' }">
     <!--    增加一个标题-->
     <custom-header :title="$t('selectUser')" :leftArrow="true" :handle-left="handleLeft"></custom-header>
     <div class="list-container">
       <van-search
-        v-model="realname"
+        v-model="realnameOrUsername"
         show-action
         input-align="center"
-        label="姓名"
+        placeholder="请输入姓名/工号"
-        placeholder="请输入姓名"
+        @search="onSearch">
-        @search="onSearch"
-      >
         <template #action>
           <div @click="onSearch">搜索</div>
         </template>
       </van-search>
+
+      <van-dropdown-menu :close-on-click-overlay="false" :close-on-click-outside="false">
+        <!--组织机构-->
+        <van-dropdown-item :title="selectedDepart" ref="departDropdownItem">
+          <van-cascader
+            v-model="departId"
+            title="请选择所在地区"
+            :options="categoryTreeList"
+            :closeable="false"
+            :show-header="false"
+            :field-names="{text: 'departName'}"
+            @change="handleDepartChange" />
+          <div class="dropdown-operate-box">
+            <van-button @click="handleClearDepart" class="dropdown-confirm-btn" type="primary" round plain size="small">清空</van-button>
+            <van-button @click="handleConfirmDepart" class="dropdown-confirm-btn" type="primary" round size="small">确定</van-button>
+          </div>
+        </van-dropdown-item>
+        <!--角色-->
+        <van-dropdown-item :title="selectedRole" ref="roleDropdownItem">
+          <van-picker
+            ref="rolePicker"
+            show-toolbar
+            toolbar-position="bottom"
+            :columns="rolesList"
+            @confirm="handleConfirmRole"
+            @cancel="handleCancelRole">
+            <template v-slot:default>
+              <div class="dropdown-operate-box">
+                <van-button @click="handleClearRole" class="dropdown-confirm-btn" type="primary" round plain size="small">清空
+                </van-button>
+                <van-button @click="confirmRole" class="dropdown-confirm-btn" type="primary" round size="small">确定</van-button>
+              </div>
+            </template>
+          </van-picker>
+        </van-dropdown-item>
+      </van-dropdown-menu>
+
       <van-list
         v-model="loading"
         :finished="listFinished"
         :finished-text="listData.length > 0 ? '没有更多了' : '暂无数据'"
         @load="onLoadMore"
-        :immediate-check="false"
+        :immediate-check="false">
-      >
         <van-checkbox-group v-if="type === 'checkbox'" v-model="checkedArr" ref="checkboxGroup">
           <van-swipe-cell
             v-for="(item, index) in listData"
             :key="index"
             :name="index"
             stop-propagation
-            :before-close="handleBeforeClose"
+            :before-close="handleBeforeClose">
-          >
             <div class="item-box">
               <van-checkbox :name="item.id" @click="checkboxClick(item)" shape="square" :disabled="readonly"></van-checkbox>
-              <div>
+              <div class="item-container">
                 <div class="item-title">
-                  <span class="title">{{ item.realname }}</span>
+                  {{ item.realname }}({{ item.username }})
-                  <span class="score">工号({{ item.username || '暂无数据' }})</span>
                 </div>
                 <div class="item-content">
-              <span>
+                  <div class="item-content-item">
-                <span class="label">角色: </span>
+                    <span class="label">角色：</span>
-                <span class="text">{{ item.roleTxt || '暂无数据' }}</span>
+                    <span class="text">{{ item.roleTxt }}</span>
-              </span>
+                  </div>
-                  <span>
+                  <div class="item-content-item">
-                <span class="label">岗位: </span>
+                    <span class="label">岗位：</span>
-                <span class="text">{{ item.post || '暂无数据' }}</span>
+                    <span class="text">{{ item.post }}</span>
-              </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -58,24 +90,22 @@
             :key="index"
             :name="index"
             stop-propagation
-            :before-close="handleBeforeClose"
+            :before-close="handleBeforeClose">
-          >
             <div class="item-box">
               <van-radio :name="item.id" @click="checkboxClick(item)" :disabled="readonly"></van-radio>
-              <div>
+              <div class="item-container">
                 <div class="item-title">
-                  <span class="title">{{ item.realname }}</span>
+                  {{ item.realname }}({{ item.username }})
-                  <span class="score">工号({{ item.username || '暂无数据' }})</span>
                 </div>
                 <div class="item-content">
-              <span>
+                  <div class="item-content-item">
-                <span class="label">角色: </span>
+                    <span class="label">角色：</span>
-                <span class="text">{{ item.roleTxt || '暂无数据' }}</span>
+                    <span class="text">{{ item.roleTxt }}</span>
-              </span>
+                  </div>
-                  <span>
+                  <div class="item-content-item">
-                <span class="label">岗位: </span>
+                    <span class="label">岗位：</span>
-                <span class="text">{{ item.post || '暂无数据' }}</span>
+                    <span class="text">{{ item.post }}</span>
-              </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -88,7 +118,9 @@
         <div class="bottom-btn bottom-justify-div">
           <van-button size="small" color="#C6C7CA" native-type="button" plain :disabled="disabled" @click="resetFunc">重置
           </van-button>
-          <van-button v-if="type === 'checkbox'" size="small" color="#E63636" native-type="button" :disabled="disabled" @click="checkAll">全选</van-button>
+          <van-button v-if="type === 'checkbox'" size="small" color="#E63636" native-type="button" :disabled="disabled" @click="checkAll">
+            全选
+          </van-button>
           <van-button size="small" color="#E63636" native-type="button" :disabled="disabled" @click="confirmFunc()">确定
           </van-button>
           <van-button size="small" color="#C6C7CA" native-type="button" plain :disabled="disabled" @click="hide()">取消
@@ -102,6 +134,7 @@
 <script>
 import ListMixin from '../mixins/ListMixin'
 import CustomHeader from '@/components/CustomHeader'
+import { queryAllRole, queryDepartTreeList } from '../api/api'
 
 export default {
   name: 'SelectUser',
@@ -147,6 +180,7 @@ export default {
   data () {
     return {
       realname: '', // 搜索框数据
+      realnameOrUsername: null, // 搜索框数据（姓名和工号一起搜索改的）
       isShow: false,
       loading: false, // 加载数据的标识，
       listFinished: false, // 完成加载的标识
@@ -162,7 +196,14 @@ export default {
         list: '/sys/user/page'
       },
       checkedArr: [],
-      selectedDataArr: []
+      selectedDataArr: [],
+      selectedDepart: '组织机构', // 回显在页面上的选中部门的名字
+      selectedRole: '角色', // 回显在页面上的选中角色的名字
+      categoryTreeList: [], // 组织机构数据
+      departId: null, // 查询时候传给后端的参数
+      tempSelectedDepart: {}, // change的时候记录一下选中的部门
+      rolesList: [], // 角色下拉框
+      roleId: null // 查询时候传给后端的参数
     }
   },
   computed: {
@@ -175,6 +216,8 @@ export default {
       this.isShow = true
       this.initData()
       this.getListData()
+      this.getSysCategoryTree()
+      this.initRoleList()
     },
     checkboxClick (item) {
       console.log(item)
@@ -252,8 +295,11 @@ export default {
       if (this.realname) {
         this.filters.realname = '*' + this.realname + '*'
       } else {
-        this.filters.realname = ''
+        this.filters.realname = null
       }
+      this.filters.realnameOrUsername = this.realnameOrUsername || null
+      this.filters.departId = this.departId
+      this.filters.roleId = this.roleId
       this.ipagination.pageNo = 1
       this.getListData()
     },
@@ -262,9 +308,58 @@ export default {
     },
     hide () {
       this.isShow = false
+    },
+    // 获取组织机构树
+    getSysCategoryTree () {
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          this.categoryTreeList = res.result
+        } else {
+          this.categoryTreeList = []
+        }
+      })
+    },
+    handleDepartChange ({ value, selectedOptions }) {
+      this.tempSelectedDepart = selectedOptions.find(tt => tt.value === value) || {}
+      console.log(this.tempSelectedDepart)
+    },
+    handleConfirmDepart () {
+      this.$refs.departDropdownItem.toggle()
+      this.selectedDepart = this.tempSelectedDepart.departName
+    },
+    handleClearDepart () {
+      this.$refs.departDropdownItem.toggle()
+      this.selectedDepart = '组织机构'
+      this.tempSelectedDepart = {}
+      this.departId = null
+    },
+    // 初始化角色字典
+    initRoleList () {
+      queryAllRole().then((res) => {
+        if (res.success) {
+          this.rolesList = res.result.map((item) => {
+            return { text: item.roleName, value: item.id }
+          })
+        }
+      })
+    },
+    confirmRole () {
+      this.$refs.rolePicker.confirm()
+    },
+    handleClearRole () {
+      this.$refs.roleDropdownItem.toggle()
+      this.selectedRole = '角色'
+      this.roleId = null
+    },
+    handleConfirmRole (value) {
+      this.$refs.roleDropdownItem.toggle()
+      this.roleId = value.value
+      this.selectedRole = value.text
+    },
+    handleCancelRole () {
+      this.$refs.roleDropdownItem.toggle()
     }
   }
-
 }
 </script>
 
@@ -272,13 +367,13 @@ export default {
 @import '~@assets/less/list.less';
 @import '~@assets/less/common.less';
 
-.history-list-popup{
+.history-list-popup {
   background: @global-bg;
   display: flex;
   flex-direction: column;
 }
 
-.list-container{
+.list-container {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -294,11 +389,13 @@ export default {
 // 中间内容
 .item-box {
   background: #FFFFFF;
-  padding: @pad-base;
+  padding: 0.24rem;
   display: flex;
   align-items: center;
+  border-bottom: 1px solid #C9CDD4;
+  border-radius: 0;
 
-  .van-checkbox{
+  .van-checkbox {
     display: block;
     margin: 0 20px 0 0;
   }
@@ -321,19 +418,10 @@ export default {
       border-color: @primary-color;
     }
   }
+}
 
-  & + .item-box {
+.item-container {
-    margin-top: 0.24rem;
+  flex: 1;
-  }
-
-  // 左滑后 样式的变化
-  &.item-box-has-swipe {
-    border-radius: 0.1rem 0 0 0.1rem;
-
-    .item-state {
-      border-radius: 0 0 0 0.1rem;
-    }
-  }
 }
 
 // 底部按钮
@@ -343,6 +431,7 @@ export default {
   padding: 0 0.2rem;
   background: #FFFFFF;
 }
+
 .bottom-justify-div {
   height: 100%;
   display: flex;
@@ -354,9 +443,24 @@ export default {
     height: 0.8rem;
     flex: 1;
   }
+
   /deep/ .van-button--plain {
     color: #898989 !important;
   }
 }
 
+.dropdown-operate-box {
+  width: 100%;
+  display: flex;
+  padding: 0.24rem;
+  justify-content: space-between;
+}
+
+.dropdown-confirm-btn {
+  width: calc(50% - 0.12rem);
+}
+
+/deep/ .van-picker__toolbar {
+  height: auto;
+}
 </style>