mt-ck-wms-ui/src/views/basicData/Warehouse/components/processStorageLink.vue

<!--
 * @Author: gtz
 * @Date: 2022-03-03 09:16:10
 * @LastEditors: zwq
 * @LastEditTime: 2022-03-15 14:27:57
 * @Description: file content
 * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
-->
<template>
  <div class="dashboard-container">
    <el-card class="dashboard-main">
      <el-row class="dashboard-title">
        <div class="dashboard-header-line" />
        <div class="dashboard-header-title">WMS库存信息</div>
      </el-row>
      <el-row class="dashboard-legend">
        <div
          v-for="item in cassetteStatusList"
          :key="'cassette' + item.id"
          class="dashboard-legend-cassette"
        >
          <div
            class="dashboard-legend-cassette-cricle"
            :style="{ background: item.color }"
          />
          {{ item.name }}
        </div>
        |
        <div
          v-for="item in portAttributeList"
          :key="'port' + item.id"
          class="dashboard-legend-port"
          :style="{ background: item.color }"
        >
          {{ item.name }}
        </div>
        <div class="dashboard-legend-btn">
          <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="success" size="mini" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
        </div>
        <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="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.locationId===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: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
                  </div>
                </el-col>
              </el-row>
              <div class="dashboard-layout-footer">
                {{
                  "第" + bottomIndex[index] + "排(" + ((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.locationId===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: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
                  </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.locationId===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: z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0] ? cassetteStatusObj[z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].cassetteList[0].status] : ''}" />
                    {{ z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].attribute !== 3 ? z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].name : 'XXXX' }}
                  </div>
                </el-col>
              </el-row>
              <div class="dashboard-layout-footer">
                {{
                  "第" + bottomIndex[index] + "排(" + ((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>
</template>

<script>
import { batchListAdd } from '@/api/basicData/Warehouse/StorageBoxInfo'
import testdata from './testdata'
import processStorageType from './processStorageType'

export default {
  name: 'ProcessStorageLink1',
  components: { processStorageType },
  data() {
    return testdata
  },
  created() {
    this.id = this.$route.query.id
    this.totalPage = Math.ceil(
      this.shelfList[0].rowList[0].portList.length / 80
    )
    this.init()
  },
  methods: {
    init() {
      this.selectStorageList.splice(0, this.selectStorageList.length)
    },
    setType(item) {
      if (item.attribute !== 3) {
        if (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(() => {
            this.$refs.typeRef.init(item.id, item.name)
          })
        }
      }
    },
    setStorageList(locationId, locationName, dataForm) {
      const obj = Object.assign({ locationId, locationName }, dataForm)
      this.selectStorageList.push(obj)
    },
    handleChange(v) {
      console.log(v)
    },
    submitLinkList() {
      const tipArr = this.selectStorageList.map(item => {
        return item.locationName
      })
      const obj = {
        workSequenId: this.id,
        processLocationStorageList: this.selectStorageList
      }
      this.$confirm(`${this.$t('module.basicData.visual.TipsStorageBefore')}[${tipArr.join(',')}]?`, this.$t('module.basicData.visual.Tips'), {
        confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
        cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
        type: 'warning'
      }).then(() => {
        batchListAdd(obj).then(res => {
          this.$message({
            message: this.$t('module.basicData.visual.success'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.selectStorageList.splice(0, this.selectStorageList.length)
            }
          })
        })
      }).catch(() => {})
    },
    goback() {
      this.selectStorageList.splice(0, this.selectStorageList.length)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  background: #f2f4f9;
  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;
      }
      .dashboard-header-title {
        display: inline-block;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 16px;
      }
    }
    .dashboard-legend {
      margin-top: 20px;
      .dashboard-legend-cassette {
        display: inline-block;
        margin-right: 24px;
        .dashboard-legend-cassette-cricle {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 6px;
        }
      }
      .dashboard-legend-port {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        border-radius: 4px;
        padding: 0 16px;
        margin-left: 24px;
      }
      .dashboard-legend-btn {
        margin: 0 20px;
        float: right;
      }
      .dashboard-legend-search {
        float: right;
      }
    }
    .dashboard-layout {
      margin: 20px 0;
      .dashboard-layout-shelf-box {
        .dashboard-layout-footer {
          text-align: center;
          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;
              }
            }
          }
        }
      }
    }
  }
}
</style>