mp-ui-pc/src/views/business/coupon/components/channelTicket.vue

<template>
  <el-dialog title="选择门店" :visible.sync="channelShow" min-width="800px" :before-close="close">
    <el-form :model="queryParams" ref="queryForm" label-width="80px" size="small">
      <el-row :gutter="10">
        <el-col :span="7">
          <el-form-item label="上级渠道" prop="parentId">
            <el-select
              v-model="queryParams.parentId"
              placeholder="请选择上级渠道"
              style="width: 100%;"
              filterable
              clearable
              :filter-method="dataFilter"
              @change="handleQuery"
            >
              <el-option
                v-for="(item, index) in channelList"
                :key="item.channelId"
                :label="item.name"
                :value="item.channelId">
                <div>
                  <span style="float: left;">{{item.name}} </span>
                  <span style="float: right;">{{item.mobile}}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="门店名称">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入门店名称"
              clearable
              @change="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="手机号码">
            <el-input
              v-model="queryParams.mobile"
              placeholder="请输入手机号码"
              clearable
              @change="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery" >搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="tableData" row-key="channelId" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :reserve-selection="true" />
      <el-table-column label="门店编号" prop="channelId" min-width="90" />
      <el-table-column label="门店名称" prop="name" />
      <el-table-column label="手机号码" prop="mobile" />
      <el-table-column label="上级渠道" prop="parentsName"/>
      <el-table-column label="认证状态" prop="status">
        <template slot-scope="{row}">
          <el-tag :type="row.certifyStatus && JSON.parse(row.certifyStatus).value === 'y' ? 'success' : 'info'">{{ row.certifyStatus && JSON.parse(row.certifyStatus).desc }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList()" />
    <span slot="footer">
      <el-button type="info" plain @click="close">取消</el-button>
      <el-button type="primary" @click="update">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { listSaleSite  } from "@/api/admin/salesite";
import { publicFileGetUrl } from "@/api/common"
import { listAllChannel} from "@/api/admin/channel"
export default {
  name: "ChannelTicket",
  props: {
    value: {
      type: Array,
      default: []
    },
    channelShow: {
      type: Boolean,
      default: false,
    },
    excludeChannelIds:{
      type: Array,
      default: []
    },
  },
  data() {
    return {
      IMG_URL: publicFileGetUrl,
      loading: false,
      tableData: [],
      queryParams: {},
      total: 0,
      selection: [],
      // 上级渠道列表
      channelList:[],
    }
  },
  created() {
    this.getChannelList()
    this.listSaleSite();
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.channelList = this.channelCopyList;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    listSaleSite() {
      this.getList(true)
      this.selection = this.value
      // this.$refs.table.toggleRowSelection(this.selection)
    },
    getList(reset) {
      if (this.loading) {
        return
      }
      this.loading = true
      if (reset) {
        this.queryParams = { pageNum: 1, pageSize: 10 }
      }
      if(this.excludeChannelIds){
        this.queryParams.excludeChannelIds = this.excludeChannelIds
      }
      listSaleSite('pageNum='+this.queryParams.pageNum + '&pageSize='+this.queryParams.pageSize+'&', this.queryParams).then(res => {
        this.loading = false
        if (res.code === 0) {
          this.tableData = res.rows
          this.total = res.total
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleSelectionChange(val) {
      this.selection = val
    },
    update() {
      this.$emit('channelTicket', this.selection);
      this.close()
    },
    close() {
      this.$emit("close");
    },
    dataFilter(val) {
      if (val) { //val存在
        this.channelList = this.channelCopyList.filter((item) => {
          if (!!~item.mobile.indexOf(val) || !!~item.mobile.toUpperCase().indexOf(val.toUpperCase())
            || !!~item.name.indexOf(val) || !!~item.name.indexOf(val)) {
            return true
          }
        })
      } else { //val为空时，还原数组
        this.channelList = this.channelCopyList;
      }
    },
    // 获取上级渠道下拉列表
    getChannelList(){
      listAllChannel().then(response => {
        this.channelList = response.data || [];
        this.channelCopyList = response.data || [];
      });
    },
  }
}
</script>