66

src/views/produce/components/feeding/components/deviceBom.vue

@@ -26,7 +26,9 @@
 
           <div class="rx ww33">
             <div class="lable rx-cc">设备名称</div>
-            <div class="content">{{ item.name }}</div>
+            <div class="content">
+              <div>{{ item.name }} </div>
+            </div>
           </div>
         </div>
 
@@ -48,52 +50,367 @@
           <div class="rx ww33">
             <div class="lable rx-cc">炉次号</div>
             <div class="content content_num rx-sc">
-              <el-input size="mini" v-model="item.extInfo.heatNumber" placeholder="请输入炉次号" />
+              <el-input
+                size="mini"
+                v-model="item.extInfo.heatNumber"
+                placeholder="请输入炉次号"
+              />
             </div>
           </div>
         </div>
 
-        
         <div class="sort_index">
-          {{ index + 1}}
+          {{ index + 1 }}
         </div>
 
         <div class="del_box">
-          <el-link type="danger" icon="el-icon-delete" @click="getDelete(index)"></el-link>
+          <el-link
+            type="danger"
+            icon="el-icon-delete"
+            @click="getDelete(index)"
+          ></el-link>
+        </div>
+
+        <div class="tag_box" v-if="clientEnvironmentId == 2">
+          <el-link style="color: #157a2c" @click="handleStorage(index)"
+            >货位</el-link
+          >
         </div>
       </div>
     </div>
+
+    <el-dialog
+      title="货位"
+      :visible.sync="popupShow"
+      :before-close="popClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      width="680px"
+    >
+      <el-form size="mini" :model="formData" label-width="96px">
+        <el-form-item label="层数:" prop="levelNum">
+          <el-input v-model="formData.levelNum" clearable />
+        </el-form-item>
+
+        <el-form-item label="列数:" prop="lineNum">
+          <el-input v-model="formData.lineNum" clearable />
+        </el-form-item>
+        <div class="rx-ac" style="margin-top: 8px">
+          <el-button size="mini" type="primary" @click="handleHjCode()"
+            >自动生成</el-button
+          >
+          <el-button size="mini" @click="addHjCode()">添加货位</el-button>
+        </div>
+      </el-form>
+
+      <div class="content_table2">
+        <div class="head row rx-sc">
+          <div class="item ww70">货位</div>
+          <div class="item ww30">操作</div>
+        </div>
+
+        <div class="table">
+          <div
+            class="tr row rx-sc"
+            v-for="(it, idx) in list[listIndex].extInfo.positionList"
+            :key="idx"
+          >
+            <div class="item ww70 content_num">
+              <el-input v-model="it.code" size="mini"></el-input>
+            </div>
+
+            <div class="item ww30 rx-cc">
+              <el-link
+                type="danger"
+                icon="el-icon-delete"
+                @click="removeGoods(idx)"
+              ></el-link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template slot="footer">
+        <el-button size="mini" @click="handleClose()">取 消</el-button>
+        <el-button size="mini" type="primary" @click="handleOk()"
+          >保 存</el-button
+        >
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'deviceBom',
-  props: {
-    list: {
-      type: Array,
-      default: () => []
+  export default {
+    name: 'deviceBom',
+    props: {
+      list: {
+        type: Array,
+        default: () => []
+      },
+      isDetails: {
+        type: Boolean,
+        default: false
+      }
     },
-    isDetails: {
-      type: Boolean,
-      default: false
-    }
-  },
 
-  computed: {},
+    computed: {
+      clientEnvironmentId() {
+        return this.$store.state.user.info.clientEnvironmentId;
+      }
+    },
+
+    data() {
+      return {
+        popupShow: false,
+        formData: {
+          levelNum: null,
+          lineNum: null,
+          type: 3,
+          code: 'A'
+        },
+        listIndex: 0
+      };
+    },
+
+    methods: {
+      getDelete(idx) {
+        this.list.splice(idx, 1);
+      },
+
+      handleStorage(idx) {
+        this.listIndex = idx || 0;
+
+        this.formData.lineNum =
+          this.list[this.listIndex].extInfo.lineNum || null;
+        this.formData.levelNum =
+          this.list[this.listIndex].extInfo.levelNum || null;
+        this.popupShow = true;
+      },
+
+      handleHjCode() {
+        if (!this.formData.levelNum) {
+          this.$message.error('请输入层数');
+          return false;
+        }
+
+        if (!this.formData.lineNum) {
+          this.$message.error('请输入列数');
+          return false;
+        }
+        this.handleMine();
+      },
+
+      handleMine() {
+        const ruleName = this.formData.code;
+        let preCode = 0;
+        let codeEng = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let currentLetterIndex = 0;
+        let 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.formData.type == 3) {
+          for (let i = 0; i < this.formData.lineNum; 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);
 
-  data() {
-    return {};
-  },
+              if (remainder === 0) {
+                remainder = codeEng.length;
+                quotient--;
+              }
+              code = codeEng[remainder - 1] + code;
+              index = quotient;
+            }
 
-  methods: {
-    getDelete(idx) {
-      this.list.splice(idx, 1);
+            for (let j = 0; j < this.formData.levelNum; j++) {
+              let obj1111 = {
+                code: code + (j + 1)
+              };
+
+              positionList.push(obj1111);
+            }
+            console.log(positionList);
+            this.$set(
+              this.list[this.listIndex].extInfo,
+              'positionList',
+              positionList
+            );
+            this.$set(
+              this.list[this.listIndex].extInfo,
+              'lineNum',
+              this.formData.lineNum
+            );
+            this.$set(
+              this.list[this.listIndex].extInfo,
+              'levelNum',
+              this.formData.levelNum
+            );
+
+            currentLetterIndex++; // 自增索引
+          }
+        } 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.formData.type === 1 ? code : ruleName + (i + 1)
+            };
+            positionList.push(obj1111);
+
+            currentLetterIndex++; // 自增索引
+          }
+        }
+      },
+
+      popClose() {
+        this.listIndex = 0;
+        this.popupShow = false;
+      },
+      removeGoods(idx) {
+        if (this.list[this.listIndex].extInfo.positionList == 1) {
+          this.$message.error('至少保留一个货架！');
+          return false;
+        }
+
+        this.list[this.listIndex].extInfo &&
+          this.list[this.listIndex].extInfo.positionList.splice(idx, 1);
+      },
+      addHjCode() {
+        this.list[this.listIndex].extInfo.positionList.unshift({
+          code: ''
+        });
+        this.$forceUpdate();
+      },
+
+      handleClose() {
+        this.list[this.listIndex].extInfo.positionList = [];
+        this.list[this.listIndex].extInfo.lineNum = null;
+        this.list[this.listIndex].extInfo.levelNum = null;
+
+        this.popupShow = false;
+        this.formData.levelNum = null;
+        this.formData.lineNum = null;
+        this.listIndex = 0;
+      },
+
+      handleOk() {
+        this.listIndex = 0;
+        this.popupShow = false;
+      }
     }
-  }
-};
+  };
 </script>
 
 <style scoped lang="scss">
+  .tag_box {
+    position: absolute;
+    right: 22px;
+    top: 0px;
+  }
+
+  .content_table2 {
+    width: 100%;
+    margin-top: 6px;
+    border-right: 1px solid #e3e5e5;
 
+    .row {
+      width: 100%;
+
+      .item {
+        color: #404446;
+        font-size: 14px;
+        padding-left: 6px;
+      }
+
+      .color157 {
+        color: #157a2c;
+      }
+
+      .ww70 {
+        width: 70%;
+      }
+
+      .ww30 {
+        width: 30%;
+      }
+    }
+
+    .head {
+      height: 32px;
+      background: #f7f9fa;
+      border-top: 1px solid #e3e5e5;
+      border-left: 1px solid #e3e5e5;
+
+      .item {
+        height: 32px;
+        line-height: 32px;
+        border-right: 1px solid #e3e5e5;
+        box-sizing: border-box;
+      }
+    }
+
+    .tr {
+      border-top: 1px solid #e3e5e5;
+      border-left: 1px solid #e3e5e5;
+
+      .item {
+        font-size: 12px;
+        min-height: 32px;
+        display: flex;
+        align-items: center;
+        border-right: 1px solid #e3e5e5;
+        box-sizing: border-box;
+        white-space: normal;
+        word-break: break-all;
+      }
+
+      &:last-child {
+        border-bottom: 1px solid #e3e5e5;
+      }
+    }
+  }
+
+  .content_num {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    --input-background-color: #f0f8f2;
+  }
 </style>