653 lines
21 KiB
Vue
653 lines
21 KiB
Vue
<!--
|
|
* @Author: gtz
|
|
* @Date: 2022-03-03 09:16:10
|
|
* @LastEditors: gtz
|
|
* @LastEditTime: 2022-03-18 16:33:59
|
|
* @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
|
|
v-if="
|
|
StorageList.some(
|
|
StorageItem =>
|
|
StorageItem.id ===
|
|
z.portVoList[
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1)
|
|
].id
|
|
)"
|
|
class="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
|
|
v-if="
|
|
StorageList.some(
|
|
StorageItem =>
|
|
StorageItem.id ===
|
|
z.portVoList[
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1)
|
|
].id
|
|
)"
|
|
class="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
|
|
v-if="
|
|
StorageList.some(
|
|
StorageItem =>
|
|
StorageItem.id ===
|
|
z.portVoList[
|
|
(current - 1) * 80 + (item - 1) * 20 + (x - 1)
|
|
].id
|
|
)"
|
|
class="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.StorageList.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 {
|
|
const isExist = this.StorageList.some(
|
|
StorageItem =>
|
|
StorageItem.id === item.id
|
|
)
|
|
this.typeVisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.typeRef.init(item.id, item.name, item.attribute, isExist)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
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>
|