From bcb8d1e446e0292bf551073ed66c76997b9bdb18 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期五, 03 十一月 2023 15:10:11 +0800 Subject: [PATCH] feat: 对接物料数据 --- src/views/dashboard/components/InputMaterialsList.vue | 33 +++---- src/views/dashboard/components/InputOutMaterialInfo.vue | 57 ++++++------- src/views/dashboard/index.vue | 36 ++++++-- src/api/task.ts | 7 - src/views/dashboard/components/MaterialDetails.vue | 31 +++---- src/views/dashboard/components/OutputMaterialsList.vue | 65 +++------------ 6 files changed, 100 insertions(+), 129 deletions(-) diff --git a/src/api/task.ts b/src/api/task.ts index 125883a..ca76d50 100644 --- a/src/api/task.ts +++ b/src/api/task.ts @@ -47,8 +47,8 @@ startTime: number endTime: number workHours: string - inputMaterials: inputMaterial[] - outputMaterials: inputMaterial[] + inputMaterials: Material[] + outputMaterials: Material[] workers: Worker[] allProcedureNames: string[] channel: number @@ -62,12 +62,11 @@ CurrentProcedureIndex: number CanStarted: boolean } -export interface inputMaterial { +export interface Material { materialId: string materialName: string amount: number unit: string - background: string date: string } diff --git a/src/views/dashboard/components/InputMaterialsList.vue b/src/views/dashboard/components/InputMaterialsList.vue index 1cc551a..f4d946f 100644 --- a/src/views/dashboard/components/InputMaterialsList.vue +++ b/src/views/dashboard/components/InputMaterialsList.vue @@ -6,8 +6,8 @@ </div> <el-scrollbar always class="scroller"> <div class="materials-b"> - <div v-for="item in inputMaterials" :key="item.materialId"> - <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo> + <div v-for="item in props.materialList" :key="item.materialId"> + <InputOutMaterialInfo :material="item" @detail-click="onDetailClick"></InputOutMaterialInfo> </div> </div> </el-scrollbar> @@ -16,23 +16,18 @@ <script setup lang="ts"> import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue' import BigButton from '@/views/dashboard/components/BigButton.vue' -import { toRefs } from 'vue' -const inputMaterials = [ - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�', - date: 10 - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - } -] +import type { Material } from '@/api/task' + +const props = defineProps<{ + materialList?: Material[] +}>() +const emits = defineEmits<{ + detailClick: [material: Material] +}>() + +function onDetailClick(material: Material) { + emits('detailClick', material) +} </script> <style scoped lang="scss"> diff --git a/src/views/dashboard/components/InputOutMaterialInfo.vue b/src/views/dashboard/components/InputOutMaterialInfo.vue index fa0766c..35e858a 100644 --- a/src/views/dashboard/components/InputOutMaterialInfo.vue +++ b/src/views/dashboard/components/InputOutMaterialInfo.vue @@ -4,57 +4,55 @@ <div class="card-t-t card_drop"> <el-popover :width="200" placement="top-start" trigger="click"> <template #reference> - {{ item.materialId }} + {{ material.materialId }} </template> - {{ item.materialId }} + {{ material.materialId }} </el-popover> </div> <div class="card-t-b"> - 璁惧12 - <el-icon class="right-arrow"> - <Right /> - </el-icon> - 璁惧13 + <!-- TODO: 鎺ュ彛缂哄け鏁版嵁, 寰呮坊鍔�--> + <!-- 璁惧12--> + <!-- <el-icon class="right-arrow">--> + <!-- <Right />--> + <!-- </el-icon>--> + <!-- 璁惧13--> </div> </div> <div class="card-b"> <div class="card_drop card-b-l"> <el-popover :width="200" placement="top-start" trigger="click"> <template #reference> - {{ item.materialName }} + {{ material.materialName }} </template> - {{ item.materialName }} + {{ material.materialName }} </el-popover> </div> <div class="card-b-r"> - <el-popover v-if="item.date" popper-class="card-info" :width="110" placement="top" trigger="click"> - <template #reference> {{ item.amount }} {{ item.unit }} </template> - 棰勮{{ item.date }}鍒嗛挓閫佽揪 + <el-popover v-if="material.date" popper-class="card-info" :width="110" placement="top" trigger="click"> + <template #reference> {{ material.amount }} {{ material.unit }} </template> + 棰勮{{ material.date }}鍒嗛挓閫佽揪 </el-popover> - <div v-else>{{ item.amount }} {{ item.unit }}</div> + <div v-else>{{ material.amount }} {{ material.unit }}</div> </div> </div> </div> - <MaterialDetails v-model="showModal"></MaterialDetails> </template> <script setup lang="ts"> -import type { inputMaterial } from '@/api/task' -import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue' -import { Right } from '@element-plus/icons-vue' -import { ref, toRefs } from 'vue' +import type { Material } from '@/api/task' +import { toRefs } from 'vue' export interface InputOutMaterialInfoProps { - item: inputMaterial - background?: string + material: Material + // TODO: 鎺ュ彛杩樹笉鏀寔, 棰勭暀 + type?: '宸查�佽揪' | '杩愯緭涓�' } -const props = withDefaults(defineProps<InputOutMaterialInfoProps>(), { - background: '#ffcc00' -}) -const { item, background } = toRefs(props) -const showModal = ref(false) - +const props = defineProps<InputOutMaterialInfoProps>() +const { material } = toRefs(props) +const emits = defineEmits<{ + detailClick: [material: Material] +}>() function materialInfoClick() { - showModal.value = true + emits('detailClick', material.value) } </script> @@ -93,8 +91,7 @@ font-size: 12px; color: #333; padding: 3px 5px; - // background: $status-done; - background-color: v-bind(background); + background: $status-done; text-align: left; .card-t-t { width: 100%; @@ -126,7 +123,7 @@ background: red !important; font-size: 12px; color: #fff; - border: 0px; + border: 0; border-radius: 10px; // height:20px!important; line-height: 8px !important; diff --git a/src/views/dashboard/components/MaterialDetails.vue b/src/views/dashboard/components/MaterialDetails.vue index 1df2fdc..0077c34 100644 --- a/src/views/dashboard/components/MaterialDetails.vue +++ b/src/views/dashboard/components/MaterialDetails.vue @@ -3,19 +3,22 @@ <BaseModal v-model="modelData" :wider="true" @close="closeModal"> <template #title>鐗╂枡璇︽儏 </template> <div class="details-box"> - <div class="details-t"> - <div class="details-t-t">{{ materialObj.form.materialId }}</div> + <div v-if="material" class="details-t"> + <div class="details-t-t">{{ material.materialId }}</div> <div class="details-t-b"> <div class="details-t-b-l"> - <div class="item">鐗╂枡鍚嶇О锛歿{ materialObj.form.materialName }}</div> - <div class="item">鏁伴噺锛歿{ materialObj.form.amount }}</div> - <div class="item">鐗╂枡瑙勬牸锛歿{ materialObj.form.amount }}</div> - <div class="item">鐗╂枡绫诲瀷锛歿{ materialObj.form.amount }}</div> + <div class="item">鐗╂枡鍚嶇О锛歿{ material.materialName }}</div> + <div class="item">鏁伴噺锛歿{ material.amount }}</div> + <div class="item">鐗╂枡瑙勬牸锛歿{ material.amount }}</div> + <div class="item">鐗╂枡绫诲瀷锛歿{ material.amount }}</div> </div> - <BigButton class="btn" bg-color="#03d203f0">宸查�佽揪</BigButton> + <!-- TODO: 鐗╂枡閫佽揪缂烘帴鍙�--> + <BigButton v-if="false" class="btn" bg-color="#03d203f0">宸查�佽揪</BigButton> </div> </div> - <div class="details-b"> + + <!-- TODO: 鐗╂枡閫佽揪缂烘帴鍙�--> + <div v-if="false" class="details-b"> <div class="details-b-t">杩愯緭璇︽儏</div> <div class="details-b-b"> @@ -44,11 +47,13 @@ <script setup lang="ts"> import { useVModel } from '@vueuse/core' import BigButton from '@/views/dashboard/components/BigButton.vue' -import { ref } from 'vue' +import type { Material } from '@/api/task' export interface MaterialDetailsProps { + material?: Material modelValue: boolean } const props = withDefaults(defineProps<MaterialDetailsProps>(), { + material: undefined, modelValue: false }) const emit = defineEmits<{ @@ -59,14 +64,8 @@ function closeModal() { modelData.value = false } +// 鍋囨暟鎹� const materialObj = { - form: { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�', - date: 10 - }, materialFlow: [ { label: '宸查�佽揪', diff --git a/src/views/dashboard/components/OutputMaterialsList.vue b/src/views/dashboard/components/OutputMaterialsList.vue index 092af0e..9ae2fca 100644 --- a/src/views/dashboard/components/OutputMaterialsList.vue +++ b/src/views/dashboard/components/OutputMaterialsList.vue @@ -6,8 +6,8 @@ </div> <el-scrollbar always class="scroller"> <div class="materials-b"> - <div v-for="item in outputMaterials" :key="item.materialId"> - <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo> + <div v-for="item in props.materialList" :key="item.materialId"> + <InputOutMaterialInfo :material="item" @detail-click="onDetailClick"></InputOutMaterialInfo> </div> </div> </el-scrollbar> @@ -16,55 +16,18 @@ <script setup lang="ts"> import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue' import BigButton from '@/views/dashboard/components/BigButton.vue' -import { toRefs } from 'vue' -const outputMaterials = [ - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - }, - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - }, - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - } -] +import type { Material } from '@/api/task' + +const props = defineProps<{ + materialList?: Material[] +}>() +const emits = defineEmits<{ + detailClick: [material: Material] +}>() + +function onDetailClick(material: Material) { + emits('detailClick', material) +} </script> <style scoped lang="scss"> diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 815948f..4f255f6 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -23,8 +23,14 @@ ></ProcessInfo> </el-tab-pane> <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟"> - <InputMaterialsList></InputMaterialsList> - <OutputMaterialsList></OutputMaterialsList> + <InputMaterialsList + :material-list="activeTask?.Procedure.procedure.inputMaterials" + @detail-click="showMaterialDetailModal" + ></InputMaterialsList> + <OutputMaterialsList + :material-list="activeTask?.Procedure.procedure.outputMaterials" + @detail-click="showMaterialDetailModal" + ></OutputMaterialsList> </el-tab-pane> </el-tabs> </template> @@ -33,8 +39,8 @@ <div class="task-detail"> <TaskControl :task="activeTask" @should-reload="reloadAllData"></TaskControl> </div> - <ColorInfo :order="order" :type="1"></ColorInfo> - <ColorInfo :order="order" :type="2"></ColorInfo> + <ColorInfo :type="1"></ColorInfo> + <ColorInfo :type="2"></ColorInfo> </template> <template #middleBlock4> <SubTitle>浜哄憳淇℃伅</SubTitle> @@ -57,11 +63,12 @@ </template> </DashboardLayout> <CraftDetailModal v-model="showCraftModelDetail" @close="showCraftModelDetail = false"></CraftDetailModal> + <MaterialDetails v-model="showMaterialDetail" :material="currentMaterialInfo"></MaterialDetails> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue' import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue' -import type { Worker, Order, Task } from '@/api/task' +import type { Worker, Order, Task, Material } from '@/api/task' import PersonInfo from '@/views/dashboard/components/PersonInfo.vue' import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue' import ColorInfo from '@/views/dashboard/components/ColorInfo.vue' @@ -84,6 +91,7 @@ import { useDevicesStore } from '@/stores/devices' import { useCraftModelStore } from '@/stores/craftModel' import CraftDetailModal from '@/views/dashboard/components/CraftDetailModal.vue' +import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue' defineOptions({ name: 'DashboardView' @@ -93,10 +101,6 @@ const taskStore = useTasksStore() const workers = computed(() => { return taskStore.activeTask?.Procedure?.procedure?.workers ?? [] -}) - -const process = computed(() => { - return { product: '浜у搧鍚嶇О', number: '111', procedure: '宸ヨ壓鍚嶇О', isUpdate: true } as any }) const order = computed(() => { @@ -157,6 +161,20 @@ console.log(1) showCraftModelDetail.value = true } + +// 鏄惁灞曠ず鐗╂枡璇︽儏寮圭獥 +const showMaterialDetail = ref(false) +// 褰撳墠瑕佸睍绀虹殑鐗╂枡璇︽儏 +const currentMaterialInfo = ref<Material>() + +/** + * 鏄剧ず鐗╂枡璇︽儏寮圭獥 + * @param material + */ +function showMaterialDetailModal(material: Material) { + currentMaterialInfo.value = material + showMaterialDetail.value = true +} </script> <style scoped lang="scss"> -- Gitblit v1.8.0