kd-aiot-frontend-wt/src/views/bpm/handleTask/components/saleOrder/detailDialog.vue

<template>
  <div>
    <div class="switch">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div v-show="activeComp == 'main'">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <headerTitle title="订单信息"> </headerTitle>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号：" prop="orderNo">
              {{ form.orderNo }}
            </el-form-item>

            <el-form-item label="订单类型：" prop="totalAmount">
              {{
                form.needProduce == 1
                  ? '有客户生产性订单'
                  : form.needProduce == 2
                  ? '无客户生产性订单'
                  : form.needProduce == 4
                  ? '不定向订单'
                  : '库存式订单'
              }}
            </el-form-item>

            <el-form-item label="结算方式：" prop="settlementModeName">
              {{ detailData.settlementModeName }}
            </el-form-item>

            <el-form-item label="客户收货地址：" prop="receiveAddress">
              {{ form.receiveAddress }}
            </el-form-item>
            <el-form-item label="生产要求：" prop="productionRequirements">
              {{ form.productionRequirements }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              v-if="form.relationType == 1"
              label="商机名称："
              prop="relationName"
            >
              {{ form.relationName }}
            </el-form-item>
            <el-form-item
              v-if="form.relationType == 2"
              label="报价单："
              prop="relationCode"
            >
              {{ form.relationName }}
            </el-form-item>
            <el-form-item
              v-if="form.relationType == 4"
              label="项目名称："
              prop="projectName"
            >
              {{ form.relationName }}
            </el-form-item>
            <el-form-item
              v-if="form.relationType == 3"
              label="合同名称："
              prop="relationName"
            >
              {{ form.relationName }}
            </el-form-item>
            <el-form-item label="销售部门：" prop="salesDeptName">
              {{ form.salesDeptName }}
            </el-form-item>
            <el-form-item label="业务员：" prop="salesmanName">
              {{ form.salesmanName }}
            </el-form-item>
            <el-form-item label="订单总金额：" prop="totalAmount">
              {{ form.totalAmount }}元
            </el-form-item>

            <el-form-item prop="orderFiles" label="订单附件：">
              <fileMain v-model="detailData.orderFiles" type="view"></fileMain>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="合同编号："
              prop="contractNumber"
              v-if="form.relationType == 3"
            >
              {{ form.contractNumber }}
            </el-form-item>
            <el-form-item label="销售类型：" prop="saleTypeName">
              {{ form.saleTypeName }}
            </el-form-item>
            <el-form-item label="应付金额：" prop="payAmount">
              {{ form.payAmount }}元
            </el-form-item>
            <el-form-item label="订单备注：" prop="remark">
              {{ form.remark }}
            </el-form-item>
            <el-form-item
              label="总数"
              prop="totalPlanNum"
              v-if="form.needProduce == 4"
            >
              {{ form.totalPlanNum }}
              {{ form.planNumUnit }}
            </el-form-item>
          </el-col>
        </el-row>
        <headerTitle title="基本信息"></headerTitle>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称：" prop="partaName">
              {{ form.partaName }}
            </el-form-item>
            <el-form-item
              label="客户统一社会信用代码"
              prop="partaUnifiedSocialCreditCode"
              label-width="160px"
            >
              {{ form.partaUnifiedSocialCreditCode }}
            </el-form-item>
            <el-form-item label="客户联系人：" prop="partaLinkName">
              {{ form.partaLinkName }}
            </el-form-item>
            <el-form-item label="客户电话：" prop="partaTel">
              {{ form.partaTel }}
            </el-form-item>
            <el-form-item label="客户传真：" prop="partaFax">
              {{ form.partaFax }}
            </el-form-item>
            <el-form-item label="	客户Email：" prop="partaEmail">
              {{ form.partaEmail }}
            </el-form-item>
            <el-form-item label="客户地址：" prop="partaAddress">
              {{ form.partaAddress }}
            </el-form-item>
            <!-- <el-form-item
              label="客户税号"
              prop="contactAddress"
            >
              <el-input
                clearable
                v-model="form.contactAddress"
                placeholder="请输入"
              />
            </el-form-item> -->
          </el-col>

          <el-col :span="12">
            <el-form-item label="售出方名称：" prop="partbName">
              {{ form.partbName }}
            </el-form-item>
            <el-form-item
              label="售出方统一社会信用代码"
              prop="partbUnifiedSocialCreditCode"
              label-width="180px"
            >
              {{ form.partbUnifiedSocialCreditCode }}
            </el-form-item>
            <el-form-item label="售出方联系人：" prop="partbLinkName">
              {{ form.partbLinkName }}
            </el-form-item>
            <el-form-item
              prop="partbTel"
              label="售出方联系电话："
              label-width="140px"
            >
              {{ form.partbTel }}
            </el-form-item>
            <el-form-item prop="partbFax" label="售出方传真：">
              {{ form.partbFax }}
            </el-form-item>

            <el-form-item label="售出方Email：" prop="partbEmail">
              {{ form.partbEmail }}
            </el-form-item>

            <el-form-item label="售出方地址：" prop="partbAddress">
              {{ form.partbAddress }}
            </el-form-item>
            <!-- <el-form-item
              label="售出方税号"
              prop="contactAddress"
            >
              <el-input
                clearable
                v-model="form.contactAddress"
                placeholder="请输入"
              />
            </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>

      <headerTitle title="物品清单" v-if="form.needProduce != 4"></headerTitle>
      <inventoryTabledetail
        v-if="form.needProduce != 4"
        ref="inventoryTabledetailRef"
        :isCustomerMark="true"
        :isDiscountTotalPrice="true"
        :isArrivalWay="true"
        :isProductionRequirements="true"
      ></inventoryTabledetail>
      <headerTitle title="类型清单" v-if="form.needProduce == 4"></headerTitle>

      <typeList
        v-if="form.needProduce == 4"
        ref="typeListRef"
        type="view"
      ></typeList>
    </div>
    <div v-show="activeComp == '1'">
      <bomList :tableList="orderBomList2"></bomList>
    </div>
    <div v-show="activeComp == '2'">
      <bomList :tableList="orderBomList1"></bomList>
    </div>
    <div v-show="activeComp == '3'">
      <bomList :tableList="orderBomList3"></bomList>
    </div>
  </div>
</template>

<script>
  import { getSaleOrderDetail } from '@/api/bpm/components/saleManage/saleorder';
  import dictMixins from '@/mixins/dictMixins';
  import inventoryTabledetail from '@/BIZComponents/inventoryTableDetails.vue';
  import typeList from './typeList.vue';
  import bomList from './bomList.vue';
  export default {
    mixins: [dictMixins],
    components: {
      inventoryTabledetail,
      typeList,
      bomList
    },
    props: {
      businessId: {
        default: ''
      }
    },
    data() {
      return {
        activeComp: 'main',
        tabOptions: [{ key: 'main', name: '订单信息' }],
        visible: false,
        detailId: '',
        title: '详情',
        row: {},
        activeName: 'base',
        form: {},
        rules: {},
        detailData: {},
        orderBomList1: [], //生产计划
        orderBomList2: [], //生产性物资采购
        orderBomList3: [] //客供料外协采购
      };
    },
    created() {
      this.getDetailData(this.businessId);
    },
    methods: {
      async getDetailData(id) {
        this.loading = true;
        const data = await getSaleOrderDetail(id);
        this.loading = false;
        if (data) {
          this.form = data;
          this.detailData = data;
          this.orderBomList1 = data.orderBomList.filter(
            (item) => item.disposeType === 1
          );
          this.orderBomList2 = data.orderBomList.filter(
            (item) => item.disposeType === 2
          );
          this.orderBomList3 = data.orderBomList.filter(
            (item) => item.disposeType === 3
          );
          if (this.orderBomList1?.length) {
            this.tabOptions.push({ key: '2', name: '生产计划物品清单' });
          }
          if (this.orderBomList2?.length) {
            this.tabOptions.push({ key: '1', name: '生产性物资采购清单' });
          }
          if (this.orderBomList3?.length) {
            this.tabOptions.push({ key: '3', name: '客供料外协采购清单' });
          }

          this.$nextTick(() => {
            this.$refs.inventoryTabledetailRef &&
              this.$refs.inventoryTabledetailRef.putTableValue(data);
            this.$refs.typeListRef &&
              this.$refs.typeListRef.putTableValue(data.typedetailList);
          });
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  :deep(.el-form-item) {
    margin-bottom: 4px !important;
  }
  .headbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .amount {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }

  .switch_left ul .active {
    border-top: 4px solid var(--color-primary);
    color: var(--color-primary-5);
  }

  .switch {
    padding-bottom: 20px;
  }

  :deep .divider .content {
    justify-content: flex-start;
  }
</style>