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

<template>
  <!-- 添加销售订单 -->
  <div class="addSalePlan">
    <page-title>新增</page-title>
    <div class="form-box" style="margin-right: 10rem">
      <dil-form :formId="284" v-model="form1" ref="from1"></dil-form>
    </div>
    <div class="select from">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="是否自提">
          <el-select v-model="values" placeholder="请选择">
            <el-option v-for="item in options" :key="item.values" :label="item.label" :value="item.values">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <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="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"
          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 v-if="item.prop == 'saleShipperAddressName'">
                <el-input 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"
      :before-close="handleClose"
      size="30%"
    >
      <el-input
        placeholder="请输入内容"
        v-model="textInput"
        style="margin-top: 10px; margin-left: 20px"
        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/uc/queryMaterialByLike?apiId=244",
        // 控制显示多选列
        selectionType: "select",
      },
      table: false,
      selectionList: [],
      selectionList1: [],
      drawer: false,
      direction: "rtl",
      form1: {},
      value: undefined,
      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: "160",
        },
        {
          prop: "cxh",
          label: "车序号",
          slot: true,
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140",
        },
        {
          prop: "orderPlanWeight",
          label: "件数",
          slot: true,
        },
        {
          prop: "saleShipperAddressName",
          label: "收货地址",
          slot: true,
        },
        {
          prop: "saleDateOfReceipt",
          label: "收货日期",
          slot: true,
        },
        {
          prop: "saleOrderConsignee",
          label: "收货客户",
          slot: true,
        },
        {
          prop: "saleOrderConsigneeTel",
          label: "收货客户电话号码",
          slot: true,
        },
      ],
      row: {},
    };
  },
  // mounted() {
  //   this.dianji();
  // },
  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/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.materialSpecification+e.materialModel,
          orderPlanWeight: null,
          saleShipperAddressId: null,
          saleShipperAddressName:null,
          saleDateOfReceipt: null,
          saleOrderConsignee: null,
          saleOrderConsigneeTel: null,
          materialId: e.materialId,
          materialTheoreticalWeight: e.materialTheoreticalWeight,
        };
        this.selectionList.push(addmap);
      });
      this.selectionList1 = [];
      this.table = false;
    },
    // 返回选中的物资信息
    selectionChange(selection) {
      this.selectionList1 = [];
      this.selectionList1 = selection;
    },
    // 确定
    makeSure() {
      var state = 0;
      if (
        this.form1.shipperId &&
        this.form1.consigneeId &&
        this.form1.saleOrderReceiveCustomer &&
        this.values &&
        this.form1.saleRemark
      ) {
        state = 1;
      }
 
      this.selectionList.forEach((e) => {
        if (e.cxh && e.orderPlanWeight) {
          state = 1;
        } else {
          state = 0;
          return;
        }
      });
      if (state == 0) {
        this.$message.error("不能存在空值！");
      }
      if (state == 1) {
        var saleOrderIsselfMention = null;

        this.options.forEach((e) => {
          if (this.values == e.values) {
            saleOrderIsselfMention = e.label;
          }
        });
        let amsSaleOrder = {
          shipperId: this.form1.shipperId,
          receiveId: this.form1.consigneeId,
          saleOrderReceiveCustomer: this.form1.saleOrderReceiveCustomer,
          saleOrderIsselfMention: saleOrderIsselfMention,
          saleRemark: this.form1.saleRemark,
          // saleShippingAddressId: this.form1.saleShippingAddressId,
          // saleDateOfReceipt: sjTime(this.form1.saleDateOfReceipt),
          // saleOrderConsignee: this.form1.saleOrderConsignee,
          // saleOrderConsigneeTel: this.form1.saleOrderConsigneeTel,
        };
        // 将实体类和list放进map当中。后端接收数据类型格式为List<Map<String,Object>>。List<Map<String,Object>>嵌套List和Map
        let map = {
          amsSaleOrder: amsSaleOrder,
          selectionList: this.selectionList,
        };
        console.log(this.selectionList);

        this.axios.post("/api/v1/ams/addAmsSaleOrder", map).then((res) => {
          if (res.data.code == "200") {
            this.$router.go(-1);
          }
        });
      }
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    //关闭事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    CloseClick() {},
  },
};
</script>
<style lang='scss' scoped>
.addSalePlan{
  width: 100%;
}
.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>