优化

src/views/material/product/components/aridRegion.vue

@@ -1,440 +1,449 @@
 <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">
-          
-            <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>
+  <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">
+
+          <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">
+            </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>
-          </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>
+
+          </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>
-          </el-col>
- 
 
-          <el-col :span="8">
-            <el-form-item label="位置" prop="region">
-              <el-input v-model="form.region" >
-              </el-input>
+          </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>
-          </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>
+
+          </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>
-  
-          </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>
+          </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>
-  
-  
-      <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>
+
+      <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: [
+<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' }
+        ],
+        region: [
+        { 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'
+          //   }
+
           {
-              validator: (_rule, value, callback) => {
-                if (!value) {
-                  return callback(new Error('请输入干燥区编码'));
-                }
-                if (value == this.code+ '-') {
-                  return callback(new Error('请完善干燥区编码'));
-                }
-                callback();
-              },
-              trigger: 'blur'
-            }
-          ]
+            required: true,
+            message: '请输入干燥区编码',
+            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)
+
+      })
     },
-    created() {
-  
+
+    handleHjCode() {
+
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.hjCodeFalg = true;
+        }
+      })
+
+
     },
-    computed: {
-  
-  
-  
-  
+
+
+    addHjCode() {
+      this.$prompt('请输入', '添加干燥区数', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /[1-9]\d*/,
+        inputErrorMessage: '请输入正整数'
+      }).then(({ value }) => {
+
+        for (var i = 0; i < value; i++) {
+          let obj1111 = {
+            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(() => {
+
+
+
+      });
     },
-    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('至少保留一个干燥区！');
+
+    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;
         }
-  
-        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;
+      }
+
+
+      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;
           }
-        })
-  
-  
-      },
-  
-  
-      addHjCode() {
-        this.$prompt('请输入', '添加干燥区数', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          inputPattern: /[1-9]\d*/,
-          inputErrorMessage: '请输入正整数'
-        }).then(({ value }) => {
-  
-          for (var i = 0; i < value; i++) {
+
+          for (let j = 0; j < this.form.lineNum; j++) {
             let obj1111 = {
-              code: this.code + '-',
+              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)
+
+
+
           }
-        }).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;
-          }
+
+
+
+          currentLetterIndex++; // 自增索引
+          this.hjCodeFalg = false
         }
-  
-  
-        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;
+
+      } 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--;
             }
-  
-  
-  
-  
-            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
+            code = codeEng[remainder - 1] + code;
+            index = quotient;
           }
+
+
+
+
+          let obj1111 = {
+            code: this.hjForm.type === 1 ? 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()
-            })
-          }
-        })
       }
-  
-  
-  
-  
+
+
+
+    },
+
+    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>
+};
+</script>
+    
+<style lang="scss" scoped>
+.el-form-item {
+  margin-bottom: 20px !important;
+}
+</style>