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

<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    :append-to-body="true"
    size="90%"
  >
    <div slot="title" class="title">
      <span style="margin: 0" class="name">订单编号：{{ row.orderNo }}</span>
      <span>项目名称：{{ row.projectName }}</span>
      <span>客户名称：{{ row.partaName }}</span>
      <span>销售类型：{{ row.saleTypeName }}</span>
    </div>
    <headerTitle title="摘要卡片" style="margin-top: 15px"></headerTitle>

    <!-- <div class="card">
      <span>预算：</span>
      <span> 赢单率：</span>
      <span>预计结单日期：</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="详细信息">
          <saleOrderInfo ref="saleOrderInfoRef"></saleOrderInfo>
        </el-tab-pane>
        <el-tab-pane label="发货单" name="发货单">
          <invoice :saleOrderData="row" :key="row.id"></invoice>
        </el-tab-pane>
        <el-tab-pane label="退货单" name="退货单">
          <returnGoods :saleOrderData="row" :key="row.id"></returnGoods>
        </el-tab-pane>
        <el-tab-pane label="对账单" name="对账单">
          <accountstatement
            :saleOrderData="row"
            :key="row.id"
          ></accountstatement>
        </el-tab-pane>

        <el-tab-pane label="采购计划" name="采购计划">
          <purchasePlanManage
            :saleOrderData="row"
            :key="row.id"
          ></purchasePlanManage>
        </el-tab-pane>

        <el-tab-pane label="生产计划" name="生产计划">
          <productionPlan :saleOrderData="row" :key="row.id"></productionPlan>
        </el-tab-pane>

        <el-tab-pane label="生产工单" name="生产工单">
          <produceOrder :saleOrderData="row" :key="row.id"></produceOrder>
        </el-tab-pane>

        <el-tab-pane label="领料" name="领料">
          <pick :saleOrderData="row" :key="row.id"> </pick>
        </el-tab-pane>
        <el-tab-pane label="退料" name="退料">
          <materialReturn :saleOrderData="row" :key="row.id"> </materialReturn>
        </el-tab-pane>
        <el-tab-pane label="入库单" name="入库单">
          <warehousing :saleOrderData="row" :key="row.id"></warehousing>
        </el-tab-pane>
        <el-tab-pane label="应收款" name="应收款">
          <receivableManage
            :saleOrderData="row"
            :key="row.id"
          ></receivableManage>
        </el-tab-pane>
        <el-tab-pane label="审批流程" name="审批流程" v-if="row.processInstanceId">
          <bpmDetail
            v-if="row.processInstanceId"
            :id="row.processInstanceId"
            :key="row.id"
          ></bpmDetail>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import { getSaleOrderDetail } from '@/api/saleManage/saleorder';

import dictMixins from '@/mixins/dictMixins';

import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import saleOrderInfo from './darwerComponents/saleOrderInfo.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 purchasePlanManage from '@/views/purchasingManage/purchasePlanManage/index.vue';
//生成计划
import productionPlan from './darwerComponents/productionPlan.vue';
//生成工单
import produceOrder from './darwerComponents/produceOrder.vue';
//领料
import pick from './darwerComponents/pick/index.vue';
//退料
import materialReturn from './darwerComponents/materialReturn/index.vue';
//入库
import warehousing from './darwerComponents/warehousing/index.vue';
//应收
import receivableManage from '@/views/financialManage/receivableManage/index.vue';
export default {
  mixins: [dictMixins],

  components: {
    bpmDetail,
    saleOrderInfo,
    invoice,
    returnGoods,
    accountstatement,
    purchasePlanManage,
    productionPlan,
    produceOrder,
    pick,
    materialReturn,
    warehousing,
    receivableManage
  },
  data() {
    return {
      drawer: false,
      title: '',
      activeName: '详细信息',
      row: { contactId: '' },
      content: ''
    };
  },
  created() {},

  methods: {
    async open(row) {
      this.row = await getSaleOrderDetail(row.id);
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.saleOrderInfoRef.init(this.row);
        // this.$refs.followListRef.init(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);
      });
    },

    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;
  }
}
.title {
  span {
    margin-left: 50px;
  }
  .name {
    font-weight: 800;
    color: #40a9ff;
  }
}
</style>