From 4757e21f5477d10934c8e26d28e19bbafaa7196f Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期四, 02 十一月 2023 19:26:56 +0800
Subject: [PATCH] 物料详情的弹框开发一半
---
src/views/dashboard/components/InputOutMaterialInfo.vue | 13 ++
src/views/dashboard/components/MaterialDetails.vue | 176 ++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 186 insertions(+), 3 deletions(-)
diff --git a/src/views/dashboard/components/InputOutMaterialInfo.vue b/src/views/dashboard/components/InputOutMaterialInfo.vue
index a178b56..fa0766c 100644
--- a/src/views/dashboard/components/InputOutMaterialInfo.vue
+++ b/src/views/dashboard/components/InputOutMaterialInfo.vue
@@ -1,5 +1,5 @@
<template>
- <div class="input-out-material-info">
+ <div class="input-out-material-info" @click="materialInfoClick">
<div class="card-t">
<div class="card-t-t card_drop">
<el-popover :width="200" placement="top-start" trigger="click">
@@ -35,12 +35,13 @@
</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 { toRefs } from 'vue'
-
+import { ref, toRefs } from 'vue'
export interface InputOutMaterialInfoProps {
item: inputMaterial
background?: string
@@ -50,6 +51,11 @@
background: '#ffcc00'
})
const { item, background } = toRefs(props)
+const showModal = ref(false)
+
+function materialInfoClick() {
+ showModal.value = true
+}
</script>
<style scoped lang="scss">
@@ -70,6 +76,7 @@
margin-right: 10px;
margin-bottom: 10px;
position: relative;
+ cursor: pointer;
.card_drop {
width: 100%;
diff --git a/src/views/dashboard/components/MaterialDetails.vue b/src/views/dashboard/components/MaterialDetails.vue
new file mode 100644
index 0000000..9801f76
--- /dev/null
+++ b/src/views/dashboard/components/MaterialDetails.vue
@@ -0,0 +1,176 @@
+<template>
+ <div class="material-details">
+ <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 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>
+ <BigButton class="btn" bg-color="#03d203f0">宸查�佽揪</BigButton>
+ </div>
+ </div>
+ <div class="details-b">
+ <el-scrollbar always class="scroller">
+ <div class="details-b-t">杩愯緭璇︽儏</div>
+ <div class="details-b-b">
+ <el-steps finish-status="success" class="steps" direction="vertical">
+ <el-step v-for="(item, index) in materialObj.materialFlow" :key="index" icon="">
+ <template #title>
+ {{ item.label }}
+ </template>
+ <template #description>
+ {{ item.date }}
+ {{ item.name }}
+ {{ item.deviceName }}
+ </template>
+ </el-step>
+ </el-steps>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+ </BaseModal>
+ </div>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import BigButton from '@/views/dashboard/components/BigButton.vue'
+import { ref } from 'vue'
+export interface MaterialDetailsProps {
+ modelValue: boolean
+}
+const props = withDefaults(defineProps<MaterialDetailsProps>(), {
+ modelValue: false
+})
+const emit = defineEmits<{
+ 'update:modelValue': [show: boolean]
+}>()
+const modelData = useVModel(props, 'modelValue', emit)
+
+function closeModal() {
+ modelData.value = false
+}
+const materialObj = {
+ form: {
+ materialId: '1111',
+ materialName: '杈撳叆鍚嶇О',
+ amount: 10,
+ unit: '涓�',
+ date: 10
+ },
+ materialFlow: [
+ {
+ label: '宸查�佽揪',
+ date: '2023-07-11',
+ name: '寮犱笁',
+ deviceName: '璁惧鍚嶇О'
+ },
+ {
+ label: '宸查�佽揪',
+ date: '2023-07-11',
+ name: '寮犱笁',
+ deviceName: '璁惧鍚嶇О'
+ },
+ {
+ label: '宸查�佽揪',
+ date: '2023-07-11',
+ name: '寮犱笁',
+ deviceName: '璁惧鍚嶇О'
+ },
+ {
+ label: '宸查�佽揪',
+ date: '2023-07-11',
+ name: '寮犱笁',
+ deviceName: '璁惧鍚嶇О'
+ }
+ ]
+}
+</script>
+<style scoped lang="scss">
+$status-default: #03d203f0;
+$status-running: #f76c0f;
+$status-ready: #13235a;
+$status-done: #0dfde6;
+.details-box {
+ height: 600px;
+ .details-t {
+ width: 100%;
+ padding: 10px 30px;
+ height: 100px;
+ color: $status-done;
+ font-size: 16px;
+ .details-t-t {
+ font-size: 23px;
+ line-height: 30px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
+ .details-t-b {
+ width: 100%;
+ height: 90px;
+ padding: 0 30px 10px;
+ .details-t-b-l {
+ float: left;
+ width: calc(100% - 110px);
+ .item {
+ width: 50%;
+ float: left;
+ }
+ }
+ .btn {
+ width: 110px;
+ float: right;
+ font-size: 14px;
+ height: 35px;
+ line-height: 35px;
+ }
+ }
+ }
+ .details-b {
+ width: calc(100% - 60px);
+ padding: 10px 20px;
+ background: $status-ready;
+ border-radius: 4px;
+ margin: 20px 30px 10px;
+ height: calc(100% - 140px);
+ color: #fff;
+ .details-b-t {
+ font-size: 17px;
+ line-height: 30px;
+ height: 30px;
+ width: 100%;
+ }
+ .details-b-b {
+ width: 100%;
+ height: calc(100% - 30px);
+ overflow-x: auto;
+ margin-top: -5px;
+ padding: 0 20px;
+ .steps {
+ height: 100%;
+ .el-step__icon {
+ width: 16px;
+ height: 16px;
+ }
+ .el-step__title {
+ line-height: 25px;
+ font-size: 14px;
+ }
+ .el-step__title.is-process {
+ color: #a8abb2;
+ }
+ }
+ }
+ }
+}
+
+.scroller {
+ padding: 4px 16px;
+}
+</style>
--
Gitblit v1.8.0