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

<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    :append-to-body="true"
    size="100%"
  >
    <div slot="title" class="title">
      <span style="margin: 0" class="name">商机名称：{{ row.name }}</span>
      <span>商机来源：{{ row.sourceName }}</span>
      <span>商机阶段：{{ row.stageName }}</span>
      <span>负责人：{{ row.responsibleName }}</span>
    </div>
    <headerTitle title="摘要卡片" style="margin-top: 15px"></headerTitle>

    <div class="card">
      <span
        >预算：
        <el-input v-model="row.budget" @blur="inputChange">
          <template slot="append">万元</template>
        </el-input>
      </span>
      <span>
        赢单率：
        <el-input v-model="row.winRate" @blur="inputChange">
          <template slot="append">%</template>
        </el-input></span
      >
      <span
        >预计结单日期：
        <el-date-picker
          v-model="row.expectedClosingDate"
          @blur="inputChange"
          value-format="yyyy-MM-dd"
          placeholder="请选择"
          type="date"
          class="filter-item"
        ></el-date-picker>
      </span>
    </div>
    <div class="ele-body" style="height: calc(100% - 124px)">
      <el-tabs v-model="activeName" style="width: 100%" type="border-card">
        <el-tab-pane label="详细信息" name="详细信息">
          <opportunityInfo ref="opportunityInfoRef"></opportunityInfo>
        </el-tab-pane>
        <el-tab-pane label="物品清单" name="物品清单">
          <inventoryTableDetails
            ref="inventoryTable"
            :isSinglePrice="false"
            :isTotalCount="false"
            :isDiscount="false"
            :cacheKeyUrl="cacheKeyUrl"
          ></inventoryTableDetails>
        </el-tab-pane>
        <el-tab-pane label="竞品" name="竞品">
          <businessAddTable
            ref="businessAddTable"
            @save="save"
            :isDrawer="true"
          ></businessAddTable>
        </el-tab-pane>
        <el-tab-pane label="关键人信息" name="关键人信息">
          <personnelAddTable
            :isDrawer="true"
            ref="personnelAddTable"
            @save="save"
            @getContactId="getContactId"
          ></personnelAddTable>
        </el-tab-pane>

        <el-tab-pane label="报价单" name="报价单">
          <quotation :key="row.id" :businessOpportunityData="row"></quotation>
        </el-tab-pane>

        <el-tab-pane label="销售合同" name="销售合同">
          <contractBook
            :key="row.id"
            :businessOpportunityData="row"
          ></contractBook>
        </el-tab-pane>

        <!-- <el-tab-pane label="销售订单" name="销售订单">
          <saleOrder :key="row.id"></saleOrder>
        </el-tab-pane> -->

        <el-tab-pane label="跟进记录" name="跟进记录">
          <followList ref="followListRef"></followList>
        </el-tab-pane>

        <el-tab-pane
          label="审批流程"
          name="审批流程"
          v-if="row.processInstanceId"
        >
          <bpmDetail
            v-if="row.processInstanceId && activeName == '审批流程'"
            :id="row.processInstanceId"
          ></bpmDetail>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
  import {
    getDetail,
    UpdateInformation
  } from '@/api/saleManage/businessOpportunity';

  import dictMixins from '@/mixins/dictMixins';
  import opportunityInfo from './darwerComponents/opportunityInfo.vue';
  // import inventoryTable from '@/BIZComponents/inventoryTable.vue';
  import inventoryTableDetails from '@/BIZComponents/inventoryTableDetails.vue';
  import businessAddTable from './businessAddTable.vue';
  import personnelAddTable from './personnelAddTable.vue';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';

  //报价单
  import quotation from '@/views/saleManage/quotation/index.vue';
  //合同
  import contractBook from '@/views/contractManage/contractBook/index.vue';
  //销售订单
  import saleOrder from '@/views/saleManage/saleOrder/index.vue';

  //跟进
  import followList from './darwerComponents/followList.vue';

  export default {
    mixins: [dictMixins],

    components: {
      quotation,
      contractBook,
      saleOrder,
      followList,
      opportunityInfo,
      inventoryTableDetails,
      businessAddTable,
      personnelAddTable,
      bpmDetail
    },
    data() {
      return {
        drawer: false,
        title: '',
        activeName: '详细信息',
        row: { contactId: '' },
        content: '',
        cacheKeyUrl: 'eos-businessOpportunity-inventoryTableDetails'
      };
    },
    created() {},

    methods: {
      async open(row) {
        (this.activeName = '详细信息'), (this.row = await getDetail(row.id));
        this.drawer = true;
        this.$nextTick(() => {
          this.$refs.opportunityInfoRef.init(this.row);
          this.$refs.followListRef.init(this.row);

          this.$refs.businessAddTable &&
            this.$refs.businessAddTable.putTableValue(
              this.row.competAnalysisList
            );
          this.$refs.personnelAddTable &&
            this.$refs.personnelAddTable.putTableValue(
              this.row.partyList,
              this.row.contactId
            );
          this.$refs.inventoryTable &&
            this.$refs.inventoryTable.putTableValue(this.row);
        });
      },
      getValidate() {
        return Promise.all([
          new Promise((resolve, reject) => {
            this.$refs.businessAddTable.validateForm((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          }),
          new Promise((resolve, reject) => {
            this.$refs.personnelAddTable.validateForm((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          })
        ]);
      },
      inputChange() {
        this.save();
      },
      async save() {
        try {
          // 表单验证通过，执行保存操作
          await this.getValidate();
          this.loading = true;

          const commitData = {
            opportunity: this.row,
            competAnalysisList: this.$refs.businessAddTable.getTableValue(),
            partyList: this.$refs.personnelAddTable.getTableValue(),
            productList: this.row.productList
          };

          UpdateInformation(commitData)
            .then((res) => {
              this.loading = false;
              this.$message.success('修改成功');
            })
            .catch((e) => {
              //this.loading = false;
            });
        } catch (error) {
          console.log(error);
          // 表单验证未通过，不执行保存操作
        }
      },
      getContactId(fn) {
        fn(this.row.contactId);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done();
          })
          .catch((_) => {});
      }
    }
  };
</script>
<style lang="scss" scoped>
  .ele-body {
    display: flex;
  }
  :deep(.el-tabs__content) {
    padding: 10px;
    height: calc(100% - 40px);
    overflow: auto;
  }
  :deep(.el-input.is-disabled .el-input__inner) {
    color: #606266;
  }
  .card {
    display: flex;
    padding: 15px;
    font-size: 16px;
    > span {
      flex: 1;
      align-items: center;
      display: flex;
      :deep(.el-input) {
        width: 300px;
      }
    }
  }
  .title {
    span {
      margin-left: 50px;
    }
    .name {
      font-weight: 800;
      color: #40a9ff;
    }
  }
</style>