fix: 将TaskFlowQueryDialog改为使用Ant Design Vue组件
This commit is contained in:
Your Name
parent
27314fada7
commit
0bb9975f31
@ -1,29 +1,26 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
<a-modal
|
||||
v-model:open="dialogVisible"
|
||||
title="任务节点查询"
|
||||
width="720px"
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
:footer="null"
|
||||
@cancel="handleClose"
|
||||
class="task-flow-query-modal"
|
||||
>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="searchInput"
|
||||
<a-input-search
|
||||
v-model:value="searchInput"
|
||||
placeholder="请输入任务编号或任务标题关键字"
|
||||
clearable
|
||||
size="large"
|
||||
@keyup.enter="handleSearch"
|
||||
enter-button="查询"
|
||||
:loading="loading"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon name="search" size="sm" />
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button type="primary" :loading="loading" @click="handleSearch">
|
||||
查询
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</a-input-search>
|
||||
<div class="search-tip">
|
||||
支持输入完整任务编号（如 TASK202601221029343146）或任务标题关键字搜索
|
||||
</div>
|
||||
@ -32,26 +29,26 @@
|
||||
<!-- 查询结果 -->
|
||||
<div v-if="result" class="result-container">
|
||||
<!-- 基本信息卡片 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<a-card class="info-card" size="small">
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<span>任务信息</span>
|
||||
<el-tag v-if="result.task.isPrimaryTask" type="warning" size="small">一级需求任务</el-tag>
|
||||
<el-tag v-else size="small">普通任务</el-tag>
|
||||
<el-tag v-if="result.task.isPipeline" type="info" size="small" style="margin-left: 8px;">流水线</el-tag>
|
||||
<a-tag v-if="result.task.isPrimaryTask" color="warning">一级需求任务</a-tag>
|
||||
<a-tag v-else>普通任务</a-tag>
|
||||
<a-tag v-if="result.task.isPipeline" color="processing">流水线</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="任务编号">
|
||||
<el-text type="primary" copyable>{{ result.task.taskNo }}</el-text>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="任务标题">{{ result.task.title }}</el-descriptions-item>
|
||||
<el-descriptions-item label="任务积分">
|
||||
<el-text type="success">{{ result.task.score }} 分</el-text>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ formatTime(result.task.createTime) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<a-descriptions :column="2" bordered size="small">
|
||||
<a-descriptions-item label="任务编号">
|
||||
<a-typography-text copyable>{{ result.task.taskNo }}</a-typography-text>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="任务标题">{{ result.task.title }}</a-descriptions-item>
|
||||
<a-descriptions-item label="任务积分">
|
||||
<span class="score-text">{{ result.task.score }} 分</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ formatTime(result.task.createTime) }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
|
||||
<!-- 当前节点卡片（重点展示） -->
|
||||
<div class="current-node-card">
|
||||
@ -74,23 +71,20 @@
|
||||
</div>
|
||||
|
||||
<!-- 流程时间线 -->
|
||||
<el-card class="timeline-card" shadow="never">
|
||||
<template #header>
|
||||
<span>流程进度</span>
|
||||
</template>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
<a-card class="timeline-card" size="small" title="流程进度">
|
||||
<a-timeline>
|
||||
<a-timeline-item
|
||||
v-for="(node, index) in result.flowTimeline"
|
||||
:key="index"
|
||||
:type="getTimelineType(node.status)"
|
||||
:hollow="node.status !== 'completed'"
|
||||
:timestamp="node.time ? formatTime(node.time) : (node.status === 'pending' ? '进行中...' : '等待中')"
|
||||
placement="top"
|
||||
:color="getTimelineColor(node.status)"
|
||||
>
|
||||
<div class="timeline-node">
|
||||
<div class="node-name">
|
||||
{{ node.nodeName }}
|
||||
<el-tag v-if="node.status === 'pending'" type="warning" size="small" style="margin-left: 8px;">当前</el-tag>
|
||||
<a-tag v-if="node.status === 'pending'" color="warning" size="small">当前</a-tag>
|
||||
</div>
|
||||
<div class="node-time">
|
||||
{{ node.time ? formatTime(node.time) : (node.status === 'pending' ? '进行中...' : '等待中') }}
|
||||
</div>
|
||||
<div class="node-operator" v-if="node.operatorName">
|
||||
<Icon name="user" size="xs" />
|
||||
@ -102,15 +96,12 @@
|
||||
{{ node.comment }}
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-card>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</a-card>
|
||||
|
||||
<!-- 相关人员 -->
|
||||
<el-card class="users-card" shadow="never">
|
||||
<template #header>
|
||||
<span>相关人员</span>
|
||||
</template>
|
||||
<a-card class="users-card" size="small" title="相关人员">
|
||||
<div class="users-grid">
|
||||
<div class="user-item" v-if="result.relatedUsers.publisher">
|
||||
<div class="user-role">发起人</div>
|
||||
@ -133,22 +124,18 @@
|
||||
<div class="user-dept">{{ result.relatedUsers.currentApprover.dept }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<el-empty v-else-if="searched && !result && !loading" description="未找到相关任务" />
|
||||
<a-empty v-else-if="searched && !result && !loading" description="未找到相关任务" />
|
||||
|
||||
<!-- 初始状态 -->
|
||||
<div v-else-if="!searched" class="initial-state">
|
||||
<Icon name="search" size="xl" class="search-icon" />
|
||||
<p>输入任务编号或标题关键字查询任务流程状态</p>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -223,15 +210,15 @@ const handleClose = () => {
|
||||
searched.value = false
|
||||
}
|
||||
|
||||
// 获取时间线类型
|
||||
const getTimelineType = (status: string) => {
|
||||
// 获取时间线颜色
|
||||
const getTimelineColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'success'
|
||||
return 'green'
|
||||
case 'pending':
|
||||
return 'warning'
|
||||
return 'orange'
|
||||
default:
|
||||
return 'info'
|
||||
return 'gray'
|
||||
}
|
||||
}
|
||||
|
||||
@ -252,17 +239,22 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/variables.scss";
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.search-tip {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: $text-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.result-container {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.info-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
@ -271,6 +263,11 @@ defineExpose({
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.score-text {
|
||||
color: $brand-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.current-node-card {
|
||||
@ -324,16 +321,23 @@ defineExpose({
|
||||
.node-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
color: $text-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.node-time {
|
||||
font-size: 12px;
|
||||
color: $text-tertiary;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.node-operator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #409eff;
|
||||
color: $brand-primary;
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
@ -342,7 +346,7 @@ defineExpose({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #67c23a;
|
||||
color: $color-success;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@ -355,28 +359,32 @@ defineExpose({
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.user-item {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: #f5f7fa;
|
||||
background: $bg-tertiary;
|
||||
border-radius: 8px;
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: $text-primary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-dept {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -386,11 +394,12 @@ defineExpose({
|
||||
.initial-state {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
color: #909399;
|
||||
color: $text-tertiary;
|
||||
|
||||
.search-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -398,8 +407,72 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
|
||||
// 暗色模式适配
|
||||
:deep(.el-card) {
|
||||
--el-card-bg-color: var(--el-bg-color);
|
||||
// 暗色模式下的 Modal 样式
|
||||
:deep(.ant-modal-content) {
|
||||
background: $bg-secondary;
|
||||
|
||||
.ant-modal-header {
|
||||
background: $bg-secondary;
|
||||
border-bottom-color: $border-primary;
|
||||
|
||||
.ant-modal-title {
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-close-x {
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
background: $bg-card;
|
||||
border-color: $border-primary;
|
||||
|
||||
.ant-card-head {
|
||||
border-bottom-color: $border-primary;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions) {
|
||||
.ant-descriptions-item-label {
|
||||
background: $bg-tertiary;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-content {
|
||||
background: $bg-card;
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-timeline-item-content) {
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
:deep(.ant-empty-description) {
|
||||
color: $text-tertiary;
|
||||
}
|
||||
|
||||
:deep(.ant-input-search) {
|
||||
.ant-input {
|
||||
background: $bg-card;
|
||||
border-color: $border-primary;
|
||||
color: $text-primary;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-group-addon {
|
||||
background: transparent;
|
||||
border-color: $border-primary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user