logList.vue

<template>
  <div class="app-container">
        <el-card>
            <div slot="header" class="card-title">{{$t('跟进记录列表')}}</div>
          <!-- 列表 -->
          <div class="offer-header">
              <span style="font-size: 15px;">{{$t('报价单号')}}：{{number}}</span>
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
              >{{$t('新增')}}</el-button>
          </div>

          <el-table v-loading="loading" :data="list">
            <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
              <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
            <el-table-column :label="$t('跟进类型')" align="center" prop="type" >
              <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.ECW_OFFER_TYPE" :value="scope.row.type"></dict-tag>
                </template>
              </el-table-column>
            <el-table-column :label="$t('联系人')" align="center" prop="contactName" />

            <el-table-column :label="$t('跟进方式')" align="center" prop="followUpMethod">
           <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.CUSTOMER_FOLLOW_METHOD" :value="scope.row.followUpMethod"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('跟进时间')" align="center" prop="followUpTime" width="180">
           <template slot-scope="scope">
                <span>{{ scope.row.followUpTime}}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('客户反馈')" align="center" prop="customerFeedback" />
            <el-table-column :label="$t('处理结果')" align="center" prop="processingResults" />
            <el-table-column :label="$t('客户经理')" align="center" prop="followUpSalesmanName">
              <template slot-scope="scope">
                <span>{{getCustomerService(scope.row.followUpSalesmanId)}}</span>
              </template>
             </el-table-column>
          </el-table>
              <pagination v-show="total > 0" :total="total" :page.sync="params.page" :limit.sync="params.rows"
                          @pagination="getList"/>
        </el-card>
  </div>
</template>

<script>
import {getOfferLogPage} from "@/api/ecw/offerLog";
import {DICT_TYPE} from  '@/utils/dict'
import {getOffer} from '@/api/ecw/offer'
  import { userList } from "@/api/system/user"
export default {
  name: "OfferLog",
  components: {

  },
  data() {
    return {
      // 遮罩层
      loading: true,
      list: [],
      total:0,
      params:{
        page:1,
        rows:20,
        offerId:0,
        type:2
      },
      number:'',
      relationId:0,
      creatorName:'test',
      creatorData:[]
    };
  },
  created() {
    if(this.$route.query.offerId){
      this.params.offerId = this.$route.query.offerId
      this.getList();
      this.getRelationID()
    }
    userList('customer service').then(res =>this.creatorData = res.data)
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      let params = {...this.params};
      // 执行查询
      getOfferLogPage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });

    },
    getCustomerService(id){
       var user = this.creatorData.find(item=>item.id==id)
       if(user) return user.nickname
       return ''
    },
    getRelationID(){
      getOffer(this.params.offerId).then(response => {
        this.relationId = response.data.consignorId;
        this.number = response.data.number;
        })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({
        path: "/offer/createLog",
        query:{
          offerId:this.params.offerId,
          number:this.number
        }
      });
    },
  }
};
</script>
<style scoped>
  .card-title{
      font-size: 18px;
      font-weight: bold;
  }
  .offer-header{
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>