<!-- * @Author: gtz * @Date: 2022-03-03 09:16:10 * @LastEditors: zwq * @LastEditTime: 2022-03-11 16:33:41 * @Description: file content * @FilePath: \mt-ck-wms-ui\src\views\dashboard\index.vue --> <template> <div class="dashboard-container"> <el-card class="dashboard-main"> <el-row class="dashboard-title"> <div class="dashboard-header-line" /> <div class="dashboard-header-title">WMS库存信息</div> </el-row> <el-row class="dashboard-legend"> <div v-for="item in cassetteStatusList" :key="'cassette' + item.id" class="dashboard-legend-cassette" > <div class="dashboard-legend-cassette-cricle" :style="{ background: item.color }" /> {{ item.name }} </div> | <div v-for="item in portAttributeList" :key="'port' + item.id" class="dashboard-legend-port" :style="{ background: item.color }" > {{ item.name }} </div> <div class="dashboard-legend-btn"> <el-button type="primary" size="mini" @click="submitLinkList">{{ "btn.submit" | i18nFilter }}</el-button> <el-button type="warning" size="mini" @click="init()">{{ 'btn.reset' | i18nFilter }}</el-button> <el-button type="success" size="mini" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button> </div> <div class="dashboard-legend-search"> <el-select v-model="current" size="mini" placeholder="请选择库存范围" @change="handleChange" > <el-option v-for="item in totalPage" :key="'select' + item" :label="'第' + item + '页'" :value="item" /> </el-select> </div> </el-row> <el-row v-if="current * 80 < shelfList[0].rowList[0].portList.length" class="dashboard-layout" :gutter="12" > <el-col v-for="item in 4" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6" > <el-row> <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf" > <el-row> <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row" > <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{ background: portAttributeObj[ z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute ], cursor: z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute === 3 ? '#A2A8B5' : '', border: selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) ? '1px solid red' : '' }" @click=" setType( z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ] ) " > <div v-if=" z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute !== 3 " class="dashboard-layout-item-cricle" :style="{ background: 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"> {{ "第" + bottomIndex[index] + "排(" + ((current - 1) * 4 + item) + ")" }} </div> </el-col> </el-row> </el-col> </el-row> <el-row v-else class="dashboard-layout" :gutter="12"> <el-col v-for="item in Math.ceil( (shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20 )" :key="'shelfbox' + item" class="dashboard-layout-shelf-box" :span="6" > <el-row> <el-col v-for="(i, index) in shelfList" :key="item + 'shelf' + i.id" :span="12" class="dashboard-layout-shelf" > <el-row v-if=" item < Math.ceil( (shelfList[0].rowList[0].portList.length - (current - 1) * 80) / 20 ) " > <el-col v-for="z in i.rowList" :key="item + 'shelf' + i + 'row' + z.id" :span="12" class="dashboard-layout-row" > <div v-for="x in 20" :key="item + 'shelf' + i + 'row' + z + 'item' + x" class="dashboard-layout-item" :style="{ background: portAttributeObj[ z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute ], cursor: z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute === 3 ? 'not-allowed' : 'pointer', color: z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute === 3 ? '#A2A8B5' : '', border: selectStorageList.some(StorageItem=>StorageItem.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) ? '1px solid red' : '' }" @click=" setType( z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ] ) " > <div v-if=" z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute !== 3 " class="dashboard-layout-item-cricle" :style="{ background: 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.locationId===z.portList[(current - 1) * 80 + (item - 1) * 20 + (x - 1)].id) ? '1px solid red' : '' }" @click=" setType( z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ] ) " > <div v-if=" z.portList[ (current - 1) * 80 + (item - 1) * 20 + (x - 1) ].attribute !== 3 " class="dashboard-layout-item-cricle" :style="{ background: 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"> {{ "第" + bottomIndex[index] + "排(" + ((current - 1) * 4 + item) + ")" }} </div> </el-col> </el-row> </el-col> </el-row> </el-card> <process-storage-type v-if="typeVisible" ref="typeRef" @refreshDataList="setStorageList" /> </div> </template> <script> import { batchListAdd } from '@/api/basicData/Warehouse/StorageBoxInfo' import testdata from './testdata' import processStorageType from './processStorageType' export default { name: 'Dashboard', components: { processStorageType }, data() { return testdata }, created() { this.id = this.$route.query.id this.totalPage = Math.ceil( this.shelfList[0].rowList[0].portList.length / 80 ) this.init() }, methods: { init() { this.selectStorageList.splice(0, this.selectStorageList.length) }, setType(item) { if (item.attribute !== 3) { if (this.selectStorageList.findIndex(StorageItem => StorageItem.locationId === item.id) + 1) { this.selectStorageList.splice(this.selectStorageList.findIndex(StorageItem => StorageItem.locationId === item.id), 1) } else { this.typeVisible = true this.$nextTick(() => { this.$refs.typeRef.init(item.id) }) } } }, setStorageList(locationId, dataForm) { const obj = Object.assign({ locationId }, dataForm) this.selectStorageList.push(obj) }, handleChange(v) { console.log(v) }, submitLinkList() { const tipArr = this.selectStorageList.map(item => { return item.locationId }) const obj = { id: this.id, processLocationStorageList: this.selectStorageList } this.$confirm(`${this.$t('module.basicData.visual.TipsStorageBefore')}[${tipArr.join(',')}]?`, this.$t('module.basicData.visual.Tips'), { confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'), cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'), type: 'warning' }).then(() => { batchListAdd(obj).then(res => { this.$message({ message: this.$t('module.basicData.visual.success'), type: 'success', duration: 1500, onClose: () => { this.selectStorageList.splice(0, this.selectStorageList.length) } }) }) }).catch(() => {}) }, goback() { this.selectStorageList.splice(0, this.selectStorageList.length) this.$router.go(-1) } } } </script> <style lang="scss" scoped> .dashboard-container { background: #f2f4f9; min-height: calc(100vh - 134px); overflow-x: scroll; padding: 0 16px; padding-top: 24px; font-size: 14px; .dashboard-main { width: 100%; min-width: 1380px; background-color: #fff; border-radius: 8px; min-height: calc(100vh - 186px); .dashboard-title { .dashboard-header-line { display: inline-block; width: 4px; height: 16px; background: #0b58ff; border-radius: 1px; position: relative; top: 2px; margin-right: 4px; } .dashboard-header-title { display: inline-block; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; line-height: 16px; } } .dashboard-legend { margin-top: 20px; .dashboard-legend-cassette { display: inline-block; margin-right: 24px; .dashboard-legend-cassette-cricle { display: inline-block; width: 12px; height: 12px; border-radius: 6px; } } .dashboard-legend-port { display: inline-block; height: 24px; line-height: 24px; border-radius: 4px; padding: 0 16px; margin-left: 24px; } .dashboard-legend-btn { margin: 0 20px; float: right; } .dashboard-legend-search { float: right; } } .dashboard-layout { margin: 20px 0; .dashboard-layout-shelf-box { .dashboard-layout-footer { text-align: center; margin-top: 12px; } .dashboard-layout-shelf { padding: 0 8px; .dashboard-layout-row { padding: 0 1px; .dashboard-layout-item { width: 100%; text-align: center; height: 32px; box-shadow: 0px 3px 6px 0px rgba(166, 174, 190, 0.8); border-radius: 2px 4px 4px 2px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; .dashboard-layout-item-cricle { display: inline-block; width: 12px; height: 12px; border-radius: 6px; margin-right: 6px; } } } } } } } } </style>