全局任务配色
This commit is contained in:
WindowBird
parent
cd8cf4e713
commit
be300f6855
|
|
@ -16,7 +16,7 @@
|
|||
<uv-tags
|
||||
v-if="item.label === '逾期任务'"
|
||||
text="紧急"
|
||||
type="error"
|
||||
:type="getTaskStatusType('overdue')"
|
||||
size="mini"
|
||||
plain
|
||||
:custom-style="{ marginTop: '4px' }"
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<uv-tags
|
||||
v-else-if="item.label === '即将预期'"
|
||||
text="注意"
|
||||
type="warning"
|
||||
:type="getTaskStatusType('imminent')"
|
||||
size="mini"
|
||||
plain
|
||||
:custom-style="{ marginTop: '4px' }"
|
||||
|
|
@ -38,7 +38,13 @@
|
|||
<view class="overdue-card task-card-base task-card-overdue" v-for="task in overdueTasks" :key="task.id" @click="goToTaskDetail(task)">
|
||||
<view class="task-header">
|
||||
<view class="task-badge-wrapper">
|
||||
<uv-tags text="逾期" type="error" size="mini"></uv-tags>
|
||||
<uv-tags
|
||||
:text="getStatusText('overdue')"
|
||||
:type="getTaskStatusType('overdue')"
|
||||
size="mini"
|
||||
:plain="false"
|
||||
:custom-style="getTagCustomStyle('overdue')"
|
||||
></uv-tags>
|
||||
</view>
|
||||
<view class="task-date-wrapper">
|
||||
<text class="task-date">{{ task.date }}</text>
|
||||
|
|
@ -140,6 +146,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getTaskStatusType, getTaskStatusStyle, getStatusText } from '@/utils/taskConfig.js';
|
||||
|
||||
// 任务统计
|
||||
const taskStats = ref([
|
||||
|
|
@ -315,6 +322,16 @@ const getCustomerCardClass = (label) => {
|
|||
};
|
||||
return classMap[label] || '';
|
||||
};
|
||||
|
||||
// 使用全局配置获取标签自定义样式
|
||||
const getTagCustomStyle = (status) => {
|
||||
const styleConfig = getTaskStatusStyle(status);
|
||||
return {
|
||||
backgroundColor: styleConfig.backgroundColor,
|
||||
color: styleConfig.color,
|
||||
borderColor: styleConfig.borderColor
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,15 @@
|
|||
<text class="project-name">{{ task.project }}</text>
|
||||
</view>
|
||||
<view class="status-tags">
|
||||
<text
|
||||
<uv-tags
|
||||
v-for="(status, index) in task.statusTags"
|
||||
:key="index"
|
||||
class="tag"
|
||||
:class="getTagClass(status)"
|
||||
>
|
||||
{{ status }}
|
||||
</text>
|
||||
:text="status"
|
||||
:type="getTagType(status)"
|
||||
size="mini"
|
||||
:plain="false"
|
||||
:custom-style="getTagStyle(status)"
|
||||
></uv-tags>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -147,6 +148,7 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, } from 'vue';
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app';
|
||||
import { getStatusFromTagText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
|
||||
|
||||
// 当前激活的标签
|
||||
const activeTab = ref('info');
|
||||
|
|
@ -283,15 +285,21 @@ const previewAttachmentImage = (attachments, index) => {
|
|||
}
|
||||
};
|
||||
|
||||
// 获取标签样式类
|
||||
const getTagClass = (status) => {
|
||||
const statusMap = {
|
||||
'已逾期': 'overdue',
|
||||
'紧急': 'urgent',
|
||||
'重要': 'important',
|
||||
'普通': 'normal'
|
||||
// 获取标签类型（用于uv-tags组件）
|
||||
const getTagType = (tagText) => {
|
||||
const status = getStatusFromTagText(tagText);
|
||||
return getTaskStatusType(status);
|
||||
};
|
||||
|
||||
// 获取标签样式（用于uv-tags组件）
|
||||
const getTagStyle = (tagText) => {
|
||||
const status = getStatusFromTagText(tagText);
|
||||
const styleConfig = getTaskStatusStyle(status);
|
||||
return {
|
||||
backgroundColor: styleConfig.backgroundColor,
|
||||
color: styleConfig.color,
|
||||
borderColor: styleConfig.borderColor
|
||||
};
|
||||
return statusMap[status] || 'normal';
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
|
|
@ -466,33 +474,6 @@ onShow(() => {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.overdue {
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.urgent {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.important {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.normal {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 基本信息区域 */
|
||||
.basic-info {
|
||||
padding: 15px;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,10 @@
|
|||
<view class="task-badge-wrapper">
|
||||
<uv-tags
|
||||
:text="getStatusText(task.status)"
|
||||
:type="getStatusType(task.status)"
|
||||
:type="getTaskStatusType(task.status)"
|
||||
size="mini"
|
||||
:plain="false"
|
||||
:custom-style="getTagCustomStyle(task.status)"
|
||||
></uv-tags>
|
||||
</view>
|
||||
<view class="task-date-wrapper">
|
||||
|
|
@ -66,6 +68,7 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { getStatusText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
|
||||
|
||||
// 获取页面参数
|
||||
const statusFilter = ref('');
|
||||
|
|
@ -180,26 +183,14 @@ const filteredTasks = computed(() => {
|
|||
return tasks.value.filter(task => task.status === statusFilter.value);
|
||||
});
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusTextMap = {
|
||||
'imminent': '即将逾期',
|
||||
'pending': '待完成',
|
||||
'completed': '已完成',
|
||||
'overdue': '逾期'
|
||||
// 使用全局配置获取标签自定义样式
|
||||
const getTagCustomStyle = (status) => {
|
||||
const styleConfig = getTaskStatusStyle(status);
|
||||
return {
|
||||
backgroundColor: styleConfig.backgroundColor,
|
||||
color: styleConfig.color,
|
||||
borderColor: styleConfig.borderColor
|
||||
};
|
||||
return statusTextMap[status] || status;
|
||||
};
|
||||
|
||||
// 获取状态类型（用于uv-tags）
|
||||
const getStatusType = (status) => {
|
||||
const typeMap = {
|
||||
'imminent': 'warning',
|
||||
'pending': 'primary',
|
||||
'completed': 'info',
|
||||
'overdue': 'error'
|
||||
};
|
||||
return typeMap[status] || 'primary';
|
||||
};
|
||||
|
||||
// 获取卡片样式类
|
||||
|
|
|
|||
127
utils/taskConfig.js
Normal file
127
utils/taskConfig.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
/**
|
||||
* 任务状态全局配置
|
||||
* 包含任务状态的配色方案、类型映射等
|
||||
*/
|
||||
|
||||
// 任务状态配色方案
|
||||
export const TASK_STATUS_COLORS = {
|
||||
// 待完成任务
|
||||
pending: {
|
||||
backgroundColor: '#2885ff',
|
||||
color: '#fff',
|
||||
borderColor: '#2885ff',
|
||||
type: 'primary'
|
||||
},
|
||||
// 即将逾期任务
|
||||
imminent: {
|
||||
backgroundColor: '#ff9800',
|
||||
color: '#fff',
|
||||
borderColor: '#ff9800',
|
||||
type: 'warning'
|
||||
},
|
||||
// 已完成任务
|
||||
completed: {
|
||||
backgroundColor: '#909399',
|
||||
color: '#fff',
|
||||
borderColor: '#909399',
|
||||
type: 'info'
|
||||
},
|
||||
// 逾期任务
|
||||
overdue: {
|
||||
backgroundColor: '#f56c6c',
|
||||
color: '#fff',
|
||||
borderColor: '#f56c6c',
|
||||
type: 'error'
|
||||
},
|
||||
// 紧急标签
|
||||
urgent: {
|
||||
backgroundColor: '#f56c6c',
|
||||
color: '#fff',
|
||||
borderColor: '#f56c6c',
|
||||
type: 'error'
|
||||
},
|
||||
// 重要标签
|
||||
important: {
|
||||
backgroundColor: '#2885ff',
|
||||
color: '#fff',
|
||||
borderColor: '#2885ff',
|
||||
type: 'primary'
|
||||
},
|
||||
// 普通标签
|
||||
normal: {
|
||||
backgroundColor: '#909399',
|
||||
color: '#fff',
|
||||
borderColor: '#909399',
|
||||
type: 'info'
|
||||
}
|
||||
};
|
||||
|
||||
// 状态文本映射
|
||||
export const STATUS_TEXT_MAP = {
|
||||
'imminent': '即将逾期',
|
||||
'pending': '待完成',
|
||||
'completed': '已完成',
|
||||
'overdue': '逾期',
|
||||
'urgent': '紧急',
|
||||
'important': '重要',
|
||||
'normal': '普通'
|
||||
};
|
||||
|
||||
// 状态类型映射（用于uv-tags组件的type属性）
|
||||
export const STATUS_TYPE_MAP = {
|
||||
'imminent': 'warning',
|
||||
'pending': 'primary',
|
||||
'completed': 'info',
|
||||
'overdue': 'error',
|
||||
'urgent': 'error',
|
||||
'important': 'primary',
|
||||
'normal': 'info'
|
||||
};
|
||||
|
||||
// 标签文本到状态的映射（用于任务详细页面）
|
||||
export const TAG_TEXT_TO_STATUS = {
|
||||
'已逾期': 'overdue',
|
||||
'紧急': 'urgent',
|
||||
'重要': 'important',
|
||||
'普通': 'normal',
|
||||
'即将逾期': 'imminent',
|
||||
'待完成': 'pending',
|
||||
'已完成': 'completed'
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取任务状态的自定义样式
|
||||
* @param {string} status - 任务状态
|
||||
* @returns {object} 样式对象
|
||||
*/
|
||||
export const getTaskStatusStyle = (status) => {
|
||||
return TASK_STATUS_COLORS[status] || TASK_STATUS_COLORS.normal;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取任务状态的类型（用于uv-tags组件）
|
||||
* @param {string} status - 任务状态
|
||||
* @returns {string} uv-tags组件的type值
|
||||
*/
|
||||
export const getTaskStatusType = (status) => {
|
||||
return STATUS_TYPE_MAP[status] || 'primary';
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取状态文本
|
||||
* @param {string} status - 任务状态
|
||||
* @returns {string} 状态文本
|
||||
*/
|
||||
export const getStatusText = (status) => {
|
||||
return STATUS_TEXT_MAP[status] || status;
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据标签文本获取状态
|
||||
* @param {string} tagText - 标签文本
|
||||
* @returns {string} 任务状态
|
||||
*/
|
||||
export const getStatusFromTagText = (tagText) => {
|
||||
return TAG_TEXT_TO_STATUS[tagText] || 'normal';
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user