yos_web/src/template/selectSaler/index.vue

<template>
  <div>
    <el-dialog :visible.sync="visible" append-to-body width="900px">
      <div class="flex-align-center flex-between mt-10">
        <el-input
          style="width:200px"
          size="small"
          suffix-icon="el-icon-search"
          :placeholder="$t('搜索')"
          @input="valueChange"
          v-model="condition"
          @keyup.enter.native="listData(customParam ? customParam.content.pageNumber = 1 : param.content.pageNumber = 1)"
          @clear="listData(customParam ? customParam.content.pageNumber = 1 : param.content.pageNumber = 1)" clearable></el-input>
      </div>
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          size="mini"
          height="50vh"
          border>
          <el-table-column
            prop="name"
            :label="$t('姓名')"
            width="100">
          </el-table-column>
          <el-table-column
            prop="position"
            :label="$t('职位')"
            width="120">
          </el-table-column>
          <el-table-column
              prop="areaname"
              :label="$t(`负责区域`)"
              width="0">
<!--            <template slot-scope="scope">-->
<!--              <span v-if="scope.row.salearea">-->
<!--                <span v-for="(item,index) in scope.row.salearea" :key="index">-->
<!--                  {{index === scope.row.salearea.length -1?item.areafullname:item.areafullname + '，'}}-->
<!--                </span>-->
<!--              </span>-->
<!--              <span v-else>-->
<!--                {{'&#45;&#45;'}}-->
<!--              </span>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column
            prop="userphonenumber"
            :label="$t(`手机号码`)"
            width="150">
          </el-table-column>
          <el-table-column
            :label="$t('操作')"
            width="80">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="selectRow(scope.row)">{{$t('选 择')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top:16px;text-align:right">
          <el-pagination
            background
            small
            @current-change="handleCurrentChange"
            :current-page="customParam ? customParam.content.pageNumber : param.content.pageNumber"
            :page-size="customParam ? customParam.content.pageSize : param.content.pageSize"
            layout="total, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
    <slot name="input"></slot>
  </div>
</template>

<script>
export default {
  props:['customParam'],
  data () {
    return {
      visible:false,
      param:{
        "id": 20221122153902,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        },
      },
      tableData: [],
      total:0,
      currentPage:0,
      search:'',
      condition:''
    }
  },
  methods:{
    async listData () {
      const res = await this.$api.requested(this.customParam ? this.customParam : this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      // console.log(this.tableData);

    },
    valueChange (data) {
      console.log(data);
      if (this.customParam) {
        this.customParam.content.where.condition = data
      } else {
        this.param.content.where.condition = data
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      if (this.customParam) {
        this.customParam.content.pageNumber = val
      } else {
        this.param.content.pageNumber = val
      }
      this.listData()
    },
    selectRow (row) {
      this.$emit('selectRow',row)
    },
    // searchQuery(){
    //   /*this.customParam.content.where.condition = this.search*/
    //   this.param.content.where.condition = this.search
    //   this.listData()
    // }
  },
  mounted() {
    this.listData()
  },
  created () {
  },
}

</script>
<style>
</style>