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

<template>
    <ele-modal :visible.sync="visible" title="干燥区管理" width="60%" @close="cancel">
  
  
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="8">
            {{  form.positionList.length != 0  }}
            <el-form-item label="行数" prop="levelNum">
              <el-input v-model="form.levelNum" :disabled="form.positionList.length != 0 " />
            </el-form-item>
          </el-col>
  
          <el-col :span="8">
            <el-form-item label="列数" prop="lineNum">
              <el-input v-model="form.lineNum" :disabled="form.positionList.length != 0" />
            </el-form-item>
          </el-col>
  
  
          <el-col :span="8">
            <el-form-item label="长" prop="regionLen">
              <el-input v-model="form.regionLen" :disabled="form.positionList.length != 0">
                <template slot="append">cm</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宽" prop="wilde">
              <el-input v-model="form.wilde" :disabled="form.positionList.length != 0 ">
                <template slot="append">cm</template>
              </el-input>
            </el-form-item>
          </el-col>
 

          <el-col :span="8">
            <el-form-item label="位置" prop="region">
              <el-input v-model="form.region" :disabled="form.positionList.length != 0">
              </el-input>
            </el-form-item>
          </el-col>
  
  
          <el-col :span="8">
            <el-form-item>
              <el-button size="small" v-if="form.positionList.length == 0" type="primary"
                @click="handleHjCode">生成干燥区</el-button>
              <el-button size="small" v-else type="primary" @click="addHjCode">添加干燥区</el-button>
            </el-form-item>
  
          </el-col>
        </el-row>
      </el-form>
  
  
      <el-form :model="form" ref="tableForm" class="tableForm" :rules="tableFormRules">
        <el-table ref="multipleTable" :data="form.positionList" tooltip-effect="dark" style="width: 100%" stripe
          :header-cell-style="{ background: '#EEEEEE', border: 'none' }">
  
  
          <el-table-column label="干燥区编号" prop="code" min-width="120">
            <template slot-scope="{ row, $index }">
              <el-form-item :prop="'positionList.' + $index + '.code'" :rules="tableFormRules.code">
                <el-input placeholder="请输入" clearable v-model="row.code"></el-input>
              </el-form-item>
  
            </template></el-table-column>
          <el-table-column label="干燥区长(cm)" min-width="120">
            <template slot-scope="scope">
              <el-form-item :prop="'positionList.' +
                scope.$index +
                'length'
                " :rules="tableFormRules.length">
                <el-input placeholder="请输入" type="number" v-model.number="scope.row.length
                  " clearable></el-input>
              </el-form-item>
  
            </template>
          </el-table-column>
          <el-table-column label="干燥区宽(cm)" min-width="120">
            <template slot-scope="scope">
              <el-form-item :prop="'positionList.' +
                scope.$index +
                '.breadth'
                " :rules="tableFormRules.breadth">
                <el-input placeholder="请输入" type="number" v-model.number="scope.row.breadth"></el-input>
              </el-form-item>
  
            </template>
          </el-table-column>

     
          <el-table-column label="基本干燥区面积(cm²)" min-width="120">
            <template slot-scope="scope">
              <el-form-item :prop="'positionList.' +
                scope.$index +
                '.area'
                " :rules="tableFormRules.area">
                <el-input placeholder="请输入" type="number" v-model.number="scope.row.area"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
  
          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ $index, row }">
              <el-button type="text" @click="removeGoods($index, row)">删除干燥区</el-button>
            </template>
          </el-table-column>
  
  
        </el-table>
      </el-form>
  
  
      <div slot="footer" class="footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
  
  
      <!-- 规则货架编号 -->
      <el-dialog title="规则货架编号" append-to-body :visible.sync="hjCodeFalg" width="35%">
        <el-form :model="hjForm">
          <el-form-item label="规则类型" label-width="100px">
            <el-radio-group v-model="hjForm.type">
              <el-radio :label="1">字母</el-radio>
              <el-radio :label="2">字母+数字</el-radio>
              <el-radio :label="3">字母+数字(层级)</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="规则名称定义" label-width="100px">
            <el-input v-model="hjForm.code" @input="handleInput"></el-input>
            <span style="color: #dab8b8">注：只可输入大写A-Z</span>
          </el-form-item>
        </el-form>
  
        <span slot="footer" class="dialog-footer">
          <el-button @click="hjCodeFalg = false">取 消</el-button>
          <el-button @click="handleMine" type="primary">确 定</el-button>
        </span>
      </el-dialog>
  
  
    </ele-modal>
  </template>
    
  <script>
  import { aridRegion, aridRegionList } from '@/api/material/product';
  export default {
  
    data() {

 
      const defaultForm = {
        categoryId: null,
        levelNum: null,
        lineNum: null,
        hight: null,
        wilde: null,
        regionLen: null,
        positionList: [],
        removeIds: []
      };
  
      return {
        visible: false,
  
        form: {
          ...defaultForm
        },
  
        code: '',
  
        hjCodeFalg: false,
  
        hjForm: { code: '', type: 1 },
  
        rules: {
          levelNum: [
            { required: true, message: '请输入层数', trigger: 'blur' }
          ],
          lineNum: [
            { required: true, message: '请输入列数', trigger: 'blur' }
          ],
        },
  
        tableFormRules: {

        
          code: [
          {
              validator: (_rule, value, callback) => {
                if (!value) {
                  return callback(new Error('请输入干燥区编码'));
                }
                if (value == this.code+ '-') {
                  return callback(new Error('请完善干燥区编码'));
                }
                callback();
              },
              trigger: 'blur'
            }
          ]
        }
  
      };
    },
    created() {
  
    },
    computed: {
  
  
  
  
    },
    methods: {
      open(row) {
  
  
        this.visible = true;
  
        this.code = row.code
        this.form.categoryId = row.id
        this.getList()
      },
      cancel() {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm };
        this.form.positionList = []
        this.visible = false;
  
  
  
      },
  
      getList() {
        aridRegionList(this.form.categoryId).then(res => {
          if (res) {
            this.form = res
            this.form['removeIds'] = []
          }
        })
      },
  
      removeGoods(idx, row) {
        if (this.form.positionList.length == 1) {
          return this.$message.error('至少保留一个干燥区！');
        }
  
        this.$confirm(`是否删除这个干燥区？`).then(async () => {
          this.form.positionList.splice(idx, 1)
  
  
          this.form['removeIds'].push(row.id)
  
        })
      },
  
      handleHjCode() {
  
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.hjCodeFalg = true;
          }
        })
  
  
      },
  
  
      addHjCode() {
        this.$prompt('请输入', '添加干燥区数', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[1-9]\d*/,
          inputErrorMessage: '请输入正整数'
        }).then(({ value }) => {
  
          for (var i = 0; i < value; i++) {
            let obj1111 = {
              code: this.code + '-',
              length: this.form.regionLen ? Number(this.form.regionLen / Number(this.form.lineNum)).toFixed(0) : '',
              breadth: this.form.wilde,
              altitude: this.form.hight ? Number(this.form.hight / Number(this.form.levelNum)).toFixed(0) : '',
              area: ''
            };
  
            this.form.positionList.push(obj1111)
          }
        }).catch(() => {
  
  
  
        });
      },
  
      handleMine() {
        this.$refs.form.clearValidate()
        const ruleName = this.hjForm.code;
        let preCode = 0;
        let codeEng = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let currentLetterIndex = 0;
        this.form.positionList = []
  
        if (ruleName.length > 0) {
          // 计算初始索引
          let multiplier = Math.pow(codeEng.length, ruleName.length - 1);
          for (let i = 0; i < ruleName.length; i++) {
            currentLetterIndex +=
              (codeEng.indexOf(ruleName[i]) + 1) * multiplier;
            multiplier /= codeEng.length;
          }
        }
  
  
        if (this.hjForm.type == 3) {
          for (let i = 0; i < this.form.levelNum; i++) {
            // 获取当前字母
            let index = currentLetterIndex;
            let dividend = codeEng.length;
            let remainder;
            let quotient;
            let code = '';
  
  
            while (index > 0) {
              remainder = index % dividend;
              quotient = Math.floor(index / dividend);
  
              if (remainder === 0) {
                remainder = codeEng.length;
                quotient--;
              }
              code = codeEng[remainder - 1] + code;
              index = quotient;
            }
  
            for (let j = 0; j < this.form.lineNum; j++) {
              let obj1111 = {
                code: this.code + '-' + code + (j + 1),
                length: this.form.regionLen ? Number(this.form.regionLen / Number(this.form.lineNum)).toFixed(0) : '',
                breadth: this.form.wilde,
                altitude: this.form.hight ? Number(this.form.hight / Number(this.form.levelNum)).toFixed(0) : '',
                weightLimit: '',
                area: ''
              };
  
              this.form.positionList.push(obj1111)
  
  
  
            }
  
  
  
            currentLetterIndex++; // 自增索引
            this.hjCodeFalg = false
          }
  
        } else {
          let num = Number(this.form.levelNum) * Number(this.form.lineNum)
  
  
          for (let i = 0; i < num; i++) {
            // 获取当前字母
            let index = currentLetterIndex;
            let dividend = codeEng.length;
            let remainder;
            let quotient;
            let code = '';
  
  
            while (index > 0) {
              remainder = index % dividend;
              quotient = Math.floor(index / dividend);
  
              if (remainder === 0) {
                remainder = codeEng.length;
                quotient--;
              }
              code = codeEng[remainder - 1] + code;
              index = quotient;
            }
  
  
  
  
            let obj1111 = {
              code: this.hjForm.type === 1 ? this.code + '-' + code : this.code + '-' + ruleName + (i + 1),
              length: this.form.regionLen ? Number(this.form.regionLen / Number(this.form.lineNum)).toFixed(0) : '',
              breadth: this.form.wilde,
              altitude: this.form.levelNum ? Number(this.form.hight / Number(this.form.levelNum)).toFixed(0) : '',
              weightLimit: '',
              area: ''
            };
            this.form.positionList.push(obj1111)
  
  
            currentLetterIndex++; // 自增索引
            this.hjCodeFalg = false
          }
        }
  
  
  
      },
  
      handleInput(event) {
        // 只允许输入 A-Z 的大写字母
        let filteredValue = this.hjForm.code.replace(/[^A-Z]/g, '');
        this.hjForm.code = filteredValue;
      },
  
      save() {
        this.$refs.tableForm.validate((valid) => {
          if (valid) {

 
            aridRegion(this.form).then(res => {
              this.cancel()
            })
          }
        })
      }
  
  
  
  
    }
  };
  </script>
    
  <style lang="scss" scoped>
  .el-form-item {
    margin-bottom: 20px !important;
  }
  </style>