icore-pass/src/views/appoint/components/saleContract/addSaleOrderSend.vue

<template>
  <div class="addSaleOrderSend">
    <page-title>新增销售订单派车</page-title>
    <!-- 销售订单表的数据 -->
    <div class="saleOrder">
      <dilTable
        v-bind.sync="option"
        @radio-change="currentRadioChange"
      ></dilTable>
    </div>
    <!-- 表单选择车辆和线路 -->
    <div class="from">
      <div class="line">
        <span class="text">线路</span>
        <el-input
          v-model="lineName"
          placeholder="请选择线路"
          disabled
        ></el-input>
        <el-button type="primary" @click="onClick(1)">浏览</el-button>
      </div>
      <div class="vehicle">
        <span class="text">车辆</span>
        <el-button type="primary" @click="onClick(2)">浏览</el-button>
        <span class="span"></span>
      </div>
    </div>

    <!-- 派车表格 -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
          <template slot="scope" v-if="item.label !== '重量'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货地址'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货日期'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货姓名'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货方电话'">
            <span>{{ item.label }}</span>
          </template>
          <!-- 插入输入框 -->
          <template slot-scope="scope">
            <template v-if="item.slot">
              <!-- 物资重量 -->
              <template v-if="item.prop == 'orderPlanWeight'">
                <el-input
                  class="textinput"
                  @input="onInput"
                  placeholder="请输入内容(必填)"
                  v-model.number="scope.row.orderPlanWeight"
                ></el-input>
              </template>

              <!-- 收货地址id -->
              <template v-if="item.prop == 'saleShipperAddressName'" >
                <el-input
                  style="width: 200px"
                  v-model="scope.row.saleShipperAddressName"
                  disabled
                >
                </el-input>
                <el-button
                  type="primary"
                  placeholder="请输入内容(必填)"
                  @click="select(scope.$index,3)"
                  >浏览</el-button
                >
              </template>
              <!-- 收货日期 -->
              <template v-if="item.prop == 'saleDateOfReceipt'">
                 <el-date-picker
                  class="textinput3"
                  type="date"
                  v-model.number="scope.row.saleDateOfReceipt"
                ></el-date-picker>
              </template>
              <!-- 收货客户 -->
              <template v-if="item.prop == 'saleOrderConsignee'">
                <el-input
                  class="textinput4"
                  placeholder="请输入内容(非必填)"
                  v-model.number="scope.row.saleOrderConsignee"
                ></el-input>
              </template>
              <!-- 收货客户电话号码 -->
              <template v-if="item.prop == 'saleOrderConsigneeTel'">
                <el-input
                  class="textinput5"
                  placeholder="请输入内容(非必填)"
                  v-model.number="scope.row.saleOrderConsigneeTel"
                  @input="onInput"
                ></el-input>
              </template>
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="copyRow(scope.$index,scope.row)"
              type="text"
              size="big"
            >
              复制
            </el-button>
            <el-button
              @click="deleteRow(scope.$index)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 线路模态框 -->
    <el-drawer 
      :visible.sync="drawer" 
      :destroy-on-close="false"
      direction="rtl"
      size="40%"
      :wrapperClosable="false"
      modal
      close-on-press-escape
    
    >
      <el-input
        placeholder="请输入内容"
        v-model="lineText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="selectClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="AddClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的路线 -->
        <dilTable
          v-bind.sync="line"
          @radio-change="currentRadioChange5"
        ></dilTable>
      </div>
    </el-drawer>
    <!-- 车辆模态框 -->
    <el-drawer 
      :visible.sync="truckDrawer" 
      :destroy-on-close="false"
      direction="rtl"
      size="40%"
      :wrapperClosable="false"
      modal
      close-on-press-escape
    
    >
      <el-input
        placeholder="请输入内容"
        v-model="truckText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="selectTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="AddTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的车辆 -->
        <dilTable
          v-bind.sync="truck"
          @selection-change="currentRadioChange1"
        ></dilTable>
      </div>
    </el-drawer>
    <!-- 收货地址的模态框 -->
    <el-drawer 
      :visible.sync="addressDrawer" 
      :destroy-on-close="false"
      direction="rtl"
      size="40%"
      :wrapperClosable="false"
      modal
      close-on-press-escape
    
    >
      <el-input
        placeholder="请输入内容"
        v-model="addressText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="selectAddressClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="addAddressClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的收货地址 -->
        <dilTable
          v-bind.sync="Address"
          @radio-change="currentRadioChange2"
        ></dilTable>
      </div>
    </el-drawer>

    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure">确定</el-button>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { getCookie } from "@/utils/util.js";
import { sjTime,isNumber } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      //线路名称
      lineName:null,
      lineId:null,
      //线路表格单选缓存数据的
      cacheLine:[],
      //已经选择车辆物资信息
      selectionList:[],
      //销售订单物资信息
      option: {
        // 表格请求数据的地址
        requestUrl:"",
        // 控制显示当选列
        selectionType: "radio",
        isPagination: false,
      },
      //当前选中的物资id
      materialId: null,
      //当前选中的物资名称
      materialName: null,
      //选中的线路名称
      lineName: null,
      //选中的线路id
      lineId: null,
      //是否打开选择线路的模态框
      drawer:false,
      //是否打开选择车辆的模态框
      truckDrawer:false,
      //是否打开收货地址的模态框
      addressDrawer:false,
      //线路的表格
      line: {
        requestUrl: "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3",
        selectionType: "radio",
      },
      //车辆的表格
      truck: {
        requestUrl: "",
        selectionType: "select",
      },
      //收货地址的表格
      Address: {
        requestUrl: "/api/v1/ams/getAddressDeliveryAddress?apiId=255",
        selectionType: "radio",
      },
      addressText:null,
      //线路表格的框计算输入的值
      lineText:null,
      tableTop: [
        {
          prop: "capacityNumber",
          label: "车牌号",
          width: "100",
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "carrierName",
          label: "承运商",
          width: "220",
        },
        {
          prop: "lineName",
          label: "运输线路",
          width: "220",
        },
        {
          prop: "orderPlanWeight",
          label: "重量",
          width: "140",
          slot: true,
        },
        {
          prop: "saleShipperAddressName",
          label: "收货地址",
          width: "300",
          slot: true,
        },
        {
          prop: "saleDateOfReceipt",
          label: "发货日期",
          width: "270",
          slot: true,
        },
        {
          prop: "saleOrderConsignee",
          label: "收货客户",
          width: "150",
          slot: true,
        },
        {
          prop: "saleOrderConsigneeTel",
          label: "收货客户电话号码",
          slot: true,
          width: "150",
        },
      ],
      truckText:null,
      //当前多选选中的车辆
      selectTruck:[],
      //销售订单与物资表主键
      saleMaterialId:null,
      //记录点击的市哪一个收货地址的浏览
      addressIndex:null,
      //缓存当前选中的收货地址
      addressMap:{},
    };
  },
  created() {
    if (getCookie("orgCode") == "chengyunshang") {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" +
        getCookie("userId");
    } else {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" + null;
    }
    this.option.requestUrl = "/api/v1/ams/getSaleOrderAndMaterialById?apiId=410&saleOrderId=" + this.$route.params.saleOrderId;
  },
  methods: {
    onInput(val){
      if(!isNumber(val)){
        this.$message.warning('重量/电话号码请输入数字')
      }
    },
    //点击确定按钮的事件
    makeSure(){
      let state = false;
      this.selectionList.forEach((e)=>{
        console.log(e.orderPlanWeight,"orderPlanWeight")
        if(!isNumber(e.orderPlanWeight)){
          this.$message.error('重量请输入数字')
        }else if(e.saleOrderConsigneeTel){
          if(!isNumber(e.saleOrderConsigneeTel)){
            this.$message.error('电话号码请输入数字')
          }else{
            e.saleOrderConsigneeTel = e.saleOrderConsigneeTel+"",
            state = true
          }
        }else {
          e.saleOrderConsigneeTel = null,
          state = true
        }
        if(e.saleDateOfReceipt){
          e.saleDateOfReceipt = sjTime(e.saleDateOfReceipt)
        }
        console.log(typeof e.saleDateOfReceipt)
      })
      
      console.log(this.selectionList)
      if(state){
        this.axios.post('/api/v1/ams/dispatchTruckOrderBySale',{
          saleOrderId:this.$route.params.saleOrderId,
          mapList:this.selectionList,
        }).then((res)=>{
          if(res.data.code == '200'){
            this.$message.success('派车成功')
            this.cancel();
          }
        })
      }else{
        this.$message.warning('重量/电话号码请输入数字')
      }
    },
    //点击取消按钮的事件
    cancel(){
      this.$router.push('/saleOrder')
    },
    //点击删除按钮删除当前点击的对象
    deleteRow(index){
      this.selectionList.splice(index,1)
    },
    //复制的方法
    copyRow(index,row){
      let arr = [];
      for(var i = 0 ;i<this.selectionList.length; i++){
        if(i == index){
          arr.push(this.selectionList[i]);
          arr.push({
            capacityId:row.capacityId,
            capacityNumber:row.capacityNumber,
            carrierName:row.carrierName,
            lineId:row.lineId,
            lineName:row.lineName,
            materialId:row.materialId,
            materialName:row.materialName,
            orderPlanWeight:row.orderPlanWeight,
            saleDateOfReceipt:row.saleDateOfReceipt,
            saleMaterialId:row.saleMaterialId,
            saleOrderConsignee:row.saleOrderConsignee,
            saleOrderConsigneeTel:row.saleOrderConsigneeTel,
            saleShipperAddressName:row.saleShipperAddressName,
            saleShippingAddressId:row.saleShippingAddressId,
          }
          )
        }else{
          arr.push(this.selectionList[i]);
        }
      }
      this.selectionList = [];
      this.selectionList = arr;
    },
    //收货地址模态窗口的框计算
    selectAddressClick(){
      this.Address.requestUrl = '/api/v1/ams/getAddressDeliveryAddress?apiId=255&con='+this.addressText;
    },
    //收货地址模态窗口的点击事件
    addAddressClick(){
      this.selectionList[this.addressIndex].saleShipperAddressName = this.addressMap.address
      this.selectionList[this.addressIndex].saleShippingAddressId = this.addressMap.addressId
      this.addressDrawer = false;
      let arr = this.selectionList;
      this.selectionList = [];
      arr.forEach((e)=>{
        this.selectionList.push({
          //销售订单与物资表主键
          capacityId:e.capacityId,
          capacityNumber:e.capacityNumber,
          carrierName:e.carrierName,
          lineId:e.lineId,
          lineName:e.lineName,
          materialId:e.materialId,
          materialName:e.materialName,
          orderPlanWeight:e.orderPlanWeight,
          saleDateOfReceipt:e.saleDateOfReceipt,
          saleMaterialId:e.saleMaterialId,
          saleOrderConsignee:e.saleOrderConsignee,
          saleOrderConsigneeTel:e.saleOrderConsigneeTel,
          saleShipperAddressName:e.saleShipperAddressName,
          saleShippingAddressId:e.saleShippingAddressId,
        })
      })
    },
    //收货地址点击浏览的事件
    select(index){
      this.addressDrawer = true;
      this.addressIndex = index ;
    },
    //收货地址模态框单选选中的事件
    currentRadioChange2(val){
      this.addressMap = {};
      this.addressMap = val;
    },
    //车辆模态框的确定事件
    AddTruckClick(){
      console.log(this.selectTruck)
      this.selectTruck.forEach(e => {
        // console.log(e)
        this.selectionList.push({
          //销售订单与物资表主键
          saleMaterialId:this.saleMaterialId,
          capacityId:e.capacityId,
          capacityNumber:e.capacityNumber,
          carrierName:e.carrierName,
          materialName:this.materialName,
          materialId:this.materialId,
          lineName:this.lineName,
          lineId:this.lineId,
        })
      });
      this.truckDrawer = false;
    },
    //车辆模态框框计算
    selectTruckClick(){
      if (getCookie("orgCode") == "chengyunshang") {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" +
          getCookie("userId") + "&index="+this.truckText;
      } else {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" + null + "&index="+this.truckText;
      }
    },
    //车辆表格
    currentRadioChange1(select){
      this.selectTruck = [];
      this.selectTruck = select;
    },
    //主界面表格单选
    currentRadioChange(row) {
      this.materialId = row.materialId;
      this.materialName = row.materialName;
      this.saleMaterialId = row.saleMaterialId;
    },
    //线路表格的单选事件
    currentRadioChange5(row){
      this.cacheLine = row;
    },
    onClick(num) {
      if (num == 1) {
        this.drawer = true;
      }else if(num == 2){
        if(!this.materialId){
          this.$message.warning('请选择物资后，再点击')
        }else if(!this.lineId){
          this.$message.warning('请选择线路后，再点击')
        }else{
          this.truckDrawer = true;
        }
      }
    },
    //线路表格的框计算
    selectClick(){
      this.line.requestUrl = '/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con='+this.lineText;
    },
    //线路表格的确定事件
    AddClick(){
      this.drawer = false;
      this.lineName = this.cacheLine.lineName +"  "+ this.cacheLine.lineDesk;
      this.lineId = this.cacheLine.lineId;
    }
  },
};
</script>

<style lang='scss'>
.addSaleOrderSend {
  .from {
    margin-top: 20px;
    .line {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        width: 350px;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .vehicle {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      .el-button {
        width: 250px;
        margin-left: 10px;
        margin-right: 10px;
      }
      .span {
        width: 70px;
      }
    }
  }
  .tablecls{
    margin-top: 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
    margin: 20px;
    .el-button{
      width: 100px;
      margin-left: 20px;
    }
  }
}
</style>