优化

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

@@ -1,90 +1,439 @@
 <template>
-    <ele-modal :visible.sync="visible" title="干燥区" width="80%" @close="cancel">
+    <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" />
+            </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" />
+            </el-form-item>
+          </el-col>
+  
+  
+          <el-col :span="8">
+            <el-form-item label="长" prop="vehicleLen">
+              <el-input v-model="form.vehicleLen" :disabled="form.positionList.length">
+                <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">
+                <template slot="append">cm</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="高" prop="hight">
+              <el-input v-model="form.hight" :disabled="form.positionList.length">
+                <template slot="append">cm</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
 
-        <ele-pro-table ref="table" row-key="id" :columns="columns" :datasource="datasource" :default-expand-all="false"
-            :need-page="false" cache-key="systemMenuTable" @done="onDone">
-            <!-- 表头工具栏 -->
-            <template v-slot:toolbar>
-                <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openAdd">
-                    添加
-                </el-button>
-                <el-button class="ele-btn-icon" size="small" @click="expandAll">
-                    展开全部
-                </el-button>
-                <el-button class="ele-btn-icon" size="small" @click="foldAll">
-                    折叠全部
-                </el-button>
-               
+          <el-col :span="8">
+            <el-form-item label="位置" prop="region">
+              <el-input v-model="form.region" :disabled="form.positionList.length">
+              </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>
-        </ele-pro-table>
-
-        <aridRegionAdd ref="regionAddRef"></aridRegionAdd>
-
+          </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 +
+                '.altitude'
+                " :rules="tableFormRules.altitude">
+                <el-input placeholder="请输入" type="number" v-model.number="scope.row.altitude"></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 +
+                '.volume'
+                " :rules="tableFormRules.volume">
+                <el-input placeholder="请输入" type="number" v-model.number="scope.row.volume"></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>
+  </template>
     
-<script>
-import aridRegionAdd from './aridRegionAdd'
-export default {
-    components: {
-        aridRegionAdd
-    },
-
+  <script>
+  import { categoryVehicle, categoryVehicleList } from '@/api/material/product';
+  export default {
+  
     data() {
-        return {
-
-            columns: [
-                {
-                    columnKey: 'index',
-                    type: 'index',
-                    width: 45,
-                    align: 'center',
-                    showOverflowTooltip: true,
-                    fixed: 'left'
-                },
-                {
-                    prop: 'name',
-                    label: '菜单名称',
-                    showOverflowTooltip: true,
-                    minWidth: 110,
-                    slot: 'name'
-                },
-            ],
-            visible: false,
-
-            menuList: [],
-        };
+      const defaultForm = {
+        categoryId: null,
+        levelNum: null,
+        lineNum: null,
+        hight: null,
+        wilde: null,
+        vehicleLen: null,
+        positionList: [],
+        removeIds: []
+      };
+  
+      return {
+        visible: false,
+  
+        form: {
+          ...defaultForm
+        },
+  
+  
+        hjCodeFalg: false,
+  
+        hjForm: { code: '', type: 1 },
+  
+        rules: {
+          levelNum: [
+            { required: true, message: '请输入层数', trigger: 'blur' }
+          ],
+          lineNum: [
+            { required: true, message: '请输入列数', trigger: 'blur' }
+          ],
+        },
+  
+        tableFormRules: {
+          code: {
+            required: true,
+            message: '请输入干燥区编号',
+            trigger: 'blur'
+          },
+        }
+  
+      };
     },
     created() {
-
+  
+    },
+    computed: {
+  
+  
+  
+  
     },
-
     methods: {
-        open(row) {
-            this.visible = true;
-
-        },
-        cancel() {
-            this.visible = false;
-
-
-        },
-
-        /* 表格渲染完成回调 */
-        onDone({ data }) {
-
-            this.menuList = data;
-
-        },
-
-        openAdd() {
-            this.$refs.regionAddRef.open()
-        },
-
-
+      open(row) {
+  
+  
+        this.visible = true;
+  
+  
+        this.form.categoryId = row.id
+        this.getList()
+      },
+      cancel() {
+        this.$refs.form.clearValidate();
+        this.form = { ...this.defaultForm };
+        this.form.positionList = []
+        this.visible = false;
+  
+  
+  
+      },
+  
+      getList() {
+        categoryVehicleList(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: '',
+              length: this.form.vehicleLen ? Number(this.form.vehicleLen / Number(this.form.lineNum)).toFixed(0) : '',
+              breadth: this.form.wilde,
+              altitude: this.form.hight ? Number(this.form.hight / Number(this.form.levelNum)).toFixed(0) : '',
+              volume: ''
+            };
+  
+            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: code + (j + 1),
+                length: this.form.vehicleLen ? Number(this.form.vehicleLen / 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: '',
+                volume: ''
+              };
+  
+              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 ? code : ruleName + (i + 1),
+              length: this.form.vehicleLen ? Number(this.form.vehicleLen / 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: '',
+              volume: ''
+            };
+            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) {
+            categoryVehicle(this.form).then(res => {
+              this.cancel()
+            })
+          }
+        })
+      }
+  
+  
+  
+  
     }
-};
-</script>
+  };
+  </script>
     
-<style lang="scss" scoped></style>
+  <style lang="scss" scoped>
+  .el-form-item {
+    margin-bottom: 20px !important;
+  }
+  </style>
     

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

@@ -1,210 +0,0 @@
-<template>
-    <ele-modal :visible.sync="visible" append-to-body title="干燥区新增" width="75%" @close="cancel">
-
-
-        <div class="area">
-            <div class="mt20 reservoirArea">
-                <span>库区</span>
-                <el-button type="primary" icon="el-icon-plus" size="small" @click="addArea">添加库区
-                </el-button>
-            </div>
-            <div class="mt10">
-                <el-form :model="areaForm" ref="areaFormName" class="areaForm" :rules="areaRules">
-                    <el-table ref="multipleTable" :data="areaForm.warehouseAreasSaveList" tooltip-effect="dark"
-                        style="width: 100%" stripe :header-cell-style="{ background: '#EEEEEE', border: 'none' }">
-                        <el-table-column label="干燥区名称" prop="name">
-                            <template slot-scope="{ row, $index }">
-                                <el-form-item :prop="'warehouseAreasSaveList.' + $index + '.name'" :rules="areaRules.name">
-                                    <el-input placeholder="请输入" clearable v-model="row.name"></el-input>
-                                </el-form-item>
-                            </template>
-                        </el-table-column>
-
-                        <el-table-column label="干燥区编码" prop="code">
-                            <template slot-scope="{ row, $index }">
-                                <el-form-item :prop="'warehouseAreasSaveList.' + $index + '.code'" :rules="areaRules.code">
-                                    <el-input placeholder="请输入" clearable v-model="row.code"></el-input>
-                                </el-form-item>
-                            </template>
-                        </el-table-column>
-
-                        <el-table-column label="长度(cm)" prop="length">
-                            <template slot-scope="{ row, $index }">
-                                <el-form-item :prop="'warehouseAreasSaveList.' + $index + '.length'"
-                                    :rules="areaRules.length">
-                                    <el-input placeholder="请输入" clearable v-model="row.length"></el-input>
-                                </el-form-item>
-                            </template>
-                        </el-table-column>
-
-
-
-                        <el-table-column label="宽度(cm)" prop="breadth">
-                            <template slot-scope="{ row, $index }">
-                                <el-form-item :prop="'warehouseAreasSaveList.' + $index + '.breadth'"
-                                    :rules="areaRules.breadth">
-                                    <el-input placeholder="请输入" clearable v-model="row.breadth"></el-input>
-                                </el-form-item>
-                            </template>
-                        </el-table-column>
-
-                        <el-table-column label="位置" prop="region" min-width="120">
-                            <template slot-scope="{ row, $index }">
-                                <el-form-item :prop="'warehouseAreasSaveList.' + $index + '.region'"
-                                    :rules="areaRules.region">
-                                    <el-input placeholder="请输入" clearable v-model="row.region"></el-input>
-                                </el-form-item>
-                            </template>
-                        </el-table-column>
-
-
-
-                        <el-table-column label="车位数量">
-                            <template slot-scope="scope">
-                                <el-form-item :prop="'warehouseAreasSaveList.' + scope.$index + '.quantity'
-                                    " :rules="areaRules.quantity">
-                                    <el-input placeholder="请输入" type="number" @mousewheel.native.prevent @input="(value) =>
-                                    (scope.row.quantity = value.replace(
-                                        /^(0+)|[^\d]+/g,
-                                        ''
-                                    ))
-                                        " v-model.number="scope.row.quantity" clearable></el-input>
-                                </el-form-item>
-
-                            </template>
-                        </el-table-column>
-
-
-                        <el-table-column label="操作" fixed="right" width="150">
-                            <template slot-scope="{ row, $index }">
-                                <el-button type="text" v-if="row.isEdit" @click="saveArea($index)">保存</el-button>
-                                <el-button type="text" v-else @click="addShelf(row, $index)">添加货架</el-button>
-                                <el-button type="text" @click="remove1($index, row)">删除库区</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </el-form>
-            </div>
-        </div>
-
-    </ele-modal>
-</template>
-    
-<script>
-
-export default {
-
-    data() {
-        return {
-            visible: false,
-            areaForm: {
-                warehouseAreasSaveList: [], //库区
-                areaGoodsshelvesList: [], //货架
-
-            },
-
-            areaRules: {
-                code: { required: true, message: '请输入库区编号', trigger: 'blur' },
-            }
-        };
-    },
-    created() {
-
-    },
-
-    methods: {
-        open() {
-            this.visible = true;
-
-        },
-        cancel() {
-            this.visible = false;
-        },
-
-
-        addArea() {
-
-            this.areaForm.warehouseAreasSaveList.push({
-                code: '',
-                name: '',
-                isEdit: true
-
-            });
-        },
-
-        saveArea(index) {
-            
-        }
-
-
-
-    }
-};
-</script>
-    
-<style lang="scss" scoped>
-.p20 {
-    padding: 20px;
-}
-
-.mt20 {
-    margin-top: 20px;
-}
-
-.mt10 {
-    margin-top: 10px;
-}
-
-::v-deep .el-select {
-    width: 100%;
-}
-
-.el-form-item {
-    margin-bottom: 22px;
-}
-
-.areaForm {
-    .el-form-item {
-        margin-bottom: 0;
-    }
-}
-
-.warehouseAdd {
-    .el-row {
-        display: block;
-    }
-
-    header {
-        display: flex;
-        justify-content: space-between;
-
-        .title {
-            font-size: 20px;
-            color: #333;
-            font-weight: bold;
-        }
-    }
-}
-
-.reservoirArea {
-    display: flex;
-    justify-content: space-between;
-
-    span {
-        font-size: 14px;
-    }
-}
-
-.center {
-    text-align: center;
-}
-
-.el-select {
-    display: block;
-}
-
-::v-deep input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-}</style>
-
-