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

<template>
  <ele-modal
  custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    width="80%"
    @close="cancel"
  >
  
  <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: 22px"
            >
            <el-input
                clearable
                v-model="form.orderNo"
                @click.native="handleOrderBtn"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item
              label="客户名称"
              prop="contactName"
              style="margin-bottom: 22px"
            >
            <span>{{form.contactName}}</span>
            </el-form-item>
            <el-form-item
              label="客户联系人"
              prop="linkName"
              style="margin-bottom: 22px"
            >
            <el-input
                clearable
                v-model="form.linkName"
                placeholder="请输入"
              />
            </el-form-item>
          
            <el-form-item prop="sendFiles" label="发货附件">
                <fileUpload
                  v-model="form.sendFiles"
                  module="main"
                  :showLib="false"
                  :limit="10"
                />
              </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-form-item
              label="订单编码"
              prop="orderNo"
              style="margin-bottom: 22px"
            >
            <span>{{form.orderNo}}</span>
              
            </el-form-item> -->

           
              <el-form-item
              label="客户电话"
              prop="linkPhone"
              style="margin-bottom: 22px"
            >
            <el-input
                clearable
                v-model="form.linkPhone"
                placeholder="请输入"
              />
            </el-form-item>
              <el-form-item
              label="客户收货地址"
              prop="receiveAddress"
              style="margin-bottom: 22px"
            >
            <el-input
                clearable
                v-model="form.receiveAddress"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>

      
    
      <headerTitle title="产品清单" style="margin-top:30px;"></headerTitle>
     <inventoryTable  ref="inventoryTableref" :orderId="form.orderId"></inventoryTable>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
    <orderListDialog ref="orderListDialogRef" @changeParent="changeOrder"></orderListDialog>
  </ele-modal>
</template>

<script>
import { emailReg, phoneReg,numberReg } from 'ele-admin';
import {acceptUnpackoptions} from '@/enum/dict';
import fileUpload from '@/components/upload/fileUpload';
import dictMixins from '@/mixins/dictMixins';
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import personSelect from '@/components/CommomSelect/person-select.vue';
import parentList from '@/views/saleManage/contact/components/parentList.vue'
import { getDetail} from '@/api/contractManage/contractBook';
import { getSaleOrderDetail, UpdateInformation, addInformation,deleteInformation,updateStatus} from '@/api/saleManage/saleorder';
import { addSendInformation,UpdateSendInformation,getSendSaleOrderrecordDetail} from '@/api/saleManage/saleordersendrecord';
import {getcontactlink} from '@/api/saleManage/businessFollow';
import inventoryTable from './inventoryTable.vue';
import {listOrganizations} from '@/api/system/organization';
import orderListDialog from './orderListDialog.vue';
import {copyObj} from '@/utils/util';


export default {
    mixins: [dictMixins],
    components: {
      fileUpload,
      deptSelect,
      inventoryTable,
      orderListDialog,
      parentList,
      personSelect
    },
    data() {
      let formDef = {
          id:'',
          contractId: '',
          sendFiles:[],
          contractName: '',
          receiveAddress:'',
          carNo:'',
          carId:'',
          linkName:'',
          linkPhone:'',
          orderNo:'',
          orderId:''
        };
   
      return {
        detailData:{},   
        payWayOptions:[],
        delDetailIds:[],
        linkNameOptions:[],
        acceptUnpackoptions,
        visible: false,
        title: '',
        row: {},
        activeName: 'base',
        formDef,
        form: copyObj(formDef),
        tableBankData: [],
        tableLinkData: [],
     // 组织机构树形结构数据
       groupTreeData: [],
       groupData:[],
        rules: {        
          partaName: [
            { required: true, message: '请选择客户名称', trigger: 'change' }
          ],
        },
     
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
      };
    },
    computed: {
     
      allcountAmount(){
        return this.$store.state.order.allcountAmount
      }
    },
   
    methods: {

  
       //选择订单回调
       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.$nextTick(()=>{
            this.form = data;
            this.$refs.inventoryTableref&&this.$refs.inventoryTableref.putTableValue(data.productList)
          })          
        }
      },

   //更新联系人数据
   async getLinkInfo(contactId) {
      const data = await getcontactlink({contactId});
         if(data&&data?.length){
           this.linkNameOptions=data
         }
    },
      selectFocus(){
   if(this.linkNameOptions.length===0){
    return this.$message.error('请先选择名称')
   }
    },

 
  
    handHead(){
      
      let item={
          id:this.form.partbLinkId
        }
        this.$refs.headRef.open(item)
     },



  
    

    
      //选择订单弹框
       handleOrderBtn(){
         let item = {
           id: this.form.orderId
      }
        this.$refs.orderListDialogRef.open(item)
    },

    
      //打开新增编辑弹框
      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);
                }
              });
            })
          
          ]);
     },
      async save() {
        try {
           await this.getValidate();
           // 表单验证通过，执行保存操作
           this.loading = true;
      
        if (!this.isUpdate) {
          delete this.form.id;
        } 
        let commitData=Object.assign({},this.form,{
          productList:this.$refs.inventoryTableref.getTableValue()
        })

        if (this.isUpdate) {
          UpdateSendInformation(commitData)
            .then((res) => {
              this.loading = false;
              this.$message.success("修改成功");
              this.cancel();
              this.$emit('done');
            })
            .catch((e) => {
              //this.loading = false;
            });
        } else {
          addSendInformation(commitData)
            .then((res) => {
              this.loading = false;
              this.$message.success("新增成功");
              this.cancel();
              this.$emit('done');
            })
            .catch((e) => {
              //this.loading = false;
            });
          }
        } 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>