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

<template>
  <div class="updateSteelDetails">
    <!-- 车牌号查询框 -->
    <div class="top">
      <el-input
        v-model="inputCapacity"
        placeholder="请输入车牌号"
        clearable
      ></el-input>
      <el-button type="primary" @click="onclick">查询</el-button>
      <el-button type="primary" @click="back">返回</el-button>
    </div>
    <!-- //物资模态框多选 -->
    <div class="edrwer">
      <!-- 物资选择模态框 -->
      <el-drawer
        title="选择物资信息"
        :visible.sync="table1"
        direction="rtl"
        size="90%"
        :show-close="true"
      >
        <el-form :inline="true" style="margin-top: 0.5rem;">
          <el-form-item>
            <label class="el-form-item__label" style="width: auto;"
              >物资名称/型号</label
            >
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入物资名称或型号"
              v-model="materialNameText"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <label class="el-form-item__label" style="width: auto;">规格</label>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入内容"
              v-model="materialSpecificationText"
              clearable
              ><template slot="prepend">Φ</template></el-input
            >
          </el-form-item>
          <el-button
            type="primary"
            class="btn"
            @click="onclick"
            style="margin-left: 4px;"
            ><i class="el-icon-search"></i>查询</el-button
          >
          <el-button type="primary" @click="makeSureMaterial"
            ><i class="el-icon-check"></i>确定</el-button
          >
        </el-form>
        <div class="tablecls">
          <!-- 查询所有的物资 -->
          <dilTable
            v-bind.sync="option"
            @selection-change="selectionChange"
            @rowDbClick="rowDbClick"
          >
          </dilTable>
        </div>
      </el-drawer>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :span-method="objectSpanMethod"
        border
        key="orderTable"
      >
        <el-table-column
          width="50"
          label="序号"
          align="center"
          fixed="left"
          :resizable="false"
        >
          <template slot-scope="scope">{{ scope.row.group + 1 }}</template>
        </el-table-column>
        <el-table-column property="capacityNumber" label="车牌号" width="120">
        </el-table-column>
        <el-table-column property="consigneeCompanyName" label="收货单位">
        </el-table-column>
        <el-table-column property="completeAddress" label="收货地址">
        </el-table-column>
        <el-table-column property="carrierName" label="承运商">
        </el-table-column>
        <el-table-column property="materialName" label="物资名称">
        </el-table-column>
        <el-table-column property="materialSpecification" label="规格">
        </el-table-column>
        <el-table-column property="materialModel" label="型号">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="updateMaterial(scope)">
              物资异常
            </el-button>
            <el-button type="text" size="mini" @click="updateAddress(scope)">
              收货地址异常
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog
        :title="title"
        :visible.sync="dialogTableVisible"
        style="width:100%"
      >
        <div class="errorMaterial">
          <el-button @click="openDrawer" type="primary">新增拼数</el-button>
        </div>
        <div class="">
          <el-table
            :data="materialList"
            border
            :span-method="objectSpanMethod1"
            highlight-current-row
            key="materialTable"
          >
            <el-table-column
              v-for="(item, i) in materialTableTop"
              :key="i"
              :prop="item.prop"
              :label="item.label"
              align="center"
              show-overflow-tooltip
            >
              <!-- 插入输入框 -->
              <template slot-scope="scope">
                <template v-if="item.slot">
                  <!-- 物资名称 -->
                  <template v-if="item.prop == 'materialName'">
                    <el-input
                      style="width: 200px"
                      v-model="scope.row.materialName"
                      disabled
                    >
                    </el-input>
                  </template>
                  <!-- 物资件数 -->
                  <template v-if="item.prop == 'orderPlanWeight'">
                    <el-input
                      class="textinput111"
                      v-model.number="scope.row.orderPlanWeight"
                      placeholder="(必填)"
                    ></el-input>
                  </template>
                  <!-- 米数 -->
                  <template v-if="item.prop == 'meterNumber'">
                    <el-input
                      :disabled="scope.row.isDisable == 1"
                      class="textinput111"
                      v-model.number="scope.row.meterNumber"
                      placeholder="(必填)"
                    ></el-input>
                  </template>
                  <!-- 是否磅重销售 -->
                  <template v-if="item.prop == 'isPound'">
                    <el-select
                      v-model="scope.row.isPound"
                      placeholder="请选择"
                      style="width:65px"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.values2"
                        :label="item.label2"
                        :value="item.values2"
                      >
                      </el-option>
                    </el-select>
                  </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="
                    deleteMaterialRow(scope.$index, materialList)
                  "
                  type="text"
                  icon="el-icon-close"
                  size="big"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="buttonx">
          <el-button type="primary" @click="makeSureUpdateMaterial"
            >确定</el-button
          >
          <el-button type="primary" @click="cancelUpdateMaterial"
            >取消</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      capacityNumber: null,
      //是否磅重销售
      options2: [
        {
          values2: 0,
          label2: "是"
        },
        {
          values2: 1,
          label2: "否"
        }
      ],
      table1: false,
      isDelete: false,
      dialogTableVisible: false,
      inputCapacity: null,
      tableData: [],
      tableData1: [],
      materialList1: [],
      materialList: [],
      //存放每一行记录的合并数
      spanArr: [],
      spanArr1: [],
      status: null,
      //物资表格多选
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/uc/getSteelMaterial?apiId=244",
        // 控制显示多选列
        selectionType: "select"
      },
      materialSpecificationText: null,
      materialNameText: null,
      spanArr: [],
      materialTableTop: [
        {
          prop: "capacityNumber",
          label: "车牌号",
          width: "80"
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "90",
          slot: true
        },
        {
          prop: "meterNumber",
          label: "米数",
          width: "60",
          slot: true
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140"
        },
        {
          prop: "orderPlanWeight",
          label: "件数",
          width: "60",
          slot: true
        },
        {
          prop: "isPound",
          label: "是否磅重销售",
          width: "80",
          slot: true
        }
      ],
      orderId: null
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    updateAddress(scope) {},
    cancelUpdateMaterial() {
      this.dialogTableVisible = false;
    },
    makeSureUpdateMaterial() {
      let i = 0;
      if (this.materialList.length == 0) {
        this.$message.error("物资信息不能为空");
        return;
      }
      this.materialList.forEach(e => {
        if (!/(^[1-9]\d*$)/.test(e.meterNumber) && e.meterNumber != null) {
          e.meterNumber = null;
          i++;
        }
      });
      if (i != 0) {
        i = 0;
        this.$message.error("米数请输入正整数");
        return;
      }
      this.materialList.forEach(e => {
        if (!/(^[1-9]\d*$)/.test(e.orderPlanWeight)) {
          e.orderPlanWeight = null;
          i++;
        }
      });
      if (i != 0) {
        this.$message.error("件数必填且请输入正整数");
        return;
      }
      this.dialogTableVisible = false;
      this.orderId = null;
      this.saleOrderMaterialId = null;
      this.saleOrderId = this.$route.params.saleOrderId;
      this.materialList.forEach(e => {
        this.orderId = e.orderId;
        this.saleOrderMaterialId = e.saleOrderMaterialId;
      });
      let mapVal = {
        orderId: this.orderId,
        saleOrderMaterialId: this.saleOrderMaterialId,
        saleOrderId: this.saleOrderId,
        mapList: this.materialList
      };
      this.axios
        .post("/api/v1/ams/updateAllMaterialInSale", mapVal)
        .then(res => {
          console.log(res);
        });
    },
    makeSureMaterial() {
      //记录是理重还是磅重
      var getisPound = 1;
      this.materialList1.forEach(e => {
        if (!e.materialSpecification) {
          e.materialSpecification = "";
        }
        if (!e.materialModel) {
          e.materialModel = "";
        }
        //判断物资是否为盘螺或非定尺
        if (
          e.materialName.includes("盘螺") ||
          e.materialName.includes("乱尺") ||
          e.materialName.includes("盘元") ||
          e.materialName.includes("盘圆")
        ) {
          getisPound = 0;
        } else {
          getisPound = 1;
        }
        //若物资为带有盘螺、盘圆、盘元，默认无米数
        if (
          e.materialName.includes("盘螺") ||
          e.materialName.includes("盘圆") ||
          e.materialName.includes("盘元")
        ) {
          var addmap = {
            orderId: this.orderId,
            capacityNumber: this.capacityNumber,
            materialName: e.materialName,
            Specification: e.materialSpecification + e.materialModel,
            materialCode: e.materialCode,
            orderPlanWeight: null,
            meterNumber: null,
            isPound: getisPound,
            //物资Id
            materialId: e.materialId
          };
        } else {
          if (e.materialName.includes("米")) {
            console.log("着");
            var addmap = {
              capacityNumber: this.capacityNumber,
              orderId: this.orderId,
              materialName: e.materialName,
              Specification: e.materialSpecification + e.materialModel,
              materialCode: e.materialCode,
              orderPlanWeight: null,
              meterNumber: e.materialName.replace(/[^0-9]/gi, ""),
              isPound: getisPound,
              //物资Id
              materialId: e.materialId
              //有米数
            };
            console.log(addmap);
          } else {
            var addmap = {
              capacityNumber: this.capacityNumber,
              orderId: this.orderId,
              materialName: e.materialName,
              Specification: e.materialSpecification + e.materialModel,
              materialCode: e.materialCode,
              orderPlanWeight: null,
              meterNumber: null,
              isPound: getisPound,
              //物资Id
              materialId: e.materialId
            };
          }
        }
        this.materialList.push(addmap);
        this.materialList.forEach(e => {
          this.$set(e, "capacityNumber", this.capacityNumber);
        });
        this.getSpanArr1(this.materialList);
        console.log(this.materialList);
      });
      this.materialList1 = [];
      this.table1 = false;
    },
    rowDbClick(row) {
      this.materialList1 = [];
      this.materialList1.push(row);
      this.makeSureMaterial();
    },
    openDrawer() {
      this.table1 = true;
    },
    //返回选中的物资信息
    selectionChange(selection) {
      this.materialList1 = [];
      this.materialList1 = selection;
    },
    //物资模态框查询
    onclick() {
      this.option.requestUrl =
        "/api/v1/uc/getSteelMaterial?apiId=244&materialNameText=" +
        this.materialNameText +
        "&materialSpecificationText=" +
        this.materialSpecificationText;
    },
    //开关是否删除
    showDelete() {
      this.isDelete = true;
    },
    deleteMaterialRow(index, rows) {
      rows.splice(index, 1);
      this.status = 1;
    },
    updateMaterial(scope) {
      this.materialList = this.tableData.filter((item, index) => {
        return item.orderId == scope.row.orderId;
      });
      this.materialList.forEach(e => {
        this.capacityNumber = e.capacityNumber;
        this.orderId = e.orderId;
      });
      this.getSpanArr1(this.materialList);
      this.title = "处理" + "-" + this.capacityNumber + "-" + "异常物资信息";
      this.dialogTableVisible = true;
    },
    getOrderList() {
      this.axios
        .post(
          "/api/v1/oms/getDriverInfoForSale1?saleOrderId=" +
            this.$route.params.saleOrderId +
            "&i=" +
            new Date()
        )
        .then(res => {
          this.tableData = res.data.data;
          this.getSpanArr(this.tableData);
        });
    },
    onclick() {},
    back() {
      this.$router.push("/saleOrderSteel");
    },
    getSpanArr1(data) {
      //每次调用方法初始化
      this.spanArr1 = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].capacityNumber === data[i - 1].capacityNumber) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
          data[i].group = i;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].orderId === data[i - 1].orderId) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
            data[i].group = data[i - 1].group;
          } else {
            this.spanArr.push(1);
            this.pos = i;
            data[i].group = data[i - 1].group + 1;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 8
      ) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.updateSteelDetails {
  .top {
    margin-top: 20px;
    margin-left: 20px;
    .el-input {
      width: 250px;
    }
  }
  .table {
    margin-top: 20px;
    margin-left: 20px;
  }
  .dialog {
    width: 600px;
    .buttonx {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>