From e9f13c55203da7e9cc2c1b7cb863a7ecee04b21c Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期二, 31 十月 2023 11:49:43 +0800
Subject: [PATCH] feat: 任务详情组件;按钮组件;子标题组件
---
src/views/dashboard/components/TaskControl.vue | 118 +++++++++++++++++++++++++++++
src/views/dashboard/index.vue | 17 +++-
src/views/dashboard/components/BigButton.vue | 51 ++++++++++++
src/components/DashboardLayout.vue | 4
src/views/dashboard/components/SubTitle.vue | 26 ++++++
5 files changed, 210 insertions(+), 6 deletions(-)
diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue
index e3d5309..8bebf18 100644
--- a/src/components/DashboardLayout.vue
+++ b/src/components/DashboardLayout.vue
@@ -38,12 +38,12 @@
<div class="header-block padding-4">
<slot name="rightBlock1"></slot>
</div>
- <div class="base-block padding-4">
+ <div class="top-block padding-4">
<div class="card">
<slot name="rightBlock2"></slot>
</div>
</div>
- <div class="base-block padding-4">
+ <div class="bottom-block padding-4">
<div class="card">
<slot name="rightBlock3"></slot>
</div>
diff --git a/src/views/dashboard/components/BigButton.vue b/src/views/dashboard/components/BigButton.vue
new file mode 100644
index 0000000..61834e4
--- /dev/null
+++ b/src/views/dashboard/components/BigButton.vue
@@ -0,0 +1,51 @@
+<template>
+ <button class="big-button user-style" :class="{ disabled: props.disabled }" :disabled="props.disabled">
+ <slot></slot>
+ </button>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+
+const props = withDefaults(
+ defineProps<{
+ bgColor?: string
+ color?: string
+ disabled?: boolean
+ }>(),
+ {
+ bgColor: '#4efefa',
+ color: '#fff',
+ disabled: false
+ }
+)
+
+const { bgColor, color } = toRefs(props)
+</script>
+<style scoped lang="scss">
+.big-button {
+ width: 180px;
+ background-color: #4efefa;
+ color: #fff;
+ height: 60px;
+ text-align: center;
+ line-height: 60px;
+ font-size: 26px;
+ font-weight: 700;
+ border-radius: 8px;
+ cursor: pointer;
+ user-select: none;
+ outline: none;
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+.user-style {
+ color: v-bind(color);
+ background-color: v-bind(bgColor);
+}
+.big-button.disabled {
+ cursor: not-allowed;
+ background-color: #afafaf;
+ color: #868686;
+}
+</style>
diff --git a/src/views/dashboard/components/SubTitle.vue b/src/views/dashboard/components/SubTitle.vue
new file mode 100644
index 0000000..8b8b89c
--- /dev/null
+++ b/src/views/dashboard/components/SubTitle.vue
@@ -0,0 +1,26 @@
+<template>
+ <div class="sub-title">
+ <slot></slot>
+ </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss">
+.sub-title {
+ position: relative;
+ padding-left: 20px;
+ color: #fff;
+ font-size: 20px;
+ font-weight: 700;
+ height: 32px;
+ &:before {
+ content: '';
+ background-color: #00dfdf;
+ width: 5px;
+ height: 24px;
+ position: absolute;
+ margin-top: 4px;
+ top: 0;
+ left: 0;
+ }
+}
+</style>
diff --git a/src/views/dashboard/components/TaskControl.vue b/src/views/dashboard/components/TaskControl.vue
new file mode 100644
index 0000000..bb55687
--- /dev/null
+++ b/src/views/dashboard/components/TaskControl.vue
@@ -0,0 +1,118 @@
+<template>
+ <div class="task-control">
+ <div class="task-info">
+ <div class="task-info-item">
+ <div class="task-info-title">璁″垝寮�濮嬫椂闂�</div>
+ <div class="task-info-content">{{ formatDate(task?.Procedure?.startTime) }}</div>
+ </div>
+ <div class="task-info-item">
+ <div class="task-info-title">瀹為檯寮�濮嬫椂闂�</div>
+ <div class="task-info-content">{{ formatDate(task?.Procedure?.realStartTime) }}</div>
+ </div>
+
+ <div class="task-info-item">
+ <div class="task-info-title">瀹為檯缁撴潫鏃堕棿</div>
+ <div class="task-info-content">{{ formatDate(task?.Procedure?.realEndTime) }}</div>
+ </div>
+ </div>
+
+ <div class="produce-btn">
+ <BigButton v-if="task?.Procedure.Status === 1" class="btn" :disabled="!task?.CanStarted" @click="startProduce">
+ 寮�濮嬬敓浜�
+ </BigButton>
+ <template v-if="task?.Procedure.Status === 2 || task?.Procedure.Status === 3">
+ <BigButton class="btn" bg-color="#ff9933">鎵撳嵃</BigButton>
+ <BigButton class="btn" bg-color="#00cc33">鎶ュ伐</BigButton>
+ <BigButton class="btn" bg-color="#ff0000">瀹屾垚</BigButton>
+ </template>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import type { Task } from '@/api/task'
+import { toRefs } from 'vue'
+import BigButton from '@/views/dashboard/components/BigButton.vue'
+import { useDateFormat } from '@vueuse/core'
+
+const props = defineProps<{
+ task?: Task
+}>()
+const { task } = toRefs(props)
+/**
+ * 寮�濮嬬敓浜�
+ */
+function startProduce() {
+ // TODO:
+ // console.log(1)
+}
+
+/**
+ * 鏍煎紡鍖栨椂闂存埑
+ * @param timestamp 鍚庣杩旂殑10浣嶆椂闂存埑
+ */
+function formatDate(timestamp?: number) {
+ if (!timestamp) {
+ return '--'
+ }
+ const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' })
+ return time.value
+}
+</script>
+<style scoped lang="scss">
+$title-text-color: #9599af;
+$content-text-color: #d7d7d7;
+
+.task-control {
+ display: flex;
+ align-items: start;
+ width: 100%;
+}
+.task-info,
+.produce-btn {
+ width: 50%;
+ flex: 1;
+ height: 100%;
+}
+.produce-btn {
+ padding: 16px 0;
+ & > .btn {
+ margin-bottom: 14px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+.task-info-item {
+ padding: 10px 20px;
+ margin-bottom: 6px;
+}
+.task-info-title {
+ font-size: 18px;
+ color: $title-text-color;
+}
+.task-info-content {
+ font-size: 19px;
+ color: $content-text-color;
+ font-weight: 600;
+ margin-top: 12px;
+}
+.produce-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.start-btn {
+ background-color: #4efefa;
+}
+.print-btn {
+ background-color: #ff9933;
+}
+.report-btn {
+ background-color: #00cc33;
+}
+.finish-btn {
+ background-color: #ff0000;
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7e6127a..9036baa 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -16,9 +16,14 @@
<el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟">Role</el-tab-pane>
</el-tabs>
</template>
- <template #middleBlock3> 浠诲姟璇︽儏 </template>
- <template #middleBlock4
- >浜哄憳淇℃伅
+ <template #middleBlock3>
+ <SubTitle>浠诲姟璇︽儏</SubTitle>
+ <div class="task-detail">
+ <TaskControl :task="activeTask"></TaskControl>
+ </div>
+ </template>
+ <template #middleBlock4>
+ <SubTitle>浜哄憳淇℃伅</SubTitle>
<PersonInfo :person="person"></PersonInfo>
</template>
<template #rightBlock1>
@@ -27,7 +32,9 @@
</div>
</template>
<template #rightBlock2>鐘舵�侀潰鏉�</template>
- <template #rightBlock3>鐭ヨ瘑搴�</template>
+ <template #rightBlock3>
+ <SubTitle>鐭ヨ瘑搴�</SubTitle>
+ </template>
</DashboardLayout>
</template>
<script setup lang="ts">
@@ -41,6 +48,8 @@
import { useTasksStore } from '@/stores/tasks'
import { storeToRefs } from 'pinia'
import ProcessingInfo from '@/views/dashboard/components/ProcessingInfo.vue'
+import TaskControl from '@/views/dashboard/components/TaskControl.vue'
+import SubTitle from '@/views/dashboard/components/SubTitle.vue'
defineOptions({
name: 'DashboardView'
--
Gitblit v1.8.0