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>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <headerTitle title="订单信息"> </headerTitle>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="订单编号："
              prop="orderNo"
              style="margin-bottom: 16px"
            >
              {{ form.orderNo }}
            </el-form-item>
            <el-form-item
              label="合同名称："
              prop="contractName"
              style="margin-bottom: 16px"
            >
              {{ form.contractName }}
            </el-form-item>
            <el-form-item
              label="合同编号："
              prop="contractNumber"
              style="margin-bottom: 16px"
            >
              {{ form.contractNumber }}
            </el-form-item>
            <el-form-item
              label="结算方式："
              prop="settlementModeName"
              style="margin-bottom: 16px"
            >
              {{ detailData.settlementModeName }}
            </el-form-item>
            <el-form-item prop="orderFiles" label="订单附件：">
              <fileMain v-model="detailData.orderFiles" type="view"></fileMain>
              <!--              <div-->
              <!--                v-if="detailData.orderFiles && detailData.orderFiles?.length"-->
              <!--              >-->
              <!--                <el-link-->
              <!--                  v-for="link in detailData.orderFiles"-->
              <!--                  :key="link.id"-->
              <!--                  type="primary"-->
              <!--                  :underline="false"-->
              <!--                  @click="downloadFile(link)"-->
              <!--                >-->
              <!--                  {{ link.name }}</el-link-->
              <!--                >-->
              <!--              </div>-->
            </el-form-item>

            <el-form-item
              label="客户收货地址："
              prop="receiveAddress"
              style="margin-bottom: 16px"
            >
              {{ form.receiveAddress }}
            </el-form-item>
            <el-form-item
              label="订单备注："
              prop="remark"
              style="margin-bottom: 16px"
            >
              {{ form.remark }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item
              label="交货日期："
              prop="deliveryDate"
              style="margin-bottom: 16px"
            >
              {{ form.deliveryDate }}
            </el-form-item> -->

            <el-form-item
              label="项目名称："
              prop="projectName"
              style="margin-bottom: 16px"
            >
              {{ form.projectName }}
            </el-form-item>
            <el-form-item
              label="销售部门："
              prop="salesDeptName"
              style="margin-bottom: 16px"
            >
              {{ form.salesDeptName }}
            </el-form-item>
            <el-form-item
              label="销售类型："
              prop="saleTypeName"
              style="margin-bottom: 16px"
            >
              {{ form.saleTypeName }}
            </el-form-item>
            <el-form-item
              label="应付金额："
              prop="payAmount"
              style="margin-bottom: 16px"
            >
              {{ form.payAmount }}元
            </el-form-item>
            <el-form-item
              label="订单总金额："
              prop="totalAmount"
              style="margin-bottom: 16px"
            >
              {{ form.totalAmount }}元
            </el-form-item>

            <el-form-item
              label="订单类型："
              prop="totalAmount"
              style="margin-bottom: 16px"
            >
              {{
                form.needProduce == 1
                  ? '有客户生产性订单'
                  : form.needProduce == 2
                  ? '无客户生产性订单'
                  : form.needProduce == 4
                  ? '不定向订单'
                  : '库存式订单'
              }}
            </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"
              style="margin-bottom: 16px"
            >
              {{ form.partaName }}
            </el-form-item>
            <el-form-item
              label="客户统一社会信用代码"
              prop="partaUnifiedSocialCreditCode"
              label-width="160px"
              style="margin-bottom: 16px"
            >
              {{ form.partaUnifiedSocialCreditCode }}
            </el-form-item>
            <el-form-item
              label="客户联系人："
              prop="partaLinkName"
              style="margin-bottom: 16px"
            >
              {{ form.partaLinkName }}
            </el-form-item>
            <el-form-item
              label="客户电话："
              prop="partaTel"
              style="margin-bottom: 16px"
            >
              {{ form.partaTel }}
            </el-form-item>
            <el-form-item
              label="客户传真："
              prop="partaFax"
              style="margin-bottom: 16px"
            >
              {{ form.partaFax }}
            </el-form-item>
            <el-form-item
              label="	客户Email："
              prop="partaEmail"
              style="margin-bottom: 16px"
            >
              {{ form.partaEmail }}
            </el-form-item>
            <el-form-item
              label="客户地址："
              prop="partaAddress"
              style="margin-bottom: 16px"
            >
              {{ form.partaAddress }}
            </el-form-item>
            <!-- <el-form-item
              label="客户税号"
              prop="contactAddress"
              style="margin-bottom: 16px"
            >
              <el-input
                clearable
                v-model="form.contactAddress"
                placeholder="请输入"
              />
            </el-form-item> -->
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="售出方名称："
              prop="partbName"
              style="margin-bottom: 16px"
            >
              {{ form.partbName }}
            </el-form-item>
            <el-form-item
              label="售出方统一社会信用代码"
              prop="partbUnifiedSocialCreditCode"
              label-width="180px"
              style="margin-bottom: 16px"
            >
              {{ form.partbUnifiedSocialCreditCode }}
            </el-form-item>
            <el-form-item
              label="售出方联系人："
              prop="partbLinkName"
              style="margin-bottom: 16px"
            >
              {{ 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"
              style="margin-bottom: 16px"
            >
              {{ form.partbEmail }}
            </el-form-item>

            <el-form-item
              label="售出方地址："
              prop="partbAddress"
              style="margin-bottom: 16px"
            >
              {{ form.partbAddress }}
            </el-form-item>
            <!-- <el-form-item
              label="售出方税号"
              prop="contactAddress"
              style="margin-bottom: 16px"
            >
              <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"
      ></inventoryTabledetail>
      <headerTitle title="类型清单" v-if="form.needProduce == 4"></headerTitle>

      <typeList
        v-if="form.needProduce == 4"
        ref="typeListRef"
        type="view"
      ></typeList>
    </div>
    <!-- <div v-if="activeComp=='invoice'">
      <invoiceList :orderId="detailId"></invoiceList>
      </div>
      <div v-if="activeComp=='returnorder'">
      <returnGoodsList :orderId="detailId"></returnGoodsList>
      </div>
      <div v-if="activeComp=='accountstatement'">
        <accountstatementList :orderId="detailId"></accountstatementList>
      </div> -->
  </div>
</template>

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

  // import invoiceList from '@/views/saleManage/saleOrder/orderAssociation/invoiceList.vue'
  // import returnGoodsList from '@/views/saleManage/saleOrder/orderAssociation/returnGoodsList.vue'
  // import accountstatementList from '@/views/saleManage/saleOrder/orderAssociation/accountstatementList.vue'
  import { getFile } from '@/api/system/file';
  import dictMixins from '@/mixins/dictMixins';
  import { copyObj } from '@/utils/util';
  import inventoryTabledetail from '@/BIZComponents/inventoryTableDetails.vue';
  import fileMain from '@/components/addDoc/index.vue';
  import typeList from './typeList.vue';
  
  export default {
    mixins: [dictMixins],
    components: {
      fileMain,
      inventoryTabledetail,
      typeList
    },
    props: {
      businessId: {
        default: ''
      }
    },
    data() {
      return {
        activeComp: 'order',
        tabOptions: [
          { key: 'order', name: '订单详情' },
          { key: 'invoice', name: '发货列表' },
          { key: 'returnorder', name: '退货列表' },
          { key: 'accountstatement', name: '对账列表' }
        ],
        visible: false,
        detailId: '',
        title: '详情',
        row: {},
        activeName: 'base',
        form: {
          orderFiles: [{ name: '222' }]
        },
        rules: {},
        detailData: {},
        receiptPaymentListcolumns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 200,
            prop: 'moneyName',
            label: '款项名称',
            slot: 'moneyName'
          },
          {
            width: 100,
            prop: 'price',
            label: '金额',
            slot: 'price',
            formatter: (_row, _column, cellValue) => {
              return _row.price + '元';
            }
          },
          {
            width: 100,
            prop: 'ratio',
            label: '比例',
            slot: 'ratio',
            formatter: (_row, _column, cellValue) => {
              return _row.ratio + '%';
            }
          },
          {
            width: 160,
            prop: 'deadLine',
            label: '截止日期',
            slot: 'deadLine'
          },
          {
            prop: 'remark',
            label: '	说明',
            slot: 'remark'
          }
        ],
        competAnalysisListcolumns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 200,
            prop: 'productName',
            label: '名称',
            slot: 'productName'
          },
          {
            width: 120,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode'
          },
          {
            width: 200,
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName'
          },
          {
            width: 160,
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification'
          },

          {
            width: 120,
            prop: 'totalCount',
            label: '数量',
            slot: 'totalCount'
          },
          {
            width: 120,
            prop: 'measuringUnit',
            label: '计量单位',
            slot: 'measuringUnit'
          },
          {
            width: 160,
            prop: 'singlePrice',
            label: '单价',
            slot: 'singlePrice'
          },
          {
            width: 120,
            prop: 'totalPrice',
            label: '销售总金额',
            slot: 'totalPrice',
            formatter: (_row, _column, cellValue) => {
              return _row.totalPrice + '元';
            }
          },

          {
            width: 120,
            prop: 'deliveryDays',
            label: '交期(天)',
            slot: 'deliveryDays'
          },
          {
            width: 200,
            prop: 'guaranteePeriod',
            label: '有效期',
            slot: 'guaranteePeriod',
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
              );
            }
          },
          // {
          //   width: 120,
          //   prop: 'guaranteePeriodUnitCode',
          //   label: '',
          //   slot: 'guaranteePeriodUnitCode'
          // },
          {
            width: 120,
            prop: 'technicalAnswerName',
            label: '技术答疑人',
            slot: 'technicalAnswerName'
          },
          {
            width: 220,
            prop: 'technicalParams',
            label: '技术参数',
            slot: 'technicalParams'
          },
          {
            width: 240,
            prop: 'technicalDrawings',
            label: '技术图纸',
            slot: 'technicalDrawings',
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
              );
            }
          },
          {
            width: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark'
          }
        ]
      };
    },
    created() {
      this.getDetailData(this.businessId);
    },
    methods: {
      cancel() {
        this.$nextTick(() => {
          // 关闭后，销毁所有的表单数据
          (this.form = copyObj(this.formDef)),
            (this.otherForm = copyObj(this.otherFormDef)),
            (this.tableBankData = []);
          this.tableLinkData = [];
          this.visible = false;
        });
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },
      async getDetailData(id) {
        this.loading = true;
        const data = await getSaleOrderDetail(id);
        this.loading = false;
        if (data) {
          this.form = data;
          this.detailData = data;
          this.$nextTick(() => {
            this.$refs.inventoryTabledetailRef &&
              this.$refs.inventoryTabledetailRef.putTableValue(data);
            this.$refs.typeListRef &&
              this.$refs.typeListRef.putTableValue(data.typedetailList);
          });
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .ele-dialog-form {
    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .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>