<template>
|
<div class="bocklogBox">
|
<div class="block">
|
<div class="title">待办事项</div>
|
|
<div class="todo-items" v-if="todos.length>0">
|
<div
|
v-for="(item, index) in todos"
|
:key="index"
|
class="todo-item"
|
:style="getStatusStyle(item.status)"
|
@click="jumporder(item)"
|
>
|
<div
|
class="status-indicator"
|
:style="{ backgroundColor: getStatusColor(item.status) }"
|
></div>
|
|
<div class="content-wrapper">
|
<div class="main-content">
|
<span class="status-tag" :style="{ color: getStatusColor(item.status) }">{{
|
permission.o_and_m_p_jump === true
|
? zfstatusMap[item.status]
|
: statusMap[item.status]
|
}}</span>
|
<span class="todo-text">{{ item.name }}</span>
|
</div>
|
|
<div class="action-area">
|
<img :src="st7" alt="" />
|
<span class="todo-date">{{ item.date?.slice(0, 10).replace(/-/g, '.') }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<el-empty >
|
<template #description>
|
<span class="custom-text">暂无数据</span>
|
</template>
|
</el-empty>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import st7 from '@/assets/images/workbench/st7.png';
|
import { getdaiban } from '@/api/home/index';
|
import { onMounted } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { useStore } from 'vuex';
|
const router = useRouter();
|
const store = useStore();
|
const permission = computed(() => store.getters.permission);
|
const userInfo = computed(() => store.getters.userInfo);
|
const todos = ref([]);
|
const loading = ref(false);
|
const statusMap = {
|
0: '待处理',
|
2: '待审核',
|
3: '处理中',
|
};
|
const statusMapColor = {
|
0: { color: '#FF7411', background: '#FF7411', borderLeftColor: '#FF7411' },
|
2: { color: '#FF472F', background: '#FF472F', borderLeftColor: '#FF472F' },
|
3: { color: '#FFC300', background: '#FFC300', borderLeftColor: '#FFC300' },
|
};
|
const zfstatusMap = {
|
1: '待审核',
|
};
|
const zfstatusMapColor = {
|
1: { color: '#FF472F', background: '#FF472F', borderLeftColor: '#FF472F' },
|
};
|
const getStatusStyle = statusIndex => {
|
if (permission.value.o_and_m_p_jump === true) {
|
const style = zfstatusMapColor[statusIndex] || {
|
color: '#999',
|
borderLeftColor: '#999',
|
};
|
return {
|
color: style.color,
|
borderLeft: `3px solid ${style.borderLeftColor}`,
|
};
|
} else {
|
const style = statusMapColor[statusIndex] || {
|
color: '#999',
|
borderLeftColor: '#999',
|
};
|
return {
|
color: style.color,
|
borderLeft: `3px solid ${style.borderLeftColor}`,
|
};
|
}
|
};
|
// 获取状态对应的文字颜色
|
const getStatusColor = statusIndex => {
|
if (permission.value.o_and_m_p_jump === true) {
|
return zfstatusMapColor[statusIndex]?.color || '#999';
|
} else {
|
return statusMapColor[statusIndex]?.color || '#999';
|
}
|
};
|
const getListMatter = async () => {
|
loading.value = true;
|
try {
|
if (permission.value.o_and_m_p_jump === true) {
|
const res = await getdaiban(0, userInfo.value.detail.areaCode);
|
todos.value = res.data.data?.slice(0, 5) || [];
|
loading.value = false;
|
} else {
|
const res = await getdaiban(1, userInfo.value.detail.areaCode);
|
todos.value = res.data.data?.slice(0, 5) || [];
|
loading.value = false;
|
}
|
} catch (error) {}
|
};
|
const isDataReady = computed(() => {
|
return userInfo.value.detail?.areaCode && permission.value.o_and_m_p_jump;
|
});
|
const autoFetchData = () => {
|
if (isDataReady.value) {
|
getListMatter();
|
}
|
};
|
watch(
|
() => [userInfo.value.detail?.areaCode, permission.value.o_and_m_p_jump],
|
() => autoFetchData(),
|
{ immediate: true }
|
);
|
|
const jumporder = val => {
|
if (permission.value.o_and_m_p_jump === true) {
|
const id = val.id;
|
router.push({
|
path: `/tickets/orderLog`,
|
query: {
|
id,
|
},
|
});
|
} else {
|
const orderNumber = val.event_num;
|
router.push({
|
path: `/tickets/ticket`,
|
query: {
|
orderNumber,
|
},
|
});
|
}
|
};
|
onMounted(() => {
|
autoFetchData();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.bocklogBox {
|
width: 100%;
|
height: 306px;
|
background: rgba(255, 255, 255, 0.41);
|
box-shadow: 0px 3px 4px -1px rgba(125, 125, 125, 0.25);
|
border-radius: 8px 8px 8px 8px;
|
border: 2px solid #ffffff;
|
.block {
|
margin: 11px 21px 13px 22px;
|
.title {
|
font-family: 'Source Han Sans CN';
|
font-weight: bold;
|
font-size: 16px;
|
color: #363636;
|
}
|
|
.todo-items {
|
display: grid;
|
gap: 0.6rem;
|
margin-top: 10px;
|
}
|
|
.todo-item {
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
background: #ffffff;
|
border-radius: 8px;
|
box-shadow: 0px 2px 4px 0px rgba(173, 173, 173, 0.18);
|
transition: all 0.2s ease;
|
border-left: 4px solid transparent;
|
height: 42px;
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.status-indicator {
|
margin-left: 18px;
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
flex-shrink: 0;
|
}
|
|
.content-wrapper {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: 1rem;
|
}
|
|
.main-content {
|
display: flex;
|
align-items: center;
|
gap: 0.8rem;
|
|
.status-tag {
|
font-weight: 400;
|
font-size: 14px;
|
|
padding: 0.3rem 0.5rem;
|
border-radius: 12px;
|
}
|
|
.todo-text {
|
font-size: 14px;
|
color: #343434;
|
}
|
}
|
|
.action-area {
|
display: flex;
|
align-items: center;
|
margin-right: 42px;
|
|
.todo-date {
|
color: #666;
|
font-size: 0.9rem;
|
}
|
}
|
}
|
|
// 状态颜色方案
|
.status-0 {
|
border-left-color: #ff7411;
|
color: #ff7411;
|
.status-indicator {
|
background: #ff7411;
|
}
|
}
|
|
.status-2 {
|
border-left-color: #ff472f;
|
color: #ff472f;
|
.status-indicator {
|
background: #ff472f;
|
}
|
}
|
|
.status-3 {
|
border-left-color: #ffc300;
|
color: #ffc300;
|
|
.status-indicator {
|
background: #ffc300;
|
}
|
}
|
}
|
.custom-text {
|
font-size: 14px;
|
color: #7C8091;
|
}
|
}
|
</style>
|
