icore-pass/src/views/WMS/components/billingOrder/orderDetails.vue

//钢材统计报表
<template>
  <div class="purchasFuelNewMonitor">
    <div class="tableTop">
      <el-form :inline="true" style="margin-top :5px">
        <el-form-item>
          <span>车牌号</span>
          <el-input
            style="width:200px"
            v-model="input"
            placeholder="请输入查询条件"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >订单时间：</label
          >
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:200px"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:200px"
          >
          </el-date-picker>
          <el-button type="primary" class="btn" @click="onclick">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        ref="tableRef"
        border
        stripe
        style="width: 100%; margin-top: 20px"
        max-height="800px"
        @cell-click="cellClik"
        :row-style="{ height: '30px' }"
        :cell-style="{ fontWeight: '700' }"
      >
        <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
          prop="capacityNumber"
          column-key="capacityNo"
          label="车牌号"
          align="center"
          width="250px"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物资名称"
          align="center"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="specificationModel"
          label="物资规格"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="materialNumber"
          label="物资件数"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <button
              type="primary"
              @click="scope.row.materialNumber--"
              v-if="scope.row.isNumShow == 1"
              style="height:40px"
            >
              -
            </button>
            <input
              v-model="scope.row.materialNumber"
              disabled
              style="width:40px;height: 40px;font-size:16px;line-height: 40px;text-align: center;"
            />
            <button
              type="primary"
              @click="scope.row.materialNumber++"
              v-if="scope.row.isNumShow == 1"
              style="height:40px"
            >
              +
            </button>
            <el-button
              type="primary"
              @click="updateBillOrder(scope.row)"
              v-if="scope.row.isNumShow == 1"
              >提交</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="装货点" width="100">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.warehouseId">
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="grossWeight" label="毛重"> </el-table-column>
        <el-table-column prop="grossWeightTime" label="毛重时间" width="130px">
        </el-table-column>
        <el-table-column prop="tareWeight" label="皮重"> </el-table-column>
        <el-table-column prop="tareWeightTime" label="皮重时间" width="130px">
        </el-table-column>
        <el-table-column prop="netWeight" label="净重"> </el-table-column>
        <el-table-column prop="entryGateTime" label="进厂时间" width="130px">
        </el-table-column>
        <el-table-column prop="loadTime" label="装货时间" width="130px">
        </el-table-column>
        <el-table-column prop="outGateTime" label="出厂时间" width="130px">
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          label="运输订单号"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="120px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="disorderlyOutbound(scope.row)"
              :disabled="!scope.row.materialName.includes('乱尺')"
              >出库申请</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { sjTime } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";

export default {
  data() {
    return {
      clickIndex: null,
      input: null,
      option: [],
      startTime: null,
      endTime: null,
      tableData: [],
      spanArr: [],
      pos: 0,
      isCellClick: 0,
      columnIndexs: [0, 1, 11, 13, 14]
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getSteelReport();
    this.infomation();
  },
  methods: {
    infomation() {
      this.axios.get("/api/v1/uc/getSteelWarehouse").then(res => {
        console.log(res.data);
        this.option = res.data;
      });
    },
    cellClik(row, column, cell, event) {
      if (row.group != this.clickIndex) {
        this.tableData.forEach(item => {
          if (item.group == this.clickIndex) {
            this.$set(item, "isNumShow", 0);
          }
        });
      }
      if (column.property == "materialNumber") {
        this.$set(row, "isNumShow", 1);
        this.clickIndex = row.group;
      }
    },
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          data[i].group = i;
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].orderId === data[i - 1].orderId) {
            this.spanArr[this.pos] += 1;
            data[i].group = data[i - 1].group;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
            data[i].group = data[i - 1].group + 1;
          }
        }
        this.totalCapacity = data[data.length - 1].group + 1;
        this.totalNumber = data.reduce(function(prev, item) {
          return prev + item.materialNum;
        }, 0);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.columnIndexs.indexOf(columnIndex) != -1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //减少物资件数
    updateBillOrder(row) {
      const loading = this.$loading({
        lock: true,
        text: "修改物资件数中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let map = {
        materialId: row.materialId,
        materialNum: row.materialNumber
      };
      let arr = [];
      arr.push(map);
      let updateMap = {
        orderId: row.orderId,
        saleOrderMaterialId: row.saleOrderMaterialId,
        mapList: arr
      };
      this.axios
        .post("/api/v1/oms/updateMaterialMes", updateMap)
        .then(res => {
          if (res.data.code == "200") {
            this.$message.success("修改物资数量成功");
            this.getSteelReport();
            loading.close();
          } else {
            this.$message.error("修改物资数量失败,请联系管理员");
            this.getSteelReport();
            loading.close();
          }
        })
        .catch(() => {
          this.$message.error("修改物资数量失败,请联系管理员");
          this.getSteelReport();
          loading.close();
        });
    },
    //查询，输入查询条件
    onclick() {
      let startTime = null;
      let endTime = null;
      let capacityNo = null;
      if (this.startTime && this.endTime) {
        startTime = sjTime(this.startTime);
        endTime = sjTime(this.endTime);
      }
      this.axios
        .post(
          "/api/v1/tms/getSaleSteelReport?startTime=" +
            startTime +
            "&endTime=" +
            endTime +
            "&carrierSsoId=" +
            carrierSsoId +
            "&i=" +
            new Date() +
            "&capacityNo=" +
            capacityNo
        )
        .then(res => {
          this.tableData = res.data.data;
          this.getSpanArr(res.data.data);
        });
    },
    //重新获取表格数据
    refresh() {
      this.getSteelReport();
    },
    //获取钢材统计报表
    getSteelReport() {
      this.axios
        .post(
          "/api/v1/oms/getWarehouseMes?startTime=" +
            null +
            "&endTime=" +
            null +
            "&i=" +
            new Date()
        )
        .then(res => {
          this.tableData = res.data.data;
          console.log(this.tableData);
          this.getSpanArr(res.data.data);
        });
    },
    disorderlyOutbound(row) {
      console.log(row);
      if (row.warehouseId == null) {
        this.$message.error("请先选择装货点");
        return;
      }
      row.userId = getCookie("userId");
      let title = `确定对${row.capacityNumber}的${row.materialNumber}${row.materialName}出库吗?`;
      this.$confirm(title, "提醒", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        center: true
      }).then(() => {
        this.axios.post("/api/v1/wms/disorderlyOutbound", row).then(res => {
          console.log(res);
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.purchasFuelNewMonitor {
  .tableTop {
    margin-left: 20px;
    margin-top: 20px;
  }
  .table {
    margin-left: 20px;
    margin-top: 20px;
  }
  .address {
    .button-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>