前端人员选择组件封装

功能：

• 人员选择，返回人员参数，以及人员参数id数组
• 支持单选，多选人员
• 支持重新选择回显上次选中人员

    <!-- 弹窗 -->
    <a-modal v-model="modalVisible" :footer="null" :bodyStyle="{ padding: 0 }" :width="800" :closable="true"
      :centered="true" :destroyOnClose="true">
      <!-- 角色 -->
      <template v-if="type === 'role'">
        <choose-role @chooseRole="commonChoose" :single="single" :pSelectIds="selectIds" :pSelectList="selectList"
          :modalTitle="modalTitle ? modalTitle : '选择角色'" />
      </template>
      <!-- 其他类似组件... -->
    </a-modal>

<template>
  <div class="common-modal-container">
    <div class="title-container">
      <p class="title">{{ modalTitle }}</p>
    </div>
    <div class="choose-content-container">
      <div class="choose-content-left-container">
        <div class="left-container">
          <p class="title">选择：</p>
        </div>
        <div class="common-content-container">
          <div style="margin:12px 0 16px">
            <a-input v-model="searchParams.name" placeholder="搜索" @change="search" class="common-modal-input"
              allowClear>
              <img slot="prefix"
                src="https://hs-pro-server.oss-cn-hangzhou.aliyuncs.com/saas/saaspc/assets/images/icon_search.png"
                style="width:14px" />
            </a-input>
          </div>
          <div class="scroll-container">
            <template v-if="loading">
              <a-spin />
            </template>
            <vuescroll :ops="ops" ref="vs" @handle-scroll="handleScroll">
              <template v-if="single === 1">
                <a-radio :style="radioStyle" :checked="item.checked" :value="item.id" v-for="item, index in choiceList"
                  :key="index" @click="onChange(item, 1)">
                  <span>{{ item.roleName }}</span>
                </a-radio>
              </template>
              <template v-else>
                <a-checkbox :style="radioStyle" :checked="item.checked" :value="item.id"
                  v-for="item, index in choiceList" :key="index" @click="onChange(item, 1)">
                  <span>{{ item.roleName }}</span>
                </a-checkbox>
              </template>
              <div v-if="!loading && choiceList.length === 0" class="no-data-modal-container">
                <img slot="prefix"
                  src="https://hs-pro-server.oss-cn-hangzhou.aliyuncs.com/saas/saaspc/assets/images/train/icon_no_data_modal.png"
                  style="width:86px" />
                <p>暂无数据～</p>
              </div>
            </vuescroll>
          </div>
        </div>
      </div>
      <div class="choose-content-left-container">
        <div class="left-container" style="margin-bottom:8px">
          <p class="title">已选：</p>
        </div>
        <div class="common-content-container">
          <vuescroll :ops="ops">
            <div class="content-list-container">
              <div class="content-container" v-for="item, index in selectList" :key="index">
                <span v-text="item.roleName"></span>
                <i class="iconfont icon-quxiao" @click.stop="onChange(item, 2)" />
              </div>
            </div>
          </vuescroll>
        </div>
      </div>
    </div>
    <div class="choose-footer-container">
      <a-button class="reset-btn" @click="submit(1)">取消</a-button>
      <a-button class="submit-btn" type="primary" @click="submit(2)">确定</a-button>
    </div>
  </div>
</template>
<script>
import vuescroll from "vuescroll";
import { getRoleList } from "@/api/member/member";
import _ from "lodash";
import moment from "moment";
export default {
  name: "chooseRole",
  components: {
    vuescroll,
  },
  props: {
    pSelectIds: {
      type: Array,
      default: () => [],
    },
    pSelectList: {
      type: Array,
      default: () => [],
    },
    modalTitle: {
      type: String,
      default: '请选择人员',
    },
    single: Number, //1-单选 2-多选
  },
  data () {
    return {
      ops: {
        bar: {
          background: "#2E5BFF",
        },
      },
      searchParams: {
        current: 1,
        size: 10,
        name: "",
      },
      choiceList: [],
      loading: true,
      searchContent: "",
      selectList: [],
      selectIds: [],
      radioStyle: {
        margin: "0",
        padding: "6px 20px",
        display: "block",
        lineHeight: "20px",
        position: "relative",
      },
    };
  },
  created () {
    this.selectList = this.pSelectList;
    this.selectIds = this.pSelectIds;
    this.getList();
  },
  mounted () { },
  computed: {},
  methods: {
    getList () {
      // 获取用户
      let params = this.searchParams;
      this.loading = true;
      this.searchTime = moment().valueOf();
      params.searchTime = this.searchTime;
      getRoleList(params).then((res) => {
        const { searchTime } = res.config.params;
        const { records, current, total } = res.data.data;
        if (this.searchTime === searchTime) {
          this.loading = false;
          let selectIds = this.selectIds;
          if (params.current == 1) this.choiceList = []; //如果是第一页需手动制空列表
          this.choiceList = this.choiceList.concat(
            records.map((a) => {
              a.checked = selectIds.indexOf(a.id) > -1;
              return a;
            })
          ); //追加新数据
          this.finish = records.length < params.size;
        }
      });
    },
    handleSubmit () {
      this.searchParams.current = 1;
      this.getList();
    },
    handleScroll (vertical, horizontal, nativeEvent) {
      console.log(vertical, horizontal, nativeEvent);
      const { v, h } = this.$refs["vs"].getScrollProcess();
      console.log(v, h);
      if (v >= 0.9) {
        if (!this.loading && !this.finish) {
          this.searchParams.current++;
          this.getList();
        }
      }
    },
    search: _.throttle(function() {
      this.handleSubmit();
    }, 100),
    onChange (item, type) {
      if (this.single === 1) {
        if (type === 1) {
          this.choiceList = this.choiceList.map((a) => {
            if (a.id === item.id) {
              a.checked = true;
            } else {
              a.checked = false;
            }
            return a;
          });
        } else {
          this.choiceList = this.choiceList.map((a) => {
            a.checked = false;
            return a;
          });
        }
        this.selectList = this.choiceList.filter((a) => a.checked);
      } else {
        this.choiceList = this.choiceList.map((a) => {
          if (a.id === item.id) {
            a.checked = !a.checked;
          }
          return a;
        });
        if (type === 1) {
          let selectList = this.selectList.filter((a) => a.id === item.id);
          if (selectList.length > 0) {
            this.selectList = this.selectList.filter((a) => a.id !== item.id);
          } else {
            this.selectList = this.selectList.concat(
              this.choiceList.filter((a) => a.id === item.id)
            );
          }
          console.log(item.id);
        } else if (type === 2) {
          this.selectList = this.selectList.filter((a) => a.id !== item.id);
        }
      }
      this.selectIds = this.selectList.map((a) => a.id);
    },

    submit (type) {
      if (type === 1) {
        this.$emit("chooseRole", type);
      } else if (type === 2) {
        this.$emit("chooseRole", type, this.selectList, this.selectIds);
      }
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.common-modal-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .title-container {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;

    .title {
      font-size: 16px;
      color: #1a1a1a;
      font-weight: 500;
    }
  }
}
</style>