zfire-newmall-admin/src/components/selectComponent/selectMember.vue

<template>
  <el-dialog title="选择会员" :visible.sync="show" :show-close="false" width="1000px" :close-on-click-modal="false">
    <div class="dialog-container2 clearfix">
      <el-form ref="screenForm" :model="member_screenForm" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="7" :sm="7" :lg="7">
            <el-form-item label="关键词" prop="keyword" label-width="55px">
              <el-input v-model="member_screenForm.keyword" placeholder="请输入会员名称/电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :lg="8">
            <el-form-item label="注册日期" prop="registerDate" label-width="70px">
              <el-date-picker style="width: 100%" v-model="member_screenForm.registerDate" type="daterange"
                value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col  :xs="6" :sm="6" :lg="6">
            <el-form-item label="" prop="type" label-width="20px">
              <el-radio-group v-model="member_screenForm.type" :disabled="memberList.length > 0 ? true : false">
                <el-radio :label="'SERVICE'">业务员</el-radio>
                <el-radio :label="'GENERAL'">普通用户</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :lg="2" class="tr">
            <el-button size="small" type="primary" @click="getMemberListByScreen">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div class="table memberTable" style="margin: 10px 0 20px;">
        <el-table v-loading="memberTable_listLoading" :data="memberTable_dataList" element-loading-text="Loading"
          tooltip-effect="dark" style="width: 100%" max-height="360" @selection-change="handleChooseMember">
          <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
          <el-table-column align="center" prop="nickName" label="会员名称" min-width="150"></el-table-column>
          <el-table-column align="center" prop="sex" label="性别" min-width="100"></el-table-column>
          <el-table-column align="center" prop="mobile" label="注册手机" min-width="100"></el-table-column>
          <el-table-column align="center" prop="memberName" label="角色" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="memberName" label="状态" min-width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status | MEMBER_CURRENT_STATUS_FILTER
              }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination @current-change="memberTableCurrentChange" :current-page="memberTable_currentPage"
            :page-size="memberTable_pageSize" background layout="prev, pager, next" :total="memberTable_listTotal">
          </el-pagination>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitAddMember">保 存</el-button>
      <el-button @click="cancelAddMember">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMemberList } from "@/api/coupon";
export default {
  props: {
    memberList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show:true,
      member_screenForm: { // 筛选表单数据
        keyword: '', // 名称
        registerDate: [],
        type: 'SERVICE',
      },
      memberTable_dataList: [], // 列表数据
      memberTable_listLoading: true, // 列表加载loading
      memberTable_currentPage: 1, // 当前页码
      memberTable_pageSize: 10, // 每页数量
      memberTable_listTotal: 0, // 列表总数
      memberTable_choose: [], // table中 当前选择会员
    }
  },
  created() {
    this.getMemberList()
  },
  methods: {
    // 搜索
    getMemberListByScreen() {
      if (this.memberTable_choose.length > 0) {
        return this.$errorMsg('当前已选择会员，不可搜索');
      }
      this.memberTable_currentPage = 1;
      this.getMemberList();
    },

    // 查询重复值并禁选
    checkboxSelect(row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },
    // 获取会员列表
    getMemberList() {
      getMemberList({
        pageNum: this.memberTable_currentPage,
        pageSize: this.memberTable_pageSize,
        keyword: this.member_screenForm.keyword,
        type: this.member_screenForm.type,
        startTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[0] ? this.member_screenForm.registerDate[0] + ' 00:00:00' : null,
        endTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[1] ? this.member_screenForm.registerDate[1] + ' 23:59:59' : null,
      }).then(res => {
        let oldMemberList = this.memberList;
        let newMemberList = res.data.records;
        for (let i = 0; i < oldMemberList.length; i++) {
          let oldItem = oldMemberList[i]
          for (let j = 0; j < newMemberList.length; j++) {
            let newItem = newMemberList[j]
            if (newItem.userId === oldItem.userId) {
              newMemberList[j].selected = true;
              break;
            }
          }
        }
        this.memberTable_dataList = newMemberList;
        this.memberTable_listTotal = res.data.total;
        this.memberTable_listLoading = false;
      })
    },

    // 更改列表当前页
    memberTableCurrentChange(val) {
      if (this.memberTable_choose.length > 0) {
        return this.$errorMsg('当前已选择会员，不可切换分页');
      }
      this.memberTable_currentPage = val;
      this.getMemberList();
    },

    // table点击选择会员
    handleChooseMember(val) {
      this.memberTable_choose = val;
    },

    // 取消 选择会员
    cancelAddMember() {
      this.$emit("cancelSelectMember")
    },

    // 提交 选择会员
    submitAddMember() {
      this.$emit("selectMemberPass", [...this.memberList, ...this.memberTable_choose])
      this.$nextTick(() => {
        this.$emit("cancelSelectMember")
      })
    },
  }
}
</script>

<style scoped lang="scss">
</style>