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-17 10:56:14
 * @Description: file content
 * @FilePath: \mt-ck-wms-ui\src\views\basicData\Warehouse\components\processStorageLink.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">
          {{ $t("module.dashboard.title") }}
        </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"
            @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-select>
        </div>
      </el-row>
      <el-row
        v-if="current * 80 < shelfVoList[0].rowVoList[0].portVoList.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 shelfVoList"
              :key="item + 'shelf' + i.id"
              :span="12"
              class="dashboard-layout-shelf"
            >
              <el-row>
                <el-col
                  v-for="z in i.rowVoList"
                  :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.portVoList[
                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                          ].attribute
                        ],
                      cursor:
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ].attribute === 3
                          ? 'not-allowed'
                          : 'pointer',
                      color:
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ].attribute === 3
                          ? '#A2A8B5'
                          : '',
                      border: selectStorageList.some(
                        StorageItem =>
                          StorageItem.locationId ===
                          z.portVoList[
                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                          ].id
                      )
                        ? '2px dashed red'
                        : ''
                    }"
                    @click="
                      setType(
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ]
                      )
                    "
                  >
                    <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
                      :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) +
                    ")"
                }}
              </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(
            (shelfVoList[0].rowVoList[0].portVoList.length -
              (current - 1) * 80) /
              20
          )"
          :key="'shelfbox' + item"
          class="dashboard-layout-shelf-box"
          :span="6"
        >
          <el-row>
            <el-col
              v-for="(i, index) in shelfVoList"
              :key="item + 'shelf' + i.id"
              :span="12"
              class="dashboard-layout-shelf"
            >
              <el-row
                v-if="
                  item <
                    Math.ceil(
                      (shelfVoList[0].rowVoList[0].portVoList.length -
                        (current - 1) * 80) /
                        20
                    )
                "
              >
                <el-col
                  v-for="z in i.rowVoList"
                  :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.portVoList[
                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                          ].attribute
                        ],
                      cursor:
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ].attribute === 3
                          ? 'not-allowed'
                          : 'pointer',
                      color:
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ].attribute === 3
                          ? '#A2A8B5'
                          : '',
                      border: selectStorageList.some(
                        StorageItem =>
                          StorageItem.locationId ===
                          z.portVoList[
                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                          ].id
                      )
                        ? '2px dashed red'
                        : ''
                    }"
                    @click="
                      setType(
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ]
                      )
                    "
                  >
                    <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
                      :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>
              <el-row v-else>
                <el-col
                  v-for="z in i.rowVoList"
                  :key="item + 'shelf' + i + 'row' + z.id"
                  :span="12"
                  class="dashboard-layout-row"
                >
                  <div
                    v-for="x in shelfVoList[0].rowVoList[0].portVoList.length -
                      (item - 1) * 20 -
                      (current - 1) * 80"
                    :key="item + 'shelf' + i + 'row' + z + 'item' + x"
                    class="dashboard-layout-item"
                    :style="{
                      background:
                        portAttributeObj[
                          z.portVoList[
                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                          ].attribute
                        ],
                      cursor:
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ].attribute === 3
                          ? 'not-allowed'
                          : 'pointer',
                      color:
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ].attribute === 3
                          ? '#A2A8B5'
                          : '',
                      border: selectStorageList.some(
                        StorageItem =>
                          StorageItem.locationId ===
                          z.portVoList[
                            (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                          ].id
                      )
                        ? '2px dashed red'
                        : ''
                    }"
                    @click="
                      setType(
                        z.portVoList[
                          (current - 1) * 80 + (item - 1) * 20 + (x - 1)
                        ]
                      )
                    "
                  >
                    <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
                      :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) +
                    ")"
                }}
              </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 { 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'

export default {
  name: 'ProcessStorageLink1',
  components: { processStorageType },
  data() {
    return testdata
  },
  created() {
    this.id = this.$route.query.id
    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
        )
      })
      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
        ) {
          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() {
      if (this.selectStorageList.length) {
        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.init()
                }
              })
            })
          })
          .catch(() => {})
      } else {
        this.$message({
          message: this.$t('module.basicData.visual.PleaseAddLocationFirst'),
          type: 'warning',
          duration: 1500
        })
      }
    },
    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;
              position: relative;
              .dashboard-layout-item-cricle {
                display: inline-block;
                width: 12px;
                height: 12px;
                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;
              }
            }
          }
        }
      }
    }
  }
}
</style>