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

@@ -1,8 +1,8 @@
 <!--
  * @Author: gtz
  * @Date: 2022-03-03 09:16:10
- * @LastEditors: gtz
+ * @LastEditors: zwq
- * @LastEditTime: 2022-03-16 19:25:19
+ * @LastEditTime: 2022-03-17 10:56:14
  * @Description: file content
  * @FilePath: \mt-ck-wms-ui\src\views\basicData\Warehouse\components\processStorageLink.vue
 -->
@@ -11,7 +11,9 @@
     <el-card class="dashboard-main">
       <el-row class="dashboard-title">
         <div class="dashboard-header-line" />
-        <div class="dashboard-header-title">{{ $t('module.dashboard.title') }}</div>
+        <div class="dashboard-header-title">
+          {{ $t("module.dashboard.title") }}
+        </div>
       </el-row>
       <el-row class="dashboard-legend">
         <div
@@ -38,15 +40,28 @@
           <el-button type="primary" size="mini" @click="submitLinkList">{{
             "btn.submit" | i18nFilter
           }}</el-button>
-          <el-button type="warning" size="mini" @click="init()">{{ 'btn.reset' | i18nFilter }}</el-button>
+          <el-button type="warning" size="mini" @click="init()">{{
-          <el-button type="success" size="mini" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+            "btn.reset" | i18nFilter
+          }}</el-button>
+          <el-button type="success" size="mini" @click="goback()">{{
+            "btn.back" | i18nFilter
+          }}</el-button>
         </div>
         <div class="dashboard-legend-search">
           <el-select
             v-model="current"
             size="mini"
             @change="handleChange"
-          ><el-option v-for="item in totalPage" :key="'select' + item" :label="$t('module.dashboard.pageHeader') + item + $t('module.dashboard.pageFooter')" :value="item" />
+          ><el-option
+            v-for="item in totalPage"
+            :key="'select' + item"
+            :label="
+              $t('module.dashboard.pageHeader') +
+                item +
+                $t('module.dashboard.pageFooter')
+            "
+            :value="item"
+          />
           </el-select>
         </div>
       </el-row>
@@ -98,9 +113,15 @@
                         ].attribute === 3
                           ? '#A2A8B5'
                           : '',
-                      border:
+                      border: selectStorageList.some(
-                        selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
+                        StorageItem =>
-                          ? '1px solid red' : ''
+                          StorageItem.locationId ===
+                          z.portVoList[
+                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                          ].id
+                      )
+                        ? '2px dashed red'
+                        : ''
                     }"
                     @click="
                       setType(
@@ -110,13 +131,57 @@
                       )
                     "
                   >
-                    <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0].status] : ''}" />
+                    <div
-                    {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                      v-if="
+                        z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute !== 3
+                      "
+                      class="dashboard-layout-item-cricle"
+                      :style="{
+                        background: z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].cassetteVoList[0]
+                          ? cassetteStatusObj[
+                            z.portVoList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].cassetteVoList[0].status
+                          ]
+                          : ''
+                      }"
+                    />
+                    <div
+                      :class="
+                        StorageList.some(
+                          StorageItem =>
+                            StorageItem.id ===
+                            z.portVoList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].id
+                        )
+                          ? 'dashboard-layout-item-horn'
+                          : ''
+                      "
+                    />
+                    {{
+                      z.portVoList[
+                        (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                      ].attribute !== 3
+                        ? z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].name
+                        : "XXXX"
+                    }}
                   </div>
                 </el-col>
               </el-row>
               <div class="dashboard-layout-footer">
-                {{ $t(bottomIndex[index]) + '(' + ((current - 1) * 4 + item) + ')' }}
+                {{
+                  $t(bottomIndex[index]) +
+                    "(" +
+                    ((current - 1) * 4 + item) +
+                    ")"
+                }}
               </div>
             </el-col>
           </el-row>
@@ -125,7 +190,9 @@
       <el-row v-else class="dashboard-layout" :gutter="12">
         <el-col
           v-for="item in Math.ceil(
-            (shelfVoList[0].rowVoList[0].portVoList.length - (current - 1) * 80) / 20
+            (shelfVoList[0].rowVoList[0].portVoList.length -
+              (current - 1) * 80) /
+              20
           )"
           :key="'shelfbox' + item"
           class="dashboard-layout-shelf-box"
@@ -177,9 +244,15 @@
                         ].attribute === 3
                           ? '#A2A8B5'
                           : '',
-                      border:
+                      border: selectStorageList.some(
-                        selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
+                        StorageItem =>
-                          ? '1px solid red' : ''
+                          StorageItem.locationId ===
+                          z.portVoList[
+                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                          ].id
+                      )
+                        ? '2px dashed red'
+                        : ''
                     }"
                     @click="
                       setType(
@@ -189,8 +262,47 @@
                       )
                     "
                   >
-                    <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0].status] : ''}" />
+                    <div
-                    {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                      v-if="
+                        z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute !== 3
+                      "
+                      class="dashboard-layout-item-cricle"
+                      :style="{
+                        background: z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].cassetteVoList[0]
+                          ? cassetteStatusObj[
+                            z.portVoList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].cassetteVoList[0].status
+                          ]
+                          : ''
+                      }"
+                    />
+                    <div
+                      :class="
+                        StorageList.some(
+                          StorageItem =>
+                            StorageItem.id ===
+                            z.portVoList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].id
+                        )
+                          ? 'dashboard-layout-item-horn'
+                          : ''
+                      "
+                    />
+                    {{
+                      z.portVoList[
+                        (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                      ].attribute !== 3
+                        ? z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].name
+                        : "XXXX"
+                    }}
                   </div>
                 </el-col>
               </el-row>
@@ -226,9 +338,15 @@
                         ].attribute === 3
                           ? '#A2A8B5'
                           : '',
-                      border:
+                      border: selectStorageList.some(
-                        selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id)
+                        StorageItem =>
-                          ? '1px solid red' : ''
+                          StorageItem.locationId ===
+                          z.portVoList[
+                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                          ].id
+                      )
+                        ? '2px dashed red'
+                        : ''
                     }"
                     @click="
                       setType(
@@ -238,13 +356,57 @@
                       )
                     "
                   >
-                    <div v-if="z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3" class="dashboard-layout-item-cricle" :style="{background: z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0] ? cassetteStatusObj[z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteVoList[0].status] : ''}" />
+                    <div
-                    {{ z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
+                      v-if="
+                        z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].attribute !== 3
+                      "
+                      class="dashboard-layout-item-cricle"
+                      :style="{
+                        background: z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].cassetteVoList[0]
+                          ? cassetteStatusObj[
+                            z.portVoList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].cassetteVoList[0].status
+                          ]
+                          : ''
+                      }"
+                    />
+                    <div
+                      :class="
+                        StorageList.some(
+                          StorageItem =>
+                            StorageItem.id ===
+                            z.portVoList[
+                              (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                            ].id
+                        )
+                          ? 'dashboard-layout-item-horn'
+                          : ''
+                      "
+                    />
+                    {{
+                      z.portVoList[
+                        (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                      ].attribute !== 3
+                        ? z.portVoList[
+                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
+                        ].name
+                        : "XXXX"
+                    }}
                   </div>
                 </el-col>
               </el-row>
               <div class="dashboard-layout-footer">
-                {{ $t(bottomIndex[index]) + '(' + ((current - 1) * 4 + item) + ')' }}
+                {{
+                  $t(bottomIndex[index]) +
+                    "(" +
+                    ((current - 1) * 4 + item) +
+                    ")"
+                }}
               </div>
             </el-col>
           </el-row>
@@ -261,6 +423,7 @@
 
 <script>
 import { getPortList } from '@/api/dashboard'
+import { locationByProcessList } from '@/api/basicData/Warehouse/StorageBoxInfo'
 import { batchListAdd } from '@/api/basicData/Warehouse/StorageBoxInfo'
 import testdata from './testdata'
 import processStorageType from './processStorageType'
@@ -273,21 +436,45 @@ export default {
   },
   created() {
     this.id = this.$route.query.id
-    this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
+    this.totalPage = Math.ceil(
+      this.shelfVoList[0].rowVoList[0].portVoList.length / 80
+    )
     this.init()
   },
   methods: {
     init() {
       getPortList().then(res => {
         this.shelfVoList = res.data[0].shelfVoList
-        this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80)
+        this.totalPage = Math.ceil(
+          this.shelfVoList[0].rowVoList[0].portVoList.length / 80
+        )
+      })
+      locationByProcessList({
+        current: 1,
+        size: 990,
+        workSequenId: this.id
+      }).then(response => {
+        if (response.data.records) {
+          this.StorageList = response.data.records
+        } else {
+          this.StorageList.splice(0, this.list.length)
+        }
       })
       this.selectStorageList.splice(0, this.selectStorageList.length)
     },
     setType(item) {
       if (item.attribute !== 3) {
-        if (this.selectStorageList.findIndex(StorageItem => StorageItem.locationId === item.id) + 1) {
+        if (
-          this.selectStorageList.splice(this.selectStorageList.findIndex(StorageItem => StorageItem.locationId === item.id), 1)
+          this.selectStorageList.findIndex(
+            StorageItem => StorageItem.locationId === item.id
+          ) + 1
+        ) {
+          this.selectStorageList.splice(
+            this.selectStorageList.findIndex(
+              StorageItem => StorageItem.locationId === item.id
+            ),
+            1
+          )
         } else {
           this.typeVisible = true
           this.$nextTick(() => {
@@ -312,22 +499,34 @@ export default {
           workSequenId: this.id,
           processLocationStorageList: this.selectStorageList
         }
-        this.$confirm(`${this.$t('module.basicData.visual.TipsStorageBefore')}[${tipArr.join(',')}]?`, this.$t('module.basicData.visual.Tips'), {
+        this.$confirm(
-          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          `${this.$t(
-          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            'module.basicData.visual.TipsStorageBefore'
-          type: 'warning'
+          )}[${tipArr.join(',')}]?`,
-        }).then(() => {
+          this.$t('module.basicData.visual.Tips'),
-          batchListAdd(obj).then(res => {
+          {
-            this.$message({
+            confirmButtonText: this.$t(
-              message: this.$t('module.basicData.visual.success'),
+              'module.basicData.visual.confirmButtonText'
-              type: 'success',
+            ),
-              duration: 1500,
+            cancelButtonText: this.$t(
-              onClose: () => {
+              'module.basicData.visual.cancelButtonText'
-                this.init()
+            ),
-              }
+            type: 'warning'
+          }
+        )
+          .then(() => {
+            batchListAdd(obj).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.init()
+                }
+              })
             })
           })
-        }).catch(() => {})
+          .catch(() => {})
       } else {
         this.$message({
           message: this.$t('module.basicData.visual.PleaseAddLocationFirst'),
@@ -427,6 +626,7 @@ export default {
               display: flex;
               align-items: center;
               justify-content: center;
+              position: relative;
               .dashboard-layout-item-cricle {
                 display: inline-block;
                 width: 12px;
@@ -434,6 +634,16 @@ export default {
                 border-radius: 6px;
                 margin-right: 6px;
               }
+              .dashboard-layout-item-horn {
+                position: absolute;
+                width: 0;
+                height: 0;
+                right: 0;
+                top: 0;
+                border-style: solid;
+                border-width: 14px 0px 0px 14px;
+                border-color: #0B58FF transparent transparent transparent;
+              }
             }
           }
         }

src/views/basicData/Warehouse/components/testdata.js

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2022-03-03 15:47:47
  * @LastEditors: zwq
- * @LastEditTime: 2022-03-16 09:43:36
+ * @LastEditTime: 2022-03-17 09:05:02
  * @Description: file content
  * @FilePath: \mt-ck-wms-ui\src\views\dashboard\testdata.js
  */
@@ -2603,6 +2603,7 @@ export default {
     4: '#FFA08F'
   },
   selectStorageList: [],
+  StorageList: [],
   typeVisible: false,
   id: '',
   bottomIndex: ['module.dashboard.first', 'module.dashboard.second'],