query.vue

<template>
  <div>
    <el-row type="flex" style="margin-top: 15px;margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
        <div style="display: flex;justify-content: space-between;align-items: flex-end;">
          <h2>查看</h2>
          <div>
            <el-button type="primary" size="small">添加优惠</el-button>
            <el-button type="primary" size="small" @click="$router.push('/customer/edit/' + id)">编辑</el-button>
            <el-button type="primary" size="small">报价</el-button>
            <el-button type="primary" size="small" @click="$refs['customerFollow'].customerFollow.dialogVisible = true">跟进</el-button>
            <el-button type="primary" size="small" @click="$refs['customerComplaint'].handleAdd()">客诉</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </div>
        </div>
        <el-card style="margin-top: 15px;">
          <el-descriptions :column="4" border>
            <el-descriptions-item label="客户编号">{{ customer.number }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ customer.name }}</el-descriptions-item>
            <el-descriptions-item label="结算方式">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_BALANCE, customer.balance) }}</el-descriptions-item>
            <el-descriptions-item label="客户生日">{{ parseTime(customer.birthday, '{y}-{m}-{d}') }}</el-descriptions-item>
            <el-descriptions-item label="客户等级">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_LEVEL, customer.level) }}</el-descriptions-item>
            <el-descriptions-item label="国家">{{ getDictDataLabel(DICT_TYPE.COUNTRY, customer.country) }}</el-descriptions-item>
<!--            <el-descriptions-item label="业务员">{{ customer }}</el-descriptions-item>-->
            <el-descriptions-item label="客户来源">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_SOURCE, customer.source) }}</el-descriptions-item>
            <el-descriptions-item label="客户类别">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_TYPE, customer.type) }}</el-descriptions-item>
<!--            <el-descriptions-item label="联系方式">{{ customer }}</el-descriptions-item>-->
            <el-descriptions-item label="推介人">{{ promoter  }}</el-descriptions-item>
            <el-descriptions-item label="跟进客服">{{ customerService }}</el-descriptions-item>
            <el-descriptions-item label="公司名称">{{ customer.company }}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{ customer.address }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ parseTime(customer.createTime) }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ getDictDataLabel(DICT_TYPE.CUSTOMER_STATUS, customer.status) }}</el-descriptions-item>
            <el-descriptions-item label="主营类别">{{ productType }}</el-descriptions-item>
            <el-descriptions-item label="常提货网点">{{ pickupPoint }}</el-descriptions-item>
            <el-descriptions-item label="图片">
              <el-image v-show="!!customer.picture" :src="customer.picture" style="width: 100px;height: 100px"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{ customer.remarks }}</el-descriptions-item>
<!--            <el-descriptions-item label="信用等级">{{ customer }}</el-descriptions-item>-->
          </el-descriptions>
        </el-card>

        <el-card style="margin-top: 15px">
          <h3>联系人</h3>

          <el-table
            :data="customerContacts"
            style="width: 100%"
            border
          >
            <el-table-column
              prop="department"
              label="部门"
            >
            </el-table-column>
            <el-table-column
              prop="position"
              label="职位"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="联系人"
            >
            </el-table-column>
            <el-table-column
              prop="phoneNew"
              label="联系方式"
            >
              <template v-slot="{row}">
                {{ row.areaCode + row.phoneNew }}
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              label="关联账号"
            >
            </el-table-column>
            <el-table-column
              prop="social"
              label="社交软件"
            >
            </el-table-column>
            <el-table-column
              prop="socialNumber"
              label="社交软件号码"
            >
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
            >
            </el-table-column>
          </el-table>
        </el-card>

        <el-tabs style="margin-top: 15px" type="border-card">
          <el-tab-pane label="订单">
            订单
          </el-tab-pane>
          <el-tab-pane label="报价">
            <el-table
              :data="[]"
              style="width: 100%"
            >
              <el-table-column
                prop=""
                label="序号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="报价单号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="订单号"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="客户名称"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="目的地"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="销售阶段"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="预计结束时间"
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="负责人"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="跟进">
            <customer-follow ref="customerFollow" :id="id" :customer-id="id"></customer-follow>
          </el-tab-pane>
          <el-tab-pane label="客户投诉">
            <customer-complaint ref="customerComplaint" :customer-id="id" hidden-search></customer-complaint>
          </el-tab-pane>
          <el-tab-pane label="账单">

          </el-tab-pane>
          <el-tab-pane label="数据">

          </el-tab-pane>
          <el-tab-pane label="品牌授权">

          </el-tab-pane>
          <el-tab-pane label="信用日志">

          </el-tab-pane>
          <el-tab-pane label="等级日志">

          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getCustomer, getCustomerSelect } from '@/api/ecw/customer'
import { DICT_TYPE, getDictDataLabel } from '@/utils/dict'
import { getProductTypeList } from '@/api/ecw/productType'
import { getNodeList } from '@/api/ecw/node'
import CustomerFollow from "@/components/CustomerFollow"
import { parseTime } from '@/utils/ruoyi'
import CustomerComplaint from '@/views/ecw/customerComplaint'
import { listServiceUser } from '@/api/system/user'
import { getCustomerContactsListByCustomer } from '@/api/ecw/customerContacts'

export default {
  name: 'query',
  props: {
    customerId: String
  },
  components: {
    CustomerFollow,
    CustomerComplaint
  },
  created() {
    getNodeList().then(r => {
      this.nodeList = r.data
    })
    getCustomer(this.id).then(response => {
      this.customer = { ...this.customer, ...response.data }

      getCustomerContactsListByCustomer({customerId: this.id}).then(r => {
        this.customerContacts = r.data
      })
    })
    getProductTypeList().then(r => {
      this.productTypeList = r.data
    })

    getCustomerSelect().then(r => {
      this.customerSelect = r.data
    })
    listServiceUser().then(r => {
      this.serviceUserList = r.data
    })
  },
  data() {
    return {
      DICT_TYPE,
      getDictDataLabel,
      parseTime,
      nodeList: [],
      productTypeList: [],
      customerSelect: [],
      serviceUserList: [],
      customerContacts: [],
      customer: {
        id: undefined,
        number: undefined,
        name: undefined,
        level: undefined,
        country: undefined,
        type: undefined,
        agentId: undefined,
        company: undefined,
        address: undefined,
        productType: undefined,
        productId: undefined,
        pickupPoint: undefined,
        memberId: undefined,
        birthday: undefined,
        balance: undefined,
        source: undefined,
        picture: undefined,
        customerService: undefined,
        customerLines: [],
        promoter: undefined,
        status: undefined,
        founder: undefined,
        department: undefined,
        invoiceTitle: undefined,
        licenseNumber: undefined,
        bank: undefined,
        bankNumber: undefined,
        project: undefined,
        billingAddress: undefined,
        billingTell: undefined,
        taxRate: undefined,
        remarks: undefined,
        arrivalConfirm: undefined,
        weightUnit: undefined,
        createTime: undefined
      },
    }
  },
  computed: {
    productType(){
      const productType = this.productTypeList.find(p => p.id === parseInt(this.customer.productType))
      return productType ? productType.titleZh : ''
    },
    pickupPoint(){
      const pickupPoint = this.nodeList.find(p => p.id === parseInt(this.customer.pickupPoint))
      return pickupPoint ? pickupPoint.titleZh : ''
    },
    promoter() {
      return this.customerSelect.find(e => e.id === this.customer.promoter)?.name || ''
    },
    customerService() {
      return this.serviceUserList.find(e => e.id === this.customer.customerService)?.nickname || ''
    },
    id() {
      return this.customerId ? parseInt(this.customerId) : undefined
    }
  }
}
</script>

<style scoped>

</style>