kd-aiot-frontend-eom/src/views/saleManage/saleOrder/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.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">
      <div>
        <span> 订单数量</span>
        <span class="value"
          >{{ orderNoCountData.saleOrderNumber }}
          &nbsp;&nbsp;
        </span>
      </div>
      <div>
        <span> 订单总金额</span>
        <span class="value"
          >{{ orderNoCountData.totalAmountSaleOrder }}
          &nbsp;&nbsp;元
        </span>
      </div>
      <div>
        <span> 应收款</span>
        <span class="value"
          >{{ orderNoCountData.receivable }}
          &nbsp;&nbsp;元
        </span>
      </div>
      <div>
        <span> 发货数量</span>
        <span class="value"
          >{{ orderNoCountData.sendNumber }}
          &nbsp;&nbsp;
        </span>
      </div>
      <div>
        <span> 退货数量</span>
        <span class="value"
          >{{ orderNoCountData.returnNumber }}
          &nbsp;&nbsp;
        </span>
      </div>
      <div>
        <span> 退货金额</span>
        <span class="value"
          >{{ orderNoCountData.returnAmount }}
          &nbsp;&nbsp;元
        </span>
      </div>

      <!-- <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="受托收货">
          <entrustedReceive :saleOrderData="row" :key="row.id"></entrustedReceive>
        </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="催单记录">
          <saleOrderReminderList
          ref="saleOrderReminderListRef"
          ></saleOrderReminderList>
        </el-tab-pane>
        <el-tab-pane
          label="审批流程"
          name="审批流程"
          v-if="row.processInstanceId"
        >
          <bpmDetail
            v-if="row.processInstanceId && activeName == '审批流程'"
            :id="row.processInstanceId"
            :key="row.id"
          ></bpmDetail>
        </el-tab-pane>
        
        <el-tab-pane label="售后工单" name="售后工单">
          <saleOderAftersalesList
          :saleOrderData="row"
          ref="saleOderAftersalesListRef"
          ></saleOderAftersalesList>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

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

import dictMixins from '@/mixins/dictMixins';

import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import saleOrderInfo from './darwerComponents/saleOrderInfo.vue';
//受托收货
import entrustedReceive from '@/views/saleManage/saleOrder/entrustedReceive/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 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';
//催单
import saleOrderReminderList from './darwerComponents/saleOrderReminderList.vue';
//售后工单
import saleOderAftersalesList from './darwerComponents/saleOderAftersalesList.vue';
export default {
  mixins: [dictMixins],

  components: {
    bpmDetail,
    saleOrderInfo,
    invoice,
    returnGoods,
    accountstatement,
    purchasePlanManage,
    productionPlan,
    produceOrder,
    pick,
    materialReturn,
    warehousing,
    receivableManage,
    saleOrderReminderList,
    saleOderAftersalesList,
    entrustedReceive
  },
  data() {
    return {
      drawer: false,
      title: '',
      activeName: '详细信息',
      row: { contactId: '' },
      content: '',
      orderNoCountData: {
        saleOrderNumber: '', //订单数量
        totalAmountSaleOrder: '', //订单总金额
        sendNumber: '', //发货数量
        receivable: '', //应收款
        returnNumber: '', //退货数量
        returnAmount: '' //退货金额
      }
    };
  },
  created() {},

  methods: {
    async open(row) {
      this.activeName='详细信息'
      this.row = await getSaleOrderDetail(row.id);
      this.orderNoCountData = await queryOrderNoCount(row.orderNo);

      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.saleOrderInfoRef.init(this.row);
        this.$refs.saleOrderReminderListRef.init(this.row.reminderRecord);
        this.$refs.saleOderAftersalesListRef.init(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;
  }
}
.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;
    }
  }
}
</style>