opms_frontend/src/views/customer/detail.vue

<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2022-12-26 09:30:47
 * @LastEditors: niezch@dashoo.cn
 * @LastEditTime: 2023-04-11 16:44:55
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\customer\detail.vue
-->
<template>
  <div class="detail">
    <div class="side-layout">
      <div class="info">
        <div class="title">
          <p>客户</p>
          <h3>
            {{ detail.custName }}
            <div>
              <span v-show="detail.salesId > 0">
                <el-button v-permissions="['cust:list:shift']" @click="handleShift">转移客户</el-button>
                <el-button v-permissions="['cust:list:open']" @click="handleToOpen">移入公海</el-button>
                <el-button v-permissions="['cust:list:project']" @click="handleBusiness">创建项目</el-button>
              </span>
              <span v-show="detail.salesId == 0">
                <el-button v-permissions="['cust:open:receive']" @click="handleReceive">领取客户</el-button>
                <el-button v-permissions="['cust:open:allocate']" @click="handleAllocate">分配客户</el-button>
              </span>
            </div>
          </h3>
        </div>
        <header>
          <el-descriptions :colon="false" :column="6" direction="vertical">
            <el-descriptions-item content-class-name="my-content" label="客户编码" label-class-name="my-label">
              {{ detail.custCode }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="助记名" label-class-name="my-label">
              {{ detail.abbrName }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="客户级别" label-class-name="my-label">
              {{ selectDictLabel(levelOptions, detail.custLevel) }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="客户类型" label-class-name="my-label">
              {{ selectDictLabel(industryOptions, detail.custIndustry) }}
            </el-descriptions-item>
            <!-- <el-descriptions-item content-class-name="my-content" label="客户状态" label-class-name="my-label">
              {{ detail.custStatus == 10 ? '正常' : '异常' }}
            </el-descriptions-item> -->
            <el-descriptions-item content-class-name="my-content" label="最后跟进时间" label-class-name="my-label">
              {{ parseTime(detail.followUpDate, '{y}-{m}-{d}') }}
            </el-descriptions-item>
          </el-descriptions>
        </header>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="详细信息" name="detail">
            <el-descriptions
              border
              :column="2"
              :content-style="{ width: '25%', 'word-break': 'break-all' }"
              :label-style="{ width: '25%' }"
              size="medium">
              <el-descriptions-item label="客户级别">
                {{ selectDictLabel(levelOptions, detail.custLevel) }}
              </el-descriptions-item>
              <el-descriptions-item label="最后跟进时间">
                {{ detail.followUpDate }}
              </el-descriptions-item>
              <el-descriptions-item label="所在省">
                {{ detail.custProvince }}
              </el-descriptions-item>
              <el-descriptions-item label="所在市">
                {{ detail.custCity }}
              </el-descriptions-item>
              <el-descriptions-item label="所在区">
                {{ detail.custRegion }}
              </el-descriptions-item>
              <el-descriptions-item label="详细地址">
                {{ detail.custAddress }}
              </el-descriptions-item>
              <el-descriptions-item label="创建人">
                {{ detail.createdName }}
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                {{ detail.createdTime }}
              </el-descriptions-item>
              <el-descriptions-item label="跟进次数">
                {{ abstract.followCount }}
              </el-descriptions-item>
              <el-descriptions-item label="未跟进时长">
                {{ abstract.notFollowDay }}
              </el-descriptions-item>
              <el-descriptions-item label="项目数量">
                {{ abstract.business }}
              </el-descriptions-item>
              <el-descriptions-item label="项目总额">
                {{ formatPrice(abstract.businessTotal) }}
              </el-descriptions-item>
              <el-descriptions-item label="成交次数">
                {{ abstract.dealCotal }}
              </el-descriptions-item>
              <el-descriptions-item label="成交总额">
                {{ formatPrice(abstract.dealTotal) }}
              </el-descriptions-item>
              <el-descriptions-item label="回款总额">
                {{ formatPrice(abstract.paymentTotal) }}
              </el-descriptions-item>
              <el-descriptions-item label="未回款总额">
                {{ formatPrice(abstract.notPaymentTotal) }}
              </el-descriptions-item>
              <el-descriptions-item label="开票总额" :span="24">
                {{ formatPrice(abstract.drawTotal) }}
              </el-descriptions-item>
              <el-descriptions-item label="备注" :span="24">
                {{ detail.remark }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="跟进记录" name="follow">
            <ul v-if="followList.length" class="follow">
              <li v-for="(date, index) in followList" :key="index">
                <div class="date">
                  <h2>{{ date.followDay.split('-')[2] }}</h2>
                  <h3>
                    {{ date.followDay.split('-').splice(0, 2).join('.') }}
                  </h3>
                </div>
                <ul class="content">
                  <li v-for="(item, idx) in date.followupList" :key="idx">
                    <!-- <el-avatar class="user-avatar"
              :src="avatar" />-->
                    <div class="text-container">
                      <vab-icon class="user-avatar" icon="account-circle-fill" />
                      <div class="text">
                        <p class="action">
                          <span>{{ item.createdName }} 跟进（{{ formatType(item.followType) }}）</span>
                          <span>
                            <vab-icon icon="time-line" />
                            {{ item.followDate }}
                          </span>
                        </p>
                        <p>{{ item.followContent }}</p>
                        <div class="footer">
                          <p>
                            来自客户：
                            <span>{{ item.custName }}</span>
                          </p>
                          <div>
                            <el-button size="mini" @click="showDetail(item)">
                              <vab-icon icon="arrow-right-circle-fill" />
                              详情
                            </el-button>
                            <el-button size="mini" @click="showComment(item)">评论({{ item.commentNumber }})</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <transition name="height">
                      <ul v-if="item.showComment" class="comments">
                        <li v-for="comment in item.comments" :key="comment.id">
                          <vab-icon class="user-avatar" icon="account-circle-fill" />
                          <div class="text">
                            <p>{{ comment.createdName }}</p>
                            <p>{{ comment.content }}</p>
                            <p>{{ comment.createdTime }}</p>
                          </div>
                        </li>
                      </ul>
                    </transition>
                  </li>
                </ul>
              </li>
            </ul>
            <div v-else class="no-follow">暂无跟进记录</div>
          </el-tab-pane>
          <el-tab-pane label="联系人" name="contact">
            <vab-query-form>
              <vab-query-form-left-panel :span="12">
                <el-input
                  v-model="cuctName"
                  placeholder="请输入单据名称/编号"
                  prefix-icon="el-icon-search"
                  style="width: 50%"
                  @blur="handleClick({ name: 'contact' })"
                  @keyup.enter.native="handleClick({ name: 'contact' })" />
              </vab-query-form-left-panel>
              <vab-query-form-right-panel :span="12">
                <el-button v-permissions="['cust:detail:contact:add']" icon="el-icon-plus" @click="addContact">
                  新建联系人
                </el-button>
              </vab-query-form-right-panel>
            </vab-query-form>
            <el-table border :data="contactList" height="calc(100% - 42px)" @selection-change="setSelectRows">
              <el-table-column align="center" type="selection" />
              <el-table-column align="center" label="姓名" prop="cuctName" />
              <el-table-column align="center" label="岗位" prop="postion" />
              <el-table-column align="center" label="电话" prop="telephone" />
              <el-table-column align="center" label="微信" prop="wechat" />
              <el-table-column align="center" label="邮箱" prop="email" />
              <el-table-column align="center" label="是否决策人">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isDecision" active-value="10" disabled inactive-value="20" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button v-permissions="['cust:deatil:contact:edit']" type="text" @click="contactEdit(scope.row)">
                    编辑
                  </el-button>
                  <el-button v-permissions="['cust:detail:contact:delete']" type="text" @click="contactDel(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="项目记录" name="item">
            <el-table border :data="items" height="calc(100% - 42px)">
              <el-table-column align="center" label="项目编号" prop="nboCode" width="120px" />
              <el-table-column align="center" label="项目名称" prop="nboName" show-overflow-tooltip width="200px" />
              <el-table-column align="center" label="审批状态" prop="approStatus" width="120px">
                <template slot-scope="scope">
                  {{ getStatus(scope.row.approStatus) }}
                </template>
              </el-table-column>
              <!--              <el-table-column align="center" label="项目类别" prop="nboType" width="80px" />-->
              <!--              <el-table-column align="center" label="产品线" prop="productLine" width="120px" />-->
              <el-table-column
                align="center"
                label="经销商/代理商"
                prop="distributorName"
                show-overflow-tooltip
                width="200px" />
              <el-table-column align="center" label="项目预算" prop="nboBudget" width="120px" />
              <el-table-column align="center" label="项目备案时间" prop="filingTime" width="160px" />
              <!--              <el-table-column align="center" label="项目来源" prop="nboSource" width="160px" />-->
              <!--              <el-table-column align="center" label="销售模式" prop="salesModel" width="160px" />-->
              <el-table-column align="center" label="最后跟进时间" prop="finalFollowTime" width="160px" />
              <el-table-column align="center" label="下次跟进时间" prop="nextFollowTime " width="160px" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="合同记录" name="contract">
            <el-table border :data="contracts" height="calc(100% - 42px)">
              <el-table-column align="center" label="合同编号" prop="contractCode" width="140px" />
              <el-table-column
                align="center"
                label="合同名称"
                prop="contractName"
                show-overflow-tooltip
                width="240px" />
              <el-table-column align="center" label="项目名称" prop="nboName" show-overflow-tooltip width="240px" />
              <el-table-column align="center" label="审批状态" prop="approStatus" width="120px">
                <template slot-scope="scope">
                  {{ getStatus(scope.row.approStatus) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="合同类型" prop="contractType" width="120px">
                <template slot-scope="scope">
                  {{ selectDictLabel(contractTypeOptions, scope.row.contractType) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="合同金额" prop="contractAmount" width="120px" />
              <el-table-column align="center" label="负责人" prop="inchargeName" width="120px" />
              <el-table-column align="center" label="公司签约人" prop="signatoryName" width="140px" />
              <el-table-column align="center" label="经销商" prop="distributorName" width="320px" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="工单记录" name="worksheet">工单记录</el-tab-pane>
          <el-tab-pane label="归属记录" name="belong">
            <el-table border :data="belongs" height="calc(100% - 42px)">
              <el-table-column align="center" label="归属销售" prop="saleName" />
              <el-table-column align="center" label="原来归属" prop="origSaleName" />
              <el-table-column align="center" label="操作方式" prop="opnType">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.opnType == 10">分配</el-tag>
                  <el-tag v-else-if="scope.row.opnType == 20">转移</el-tag>
                  <el-tag v-else-if="scope.row.opnType == 30">领取</el-tag>
                  <el-tag v-else-if="scope.row.opnType == 40">合并</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作人" prop="createdName" />
              <el-table-column align="center" label="操作时间" min-width="160px" prop="opnDatetime" />
              <el-table-column align="center" label="开始时间" min-width="160px" prop="startDate" />
              <el-table-column align="center" label="结束时间" min-width="160px" prop="endDate" />
              <el-table-column align="center" label="备注" prop="remark" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="招标记录" name="bid">
            <vab-query-form>
              <vab-query-form-left-panel :span="12">
                <el-input
                  v-model="bidSearchText"
                  placeholder="招标产品名称/招标信息标题/中标单位"
                  prefix-icon="el-icon-search"
                  style="width: 50%"
                  @blur="handleClick({ name: 'bid' })"
                  @keyup.enter.native="handleClick({ name: 'bid' })" />
              </vab-query-form-left-panel>
              <vab-query-form-right-panel :span="12">
                <el-button icon="el-icon-plus" @click="addBid">新建招标记录</el-button>
              </vab-query-form-right-panel>
            </vab-query-form>
            <el-table border :data="bidlist" height="calc(100% - 42px)">
              <el-table-column align="center" label="客户名称" prop="cuctName" width="120px" />
              <el-table-column align="center" label="招标产品名称" prop="productName" width="120px" />
              <el-table-column align="center" label="发布招标日期" prop="publishedTime" width="160px" />
              <el-table-column align="center" label="项目预算" prop="budget" width="120px" />
              <el-table-column align="center" label="招标信息标题" prop="title" width="120px" />
              <el-table-column align="center" label="信息分类" prop="infoType" width="120px">
                <template #default="{ row }">
                  {{ bidInfoTypeOptions[row.infoType] }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="中标单位" prop="bidder" width="120px" />
              <el-table-column align="center" label="创建招标日期" prop="createdOn" width="160px" />
              <el-table-column align="center" label="备注" prop="remark" width="120px" />
              <el-table-column align="center" fixed="right" label="操作" width="90px">
                <template slot-scope="scope">
                  <el-button type="text" @click="bidEdit(scope.row)">编辑</el-button>
                  <el-button type="text" @click="bidDel(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="开票抬头" name="invoiceHeader">
            <vab-query-form>
              <vab-query-form-left-panel :span="12">
                <el-input
                  v-model="invoiceHeaderSearchText"
                  placeholder="客户名称/公司名称/纳税人识别号"
                  prefix-icon="el-icon-search"
                  style="width: 50%"
                  @blur="handleClick({ name: 'invoiceHeader' })"
                  @keyup.enter.native="handleClick({ name: 'invoiceHeader' })" />
              </vab-query-form-left-panel>
              <vab-query-form-right-panel :span="12">
                <el-button icon="el-icon-plus" @click="addInvoiceHeader">新建开票抬头</el-button>
              </vab-query-form-right-panel>
            </vab-query-form>
            <el-table border :data="invoiceHeaderList" height="calc(100% - 42px)">
              <el-table-column align="center" label="客户名称" prop="cuctName" width="220px" />
              <el-table-column align="center" label="公司名称" prop="companyName" width="220px" />
              <el-table-column align="center" label="纳税人识别号" prop="taxNo" width="120px" />
              <el-table-column align="center" label="地址" prop="address" width="160px" />
              <el-table-column align="center" label="开户行及账号" prop="bankNo" width="120px" />
              <el-table-column align="center" label="备注" prop="remark" width="120px" />
              <el-table-column align="center" fixed="right" label="操作" width="90px">
                <template slot-scope="scope">
                  <el-button type="text" @click="invoiceHeaderEdit(scope.row)">编辑</el-button>
                  <el-button type="text" @click="invoiceHeaderDel(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="info-side">
        <div class="buttons">
          <el-button v-if="checkPermi('edit')" type="primary" @click="handleEdit">编辑</el-button>
          <el-button v-if="checkPermi('delete')" @click="handleDelete">删除</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </div>
        <ul class="records">
          <li v-for="(value, key) in records" :key="key">
            <div class="date">
              <h2>{{ key.split('-')[2] }}</h2>
              <h3>{{ key.split('-').splice(0, 2).join('.') }}</h3>
            </div>
            <ul class="content">
              <li v-for="(item, index) in records[key]" :key="index">
                <!-- <el-avatar class="user-avatar"
                           :src="avatar" /> -->
                <vab-icon class="user-avatar" icon="account-circle-fill" />
                <div class="text">
                  <p class="action">{{ item.opnPeople }} {{ item.opnType }}</p>
                  <p>{{ item.opnDate }}</p>
                  <p v-if="item.opnContent.custName">
                    客户名称：
                    <span>{{ item.opnContent.custName }}</span>
                  </p>
                  <template v-else-if="item.opnContent.cuctName">
                    <p>
                      联系人名称：
                      <span>{{ item.opnContent.cuctName }}</span>
                    </p>
                    <p>职务：{{ item.opnContent.postion }}</p>
                    <p>手机：{{ item.opnContent.telephone }}</p>
                  </template>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <Contact ref="contact" @contactSave="contactSave" />
    <Edit ref="edit" @customerSave="customerSave" />
    <!-- 分配客户 -->
    <Allocate ref="allocate" @refresh="back" />
    <!-- 转移客户 -->
    <Shift ref="shift" @refresh="back" />
    <!-- 移入公海 -->
    <ToOpen ref="toOpen" @refresh="backToOpen" />
    <!-- 跟进详情 -->
    <FollowDetail ref="followDetail" />
    <!-- 添加项目 -->
    <Businessedit ref="businessedit" :cust-info="custInfo" @fetch-data="getBusiness" />
    <!-- 领取客户 -->
    <Pick ref="pick" />
    <Bid ref="bid" @bidSave="bidSave" />
    <InvoiceHeader ref="invoiceHeader" @save="invoiceHeaderSave" />
  </div>
</template>

<script>
  import { hasPermission } from '@/utils/permission'
  import { mapGetters } from 'vuex'
  import api from '@/api/customer'
  import follow from '@/api/customer/follow'
  import to from 'await-to-js'
  import businessApi from '@/api/proj/business'
  import contractApi from '@/api/contract'
  import bidApi from '@/api/customer/bid'
  import invoiceHeaderApi from '@/api/customer/invoiceHeader'
  import Contact from './components/Contact'
  import Edit from './components/Edit'
  import Allocate from './components/Allocate'
  import Shift from './components/Shift'
  import ToOpen from './components/ToOpen'
  import FollowDetail from './components/FollowDetail'
  import Businessedit from '../proj/business/components/BusinessEdit'
  import Pick from './components/Pick'
  import Bid from './components/Bid'
  import InvoiceHeader from './components/InvoiceHeader'

  export default {
    name: 'CustomerDetail',
    components: {
      Edit,
      Contact,
      Allocate,
      Shift,
      Pick,
      Bid,
      InvoiceHeader,
      ToOpen,
      FollowDetail,
      Businessedit,
    },
    data() {
      return {
        id: '',
        detail: {
          custCode: '', //客户编码
          abbrName: '', //助记名
          level: '', //客户级别
          indusTry: '', //客户类型
          custStatus: '', //客户状态
          followUpDate: '', //最后跟进时间
        },
        abstract: {
          followContent: '', //跟进次数
          notFollowDay: '', //未跟进天数
          business: '', //项目数量
          businessTotal: '', //项目总额
          dealCotal: '', //成交次数
          dealTotal: '', //成交总额
          paymentTotal: '', //回款总额
          notPaymentTotal: '', //未回款总额
          drawTotal: '', //开票总额
        },
        activeName: 'detail',
        cuctName: '',
        bidSearchText: '',
        invoiceHeaderSearchText: '',
        contactList: [],
        selectRows: [],
        records: [], //操作记录
        followList: [], //跟进记录
        belongs: [],
        bidlist: [],
        invoiceHeaderList: [],
        items: [], //项目
        contracts: [], //合同
        appro: [],
        bidInfoTypeOptions: {},
        custInfo: {},
        levelOptions: [],
        industryOptions: [],
        contractTypeOptions: [],
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    mounted() {
      this.id = this.$route.query.id
      this.init()
      this.getOptions()
      this.getDynamics()
      this.handleClick({ name: 'follow' })
    },
    methods: {
      getOptions() {
        Promise.all([this.getDicts('cust_level'), this.getDicts('cust_idy'), this.getDicts('contract_type')])
          .then(([level, industry, contractType]) => {
            this.levelOptions = level.data.values || []
            this.industryOptions = industry.data.values || []
            this.contractTypeOptions = contractType.data.values || []
          })
          .catch((err) => console.log(err))
      },
      checkPermi(val) {
        let str = 'cust:'
        if (this.detail.salesId) str += 'list:'
        else str += 'open:'
        str += val
        return hasPermission([str])
      },
      async init() {
        Promise.all([
          api.getDetail({ ids: [parseInt(this.id)] }),
          api.getAbstract({ id: parseInt(this.id) }),
          this.getDicts('proj_appro_status'),
        ]).then(([detail, abstract, appro]) => {
          if (detail.data.list[0]) this.detail = detail.data.list[0]
          if (abstract.data.list) this.abstract = abstract.data.list
          this.appro = appro.data.values || []
        })
        this.getDicts('bid_info_type').then((response) => {
          this.bidInfoTypeOptions = {}
          response.data.values.filter((i) => {
            this.bidInfoTypeOptions[i.key] = i.value
          })
        })
      },
      getStatus(val) {
        const obj = this.appro.find((item) => item.key == val)
        if (obj) return obj.value
      },
      async getDynamics() {
        const [err, res] = await to(api.dynamicsList({ custId: parseInt(this.id) }))
        if (err) return
        if (res.data.list && res.data.list[0]) {
          let obj = res.data.list[0]
          const keys = Object.keys(obj).reverse()
          let records = {}
          for (const item of keys) {
            records[item] = obj[item]
          }
          this.records = records
        }
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      async handleClick(tab) {
        let err, res
        if (tab.name == 'contact') {
          ;[err, res] = await to(api.getContact({ custId: parseInt(this.id), cuctName: this.cuctName }))
          if (err) return
          this.contactList = res.data.list || []
        } else if (tab.name == 'follow') {
          let params = {
            custId: String(this.id),
            DaysBeforeToday: 99999,
          }
          ;[err, res] = await to(follow.getListByDay(params))
          if (err) return
          this.followList = res.data.list || []
        } else if (tab.name == 'belong') {
          ;[err, res] = await to(api.getBelongs({ custId: parseInt(this.id) }))
          if (err) return
          this.belongs = res.data.list || []
        } else if (tab.name == 'item') {
          ;[err, res] = await to(businessApi.getList({ custName: this.detail.custName }))
          if (err) return
          this.items = res.data.list || []
        } else if (tab.name == 'contract') {
          ;[err, res] = await to(contractApi.getList({ custId: parseInt(this.id) }))
          this.contracts = res.data.list || []
        } else if (tab.name == 'bid') {
          ;[err, res] = await to(api.bidList({ custId: parseInt(this.id), searchText: this.bidSearchText }))
          this.bidlist = res.data.list || []
        } else if (tab.name == 'invoiceHeader') {
          ;[err, res] = await to(
            invoiceHeaderApi.list({ custId: parseInt(this.id), searchText: this.invoiceHeaderSearchText })
          )
          this.invoiceHeaderList = res.data.list || []
        }
      },
      // 添加联系人
      addContact() {
        this.$refs.contact.contactForm.custId = this.detail.id
        this.$refs.contact.contactForm.custName = this.detail.custName
        this.$refs.contact.contactVisible = true
      },
      addBid() {
        this.$refs.bid.form.custId = this.detail.id
        this.$refs.bid.init()
      },
      addInvoiceHeader() {
        this.$refs.invoiceHeader.form.custId = this.detail.id
        this.$refs.invoiceHeader.init()
      },
      bidEdit(row) {
        this.$refs.bid.init(row.id)
      },
      invoiceHeaderEdit(row) {
        this.$refs.invoiceHeader.init(row.id)
      },
      invoiceHeaderDel(row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const [err, res] = await to(invoiceHeaderApi.delete({ id: [row.id] }))
            if (err) return
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.handleClick({ name: 'invoiceHeader' })
            }
          })
          .catch((err) => console.log(err))
      },
      // 删除联系人
      bidDel(row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const [err, res] = await to(bidApi.delete({ id: [row.id] }))
            if (err) return
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.handleClick({ name: 'bid' })
            }
          })
          .catch(() => {})
      },
      // 保存联系人
      contactSave() {
        this.handleClick({ name: 'contact' })
        this.getDynamics()
      },
      bidSave() {
        this.handleClick({ name: 'bid' })
      },
      invoiceHeaderSave() {
        this.handleClick({ name: 'invoiceHeader' })
      },
      // 编辑客户
      handleEdit() {
        this.$refs.edit.title = '编辑客户'
        this.$refs.edit.editForm = { ...this.detail }
        this.$refs.edit.editVisible = true
        this.$refs.edit.areaEditDisable = true
        this.$refs.edit.showLocation()
      },
      // 编辑联系人
      contactEdit(row) {
        this.$refs.contact.contactForm = { ...row }
        this.$refs.contact.contactForm.custName = this.detail.custName
        this.$refs.contact.contactVisible = true
      },
      // 删除联系人
      contactDel(row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const [err, res] = await to(api.deleteContact({ Ids: [row.id], custId: parseInt(this.id) }))
            if (err) return
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.contactSave()
            }
          })
          .catch(() => {})
      },
      // 转移客户
      handleShift() {
        this.$refs.shift.form.Ids = [parseInt(this.id)]
        this.$refs.shift.visible = true
      },
      // 移入公海
      handleToOpen() {
        this.$refs.toOpen.form.ids = [parseInt(this.id)]
        this.$refs.toOpen.visible = true
      },
      // 客户删除
      handleDelete() {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const [err, res] = await to(api.deleteCustomer({ Id: parseInt(this.id) }))
            if (err) return
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.$router.go(-1)
            }
          })
          .catch(() => {})
      },
      backToOpen() {
        this.$router.push('/customer/openSea')
      },
      back() {
        this.$router.go(-1)
      },
      // 领取
      handleReceive() {
        this.$refs.pick.ids = [parseInt(this.id)]
        this.$refs.pick.visible = true
        // this.$confirm('确认领取客户?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning',
        // })
        //   .then(async () => {
        //     const [err, res] = await to(
        //       api.receiveCustomer({
        //         ids: [parseInt(this.id)],
        //         salesId: this.$store.state.user.id,
        //         salesName: this.$store.state.user.nickName,
        //         receive: '1',
        //       })
        //     )
        //     if (err) return
        //     if (res.code == 200) {
        //       this.$message({
        //         type: 'success',
        //         message: '领取成功!',
        //       })
        //       this.$router.push('/customer/list')
        //     }
        //   })
        //   .catch(() => {})
      },
      handleAllocate() {
        this.$refs.allocate.ids = [parseInt(this.id)]
        this.$refs.allocate.visible = true
      },
      customerSave() {
        this.init()
        this.getDynamics()
      },
      formatType(val) {
        let str = ''
        if (val == 10) str = '电话'
        else if (val == 20) str = '邮件'
        else if (val == 30) str = '拜访'
        return str
      },
      // 跟进记录详情
      showDetail(row) {
        this.$refs.followDetail.init({ ...row })
      },
      // 展开评论
      showComment(row) {
        if (!row.comments.length) return this.$message.warning('暂无评论')
        row.showComment = !row.showComment
        this.$forceUpdate()
      },
      // 创建项目
      handleBusiness() {
        this.custInfo = {
          custId: parseInt(this.id),
          custName: this.detail.custName,
        }
        this.$refs.businessedit.dialogFormVisible = true
      },
      getBusiness() {
        if (this.activeName == 'item') {
          this.handleClick({ name: 'item' })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.detail';
  #{$base} {
    height: calc(100vh - 60px - 12px * 2 - 40px);
    display: flex;
    padding: 20px 40px;

    > .el-row {
      flex: 1;
      width: 100%;

      > .el-col {
        height: 100%;
      }
    }

    .title {
      p,
      h3 {
        margin: 0;
      }

      p {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }

      h3 {
        font-size: 24px;
        font-weight: 500;
        line-height: 36px;
        color: #333;
        display: flex;
        justify-content: space-between;
      }
    }

    header {
      height: 74px;
      background: rgba(196, 196, 196, 0.5);
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      margin-top: 16px;

      ::v-deep .el-descriptions__body {
        background: transparent;
      }

      ::v-deep .my-label {
        font-size: 14px;
        font-weight: 600;
        color: #1d66dc;
      }

      ::v-deep .my-content {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .el-tabs {
      height: calc(100% - 148px);
      display: flex;
      flex-direction: column;

      ::v-deep .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          height: 100%;

          .el-descriptions {
            table-layout: fixed;

            .is-bordered {
              table-layout: fixed;
            }
          }
        }
      }
    }

    .buttons {
      padding-top: 28px;
      text-align: right;
    }

    .records {
      margin: 0;
      padding: 10px 20px;
      list-style: none;
      height: calc(100% - 60px);
      overflow-y: auto;

      > li {
        display: flex;

        & + li {
          margin-top: 10px;
        }
      }

      .date {
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;

        h2,
        h3 {
          margin: 0;
        }

        h2 {
          font-size: 26px;
          line-height: 32px;
        }
      }

      .content {
        flex: 1;
        list-style: none;

        li {
          display: flex;

          & + li {
            margin-top: 10px;
          }
        }

        .user-avatar {
          font-size: 40px;
        }

        .text {
          flex: 1;
          padding-left: 20px;

          p {
            font-weight: 500;
            margin: 0;
            line-height: 20px;

            span {
              color: #1d66dc;
            }
          }

          p:nth-child(2) {
            margin-bottom: 10px;
          }

          .action {
            font-weight: bold;
            color: #333;
          }
        }
      }
    }

    .follow {
      height: 100%;
      padding: 10px 20px;
      overflow: auto;

      > li {
        display: flex;

        + li {
          margin-top: 10px;
        }
      }

      .date {
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;

        h2,
        h3 {
          margin: 0;
        }

        h2 {
          font-size: 26px;
          line-height: 32px;
        }
      }

      .content {
        flex: 1;
        list-style: none;

        > li {
          border: 1px solid rgb(215, 232, 244);
          background: rgb(247, 251, 254);
          border-radius: 4px;
          padding: 8px;
          overflow: hidden;

          .text-container {
            display: flex;
          }

          .comments {
            padding-left: 60px;
            margin-top: 10px;
            max-height: 190px;
            overflow: auto;

            li {
              display: flex;
              border-top: 1px solid #e3e5e7;

              .text {
                flex: 1;
                padding: 0 10px;

                p {
                  font-weight: 500;
                  margin: 0;
                  line-height: 32px;
                }

                p:first-child {
                  line-height: 30px;
                  font-weight: bold;
                }

                p:last-child {
                  font-size: 12px;
                  color: #9499a0;
                  text-align: right;
                }
              }
            }
          }

          + li {
            margin-top: 10px;
          }
        }

        .user-avatar {
          font-size: 40px;
        }

        .text {
          flex: 1;
          padding-left: 20px;
          padding-right: 10px;

          p {
            font-weight: 500;
            margin: 0;
            line-height: 32px;

            span {
              color: #1d66dc;
            }
          }

          .action {
            display: flex;
            justify-content: space-between;

            span:first-child {
              font-weight: bold;
              color: #333;
            }
          }

          .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }

    .no-follow {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
    }
  }

  .height-enter-active,
  .height-leave-active {
    transition: all 0.5s;
  }

  .height-enter-to,
  .height-leave {
    height: 190px;
  }

  .height-enter, .height-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
  }
</style>