454 lines
9.8 KiB
Vue
454 lines
9.8 KiB
Vue
<template>
|
||
<div style="padding: 10px">
|
||
<div class="company-card-compact">
|
||
<div class="company-main-content">
|
||
<div class="company-header-compact">
|
||
<h2 class="company-name-compact">光芯科技</h2>
|
||
<div class="mission-tag-compact">
|
||
<span class="mission-icon-compact">✨</span>
|
||
<span class="mission-text-compact">材料创造美好世界</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="company-desc-compact">
|
||
<p>公司秉承"善用资源，服务建设"的核心理念，践行"材料创造美</p>
|
||
<p>好世界"的企业使命，坚持"创新、绩效、和谐、责任"的核心价</p>
|
||
<p>值观，努力成长为具有创新精神和全球视野的光芯材料领先企业。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="company-chip-compact">
|
||
<div class="chip-symbol">芯</div>
|
||
</div>
|
||
</div>
|
||
<div class="statsContainer">
|
||
<div class="statCard" @click="goDuty">
|
||
<div class="statTitle">我的待办</div>
|
||
<div class="statNumber">{{ dutyCount }}</div>
|
||
</div>
|
||
<div class="statCard" @click="goOwner">
|
||
<div class="statTitle">我提交的</div>
|
||
<div class="statNumber">{{ ownerCount }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="quickActionsCard">
|
||
<div class="quickActionsTitle">发起流程</div>
|
||
<div class="quickActionsGrid">
|
||
<div class="actionItem" v-for="group in wfOptions" :key="group.category" @click="startGroup(group)">
|
||
<div class="actionIcon">↗️</div>
|
||
<div class="actionLabel">{{ group.category }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog v-model="dialogVisible" :title="dialogTitle">
|
||
<el-card
|
||
v-for="item in currentWfList"
|
||
:key="item.id"
|
||
:body-style="{ padding: '10px', cursor: 'pointer' }"
|
||
style="width: 180px; display: inline-block; margin: 4px; background-color: #f5f7fa;"
|
||
shadow="hover"
|
||
@click="startTicket(item)"
|
||
>
|
||
{{ item.name }}
|
||
</el-card>
|
||
</el-dialog>
|
||
<el-drawer v-model="drawer" size="90%" :show-close="false">
|
||
<template #header="{ close, titleId, titleClass }">
|
||
<h4 :id="titleId" :class="titleClass">{{drawerName}}</h4>
|
||
<el-button type="danger" @click="close">关闭</el-button>
|
||
</template>
|
||
<component :is="currentComponent" :ticketId="ticketId" :t_id="t_id" @closed="drawer = false"
|
||
@success="handleSuccess"></component>
|
||
</el-drawer>
|
||
</template>
|
||
<script setup>
|
||
import { ref, onMounted, markRaw, defineAsyncComponent } from 'vue'
|
||
import API from '@/api'
|
||
import TOOL from "@/utils/tool.js";
|
||
const dutyCount = ref(0);
|
||
const ownerCount = ref(0);
|
||
|
||
|
||
onMounted(() => {
|
||
getTicketCount();
|
||
getWfOptions();
|
||
})
|
||
|
||
const getTicketCount = () => {
|
||
API.wf.ticket.list.req({page: 1, page_size: 0, category: "duty"}).then(res=>{
|
||
dutyCount.value = res.count
|
||
})
|
||
API.wf.ticket.list.req({page: 1, page_size: 0, category: "owner"}).then(res=>{
|
||
ownerCount.value = res.count
|
||
})
|
||
}
|
||
|
||
const goDuty = () => {
|
||
window.location.href = "/#/wf/myticket?category=duty"
|
||
}
|
||
|
||
const goOwner = () => {
|
||
window.location.href = "/#/wf/myticket?category=owner"
|
||
}
|
||
|
||
const wfOptions = ref([])
|
||
|
||
const getWfOptions = () => {
|
||
let permissions = TOOL.data.get("PERMISSIONS");
|
||
const groups = {};
|
||
API.wf.workflow.list.req({ page: 0 }).then((res) => {
|
||
res.forEach((item) => {
|
||
if(item.key && permissions.includes(item.key)) {
|
||
let cate = item.cate;
|
||
if (!cate){cate="未分组"}
|
||
if (!groups[cate]) {
|
||
groups[cate] = [];
|
||
}
|
||
groups[cate].push(item);
|
||
}
|
||
})
|
||
// 转换为数组形式，便于模板遍历
|
||
wfOptions.value = Object.keys(groups).map(category => ({
|
||
category,
|
||
items: groups[category]
|
||
}));
|
||
});
|
||
}
|
||
|
||
const dialogVisible = ref(false)
|
||
const currentWfList = ref([]);
|
||
const dialogTitle = ref("");
|
||
const startGroup = (group) => {
|
||
dialogVisible.value = true;
|
||
dialogTitle.value = group.category;
|
||
currentWfList.value = group.items;
|
||
}
|
||
|
||
const drawer = ref(false)
|
||
const drawerName = ref(null)
|
||
const currentComponent = ref(null)
|
||
const ticketId = ref(null)
|
||
const t_id = ref(null)
|
||
const startTicket = (item) => {
|
||
dialogVisible.value = false;
|
||
drawer.value = true;
|
||
t_id.value = null;
|
||
drawerName.value = item.name;
|
||
const viewPath = item.view_path;
|
||
// 动态 import
|
||
currentComponent.value = markRaw(
|
||
defineAsyncComponent(() => import(`@/views${viewPath}.vue`))
|
||
);
|
||
}
|
||
|
||
const handleSuccess = () => {
|
||
drawer.value = false;
|
||
getTicketCount();
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.company-card-compact {
|
||
width: 100%;
|
||
background: linear-gradient(135deg,
|
||
rgba(58, 149, 255, 0.95) 0%,
|
||
rgba(27, 92, 255, 0.95) 100%);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 12px rgba(27, 92, 255, 0.2);
|
||
color: #ffffff;
|
||
margin-bottom: 10px;
|
||
height: auto;
|
||
min-height: 160px;
|
||
}
|
||
|
||
.company-card-compact::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: radial-gradient(
|
||
circle at 90% 20%,
|
||
rgba(255, 255, 255, 0.08) 0%,
|
||
transparent 60%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.company-main-content {
|
||
flex: 1;
|
||
padding-right: 15px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.company-header-compact {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.company-name-compact {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin: 0 0 8px 0;
|
||
letter-spacing: 0.5px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.mission-tag-compact {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
backdrop-filter: blur(5px);
|
||
border-radius: 12px;
|
||
padding: 4px 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.mission-icon-compact {
|
||
font-size: 12px;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.mission-text-compact {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.company-desc-compact {
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.company-desc-compact p {
|
||
margin: 0 0 4px 0;
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.company-desc-compact p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.company-chip-compact {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 60px;
|
||
height: 60px;
|
||
flex-shrink: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.chip-symbol {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: linear-gradient(135deg,
|
||
rgba(255, 255, 255, 0.95) 0%,
|
||
rgba(255, 255, 255, 0.8) 100%);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1b5cff;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
/* transform: rotate(45deg); */
|
||
}
|
||
|
||
.chip-symbol::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 4px;
|
||
right: 4px;
|
||
bottom: 4px;
|
||
border: 1px solid rgba(27, 92, 255, 0.2);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 平板适配 */
|
||
@media (min-width: 768px) {
|
||
.company-card-compact {
|
||
padding: 20px 25px;
|
||
min-height: 140px;
|
||
}
|
||
|
||
.company-name-compact {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.company-desc-compact p {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.chip-symbol {
|
||
width: 55px;
|
||
height: 55px;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
|
||
/* 桌面适配 */
|
||
@media (min-width: 1024px) {
|
||
.company-card-compact {
|
||
padding: 20px 30px;
|
||
}
|
||
|
||
.company-name-compact {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.company-desc-compact p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.company-chip-compact {
|
||
width: 70px;
|
||
height: 70px;
|
||
}
|
||
|
||
.chip-symbol {
|
||
width: 60px;
|
||
height: 60px;
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
/* 小屏幕手机适配 */
|
||
@media (max-width: 375px) {
|
||
.company-card-compact {
|
||
padding: 16px;
|
||
min-height: 140px;
|
||
}
|
||
|
||
.company-name-compact {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.company-desc-compact p {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.mission-tag-compact {
|
||
padding: 3px 8px;
|
||
}
|
||
|
||
.mission-text-compact {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.company-chip-compact {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.chip-symbol {
|
||
width: 45px;
|
||
height: 45px;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
/* 数量统计卡片样式 */
|
||
.statsContainer {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.statCard {
|
||
flex: 1;
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
}
|
||
|
||
.statTitle {
|
||
font-size: 18px;
|
||
color: #666;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.statNumber {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
/* 快速操作卡片样式 */
|
||
.quickActionsCard {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.quickActionsTitle {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.quickActionsGrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(8, 1fr);
|
||
gap: 6px;
|
||
}
|
||
|
||
.actionItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.actionItem:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.actionIcon {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: #f0f7ff;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #1b5cff;
|
||
}
|
||
|
||
.actionLabel {
|
||
font-size: 16px;
|
||
color: #333;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.quickActionsGrid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.statsContainer {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
</style> |