yos_web/src/HDrpManagement/contactProfile/modules/detail.vue

<template>
  <el-drawer :visible.sync="dialogFormVisible" append-to-body size="97%">
    <div class="Mcontainer">
      <div v-if="Object.keys(detailInfo).length" style="background:#ffffff;padding:10px">
        <div class="Mcontainer-header">
          <div class="Mcontainer-header__left">
            <div style="width:60px;height: 60px;background:#F3F9FC;border-radius:10px;padding:10px">
              <img alt="" src="@/assets/saler.svg" style="width:100%;height:100%">
            </div>
            <div class="account">
              <p class="normal-title" style="font-size:18px">
                <el-tooltip :content="detailInfo.projectname" class="item" effect="dark" placement="top">
                  <span>{{ detailInfo.name }}</span>
                </el-tooltip>
              </p>
              <div class="Mtag">
                <el-tag v-for="(item,index) in detailInfo.tag" :key="index" size="small" style="margin-right:10px">
                  {{ item }}
                </el-tag>
              </div>
            </div>
          </div>
          <div class="Mcontainer-header__right">
            <el-descriptions class="margin-top">
              <el-descriptions-item label="联系方式"><span
                  style="color:#E85B5B;font-size:16px;font-weight:bold">{{ detailInfo.phonenumber }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="微信">{{ detailInfo.wechatnum }}</el-descriptions-item>
              <el-descriptions-item label="偏好">{{ detailInfo.preference }}</el-descriptions-item>
              <el-descriptions-item label="分级"><span
                  style="color:#E85B5B;font-size:16px;font-weight:bold"> {{ detailInfo.grade }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ detailInfo.email }}</el-descriptions-item>
              <el-descriptions-item label="爱好">{{ detailInfo.hobby }}</el-descriptions-item>
              <el-descriptions-item label="性别"> {{ detailInfo.sex }}</el-descriptions-item>
              <el-descriptions-item label="传真">{{ detailInfo.fax }}</el-descriptions-item>
              <el-descriptions-item label="备注"> {{ detailInfo.remarks }}</el-descriptions-item>
              <el-descriptions-item label="生日"> {{ detailInfo.birthday }}</el-descriptions-item>
              <el-descriptions-item label="单位">{{ detailInfo.company }}</el-descriptions-item>
              <el-descriptions-item label="负责人"><span
                  style="color:#E85B5B;font-size:16px;font-weight:bold">{{ detailInfo.leadername }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="家庭住址"> {{ detailInfo.homeaddress }}</el-descriptions-item>
              <el-descriptions-item label="部门"> {{ detailInfo.depname }}</el-descriptions-item>
              <el-descriptions-item label="未跟进天数"><span
                  style="color:#E85B5B;font-size:16px;font-weight:bold;margin-right: 10px">{{ detailInfo.subdate ? detailInfo.subdate + '天' : detailInfo.subdate }}</span>
                <el-tooltip class="item" content="未跟进天数=当前查询时间-最近跟进时间-节假日" effect="dark" placement="top">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </el-descriptions-item>
              <el-descriptions-item label="群组">{{ detailInfo.groupname }}</el-descriptions-item>
              <el-descriptions-item label="职位"> {{ detailInfo.position }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
      <div style="padding: 0 10px;">
        <!--   跟进记录     -->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">跟进记录</span>
              <myRadio :btnOptions="[{label:'全部',value:'全部'},{label:'本年',value:'本年'},{label:'本季',value:'本季'},{label:'本月',value:'本月'}]" :value1="followParam.content" :value2="followParam.content.where"
                       key1="dateType"
                       @clickBtn="refreshTable('followParam','followRef')">
              </myRadio>
            </div>
            <myCard
                :list="
              [
                {title:'跟进次数',value:$refs.followRef && $refs.followRef.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'最近跟进人',value:$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].createby || '--',bg:'#E8F7EC',color:'#78B32B'},
                {title:'最近跟进时间',value:$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].createdate || '--',bg:'#F9F2E5',color:'#FF7603'},
                {title:'跟进频率',value:$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].followfrequency,descript:'定义：每次平均跟进天数；若没有跟进次数，则跟进频率=0天/次；若有跟进次数，则按跟进频率=（首次跟进时间到当前时间的天数-节假日天数）÷跟进次数',bg:'#FDF3F3',color:'#E85B5B'},
              ]"
            >
            </myCard>
            <p v-if="$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].followDetail.length"
               style="font-size:14px;font-weight:bold;margin-bottom:10px">
              跟进人及次数</p>
            <div style="display:flex">
              <myTag
                  v-for="(item,index) in $refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].followDetail"
                  :key="index + 'b'"
                  :data="{title:item.name,descript:'跟进次数',value:item.qty}"
                  style="margin-right:10px"
              >
              </myTag>
            </div>
            <showIsNone title="跟进记录明细">
              <pageTable
                  ref="followRef"
                  :custom="true"
                  :param="followParam"
                  :tablecols="tool.tabelCol($route.name).followTable.tablecols"
              >
                <template v-slot:custom="scope">
                  <div v-if="scope.data.columnname === 'followname'">
                  </div>
                  <div v-else style="text-wrap:wrap;word-wrap: break-word;white-space: normal;">
                    {{ scope.data.data[scope.data.columnname] || '--' }}
                  </div>
                </template>
              </pageTable>
            </showIsNone>
          </el-card>
        </div>
        <!--   关联客户     -->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">关联客户</span>
              <myRadio :btnOptions="[{label:'全部',value:'全部'},{label:'本年',value:'本年'},{label:'本季',value:'本季'},{label:'本月',value:'本月'}]" :value1="customerParam.content" :value2="customerParam.content.where"
                       key1="dateType"
                       @clickBtn="refreshTable('customerParam','customerRef')">
              </myRadio>
            </div>
            <myNewCard
                :list="
              [
                {title:'客户数',value:$refs.customerRef && $refs.customerRef.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'客户成交数量/金额',
                value:$refs.customerRef && $refs.customerRef.list[0] && $refs.customerRef.list[0].tradingqty,
                value3: $refs.customerRef && $refs.customerRef.list[0] && $refs.customerRef.list[0].tradingamount,
                value4:$refs.customerRef && $refs.customerRef.list[0] && $refs.customerRef.list[0].tradingcjl,
                value2descript:'成交率',descript:'关联客户的成交率=有成交的关联客户数÷关联的客户总数x100%',
                bg:'#E8F7EC',color:'#78B32B'},
              ]"
            >
            </myNewCard>
            <showIsNone title="客户明细">
              <pageTable
                  ref="customerRef"
                  :custom="true"
                  :param="customerParam"
                  :tablecols="tool.tabelCol($route.name).customerTable.tablecols"
              >
                <template v-slot:custom="scope">
                  <div v-if="scope.data.columnname === 'tag'">
                    <div v-if="scope.data.data[scope.data.columnname].length > 0">
                      <el-tag v-for="item in scope.data.data[scope.data.columnname]" :key="item.index"
                              style="margin-right: 5px">{{ item }}
                      </el-tag>
                    </div>
                    <div v-else>--</div>
                  </div>
                  <div v-else-if="scope.data.columnname === 'industry'">
                    <div v-if="scope.data.data[scope.data.columnname]">
                      <el-tag v-for="item in scope.data.data[scope.data.columnname]" :key="item.index"
                              style="margin-right: 5px">{{ item }}
                      </el-tag>
                    </div>
                    <div v-else>--</div>
                  </div>
                  <div v-else-if="scope.data.columnname === 'tradingstatus'">
                    <span v-if="scope.data.data[[scope.data.columnname]] == '未成交'"
                          style="color:#3874f6">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'"
                          style="color:#fa8c16">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '多次成交'"
                          style="color:#333333">{{ scope.data.data[[scope.data.columnname]] }}</span>
                  </div>
                  <div v-else-if="scope.data.columnname === 'status'">
                    <span v-if="scope.data.data[[scope.data.columnname]] == '潜在'"
                          style="color:#3874f6">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '合作中'"
                          style="color:#52c41a">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '已终止'"
                          style="color:#999999">{{ scope.data.data[[scope.data.columnname]] }}</span>
                  </div>
                  <div v-else>
                    {{ scope.data.data[scope.data.columnname] || '--' }}
                  </div>
                </template>
              </pageTable>
            </showIsNone>
          </el-card>
        </div>
        <!--   关联项目     -->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">关联项目</span>
              <myRadio :btnOptions="[{label:'全部',value:'全部'},{label:'本年',value:'本年'},{label:'本季',value:'本季'},{label:'本月',value:'本月'}]" :value1="projectParam.content" :value2="projectParam.content.where"
                       key1="dateType"
                       @clickBtn="refreshTable('projectParam','projectRef')">
              </myRadio>
            </div>
            <myNewCard
                :list="
              [
                {title:'项目数',value:$refs.projectRef && $refs.projectRef.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'成交项目数量/金额',
                value:$refs.projectRef && $refs.projectRef.list[0] && $refs.projectRef.list[0].tradingqty,
                value3: $refs.projectRef && $refs.projectRef.list[0] && $refs.projectRef.list[0].tradingamount,
                value4:$refs.projectRef && $refs.projectRef.list[0] && $refs.projectRef.list[0].tradingcjl,
                value2descript:'成交率',descript:'关联项目的成交率=有成交的关联项目数÷关联的项目总数x100%',
                bg:'#E8F7EC',color:'#78B32B'},
              ]"
            >
            </myNewCard>
            <showIsNone title="项目明细">
              <pageTable
                  ref="projectRef"
                  :custom="true"
                  :param="projectParam"
                  :tablecols="tool.tabelCol($route.name).projectTable.tablecols"
              >
                <template v-slot:custom="scope">
                  <div v-if="scope.data.columnname === 'tradingamount'">
                    {{ scope.data.data[scope.data.columnname] ? '¥' + tool.formatAmount(scope.data.data[scope.data.columnname], 2) : '¥0.00' }}
                  </div>
                  <div v-else-if="scope.data.columnname === 'signamount_due'">
                    {{ scope.data.data[scope.data.columnname] ? '¥' + tool.formatAmount(scope.data.data[scope.data.columnname], 2) : '¥0.00' }}
                  </div>
                  <div v-else-if="scope.data.columnname === 'status'">
                    <span v-if="scope.data.data[[scope.data.columnname]] == '跟进中'"
                          style="color:#52c41a">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '已成交'"
                          style="color:#fa8c16">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '已失败'"
                          style="color:#999999">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '已结案'"
                          style="color:#999999">{{ scope.data.data[[scope.data.columnname]] }}</span>
                  </div>
                  <div v-else-if="scope.data.columnname === 'projecttype'">
                    {{ scope.data.data.projecttype + '-' + scope.data.data.projecttype_remarks }}
                  </div>
                  <div v-else>
                    {{ scope.data.data[scope.data.columnname] || '--' }}
                  </div>
                </template>
              </pageTable>
            </showIsNone>
          </el-card>
        </div>
        <!--   报价单     -->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">报价单</span>
              <myRadio :btnOptions="[{label:'全部',value:'全部'},{label:'本年',value:'本年'},{label:'本季',value:'本季'},{label:'本月',value:'本月'}]" :value1="quotationParam.content" :value2="quotationParam.content.where"
                       class="inline-16" key1="dateType"
                       @clickBtn="refreshTable('quotationParam','quotationRef')">
              </myRadio>
              <el-select v-model="quotationParam.content.where.isproject" clearable
                         placeholder="请选择" size="small" @change="refreshTable('quotationParam','quotationRef')">
                <el-option label="全部" value=""></el-option>
                <el-option label="项目报价单" value="1"></el-option>
                <el-option label="客户报价单" value="0"></el-option>
              </el-select>
            </div>
            <myCard
                :list="
              [
                {title:'报价次数',value:$refs.quotationRef && $refs.quotationRef.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'最近报价金额',value:unitCompile($refs.quotationRef && $refs.quotationRef.list[0] && $refs.quotationRef.list[0].quotedpriceamount || '0'),bg:'#E8F7EC',color:'#78B32B'},
                {title:'最近报价时间',value:$refs.quotationRef && $refs.quotationRef.list[0] && $refs.quotationRef.list[0].submitdate || '--',bg:'#F9F2E5',color:'#FF7603'},
              ]"
            >
            </myCard>
            <showIsNone title="报价单明细">
              <pageTable
                  ref="quotationRef"
                  :custom="true"
                  :param="quotationParam"
                  :tablecols="tool.tabelCol($route.name).quotedPriceTable.tablecols"
              >
                <template v-slot:custom="scope">
                  <div v-if="scope.data.columnname === 'sumamount'">
                    {{ scope.data.data[scope.data.columnname] ? '¥' + tool.formatAmount(scope.data.data[scope.data.columnname], 2) : '¥0.00' }}
                  </div>
                  <div v-else-if="scope.data.columnname === 'discountrate'">
                    {{ scope.data.data[scope.data.columnname] ? Math.round((scope.data.data[scope.data.columnname] * 100) * 100) / 100 + '%' : '--' }}
                  </div>
                  <div v-else-if="scope.data.columnname === 'specialoffer'">
                    {{ scope.data.data[scope.data.columnname] == '1' ? '是' : '否' }}
                  </div>
                  <div v-else-if="scope.data.columnname === 'begdate'">
                    {{ scope.data.data.begdate ? scope.data.data.begdate + '至' + scope.data.data.enddate : '--' }}
                  </div>
                  <div v-else-if="scope.data.columnname === 'status'">
                    <span v-if="scope.data.data[[scope.data.columnname]] == '新建'"
                          style="color:#3874f6">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '提交'"
                          style="color:#52c41a">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '审核'"
                          style="color:#333333">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '复核'"
                          style="color:#fa8c16">{{ scope.data.data[[scope.data.columnname]] }}</span>
                  </div>
                  <div v-else style="text-wrap:wrap;word-wrap: break-word;white-space: normal;">
                    {{ scope.data.data[scope.data.columnname] || '--' }}
                  </div>
                </template>
              </pageTable>
            </showIsNone>
          </el-card>
        </div>
        <!--   订单     -->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">订单</span>
              <myRadio :btnOptions="[{label:'全部',value:'全部'},{label:'本年',value:'本年'},{label:'本季',value:'本季'},{label:'本月',value:'本月'}]" :value1="orderParam.content" :value2="orderParam.content.where"
                       key1="dateType"
                       @clickBtn="refreshTable('orderParam','orderRef')">
              </myRadio>
              <el-select v-model="orderParam.content.where.type" clearable placeholder="请选择订单类型" size="mini"
                         style="margin-left:24px" @change="refreshTable('orderParam','orderRef')">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="(item,index) in orderTypeList" :key="index" :label="item.value"
                           :value="item.value"></el-option>
              </el-select>
            </div>
            <myCard
                :list="
              [
                {title:'订单数量',value:$refs.orderRef && $refs.orderRef.list && $refs.orderRef.list[0] && $refs.orderRef.list[0].allOrderQty,bg:'#F3F9FC',color:'#3874F6'},
                {title:'订单总金额',value:unitCompile($refs.orderRef && $refs.orderRef.list && $refs.orderRef.list[0] && $refs.orderRef.list[0].allAmount || '0'),bg:'#E8F7EC',color:'#78B32B'},
                {title:'订单回款金额',value:unitCompile($refs.orderRef && $refs.orderRef.list && $refs.orderRef.list[0] && $refs.orderRef.list[0].cashbillAmount || '0'),bg:'#F9F2E5',color:'#FF7603'},
                {title:'订单未出货金额',value:unitCompile($refs.orderRef && $refs.orderRef.list && $refs.orderRef.list[0] && $refs.orderRef.list[0].allunAmount || '0'),bg:'#FDF3F3',color:'#E85B5B'},
                {title:'已出货未开票金额',value:unitCompile($refs.orderRef && $refs.orderRef.list && $refs.orderRef.list[0] && $refs.orderRef.list[0].alluninvoicamount || '0'),bg:'#F9F2E5',color:'#FF7603'},
                {title:'已开票未回款金额',value:unitCompile($refs.orderRef && $refs.orderRef.list && $refs.orderRef.list[0] && $refs.orderRef.list[0].allunwriteoffamount || '0'),bg:'#FDF3F3',color:'#E85B5B'},
              ]"
            >
            </myCard>
            <showIsNone title="订单明细">
              <pageTable
                  ref="orderRef"
                  :custom="true"
                  :param="orderParam"
                  :tablecols="tool.tabelCol($route.name).orderTable.tablecols"
              >
                <template v-slot:custom="scope">
                  <div v-if="scope.data.columnname == 'amount'">
                    {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥ 0.00':'--'}}
                  </div>
                  <div v-else-if="scope.data.columnname == 'writeoffamount'">
                    {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥ 0.00':'--'}}
                  </div>
                  <div v-else-if="scope.data.columnname == 'unoutOrderamount'">
                    {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥ 0.00':'--'}}
                  </div>
                  <div v-else-if="scope.data.columnname == 'uninvoicamount'">
                    {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥ 0.00':'--'}}
                  </div>
                  <div v-else-if="scope.data.columnname == 'unwriteoffamount'">
                    {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥ 0.00':'--'}}
                  </div>
                  <div v-else-if="scope.data.columnname == 'returnamount'">
                    {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥ 0.00':'--'}}
                  </div>
                  <div v-else-if="scope.data.columnname == 'status'">
                    <span v-if="scope.data.data[[scope.data.columnname]] == '新建'"
                          style="color:#000000">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '提交'"
                          style="color:#d90a0a">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-if="scope.data.data[[scope.data.columnname]] == '交期待确认'"
                          style="color:#e09a1a">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '交期确认'"
                          style="color:#3874f6">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-if="scope.data.data[[scope.data.columnname]] == '审核'"
                          style="color:#52C41A">{{ scope.data.data[[scope.data.columnname]] }}</span>
                    <span v-else-if="scope.data.data[[scope.data.columnname]] == '关闭'"
                          style="color:#b2c0ea">{{ scope.data.data[[scope.data.columnname]] }}</span>
                  </div>
                  <div v-else style="text-wrap:wrap;word-wrap: break-word;white-space: normal;">
                    {{ scope.data.data[scope.data.columnname] || '--' }}
                  </div>
                </template>
              </pageTable>
            </showIsNone>
          </el-card>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import myRadio from '@/HDrpManagement/customerPortrait/modules/myRadio'
import myCard from '@/HDrpManagement/customerPortrait/modules/myCrad'
import pageTable from '@/HDrpManagement/customerPortrait/modules/pageTable'
import showIsNone from '@/HDrpManagement/customerPortrait/modules/showIsNone'
import myNewCard from './myNewCrad'
import myTag from '@/HDrpManagement/customerPortrait/modules/myTag'

export default {
  name: "detail",
  props: ['data'],
  components: {myRadio, myCard, pageTable, showIsNone, myTag, myNewCard},
  data() {
    return {
      dialogFormVisible: false,
      detailInfo: {},
      followParam: {
        "id": 20240605110904,
        "content": {
          "sys_phonebookid": this.$route.query.id,
          "dateType": "全部",
          "where": {
            "begdate": "",
            "enddate": ""
          }
        }
      },
      customerParam: {
        "id": 20240605124904,
        "content": {
          "sys_phonebookid": this.$route.query.id,
          "dateType": "全部",// 全部 本年 本季 本月 自定义
          "where": {
            "begdate": "",
            "enddate": ""
          }
        }
      },
      projectParam: {
        "id": 20240605131804,
        "content": {
          "sys_phonebookid": this.$route.query.id,
          "dateType": "全部",// 全部 本年 本季 本月 自定义
          "where": {
            "begdate": "",
            "enddate": ""
          }
        }
      },
      quotationParam: {
        "id": 20240605133604,
        "content": {
          "sys_phonebookid": this.$route.query.id,
          "dateType": "全部",// 全部 本年 本季 本月 自定义
          "where": {
            "begdate": "",
            "enddate": "",
            "isproject": ""
          }
        }
      },
      orderParam: {
        "id": 20240605135904,
        "content": {
          "sys_phonebookid": this.$route.query.id,
          "dateType": "全部",// 全部 本年 本季 本月 自定义
          "where": {
            "begdate": "",
            "enddate": "",
            "type": ""//订单类型
          }
        }
      },
      orderTypeList: [],
    }
  },
  methods: {
    /*详情页信息*/
    async getDetailInfo() {
      const res = await this.$api.requested({
        "id": 20240605102804,
        "content": {
          "sys_phonebookid": this.$route.query.id
        }
      });
      this.detailInfo = res.data[0];
      console.log(this.detailInfo, 'detailInfo')
    },
    refreshTable(param, el) {
      this[param].content.pageNumber = 1;
      this.$refs[el] && this.$refs[el].listData()
    },
    async queryType() {
      const res = await this.$store.dispatch('optiontypeselect', 'ordertype');
      this.orderTypeList = res.data
      this.orderTypeList.forEach((item,index)=>{
        if (item.value == '工具借用单'){
          this.orderTypeList.splice(index,1)
        }
      })
    },
    unitCompile(num) {
      if (num == 0) {
        return this.tool.formatAmount(num, 0, '￥')
      } else {
        return this.tool.formatAmount(num / 10000, 2, '￥') + '万'
      }
    },
  },
  mounted() {
    this.getDetailInfo();
    this.queryType()
    /*this.followData()*/
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.my-label {
  background: rgba(235, 245, 253, 1);
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 100;
}

/deep/ .el-drawer {
  background: #F5F5F5 !important;
}

/deep/ .el-drawer__header {
  display: none !important;
}

/deep/ .el-descriptions-item__cell {
  padding: 8px 8px 0px 8px !important;
}


/deep/ .el-card__header, /deep/ .el-card__body {
  padding: 10px !important;
}

.Mcontainer .Mcontainer-header {
  display: flex;
  align-items: center;
}

.Mcontainer .Mcontainer-header .Mcontainer-header__left {
  display: flex;
  max-width: 350px;
  min-width: 350px;
  align-items: center;
  padding-right: 20px;
}

.Mcontainer .Mcontainer-header .Mcontainer-header__right {
  flex: 100;
  border-left: 1px solid #cccccc;
  padding-left: 20px;
}

.Mcontainer .Mcontainer-header .Mcontainer-header__left .account {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
  overflow: hidden;
  flex: 100;
}

.Mcontainer .Mcontainer-header .Mcontainer-header__left .account .Mtag {
  margin-top: 5px;
}

.Mcontainer .Mfollow {
  margin-top: 10px;
}

.Mcontainer .peopleInfo {
  margin-top: 10px;
  padding-bottom: 10px;
}

.peopleInfo-content {
  display: flex;
  flex-direction: column;
  height: 300px;
  overflow-y: scroll;
}

.peopleInfo-content::-webkit-scrollbar {
  display: none;
}

.peopleInfo-content .leader {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.peopleInfo-content .leader .title {
  font-size: 14px;
}

.peopleInfo-content .leader .content {
  display: flex;
  flex-wrap: wrap;
}

.peopleInfo-content .leader .content .item {
  display: flex;
  align-items: center;
  margin: 0 20px 10px 0;
}

.peopleInfo-content .leader .content .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  background: #3874F6;
  margin-right: 10px;
  color: #ffffff;
}

.peopleInfo-content .leader .content .Info {
  display: flex;
  flex-direction: column;
}

.peopleInfo-content .leader .content .Info div {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #cccccc;
}


.peopleInfo-content .people {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.peopleInfo-content .people .title {
  font-size: 14px;
}

.peopleInfo-content .people .content {
  display: flex;
  flex-wrap: wrap;
}

.peopleInfo-content .people .content .item {
  display: flex;
  align-items: center;
  margin: 0 20px 10px 0;
}

.peopleInfo-content .people .content .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  background: #3874F6;
  margin-right: 10px;
  color: #ffffff;
}

.peopleInfo-content .people .content .Info {
  display: flex;
  flex-direction: column;
}

.peopleInfo-content .people .content .Info div {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #cccccc;
}

.peopleInfo-content .people {
}

.descript {
  font-size: 12px;
  color: #cccccc;
  margin-right: 20px;
  white-space: nowrap;
}

.title {
  font-size: 14px;
  color: #000000;
  margin-right: 10px;
  white-space: nowrap;
}

.myTitle {
  margin-right: 24px;
  font-size: 16px;
  font-weight: bold;
}
</style>