仓库-工序存储区管理
This commit is contained in:
		@@ -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'
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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: '选择库位类型'
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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 }
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
@@ -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.$nextTick(() => {
 | 
			
		||||
        this.$refs.addOrUpdate.init(id)
 | 
			
		||||
      this.$router.push({
 | 
			
		||||
        name: 'ProcessStorageLink',
 | 
			
		||||
        query: {
 | 
			
		||||
          dictTypeId: id
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    goback() {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,175 +1,472 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2020-12-29 16:37:56
 | 
			
		||||
 * @Author: gtz
 | 
			
		||||
 * @Date: 2022-03-03 09:16:10
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2022-03-04 16:54:51
 | 
			
		||||
 * @Description:
 | 
			
		||||
 * @LastEditTime: 2022-03-09 14:17:23
 | 
			
		||||
 * @Description: file content
 | 
			
		||||
 * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <el-dialog
 | 
			
		||||
    :title="$t('module.basicData.visual.stock') | i18nFilter"
 | 
			
		||||
    :visible.sync="visible"
 | 
			
		||||
    top="5vh"
 | 
			
		||||
  >
 | 
			
		||||
    <div>
 | 
			
		||||
      <div class="mainDiv" style="margin:10px 0 100px">
 | 
			
		||||
        <div class="title">货架一</div>
 | 
			
		||||
        <div class="flexDiv">
 | 
			
		||||
  <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
 | 
			
		||||
            v-for="count in 5"
 | 
			
		||||
            :key="count"
 | 
			
		||||
            class="wareBox"
 | 
			
		||||
            :class="[
 | 
			
		||||
              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
 | 
			
		||||
              { active: count === isActive }
 | 
			
		||||
            ]"
 | 
			
		||||
            @click="selectBox(count)"
 | 
			
		||||
          >
 | 
			
		||||
            <div class="plat">库位{{ count }}</div>
 | 
			
		||||
          </div>
 | 
			
		||||
            class="dashboard-legend-cassette-cricle"
 | 
			
		||||
            :style="{ background: item.color }"
 | 
			
		||||
          />
 | 
			
		||||
          {{ item.name }}
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="flexDiv">
 | 
			
		||||
          <div
 | 
			
		||||
            v-for="count in 5"
 | 
			
		||||
            :key="count"
 | 
			
		||||
            class="wareBox"
 | 
			
		||||
            :class="[
 | 
			
		||||
              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
 | 
			
		||||
              { active: count + 5 === isActive }
 | 
			
		||||
            ]"
 | 
			
		||||
            @click="selectBox(count + 5)"
 | 
			
		||||
          >
 | 
			
		||||
            <div class="plat">库位{{ count + 5 }}</div>
 | 
			
		||||
          </div>
 | 
			
		||||
        |
 | 
			
		||||
        <div
 | 
			
		||||
          v-for="item in portAttributeList"
 | 
			
		||||
          :key="'port' + item.id"
 | 
			
		||||
          class="dashboard-legend-port"
 | 
			
		||||
          :style="{ background: item.color }"
 | 
			
		||||
        >
 | 
			
		||||
          {{ item.name }}
 | 
			
		||||
        </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"
 | 
			
		||||
            :key="count"
 | 
			
		||||
            class="wareBox"
 | 
			
		||||
            :class="[
 | 
			
		||||
              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
 | 
			
		||||
              { active: count+10 === isActive }
 | 
			
		||||
            ]"
 | 
			
		||||
            @click="selectBox(count+10)"
 | 
			
		||||
          >
 | 
			
		||||
            <div class="plat">库位{{ count+10 }}</div>
 | 
			
		||||
          </div>
 | 
			
		||||
        <div class="dashboard-legend-btn">
 | 
			
		||||
          <el-button type="primary" size="mini" @click="submitLinkList">{{
 | 
			
		||||
            "btn.submit" | i18nFilter
 | 
			
		||||
          }}</el-button>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="flexDiv">
 | 
			
		||||
          <div
 | 
			
		||||
            v-for="count in 5"
 | 
			
		||||
            :key="count"
 | 
			
		||||
            class="wareBox"
 | 
			
		||||
            :class="[
 | 
			
		||||
              count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
 | 
			
		||||
              { active: count+15 === isActive }
 | 
			
		||||
            ]"
 | 
			
		||||
            @click="selectBox(count+15)"
 | 
			
		||||
        <div class="dashboard-legend-search">
 | 
			
		||||
          <el-select
 | 
			
		||||
            v-model="current"
 | 
			
		||||
            size="mini"
 | 
			
		||||
            placeholder="请选择库存范围"
 | 
			
		||||
            @change="handleChange"
 | 
			
		||||
          >
 | 
			
		||||
            <div class="plat">库位{{ count+15 }}</div>
 | 
			
		||||
          </div>
 | 
			
		||||
            <el-option
 | 
			
		||||
              v-for="item in totalPage"
 | 
			
		||||
              :key="'select' + item"
 | 
			
		||||
              :label="'第' + item + '页'"
 | 
			
		||||
              :value="item"
 | 
			
		||||
            />
 | 
			
		||||
          </el-select>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </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>
 | 
			
		||||
      </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.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-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>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import testdata from './testdata'
 | 
			
		||||
import processStorageType from './processStorageType'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'Dashboard',
 | 
			
		||||
  components: { processStorageType },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      visible: false,
 | 
			
		||||
      isActiveArr: []
 | 
			
		||||
    }
 | 
			
		||||
    return testdata
 | 
			
		||||
  },
 | 
			
		||||
  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) {
 | 
			
		||||
      this.isActive.push(count)
 | 
			
		||||
    setType(item) {
 | 
			
		||||
      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)
 | 
			
		||||
          })
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 表单提交
 | 
			
		||||
    dataFormSubmit() {
 | 
			
		||||
      this.visible = false
 | 
			
		||||
    setStorageList(id, type) {
 | 
			
		||||
      const obj = {
 | 
			
		||||
        id,
 | 
			
		||||
        type
 | 
			
		||||
      }
 | 
			
		||||
      this.selectStorageList.push(obj)
 | 
			
		||||
    },
 | 
			
		||||
    handleChange(v) {
 | 
			
		||||
      console.log(v)
 | 
			
		||||
    },
 | 
			
		||||
    submitLinkList() {
 | 
			
		||||
      console.log('submitLinkList')
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.mainDiv {
 | 
			
		||||
  border: 2px solid rgb(145, 174, 255);
 | 
			
		||||
  padding: 20px 0;
 | 
			
		||||
}
 | 
			
		||||
.flexDiv {
 | 
			
		||||
  display: -webkit-flex;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  -webkit-justify-content: space-around;
 | 
			
		||||
  justify-content: space-around;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
  float: left;
 | 
			
		||||
  width: 50px;
 | 
			
		||||
  font-size: 40px;
 | 
			
		||||
  line-height: 45px;
 | 
			
		||||
}
 | 
			
		||||
/* 边框特效 */
 | 
			
		||||
.wareBox:hover {
 | 
			
		||||
  background: linear-gradient(to left, deepskyblue, deepskyblue) left top
 | 
			
		||||
      no-repeat,
 | 
			
		||||
    linear-gradient(to bottom, deepskyblue, deepskyblue) left top no-repeat,
 | 
			
		||||
    linear-gradient(to left, deepskyblue, deepskyblue) right top no-repeat,
 | 
			
		||||
    linear-gradient(to bottom, deepskyblue, deepskyblue) right top no-repeat,
 | 
			
		||||
    linear-gradient(to left, deepskyblue, deepskyblue) left bottom no-repeat,
 | 
			
		||||
    linear-gradient(to bottom, deepskyblue, deepskyblue) left bottom no-repeat,
 | 
			
		||||
    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat,
 | 
			
		||||
    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 {
 | 
			
		||||
  min-width: 80px;
 | 
			
		||||
}
 | 
			
		||||
.line {
 | 
			
		||||
  margin: 20px 0;
 | 
			
		||||
  height: 2px;
 | 
			
		||||
  background-color: gray;
 | 
			
		||||
  border-left: 200px solid #ddd;
 | 
			
		||||
  border-right: 200px solid #ddd;
 | 
			
		||||
}
 | 
			
		||||
.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 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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
							
								
								
									
										2955
									
								
								src/views/basicData/Warehouse/components/testdata.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										2955
									
								
								src/views/basicData/Warehouse/components/testdata.js
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
		Reference in New Issue
	
	Block a user