kd-aiot-frontend/src/views/material/product/components/WarehouseInfo.vue

<template>
  <div class="other">
    <el-form label-width="120px" ref="form" :model="form">
      <div class="divider">
        <div class="title">
          <div class="ele-bg-primary"></div>
          <span>仓储配置</span>
        </div>
        <div class="ele-bg-primary ele-width"></div>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="启用库存预警">
            <el-radio v-model="form.isWarn" :label="1">是</el-radio>
            <el-radio v-model="form.isWarn" :label="0">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点模式" prop="inventoryMode">
            <el-radio-group
              v-model="form.inventoryMode"
              @input="inventoryModeChange"
            >
              <el-radio :label="1">逐个盘点</el-radio>
              <el-radio :label="2">批量盘点</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="允许拆包" prop="isUnpack">
            <el-switch
              v-model="form.isUnpack"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安全库存" prop="secureInventory">
            <el-input v-model="form.secureInventory" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最小库存" prop="minInventory">
            <el-input v-model="form.minInventory" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最大库存" prop="maxInventory">
            <el-input v-model="form.maxInventory" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="质保预警参考" prop="warrantyWarnRefer">
            <DictSelection
              dictName="质保预警参考"
              clearable
              v-model="form.warrantyWarnRefer"
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保质期">
            <div class="form-line">
              <el-input v-model="form.warrantyPeriod" />
              <DictSelection
                class="line-select"
                dictName="保质期单位"
                clearable
                v-model="form.warrantyPeriodUnit"
              >
              </DictSelection>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="rules_box">
        <el-button type="primary" @click="addPackingRules"
          >添加包装组</el-button
        >
        <el-tabs
          v-model="packingRules"
          editable
          @tab-click="handleClick"
          @edit="handleTabsEdit"
        >
          <el-tab-pane
            v-for="(items, indexs) in packagingSpecification"
            :label="items.name"
            :name="items.code"
          >
            <div class="rules_box_tabs">
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="编码">
                    <el-input disabled v-model="items.code"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="名称">
                    <el-input v-model="items.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否启用">
                    <el-radio-group
                      v-model="items.status"
                      @input="statusChange($event, indexs)"
                    >
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="最小包装单元">
                    <el-input
                      class="packingUnit"
                      v-model="items.minPackageCell"
                      placeholder="请输入内容"
                    ></el-input>
                    <div class="packingUnit">
                      <DictSelection
                        dictName="计量单位"
                        clearable
                        v-model="items.packageUnit"
                        :isProhibit="true"
                      >
                      </DictSelection>
                    </div>
                    <span>/</span>
                    <div class="lastPackingUnit">
                      <DictSelection
                        dictName="计量单位"
                        clearable
                        v-model="items.minConversionUnit"
                      >
                      </DictSelection>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="内包装单元">
                    <el-input
                      class="packingUnit"
                      v-model="items.inPackageCell"
                      placeholder="请输入内容"
                    ></el-input>
                    <div class="packingUnit">
                      <DictSelection
                        dictName="计量单位"
                        clearable
                        v-model="items.minConversionUnit"
                      >
                      </DictSelection>
                    </div>
                    <span>/</span>
                    <div class="lastPackingUnit">
                      <DictSelection
                        dictName="计量单位"
                        clearable
                        v-model="items.inConversionUnit"
                      >
                      </DictSelection>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="外包装单元">
                    <el-input
                      class="packingUnit"
                      v-model="items.outPackageCell"
                      placeholder="请输入内容"
                    ></el-input>
                    <div class="packingUnit">
                      <DictSelection
                        dictName="计量单位"
                        clearable
                        v-model="items.inConversionUnit"
                      >
                      </DictSelection>
                    </div>
                    <span>/</span>
                    <div class="lastPackingUnit">
                      <DictSelection
                        dictName="计量单位"
                        clearable
                        v-model="items.outConversionUnit"
                      >
                      </DictSelection>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
    <el-dialog title="添加包装组" :visible.sync="dialogVisible" width="50%">
      <el-form label-width="120px" ref="form" :model="ruleItem">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="包装名称">
              <el-input v-model="ruleItem.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装编码">
              <el-input disabled v-model="ruleItem.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ruleConig">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import { deletePackageDisposition } from '@/api/material/list.js';
  import { getCode } from '@/api/codeManagement/index.js';
  export default {
    components: { deptSelect, personSelect },
    props: {
      form: {
        type: Object,
        default: () => {}
      },
      packageDispositionVOList: {
        type: Array,
        default: () => []
      },
      measuringUnit: {
        type: String,
        default() {
          return '';
        }
      }
    },
    watch: {
      measuringUnit(val) {
        this.packagingSpecification = this.packagingSpecification.map(
          (item) => {
            return { ...item, packageUnit: val };
          }
        );
      },
      packagingSpecification: {
        handler(val) {
          this.$emit('change', val);
        },
        deep: true
      },
      packageDispositionVOList: {
        handler(packageDispositionVOList) {
          if (packageDispositionVOList.length > 0) {
            let codeList = new Set(
              packageDispositionVOList.map((item) => item.code)
            );
            console.log(codeList);
            let arr = [];
            codeList.forEach((code) => {
              let obj = {};
              let filters = packageDispositionVOList.filter(
                (item) => item.code == code
              );
              this.idsList.push({
                code,
                ids: filters.map((item) => item.id)
              });
              filters.map((item) => {
                switch (item.sort) {
                  case '0':
                    obj.code = item.code;
                    obj.name = item.name;
                    obj.status = Number(item.status);
                    break;
                  case '1':
                    obj.minPackageCell = item.packageCell;
                    obj.packageUnit = item.packageUnit;
                    obj.minConversionUnit = item.conversionUnit;
                  case '2':
                    obj.inPackageCell = item.packageCell;
                    obj.inConversionUnit = item.conversionUnit;
                    break;
                  case '3':
                    obj.outPackageCell = item.packageCell;
                    obj.outConversionUnit = item.conversionUnit;
                    break;
                }
              });
              arr.push(obj);
            });
            this.packagingSpecification = arr;
            this.packingRules = arr[0].code;
          } else {
            this.packagingSpecification = [];
          }
        },
        deep: true
      }
    },
    data() {
      return {
        idsList: [],
        packagingSpecification: [],
        packingRules: '',
        dialogVisible: false,
        ruleItem: {
          code: '',
          name: '',
          status: 0,
          minPackageCell: '',
          packageUnit: this.measuringUnit,
          minConversionUnit: '',
          inPackageCell: '',
          inConversionUnit: '',
          outPackageCell: '',
          inConversionUnit: '',
          outConversionUnit: ''
        },
        option: [
          {
            label: 'KG',
            value: 'KG'
          }
        ]
      };
    },
    created() {
      console.log(
        'this.packageDispositionVOList-',
        this.packageDispositionVOList
      );
    },
    methods: {
      statusChange(value, indexs) {
        console.log(value);
        console.log(this.packagingSpecification);
        if (value == 1) {
          this.packagingSpecification = this.packagingSpecification.map(
            (item, index) => {
              if (indexs == index) {
                item.status = 1;
              } else {
                item.status = 0;
              }
              return item;
            }
          );
        }
      },
      ruleConig() {
        console.log(this.ruleItem);
        if (this.packagingSpecification.length == 0) {
          this.ruleItem.status = 1;
        } else {
          this.ruleItem.status = 0;
        }
        this.packagingSpecification.push(this.ruleItem);
        this.dialogVisible = false;
        this.packingRules = this.ruleItem.code;
      },
      async addPackingRules() {
        let code = await getCode('package_disposition');
        this.ruleItem = {
          code: code,
          name: '',
          status: 0,
          minPackageCell: '',
          packageUnit: this.measuringUnit,
          minConversionUnit: '',
          inPackageCell: '',
          inConversionUnit: '',
          outPackageCell: '',
          inConversionUnit: '',
          outConversionUnit: ''
        };
        this.dialogVisible = true;
      },
      handleClick(val) {
        console.log(val);
        this.packingRules = val.name;
      },
      // 删除tab
      handleTabsEdit(targetName, action) {
        if (action == 'remove') {
          let index = this.packagingSpecification.findIndex(
            (item) => item.code == targetName
          );
          let idsIndex = this.idsList.findIndex(
            (item) => item.code == targetName
          );
          if (this.idsList.length > 0 && idsIndex > -1) {
            let ids = this.idsList.filter(
              (item) => item.code == this.packagingSpecification[index].code
            )[0].ids;
            deletePackageDisposition(ids).then(() => {
              this.idsList = this.idsList.filter(
                (item) => item.code != this.packagingSpecification[index].code
              );
              this.packagingSpecification.splice(index, 1);
            });
          } else {
            this.packagingSpecification.splice(index, 1);
          }
        }
      },
      inventoryModeChange(value) {
        if (value == 1) {
          this.form.isUnpack = 1;
        } else {
          this.form.isUnpack = 0;
        }
      },
      // 选择所属部门
      searchDeptNodeClick(id, info) {
        // 根据部门获取人员
        const params = { executeGroupId: id };
        this.$nextTick(() => {
          this.$refs.directorRef.getList(params);
        });
      },
      //选择负责人
      handleDirectorChange(id, info) {}
    }
  };
</script>

<style lang="scss" scoped>
  .other {
    background: #fff;
    padding: 1px 17px;
  }
  .divider {
    margin: 0px 0 20px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      div {
        width: 8px;
        height: 20px;
        margin-right: 10px;
      }
      span {
        font-size: 20px;
      }
    }
    .ele-width {
      width: 100%;
      height: 2px;
    }
  }
  .form-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line-select {
      margin-left: 15px;
    }
  }
  .rules_box {
    margin: 0px 20px 20px 20px;
    .rules_box_tabs {
      margin: 20px 0;
      :deep(.el-form-item__content) {
        > div {
          display: inline-block;
        }
      }
    }
  }
  .packingUnit {
    width: 200px;
    margin-right: 10px;
  }
  .lastPackingUnit {
    width: 200px;
    margin-left: 10px;
  }
</style>