storevisit-ui-mobile/src/views/my/material.vue

<template>
  <div class="bgcolor">
    <div class="navBarTOP">
      <!--        顶部条-->
      <van-nav-bar class="navBar" :title="title" left-arrow @click-left="onClickLeft">
        <template #right>
          <span style="color: #0057ba" @click="editorFn">保存</span>
        </template>
      </van-nav-bar>
    </div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <!--        主体内容-->
    <div class="container" style="width: 100%; margin: 0 auto">
      <el-table
        :data="list"
        border
        class="table-headermd table-headermdw"
        style="width: 100%"
        :span-method="objectSpanMethod">
        <el-table-column label="物料类型" prop="materialTypeName" align="center">
          <template slot-scope="scope">
            <span class="tipTitle" @click="tipTitle(scope.row.materialTypeName)">
              {{ scope.row.materialTypeName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="物料名称" prop="materialDataName" align="center">
          <template slot-scope="scope">
            <span class="tipTitle" @click="tipTitle(scope.row.materialDataName)">
              {{ scope.row.materialDataName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="仓库名称" align="center" />
        <el-table-column prop="inventoryNum" label="总库存" align="center" />
        <el-table-column prop="myInventoryNum" label="我的库存" align="center" width="50px" />
        <el-table-column class="t-center" prop="inventoryNumArray" align="center" width="80px">
          <template slot="header">
            <span>{{ titles }}</span>
            <span class="xing">*</span>
          </template>
          <template slot-scope="scope">
            <van-field
              v-model="scope.row.inventoryNumArray"
              placeholder="请输入"
              type="number"
              @input="inputblurs(scope.row.inventoryNumArray, scope.$index, '1')" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { addMaterialInventory, getReceiveList } from '@/api/inventory';
export default {
  data() {
    return {
      disabled: false,
      list: [],
      loading: false,
      finished: false,
      pageSize: 12,
      pageNum: 1,
      tabVal: '1',
      validFlag: '',
      titles: '领取量',
      title: '物料信息',
      fromValue: {
        pageSize: 12,
        pageNum: 1,
      },
    };
  },
  activated() {
    this.getReceiveList();
  },
  // watch: {
  //   $route(to, from) {
  //     if (to.path == '/material') {
  //       this.getReceiveList();
  //     }
  //   },
  // },
  methods: {
    inputblurs(val, index, num) {
      if (this.$route.query.tabVal == 'B') {
        if ((val + '').trim() == '') {
          this.list[index].inventoryNumArray = '';
        } else {
          if (Number(val) > 10000 || Number(val) <= 0) {
            this.$toast('请输入大于0并且小于10000的整数');
            this.list[index].inventoryNumArray = '';
          } else if (this.list[index].inventoryNumArray == '') {
            this.list[index].inventoryNumArray = '';
            this.$toast('请输入使用量');
          } else if (Number(val) > Number(this.list[index].myInventoryNum)) {
            this.$toast('请输入小于等于我的存量');
            this.list[index].inventoryNumArray = '';
          } else {
            this.list[index].inventoryNumArray = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
            this.list[index].inventoryNumArray = val.replace(/^\./g, ''); //验证第一个字符是数字
            this.list[index].inventoryNumArray = val
              .replace('.', '$#$')
              .replace(/\./g, '')
              .replace('$#$', '');
          }
        }
      } else {
        if ((val + '').trim() == '') {
          this.list[index].inventoryNumArray = '';
        } else {
          if (Number(val) > 10000 || Number(val) <= 0) {
            this.$toast('请输入大于0并且小于10000的整数');
            this.list[index].inventoryNumArray = '';
          } else if (this.list[index].inventoryNumArray == '') {
            this.list[index].inventoryNumArray = '';
            this.$toast('请输入使用量');
          } else if (Number(val) > Number(this.list[index].inventoryNum)) {
            this.$toast('请输入小于等于销售部库存量');
            this.list[index].inventoryNumArray = '';
          } else {
            this.list[index].inventoryNumArray = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
            this.list[index].inventoryNumArray = val.replace(/^\./g, ''); //验证第一个字符是数字
            this.list[index].inventoryNumArray = val
              .replace('.', '$#$')
              .replace(/\./g, '')
              .replace('$#$', '');
          }
        }
      }
    },
    editorFn() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      var inventoryIdArray = [];
      var inventoryNumArray = [];
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].inventoryNumArray != '' && this.list[i].inventoryNumArray != null) {
          inventoryIdArray.push(this.list[i].inventoryId);
          inventoryNumArray.push(this.list[i].inventoryNumArray);
        }
      }
      var changeType = 2;
      if (this.$route.query.tabVal == 'B') {
        changeType = 5;
      }
      var formData = {
        inventoryIdArray: inventoryIdArray,
        changeType: changeType,
        inventoryNumArray: inventoryNumArray,
        userId: localStorage.getItem('userId'),
      };
      addMaterialInventory(formData).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.$dialog
            .alert({
              title: '系统提示',
              message: '保存成功，返回我的库存',
            })
            .then((res) => {
              this.$router.go(-1);
            });
        } else {
          this.$toast(res.msg);
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const cellValue = row[column.property];
      if (cellValue && ['materialTypeName'].includes(column.property)) {
        const prevRow = this.list[rowIndex - 1];
        let nextRow = this.list[rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = this.list[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    getReceiveList() {
      this.title = '领取物料';
      this.titles = '领取量';
      if (this.$route.query.tabVal == 'B') {
        this.title = '退回物料';
        this.titles = '退回量';
      }
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      var fromValue = this.fromValue;
      fromValue.pageNum = this.pageNum;
      fromValue.pageSize = this.pageSize;
      fromValue.inventoryLyUserId = localStorage.getItem('userId');
      fromValue.type = this.$route.query.tabVal == 'A' ? 'ly' : 'th';
      getReceiveList(fromValue).then((res) => {
        loading1.clear();
        this.disabled = false;
        if (res.code == 200) {
          this.loading = false;

          this.list = res.rows;
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    storeDetailFn(id) {
      this.$router.push({
        path: '/storeDetail',
        query: { id: id },
      });
    },
    onClickRight() {
      this.$router.push('/storeAdd');
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {
      window.scrollTo(0, 0);
      this.pageNum = 1;
      this.list = [];
      this.finished = true;
      this.onLoad();
    },
  },
};
</script>
<style lang="scss" scoped>
.bgcolor {
  background-color: #f5f5f5;
}
.container {
  padding-bottom: 50px;
}
</style>
<style>
.table-headermd {
  font-size: 12px;
  text-align: center;
  position: initial;
  width: 98% !important;
  margin: 0 auto;
  border-right: 0;
}

.table-headermd .el-table__header,
.table-headermd .el-table__body {
  width: 100% !important;
}
.table-headermd col:nth-child(4) {
  width: 5.6rem;
}

.table-headermd col:nth-child(3) {
  width: 4.6rem;
}

.table-headermd .van-cell {
  padding: 0 4px;
  height: 100%;
}

.table-headermd th.el-table__cell > .cell {
  padding: 0 4px;
  text-align: center;
}

.table-headermd th.el-table__cell:first-child > .cell {
  text-align: left;
}

.table-headermd th.el-table__cell {
  background-color: #1989fa;
  color: #fff;
}

.table-headermd .el-table__cell {
  padding: 4px 0;
}

.table-headermd.el-table .cell {
  padding: 0;
}

.table-headermd .tipTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.table-headermd::before {
  height: 0;
}

.xing {
  color: red;
  padding-left: 4px;
}

.formLabel .van-radio__label,
.formLabel .van-checkbox__label {
  font-size: 1.4rem;
}

.table-headermd .cell,
.el-table--border .el-table__cell:first-child .cell {
  padding: 0 4px;
}

.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #1989fa;
}

.navBarTOP {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}

.isTableMust {
  padding: 4px;
  color: #999;
  margin: 0;
  margin-top: -10px;
}
.mobile-input .van-field__control {
  font-size: 12px;
  color: #999;
  border: 0;
}
.formLabel .mobile-input {
  border: 0 !important;
}
</style>