customerLog.vue

<template>
 <div :style="{padding:customerId ? '0px' : '20px'}">
   <el-card style="margin-bottom: 30px"  v-show="!customerId" :title="$t('客户操作日志')">
     <el-descriptions border :column="3">
       <el-descriptions-item :label="$t('订单编号')"><el-input :placeholder="$t('请输入订单编号')" v-model="queryForm.orderNo"></el-input></el-descriptions-item>
       <el-descriptions-item :label="$t('操作人')">
         <el-select filterable  v-model="queryForm.operator">
           <el-option v-for="(item) in allSimplList" :value="item.id" :label="item.nickname" :key="item.id"></el-option>
         </el-select>
       </el-descriptions-item>
       <el-descriptions-item :label="$t('老客户经理')">
         <el-select filterable  v-model="queryForm.oldCustomerService">
           <el-option v-for="(item) in customerServiceList" :value="item.id" :label="item.nickname" :key="item.id"></el-option>
         </el-select>
<!--         <el-input v-model="queryForm.oldCustomerService"></el-input>-->
       </el-descriptions-item>
<!--       <el-descriptions-item label="客户编号"><el-input :placeholder="$t('请输入客户编号')" v-model="queryForm.number"></el-input></el-descriptions-item>-->
       <el-descriptions-item :label="$t('新客户经理')">
         <el-select clearable filterable  v-model="queryForm.newCustomerService">
           <el-option v-for="(item) in customerServiceList" :value="item.id" :label="item.nickname" :key="item.id"></el-option>
         </el-select>
<!--         <el-input v-model="queryForm.newCustomerService"></el-input>-->
       </el-descriptions-item>
<!--       <el-descriptions-item label="客户名称"><el-input :placeholder="$t('请输入客户名称')" style="width: 45%;" v-model="queryForm.name"></el-input></el-descriptions-item>-->
       <el-descriptions-item :label="$t('操作类型')">
         <dict-selector  :type="DICT_TYPE.CUSTOMER_OPERATE_TYPE" v-model="queryForm.operateType">

         </dict-selector>
       </el-descriptions-item>
       <el-descriptions-item :label="$t('新的预计进入公海的时间')">
           <el-date-picker
          v-model="newEstimateEnterOpenSeaTimeArr"
           type="datetimerange"
           value-format="yyyy-MM-dd HH:mm:ss"
           range-separator="至"
           :start-placeholder="$t('开始日期')"
           :end-placeholder="$t('结束日期')"
           align="right">
         </el-date-picker>
       </el-descriptions-item>
       <el-descriptions-item :label="$t('老的预计进入公海的时间')">
         <el-date-picker
           v-model="newEstimateEnterOpenSeaTimeArr"
           type="datetimerange"
           value-format="yyyy-MM-dd HH:mm:ss"
           range-separator="至"
           :start-placeholder="$t('开始日期')"
           :end-placeholder="$t('结束日期')"
           align="right">
         </el-date-picker>
       </el-descriptions-item>
       <el-descriptions-item>
         <el-button @click="getList">{{$t('搜索')}}</el-button>
         <el-button @click="initialize();getList()">{{$t('重置')}}</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </el-card>
   <el-table :data="list">
     <el-table-column :label="$t('订单编号')" prop="orderNo"></el-table-column>
     <el-table-column :label="$t('新客户经理')" prop="newCustomerService">
       <template v-slot="{row}">
         {{row.newCustomerService ? operatorFn(row.newCustomerService) : '/'}}
       </template>
     </el-table-column>
     <el-table-column :label="$t('老客户经理')" prop="oldCustomerService">
       <template v-slot="{row}">
         {{row.oldCustomerService ? operatorFn(row.oldCustomerService) : '/'}}
       </template>
     </el-table-column>
     <el-table-column :label="$t('操作类型')">
       <template v-slot="{row}">
         <dict-tag :type="DICT_TYPE.CUSTOMER_OPERATE_TYPE" :value="row.operateType"></dict-tag>
       </template>
     </el-table-column>
     <el-table-column :label="$t('操作人')" prop="operatorName">
     </el-table-column>
     <el-table-column :label="$t('操作时间')" prop="operator">
        <template v-slot="{row}">
          {{parseTime(row.createTime) || '/'}}
        </template>
     </el-table-column>
     <el-table-column :label="$t('新的预计入公海时间')">
       <template v-slot="{row}">
         {{parseTime(row.newEstimateEnterOpenSeaTime) || '/'}}
       </template>
     </el-table-column>
     <el-table-column :label="$t('老的预计入公海时间')" >
       <template v-slot="{row}">
         {{parseTime(row.oldEstimateEnterOpenSeaTime) || '/'}}
       </template>
     </el-table-column>
     <el-table-column :label="$t('备注')" prop="remark" >
     </el-table-column>
     <el-table-column  :label="$t('操作')">
       <template v-slot="{row}">
         <el-button type="text" @click="getCustomerLog(row.id)">
           {{$t('详情')}}
         </el-button>
       </template>
     </el-table-column>
   </el-table>
   <pagination v-show="total > 0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.rows"
               @pagination="getList"/>
   <el-dialog :title="$t('客户日志')" :visible.sync="show">
     <el-form>
       <el-form-item :label="$t('订单编号')+':'">
         {{dataLog.orderNo ? dataLog.orderNo :'/'}}
       </el-form-item>
       <el-form-item :label="$t('新客户经理')+':'">
         {{dataLog.newCustomerService ? operatorFn(dataLog.newCustomerService) : '/'}}
       </el-form-item>
       <el-form-item :label="$t('老客户经理')+':'">
         {{dataLog.oldCustomerService ? operatorFn(dataLog.oldCustomerService) : '/'}}
       </el-form-item>
       <el-form-item :label="$t('操作类型')+':'">
         <dict-tag :type="DICT_TYPE.CUSTOMER_OPERATE_TYPE" :value="dataLog.operateType"></dict-tag>
       </el-form-item>
       <el-form-item :label="$t('操作人')+':'">
         {{dataLog.operatorName}}
       </el-form-item>
       <el-form-item :label="$t('操作时间')+':'">
         {{parseTime(dataLog.createTime)}}
       </el-form-item>
       <el-form-item :label="$t('新预计进入公海时间')+':'">
         {{parseTime(dataLog.newEstimateEnterOpenSeaTime) || '/'}}
       </el-form-item>
       <el-form-item :label="$t('老的预计进入公海时间')+':'">
         {{parseTime(dataLog.oldEstimateEnterOpenSeaTime) || '/'}}
       </el-form-item>
       <el-form-item :label="$t('备注')+':'">
         {{dataLog.remark}}
       </el-form-item>
     </el-form>
   </el-dialog>
 </div>
</template>

<script>
import {getCustomerOperatelog, getCustomerOperatelogPage} from "@/api/ecw/customer";
import {parseTime} from "../../../utils/ruoyi";
import Template from "@/views/cms/template/index.vue";
import {DICT_TYPE} from "@/utils/dict";
import {listAllSimpl, listServiceUser} from "@/api/system/user";
import {number} from "echarts/lib/export";
export default {
  name: "customerLog",
  props:{
    customerId:{
      type:[Number,String],
      default:null,
    }
  },
  computed: {
    DICT_TYPE() {
      return DICT_TYPE
    },
    operatorFn(){
      return (val)=>{
        return this.allSimplList.find(item => item.id == val)?.nickname || '/'
      }
    }
  },
  components: {Template},
  created() {
     this.initialize()
    this.getList()
    listAllSimpl().then(r => {
      this.allSimplList = r.data
    })
    listServiceUser().then(r=>{
      this.customerServiceList = r.data;
    })
    },
  data(){
    return {
      queryForm:{},
      newEstimateEnterOpenSeaTimeArr:[],
      oldEstimateEnterOpenSeaTimeArr:[],
      list:[],
      total:0,
      show:false,
      allSimplList:[],
      dataLog:{},
      customerServiceList:[],
    }
  },
  methods:{
    parseTime,
    initialize(){
      this.queryForm = {
        page:1,
        rows:10,
        name:null,
        oldCustomerService:null,
        newCustomerService:null,
        operateType:null,
        operator:null,
        orderNo:null,
        newEstimateEnterOpenSeaTime:null,
        beginNewEstimateEnterOpenSeaTime:null,
        beginOldEstimateEnterOpenSeaTime:null,
        endNewEstimateEnterOpenSeaTime:null,
        endOldEstimateEnterOpenSeaTime:null,
        customerId:this.customerId
      }
    },
    getList(){
      this.queryForm.beginNewEstimateEnterOpenSeaTime = this.newEstimateEnterOpenSeaTimeArr[0] || ''
      this.queryForm.endNewEstimateEnterOpenSeaTime = this.newEstimateEnterOpenSeaTimeArr[1] || ''
      this.beginOldEstimateEnterOpenSeaTime = this.oldEstimateEnterOpenSeaTimeArr[0] || ''
      this.endOldEstimateEnterOpenSeaTime = this.oldEstimateEnterOpenSeaTimeArr[1] || ''
      getCustomerOperatelogPage(this.queryForm).then(r => {
         this.list = r.data.list;
         this.total = r.data.total;
      })
    },
    getCustomerLog(val){
      getCustomerOperatelog({id:val}).then(r =>{
       this.dataLog = r.data
        this.show = true;
      })
    }
  }
}
</script>

<style scoped>

</style>