src/lang/i18n/en/module/basicData.js

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2021-03-04 16:13:51
  * @LastEditors: zwq
- * @LastEditTime: 2022-03-04 15:24:39
+ * @LastEditTime: 2022-03-09 11:16:12
  * @Description: file content
  */
 export default {
@@ -318,6 +318,7 @@ export default {
     LocationName: 'Location Name',
     LocationCode: 'Location Code',
     PerformTaskManual: 'Perform Task Manual',
-    processStorageLink: 'Process Storage Link'
+    processStorageLink: 'Process Storage Link',
+    SelectStorageType: 'Select Storage Type'
   }
 }

src/lang/i18n/zh/module/basicData.js

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2021-03-04 16:13:51
  * @LastEditors: zwq
- * @LastEditTime: 2022-03-07 09:14:33
+ * @LastEditTime: 2022-03-09 11:16:02
  */
 export default {
   visual: {
@@ -332,6 +332,7 @@ export default {
     LocationName: '库位名',
     LocationCode: '库位编码',
     PerformTaskManual: '手动执行任务',
-    processStorageLink: '工序关联库位'
+    processStorageLink: '工序关联库位',
+    SelectStorageType: '选择库位类型'
   }
 }

src/router/index.js

@@ -313,6 +313,14 @@ export const constantRoutes = [
           import('@/views/basicData/Warehouse/components/ProcessStorageManagement-info'),
         name: 'ProcessStorageManagementInfo',
         meta: { title: routerTitle.Warehouse.ProcessStorageManagement?.[language] || routerTitle.Warehouse.ProcessStorageManagement.en, icon: 'form', affix: true, required: true, requireToken: true }
+      },
+      {
+        path: '/ProcessStorageLink',
+        hidden: true,
+        component: () =>
+          import('@/views/basicData/Warehouse/components/processStorageLink'),
+        name: 'ProcessStorageLink',
+        meta: { title: routerTitle.Warehouse.ProcessStorageManagement?.[language] || routerTitle.Warehouse.ProcessStorageManagement.en, icon: 'form', affix: true, required: true, requireToken: true }
       }
     ]
   },

src/views/basicData/Warehouse/components/ProcessStorageManagement-info.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2020-12-29 15:41:11
  * @LastEditors: zwq
- * @LastEditTime: 2022-03-04 16:01:28
+ * @LastEditTime: 2022-03-09 09:57:41
  * @Description:
 -->
 <template>
@@ -25,13 +25,11 @@
         @clickBtn="handleClick"
       />
     </base-table>
-    <processStorage-link v-if="addOrUpdateVisible" ref="addOrUpdate" :area-id="listQuery.areaId" @refreshDataList="getList" />
   </div>
 </template>
 
 <script>
 import i18n from '@/lang'
-import processStorageLink from './processStorageLink.vue'
 import BaseTable from '@/components/BaseTable'
 import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
 import { timeFormatter } from '@/filters'
@@ -78,7 +76,7 @@ const tableProps = [
 
 export default {
   name: 'Shelf',
-  components: { BaseTable, MethodBtn, processStorageLink },
+  components: { BaseTable, MethodBtn },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -91,7 +89,6 @@ export default {
   },
   data() {
     return {
-      addOrUpdateVisible: false,
       tableBtn,
       trueWidth: 200,
       tableProps,
@@ -142,9 +139,11 @@ export default {
     },
     // 新增 / 修改
     addNew(id) {
-      this.addOrUpdateVisible = true
+      this.$router.push({
-      this.$nextTick(() => {
+        name: 'ProcessStorageLink',
-        this.$refs.addOrUpdate.init(id)
+        query: {
+          dictTypeId: id
+        }
       })
     },
     goback() {

src/views/basicData/Warehouse/components/processStorageLink.vue

@@ -1,175 +1,472 @@
 <!--
- * @Author: zwq
+ * @Author: gtz
- * @Date: 2020-12-29 16:37:56
+ * @Date: 2022-03-03 09:16:10
  * @LastEditors: zwq
- * @LastEditTime: 2022-03-04 16:54:51
+ * @LastEditTime: 2022-03-09 14:17:23
- * @Description:
+ * @Description: file content
+ * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
 -->
 <template>
-  <el-dialog
+  <div class="dashboard-container">
-    :title="$t('module.basicData.visual.stock') | i18nFilter"
+    <el-card class="dashboard-main">
-    :visible.sync="visible"
+      <el-row class="dashboard-title">
-    top="5vh"
+        <div class="dashboard-header-line" />
-  >
+        <div class="dashboard-header-title">WMS库存信息</div>
-    <div>
+      </el-row>
-      <div class="mainDiv" style="margin:10px 0 100px">
+      <el-row class="dashboard-legend">
-        <div class="title">货架一</div>
-        <div class="flexDiv">
         <div
-            v-for="count in 5"
+          v-for="item in cassetteStatusList"
-            :key="count"
+          :key="'cassette' + item.id"
-            class="wareBox"
+          class="dashboard-legend-cassette"
-            :class="[
-              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
-              { active: count === isActive }
-            ]"
-            @click="selectBox(count)"
         >
-            <div class="plat">库位{{ count }}</div>
-          </div>
-        </div>
-        <div class="flexDiv">
           <div
-            v-for="count in 5"
+            class="dashboard-legend-cassette-cricle"
-            :key="count"
+            :style="{ background: item.color }"
-            class="wareBox"
+          />
-            :class="[
+          {{ item.name }}
-              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
-              { active: count + 5 === isActive }
-            ]"
-            @click="selectBox(count + 5)"
-          >
-            <div class="plat">库位{{ count + 5 }}</div>
         </div>
-        </div>
+        |
-      </div>
-      <div class="line" />
-      <div class="mainDiv" style="margin:100px 0 10px">
-        <div class="title">货架二</div>
-        <div class="flexDiv">
         <div
-            v-for="count in 5"
+          v-for="item in portAttributeList"
-            :key="count"
+          :key="'port' + item.id"
-            class="wareBox"
+          class="dashboard-legend-port"
-            :class="[
+          :style="{ background: item.color }"
-              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
-              { active: count+10 === isActive }
-            ]"
-            @click="selectBox(count+10)"
         >
-            <div class="plat">库位{{ count+10 }}</div>
+          {{ item.name }}
         </div>
+        <div class="dashboard-legend-btn">
+          <el-button type="primary" size="mini" @click="submitLinkList">{{
+            "btn.submit" | i18nFilter
+          }}</el-button>
         </div>
-        <div class="flexDiv">
+        <div class="dashboard-legend-search">
+          <el-select
+            v-model="current"
+            size="mini"
+            placeholder="请选择库存范围"
+            @change="handleChange"
+          >
+            <el-option
+              v-for="item in totalPage"
+              :key="'select' + item"
+              :label="'第' + item + '页'"
+              :value="item"
+            />
+          </el-select>
+        </div>
+      </el-row>
+      <el-row
+        v-if="current * 80 < shelfList[0].rowList[0].portList.length"
+        class="dashboard-layout"
+        :gutter="12"
+      >
+        <el-col
+          v-for="item in 4"
+          :key="'shelfbox' + item"
+          class="dashboard-layout-shelf-box"
+          :span="6"
+        >
+          <el-row>
+            <el-col
+              v-for="(i, index) in shelfList"
+              :key="item + 'shelf' + i.id"
+              :span="12"
+              class="dashboard-layout-shelf"
+            >
+              <el-row>
+                <el-col
+                  v-for="z in i.rowList"
+                  :key="item + 'shelf' + i + 'row' + z.id"
+                  :span="12"
+                  class="dashboard-layout-row"
+                >
                   <div
-            v-for="count in 5"
+                    v-for="x in 20"
-            :key="count"
+                    :key="item + 'shelf' + i + 'row' + z + 'item' + x"
-            class="wareBox"
+                    class="dashboard-layout-item"
-            :class="[
+                    :style="{
-              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
+                      background:
-              { active: count+15 === isActive }
+                        portAttributeObj[
-            ]"
+                          z.portList[
-            @click="selectBox(count+15)"
+                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                          ].attribute
+                        ],
+                      cursor:
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute === 3
+                          ? 'not-allowed'
+                          : 'pointer',
+                      color:
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute === 3
+                          ? '#A2A8B5'
+                          : '',
+                      border:
+                        selectStorageList.some(StorageItem=>StorageItem.id===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
+                          ? '1px solid red' : ''
+                    }"
+                    @click="
+                      setType(
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ]
+                      )
+                    "
                   >
-            <div class="plat">库位{{ count+15 }}</div>
+                    <div
+                      v-if="
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute !== 3
+                      "
+                      class="dashboard-layout-item-cricle"
+                      :style="{
+                        background:
+                          cassetteStatusObj[
+                            z.portList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].cassetteList[0].status
+                          ]
+                      }"
+                    />
+                    {{
+                      z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)]
+                        .name
+                    }}
                   </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{
+                  "第" + (index + 1) + "排(" + ((current - 1) * 4 + item) + ")"
+                }}
               </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-row v-else class="dashboard-layout" :gutter="12">
+        <el-col
+          v-for="item in Math.ceil(
+            (shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20
+          )"
+          :key="'shelfbox' + item"
+          class="dashboard-layout-shelf-box"
+          :span="6"
+        >
+          <el-row>
+            <el-col
+              v-for="(i, index) in shelfList"
+              :key="item + 'shelf' + i.id"
+              :span="12"
+              class="dashboard-layout-shelf"
+            >
+              <el-row
+                v-if="
+                  item <
+                    Math.ceil(
+                      (shelfList[0].rowList[0].portList.length -
+                        (current - 1) * 80) /
+                        20
+                    )
+                "
+              >
+                <el-col
+                  v-for="z in i.rowList"
+                  :key="item + 'shelf' + i + 'row' + z.id"
+                  :span="12"
+                  class="dashboard-layout-row"
+                >
+                  <div
+                    v-for="x in 20"
+                    :key="item + 'shelf' + i + 'row' + z + 'item' + x"
+                    class="dashboard-layout-item"
+                    :style="{
+                      background:
+                        portAttributeObj[
+                          z.portList[
+                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                          ].attribute
+                        ],
+                      cursor:
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute === 3
+                          ? 'not-allowed'
+                          : 'pointer',
+                      color:
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute === 3
+                          ? '#A2A8B5'
+                          : '',
+                      border:
+                        selectStorageList.some(StorageItem=>StorageItem.id===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
+                          ? '1px solid red' : ''
+                    }"
+                    @click="
+                      setType(
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ]
+                      )
+                    "
+                  >
+                    <div
+                      v-if="
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute !== 3
+                      "
+                      class="dashboard-layout-item-cricle"
+                      :style="{
+                        background:
+                          cassetteStatusObj[
+                            z.portList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].cassetteList[0].status
+                          ]
+                      }"
+                    />
+                    {{
+                      z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)]
+                        .name
+                    }}
                   </div>
+                </el-col>
+              </el-row>
+              <el-row v-else>
+                <el-col
+                  v-for="z in i.rowList"
+                  :key="item + 'shelf' + i + 'row' + z.id"
+                  :span="12"
+                  class="dashboard-layout-row"
+                >
+                  <div
+                    v-for="x in shelfList[0].rowList[0].portList.length -
+                      (item - 1) * 20 -
+                      (current - 1) * 80"
+                    :key="item + 'shelf' + i + 'row' + z + 'item' + x"
+                    class="dashboard-layout-item"
+                    :style="{
+                      background:
+                        portAttributeObj[
+                          z.portList[
+                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                          ].attribute
+                        ],
+                      cursor:
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute === 3
+                          ? 'not-allowed'
+                          : 'pointer',
+                      color:
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute === 3
+                          ? '#A2A8B5'
+                          : '',
+                      border:
+                        selectStorageList.some(StorageItem=>StorageItem.id===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
+                          ? '1px solid red' : ''
+                    }"
+                    @click="
+                      setType(
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ]
+                      )
+                    "
+                  >
+                    <div
+                      v-if="
+                        z.portList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute !== 3
+                      "
+                      class="dashboard-layout-item-cricle"
+                      :style="{
+                        background:
+                          cassetteStatusObj[
+                            z.portList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].cassetteList[0].status
+                          ]
+                      }"
+                    />
+                    {{
+                      z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)]
+                        .name
+                    }}
+                  </div>
+                </el-col>
+              </el-row>
+              <div class="dashboard-layout-footer">
+                {{
+                  "第" + (index + 1) + "排(" + ((current - 1) * 4 + item) + ")"
+                }}
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-card>
+    <process-storage-type
+      v-if="typeVisible"
+      ref="typeRef"
+      @refreshDataList="setStorageList"
+    />
   </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
-    </span>
-  </el-dialog>
 </template>
 
 <script>
+import testdata from './testdata'
+import processStorageType from './processStorageType'
 
 export default {
+  name: 'Dashboard',
+  components: { processStorageType },
   data() {
-    return {
+    return testdata
-      visible: false,
+  },
-      isActiveArr: []
+  created() {
-    }
+    console.log(this.shelfList)
+    this.totalPage = Math.ceil(
+      this.shelfList[0].rowList[0].portList.length / 80
+    )
+    this.init()
   },
   methods: {
     init() {
-      this.visible = true
+      this.selectStorageList.splice(0, this.selectStorageList.length)
     },
-    selectBox(count) {
+    setType(item) {
-      this.isActive.push(count)
+      if (item.attribute !== 3) {
+        if (this.selectStorageList.findIndex(StorageItem => StorageItem.id === item.id) + 1) {
+          this.selectStorageList.splice(this.selectStorageList.findIndex(StorageItem => StorageItem.id === item.id), 1)
+        } else {
+          this.typeVisible = true
+          this.$nextTick(() => {
+            this.$refs.typeRef.init(item.id)
+          })
+        }
+      }
     },
-    // 表单提交
+    setStorageList(id, type) {
-    dataFormSubmit() {
+      const obj = {
-      this.visible = false
+        id,
+        type
+      }
+      this.selectStorageList.push(obj)
+    },
+    handleChange(v) {
+      console.log(v)
+    },
+    submitLinkList() {
+      console.log('submitLinkList')
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.mainDiv {
+.dashboard-container {
-  border: 2px solid rgb(145, 174, 255);
+  background: #f2f4f9;
-  padding: 20px 0;
+  min-height: calc(100vh - 134px);
+  overflow-x: scroll;
+  padding: 0 16px;
+  padding-top: 24px;
+  font-size: 14px;
+  .dashboard-main {
+    width: 100%;
+    min-width: 1380px;
+    background-color: #fff;
+    border-radius: 8px;
+    min-height: calc(100vh - 186px);
+    .dashboard-title {
+      .dashboard-header-line {
+        display: inline-block;
+        width: 4px;
+        height: 16px;
+        background: #0b58ff;
+        border-radius: 1px;
+        position: relative;
+        top: 2px;
+        margin-right: 4px;
       }
-.flexDiv {
+      .dashboard-header-title {
-  display: -webkit-flex;
+        display: inline-block;
-  display: flex;
+        font-size: 16px;
-  -webkit-justify-content: space-around;
+        font-family: PingFangSC-Regular, PingFang SC;
-  justify-content: space-around;
+        font-weight: 400;
+        color: #000000;
+        line-height: 16px;
       }
-.title {
-  float: left;
-  width: 50px;
-  font-size: 40px;
-  line-height: 45px;
     }
-/* 边框特效 */
+    .dashboard-legend {
-.wareBox:hover {
+      margin-top: 20px;
-  background: linear-gradient(to left, deepskyblue, deepskyblue) left top
+      .dashboard-legend-cassette {
-      no-repeat,
+        display: inline-block;
-    linear-gradient(to bottom, deepskyblue, deepskyblue) left top no-repeat,
+        margin-right: 24px;
-    linear-gradient(to left, deepskyblue, deepskyblue) right top no-repeat,
+        .dashboard-legend-cassette-cricle {
-    linear-gradient(to bottom, deepskyblue, deepskyblue) right top no-repeat,
+          display: inline-block;
-    linear-gradient(to left, deepskyblue, deepskyblue) left bottom no-repeat,
+          width: 12px;
-    linear-gradient(to bottom, deepskyblue, deepskyblue) left bottom no-repeat,
+          height: 12px;
-    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat,
+          border-radius: 6px;
-    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat;
-  background-size: 5px 30px, 30px 5px;
-  color: black;
-  border-radius: 5px;
-  background-color: rgb(190, 224, 241);
         }
-.wareBox {
-  cursor: pointer;
-  margin: 10px;
-  height: 80px;
-  line-height: 70px;
-  text-align: center;
-  border: 2px solid #cdcdc5;
-  border-radius: 5px;
       }
-.plat {
+      .dashboard-legend-port {
-  min-width: 80px;
+        display: inline-block;
+        height: 24px;
+        line-height: 24px;
+        border-radius: 4px;
+        padding: 0 16px;
+        margin-left: 24px;
       }
-.line {
+      .dashboard-legend-btn {
+        margin: 0 20px;
+        float: right;
+      }
+      .dashboard-legend-search {
+        float: right;
+      }
+    }
+    .dashboard-layout {
       margin: 20px 0;
-  height: 2px;
+      .dashboard-layout-shelf-box {
-  background-color: gray;
+        .dashboard-layout-footer {
-  border-left: 200px solid #ddd;
+          text-align: center;
-  border-right: 200px solid #ddd;
+          margin-top: 12px;
+        }
+        .dashboard-layout-shelf {
+          padding: 0 8px;
+          .dashboard-layout-row {
+            padding: 0 1px;
+            .dashboard-layout-item {
+              width: 100%;
+              text-align: center;
+              height: 32px;
+              box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8);
+              border-radius: 2px 4px 4px 2px;
+              margin-bottom: 8px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              .dashboard-layout-item-cricle {
+                display: inline-block;
+                width: 12px;
+                height: 12px;
+                border-radius: 6px;
+                margin-right: 6px;
+              }
+            }
+          }
         }
-.enableBox {
-  background: rgb(0, 189, 16);
       }
-.disableBox {
-  background: #ddd;
-  cursor: not-allowed;
     }
-.end-plat {
-  background-color: rgb(195, 246, 255);
   }
-.active {
-  border: 2px solid red;
 }
 </style>

src/views/basicData/Warehouse/components/processStorageType.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-03-09 11:18:51
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="$t('module.basicData.Warehouse.SelectStorageType') | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-radio v-model="storageType" :label="1">Working Port</el-radio>
+    <el-radio v-model="storageType" :label="2">Buffer Port</el-radio>
+    <el-radio v-model="storageType" :label="3">Exception Port</el-radio>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      visible: false,
+      storageId: '',
+      storageType: 1
+    }
+  },
+  methods: {
+    init(id) {
+      this.storageId = id
+      this.visible = true
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.visible = false
+      this.$emit('refreshDataList', this.storageId, this.storageType)
+    }
+  }
+}
+</script>