logListCommon.vue

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form size="small" :inline="true" label-width="100px">
          <div class="search-z">
            <el-form-item :label="$t('联系人')" prop="contactName">
              <el-input v-model.trim="followForm.contactName" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item :label="$t('联系方式')" prop="contactPhone">
              <el-input v-model.trim="followForm.contactPhone" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item :label="$t('跟进类型')">
              <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_TYPE" v-model="followForm.followType" @input="handleQuery"></dict-selector>
            </el-form-item>
            <el-form-item :label="$t('销售阶段')">
              <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_SALE_STAGE" v-model="followForm.saleStage" @input="handleQuery"></dict-selector>
            </el-form-item>
            <el-form-item :label="$t('编号')" prop="number" v-show="showSearch">
              <el-input v-model.trim="followForm.number" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item :label="$t('报价单号')" prop="offerNumber" v-show="showSearch">
              <el-input v-model.trim="followForm.offerNumber" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item :label="$t('客户经理')" prop="followUserIds" v-show="showSearch">
              <user-selector v-model="followForm.followUserIds" multiple clearable @input="handleQuery" />
            </el-form-item>
            <el-form-item :label="$t('关联跟进记录')" prop="parentNumber" v-show="showSearch">
              <el-input v-model.trim="followForm.parentNumber" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item :label="$t('跟进方式')" v-show="showSearch">
              <dict-selector clearable :type="DICT_TYPE.CUSTOMER_FOLLOWUP_METHOD" v-model="followForm.followMethod" @input="handleQuery"></dict-selector>
            </el-form-item>

            <!-- <el-form-item :label="$t('跟进结果')">
              <el-select clearable v-model="followForm.resultType" :placeholder="$t('请选择')" size="small" @change="handleQuery">
                <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_FOLLOWUP_RESULT_TYPE)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" />
              </el-select>
            </el-form-item> -->
            <el-form-item :label="$t('跟进状态')" v-show="showSearch">
              <el-select clearable v-model="followForm.status" :placeholder="$t('请选择')" size="small" @change="handleQuery">
                <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_FOLLOWUP_STATUS)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('客户来源')" v-show="showSearch">
              <el-select filterable multiple clearable v-model="followForm.customerSourceList" :placeholder="$t('请选择')" size="small" @change="handleQuery">
                <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_SOURCE)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" />
              </el-select>
            </el-form-item>
          </div>
          <div class="search-time">
            <el-form-item :label="$t('创建时间')" v-show="showSearch">
              <el-date-picker v-model="followFormTmp.createTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('跟进时间')" v-show="showSearch">
              <el-date-picker v-model="followFormTmp.followTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('下次跟进时间')" v-show="showSearch">
              <el-date-picker v-model="followFormTmp.nextTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('客户创建时间')" v-show="showSearch">
              <el-date-picker v-model="followFormTmp.customerCreateTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker>
            </el-form-item>
            <el-form-item style="padding-left: 20px; width: auto">
              <div class="flex-c-c">
                <el-button type="primary" icon="el-icon-search" @click="getDataSpaceCustomerFollowupList">{{ $t("搜索") }} </el-button>
                <el-button type="primary" @click="reset">{{ $t("重置") }} </el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 操作工具栏 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button :disabled="selectCustomerFollowList.length === 0" type="primary" @click="updateStatus = true" v-hasPermi="['ecw:customer:followup:batch-update-status']">{{ $t("修改状态") }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" @click="handleAdd" v-hasPermi="['ecw:customer:follow-create']">{{ $t("新增") }} </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" @click="handleExport" v-hasPermi="['ecw:customer:follow-export']">
            {{ $t("导出") }}
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataSpaceCustomerFollowupList"></right-toolbar>
      </el-row>
      <el-table ref="multipleTable" border :data="customerFollowList" v-loading="loading" @selection-change="handleSelectionChange" style="width: 100%" id="dataTable" :height="autoHeight">
        <el-table-column type="selection" width="55" fixed></el-table-column>
        <el-table-column prop="customerNumber" :label="$t('客户编号')" width="120" fixed>
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="handleCustomerViewLink(scope.row)" class="link-type">{{ scope.row.customerNumber }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="customerName" :label="$t('客户名称')" width="120" fixed/>
        <el-table-column prop="contactName" :label="$t('联系人')" width="120"/>
        <el-table-column prop="contactPhone" :label="$t('联系方式')" width="120"/>
        <el-table-column prop="saleStage" :label="$t('销售阶段')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_SALE_STAGE, cellValue)" width="120"/>
        <el-table-column prop="followType" :label="$t('跟进类型')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_TYPE, cellValue)" width="120"/>
        <el-table-column prop="offerNumber" :label="$t('报价单号')" width="120">
          <template slot-scope="{ row }">
            <el-link type="primary" @click.native="$router.push('/offer/detail?offerId=' + row.offerId)" v-if="row.offerNumber">{{ row.offerNumber }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="followTime" :label="$t('跟进时间')" :formatter="(row, column, cellValue) => parseTime(cellValue)" width="120"></el-table-column>
        <el-table-column prop="purpose" :label="$t('目的')" width="240"/>
        <el-table-column prop="feedback" :label="$t('跟进情况')" width="240"/>
        <el-table-column :label="$t('下次跟进时间')" align="center" width="120">
          <template slot-scope="scope">
            {{ parseTime(scope.row.nextTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="nextPlan" :label="$t('下次计划')" align="center" width="240"/>
        <el-table-column :label="$t('关联跟进记录')" align="center" prop="parentNumber" width="120">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="handleCustomerFollowLink(scope.row.parentVO)" class="link-type">{{ scope.row.parentNumber }}</a>
          </template>
        </el-table-column>
        <el-table-column :label="$t('跟进状态')" align="center">
          <template slot-scope="scope">
            {{ getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_STATUS, scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="number" :label="$t('跟进编号')" align="center" width="120">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="handleCustomerFollowLink(scope.row)" class="link-type">{{ scope.row.number }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="followMethod" :label="$t('跟进方式')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_FOLLOWUP_METHOD, cellValue)" width="120" />

        <el-table-column prop="followUserName" :label="$t('客户经理')" width="120" />
        <el-table-column prop="customerSource" :label="$t('客户来源')" :formatter="(row, column, cellValue) => getDictDataLabel(DICT_TYPE.CUSTOMER_SOURCE, cellValue)" width="120"/>
        <el-table-column :label="$t('客户创建时间')" align="center" width="120">
          <template slot-scope="scope">
            {{ parseTime(scope.row.customerCreateTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" :label="$t('创建人')" align="center" width="120"/>
        <el-table-column :label="$t('创建时间')" align="center" width="120">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="updaterName" :label="$t('最后更新人')" align="center" width="120"/>
        <el-table-column :label="$t('最后更新时间')" align="center" width="120">
          <template slot-scope="scope">
            {{ parseTime(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column width="200" :label="$t('操作')" align="center" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" v-if="!scope.row.status" @click="handleCustomerFollow(scope.row)" v-hasPermi="['ecw:customer:follow-update']">{{ $t("编辑") }} </el-button>
            <el-button size="mini" type="text" icon="el-icon-collection" @click="handleCustomerFollow(scope.row, true)" v-has-permi="['ecw:customer:follow-add-plan']">{{ $t("增加计划") }} </el-button>
            <el-button size="mini" type="text" icon="el-icon-edit"  @click="handleCustomerFollowLink(scope.row)" v-hasPermi="['ecw:customer:follow-update']">{{ $t("查看") }} </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="customerFollowTotal" :page.sync="followForm.pageNo" :limit.sync="followForm.pageSize" @pagination="getDataSpaceCustomerFollowupList" />
    </el-card>
    <customer-follow ref="customerFollow" @close="customerFollowVisible = false" @handleCustomerFollowAdd="handleCustomerFollowAdd" @refresh="handleQuery" v-if="customerFollowVisible" :customer-id="customerId" :customerService="customerService" :customerNumber="customerNumber" />
    <customer-follow-update-status :show.sync="updateStatus" :followup-ids.sync="selectCustomerFollowList" @refresh="handleQuery"></customer-follow-update-status>
  </div>
</template>

<script>
import { getCustomerFollowupList, getDataSpaceCustomerFollowupList, exportDataSpaceCustomerFollowup } from "@/api/ecw/customerFollow"
import { getDictDatas, DICT_TYPE, getDictDatas2 } from "@/utils/dict"
import CustomerFollow from "@/views/ecw/customer/components/customerFollow"
import UserSelector from "@/components/UserSelector"
import customerFollowUpdateStatus from "@/views/ecw/customer/components/customerFollowUpdateStatus.vue"
export default {
  name: "logListCommon",
  components: { customerFollowUpdateStatus, UserSelector, CustomerFollow },
  props: ["customerId", "offerId", "customerService", "customerNumber"],
  data() {
    return {
      // 遮罩层
      loading: true,
      getDictDatas,
      getDictDatas2,
      DICT_TYPE,
      // 显示搜索条件
      showSearch: false,
      updateStatus: false,
      customerFollowVisible: false,
      customerFollowTotal: 0,
      customerFollowList: [],
      selectCustomerFollowList: [],
      followForm: {
        pageNo: 1,
        pageSize: 10
      },
      followFormTmp: {
        createTime: ["", ""],
        followTime: ["", ""],
        nextTime: ["", ""],
        customerCreateTime: ["", ""]
      },
      autoHeight: null
    }
  },
  created() {
    this.handleQuery()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout()
    })
  },
  computed: {
    // selectAuthorityFn() {
    //   return (val) => {
    //     let t = val.split(":")
    //     t[t.length - 1] = this.authorityFn + t[t.length - 1]
    //     console.log(t.join(":"))
    //     return t.join(":")
    //   }
    // },
    isMobile() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      // 匹配常见的移动设备标识
      const mobileIdentifiers = ['Android', 'webOS', 'iPhone', 'iPad', 'iPod', 'BlackBerry', 'Windows Phone'];
      return mobileIdentifiers.some(identifier => userAgent.includes(identifier));
    },
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    },
    customerId_offerId() {
      return `${this.customerId}_${this.offerId}`
    }
  },
  watch: {
    showSearch() {
      this.$nextTick(() => {
        this.getHeight()
      })
    },
    selectCustomerFollowList(val) {
      if (val.length === 0) {
        this.getDataSpaceCustomerFollowupList()
        this.$refs.multipleTable.clearSelection()
      }
    },
    customerId_offerId() {
      this.handleQuery()
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectCustomerFollowList = val.map((i) => i.id)
    },
    handleCustomerFollowAdd(row) {
      this.customerFollowVisible = false
      setTimeout(() => {
        this.customerFollowVisible = true
        this.$nextTick((_) => {
          this.$refs["customerFollow"].handleUpdate(row, true)
        })
      }, 100)
    },
    handleCustomerFollow(row, flag) {
      this.customerFollowVisible = true
      this.$nextTick((_) => {
        this.$refs["customerFollow"].handleUpdate(row, flag)
      })
    },
    handleAdd() {
      this.customerFollowVisible = true
      this.$nextTick(() => {
        this.$refs["customerFollow"].handleAdd()
      })
    },

    handleCustomerFollowLink(row) {
      this.customerFollowVisible = true
      this.$nextTick((_) => {
        this.$refs["customerFollow"].handleView(row)
      })
    },
    handleCustomerViewLink(row) {
      this.$router.push(`/customer/query/${row.customerId}`)
    },
    formatQuery() {
      let obj = {}
      obj.customerId = this.customerId || null
      obj.offerId = this.offerId || null
      obj.beginCreateTime = this.followFormTmp.createTime[0]
      obj.endCreateTime = this.followFormTmp.createTime[1]
      obj.beginFollowTime = this.followFormTmp.followTime[0]
      obj.endFollowTime = this.followFormTmp.followTime[1]
      obj.beginNextTime = this.followFormTmp.nextTime[0]
      obj.endNextTime = this.followFormTmp.nextTime[1]
      obj.beginCustomerCreateTime = this.followFormTmp.customerCreateTime[0]
      obj.endCustomerCreateTime = this.followFormTmp.customerCreateTime[1]
      return obj
    },
    handleQuery() {
      console.log(this.followForm)

      this.followForm.pageNo = 1
      this.customerFollowTotal = 0
      this.customerFollowList = []
      this.getDataSpaceCustomerFollowupList()
    },
    /** 跟进记录导出按钮操作 */
    handleExport() {
      // 执行导出
      this.$modal.confirm(this.$t("是否确认导出客户跟进记录数据项?")).then(() => {
        exportDataSpaceCustomerFollowup({
          ...this.followForm,
          ...this.formatQuery(),
          pageNo: null,
          pageSize: null
        }).then((r) => {
          this.$message.success(this.$t("已加入导出队列，请稍后在下载日志中下载"))
        })
      })
    },
    getDataSpaceCustomerFollowupList() {
      this.loading = true
      getDataSpaceCustomerFollowupList({
        ...this.followForm,
        ...this.formatQuery()
      }).then((r) => {
        this.customerFollowList = r.data.list
        this.customerFollowTotal = r.data.total
        this.loading = false
        this.getHeight()
      })
    },
    reset() {
      this.followFormTmp.createTime = ["", ""]
      this.followFormTmp.followTime = ["", ""]
      this.followFormTmp.nextTime = ["", ""]
      this.followFormTmp.customerCreateTime = ["", ""]
      this.followForm = {
        pageNo: 1,
        pageSize: 10
      }
      this.getDataSpaceCustomerFollowupList()
    },
    //表格高度自适应
    getHeight() {
      if(!this.isMobile) {
        this.$refs.multipleTable.doLayout()
        let getHeightFromBottom = (element, variableHeight) => {
          const elementRect = element.getBoundingClientRect().top;
          const windowHeight = document.documentElement.clientHeight;
          const elementHeightFromBottom = windowHeight - elementRect;
          const result = elementHeightFromBottom - variableHeight;
          return result;
        }
        const element = document.getElementById('dataTable');
        const variableHeight = 70; // 给定的变量高度 一般留于分页器高度
        this.autoHeight =getHeightFromBottom(element, variableHeight);
      }
    },
  }
}
</script>