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

<template>
  <!-- 添加销售订单排车 -->
  <div class="addSalePlan">
    <page-title>新增销售订单排车</page-title>

    <div class="table_form from">
      <div class="materialId">
        <span class="text"> 物资： </span>
        <el-button type="primary" class="btn" @click="table = true">浏览</el-button>
      </div>
    </div>
    <!-- 车序号表格 -->
    <div class="switch" v-if="selectionList.length > 0">
      <el-tooltip placement="top">
        <div slot="content">下面表格已有数据，不能进行更改！！！</div>
        <el-switch
          v-model="value"
          active-text="重量"
          inactive-text="件数"
          disabled
        >
        </el-switch>
      </el-tooltip>
    </div>
    <div class="switch" v-else>
      <el-tooltip placement="top">
        <div slot="content">当下面表格有数据之后，将不能进行更改！！！</div>
        <el-switch v-model="value" active-text="重量" inactive-text="件数">
        </el-switch>
      </el-tooltip>
    </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 == 'orderPlanWeight'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.orderPlanWeight"
                ></el-input>
              </template>
              <!-- 车序号 -->
              <template v-if="item.prop == 'cxh'">
                <el-input
                  class="textinput1"
                  v-model.number="scope.row.cxh"
                ></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>
    <el-drawer
      title="选择物资信息"
      :visible.sync="table"
      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="onclick" style="margin-left: 4px;">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button @click="open">取消</el-button>
      <el-button type="primary" @click="makeSure1">确定</el-button>
      <div class="tablecls">
        <!-- 查询所有的物资 -->
        <dilTable v-bind.sync="option" @selection-change="selectionChange">
        </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";

export default {
  components: { PageTitle },
  data() {
    return {
      textInput: "",
      input: "",
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/ams/getSaleOrderAndMaterialById?apiId=410&saleOrderId=" + this.$route.params.saleOrderId,
        // 控制显示多选列
        selectionType: "select",
      },
      table: false,
      selectionList: [],
      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: "materialCode",
          label: "物资编码",
          width: "120",
        },
        {
          prop: "cxh",
          label: "车序号",
          slot: true,
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "Specification",
          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: {},
    };
  },
  // mounted() {
  //   this.dianji();
  // },
  watch: {
    value() {
      if (this.value) {
        this.tableTop[4]={
          prop: "orderPlanWeight",
          label: "重量",
          slot: true,
        };
      } else {
        this.tableTop[4]={
          prop: "orderPlanWeight",
          label: "件数",
          slot: true,
        };
      }
    },
  },
  methods: {
    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;
    },
    // dianji() {
    //   this.axios.get("/api/v1/ams/getAddressDeliveryAddress").then((res) => {
    //     if (res.data.code == "200") {
    //       console.log(res);
    //       this.options1 = res.data.data;
    //     }
    //   });
    // },
    //物资模态框查询
    // 框计算
    onclick() {
      this.option.requestUrl =
      "/api/v1/ams/getSaleOrderAndMaterialById?apiId=410&saleOrderId=" + this.$route.params.saleOrderId;
        //"/api/v1/uc/queryMaterialByLike?apiId=244&index=" + this.input;
    },
    open() {
      if (this.selectionList1.length != 0) {
        this.$confirm("取消会将已选择的数据清空, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.selectionList1 = [];
            this.table = false;
          })
          .catch(() => {});
      } else {
        this.table = false;
      }
    },
    // 返回主界面
    makeSure1() {
      this.selectionList1.forEach((e) => {
        var addmap = {
          materialCode: e.materialCode,
          cxh: null,
          materialName: e.materialName,
          Specification: e.specificationModel,
          orderPlanWeight: null,
          saleShipperAddressId: null,
          saleShipperAddressName:null,
          saleDateOfReceipt: null,
          saleOrderConsignee: null,
          saleOrderConsigneeTel: null,
          saleMaterialId: e.saleMaterialId,
          materialTheoreticalWeight: e.materialTheoreticalWeight,
        };
        this.selectionList.push(addmap);
      });
      this.selectionList1 = [];
      this.table = false;
    },
    // 返回选中的物资信息
    selectionChange(selection) {
      this.selectionList1 = [];
      this.selectionList1 = selection;
      console.log("this.selectionList1 ",this.selectionList1)
    },
    // 确定
    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;
}
.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: -10rem;
}
.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>