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