手机端选人组件

src/api/phone.js

@@ -0,0 +1,9 @@
+import axios from "@/common/axiosV2";
+
+export function phoneUser(params) {
+  return axios({
+    url: "api/sys/user/getUserByPhone",
+    method: "get",
+    params
+  });
+}

src/components/index.js

@@ -27,6 +27,8 @@ import SQTree from './SQTree'
 import OrgTable from './OrgTable'
 import MySelect from './mySelect'
 
+import phoneRole from './phoneRole'
+
 const install = function (Vue) {
   Vue.component('loading', Loading)
   Vue.component('navMenu', NavMenu)
@@ -52,6 +54,7 @@ const install = function (Vue) {
   Vue.component('RoleTree', RoleTree)
   Vue.component('MechanismTree', MechanismTree)
   Vue.component('MySelect', MySelect)
+  Vue.component('phoneRole', phoneRole)
 }
 
 export default {

src/components/phoneRole/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="phoneRole phoneBox">
+    <van-action-sheet
+      v-model="isShowPhone2"
+      :title="roleTitle"
+    >
+      <el-form
+        ref="phoneForm"
+        class="label-input-form"
+        :inline="true"
+        :model="phoneForm"
+        @submit.native.prevent
+      >
+        <el-form-item class="form-item-disabled" style="margin: 10px;">
+          <el-input
+            size="small"
+            clearable
+            v-model="phoneForm.name"
+            placeholder="请输入姓名"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="form-item-disabled" style="margin: 10px;">
+          <el-button type="primary" size="small" @click="queryPhone">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+          :immediate-check="false"
+          :offset="300"
+        >
+          <van-checkbox-group v-if="!checkMore" v-model="result" :max="1">
+            <van-cell-group>
+              <van-cell
+                v-for="(item, index) in roleList"
+                clickable
+                :key="index"
+                :title="item.userName"
+                @click="toggle(index)"
+              >
+                <template #right-icon>
+                  <van-checkbox :name="item" ref="checkbox"/>
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-checkbox-group>
+          <van-checkbox-group v-if="checkMore" v-model="result">
+            <van-cell-group>
+              <van-cell
+                v-for="(item, index) in roleList"
+                clickable
+                :key="index"
+                :title="item.userName"
+                @click="toggle(index)"
+              >
+                <template #right-icon>
+                  <van-checkbox :name="item" ref="checkbox"/>
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-checkbox-group>
+        </van-list>
+      </van-pull-refresh>
+      <div class="phoneBtn">
+        <van-button type="default" @click="roleClear">取消</van-button>
+        <van-button type="info" @click="roleSumit">确认</van-button>
+      </div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import {ActionSheet, Checkbox, CheckboxGroup, Cell, CellGroup, Button, List, PullRefresh} from 'vant';
+import {phoneUser} from '@/api/phone'
+
+Vue.use(ActionSheet, Checkbox, CheckboxGroup, Cell, CellGroup, Button, List, PullRefresh);
+
+export default {
+  name: "phoneRole",
+  props: {
+    isShowPhone: {
+      type: Boolean,
+      default: false,
+    },
+    checkMore: {
+      type: Boolean,
+      default: false,
+    },
+    roleTitle: {
+      type: String,
+    },
+    resultList: { // 回显
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      filterText: '',
+      isShowPhone2: false,
+      result: [],
+      phoneForm: {
+        name: '',
+        page: 1
+      },
+      roleList: [],
+      loading: false,
+      finished: false,
+      refreshing: false,
+      total: '',
+    }
+  },
+  watch: {
+    isShowPhone(val) {
+      this.isShowPhone2 = val
+      if (val) {
+        this.result = this.resultList
+      }
+    },
+    isShowPhone2(val) {
+      this.$emit('update:isShowPhone', val)
+    },
+    resultList (val) {
+      this.result = val
+    },
+    result() {
+      this.$emit('resultList', this.result)
+    }
+  },
+  mounted() {
+    this.getPhoneData()
+  },
+  methods: {
+    /** 查询 */
+    queryPhone() {
+      this.getPhoneData()
+    },
+    /** 获取人员数据 */
+    async getPhoneData() {
+      this.phoneForm.page = 1
+      this.roleList = []
+      phoneUser(this.phoneForm).then(res => {
+        if (res.ok) {
+          this.roleList = res.data
+          this.total = this.roleList[0].total
+          this.loading = false
+          if (this.total === this.roleList.length) {
+            this.finished = true
+          } else {
+            this.finished = false
+          }
+          this.refreshing = false
+          this.loading = false
+        }
+      })
+    },
+    toggle(index) {
+      if (!this.checkMore) {
+        this.result = []
+        this.$refs.checkbox[index].toggle();
+      } else {
+        this.$refs.checkbox[index].toggle();
+      }
+
+    },
+    roleSumit() {
+      this.$emit('checkedRole', this.result)
+      this.isShowPhone2 = false
+    },
+    roleClear() {
+      this.result = []
+      this.isShowPhone2 = false
+    },
+
+    // 下滑加载数据
+    onLoad() {
+      phoneUser(this.phoneForm).then(res => {
+        this.roleList = this.roleList.concat(res.data)
+        this.total = this.roleList[0].total
+        this.loading = false
+        if (this.roleList.length < this.total) {
+          this.phoneForm.page ++
+          this.loading = false
+        } else {
+          this.finished = true
+          this.loading = true
+        }
+      })
+    },
+    // 下拉刷新
+    onRefresh() {
+      this.getPhoneData()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/assets/styles/phone';
+
+.phoneRole {
+
+
+  .van-action-sheet {
+    height: 100%;
+    max-height: 100%;
+  }
+
+  .van-action-sheet__cancel {
+    border-radius: 5px;
+    background-color: #0c91e5;
+    color: #fff;
+  }
+
+  .van-action-sheet__content {
+    overflow-y: hidden;
+  }
+
+  .van-list {
+    //min-height: 9rem;
+    height: 9.5rem;
+    overflow-y: auto;
+  }
+
+  .van-popup--bottom.van-popup--round {
+    border-radius: 0;
+  }
+
+  .phoneBtn {
+    padding: 5px;
+
+    .van-button--info {
+      width: 49%;
+      float: right;
+    }
+
+    .van-button--default {
+      width: 49%;
+      float: left;
+    }
+  }
+}
+
+</style>

src/pages/processCenter/pages/phone/wfhxzg/step5.vue

@@ -134,6 +134,7 @@
       show-submit
       show-back
       approval
+      show-transfer
       @back="handleSubmitNo"
       :submitLoading="isSubmit"
       :isSubmitBack="backLoading"
@@ -152,12 +153,19 @@
       >
       </el-upload>
     </el-dialog>
-    <Role-tree
+<!--    <Role-tree
       check-box
       :is-title="drawerTitle"
       :is-visible.sync="modalshowflag"
       :nodeList="nodeList"
       @checkedRole="drawerCheck"
+    />-->
+    <!-- 写有 check-more 是多人，没有就是单人 -->
+    <phone-role
+      :role-title="roleTitle"
+      :result-list="phoneRoleList"
+      :is-show-phone.sync="showPage"
+      @checkedRole="phoneSumit"
     />
   </div>
 </template>
@@ -207,6 +215,12 @@ export default {
       // 驳回弹窗状态
       backDialog: false,
 
+      // 储存手机端选人集合
+      phoneRoleList: [],
+      roleTitle: '',
+      showPage: false,
+      phoneRole: '',
+
     }
   },
   components: {
@@ -308,11 +322,18 @@ export default {
         this.isSubmit = false
       })
     },
-    drawerCheck (data) {
+
-      this.turnLoading = true
+    // 转办按钮
+    handleTurnTo() {
+      this.showPage = true
+      this.roleTitle = '转办处理人'
+    },
+    // 转办选人框
+    phoneSumit (data) {
+      this.phoneRoleList = data
       changeAssigneeNew({
         taskId: this.taskIds, // 任务id
-        assignee: data[0].id, // 被委托人
+        assignee: data[0].usId, // 被委托人
         userId: this.userId, // 委托人
         pId: this.pId // 流程实例
       }).then(res =>{
@@ -324,12 +345,7 @@ export default {
           this.$message.warning(res.message)
         }
       })
-      this.modalshowflag = false
+      // this.showPage = false
-    },
-    // 转办按钮
-    handleTurnTo() {
-      this.modalshowflag = true
-      this.drawerTitle = '转办处理人'
     },
     handleSubmitNo() {
       this.backLoading = true
@@ -402,6 +418,9 @@ export default {
     pageSizeChange () {
       this.getTableByPage()
     },
+    showPagePC() {
+      this.showPage = true
+    },
   }
 }
 </script>