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

<template>
  <!-- 添加销售订单排车 -->
  <div class="addSalePlan">
    <page-title>新增销售订单派车</page-title>
        <div>
            <el-tabs v-model="activeName" >
                <dilTable ref="tab" v-bind.sync="option">
                </dilTable>
            </el-tabs>
        </div>
        
        <el-form :inline="true" style="margin-top: 2rem;">
            <el-form-item>
                <label class="el-form-item__label" style="width: auto;margin-left: 2rem;">物资名称:</label>
                <el-select v-model="materials" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                 </el-select>
            </el-form-item>
            <el-form-item>
                <div class="lineId">
                <div class="materialId">
                    <label class="el-form-item__label" style="width: auto;margin-left: 2rem;">承运商:</label>
                    <el-input class="input" v-model="carrierName" disabled> </el-input>
                    <el-button type="primary" class="btn" @click="table2 = true">浏览</el-button>
                </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="lineId">
                <div class="materialId">
                    <label class="el-form-item__label" style="width: auto;margin-left: 2rem;">选择路线:</label>
                    <el-input class="input" v-model="lineName" disabled> </el-input>
                    <el-button type="primary" class="btn" @click="table1 = true">浏览</el-button>
                </div>
                </div>
            </el-form-item>
        </el-form>

        <!-- 承运商模态框 -->
        <el-drawer
        title="选择承运商"
        :visible.sync="table2"
        direction="rtl"
        size="35%"
        :show-close="false"
        >
        <el-input placeholder="请输入内容" v-model="index"  
        style="margin-top: 10px; margin-left: 20px;width:160px" clearable> </el-input
        ><el-button type="primary" class="btn" @click="onclick" style="margin-left: 4px;">
            <i class="el-icon-search"></i>查询
        </el-button>
        <div class="tablecls">
            <!-- 查询所有的承运商 -->
            <dilTable v-bind.sync="carrier" @radio-change="currentRadioChange2">
            </dilTable>
        </div>
        </el-drawer>

        <!-- 选择路线模态窗口 -->
        <el-drawer
        title="选择路线"
        :visible.sync="table1"
        direction="rtl"
        size="50%"
        :show-close="false"
        >
        <el-input placeholder="请输入内容" v-model="input"  
        style="margin-top: 10px; margin-left: 20px;width:160px" clearable> </el-input
        ><el-button type="primary" class="btn" @click="onclick1" style="margin-left: 4px;">
            <i class="el-icon-search"></i>查询
        </el-button>
        <div class="tablecls">
            <!-- 查询所有的路线 -->
            <dilTable
            v-bind.sync="line" @radio-change="currentRadioChange5"
            ></dilTable>
        </div>
        </el-drawer>

        <!-- 选择新增条数及确认按钮 -->
        <div class="lineId">
            <div class="materialId">
                <label class="el-form-item__label" style="width: auto;margin-left: 2rem;margin-top: 0.3rem;">派车数:</label>
                <el-input class="input1" v-model="carCount"> </el-input>
                <el-button type="primary" class="btn" @click="makeSure1">确认分派</el-button>
            </div>
        </div>

    <!-- 派车表格 -->
    <div class="selectionTable from">
      <el-table :data="selectionList" border style="width: 100%" highlight-current-row>
        <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" v-if="item.label !== '收货方电话'">
            <span>{{ item.label }}</span>
          </template>
          <!-- 插入输入框 -->
          <template slot-scope="scope">
            <template v-if="item.slot">
              <!-- 车牌号 -->
              <template v-if="item.prop == 'capacityNumber'">
                <el-input
                  class="textinput1"
                  v-model.number="scope.row.capacityNumber"
                ></el-input>
              </template>
              <!-- 物资重量 -->
              <template v-if="item.prop == 'orderPlanWeight'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.orderPlanWeight"
                ></el-input>
              </template>
              
              <!-- 收货地址id -->
              <template style="width: 400px" v-if="item.prop == 'saleShipperAddressName'">
                <el-input style="width: 200px" v-model="scope.row.saleShipperAddressName" disabled>
                </el-input>
                <el-button type="primary" @click="ondrawer(scope.row,scope.$index)"
                  >浏览</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"
                  v-model.number="scope.row.saleOrderConsignee"
                ></el-input>
              </template>
              <!-- 收货客户电话号码 -->
              <template v-if="item.prop == 'saleOrderConsigneeTel'">
                <el-input
                  class="textinput5"
                  v-model.number="scope.row.saleOrderConsigneeTel"
                ></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.native.prevent="deleteRow(scope.$index, selectionList)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :close-on-press-escape="true"
      :show-close="true"
      :wrapperClosable="true"
      modal
      size="30%"
    >
      <el-input
        placeholder="请输入内容"
        v-model="textInput"
        style="margin-top: 10px; margin-left: 20px;width: 200px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="onclick1()"
        style="margin-bottom: 15px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <dilTable
        v-bind.sync="frist"
        @radio-change="currentRadioChange1"
      ></dilTable>
    </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";

export default {
  components: { PageTitle },
  data() {
    return {
      materials: "",
      //线路
      table1: false,
      lineName:"",
      line: {
        requestUrl: "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3",
        selectionType: "radio",
      },
      //承运商
      table2: false,
      carrierName: "",
      carrier: {
        requestUrl: "/api/v1/uc/getCarrierListByLike?apiId=412",
        selectionType: "radio",
      },
      //新增车数
      carCount: 1,


      textInput: "",
      input: "",
      //销售订单物资信息
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/ams/getSaleOrderAndMaterialById?apiId=410&saleOrderId=" + this.$route.params.saleOrderId,
      },
      table: false,
      //表格数据lists
      selectionList: [],
      //表格新增lists
      selectionList1: [],
      drawer: false,
      direction: "rtl",
      form1: {},
      value: false,
      frist: {
        requestUrl: "/api/v1/ams/getAddressDeliveryAddress?apiId=255",
        selectionType: "radio",
        mapList: [],
      },
      options: [
        {
          values: "yes",
          label: "是",
        },
        {
          values: "no",
          label: "否",
        },
      ],
      values: "yes",
      tableTop: [
        {
          prop: "capacityNumber",
          label: "车牌号",
          slot: true,
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "carrierName",
          label: "承运商",
          width: "120",
        },
        {
          prop: "lineName",
          label: "运输线路",
          width: "140",
        },
        {
          prop: "orderPlanWeight",
          label: "重量",
          slot: true,
        },
        {
          prop: "saleShipperAddressName",
          label: "收货地址",
          width: "300",
          slot: true,
        },
        {
          prop: "saleDateOfReceipt",
          label: "收货日期",
          width: "110",
          slot: true,
        },
        {
          prop: "saleOrderConsignee",
          label: "收货客户",
          slot: true,
        },
        {
          prop: "saleOrderConsigneeTel",
          label: "收货客户电话号码",
          slot: true,
        },
      ],
      row: {},
    };
  },
  watch: {
    
  },
  methods: {
    currentRadioChange2(selectoin){
        console.log("selectoin",selectoin)
      this.carrierName = selectoin.carrierName;
    },
    currentRadioChange5(selection) {
      this.lineName = selection.lineName;
    //   this.lineId = selection.lineId;
    },
    // 确认新增一列或多列派车行
    // makeSure1() {
    //     console.log("this.option[0].saleMaterialId",this.option)
    //   for(var i=0;i<this.carCount;i++){
    //       var addmap = {
    //           capacityNumber : null,
    //           materialName : this.materials,
    //           carrierName : this.carrierName,
    //           lineName : this.lineName,
    //           orderPlanWeight : null,
    //           saleShipperAddressId: null,
    //           saleShipperAddressName:null,
    //           saleDateOfReceipt: null,
    //           saleOrderConsignee: null,
    //           saleOrderConsigneeTel: null,
    //       }
    //       this.selectionList.push(addmap);
    //   }
    // },
    //删除派车列
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //点击浏览事件
    ondrawer(row,index) {
      this.row = row;
      this.row.index = index;
      this.drawer = true;
    },
    //监听模态框点击事件
    currentRadioChange1(radioList) {
      this.selectionList[this.row.index].saleShipperAddressId = radioList.addressId;
      this.selectionList[this.row.index].saleShipperAddressName = radioList.address;
    },
    //收货地址模态框查询
    onclick1() {
      this.option.requestUrl =
        "/api/v1/ams/getAddressDeliveryAddress?apiId=255&con=" + this.textInput;
    },
    //物资模态框查询
    // 框计算
    onclick() {
      this.option.requestUrl =
      "/api/v1/ams/getSaleOrderAndMaterialById?apiId=410&saleOrderId=" + this.$route.params.saleOrderId;
    },
    open() {
      if (this.selectionList1.length != 0) {
        this.$confirm("取消会将已选择的数据清空, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.selectionList1 = [];
            this.table = false;
          })
          .catch(() => {});
      } else {
        this.table = false;
      }
    },
    // 确定
    makeSure() {
        //初始化maplist
      var mapList = [];
      console.log("this.selectionList",this.selectionList)
      this.selectionList.forEach((item,i) => {
        //初始化mapItem
        var mapItem={
                //销售订单id
                saleOrderId : 0,
                //车序号    
                truckNo : "",
                //收货地址id
                shippingAddressId : 0,
                //收货日期
                dateOfReceipt :null,
                //收货方姓名   
                orderConsignee :"",
                //收货方电话 
                orderConsigneeTel :"",
                //车序号物资ID
                saleMaterialId : 0,
                //物资数量
                materialNumber : 0,
            };
        mapItem.saleOrderId=this.$route.params.saleOrderId;
        mapItem.truckNo=item.cxh;
        mapItem.shippingAddressId=item.saleShipperAddressId;
        mapItem.dateOfReceipt=item.saleDateOfReceipt;
        mapItem.orderConsignee=item.saleOrderConsignee;
        mapItem.orderConsigneeTel=item.saleOrderConsigneeTel;
        mapItem.saleMaterialId=item.saleMaterialId;
        mapItem.materialNumber=item.orderPlanWeight;
        mapList.push(mapItem);
      });
      // console.log("mapList",mapList);
        this.axios.post("/api/v1/ams/addTruckNo", mapList).then((res) => {
          if (res.data.code == "200") {
            this.$router.go(-1);
          }
          this.$message({
            type: "success",
            message: "新增车序号成功!",
          });
        });    
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    //关闭事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    CloseClick() {},
  },
};
</script>
<style lang='scss' scoped>
.addSalePlan{
  width: 100%;
}
.switch{
  margin-left: 60rem;
}
.lineId {
  display: flex;
  justify-content: center;
  margin-left: 2rem;
  .text {
    display: inline-block;
    width: 170px;
    text-align: right;
  }
  .input{
    width: 250px;
    margin-right: 20px;
  }
  .input1{
    width: 60px;
    margin-right: 20px;
  }
}
.form-box,
.from {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 20px;
}
.button-box{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
.select {
  margin-left: 2rem;
}
.makeSureAdd{
  width: 100px;
  margin-left: 3.5rem;
  margin-top: 0.3rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
}
.demo-form-inline {
  margin-left: 2rem;
}
.table_form {
  margin-left: -16rem;
}
.textinput {
  width: 50px;
}
.textinput1 {
  width: 50px;
  text-align: center;
  size: small;
}
.textinput2 {
  width: 50px;
  margin-right: 30px;
}
.textinput3 {
  width: 270px;
}
.textinput4 {
  width: 60px;
}
.textinput5 {
  width: 120px;
}
</style>