chooseMember.vue

<template>
  <el-dialog :title="$t('选择会员')" :visible.sync="dialogVisible" width="80%" :before-close="dialogBeforeClose">
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" :inline="true" label-width="120px">
        <el-form-item :label="$t('当前积分')">
          <el-row :gutter="10">
            <el-col :span="8">
              <dict-selector clearable :type="DICT_TYPE.QUANTITATIVE_RELATION_SYMBOL" v-model="queryParams.holdScoreOperate" @change="handleQuery"> </dict-selector>
            </el-col>
            <el-col :span="16">
              <el-input v-model.trim="queryParams.holdScore" :placeholder="$t('请输入数字')" clearable @keyup.enter.native="handleQuery" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item :label="$t('关键词')">
          <el-input style="width: 300px" v-model.trim="queryParams.key" :placeholder="$t('请输入会员名称/会员编号/手机号')" clearable @keyup.enter.native="handleQuery" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" />
        </el-form-item>
        <el-form-item :label="$t('国家')">
          <el-select v-model="queryParams.country" :placeholder="$t('请选择国家')" clearable @change="handleGetCityList($event)" size="small">
            <el-option v-for="nodeItem in countryList" :key="nodeItem.id" :label="isChinese ? nodeItem.titleZh : nodeItem.titleEn" :value="nodeItem.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('城市')">
          <el-select v-model="queryParams.city" :placeholder="$t('请选择城市')" clearable size="small">
            <el-option v-for="nodeItem in cityList" :key="nodeItem.id" :label="isChinese ? nodeItem.titleZh : nodeItem.titleEn" :value="nodeItem.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
      <el-row class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQueryPagination"></right-toolbar>
      </el-row>
      <el-table ref="multipleTable" v-loading="loading" @selection-change="handleSelectionChange" :data="memberList">
        <el-table-column type="selection" width="55" :selectable="selectable"> </el-table-column>
        <el-table-column :label="$t('会员名称')" align="center" :prop="isChinese ? 'memberNameZh' : 'memberNameEn'"></el-table-column>
        <el-table-column width="140" :label="$t('会员编号')" align="center" prop="id"></el-table-column>
        <el-table-column width="140" :label="$t('手机号')" align="center" prop="mobile"></el-table-column>
        <el-table-column width="140" align="center" :label="$t('国家')" :prop="isChinese ? 'countryNameZh' : 'countryNameEn'"></el-table-column>
        <el-table-column :label="$t('城市')" align="center" :prop="isChinese ? 'cityNameZh' : 'cityNameEn'"></el-table-column>
        <el-table-column :label="$t('当前积分')" align="center" prop="holdScore"></el-table-column>
      </el-table>
      <!-- //分页列表 -->
      <span v-show="selectedMember.memberList.length > 0"
        >{{ $t("已选择:") }} {{ selectedMember.memberName }} {{ $t("共") }}
        <span style="color: red"> {{ selectedMember.memberList.length }} </span>
        {{ $t("人") }}</span
      >
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="handleQueryPagination" />
    </div>
    <div slot="footer">
      <el-button @click="dialogBeforeClose">取 消</el-button>
      <el-button type="primary" @click="transferSelectMember">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getDictDatas, DICT_TYPE } from "@/utils/dict"
import { getCityList, getTradeCountryList, getMemberList } from "@/api/ecw/giftManagement"
import { color } from "echarts/lib/export"

export default {
  name: "chooseMember",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    memberSelectList: {
      type: Array,
      default: () => []
    },
    giftScore: {
      type: Number | String,
      default: 0
    }
  },
  watch: {
    dialogVisible(val) {
      if (val == true) {
        this.handleQuery()
      }
    },
    memberSelectList(val) {
      this.selectedMember.memberList = val
    }
  },
  data() {
    return {
      selectedMember: { memberList: [], memberName: "" },
      countryList: [],
      cityList: [],
      total: 0,
      loading: true,
      memberList: [],
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        country: null,
        city: null,
        endTime: "",
        holdScore: null,
        holdScoreOperate: null,
        key: "",
        pageNo: 1,
        pageSize: 10,
        startTime: "",
        usedScore: null,
        usedScoreOperate: null
      }
    }
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    }
  },
  created() {
    this.handleQuery()
    this.getCountryList()
  },
  activated() {
    this.handleQuery()
  },
  methods: {
    selectable(row, index) {
      if (this.giftScore > row.holdScore) {
        return false
      }
      if (this.memberSelectList.length > 0) {
        return this.memberSelectList.some((item) => {
          return item.id != row.id
        })
      } else {
        return true
      }
    },
    handleSelectionChange(val) {
      this.selectedMember.memberList = val
      let arraryMemberName = []
      if (val) {
        this.selectedMember.memberList.forEach((element) => {
          if (this.isChinese) {
            arraryMemberName.push(element.memberNameZh)
          } else {
            arraryMemberName.push(element.memberNameEn)
          }
        })
      }
      this.selectedMember.memberName = arraryMemberName.join("、")
    },
    transferSelectMember() {
      this.dialogBeforeClose()
      this.$emit("transferSelectMemberInfo", this.selectedMember.memberList)
    },
    dialogBeforeClose() {
      this.loading = true
      this.queryParams = {
        country: null,
        city: null,
        endTime: null,
        holdScore: null,
        holdScoreOperate: null,
        key: null,
        pageNo: 1,
        pageSize: 10,
        startTime: null,
        usedScore: null,
        usedScoreOperate: null
      }
      // this.dialogVisible = false;
      this.$emit("update:dialogVisible", false)
    },
    getCountryList() {
      getTradeCountryList().then((res) => {
        this.countryList = res.data
      })
    },
    handleGetCityList(id) {
      if (id) {
        let params = {
          id: id
        }
        getCityList(params).then((res) => {
          this.cityList = res.data
        })
      } else {
        this.cityList = []
      }
    },
    handleQuery() {
      this.queryParams.pageNo = 1
      let params = { ...this.queryParams }
      getMemberList(params).then((res) => {
        this.loading = false
        this.memberList = res.data.list
        this.total = res.data.total
      })
    },
    handleQueryPagination() {
      let params = { ...this.queryParams }
      getMemberList(params).then((res) => {
        this.loading = false
        this.memberList = res.data.list
        this.total = res.data.total
      })
    },
    resetQuery() {
      this.loading = true
      this.queryParams = {
        country: null,
        city: null,
        endTime: null,
        holdScore: null,
        holdScoreOperate: null,
        key: null,
        pageNo: 1,
        pageSize: 10,
        startTime: null,
        usedScore: null,
        usedScoreOperate: null
      }
      this.handleQuery()
    }
  }
}
</script>