Reviewed-on: http://git.picaiba.com/mt-ck-00a/mt-ck-wms-ui/pulls/69pull/71/head
@@ -0,0 +1,27 @@ | |||||
/* | |||||
* @Author: gtz | |||||
* @Date: 2022-03-16 16:08:06 | |||||
* @LastEditors: gtz | |||||
* @LastEditTime: 2022-03-16 16:45:41 | |||||
* @Description: file content | |||||
* @FilePath: \mt-ck-wms-ui\src\api\dashboard.js | |||||
*/ | |||||
import request from '@/utils/request' | |||||
// 获取菜单列表 | |||||
export function getPortList(data) { | |||||
return request({ | |||||
url: '/api/wms/location/shelfList', | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
// 获取菜单详情 | |||||
export function getPortDetail(id) { | |||||
return request({ | |||||
url: '/api/wms/storage/box/circ/info/getByLocationId', | |||||
method: 'post', | |||||
data: { id } | |||||
}) | |||||
} |
@@ -115,6 +115,10 @@ export default { | |||||
design: { | design: { | ||||
zh: '设计', | zh: '设计', | ||||
en: 'Design' | en: 'Design' | ||||
}, | |||||
refresh: { | |||||
zh: '刷新', | |||||
en: 'Refresh' | |||||
} | } | ||||
}, | }, | ||||
navbar: { | navbar: { | ||||
@@ -1,8 +1,8 @@ | |||||
/* | /* | ||||
* @Author: gtz | * @Author: gtz | ||||
* @Date: 2022-03-15 16:42:34 | * @Date: 2022-03-15 16:42:34 | ||||
* @LastEditors: zwq | |||||
* @LastEditTime: 2022-03-16 08:57:49 | |||||
* @LastEditors: gtz | |||||
* @LastEditTime: 2022-03-16 20:01:32 | |||||
* @Description: file content | * @Description: file content | ||||
* @FilePath: \mt-ck-wms-ui\src\lang\i18n\en\module\dashboard.js | * @FilePath: \mt-ck-wms-ui\src\lang\i18n\en\module\dashboard.js | ||||
*/ | */ | ||||
@@ -12,5 +12,12 @@ export default { | |||||
second: 'Second Row', | second: 'Second Row', | ||||
title: 'WMS Inventory Information', | title: 'WMS Inventory Information', | ||||
pageHeader: 'No.', | pageHeader: 'No.', | ||||
pageFooter: ' Page' | |||||
pageFooter: ' Page', | |||||
isEmpty: 'Is Empty', | |||||
status: 'Status', | |||||
storageBoxCode: 'Cassette Code', | |||||
name: 'Location Name', | |||||
attribute: 'Location Attribute', | |||||
cassetteStatus: 'Cassette Status', | |||||
workOrderNo: 'Work Order Number' | |||||
} | } |
@@ -2,7 +2,7 @@ | |||||
* @Author: gtz | * @Author: gtz | ||||
* @Date: 2022-03-15 16:42:34 | * @Date: 2022-03-15 16:42:34 | ||||
* @LastEditors: gtz | * @LastEditors: gtz | ||||
* @LastEditTime: 2022-03-15 16:58:30 | |||||
* @LastEditTime: 2022-03-16 20:01:27 | |||||
* @Description: file content | * @Description: file content | ||||
* @FilePath: \mt-ck-wms-ui\src\lang\i18n\zh\module\dashboard.js | * @FilePath: \mt-ck-wms-ui\src\lang\i18n\zh\module\dashboard.js | ||||
*/ | */ | ||||
@@ -12,5 +12,12 @@ export default { | |||||
second: '第二排', | second: '第二排', | ||||
title: 'WMS库存信息', | title: 'WMS库存信息', | ||||
pageHeader: '第', | pageHeader: '第', | ||||
pageFooter: '页' | |||||
pageFooter: '页', | |||||
isEmpty: '是否为空', | |||||
status: '状态', | |||||
storageBoxCode: '存储箱编码', | |||||
name: '库位名', | |||||
attribute: '库位属性', | |||||
cassetteStatus: '存储箱状态', | |||||
workOrderNo: '工单号' | |||||
} | } |
@@ -1,10 +1,10 @@ | |||||
<!-- | <!-- | ||||
* @Author: gtz | * @Author: gtz | ||||
* @Date: 2022-03-03 09:16:10 | * @Date: 2022-03-03 09:16:10 | ||||
* @LastEditors: zwq | |||||
* @LastEditTime: 2022-03-16 10:11:10 | |||||
* @LastEditors: gtz | |||||
* @LastEditTime: 2022-03-16 19:25:19 | |||||
* @Description: file content | * @Description: file content | ||||
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue | |||||
* @FilePath: \mt-ck-wms-ui\src\views\basicData\Warehouse\components\processStorageLink.vue | |||||
--> | --> | ||||
<template> | <template> | ||||
<div class="dashboard-container"> | <div class="dashboard-container"> | ||||
@@ -45,14 +45,13 @@ | |||||
<el-select | <el-select | ||||
v-model="current" | v-model="current" | ||||
size="mini" | size="mini" | ||||
placeholder="请选择库存范围" | |||||
@change="handleChange" | @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> | </el-select> | ||||
</div> | </div> | ||||
</el-row> | </el-row> | ||||
<el-row | <el-row | ||||
v-if="current * 80 < shelfList[0].rowList[0].portList.length" | |||||
v-if="current * 80 < shelfVoList[0].rowVoList[0].portVoList.length" | |||||
class="dashboard-layout" | class="dashboard-layout" | ||||
:gutter="12" | :gutter="12" | ||||
> | > | ||||
@@ -64,14 +63,14 @@ | |||||
> | > | ||||
<el-row> | <el-row> | ||||
<el-col | <el-col | ||||
v-for="(i, index) in shelfList" | |||||
v-for="(i, index) in shelfVoList" | |||||
:key="item + 'shelf' + i.id" | :key="item + 'shelf' + i.id" | ||||
:span="12" | :span="12" | ||||
class="dashboard-layout-shelf" | class="dashboard-layout-shelf" | ||||
> | > | ||||
<el-row> | <el-row> | ||||
<el-col | <el-col | ||||
v-for="z in i.rowList" | |||||
v-for="z in i.rowVoList" | |||||
:key="item + 'shelf' + i + 'row' + z.id" | :key="item + 'shelf' + i + 'row' + z.id" | ||||
:span="12" | :span="12" | ||||
class="dashboard-layout-row" | class="dashboard-layout-row" | ||||
@@ -83,36 +82,36 @@ | |||||
:style="{ | :style="{ | ||||
background: | background: | ||||
portAttributeObj[ | portAttributeObj[ | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute | ].attribute | ||||
], | ], | ||||
cursor: | cursor: | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute === 3 | ].attribute === 3 | ||||
? 'not-allowed' | ? 'not-allowed' | ||||
: 'pointer', | : 'pointer', | ||||
color: | color: | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute === 3 | ].attribute === 3 | ||||
? '#A2A8B5' | ? '#A2A8B5' | ||||
: '', | : '', | ||||
border: | border: | ||||
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) | |||||
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) | |||||
? '1px solid red' : '' | ? '1px solid red' : '' | ||||
}" | }" | ||||
@click=" | @click=" | ||||
setType( | setType( | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (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 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] : ''}" /> | |||||
{{ 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> | </div> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -126,7 +125,7 @@ | |||||
<el-row v-else class="dashboard-layout" :gutter="12"> | <el-row v-else class="dashboard-layout" :gutter="12"> | ||||
<el-col | <el-col | ||||
v-for="item in Math.ceil( | v-for="item in Math.ceil( | ||||
(shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20 | |||||
(shelfVoList[0].rowVoList[0].portVoList.length - (current - 1) * 80) / 20 | |||||
)" | )" | ||||
:key="'shelfbox' + item" | :key="'shelfbox' + item" | ||||
class="dashboard-layout-shelf-box" | class="dashboard-layout-shelf-box" | ||||
@@ -134,7 +133,7 @@ | |||||
> | > | ||||
<el-row> | <el-row> | ||||
<el-col | <el-col | ||||
v-for="(i, index) in shelfList" | |||||
v-for="(i, index) in shelfVoList" | |||||
:key="item + 'shelf' + i.id" | :key="item + 'shelf' + i.id" | ||||
:span="12" | :span="12" | ||||
class="dashboard-layout-shelf" | class="dashboard-layout-shelf" | ||||
@@ -143,14 +142,14 @@ | |||||
v-if=" | v-if=" | ||||
item < | item < | ||||
Math.ceil( | Math.ceil( | ||||
(shelfList[0].rowList[0].portList.length - | |||||
(shelfVoList[0].rowVoList[0].portVoList.length - | |||||
(current - 1) * 80) / | (current - 1) * 80) / | ||||
20 | 20 | ||||
) | ) | ||||
" | " | ||||
> | > | ||||
<el-col | <el-col | ||||
v-for="z in i.rowList" | |||||
v-for="z in i.rowVoList" | |||||
:key="item + 'shelf' + i + 'row' + z.id" | :key="item + 'shelf' + i + 'row' + z.id" | ||||
:span="12" | :span="12" | ||||
class="dashboard-layout-row" | class="dashboard-layout-row" | ||||
@@ -162,48 +161,48 @@ | |||||
:style="{ | :style="{ | ||||
background: | background: | ||||
portAttributeObj[ | portAttributeObj[ | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute | ].attribute | ||||
], | ], | ||||
cursor: | cursor: | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute === 3 | ].attribute === 3 | ||||
? 'not-allowed' | ? 'not-allowed' | ||||
: 'pointer', | : 'pointer', | ||||
color: | color: | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute === 3 | ].attribute === 3 | ||||
? '#A2A8B5' | ? '#A2A8B5' | ||||
: '', | : '', | ||||
border: | border: | ||||
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) | |||||
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) | |||||
? '1px solid red' : '' | ? '1px solid red' : '' | ||||
}" | }" | ||||
@click=" | @click=" | ||||
setType( | setType( | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (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 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] : ''}" /> | |||||
{{ 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> | </div> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row v-else> | <el-row v-else> | ||||
<el-col | <el-col | ||||
v-for="z in i.rowList" | |||||
v-for="z in i.rowVoList" | |||||
:key="item + 'shelf' + i + 'row' + z.id" | :key="item + 'shelf' + i + 'row' + z.id" | ||||
:span="12" | :span="12" | ||||
class="dashboard-layout-row" | class="dashboard-layout-row" | ||||
> | > | ||||
<div | <div | ||||
v-for="x in shelfList[0].rowList[0].portList.length - | |||||
v-for="x in shelfVoList[0].rowVoList[0].portVoList.length - | |||||
(item - 1) * 20 - | (item - 1) * 20 - | ||||
(current - 1) * 80" | (current - 1) * 80" | ||||
:key="item + 'shelf' + i + 'row' + z + 'item' + x" | :key="item + 'shelf' + i + 'row' + z + 'item' + x" | ||||
@@ -211,36 +210,36 @@ | |||||
:style="{ | :style="{ | ||||
background: | background: | ||||
portAttributeObj[ | portAttributeObj[ | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute | ].attribute | ||||
], | ], | ||||
cursor: | cursor: | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute === 3 | ].attribute === 3 | ||||
? 'not-allowed' | ? 'not-allowed' | ||||
: 'pointer', | : 'pointer', | ||||
color: | color: | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (current - 1) * 80 + (item - 1) * 20 + (x - 1) | ||||
].attribute === 3 | ].attribute === 3 | ||||
? '#A2A8B5' | ? '#A2A8B5' | ||||
: '', | : '', | ||||
border: | border: | ||||
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) | |||||
selectStorageList.some(StorageItem=>StorageItem.locationId===z.portVoList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) | |||||
? '1px solid red' : '' | ? '1px solid red' : '' | ||||
}" | }" | ||||
@click=" | @click=" | ||||
setType( | setType( | ||||
z.portList[ | |||||
z.portVoList[ | |||||
(current - 1) * 80 + (item - 1) * 20 + (x - 1) | (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 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] : ''}" /> | |||||
{{ 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> | </div> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -261,6 +260,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import { getPortList } from '@/api/dashboard' | |||||
import { batchListAdd } from '@/api/basicData/Warehouse/StorageBoxInfo' | import { batchListAdd } from '@/api/basicData/Warehouse/StorageBoxInfo' | ||||
import testdata from './testdata' | import testdata from './testdata' | ||||
import processStorageType from './processStorageType' | import processStorageType from './processStorageType' | ||||
@@ -273,13 +273,15 @@ export default { | |||||
}, | }, | ||||
created() { | created() { | ||||
this.id = this.$route.query.id | this.id = this.$route.query.id | ||||
this.totalPage = Math.ceil( | |||||
this.shelfList[0].rowList[0].portList.length / 80 | |||||
) | |||||
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80) | |||||
this.init() | this.init() | ||||
}, | }, | ||||
methods: { | methods: { | ||||
init() { | init() { | ||||
getPortList().then(res => { | |||||
this.shelfVoList = res.data[0].shelfVoList | |||||
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80) | |||||
}) | |||||
this.selectStorageList.splice(0, this.selectStorageList.length) | this.selectStorageList.splice(0, this.selectStorageList.length) | ||||
}, | }, | ||||
setType(item) { | setType(item) { | ||||
@@ -321,7 +323,7 @@ export default { | |||||
type: 'success', | type: 'success', | ||||
duration: 1500, | duration: 1500, | ||||
onClose: () => { | onClose: () => { | ||||
this.selectStorageList.splice(0, this.selectStorageList.length) | |||||
this.init() | |||||
} | } | ||||
}) | }) | ||||
}) | }) | ||||
@@ -0,0 +1,75 @@ | |||||
<!-- | |||||
* @Author: zwq | |||||
* @Date: 2020-12-29 16:37:56 | |||||
* @LastEditors: gtz | |||||
* @LastEditTime: 2022-03-16 20:06:20 | |||||
* @Description: | |||||
--> | |||||
<template> | |||||
<el-dialog | |||||
:title="'btn.detail' | i18nFilter" | |||||
:visible.sync="visible" | |||||
> | |||||
<el-form ref="dataForm" :model="dataForm" label-width="150px"> | |||||
<el-form-item :label="$t('module.dashboard.name')" prop="name"> | |||||
{{ dataForm.name }} | |||||
</el-form-item> | |||||
<el-form-item :label="$t('module.dashboard.attribute')" prop="attribute"> | |||||
{{ dataForm.attribute ? portAttributeObj[dataForm.attribute] : '' }} | |||||
</el-form-item> | |||||
<el-form-item :label="$t('module.dashboard.cassetteStatus')" prop="cassetteVoList"> | |||||
{{ dataForm.cassetteVoList.length && dataForm.cassetteVoList[0].status ? cassetteStatusObj[dataForm.cassetteVoList[0].status] : '' }} | |||||
</el-form-item> | |||||
<el-form-item :label="$t('module.dashboard.workOrderNo')" prop="workOrderNo"> | |||||
{{ dataForm.workOrderNo }} | |||||
</el-form-item> | |||||
<el-form-item :label="$t('module.dashboard.storageBoxCode')" prop="storageBoxCode"> | |||||
{{ dataForm.storageBoxCode }} | |||||
</el-form-item> | |||||
</el-form> | |||||
<span slot="footer" class="dialog-footer"> | |||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button> | |||||
</span> | |||||
</el-dialog> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
visible: false, | |||||
dataForm: { | |||||
code: null, | |||||
createTime: null, | |||||
currLocation: null, | |||||
currLocationId: null, | |||||
id: null, | |||||
isEmpty: null, | |||||
status: null, | |||||
storageBoxCode: null, | |||||
storageBoxId: null, | |||||
updateTime: null | |||||
}, | |||||
cassetteStatusObj: { | |||||
'1': 'Empty Cassette', | |||||
'2': 'Dummy Cassette', | |||||
'3': 'OK Cassette', | |||||
'4': 'NOK Cassette' | |||||
}, | |||||
portAttributeObj: { | |||||
1: 'Working Port', | |||||
2: 'Buffer Port', | |||||
3: 'Exception Port' | |||||
} | |||||
} | |||||
}, | |||||
methods: { | |||||
init(data) { | |||||
console.log(data) | |||||
this.visible = true | |||||
this.dataForm = data | |||||
} | |||||
} | |||||
} | |||||
</script> |
@@ -2,7 +2,7 @@ | |||||
* @Author: gtz | * @Author: gtz | ||||
* @Date: 2022-03-03 09:16:10 | * @Date: 2022-03-03 09:16:10 | ||||
* @LastEditors: gtz | * @LastEditors: gtz | ||||
* @LastEditTime: 2022-03-15 16:47:57 | |||||
* @LastEditTime: 2022-03-16 20:07:40 | |||||
* @Description: file content | * @Description: file content | ||||
* @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue | * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue | ||||
--> | --> | ||||
@@ -23,20 +23,21 @@ | |||||
{{ item.name }} | {{ item.name }} | ||||
</div> | </div> | ||||
<div class="dashboard-legend-search"> | <div class="dashboard-legend-search"> | ||||
<el-select v-model="current" size="mini" placeholder="请选择库存范围" @change="handleChange"> | |||||
<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> | </el-select> | ||||
<el-button type="primary" @click="refresh">{{ 'btn.refresh' | i18nFilter }}</el-button> | |||||
</div> | </div> | ||||
</el-row> | </el-row> | ||||
<el-row v-if="current * 80 < shelfList[0].rowList[0].portList.length" class="dashboard-layout" :gutter="12"> | |||||
<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-col v-for="item in 4" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6"> | ||||
<el-row> | <el-row> | ||||
<el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf"> | |||||
<el-col v-for="(i, index) in shelfVoList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf"> | |||||
<el-row> | <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' : ''}"> | |||||
<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' }} | |||||
<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' : ''}" @click="handlePort(z, x)"> | |||||
<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] : ''}" /> | |||||
{{ 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> | </div> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -48,22 +49,22 @@ | |||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row v-else class="dashboard-layout" :gutter="12"> | <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-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-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' : ''}"> | |||||
<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' }} | |||||
<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' : ''}" @click="handlePort(z, x)"> | |||||
<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] : ''}" /> | |||||
{{ 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> | </div> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
<el-row v-else> | <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' : ''}"> | |||||
<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' }} | |||||
<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' : ''}" @click="handlePort(z, x)"> | |||||
<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] : ''}" /> | |||||
{{ 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> | </div> | ||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
@@ -75,24 +76,45 @@ | |||||
</el-col> | </el-col> | ||||
</el-row> | </el-row> | ||||
</el-card> | </el-card> | ||||
<port-detail ref="addOrUpdate" /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import testdata from './testdata' | import testdata from './testdata' | ||||
import { getPortList, getPortDetail } from '@/api/dashboard' | |||||
import portDetail from './components/PortDetail' | |||||
export default { | export default { | ||||
name: 'Dashboard', | name: 'Dashboard', | ||||
components: { portDetail }, | |||||
data() { | data() { | ||||
return testdata | return testdata | ||||
}, | }, | ||||
created() { | created() { | ||||
console.log(this.shelfList) | |||||
this.totalPage = Math.ceil(this.shelfList[0].rowList[0].portList.length / 80) | |||||
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80) | |||||
this.init() | |||||
}, | }, | ||||
methods: { | methods: { | ||||
init() { | |||||
getPortList().then(res => { | |||||
this.shelfVoList = res.data[0].shelfVoList | |||||
this.totalPage = Math.ceil(this.shelfVoList[0].rowVoList[0].portVoList.length / 80) | |||||
}) | |||||
}, | |||||
handleChange(v) { | handleChange(v) { | ||||
console.log(v) | console.log(v) | ||||
}, | |||||
handlePort(z, x) { | |||||
getPortDetail(z.portVoList[x - 1].id).then(res => { | |||||
this.addOrUpdateVisible = true | |||||
this.$nextTick(() => { | |||||
this.$refs.addOrUpdate.init({ ...(res.data), ...z.portVoList[x - 1] }) | |||||
}) | |||||
}) | |||||
}, | |||||
refresh() { | |||||
this.init() | |||||
} | } | ||||
} | } | ||||
} | } | ||||