customerFollowSelectOffer.vue

<template>
  <el-dialog append-to-body :title="$t('报价单')" :visible.sync="offerDialogVisible" :close-on-click-modal="false" width="80%" @close="$emit('close')">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item :label="$t('编号')" prop="searchNumber">
        <el-input v-model="queryParams.searchNumber" :placeholder="$t('请输入报价单号、订单号')" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('客户')" prop="searchCustomer">
        <el-input v-model="queryParams.searchCustomer" :placeholder="$t('请输入客户')" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('客户经理')" prop="followUpSalesmanId">
        <user-selector v-model="queryParams.followUpSalesmanId" clearable />
      </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-table :data="offerList" border size="mini">
      <el-table-column align="center" width="80">
        <template slot-scope="{ row }">
          <el-radio v-model="offerId" :label="row.offerId">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column :label="$t('报价单号')" min-width="160px">
        <template slot-scope="{ row }">
          <el-link type="primary" @click.native="$router.push('/offer/detail?offerId=' + row.offerId)">{{ row.number }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('销售阶段')" min-width="120">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.ECW_OFFER_STATUS" :value="row.status" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单编号')" min-width="150px">
        <template slot-scope="{ row }">
          <el-link type="primary" @click.native="$router.push('/order/detail?orderId=' + row.orderId)">{{ row.orderNo }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户编号')" align="center" min-width="100">
        <template slot-scope="{ row }">
          <el-link type="primary" @click.native="$router.push('/customer/query/' + row.relationId)">{{ row.customerNumber }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户名称')" align="center" prop="relationName" min-width="100" />
      <el-table-column :label="$t('联系方式')">
        <template slot-scope="scope"> +{{ scope.row.relationAreaCode }}{{ scope.row.relationPhone }} </template>
      </el-table-column>
      <el-table-column :label="$t('运输方式')">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('渠道')" align="center" min-width="120" prop="channelName"> </el-table-column>
      <el-table-column :label="$t('始发地')" align="center" min-width="120" prop="departureName"> </el-table-column>
      <el-table-column :label="$t('目的地')" align="center" prop="objectiveName" min-width="120" />
      <el-table-column :label="$t('预计销售额')" min-width="160">
        <template slot-scope="{ row }">
          <div class="" v-for="(item, feeIndex) in row.estCostVO.feeDtoList" :key="feeIndex">
            <dict-tag :type="DICT_TYPE.ECW_COST_FEE_TYPE" :value="item.feeType" />
            {{ item.amount }} {{ currencyMap[item.currencyId] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户经理')" prop="creatorName" align="center" min-width="100" />
      <el-table-column :label="$t('创建时间')" align="center" min-width="160">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="offerTotal > 0" :total="offerTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getOfferList" />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">{{ $t("确 定") }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCurrencyList } from "@/api/ecw/currency"
import { getOfferPage } from "@/api/ecw/offer"
import UserSelector from "@/components/UserSelector"

export default {
  name: "CustomerFollowSelectOffer",
  components: {
    UserSelector
  },
  props: {
    customerId: Number
  },
  data() {
    return {
      offerId: null,
      offerDialogVisible: false,
      queryParams: {
        pageNo: 1,
        pageSize: 6
      },
      offerList: [],
      offerTotal: 0,
      currencyList: []
    }
  },
  created() {
    getCurrencyList().then((res) => {
      this.currencyList = res.data
    })

    this.getOfferList()
    this.offerDialogVisible = true
  },
  computed: {
    currencyMap() {
      let map = {}
      this.currencyList.forEach((item) => {
        map[item.id] = this.$l(item, "title")
      })
      return map
    },
    exportCityList() {
      return this.tradeCityList.filter((item) => item.type == 2)
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type == 1)
    }
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getOfferList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    getOfferList() {
      getOfferPage({
        ...this.queryParams,
        customerId: this.customerId
      }).then((response) => {
        this.offerList = response.data.list
        this.offerTotal = response.data.total
      })
    },
    confirm() {
      if (this.offerId) {
        this.$emit("select", this.offerId)
        this.offerDialogVisible = false
      } else {
        this.$message.error(this.$t("请选择报价单"))
      }
    }
  }
}
</script>