手机端选人组件

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>