yiliangyiyun-pc/src/views/taskManagement/tranManagementTransportAdd.vue

// 创建运输任务
<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <h2 class="bg-left title">创建运输任务</h2>
      </el-col>
      <el-col :span="12" class="bg-right">
        <el-button
          class="bg-bottom"
          type="primary"
          size="small"
          @click="returnsales()"
          ><img
            width="6"
            height="10"
            style="vertical-align: bottom; margin-right: 3px"
            src="../../../public/img/lujing.png"
            alt=""
          />返回</el-button
        >
      </el-col>
    </el-row>
    <el-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <ws-info-table class="el-table">
        <el-form-item label="任务编号" span="1" prop="taskNo" class="forlist">
          <el-input
            v-model="deptBudgetList.taskNo"
            placeholder="请输入任务编号"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item prop="taskType" label="任务类型" span="1">
          <el-select
            v-model="deptBudgetList.taskType"
            placeholder="请输入任务类型"
            @change="selecttaskType"
          >
            <el-option
              v-for="item in taskType"
              :key="item.constKey"
              :label="item.constValue"
              :value="item.constValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="contractNo" label="合同编号/移库任务编号" span="1">
          <el-select
            v-model="deptBudgetList.contractNo"
            placeholder="请选择编号"
          >
            <el-option
              v-for="item in contractNoList"
              :key="item.constKey"
              :label="item.contractNo"
              :value="item.contractNo"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="goodsName" label="货名" span="1">
          <el-select
            v-model="deptBudgetList.goodsName"
            placeholder="请输入货名"
            @change="selectgoodsname"
          >
            <el-option
              v-for="item in goodnameList"
              :key="item.constKey"
              :label="item.constValue"
              :value="item.constValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重量（吨）" span="1" prop="weight">
          <el-input
          @input='weightchange'
            v-model="deptBudgetList.weight"
            placeholder="请输入重量"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
      </ws-info-table>
      <ws-info-table class="el-table">
        <div class="start-address" style="width : 36%">
          <el-radio-group @change='warehouseTypechange' v-model="deptBudgetList.warehouseType">
          <el-radio label="1"
            >常用仓库发货</el-radio
          >
          <el-radio label="2"
            >临时仓库发货</el-radio
          >
          </el-radio-group>
          <el-select
            v-model="deptBudgetList.sendWarehouse"
            placeholder="选择仓库"
            class="typeselect"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.constKey"
              :label="item.warehouseName"
              :value="item.warehouseName"
            ></el-option>
          </el-select>
        </div>
        <el-form-item label="始发地" span="1" class="start-address">
          <el-cascader
            :options="options_"
            v-model="selectedOptions"
            clearable
            size="large"
            placeholder="请选择始发地"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item
          label="始发地详细地址"
          span="1"
          prop="startDetailedAddress"
          class="bg-right start-address"
        >
          <el-input
            v-model="deptBudgetList.startDetailedAddress"
            placeholder="请输入始发地详细地址"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="收货库点"
          span="1"
          prop="contractNo"
          class="start-address"
          style="width: 36%"
        >
          <el-select
            v-model="deptBudgetList.receiveWarehouse"
            :disabled="warehouse"
            placeholder="请输入收货库点"
            style="width: 100%"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.constKey"
              :label="item.warehouseName"
              :value="item.warehouseName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="终到地"
          span="1"
          prop="contractNo"
          class="start-address"
        >
          <el-cascader
            :options="options_"
            v-model="selectedOptions1"
            clearable
            size="large"
            placeholder="请选择终到地"
            @change="handleChange1"
          />
        </el-form-item>
        <el-form-item
          label="终到地详细地址"
          span="1"
          prop="endDetailedAddress"
          class="bg-right start-address"
        >
          <el-input
            v-model="deptBudgetList.endDetailedAddress"
            placeholder="请输入终到地详细地址"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <div class="check-box">
          <span class="check-box">运输方式</span>
          <el-checkbox-group v-model="checkList" prop="tranType">
            <el-checkbox label="汽运"></el-checkbox>
            <el-checkbox label="火运"></el-checkbox>
            <el-checkbox label="船运"></el-checkbox>
          </el-checkbox-group>
        </div>
      </ws-info-table>

      <div
        style="width: 100%"
        class="position"
        v-for="(item, index) in deptBudgetList.tranProcessInfoList"
        :key="index"
      >
        <div class="driver">
          <span style='vertical-align: top;'>运输阶段{{ index + 1 }} {{ item.processNo }}</span>
          <img v-if='!endflag'
            width="22"
            height="22"
            class="add"
            @click="add(index)"
            src="../../../public/img/add.png"
            alt=""
          />
          <img
            width="22"
            height="22"
            class="del"
            @click="del(index)"
            src="../../../public/img/del.png"
            alt=""
          />
          <el-checkbox
          @change='engflagchange'
           class='endflag'
            v-if="index == deptBudgetList.tranProcessInfoList.length - 1"
            v-model="item.endFlag"
            :label="1"
            >最终阶段</el-checkbox
          >     
        </div>
        <ws-info-table>
          <el-form-item label="运输方式" span="1" prop="waterContent">
            <el-select
              v-model="item.tranType"
              placeholder="运输方式"
              @change="
                (val) => {
                  selecttaskwayList(val, index)
                }
              "
            >
              <el-option
                v-for="item in taskwayList"
                :key="item.constKey"
                :label="item.constValue"
                :value="item.constValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发货日期" span="1" prop="impurity">
            <ws-date-picker
              v-model="item.deliveryDateStart"
              type="date"
              placeholder="请选择发货日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="最晚到货日期" span="1" prop="bulkDensity">
            <ws-date-picker
              v-model="item.deliveryDateEnd"
              type="date"
              placeholder="请选择最晚到货日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <!-- 本阶段重量 -->
          <el-form-item
            label="本阶段运输重量（吨）"
            span="1"
            prop="bulkDensity"
          >
            <el-input
              v-model="deptBudgetList.weight"
              placeholder="请输入本阶段运输重量"
              size="small"
            ></el-input>
          </el-form-item>
        </ws-info-table>
        <ws-info-table>
          <el-form-item label="发货地区" span="1" prop="waterContent">
            <el-cascader
              :options="options_"
              v-model="item.selectedOptions"
              clearable
              size="large"
              placeholder="请选择发货地区"
              style="width: 200%"
              @change="
                (val) => {
                  handleChange3(val, index)
                }
              "
            />
          </el-form-item>
          <el-form-item label="发货地详细地址" span="1" prop="impurity">
            <el-input
              v-model="item.sendDetailedAddress"
              placeholder="请输入发货地详细地址"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="发货人" span="1" prop="bulkDensity">
            <el-input
              v-model="item.sender"
              placeholder="请输入发货人"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="发货人电话" span="1" prop="bulkDensity">
            <el-input
              v-model="item.senderPhone"
              placeholder="请输入发货人电话"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
        </ws-info-table>
        <ws-info-table>
          <el-form-item label="收货地区" span="1" prop="bulkDensity">
            <el-cascader
              :options="options_"
              v-model="item.selectedOptions1"
              clearable
              size="large"
              placeholder="请选择收货地区"
              style="width: 200%"
              @change="
                (val) => {
                  handleChange4(val, index)
                }
              "
            />
          </el-form-item>
          <el-form-item label="收货地详细地址" span="1" prop="impurity">
            <el-input
              v-model="item.receiveDetailedAddress"
              placeholder="请输入收货地详细地址"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货人" span="1" prop="bulkDensity">
            <el-input
              v-model="item.receiver"
              placeholder="请输入收货人"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货人电话" span="1" prop="bulkDensity">
            <el-input
              v-model="item.receiverPhone"
              placeholder="请输入收货人电话"
              maxlength="20"
              size="small"
            ></el-input>
          </el-form-item>
        </ws-info-table>
      </div>
    </el-form>
    <!-- 提交 -->
    <div style="text-align: right; padding: 10px" class="center">
      <el-button
        class="bg-bottom"
        type="primary"
        size="small"
        @click="submit(deptBudgetList)"
        >提交</el-button
      >
    </div>
  </div>
</template>
<script>
import { packList } from '@/model/contarct/index'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { addtrantask, getwarehousename, xialaNo } from '@/model/tasksport/index'
import WsUpload from '@/components/WsUpload'
import mapDrag from '@/components/mapdrag/mapdrag'
export default {
  name: 'viewSpareMoney',
  components: {
    WsUpload,
    mapDrag,
  },
  watch: {
    vesselId(val) {
      this.getVesselData()
    },
    isShow(val) {
      this.showType = val
    },
  },
  data() {
    let self = this
    return {
      checkList: [],
      deptBudgetList: {
        taskNo: '',
        totalStorage: 0,
        goodsName: '玉米',
        goodsNameKey: 1,
        warehouseType: '1',
        tranProcessInfoList: [
          {
            processNo: '',
            tranType: '汽运',
            tranTypeKey: '1',
            deliveryDateStart: '',
            deliveryDateEnd: '',
            weight: '',
            selectedOptions: [],
            selectedOptions1: [],
            sendPrivate: '',
            sendCity: '',
            sendArea: '',
            receivePrivate: '',
            receiveCity: '',
            receiveArea: '',
            sendDetailedAddress: '',
            receiveDetailedAddress: '',
            sender: '',
            receiver: '',
            senderPhone: '',
            receiverPhone: '',
            endFlag: '0',
          },
        ],
      },
      radio: '1',
      options_: regionData,
      heightData: '600px',
      zoom: 7,
      endflag:false,
      selectedOptions: [],
      selectedOptions1: [],
      window: '',
      district: null,
      goodnameList: [],
      listDate: { country: '中国', level: 'country', city: '' },
      citylist: [],
      taskType: [],
      taskwayList: [],
      contractNoList: [],
      compId: sessionStorage.getItem('ws-pf_compId'),
      mainReportAdd: {},
      appendixIdsAdd: '',
      warehouseList: [],
      size: 10,
      value1: '',
      unitList: [],
      name: '',
      age: '',
    }
  },
  activated() {
    this.loaddata()
    this.showType = this.isShow
  },
  computed: {
  weight:function(){
      var maxStorage = 0
      for(var i =0 ; i<this.deptBudgetList.tranProcessInfoList.length;i++){
        maxStorage += Number(this.deptBudgetList.tranProcessInfoList[i].weight)
      }
      return maxStorage
    },
    warehouse: function () {
      if (
        this.deptBudgetList.taskType == '销售出库' ||
        this.deptBudgetList.taskType == '贸易服务出库' ||
        this.deptBudgetList.taskType == '暂存出库'
      ) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    warehouseTypechange(){
        getwarehousename({
        compId: this.compId,
        warehouseType: this.deptBudgetList.warehouseType,
      })
        .toPromise()
        .then((response) => {
          this.warehouseList = response
        })
    },
    weightchange(e){
      this.deptBudgetList.tranProcessInfoList[0].weight=e
    },
    engflagchange(e){
      this.endflag=e
    },
    // 获取当前年月日
    getdate() {
      var date = new Date()
      var year = date.getFullYear() //获取完整的年份(4位)
      var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      var datetime = date.getDate() //获取当前日(1-31)
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      if (datetime < 10) {
        datetime = '0' + datetime
      }
      return year + mouth + datetime
    },
    // 随机验证码
    verifyinit() {
      var arr = []
      for (var i = 48; i < 123; i++) {
        if (i > 57 && i < 65) continue
        if (i > 90 && i < 97) continue
        arr.push(String.fromCharCode(i))
      }
      arr.sort(function () {
        return Math.random() - 0.5
      })
      arr.length = 4

      return arr.join('')
    },
    loaddata() {
      this.deptBudgetList.taskNo = 'YS' + this.getdate() + this.verifyinit()
      this.deptBudgetList.tranProcessInfoList[0].processNo=this.deptBudgetList.taskNo+'-1'
      // 货名
      packList({ constId: 'CON2' })
        .toPromise()
        .then((response) => {
          this.goodnameList = response
        })
      // 任务类型
      packList({ constId: 'TRAN3' })
        .toPromise()
        .then((response) => {
          this.taskType = response
        })
      // 运输方式
      packList({ constId: 'TRAN6' })
        .toPromise()
        .then((response) => {
          this.taskwayList = response
        })

      getwarehousename({
        compId: this.compId,
        warehouseType: this.deptBudgetList.warehouseType,
      })
        .toPromise()
        .then((response) => {
          this.warehouseList = response
        })
      xialaNo({
        compId: this.compId,
      })
        .toPromise()
        .then((response) => {
          this.contractNoList = response
        })
    },
    confirmPositioncity() {
      this.listDate.level = 'city'
      this.listDate.country = this.name
    },
    // 关闭 dialog时 处理文件url 初始化upload组件
    handleClose() {
      this.dialogViewSpareMoney = false
    },
    add(index) {
      console.log(index)
      this.deptBudgetList.tranProcessInfoList.push({
        processNo: this.deptBudgetList.taskNo+'-'+(index+2),
        tranType: '汽运',
        tranTypeKey: '1',
        deliveryDateStart: '',
        deliveryDateEnd: '',
        weight: this.deptBudgetList.tranProcessInfoList[this.deptBudgetList.tranProcessInfoList.length-1].weight,
        selectedOptions: [],
        selectedOptions1: [],
        sendPrivate: '',
        sendCity: '',
        sendArea: '',
        receivePrivate: '',
        receiveCity: '',
        receiveArea: '',
        sendDetailedAddress: '',
        receiveDetailedAddress: '',
        sender: '',
        receiver: '',
        senderPhone: '',
        receiverPhone: '',
        endFlag: '0',
      })
    },
    del(index) {
      if (this.deptBudgetList.tranProcessInfoList.length > 1) {
        this.deptBudgetList.tranProcessInfoList.splice(index, 1)
      }
    },
    handleChange(value) {
      this.selectedOptions = value
      this.deptBudgetList.startPrivate = CodeToText[value[0]]
      this.deptBudgetList.startCity = CodeToText[value[1]]
      this.deptBudgetList.startArea = CodeToText[value[2]]
    },
    handleChange1(value) {
      this.selectedOptions1 = value
      this.deptBudgetList.endPrivate = CodeToText[value[0]]
      this.deptBudgetList.endCity = CodeToText[value[1]]
      this.deptBudgetList.endArea = CodeToText[value[2]]
    },
    handleChange3(value, index) {
      this.deptBudgetList.tranProcessInfoList[index].sendPrivate =
        CodeToText[value[0]]
      this.deptBudgetList.tranProcessInfoList[index].sendCity =
        CodeToText[value[1]]
      this.deptBudgetList.tranProcessInfoList[index].sendArea =
        CodeToText[value[2]]
    },
    handleChange4(value, index) {
      this.deptBudgetList.tranProcessInfoList[index].receivePrivate =
        CodeToText[value[0]]
      this.deptBudgetList.tranProcessInfoList[index].receiveCity =
        CodeToText[value[1]]
      this.deptBudgetList.tranProcessInfoList[index].receiveArea =
        CodeToText[value[2]]
    },
    returnsales() {
      this.$router.push({ path: 'tranManagementTransport' })
    },
    selecttaskType(e) {
      for (var i = 0; i < this.taskType.length; i++) {
        if (this.taskType[i].constValue == e) {
          this.deptBudgetList.taskTypeKey = this.taskType[i].constKey
        }
      }
    },
    selecttaskwayList(e, index) {
      for (var i = 0; i < this.taskwayList.length; i++) {
        if (this.taskwayList[i].constValue == e) {
          this.deptBudgetList.tranProcessInfoList[index].tranTypeKey =
            this.taskwayList[i].constKey
        }
      }
    },
    selectgoodsname(e) {
      for (var i = 0; i < this.goodnameList.length; i++) {
        if (this.goodnameList[i].constValue == e) {
          this.deptBudgetList.goodsNameKey = this.goodnameList[i].constKey
        }
      }
    },
    onChange(files) {
      this.fileNum = files
      this.$refs.upload.handleSaveBill().then((res) => {
        console.log(files)
      })
    },

    submit() {
      this.$refs.deptBudgetList.validate((valid) => {
        if (valid) {
          for (
            var i = 0;
            i < this.deptBudgetList.tranProcessInfoList.length;
            i++
          ) {
            this.deptBudgetList.tranProcessInfoList[i].processNo =
              this.deptBudgetList.taskNo + (i + 1)
          }
          this.deptBudgetList.compId = sessionStorage.getItem('ws-pf_compId')
          this.deptBudgetList.tranType = this.checkList.toString()
          addtrantask(this.deptBudgetList)
            .toPromise()
            .then((response) => {
              this.$message.success('添加成功')
              this.deptBudgetList = {
                taskNo: '',
                totalStorage: 0,
                goodsName: '玉米',
                goodsNameKey: 1,
                warehouseType: '1',
                tranProcessInfoList: [
                  {
                    processNo: '',
                    tranType: '汽运',
                    deliveryDateStart: '',
                    deliveryDateEnd: '',
                    weight: '',
                    selectedOptions: [],
                    selectedOptions1: [],
                    sendPrivate: '',
                    sendCity: '',
                    sendArea: '',
                    receivePrivate: '',
                    receiveCity: '',
                    receiveArea: '',
                    sendDetailedAddress: '',
                    receiveDetailedAddress: '',
                    sender: '',
                    receiver: '',
                    senderPhone: '',
                    receiverPhone: '',
                  },
                ],
              }
              this.$router.push({ path: 'tranManagementTransport' })
            })
        } else {
          EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
          return false
        }
      })
    },
    resetForm(deptBudgetList) {
      this.$refs[deptBudgetList].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.position {
  position: relative;
  border: 1px solid #5473e8;
  border-radius: 4px;
  margin-top: 20px;
  background: #f6f7fc;
  border-left: 5px solid #5473e8;
}
/deep/.position .ws-info-table .el-form-item {
  width: 25%;

  height: 50px;
}
/deep/.position .el-select {
  width: 100%;
}
/deep/.position .ws-info-table .el-form-item .el-form-item__label,
/deep/.position .ws-info-table .el-form-item .el-form-item__content {
  background: #f6f7fc;
  font-size: 14px;
  color: #8890b1;
}
.typeselect{
  width:42%;
  margin-left:32px;
}
.del,
.add {
  cursor: pointer;
  margin-left: 10px;
}
.el-checkbox-group {
  font-size: 0;
  float: right;
  margin-left: 25px;

}
.check-box {
  float: left;
  font-size: 14px;
  color: #8890B1;
}
.el-checkbox__label{
  color: #8890B1;
}
.el-form {
  padding: 0 10%;
}
.ws-info-table {
  border: none;
}
/deep/.ws-info-table .el-form-item {
  border-right: 1px solid #cdd2dc;
  border-bottom: 1px solid #cdd2dc;
}
.readonly {
  position: relative;
}
.title {
  position: relative;
}
.title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 30px;
  background: #5473e8;
  position: absolute;
  left: 0;
}
//去边框
/deep/.el-form-item {
  border-right: 0px;
  border-bottom: 0px;
}
.el-form {
  margin-top: 50px;
}
.endflag{
  vertical-align: top;
}
.el-col {
  background: #f6f7fc;
}
.bg-left {
  padding-left: 30px;
}
.bg-right {
  padding-right: 10px;
  text-align: right;
}
.bg-bottom {
  margin: 15px 0px;
}
.el-radio,
.el-radio__input {
  margin-top: 11px;
  margin-left: 11px;
  width: 93px;
}
.driver {
  margin-top: 10px;
  font-weight: bold;
  margin-left: 20px;
  color: #5473E8;
  font-size: 16px;
}
/deep/.nei {
  .ws-info-table {
    border: none;
  }
  .el-form-item {
    width: 33.3333%;
    border: none;
    .el-form-item__label {
      background: transparent;
      border: none;
    }
    .el-form-item__content {
      border: none;
    }
  }
}
/deep/.el-table--border:after, /deep/.el-table--group:after, /deep/.el-table:before {
  background:transparent;
}
//输入框标题
/deep/.ws-info-table .el-form-item .el-form-item__label {
  background: #ffffff;
  width: min-content;
  font-size: 14px;
  color: #8890b1;
}
//表单子项
/deep/.ws-info-table .el-form-item {
  width: 20%;
  border: none;
  height: 50px;
}
//输入框
/deep/.ws-info-table .el-form-item .el-form-item__content {
  border: none;
  font-size: 14px;
  color: #8890b1;
}
/deep/ .el-input--small .el-input__inner {
  font-size: 14px;
  color: #8890b1;
}
.el-form-item.start-address.el-form-item--small {
  width: 31.9%;
}
.el-cascader {
  width: 100%;
}
.el-form{
      height: 73vh;
    overflow: scroll;
}
</style>