kd-aiot-frontend-eom/src/views/saleManage/contact/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?.base?.name }}</span
      >
      <span>客户编码：{{ row?.base?.code }}</span>
      <span>客户代号：{{ row?.base?.serialNo }}</span>
      <span>业务员：{{ row?.base?.salesmanName }}</span>
      <span
        >客户级别：{{ getDictValue('供应商级别', row?.base?.level + '') }}</span
      >
    </div>

    <div class="ele-body" style="height: 100%">
      <div style="width: calc(100% - 350px); height: 100%">
        <!-- <headerTitle title="摘要卡片" style="margin-top: 15px"></headerTitle> -->

        <div class="card">
          <div>
            <span> 销售订单总额</span>
            <span class="value"
              >{{ contactCountData.totalAmountSaleOrder }}
              &nbsp;&nbsp;元
            </span>
          </div>
          <div>
            <span> 退货单总额</span>
            <span class="value"
              >{{
                contactCountData.totalAmountSaleOrderRecord
              }}
              &nbsp;&nbsp;元</span
            >
          </div>
          <div>
            <span> 回款总额</span>
            <span class="value"
              >{{ contactCountData.totalAmountReturn }}&nbsp;&nbsp;元</span
            ></div
          >
          <div>
            <span> 退款总额</span>
            <span class="value"
              >{{ contactCountData.totalAmountRecord }}&nbsp;&nbsp;元</span
            ></div
          >
          <div>
            <span> 待回款总额</span>
            <span class="value"
              >{{ contactCountData.totalAmountTreatReturn }}&nbsp;&nbsp;元</span
            ></div
          >
        </div>
        <el-tabs v-model="activeName" style="height: calc(100% - 124px)">
          <el-tab-pane label="详细信息" name="详细信息">
            <contactInfo ref="contactInfoRef"></contactInfo>
          </el-tab-pane>
          <el-tab-pane label="银行信息" name="银行信息">
            <bankInfo ref="bankInfoRef"></bankInfo>
          </el-tab-pane>
          <el-tab-pane label="联系人信息" name="联系人信息">
            <linkInfo ref="linkInfoREf"></linkInfo
          ></el-tab-pane>
          <el-tab-pane label="跟进记录" name="跟进记录">
            <followList ref="followListRef"></followList
          ></el-tab-pane>
          <el-tab-pane label="商机" name="商机">
            <businessOpportunity
              :key="row?.base?.id"
              :contactId="row?.base?.id"
              :contactName="row?.base?.name"
            ></businessOpportunity>
          </el-tab-pane>

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

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

          <el-tab-pane label="销售合同" name="销售合同">
            <contractBook
              :key="row?.base?.id"
              :contactData="row.base"
            ></contractBook>
          </el-tab-pane>
          <el-tab-pane label="发货单" name="发货单">
            <invoice :key="row?.base?.id" :contactData="row.base"></invoice>
          </el-tab-pane>
          <el-tab-pane label="退货单" name="退货单">
            <returnGoods
              :key="row?.base?.id"
              :contactData="row.base"
            ></returnGoods>
          </el-tab-pane>
          <el-tab-pane label="对账单" name="对账单">
            <accountstatement
              :key="row?.base?.id"
              :contactData="row.base"
            ></accountstatement>
          </el-tab-pane>

          <el-tab-pane label="开票信息" name="开票信息">
            <invoiceManage
              :key="row?.base?.id"
              :contactData="row.base"
            ></invoiceManage>
          </el-tab-pane>
          <el-tab-pane label="应收信息" name="应收信息">
            <receivableManage
              :key="row?.base?.id"
              :contactData="row.base"
            ></receivableManage>
          </el-tab-pane>
          <el-tab-pane label="证书资质" name="证书资质">
            <certificateManagement
              ref="certificateManagementRef"
            ></certificateManagement>
          </el-tab-pane>
          <el-tab-pane label="申请记录" name="申请记录">
            <applyList
              ref="applyListRef"
              :tableList="row.listApply"
            ></applyList>
          </el-tab-pane>

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

      <el-card
        class="box-card"
        style="width: 350px; margin-left: 15px; height: 100%"
      >
        <div slot="header" class="clearfix">
          <span>客户动态</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="commitCommentVisible = true"
            >新建</el-button
          >
        </div>
        <!-- <tinymce-editor v-model="content" :init="{ height: 525 }" /> -->
        <comment :key="row.base?.id" ref="commentRef"></comment>
      </el-card>
      <ele-modal
        custom-class="ele-dialog-form long-dialog-form"
        :centered="true"
        :visible.sync="commitCommentVisible"
        :close-on-click-modal="false"
        :append-to-body="true"
        width="500px"
      >
        <el-form label-width="90px" ref="form" class="el-form-box">
          <el-form-item label="动态内容">
            <el-input
              class="gray-bg-input"
              v-model="inputComment"
              type="textarea"
              :rows="3"
              autofocus
              placeholder="发布内容"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="footer">
          <el-button @click="commitCommentVisible = false">取消</el-button>
          <el-button type="primary" @click="commitComment">发布</el-button>
        </div>
      </ele-modal>
    </div>
  </el-drawer>
</template>

<script>
  import {
    contactDetail,
    updateContactDynamics,
    queryContactIdCount
  } from '@/api/saleManage/contact';
  import dictMixins from '@/mixins/dictMixins';
  import contactInfo from './darwerComponents/contactInfo.vue';

  import comment from './darwerComponents/comment.vue';

  //银行
  import bankInfo from './darwerComponents/bankInfo.vue';
  //联系人
  import linkInfo from './darwerComponents/linkInfo.vue';
  // //其他信息
  // import otherForm from './darwerComponents/otherForm.vue';
  //资质
  // import certificateTable from './darwerComponents/certificateTable.vue';
  //商机
  import businessOpportunity from '@/views/saleManage/businessOpportunity/index.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 invoice from '@/views/saleManage/saleOrder/invoice/index.vue';
  //退货单
  import returnGoods from '@/views/saleManage/saleOrder/returnGoods/index.vue';
  //对账单
  import accountstatement from '@/views/saleManage/saleOrder/accountstatement/index.vue';
  //发票
  import invoiceManage from '@/views/financialManage/invoiceManage/index.vue';
  //应收
  import receivableManage from '@/views/financialManage/receivableManage/index.vue';
  //跟进
  import followList from './darwerComponents/followList.vue';
  //申请记录
  import applyList from './darwerComponents/applyList.vue';
  import TinymceEditor from '@/components/TinymceEditor/index.vue';
  import { mapGetters } from 'vuex';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import certificateManagement from '@/views/saleManage/contact/components/certificateManagement/index.vue';
  export default {
    mixins: [dictMixins],

    components: {
      bpmDetail,
      contactInfo,
      bankInfo,
      linkInfo,
      // otherForm,
      // certificateTable,
      quotation,
      contractBook,
      saleOrder,
      invoiceManage,
      businessOpportunity,
      receivableManage,
      invoice,
      followList,
      TinymceEditor,
      returnGoods,
      accountstatement,
      comment,
      certificateManagement,
      applyList
    },
    data() {
      return {
        drawer: false,
        title: '',
        activeName: '详细信息',
        row: { base: {} },
        content: '',
        commitCommentVisible: false,
        inputComment: '',
        contactCountData: {
          totalAmountSaleOrderRecord: '', //退货单总额：
          totalAmountRecord: '', //退款总额
          totalAmountTreatReturn: '', //待回款总额
          totalAmountSaleOrder: '', //销售订单总额
          totalAmountReturn: '' //回款总额
        },
        pageName: 'myList'
      };
    },
    created() {
      this.requestDict('供应商级别');
    },
    computed: {
      ...mapGetters(['user'])
    },
    methods: {
      async open(row, pageName) {
        console.log(row, pageName);

        this.row = await contactDetail(row.id);
        if (this.row?.listApply) {
          this.row?.listApply.forEach((item, index) => {
            this.$set(this.row?.listApply[index],'contactName',this.row.base.name)
          });
        }
        this.pageName = pageName;
        const contactCountData = await queryContactIdCount(row.id);
        this.contactCountData = contactCountData.data;
        this.drawer = true;
        this.$nextTick(() => {
          this.$refs.contactInfoRef.init(this.row);
          this.$refs.bankInfoRef.init(this.row);
          this.$refs.linkInfoREf.init(this.row);
          // this.$refs.certificateTableRef.init(this.row.base);
          this.$refs.certificateManagementRef &&
            this.$refs.certificateManagementRef.init(
              '4',
              this.row.base.id,
              this.row.base.name
            );
          this.$refs.followListRef.init(this.row);
          this.$refs.commentRef.init(this.row.base);
        });
      },
      async commitComment() {
        await updateContactDynamics({
          id: this.row.base.id,
          contactDynamicsList: [
            {
              id: '', //主键id
              date: '', //评论时间
              ownerId: '', //文章的id
              fromId: this.user.info.userId, //评论者id
              fromName: this.user.info.name, //评论者昵称
              fromAvatar:
                this.user.info.avatar && this.user.info.avatar[0]?.url, //评论者头像
              content: this.inputComment, //评论内容
              reply: [
                //回复，或子评论
              ]
            }
          ]
        });
        this.commitCommentVisible = false;
        this.row = await contactDetail(this.row.base.id);
        this.$refs.commentRef.init(this.row.base);
      },
      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;
    > div {
      flex: 1;
      margin: 0px 40px;
      background: #1890ff;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border-radius: 10px;
      .value {
        margin-top: 8px;
      }
    }
  }
  .title {
    span {
      margin-left: 50px;
    }
    .name {
      font-weight: 800;
      color: #40a9ff;
    }
  }
  :deep(.el-card__body) {
    overflow: auto;
    height: calc(100% - 51px);
  }
</style>