<template>
|
<div class="bocklogBox">
|
<div class="block">
|
<div class="title">待办事项</div>
|
|
<div class="todo-items">
|
<div
|
v-for="(item, index) in todos"
|
:key="index"
|
class="todo-item"
|
:class="`status-${item.status}`"
|
@click="jumporder(item)"
|
>
|
<div class="status-indicator"></div>
|
|
<div class="content-wrapper">
|
<div class="main-content">
|
<span class="status-tag">{{ statusMap[item.status] }}</span>
|
<span class="todo-text">{{ item.event_name || item.dept_name}}</span>
|
</div>
|
|
<div class="action-area">
|
<img :src="st7" alt="" />
|
<span class="todo-date">{{ item.job_create_time?.slice(0, 10) || item.begin_time?.slice(0, 10)}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import st7 from '@/assets/images/workbench/st7.png';
|
import { getList } from '@/api/tickets/ticket';
|
import { getList as getListLog } from '@/api/tickets/orderLog';
|
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);
|
console.log(permission.value.o_and_m_p_jump, 'permission');
|
const todos = ref([]);
|
const jumporder = val => {
|
console.log('tiao', val);
|
|
console.log('orderNumber', orderNumber);
|
if (permission.value.o_and_m_p_jump === true) {
|
const orderNumber = val.job_info_num;
|
router.push({
|
path: `/tickets/orderLog?orderNumber=${orderNumber}`,
|
});
|
} else {
|
const orderNumber = val.event_num;
|
router.push({
|
path: `/tickets/ticket?orderNumber=${orderNumber}`,
|
});
|
}
|
};
|
const statusMap = {
|
2: '待审核',
|
3: '处理中',
|
0: '待处理',
|
4: '已完成',
|
};
|
const getListMatter = async () => {
|
if (permission.value.o_and_m_p_jump === true) {
|
const res = await getListLog({});
|
console.log('2222', res.data.data.records);
|
|
todos.value = res.data.data.records?.slice(0, 5);
|
} else {
|
const res = await getList({});
|
todos.value = res.data.data.records?.slice(0, 5);
|
}
|
};
|
onMounted(() => {
|
getListMatter();
|
});
|
</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-weight: bold;
|
font-size: 16px;
|
color: #363636;
|
}
|
|
.todo-items {
|
display: grid;
|
gap: 0.8rem;
|
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-2 {
|
border-left-color: #ff6560;
|
color: #ff6560;
|
.status-indicator {
|
background: #ff6560;
|
}
|
}
|
|
.status-0 {
|
border-left-color: #5d77fb;
|
color: #5d77fb;
|
.status-indicator {
|
background: #5d77fb;
|
}
|
}
|
|
.status-3 {
|
border-left-color: #ff8b26;
|
color: #ff8b26;
|
|
.status-indicator {
|
background: #ff8b26;
|
}
|
}
|
}
|
|
// @media (max-width: 768px) {
|
// .todo-list-container {
|
// padding: 1rem;
|
|
// .content-wrapper {
|
// flex-direction: column;
|
// align-items: flex-start !important;
|
// gap: 0.5rem !important;
|
// }
|
|
// .action-area {
|
// width: 100%;
|
// justify-content: space-between;
|
// }
|
// }
|
// }
|
|
// @media (max-width: 480px) {
|
// .main-content {
|
// flex-direction: column;
|
// align-items: flex-start !important;
|
// }
|
|
// .status-tag {
|
// margin-bottom: 0.3rem;
|
// }
|
// }
|
}
|
</style>
|
