sz-team/supervision-test-frontend-repo
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

yxk-20260818

Browse Source 
把把脉、所务会、党委会的查看详情页面样式优化
This commit is contained in:
ye1023
2026-08-18 10:13:38 +08:00
parent 4218babaa4
commit e0c438dcd6
3 changed files with 846 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/bg/bgpartymatter/BgPartymatterList.vue
+2 -2
View File
@@ -159,7 +159,7 @@
<!-- 表单区域 -->
<BgPartymatterModal ref="registerModal" @success="handleSuccess" />
<!-- 双 tab 详情弹窗 -->
<BgPartymatterDetailModal ref="detailModalRef" />
<BgPartymatterDetailModal ref="detailModalRef" :meeting-type="props.meetingType" />
<!-- 审批记录 -->
<BpmPictureModal @register="registerBpmModal" />
<FlowScheduleStartModalForBG ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
@@ -195,7 +195,7 @@
const props = withDefaults(
defineProps<{
meetingType?: string;
meetingType?: 'party' | 'office';
ledgerTitle?: string;
flowName?: string;
permissionPrefix?: string;
src/views/bg/bgpartymatter/components/BgPartymatterDetailModal.vue
+421 -57
View File
@@ -7,20 +7,81 @@
:footer="null"
:maskClosable="false"
:bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
wrapClassName="partymatter-detail-modal"
destroyOnClose
>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="item" tab="事项信息">
<div class="detail-grid">
<div
v-for="field in detailFields"
:key="field.label"
class="detail-row"
:class="{ 'detail-row-full': field.fullWidth, 'detail-row-bold': field.bold }"
>
<span class="detail-label">{{ field.label }}</span>
<span class="detail-value">{{ field.value }}</span>
</div>
<div class="matter-detail">
<section class="matter-summary">
<div class="summary-heading">
<span class="summary-heading-icon">
<Icon :icon="meetingPresentation.icon" />
</span>
<div class="summary-heading-content">
<span class="summary-kicker">{{ meetingPresentation.summaryLabel }}</span>
<h3 class="summary-title">{{ detailSummary.title }}</h3>
</div>
</div>
<div class="summary-meta">
<div class="summary-meta-item">
<Icon icon="ant-design:calendar-outlined" />
<span class="summary-meta-label">年份</span>
<span class="summary-meta-value">{{ detailSummary.year }}</span>
</div>
<div class="summary-meta-item">
<Icon icon="ant-design:clock-circle-outlined" />
<span class="summary-meta-label">会议时间</span>
<span class="summary-meta-value">{{ detailSummary.matterTime }}</span>
</div>
<div class="summary-tag-group">
<a-tag class="summary-tag" :color="statusTagColor">完成状态：{{ detailSummary.bpmStatus }}</a-tag>
<a-tag class="summary-tag">密级：{{ detailSummary.secretLevel }}</a-tag>
<a-tag class="summary-tag" :color="urgencyTagColor">是否急件：{{ detailSummary.urgencyLevel }}</a-tag>
</div>
</div>
</section>
<section class="detail-section resolution-section">
<div class="detail-section-header">
<span class="detail-section-icon">
<Icon icon="ant-design:read-outlined" />
</span>
<h3>会议决议</h3>
</div>
<div class="resolution-content">{{ meetingResolution }}</div>
</section>
<section class="detail-section">
<div class="detail-section-header">
<span class="detail-section-icon">
<Icon icon="ant-design:profile-outlined" />
</span>
<h3>会议与编号</h3>
</div>
<div class="detail-grid">
<div v-for="field in meetingFields" :key="field.key" class="detail-item" :class="{ 'detail-item-full': field.fullWidth }">
<span class="detail-label">{{ field.label }}</span>
<span class="detail-value">{{ field.value }}</span>
</div>
</div>
</section>
<section class="detail-section">
<div class="detail-section-header">
<span class="detail-section-icon">
<Icon icon="ant-design:team-outlined" />
</span>
<h3>责任与落实</h3>
</div>
<div class="detail-grid">
<div v-for="field in responsibilityFields" :key="field.key" class="detail-item" :class="{ 'detail-item-full': field.fullWidth }">
<span class="detail-label">{{ field.label }}</span>
<span class="detail-value" :class="{ 'detail-value-strong': field.strong }">{{ field.value }}</span>
</div>
</div>
</section>
</div>
</a-tab-pane>
@@ -48,12 +109,12 @@
:scroll="{ x: 1600 }"
:loading="feedbackLoading"
>
<template #bodyCell="{ column, record }">
<template #bodyCell="{ column, record: feedbackRecord }">
<template v-if="column.key === 'attachments'">
<SUploadFile
v-if="record.id"
v-if="feedbackRecord.id"
class="feedback-attachment-list"
:bussiness-id="record.id"
:bussiness-id="feedbackRecord.id"
:disabled="true"
:multiple="true"
/>
@@ -75,6 +136,15 @@
import type { BasicColumn } from '/@/components/Table';
import { countFeedbackStatus } from '/@/views/bg/utils/feedbackStatusCount';
const props = withDefaults(
defineProps<{
meetingType?: 'party' | 'office';
}>(),
{
meetingType: 'party',
}
);
const visible = ref(false);
const title = ref('详情');
const width = 1100;
@@ -84,6 +154,22 @@
const feedbackList = ref<Recordable[]>([]);
const feedbackLoading = ref(false);
// 由台账入口决定详情的会议身份，避免依赖旧数据中可能缺失的 meetingType 字段。
const meetingPresentation = computed(() => {
if (props.meetingType === 'office') {
return {
detailTitle: '所务会详情',
summaryLabel: '所务会事项',
icon: 'ant-design:team-outlined',
};
}
return {
detailTitle: '党委会详情',
summaryLabel: '党委会事项',
icon: 'ant-design:bank-outlined',
};
});
function fmt(value: any): string {
return value === undefined || value === null || value === '' ? '-' : String(value);
}
@@ -101,32 +187,61 @@
return fmt(record[`${key}_dictText`] || record[key]);
}
const detailFields = computed(() => {
// 摘要区只承载最常用于快速判断事项状态的信息，详细字段放入下方分组，避免重复平铺。
const detailSummary = computed(() => {
const r = record.value || {};
return {
title: fmt(r.title),
year: fmt(r.year),
matterTime: fmtDate(r.matterTime),
bpmStatus: dictText(r, 'bpmStatus'),
secretLevel: dictText(r, 'secretLevel'),
urgencyLevel: dictText(r, 'urgencyLevel'),
};
});
const meetingFields = computed(() => {
const r = record.value || {};
return [
{ label: '年份', value: fmt(r.year), bold: true },
{ label: '会议时间', value: fmtDate(r.matterTime), bold: true },
{ label: '议题序号', value: fmt(r.itemNumber) },
{ label: '序号', value: fmt(r.number) },
{ label: '密级', value: dictText(r, 'secretLevel') },
{ label: '事项名称', value: fmt(r.title), bold: true },
{ label: '会议决议', value: fmt(r.content), fullWidth: true },
{ label: '分管所领导', value: dictText(r, 'manageSuoleader'), bold: true },
{ label: '事项目录编码', value: fmt(r.matterCode) },
{ label: '抄告单编号', value: fmt(r.noticeNumber) },
{ label: '是否为三重一大决策', value: dictText(r, 'isImportant') },
{ label: '主办部门', value: dictText(r, 'responDeptid'), bold: true },
{ label: '协办部门', value: dictText(r, 'assistDeptid'), bold: true },
{ label: '实际执行情况', value: fmt(r.actualExect) },
{ label: '完成状态', value: dictText(r, 'bpmStatus') },
{ label: '督办次数', value: fmt(r.superviseCount) },
{ label: '要求完成日期', value: fmtDate(r.deadline) },
{ label: '是否急件', value: dictText(r, 'urgencyLevel') },
{ label: '需所办负责人审批', value: ynText(r.isNeedAppro) },
{ label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
{ key: 'itemNumber', label: '议题序号', value: fmt(r.itemNumber) },
{ key: 'number', label: '序号', value: fmt(r.number) },
{ key: 'matterCode', label: '事项目录编码', value: fmt(r.matterCode) },
{ key: 'noticeNumber', label: '抄告单编号', value: fmt(r.noticeNumber) },
{ key: 'isImportant', label: '是否为三重一大决策', value: dictText(r, 'isImportant'), fullWidth: true },
];
});
const meetingResolution = computed(() => fmt(record.value?.content));
const responsibilityFields = computed(() => {
const r = record.value || {};
return [
{ key: 'manageSuoleader', label: '分管所领导', value: dictText(r, 'manageSuoleader'), strong: true },
{ key: 'responDeptid', label: '主办部门', value: dictText(r, 'responDeptid'), strong: true },
{ key: 'assistDeptid', label: '协办部门', value: dictText(r, 'assistDeptid'), strong: true },
{ key: 'deadline', label: '要求完成日期', value: fmtDate(r.deadline) },
{ key: 'superviseCount', label: '督办次数', value: fmt(r.superviseCount) },
{ key: 'isNeedAppro', label: '需所办负责人审批', value: ynText(r.isNeedAppro) },
{ key: 'supDeptleaderid', label: '所办负责人', value: dictText(r, 'supDeptleaderid'), fullWidth: true },
{ key: 'actualExect', label: '实际执行情况', value: fmt(r.actualExect), fullWidth: true },
];
});
// 同时兼容字典文本和原始状态编码，保证列表传入的数据是否已翻译都能得到一致颜色。
const statusTagColor = computed(() => {
const rawStatus = String(record.value?.bpmStatus ?? '');
const statusText = detailSummary.value.bpmStatus;
if (rawStatus === '3' || statusText.includes('已完成')) return 'success';
if (rawStatus === '2' || statusText.includes('督办中') || statusText.includes('进行中')) return 'processing';
if (rawStatus === '1' || statusText.includes('未开始')) return 'warning';
return undefined;
});
const urgencyTagColor = computed(() => {
const rawUrgency = String(record.value?.urgencyLevel ?? '');
return rawUrgency === '1' || detailSummary.value.urgencyLevel === '是' ? 'error' : undefined;
});
const feedbackColumns: BasicColumn[] = [
...bgPartymatterFeedbackColumns,
{
@@ -159,7 +274,7 @@
function open(currentRecord: Recordable) {
record.value = currentRecord || {};
title.value = '详情';
title.value = meetingPresentation.value.detailTitle;
activeKey.value = 'item';
visible.value = true;
if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
@@ -171,40 +286,275 @@
</script>
<style lang="less" scoped>
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 32px;
padding: 4px 0;
// 弹窗内容会 Teleport 到 body，通过专属类限定公共组件的字号，避免影响其他页面。
:global(.partymatter-detail-modal .ant-modal-title) {
font-size: 18px;
line-height: 26px;
}
.detail-row {
:global(.partymatter-detail-modal .ant-tabs-tab-btn) {
font-size: 15px;
line-height: 24px;
}
:global(.partymatter-detail-modal .ant-table) {
font-size: 15px;
}
:global(.partymatter-detail-modal .ant-table-thead > tr > th),
:global(.partymatter-detail-modal .ant-table-tbody > tr > td) {
font-size: 15px;
line-height: 24px;
}
.matter-detail {
padding: 4px 2px 10px;
}
.matter-summary {
position: relative;
overflow: hidden;
margin-bottom: 16px;
padding: 20px 22px;
background: linear-gradient(135deg, #f2f8ff 0%, #f8fbff 48%, #ffffff 100%);
border: 1px solid #d6e8ff;
border-radius: 10px;
box-shadow: 0 4px 14px rgb(22 119 255 / 8%);
&::after {
position: absolute;
top: -46px;
right: -24px;
width: 132px;
height: 132px;
background: rgb(22 119 255 / 5%);
border-radius: 50%;
content: '';
pointer-events: none;
}
}
.summary-heading {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 12px;
}
.summary-heading-icon {
display: inline-flex;
flex: 0 0 40px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #1677ff;
font-size: 20px;
background: #e6f4ff;
border-radius: 10px;
}
.summary-heading-content {
min-width: 0;
}
.detail-row-full {
.summary-kicker {
display: block;
margin-bottom: 2px;
color: #64748b;
font-size: 14px;
line-height: 20px;
}
.summary-title {
margin: 0;
color: #172033;
font-size: 21px;
font-weight: 600;
line-height: 30px;
overflow-wrap: anywhere;
}
.summary-meta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #deebfa;
}
.summary-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
color: #64748b;
> :first-child {
color: #1677ff;
font-size: 15px;
}
}
.summary-meta-label {
font-size: 14px;
}
.summary-meta-value {
color: #1f2937;
font-size: 15px;
font-weight: 600;
}
.summary-tag-group {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.summary-tag {
margin-inline-end: 0;
padding: 2px 10px;
font-size: 14px;
line-height: 22px;
white-space: normal;
}
.detail-section {
overflow: hidden;
margin-top: 14px;
background: #ffffff;
border: 1px solid #e7edf4;
border-radius: 8px;
}
.detail-section-header {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
background: #f8fbff;
border-bottom: 1px solid #e7edf4;
h3 {
margin: 0;
color: #27364b;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
}
.detail-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: #1677ff;
background: #e6f4ff;
border-radius: 6px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: #edf1f5;
}
.detail-item {
display: grid;
grid-template-columns: 142px minmax(0, 1fr);
align-items: start;
gap: 12px;
min-width: 0;
min-height: 54px;
padding: 14px 16px;
background: #ffffff;
}
.detail-item-full {
grid-column: 1 / -1;
}
.detail-label {
flex: 0 0 150px;
color: #8c8c8c;
line-height: 22px;
color: #7b8798;
font-size: 14px;
line-height: 26px;
}
.detail-value {
flex: 1;
color: #1f2937;
line-height: 22px;
word-break: break-all;
min-width: 0;
color: #27364b;
font-size: 15px;
line-height: 26px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.detail-row-bold .detail-value {
font-weight: 700;
.detail-value-strong {
color: #172033;
font-weight: 600;
}
.resolution-content {
min-height: 90px;
padding: 16px 18px 18px;
color: #27364b;
font-size: 15px;
line-height: 1.9;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
.matter-summary {
padding: 16px;
}
.summary-meta {
align-items: flex-start;
}
.summary-tag-group {
flex-basis: 100%;
}
.detail-grid {
grid-template-columns: minmax(0, 1fr);
}
.detail-item-full {
grid-column: auto;
}
}
@media (max-width: 576px) {
.summary-title {
font-size: 19px;
line-height: 27px;
}
.summary-meta {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.detail-item {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
padding: 11px 14px;
}
}
.feedback-summary-header {
@@ -226,9 +576,9 @@
flex-wrap: wrap;
min-width: 0;
color: #1f2937;
font-size: 14px;
font-size: 15px;
font-weight: 600;
line-height: 24px;
line-height: 26px;
}
.feedback-summary-icon {
@@ -245,12 +595,14 @@
.feedback-summary-tag {
margin-left: 10px;
font-size: 14px;
line-height: 22px;
}
.feedback-summary-desc {
color: #64748b;
font-size: 13px;
line-height: 22px;
font-size: 14px;
line-height: 24px;
white-space: nowrap;
}
@@ -273,11 +625,23 @@
padding-bottom: 6px;
}
:deep(.file-list-header .file-count) {
font-size: 14px;
}
:deep(.file-list .file-item) {
padding: 8px;
margin-bottom: 6px;
}
:deep(.file-list .file-name) {
font-size: 15px;
}
:deep(.file-list .file-size) {
font-size: 13px;
}
:deep(.ant-empty) {
margin: 0 !important;
display: flex;
@@ -292,8 +656,8 @@
:deep(.ant-empty-description) {
color: #94a3b8;
font-size: 12px;
line-height: 20px;
font-size: 13px;
line-height: 22px;
}
}
</style>
src/views/bg/bqtakepulse/components/BgTakepulseDetailModal.vue
+423 -63
View File
@@ -7,20 +7,96 @@
:footer="null"
:maskClosable="false"
:bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
wrapClassName="takepulse-detail-modal"
destroyOnClose
>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="item" tab="事项信息">
<div class="detail-grid">
<div
v-for="field in detailFields"
:key="field.label"
class="detail-row"
:class="{ 'detail-row-full': field.fullWidth, 'detail-row-bold': field.bold }"
>
<span class="detail-label">{{ field.label }}</span>
<span class="detail-value">{{ field.value }}</span>
</div>
<div class="matter-detail">
<section class="matter-summary">
<div class="summary-heading">
<span class="summary-heading-icon">
<Icon icon="ant-design:bulb-outlined" />
</span>
<div class="summary-heading-content">
<span class="summary-kicker">把把脉事项</span>
<h3 class="summary-title">{{ detailSummary.title }}</h3>
</div>
</div>
<div class="summary-meta">
<div class="summary-meta-item">
<Icon icon="ant-design:calendar-outlined" />
<span class="summary-meta-label">年份</span>
<span class="summary-meta-value">{{ detailSummary.year }}</span>
</div>
<div class="summary-meta-item">
<Icon icon="ant-design:appstore-outlined" />
<span class="summary-meta-label">会议类型</span>
<span class="summary-meta-value">{{ detailSummary.taskType }}</span>
</div>
<div class="summary-tag-group">
<a-tag class="summary-tag" :color="statusTagColor">完成状态：{{ detailSummary.bpmStatus }}</a-tag>
<a-tag class="summary-tag">密级：{{ detailSummary.secretLevel }}</a-tag>
<a-tag class="summary-tag" :color="urgencyTagColor">是否急件：{{ detailSummary.urgencyLevel }}</a-tag>
</div>
</div>
</section>
<section class="detail-section">
<div class="detail-section-header">
<span class="detail-section-icon">
<Icon icon="ant-design:profile-outlined" />
</span>
<h3>意见信息</h3>
</div>
<div class="detail-grid">
<div v-for="field in opinionFields" :key="field.key" class="detail-item">
<span class="detail-label">{{ field.label }}</span>
<span class="detail-value">{{ field.value }}</span>
</div>
</div>
</section>
<section class="detail-section">
<div class="detail-section-header">
<span class="detail-section-icon">
<Icon icon="ant-design:message-outlined" />
</span>
<h3>具体意见</h3>
</div>
<div class="long-text-content">{{ specificOpinion }}</div>
</section>
<section class="detail-section">
<div class="detail-section-header">
<span class="detail-section-icon">
<Icon icon="ant-design:team-outlined" />
</span>
<h3>责任与落实</h3>
</div>
<div class="detail-grid">
<div v-for="field in responsibilityFields" :key="field.key" class="detail-item">
<span class="detail-label">{{ field.label }}</span>
<span class="detail-value" :class="{ 'detail-value-strong': field.strong }">{{ field.value }}</span>
</div>
</div>
</section>
<section class="detail-section">
<div class="detail-section-header">
<span class="detail-section-icon">
<Icon icon="ant-design:check-circle-outlined" />
</span>
<h3>落实与成果</h3>
</div>
<div class="detail-grid">
<div v-for="field in resultFields" :key="field.key" class="detail-item" :class="{ 'detail-item-full': field.fullWidth }">
<span class="detail-label">{{ field.label }}</span>
<span class="detail-value">{{ field.value }}</span>
</div>
</div>
</section>
</div>
</a-tab-pane>
@@ -48,12 +124,12 @@
:scroll="{ x: 1800 }"
:loading="feedbackLoading"
>
<template #bodyCell="{ column, record }">
<template #bodyCell="{ column, record: feedbackRecord }">
<template v-if="column.key === 'attachments'">
<SUploadFile
v-if="record.id"
v-if="feedbackRecord.id"
class="feedback-attachment-list"
:bussiness-id="record.id"
:bussiness-id="feedbackRecord.id"
:disabled="true"
:multiple="true"
/>
@@ -100,38 +176,73 @@
return fmt(record[`${key}_dictText`] || record[key]);
}
const detailFields = computed(() => {
// 摘要区聚合最常用的识别与状态信息，其余字段按业务含义分组展示。
const detailSummary = computed(() => {
const r = record.value || {};
return {
title: fmt(r.title),
year: dictText(r, 'year'),
taskType: dictText(r, 'taskType'),
bpmStatus: dictText(r, 'bpmStatus'),
secretLevel: dictText(r, 'secretLevel'),
urgencyLevel: dictText(r, 'urgencyLevel'),
};
});
const opinionFields = computed(() => {
const r = record.value || {};
return [
{ label: '年份', value: dictText(r, 'year'), bold: true },
{ label: '会议类型', value: dictText(r, 'taskType') },
{ label: '序号', value: fmt(r.number) },
{ label: '密级', value: dictText(r, 'secretLevel') },
{ label: '意见主题', value: fmt(r.title), bold: true },
{ label: '类别', value: fmt(r.type) },
{ label: '提出人', value: dictText(r, 'proposer') },
{ label: '具体意见', value: fmt(r.content), fullWidth: true },
{ label: '分管所领导', value: dictText(r, 'manageSuoleader'), bold: true },
{ label: '责任领导', value: dictText(r, 'suoleader') },
{ label: '牵头部门', value: dictText(r, 'responDeptid'), bold: true },
{ label: '协办部门', value: dictText(r, 'assistDeptid'), bold: true },
{ label: '落实部门', value: dictText(r, 'implementDeptid') },
{ label: '是否采纳', value: ynText(r.isAdopt) },
{ label: '落实措施/解释说明', value: fmt(r.measure), fullWidth: true },
{ label: '措施数量', value: fmt(r.measureNumber) },
{ label: '成果形式', value: fmt(r.achievement), fullWidth: true },
{ label: '要求完成日期', value: fmtDate(r.deadline) },
{ label: '备注', value: fmt(r.remark) },
{ label: '实际完成时间', value: fmtDate(r.actualTime) },
{ label: '提出人确认', value: fmt(r.proposerConfirm) },
{ label: '完成状态', value: dictText(r, 'bpmStatus') },
{ label: '督办次数', value: fmt(r.superviseCount) },
{ label: '是否急件', value: dictText(r, 'urgencyLevel') },
{ label: '是否需要所办负责人审批', value: ynText(r.isNeedAppro) },
{ label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
{ key: 'number', label: '序号', value: fmt(r.number) },
{ key: 'type', label: '类别', value: fmt(r.type) },
{ key: 'proposer', label: '提出人', value: dictText(r, 'proposer') },
{ key: 'isAdopt', label: '是否采纳', value: ynText(r.isAdopt) },
];
});
const specificOpinion = computed(() => fmt(record.value?.content));
const responsibilityFields = computed(() => {
const r = record.value || {};
return [
{ key: 'manageSuoleader', label: '分管所领导', value: dictText(r, 'manageSuoleader'), strong: true },
{ key: 'suoleader', label: '责任领导', value: dictText(r, 'suoleader'), strong: true },
{ key: 'responDeptid', label: '牵头部门', value: dictText(r, 'responDeptid'), strong: true },
{ key: 'assistDeptid', label: '协办部门', value: dictText(r, 'assistDeptid'), strong: true },
{ key: 'implementDeptid', label: '落实部门', value: dictText(r, 'implementDeptid') },
{ key: 'deadline', label: '要求完成日期', value: fmtDate(r.deadline) },
{ key: 'measureNumber', label: '措施数量', value: fmt(r.measureNumber) },
{ key: 'superviseCount', label: '督办次数', value: fmt(r.superviseCount) },
{ key: 'isNeedAppro', label: '是否需要所办负责人审批', value: ynText(r.isNeedAppro) },
{ key: 'supDeptleaderid', label: '所办负责人', value: dictText(r, 'supDeptleaderid') },
];
});
const resultFields = computed(() => {
const r = record.value || {};
return [
{ key: 'actualTime', label: '实际完成时间', value: fmtDate(r.actualTime) },
{ key: 'proposerConfirm', label: '提出人确认', value: fmt(r.proposerConfirm) },
{ key: 'measure', label: '落实措施/解释说明', value: fmt(r.measure), fullWidth: true },
{ key: 'achievement', label: '成果形式', value: fmt(r.achievement), fullWidth: true },
{ key: 'remark', label: '备注', value: fmt(r.remark), fullWidth: true },
];
});
// 同时兼容字典文本和原始编码，确保状态标签在不同列表数据形态下保持一致。
const statusTagColor = computed(() => {
const rawStatus = String(record.value?.bpmStatus ?? '');
const statusText = detailSummary.value.bpmStatus;
if (rawStatus === '3' || statusText.includes('已完成')) return 'success';
if (rawStatus === '2' || statusText.includes('督办中') || statusText.includes('进行中')) return 'processing';
if (rawStatus === '1' || statusText.includes('未开始')) return 'warning';
return undefined;
});
const urgencyTagColor = computed(() => {
const rawUrgency = String(record.value?.urgencyLevel ?? '');
return rawUrgency === '1' || detailSummary.value.urgencyLevel === '是' ? 'error' : undefined;
});
const feedbackColumns: BasicColumn[] = [
{ title: '责任部门名称', dataIndex: 'responDeptname', align: 'center', width: 160 },
{ title: '反馈人姓名', dataIndex: 'responPersonname', align: 'center', width: 110 },
@@ -189,7 +300,7 @@
function open(currentRecord: Recordable) {
record.value = currentRecord || {};
title.value = '详情';
title.value = '把把脉详情';
activeKey.value = 'item';
visible.value = true;
if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
@@ -201,40 +312,275 @@
</script>
<style lang="less" scoped>
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 32px;
padding: 4px 0;
// 弹窗内容会 Teleport 到 body，通过专属类限定公共组件的字号，避免影响其他页面。
:global(.takepulse-detail-modal .ant-modal-title) {
font-size: 18px;
line-height: 26px;
}
.detail-row {
:global(.takepulse-detail-modal .ant-tabs-tab-btn) {
font-size: 15px;
line-height: 24px;
}
:global(.takepulse-detail-modal .ant-table) {
font-size: 15px;
}
:global(.takepulse-detail-modal .ant-table-thead > tr > th),
:global(.takepulse-detail-modal .ant-table-tbody > tr > td) {
font-size: 15px;
line-height: 24px;
}
.matter-detail {
padding: 4px 2px 10px;
}
.matter-summary {
position: relative;
overflow: hidden;
margin-bottom: 16px;
padding: 20px 22px;
background: linear-gradient(135deg, #f2f8ff 0%, #f8fbff 48%, #ffffff 100%);
border: 1px solid #d6e8ff;
border-radius: 10px;
box-shadow: 0 4px 14px rgb(22 119 255 / 8%);
&::after {
position: absolute;
top: -46px;
right: -24px;
width: 132px;
height: 132px;
background: rgb(22 119 255 / 5%);
border-radius: 50%;
content: '';
pointer-events: none;
}
}
.summary-heading {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 12px;
}
.summary-heading-icon {
display: inline-flex;
flex: 0 0 40px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #1677ff;
font-size: 20px;
background: #e6f4ff;
border-radius: 10px;
}
.summary-heading-content {
min-width: 0;
}
.detail-row-full {
.summary-kicker {
display: block;
margin-bottom: 2px;
color: #64748b;
font-size: 14px;
line-height: 20px;
}
.summary-title {
margin: 0;
color: #172033;
font-size: 21px;
font-weight: 600;
line-height: 30px;
overflow-wrap: anywhere;
}
.summary-meta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #deebfa;
}
.summary-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
color: #64748b;
> :first-child {
color: #1677ff;
font-size: 15px;
}
}
.summary-meta-label {
font-size: 14px;
}
.summary-meta-value {
color: #1f2937;
font-size: 15px;
font-weight: 600;
}
.summary-tag-group {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.summary-tag {
margin-inline-end: 0;
padding: 2px 10px;
font-size: 14px;
line-height: 22px;
white-space: normal;
}
.detail-section {
overflow: hidden;
margin-top: 14px;
background: #ffffff;
border: 1px solid #e7edf4;
border-radius: 8px;
}
.detail-section-header {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
background: #f8fbff;
border-bottom: 1px solid #e7edf4;
h3 {
margin: 0;
color: #27364b;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
}
.detail-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: #1677ff;
background: #e6f4ff;
border-radius: 6px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: #edf1f5;
}
.detail-item {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
align-items: start;
gap: 12px;
min-width: 0;
min-height: 54px;
padding: 14px 16px;
background: #ffffff;
}
.detail-item-full {
grid-column: 1 / -1;
}
.detail-label {
flex: 0 0 150px;
color: #8c8c8c;
line-height: 22px;
color: #7b8798;
font-size: 14px;
line-height: 26px;
}
.detail-value {
flex: 1;
color: #1f2937;
line-height: 22px;
word-break: break-all;
min-width: 0;
color: #27364b;
font-size: 15px;
line-height: 26px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.detail-row-bold .detail-value {
font-weight: 700;
.detail-value-strong {
color: #172033;
font-weight: 600;
}
.long-text-content {
min-height: 90px;
padding: 16px 18px 18px;
color: #27364b;
font-size: 15px;
line-height: 1.9;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
.matter-summary {
padding: 16px;
}
.summary-meta {
align-items: flex-start;
}
.summary-tag-group {
flex-basis: 100%;
}
.detail-grid {
grid-template-columns: minmax(0, 1fr);
}
.detail-item-full {
grid-column: auto;
}
}
@media (max-width: 576px) {
.summary-title {
font-size: 19px;
line-height: 27px;
}
.summary-meta {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.detail-item {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
padding: 11px 14px;
}
}
.feedback-summary-header {
@@ -256,9 +602,9 @@
flex-wrap: wrap;
min-width: 0;
color: #1f2937;
font-size: 14px;
font-size: 15px;
font-weight: 600;
line-height: 24px;
line-height: 26px;
}
.feedback-summary-icon {
@@ -275,12 +621,14 @@
.feedback-summary-tag {
margin-left: 10px;
font-size: 14px;
line-height: 22px;
}
.feedback-summary-desc {
color: #64748b;
font-size: 13px;
line-height: 22px;
font-size: 14px;
line-height: 24px;
white-space: nowrap;
}
@@ -303,11 +651,23 @@
padding-bottom: 6px;
}
:deep(.file-list-header .file-count) {
font-size: 14px;
}
:deep(.file-list .file-item) {
padding: 8px;
margin-bottom: 6px;
}
:deep(.file-list .file-name) {
font-size: 15px;
}
:deep(.file-list .file-size) {
font-size: 13px;
}
:deep(.ant-empty) {
margin: 0 !important;
display: flex;
@@ -322,8 +682,8 @@
:deep(.ant-empty-description) {
color: #94a3b8;
font-size: 12px;
line-height: 20px;
font-size: 13px;
line-height: 22px;
}
}
</style>