order-ui-pc/src/views/serviceParam/terrace/searchCompanyModal.vue

<template>
  <el-dialog :visible.sync="innerVisible" append-to-body title="业务渠道" width="1024px" center>
    <ex-table
      v-loading="loading"
      :table="table"
      :data="tableData"
      :columns="columns"
      :page="pageInfo"
      :size="size"
      @selection="({list}) => selectedRows = list"
      @page-curr-change="handlePageChange"
      @page-size-change="handleSizeChange"
      @screen-reset="
        pageInfo.curr = 1;
        parmValue.page = 1;
        searchList();
      "
      @screen-submit="
        pageInfo.curr = 1;
        parmValue.page = 1;
        searchList();
      "
    >
      <template #table-header>
        <div style="width: 100%">
          <el-row gutter="10">
            <el-col :span="6">
              <search-work-company
                :value="parmValue.companyNo"
                size="mini"
                :placeholder="'业务公司'"
                @searchChange="companyNosearchChange"
              />
            </el-col>

            <el-col :span="6">
              <el-input
                v-model="parmValue.channel_name"
                placeholder="支付渠道名称"
                clearable
                size="mini"
                @change=" pageInfo.curr = 1;
                          parmValue.page = 1;
                          searchList();"
              />
            </el-col>
          </el-row>
        </div>
      </template>
    </ex-table>

    <div class="fr">
      <el-button size="mini" type="primary" @click="onSave">保存</el-button>
    </div>

    <div style="clear:both;" />
  </el-dialog>
</template>

<script>
import asyncRequest from '@/apis/service/serviceParam/terrace'
export default {
  props: ['visible'],
  data() {
    return {
      loading: false,
      selectedRows: [],
      tableData: [],
      table: {
        stripe: true,
        border: true
      },
      columns: [
        {
          type: 'selection'
        },
        {
          prop: 'channel_name',
          label: '渠道名称'
        },
        {
          prop: 'companyName',
          label: '业务公司名称'
        }
      ],
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0
      },
      parmValue: {

      }
    }
  },
  computed: {
    innerVisible: {
      get() {
        return this.visible
      },
      set(newValue) {
        this.$emit('update:visible', newValue)
      }
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        this.searchList()
      } else {
        this.tableData = []
      }
    }
  },
  methods: {
    onSave() {
      this.$emit('updatePaymentChannel', this.selectedRows)
      this.innerVisible = false
    },
    async companyNosearchChange(e) {
      const { id, code, label } = e
      this.parmValue['companyNo'] = code || ''
      this.pageInfo.curr = 1
      this.parmValue.page = 1
      this.searchList()
    },
    async searchList() {
      if (
        (this.parmValue.start !== '' && this.parmValue.end === '') ||
        (this.parmValue.start == '' && this.parmValue.end != '')
      ) {
        this.$message.warning('开始时间和结束时间不能为空')
        return
      }
      this.loading = true
      const res = await asyncRequest.paymentChannelist(this.parmValue)
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list
        this.pageInfo.total = Number(res.data.count)
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout()
      } else {
        this.tableData = []
        this.pageInfo.total = 0
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .Pagination{
  .el-pagination{
    float: left;
  }
}
</style>