kd-aiot-frontend-wt/src/views/bpm/handleTask/components/saleOrder/invoice/addInvoiceDialog.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="changeActive(item)"
          >
            {{ 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 :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="选择订单"
              prop="orderNo"
              style="margin-bottom: 22px"
            >
              <el-input
                clearable
                v-model="form.orderNo"
                @click.native="handleOrderBtn"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="受托发货单" style="margin-bottom: 22px">
              <el-input
                clearable
                v-model="form.entrustedCode"
                @click.native="handleEntrustedReceive"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="客户名称"
              prop="contactName"
              style="margin-bottom: 22px"
            >
              <el-input v-model="form.contactName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="客户联系人"
              prop="linkName"
              style="margin-bottom: 22px"
            >
              <el-input
                clearable
                v-model="form.linkName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          
          <el-col :span="12">
            <el-form-item
              label="客户电话"
              prop="linkPhone"
              style="margin-bottom: 22px"
            >
              <el-input
                clearable
                v-model="form.linkPhone"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="车辆号"
              prop="carNo"
              style="margin-bottom: 22px"
            >
              <el-input clearable v-model="form.carNo" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="收货地址"
              prop="receiveAddress"
              style="margin-bottom: 22px"
            >
              <el-input
                clearable
                v-model="form.receiveAddress"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="sendFiles" label="发货附件">
              <fileMain v-model="form.sendFiles"></fileMain>
<!--              <fileUpload-->
<!--                v-model="form.sendFiles"-->
<!--                module="main"-->
<!--                :showLib="false"-->
<!--                :limit="10"-->
<!--              />-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="repliedFiles" label="回执附件">
              <fileMain v-model="form.repliedFiles"></fileMain>
<!--              <fileUpload-->
<!--                v-model="form.repliedFiles"-->
<!--                module="main"-->
<!--                :showLib="false"-->
<!--                :limit="10"-->
<!--              />-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <headerTitle title="物品清单" style="margin-top: 30px"></headerTitle>
      <inventoryTable
        :pricingWay="form.pricingWay"
        :entrustedCode="form.entrustedCode"
        ref="inventoryTableref"
        :orderId="form.orderId"
        v-show="taskDefinitionKey != 'salesmanUploadReceipt'"
      ></inventoryTable>
      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="competAnalysisListcolumns"
        :toolkit="[]"
        :datasource="form.productList"
        row-key="id"
        v-show="taskDefinitionKey == 'salesmanUploadReceipt'"
      >
        <!-- <template v-slot:toolbar>
        <div class="headbox">
        <span class="amount">总计：{{detailData.totalAmount}}元</span>
        <span class="amount">应付金额：{{detailData.payAmount}}元</span>
      </div>
      </template> -->
        <template v-slot:technicalDrawings="{ row }">
          <fileMain v-model="row.technicalDrawings" type="view"></fileMain>
<!--          <div v-if="row.technicalDrawings && row.technicalDrawings?.length">-->
<!--            <el-link-->
<!--              v-for="link in row.technicalDrawings"-->
<!--              :key="link.id"-->
<!--              type="primary"-->
<!--              :underline="false"-->
<!--              @click="downloadFile(link)"-->
<!--            >-->
<!--              {{ link.name }}</el-link-->
<!--            >-->
<!--          </div>-->
        </template>
      </ele-pro-table>
      <orderListDialog
        ref="orderListDialogRef"
        @changeParent="changeOrder"
      ></orderListDialog>
      <!--  受托发货单  -->
      <entrusted-receive-dialog
        :entrusted-receive-dialog-flag.sync="entrustedReceiveDialogFlag"
        v-if="entrustedReceiveDialogFlag"
        @changeParent="getInfo"
        ref="entrustedReceiveDialogRef"
      ></entrusted-receive-dialog>
    </div>
    <detailDialog
      type="sourceBizNo"
      :businessId="form.docNo"
      v-if="activeComp == 'outBound'"
    ></detailDialog>
    <!-- <detailDialog type="sourceBizNo" :businessId="form.docNo" v-if="activeComp == 'outBound'"></detailDialog> -->
  </div>
</template>

<script>
  import fileUpload from '@/components/upload/fileUpload';
  // import detailDialog from '@/views/bpm/handleTask/components/outBound/detailDialog.vue'
  import detailDialog from '@/views/bpm/outgoingManagement/details.vue';
  import dictMixins from '@/mixins/dictMixins';

  import {
    getSaleOrderDetail,
    getSendSaleOrderrecordDetail
  } from '@/api/bpm/components/saleManage/saleorder';
  import { getFile } from '@/api/system/file';

  import inventoryTable from './inventoryTable.vue';
  import orderListDialog from './orderListDialog.vue';
  import { copyObj } from '@/utils/util';
  import EntrustedReceiveDialog from '@/views/bpm/handleTask/components/saleOrder/invoice/entrustedReceiveDialog.vue';
  import fileMain from "@/BIZComponents/addDoc/index.vue";

  export default {
    mixins: [dictMixins],

    components: {
      fileMain,
      EntrustedReceiveDialog,
      fileUpload,
      inventoryTable,
      orderListDialog,
      detailDialog
    },
    data() {
      let formDef = {
        id: '',
        contractId: '',
        sendFiles: [],
        repliedFiles: [],
        contractName: '',
        receiveAddress: '',
        pricingWay: 1,
        carNo: '',
        carId: '',
        linkName: '',
        linkPhone: '',
        orderNo: '',
        orderId: ''
      };

      return {
        activeComp: 'main',
        tabOptions: [{ key: 'main', name: '发货单详情' }],
        detailData: {},
        payWayOptions: [],
        delDetailIds: [],
        linkNameOptions: [],
        visible: false,
        entrustedReceiveDialogFlag: false,
        title: '',
        row: {},
        activeName: 'base',
        formDef,
        form: copyObj(formDef),
        tableBankData: [],
        tableLinkData: [],
        // 组织机构树形结构数据
        groupTreeData: [],
        groupData: [],
        rules: {
          partaName: [
            { required: true, message: '请选择客户名称', trigger: 'change' }
          ],
          linkName: [
            { required: true, message: '请输入', trigger: ['blur', 'change'] }
          ],
          orderNo: [{ required: true, message: '请选择', trigger: 'change' }]
        },

        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        competAnalysisListcolumns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 200,
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            align: 'center'
          },
          {
            width: 120,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            width: 200,
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            width: 160,
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            align: 'center'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            width: 200,
            prop: 'customerMark',
            label: '客户代号',
            slot: 'customerMark',
            align: 'center'
          },
          {
            width: 200,
            prop: 'warehouseName',
            label: '仓库名称',
            slot: 'warehouseName',
            align: 'center'
          },

          {
            width: 120,
            prop: 'totalCount',
            label: '数量',
            slot: 'totalCount',
            align: 'center'
          },
          {
            width: 120,
            prop: 'measuringUnit',
            label: '计量单位',
            slot: 'measuringUnit',
            align: 'center'
          },
          {
            width: 120,
            prop: 'singleWeight',
            label: '单重',
            slot: 'singleWeight',
            align: 'center'
          },
          {
            width: 100,
            prop: 'receiveTotalWeight',
            label: '收货总重',
            slot: 'receiveTotalWeight',
            align: 'center'
          },
          {
            width: 200,
            prop: 'sendTotalWeight',
            label: '发货总重',
            slot: 'sendTotalWeight',
            align: 'center',
            headerSlot: 'headerTotalCount'
          },

          {
            width: 100,
            prop: 'increaseTotalWeight',
            label: '增重重量',
            slot: 'increaseTotalWeight',
            align: 'center'
          },
          {
            width: 100,
            prop: 'weightUnit',
            label: '重量单位',
            slot: 'weightUnit',
            align: 'center'
          },
          {
            width: 160,
            prop: 'pricingWay',
            label: '计价方式',
            slot: 'pricingWay',
            align: 'center',
            formatter: (row, column) => {
              return row.pricingWay == 1 ? '按数量计费' : row.pricingWay == 2 ? '按重量计费':'';

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

          {
            width: 120,
            prop: 'deliveryDays',
            label: '交期(天)',
            slot: 'deliveryDays',
            align: 'center'
          },
          {
            width: 200,
            prop: 'guaranteePeriod',
            label: '有效期',
            slot: 'guaranteePeriod',
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
              );
            },
            align: 'center'
          },
          // {
          //   width: 120,
          //   prop: 'guaranteePeriodUnitCode',
          //   label: '',
          //   slot: 'guaranteePeriodUnitCode'
          // },
          {
            width: 120,
            prop: 'technicalAnswerName',
            label: '技术答疑人',
            slot: 'technicalAnswerName',
            align: 'center'
          },
          {
            width: 220,
            prop: 'technicalParams',
            label: '技术参数',
            slot: 'technicalParams',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technicalDrawings',
            label: '技术图纸',
            slot: 'technicalDrawings',
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.guaranteePeriod || '') + _row.guaranteePeriodUnitName
              );
            },
            align: 'center'
          },
          {
            width: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark',
            align: 'center'
          }
        ]
      };
    },
    props: {
      businessId: {
        default: ''
      },
      taskDefinitionKey: {}
    },
    created() {
      this.getSendSaleOrderDetail(this.businessId);
      if (this.taskDefinitionKey == 'salesmanUploadReceipt') {
        this.tabOptions.push({ key: 'outBound', name: '出库单' });
      }
    },
    methods: {
      changeActive(item) {
        this.activeComp = item.key;
        this.$emit('activeCompChange', item.key);
      },
      //选择订单回调
      changeOrder(obj) {
        this.form = Object.assign({}, this.form, {
          orderId: obj.id,
          orderNo: obj.orderNo
        });
        this.getSaleOrderDetail(obj.id);
      },
      //获取订单详情
      async getSaleOrderDetail(id) {
        this.loading = true;
        const data = await getSaleOrderDetail(id);
        this.loading = false;
        if (data) {
          this.$nextTick(() => {
            let {
              partaId,
              partaName,
              partaTel,
              orderNo,
              id,
              partaLinkName,
              receiveAddress,
              productList,
              totalAmount,
              payAmount
            } = data;
            if (productList && productList.length > 0) {
              productList.forEach((v) => {
                v.orderTotalCount = v.totalCount;
              });
            }
            this.form = Object.assign({}, this.form, {
              contactId: partaId,
              contactName: partaName,
              linkName: partaLinkName,
              linkPhone: partaTel,
              orderNo,
              orderId: id,
              receiveAddress,
              productList,
              totalAmount,
              payAmount
            });
            this.$refs.inventoryTableref &&
              this.$refs.inventoryTableref.putTableValue(productList);
          });
        }
      },

      //发货单详情
      async getSendSaleOrderDetail(id) {
        this.loading = true;
        const data = await getSendSaleOrderrecordDetail(id);
        this.loading = false;
        if (data) {
          this.form = data;
          this.form.pricingWay = data?.saleOrder?.pricingWay;
          data.productList.forEach
          this.$nextTick(() => {

            this.$refs.inventoryTableref &&
              this.$refs.inventoryTableref.putTableValue(data.productList);
          });
        }
      },
      //选择受托收货单弹框
      handleEntrustedReceive(e) {
        if (e.target.nodeName == 'I') {
          this.form = Object.assign({}, this.form, {
            carNo: '',
            carId: '',
            linkName: '',
            linkPhone: '',
            orderNo: '',
            orderId: '',
            contactId: '',
            contactName: '',
            entrustedCode: '',
            entrustedId: '',
            sendNoteNo: '',
            pricingWay: ''
          });
          this.$refs.inventoryTableref &&
            this.$refs.inventoryTableref.putTableValue([]);
          return;
        }
        this.searchParams = {
          orderId: this.form.orderId
        };
        this.entrustedReceiveDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.entrustedReceiveDialogRef.init();
        });
      },
      //获取受托收货单数据回调
      async getInfo(row) {
        const data = await getPSaleEntrustedReceiveDetailAPI(row.id);
        this.$nextTick(() => {
          let {
            carNo,
            carId,
            code,
            id,
            linkName,
            linkPhone,
            orderId,
            orderNo,
            productList,
            contactId,
            contactName,
            pricingWay = data?.saleOrder?.pricingWay
          } = data;
          if (productList && productList.length > 0) {
            productList.forEach((v) => {
              v.orderTotalCount = v.orderTotalCount || v.totalCount;
            });
          }
          this.form = Object.assign({}, this.form, {
            contactId,
            contactName,
            linkName,
            linkPhone,
            orderNo,
            orderId,
            productList,
            carNo,
            carId,
            pricingWay,
            entrustedCode: code,
            entrustedId: id
          });
          productList.forEach((item) => {
            item.id = '';
          });
          this.$refs.inventoryTableref &&
            this.$refs.inventoryTableref.putTableValue(productList, code);
        });
      },
      //选择订单弹框
      handleOrderBtn() {
        if (e.target.nodeName == 'I') {
          this.form = Object.assign({}, this.form, {
            contactId: '',
            contactName: '',
            carNo: '',
            carId: '',
            linkName: '',
            linkPhone: '',
            orderNo: '',
            orderId: '',
            pricingWay: '',
            entrustedCode: '',
            entrustedId: ''
          });
          this.$refs.inventoryTableref &&
            this.$refs.inventoryTableref.putTableValue([]);
          return;
        }

        let item = {
          id: this.form.orderId
        };
        this.$refs.orderListDialogRef.open(item);
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },
      // //打开新增编辑弹框
      // async open(type, row, orderId) {
      //   this.title = type === 'add' ? '新增发货单' : '修改';
      //   this.row = row;
      //   this.visible = true;
      //   if (orderId) {
      //     this.getSaleOrderDetail(orderId);
      //   }
      //   if (row && row?.id) {
      //     this.getSendSaleOrderDetail(row?.id);
      //   }

      //   if (type == 'add') {
      //     this.isUpdate = false;
      //   } else {
      //     this.isUpdate = true;
      //   }
      // },

      salesmanChange(val, info) {
        this.otherForm.salesmanName = info.name;
      },
      settlementModeChange(info) {
        this.form.settlementModeName = info.dictValue;
      },
      ifChiefChange(value, idx) {
        if (value === 1) {
          this.tableLinkData.forEach((e) => (e.ifChief = 0));
          this.tableLinkData[idx].ifChief = 1;
        }
      },

      getValidate() {
        return Promise.all([
          new Promise((resolve, reject) => {
            this.$refs.form.validate((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          }),
          new Promise((resolve, reject) => {
            if (this.taskDefinitionKey == 'salesmanUploadReceipt') {
              resolve(true);
              return;
            }
            this.$refs.inventoryTableref.validateForm((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          })
        ]);
      },
      async getTableValue() {
        try {
          await this.getValidate();
          // 表单验证通过，执行保存操作
          this.loading = true;
          this.form.repliedFiles = this.form.repliedFiles || [];
          this.form.replied = this.form.repliedFiles.length > 0 ? 1 : 0;
          let commitData = Object.assign({}, this.form, {
            productList: this.$refs.inventoryTableref.getTableValue()
          });

          return commitData;
        } catch (error) {
          console.log(error);
          // 表单验证未通过，不执行保存操作
        }
      },
      cancel() {
        this.$nextTick(() => {
          this.activeName = 'base';
          // 关闭后，销毁所有的表单数据
          this.$refs['otherForm'] && this.$refs['otherForm'].resetFields();
          this.$refs['formRef'] && this.$refs['formRef'].resetFields();
          this.$store.commit('order/clearUserData');
          this.form = copyObj(this.formDef);
          this.visible = false;
        });
      }
    }
  };
</script>
<style scoped lang="scss">
  .TotalAmount {
    font-size: 16px;
    padding-right: 30px;
  }

  .headbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .amount {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
</style>