kd-aiot-frontend-eom/src/views/saleManage/businessOpportunity/components/contactDetailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    width="80%"
    @close="cancel"
  >
  <el-card
        shadow="never"
        header="基本信息"
        body-style="padding: 22px 20px 0 0;"
      >
  <el-form
          label-width="120px"
          ref="form"
          :model="form"
          :rules="rules"
          style="margin-top: 30px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="客户名称："
                prop="contactName"
              >
              {{detailData.contactName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="	商机名称：" prop="name">
                {{detailData.name}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人名称：" prop="responsibleName">
                {{detailData.responsibleName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商机来源：" prop="sourceCode">
                {{detailData.sourceName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="赢单率：" prop="winRate">
                {{detailData.winRate+'%'}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预算：" prop="budget">
                {{detailData.budget+'万元'}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计结单日期：" prop="expectedClosingDate">
                {{detailData.expectedClosingDate}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商机阶段：" prop="stageCode">
                {{detailData.stageCode}}
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item
                label="备注："
                prop="remark"
              >
              {{detailData.remark}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card
        shadow="never"
        header="竞品"
        body-style="padding: 22px 20px 0 20px;"
      >
      <ele-pro-table ref="table" :needPage="false" :columns="competAnalysisListcolumns" :datasource="detailData.competAnalysisList" row-key="id">
        </ele-pro-table>
      </el-card>
      <el-card
        shadow="never"
        header="关键人信息"
        body-style="padding: 22px 20px 0 20px;"
      >
      <ele-pro-table ref="table" :needPage="false" :columns="partyListcolumns" :datasource="detailData.partyList" row-key="id">
        </ele-pro-table>
      </el-card>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import { getDetail} from '@/api/saleManage/businessOpportunity';
import {getFile} from '@/api/system/file';
import {getInfoById as getCategoryInfo} from '@/api/classifyManage/index';
import dictMixins from '@/mixins/dictMixins';;
import {copyObj} from '@/utils/util';


export default {
    mixins: [dictMixins],
    data() {
    
      return {
        visible: false,
        title: '详情',
        row: {},
        activeName: 'base',
        form:{},
        rules:{},
        detailData:{},
        competAnalysisListcolumns: [
      
         {
             prop: 'name',
             label: '竞争对手名称',
             // sortable: 'custom',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         {
             prop: 'analysis',
             label: '竞品分析',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         ],
         partyListcolumns: [
         {
             prop: 'linkName',
             label: '关键人名称',
             // sortable: 'custom',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         {
             prop: 'linkMobilePhone',
             label: '联系方式',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         {
             prop: 'linkPost',
             label: '职位',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         {
             prop: 'attitudeName',
             label: '态度',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         {
             prop: 'influenceName',
             label: '影响力',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         {
             prop: 'goal',
             label: '项目目标/期望',
             showOverflowTooltip: true,
             align: 'center',
             minWidth: 110
         },
         ],
        ifChiefList: [
          {
            value: 0,
            label: '否'
          },
          {
            value: 1,
            label: '是'
          }
        ],
      };
    },
    methods: {
      async open(row) {
        this.form = row;
        this.visible = true;
        this.getDetailData(row.id)
      },

      cancel() {
        this.$nextTick(() => {
          // 关闭后，销毁所有的表单数据
          this.form = copyObj(this.formDef),
          this.otherForm = copyObj(this.otherFormDef),
          this.tableBankData = []
          this.tableLinkData = []
          this.visible = false;
        })
      },

      async getDetailData (id) {
        this.loading = true;
        const data = await getDetail(id);
        this.loading = false;
        if (data) {
          this.detailData = data;
          
        }
      },

    }
  };
</script>