kd-aiot-frontend-mes/src/views/unacceptedProduct/components/edit.vue

<template>
  <ele-modal :visible.sync="visible" :title="title" width="40vw" append-to-body :maxable="true">
    <div class="title">{{ title == '返工返修' ? '原' : '' }}产品信息</div>
    <el-table :data="poList" border>
      <el-table-column label="产品名称" align="center" prop="productName">
      </el-table-column>
      <el-table-column label="产品编码" align="center" prop="productCode">
      </el-table-column>
      <!-- <el-table-column label="刻码" align="center" prop="engravingCode">
        </el-table-column> -->
      <el-table-column label="规格" align="center" prop="specification">
      </el-table-column>
      <el-table-column label="数量" align="center" prop="unqualifiedQuantity">
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="reviewerName">
      </el-table-column>
      <el-table-column
        label="入库仓库"
        align="center"
        prop="depotId"
        v-if="title != '返工返修'"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.depotId">
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
              @click.native="handleChangeDepot(scope.row, item)"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div class="title" v-if="title == '返工返修'">返工返修产品信息</div>
    <el-form
      ref="form"
      label-width="90px"
      class="create-form"
      v-if="title == '返工返修'"
    >
      <el-table :data="newPoList" border height="20vh">
        <el-table-column label="序号" align="center" width="60">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="产品名称" align="center" prop="productNameNew">
        </el-table-column>
        <el-table-column label="产品编码" align="center" prop="productCodeNew">
        </el-table-column>
        <!-- <el-table-column label="刻码" align="center" prop="engravingCode">
        </el-table-column> -->
        <!-- <el-table-column label="型号" align="center" prop="model">
        </el-table-column> -->
        <el-table-column label="规格" align="center" prop="specificationNew">
        </el-table-column>

        <el-table-column label="数量" align="center" prop="sumNew">
          <template slot-scope="scope">
            <el-form-item
              label-width="0px"
              :prop="'newPoList.' + scope.$index + '.sumNew'"
            >
              <el-input
                v-model.number="scope.row.sumNew"
                
                size="small"
                oninput="value=value.replace(/[^\d]/g,'')"
                style="width: 100%"
                placeholder="输入数量"
                @input="inputNumber(scope.row)"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="70">
          <template slot-scope="scope">
            <el-link
              type="danger"
              :underline="false"
              @click="handleDeleteItem(scope.$index)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="add-product" @click="addEquipment" v-if="title == '返工返修'">
      <i class="el-icon-circle-plus-outline"></i>
    </div>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>

      <el-button type="primary" @click="save" :loading="loading">
        提交
      </el-button>
    </template>

    <!-- 选择产品 -->
    <EquipmentDialog ref="equipmentRefs" @choose="confirmChoose" :type="2">
    </EquipmentDialog>
  </ele-modal>
</template>

<script>
import EquipmentDialog from './EquipmentDialog.vue';
import {
  getWarehouseList

  // queryKilnXCH
} from '@/api/mes';
export default {
  components: {
    EquipmentDialog
  },
  data() {
    return {
      poList: [],
      newPoList: [],
      visible: false,
      loading: false,
      title: '返工返修',
      originLong: '',
      originHeight: '',
      type: '',
      warehouseList: []
    };
  },

  computed: {},
  created() {
    getWarehouseList().then((res) => {
      this.warehouseList = res;
    });
  },
  methods: {
    open(row, type) {
      console.log(row,'row')
      this.visible = true;
      this.poList = row;
      this.type=type
      this.title = type == 1 ? '返工返修' : type == 2 ? '报废' : '试销品';
      if (
        !row[0].productName.includes('板材') &&
        !row[0].productName.includes('砌块')
      ) {
        return;
      }
      this._calcVolume(this.poList[0].specification);
    },
    handleChangeDepot(row, item) {
      row.depotName = item.name;
    },
    cancel() {
      this.visible = false;
    },
    // 删除产品
    handleDeleteItem(index, id) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消',
        type: 'warning'
      })
        .then((res) => {
          this.newPoList.splice(index, 1);
        })
        .catch(() => {});
    },
    addEquipment() {
      this.$refs.equipmentRefs.open();
    },
    /* 保存编辑 */
    save() {
      let isSumNew = true,
        isDepotId = true;
      let data = this.title == '返工返修' ? this.newPoList : this.poList;

      data.forEach((item) => {
        if (this.title == '返工返修' && !item.sumNew) {
          isSumNew = false;
        }
        if (this.title != '返工返修' && !item.depotId) {
          isDepotId = false;
        }
      });
      if(data.length==0){
        this.$alert('产品列表不能为空');
        return;
      }
      if (!isSumNew) {
        this.$alert('数量不能为空');
        return;
      }
      if (!isDepotId) {
        this.$alert('请选择入库仓库');
        return;
      }
      this.$emit('success', {data,type:this.type});
      this.cancel();
    },
    // 封装计算体积方法
    _calcVolume(string) {
      let modelArr = string.split('*');
      let originLong = Number(modelArr[0]);
      let originWide = Number(modelArr[1]);
      let originHeight = modelArr[2].substr(0, modelArr[2].indexOf('cm'));
      this.originLong = originLong;
      this.originHeight = originHeight;
      return originLong * originWide * originHeight;
    },
    // 封装计算修补信息规格*块数的总体积
    _calcModelVSWordcount() {
      // 计算修补规格体积
      let cutedVolume = 0;
      let sumVolume = 0;
      this.newPoList.map((item) => {
        if (item.sumNew > 0 && item.specificationNew) {
          cutedVolume =
            this._calcVolume(item.specificationNew) * Number(item.sumNew);
          sumVolume += cutedVolume;
        }
      });
      return sumVolume;
    },
    // 输入块数计算规格体积是否超出原规格体积
    inputNumber(row) {
      if (
        !row.productNameNew.includes('板材') &&
        !row.productNameNew.includes('砌块')
      ) {
        return;
      }
      // 计算原规格体积
      let originVolume = 0;
      let sumVolume = 0;
      originVolume = this._calcVolume(this.poList[0].specification);
      console.log(originVolume, 'originVolume');
      // 计算修补总体积
      sumVolume = this._calcModelVSWordcount();
      console.log(sumVolume, 'sumVolume');

      if (sumVolume > originVolume) {
        row.sumNew = 0;
        this.$alert('修补规格总体积不能大于原规格体积！');
      }
    },
    // 判断产品规格
    modelChange(row) {
      // 判断修补规格高度不能大于原规格高度
      if (!row.name.includes('板材') && !row.name.includes('砌块')) {
        return true;
      }
      let currentLong = Number(row.specification.split('*')[0]);
      let currentHeight = row.specification.split('*')[2];
      currentHeight = Number(
        currentHeight.substr(0, currentHeight.indexOf('cm'))
      );
      if (currentLong > this.originLong) {
        this.$alert('修补规格长度不能大于原规格长度！');
        return false;
      }
      if (currentHeight > this.originHeight) {
        this.$alert('修补规格高度不能大于原规格高度！');
        return false;
      }
      return true;
    },
    // 确定选择
    confirmChoose(data) {
      console.log(data, 'data');
      let list = [];
      let is = true;
      if (data.length > 0) {
        list = JSON.parse(JSON.stringify(data)).map((item) => {
          is = this.modelChange(item);
          return {
            productCodeNew: item.code,
            productNameNew: item.name,
            // productUnitWeight: item.netWeight,
            // weightUnit: item.weightUnit,
            specificationNew: item.specification,
            sumNew: ''
          };
        });
        if (!is) {
          return;
        }
        this.newPoList = this.newPoList.concat(list);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.basic-details-title {
  margin: 10px 0;
}
.title {
  font-size: 16px;
  line-height: 45px;
}
.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.create-form .el-form-item {
  // margin-bottom: 15px !important;
}
</style>