From 83a982e1e889cb8f6ba03cab92b222d83434a398 Mon Sep 17 00:00:00 2001 From: wxw <Administrator@DESKTOP-5BIMHQ3> Date: 星期五, 06 九月 2024 16:55:50 +0800 Subject: [PATCH] 新增箱码明细表;开发分拣码垛绑定任务功能 --- Web/src/views/device/sortPallet/index.vue | 323 +++++++++++++++++++++++++++++++++-------------------- 1 files changed, 201 insertions(+), 122 deletions(-) diff --git a/Web/src/views/device/sortPallet/index.vue b/Web/src/views/device/sortPallet/index.vue index 676a25b..2a94f23 100644 --- a/Web/src/views/device/sortPallet/index.vue +++ b/Web/src/views/device/sortPallet/index.vue @@ -1,127 +1,200 @@ <template> - <el-container> - <div class="card-container"> - <el-card class="other-box-card" v-for="deviceInfo in deviceList" :key="deviceInfo.id"> - <div slot="header" class="linefix"> - <span>{{ deviceInfo.name }}</span> - <div :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]"></div> - </div> - <div class="otherValuefix" > - <el-form label-position="left" label-width="90px"> - <el-form-item label="WMS鏄庣粏鍗曞彿"> - <el-input></el-input> - </el-form-item> - <el-form-item label="浠诲姟鍙�"> - <el-input v-model="deviceInfo.taskNumber"></el-input> - </el-form-item> - <el-form-item label="鐗╂枡缂栫爜"> - <el-input></el-input> - </el-form-item> - <el-form-item label="鐗╂枡鍚嶇О"> - <el-input></el-input> - </el-form-item> - <el-form-item label="鍖呰鍚嶇О"> - <el-input></el-input> - </el-form-item> - <el-form-item label="鐘舵��"> - <el-input></el-input> - </el-form-item> - <el-form-item label="鎶撶鍝佺"> - <el-input></el-input> - </el-form-item> - <el-form-item label="DB璁板綍绠辨暟"> - <el-input></el-input> - </el-form-item> - <el-form-item label="鎵樼洏鍙�"> - <el-input></el-input> - </el-form-item> - <el-form-item label="鐮佸灈绠辨暟"> - <el-input></el-input> - </el-form-item> - <el-form-item label="WMS涓嬪彂鏁伴噺"> - <el-input></el-input> - </el-form-item> - </el-form> - </div> - <div class="otherButtonfix"> - <el-form label-position="left"> - <el-form-item> - <el-button type="primary">缁戝畾</el-button> - <el-button>缁撴壒</el-button> - </el-form-item> - </el-form> - </div> - </el-card> + <el-container> + <el-col> + <el-row :span="1"> + <div class="card-page"> + <el-button + v-for="device in deviceList" + :key="device.id" + type="primary" + :plain="selectedDeviceId !== device.id" + @click="chooseDevice(device.id)" + > + {{ device.name }} + </el-button> + </div> + </el-row> + <el-row :span="1"> + <div class="card-container"> + <el-card class="other-box-card" v-for="deviceInfo in devicePointData" :key="deviceInfo.id"> + <div slot="header" class="linefix"> + <span>{{ deviceInfo.text }}</span> + <div :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]"></div> + </div> + <div class="otherValuefix" > + <el-form label-position="left" label-width="90px"> + <el-form-item label="WMS鏄庣粏鍗曞彿"> + <el-input></el-input> + </el-form-item> + <el-form-item label="浠诲姟鍙�"> + <el-input v-model="deviceInfo.taskNumber"></el-input> + </el-form-item> + <el-form-item label="鎵规鍙�"> + <el-input></el-input> + </el-form-item> + <el-form-item label="鐗╂枡缂栫爜"> + <el-input></el-input> + </el-form-item> + <el-form-item label="鐗╂枡鍚嶇О"> + <el-input></el-input> + </el-form-item> + <el-form-item label="鍖呰鍚嶇О"> + <el-input></el-input> + </el-form-item> + <el-form-item label="缁戝畾鐘舵��"> + <el-input></el-input> + </el-form-item> + <el-form-item label="鎶撶鍝佺"> + <el-input></el-input> + </el-form-item> + <el-form-item label="鎵樼洏鍙�"> + <el-input></el-input> + </el-form-item> + <el-form-item label="鎻掔爜鏁伴噺"> + <el-input></el-input> + </el-form-item> + <el-form-item label="鎵樼洏涓婄鏁伴噺"> + <el-input></el-input> + </el-form-item> + <el-form-item label="WMS涓嬪彂鏁伴噺"> + <el-input></el-input> + </el-form-item> + </el-form> + </div> + <div class="otherButtonfix"> + <el-form label-position="left"> + <el-form-item> + <el-button type="primary" @click="openBindDialog()">缁戝畾</el-button> + <el-button>缁撴壒</el-button> + </el-form-item> + </el-form> + </div> + </el-card> + </div> + </el-row> + </el-col> + + <!-- 缁戝畾浠诲姟寮规 --> + <el-dialog v-model="bindDialogVisible" title="閫夋嫨鏁版嵁"> + <el-table + :data="bindData" + highlight-current-row + @row-click="handleRowClick" + > + <el-table-column type="selection" width="55"/> + + <el-table-column prop="orderNo" label="WMS涓嬪彂鍗曞彿" show-overflow-tooltip="" /> + <el-table-column prop="taskNo" label="浠诲姟鍙�" show-overflow-tooltip="" /> + <el-table-column prop="lotNo" label="鎵规鍙�" show-overflow-tooltip="" /> + <el-table-column prop="skuNo" label="鐗╂枡缂栫爜" show-overflow-tooltip="" /> + <el-table-column prop="skuName" label="鐗╂枡鍚嶇О" show-overflow-tooltip="" /> + <el-table-column prop="boxType" label="瑙勬牸" show-overflow-tooltip="" /> + <el-table-column prop="qty" label="鎬荤鏁�/璁″垝绠辨暟/棰勪及绠辨暟" show-overflow-tooltip="" /> + </el-table> + <div slot="footer" class="dialog-footer"> + <el-button @click="bindDialogVisible = false">鍙栨秷</el-button> + <el-button type="primary" @click="confirmBinding">纭</el-button> </div> - </el-container> + </el-dialog> + </el-container> </template> - <script lang="ts" setup> - import { ref, reactive } from 'vue'; +<script lang="ts" setup> +import { ref } from 'vue'; +import { GetWcsPackPlcList,GetWcsPackStationPlcList } from '/@/api/wcs/wcsDevice'; +import { pageWcsOderTask } from '/@/api/device/wcsOderTask'; - const deviceList=[ - { - id: 1, - name: '1鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: 'T000001', - taskType: '', - plc: '', - wcs: '', - status: 0 - }, - { - id: 2, - name: '2鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 1 - }, - { - id: 3, - name: '3鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 0 - },{ - id: 4, - name: '4鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 1 - },{ - id: 5, - name: '5鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 0 - },{ - id: 6, - name: '6鍙风爜鍨涙満鍣ㄤ汉', - taskNumber: '', - taskType: '', - plc: '', - wcs: '', - status: 0 - } - ] - </script> - - <style scoped> - .card-container { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 10px; +//璁惧鏁版嵁 +const deviceList=ref<any>([]); +//璁惧瀵瑰簲宸ヤ綅鏁版嵁 +const devicePointData = ref<any>([]); +//閫変腑璁惧ID +const selectedDeviceId=ref<any>(); + +const bindDialogVisible = ref(false); +const bindData = ref<any>([]); +const selectedRow = ref<any>(null); +const queryParams = ref<any>({}); +const tableParams = ref({ + page: 1, + pageSize: 10, + total: 0, +}); + +//鑾峰彇璁惧瀵瑰簲鐨勫伐浣嶆暟鎹� +const fetchStationData = async (plcId: any) => { + const res2 = await GetWcsPackStationPlcList({ plcId }); + devicePointData.value = res2.data.result; +}; +// 鑾峰彇璁惧鏁版嵁 +const fetchPLCDeviceData = async () => { + var res = await GetWcsPackPlcList(); + deviceList.value = res.data.result; + + if (deviceList.value.length > 0) { + selectedDeviceId.value = deviceList.value[0].id; + await fetchStationData(selectedDeviceId.value); } - .other-box-card { - box-sizing: border-box; +}; +fetchPLCDeviceData(); + +//鍒囨崲璁惧 +function chooseDevice(id) { + selectedDeviceId.value = id; + fetchStationData(id); +} + +const handleQuery = async () => { + var res = await pageWcsOderTask(Object.assign(queryParams.value, tableParams.value)); + bindData.value = res.data.result?.items ?? []; + tableParams.value.total = res.data.result?.total; + }; +//鎵撳紑缁戝畾寮规 +function openBindDialog() { + bindDialogVisible.value = true; + // Mock data for binding + handleQuery(); +} +//鐐瑰嚮琛屾椂璁剧疆閫変腑琛� +function handleRowClick(row) { + selectedRow.value = row; +} + +//纭缁戝畾鎿嶄綔 +function confirmBinding() { + if (selectedRow.value) { + console.log('Selected Row:', selectedRow.value); + // Do binding logic here + bindDialogVisible.value = false; + } else { + console.error('No row selected'); + } +} + +</script> + +<style scoped> + .card-page { + width: 100%; + height: 50px; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + text-align: center; + } + .card-page>button { + width: 150px; + height: 30px; + } + .card-container { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 10px; + } + .other-box-card { + box-sizing: border-box; + background: linear-gradient(135deg, #66ccff, #3399ff); } .lineStatus{ position: absolute; @@ -138,26 +211,32 @@ align-items: center; height: 40px; position: relative; + color: #fff; } .otherValuefix{ width: 100%; - height: 600px; + height: 540px; padding: 10px; border-bottom: 1px solid rgb(197, 195, 195); } .otherButtonfix{ width: 100%; - height: 100px; + height: 60px; display: flex; align-items: center; justify-content: center; padding: 0; } .device-status-0{ - background-color: #67C23A; + background-color: #58f709; } .device-status-1{ background-color: red; } - </style> + .dialog-footer { + display: flex; + justify-content: flex-end; + margin-top: 20px; + } +</style> \ No newline at end of file -- Gitblit v1.8.0