yos_web/src/HDrpManagement/logistics/modules/add.vue

<template>
  <div>
    <el-button type="primary" size="small" @click="drawer = true">新建物流单</el-button>
    <el-drawer
    title="新建物流单"
    :visible.sync="drawer"
    direction="rtl"
    size="80%"
    append-to-body
    @close="onClose">
    <div class="drawer__panel">
      <p class="normal-title normal-margin">基础信息</p>
      <el-form :inline="true" :model="form" class="demo-form-inline" size="small" label-width="100px" label-position="right">
        <el-form-item label="企业名称" prop="">
          <enterprise :qiyi="true" ref="ent" @rowClick="entRowClick"></enterprise>
        </el-form-item>
        <el-form-item label="物流公司">
          <logisticcom ref="logis" :ID="true" @logisticRowClick="logisticRowClick"></logisticcom>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="form.billno" placeholder="物流单号"></el-input>
        </el-form-item>
        <el-form-item label="寄付方式">
          <el-select v-model="form.paytype" placeholder="请选择" @change="selectChange">
            <el-option
              label="到付"
              value="到付">
            </el-option>
            <el-option
              label="预付"
              value="预付">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.carnum" placeholder="车牌号"></el-input>
        </el-form-item>
        <el-form-item label="物流联系人">
          <el-input v-model="form.logiscontact" placeholder="物流联系人"></el-input>
        </el-form-item>
        <el-form-item label="物流电话">
          <el-input v-model.number="form.logisphone" placeholder="物流电话"></el-input>
        </el-form-item>
        <el-form-item label="运费">
          <el-input v-model.number="form.freightamount" placeholder="运费"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remarks" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item label="单据日期" prop="billdate">
          <el-date-picker
            v-model="form.billdate"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="单据日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="mt-10">
        <div>
          <p class="normal-title inline-16">添加发货单</p>
          <el-button type="text" size="mini" @click="addMoreBill">{{setcol === 12?'关闭选择':'添加发货单'}}</el-button>
        </div>
        <el-row :gutter="10">
          <el-col :span="setcol">
            <dispatch-table ref="dislist"></dispatch-table>
          </el-col>
          <el-col :span="24 - setcol">
            <add-disbill v-if="drawer" ref="addbill" :data="enterpriseInfo" :paytype="form.paytype" @onConfirm="onConfirm"></add-disbill>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="fixed__btn__panel">
      <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
      <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">提交</el-button>
    </div>
    </el-drawer>
  </div>
</template>
<script>
import dispatchTable from './dispatchTable.vue'
import enterprise from './enterprise'
import logisticcom from '@/template/selectLogisticcom/index.vue'
import addDisbill from '@/template/logisyticCanUseDisBill/index.vue'
export default {
  components:{
    dispatchTable,
    enterprise,
    addDisbill,
    logisticcom
  },
  data () {
    return {
      drawer:false,
      visible:false,
      setcol:24,
      form:{
        "freightamount": "",
        "logisticno": "",
        "paytype": "",
        "remarks": "",
        "sa_dispatchids": [],
        "sa_logiscompid": 0,
        "sa_logisticsid": 0,
        "sys_enterpriseid": '',
        "carnum":"",
        "logisphone":"",
        "logiscontact":"",
        "rec_contactsid":'',
        billdate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
      },
      rules:{
        point:[
          { required: true, message: '请选择账期依据', trigger: 'change'},
        ],
      },
      enterpriseInfo:null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 3600 * 1000;
        }
      }
    }
  },
  methods:{
    addMoreBill () {
      if (this.enterpriseInfo === null) return this.$message({
        message:'请先选择企业信息',
        type:'error'
      })
      this.setcol === 12?this.setcol = 24 : this.setcol = 12
      this.$refs['addbill'].listData()
    },
    entRowClick (row) {
      this.enterpriseInfo = row
      this.form.sys_enterpriseid = row.sys_enterpriseid
    },
    logisticRowClick (row) {
      console.log(row)
      this.form.sa_logiscompid = row.sa_logiscompid
    },
    onConfirm (data) {
       function unique(arr, uniId){
        const res = new Map();
        return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
      }
      this.$refs['dislist'].tableData = unique([...this.$refs['dislist'].tableData,...data],'billno')
      this.form.remarks = this.$refs['dislist'].tableData[0].remarks
    },
    async onSubmit () {
      this.form.sa_dispatchids = this.$refs['dislist'].tableData.map(e=>{
        return e.sa_dispatchid
      })
      const res = await this.$api.requested({
        "id": "202212004124804",
        "content": this.form
      })
      console.log(res);
      this.tool.showMessage(res,()=>{
        this.drawer = false
        this.dialogAddress = false
        this.$emit('onSuccess')
        this.form = {}
        this.$router.push({path:'/logisticsdetail',query:{id:res.data.sa_logisticsid,rowindex:res.data.rowindex}})
      })
    },
    selectChange () {
      this.$refs['addbill'].listData()
    },
    onClose () {
      this.$refs['ent'].form = this.$refs['logis'].form = {}
    }
  }
}
</script>