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