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" @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.number="form.carnum" placeholder="车牌号"></el-input>
        </el-form-item>
        <el-form-item label="物流联系人">
          <el-input v-model.number="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.number="form.remarks" placeholder="运费"></el-input>
        </el-form-item>
        <el-form-item label="单据日期">
          <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 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>
    <el-dialog append-to-body title="选择收货地址" :visible.sync="dialogAddress">
      <p style="color:red" class="mt-10">存在多个收货地址，请选择正确收货地址！</p>
      <el-table :data="rec_address">
        <el-table-column property="name" label="收货人" width="150"></el-table-column>
        <el-table-column property="phonenumber" label="联系电话" width="200"></el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}{{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="text" @click="selectAddress(scope.row)" size="small">选 择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </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,
      dialogAddress: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().getDay()}`
      },
      rules:{
        point:[
          { required: true, message: '请选择账期依据', trigger: 'change'},
        ],
      },
      enterpriseInfo:null,
      rec_address:[],
      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')
    },
    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);
      
      if (Array.isArray(res.data)) {
        this.dialogAddress = true
        this.rec_address = res.data
      } else {
        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}})
    },
    selectAddress (row) {
      this.form.rec_contactsid = row.rec_contactsid
      this.onSubmit()
    },
    selectChange () {
      this.$refs['addbill'].listData()
    },
    onClose () {
      this.$refs['ent'].form = this.$refs['logis'].form = {}
    }
  }
}
</script>