!158 feat(dq): 整改任务查看详情改为事项信息+反馈信息双tab纯文本弹窗

* feat(dq): 整改任务查看详情改为事项信息+反馈信息双tab纯文本弹窗
* feat(xispeak): 查看详情改为事项信息+反馈信息双tab纯文本弹窗
* feat(bqtakepulse): 查看详情改为事项信息+反馈信息双tab纯文本弹窗
* style(bgpartymatter): 反馈表单输入框固定label宽度左对齐
* feat(bgpartymatter): 查看详情改为事项信息+反馈信息双tab纯文本弹窗
This commit is contained in:
wsm
2026-08-17 07:15:31 +00:00
parent 981ca8ba5b
commit 0e848b8a02
9 changed files with 1255 additions and 17 deletions
@@ -158,6 +158,8 @@
</div>
<!-- 表单区域 -->
<BgPartymatterModal ref="registerModal" @success="handleSuccess" />
<!-- tab 详情弹窗 -->
<BgPartymatterDetailModal ref="detailModalRef" />
<!-- 审批记录 -->
<BpmPictureModal @register="registerBpmModal" />
<FlowScheduleStartModalForBG ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
@@ -180,6 +182,7 @@
import { Tooltip } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import BgPartymatterModal from './components/BgPartymatterModal.vue';
import BgPartymatterDetailModal from './components/BgPartymatterDetailModal.vue';
import BusinessProcessListModal from '/src/components/semri/process/BusinessProcessListModal.vue';
import FlowScheduleStartModalForBG from '/src/components/semri/process/FlowScheduleStartModalForBG.vue';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
@@ -239,6 +242,7 @@
const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
const formRef = ref();
const registerModal = ref();
const detailModalRef = ref();
const flowScheduleModalRef = ref();
const businessProcessListModalRef = ref();
const queryParam = reactive<any>({});
@@ -474,8 +478,7 @@
*/
function handleDetail(record: Recordable) {
expandedRowKeys.value = [];
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
detailModalRef.value?.open(record);
}
/**
@@ -0,0 +1,299 @@
<template>
<a-modal
v-model:open="visible"
:title="title"
:width="width"
centered
:footer="null"
:maskClosable="false"
:bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
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>
</a-tab-pane>
<a-tab-pane key="feedback" tab="反馈信息">
<div class="feedback-summary-header">
<div class="feedback-summary-title">
<span class="feedback-summary-icon">
<Icon icon="ant-design:message-outlined" />
</span>
<span>办理情况</span>
<a-tag class="feedback-summary-tag" color="warning" style="color: #8c6900">未开始 {{ count.notStarted }}</a-tag>
<a-tag class="feedback-summary-tag" color="error">进行中 {{ count.inProgress }}已逾期 {{ count.overdue }}</a-tag>
<a-tag class="feedback-summary-tag" color="success">已完成 {{ count.completed }}</a-tag>
<a-tag class="feedback-summary-tag"> {{ count.total }} </a-tag>
</div>
<div class="feedback-summary-desc">当前事项的责任部门办理情况记录</div>
</div>
<a-table
rowKey="id"
size="small"
bordered
:columns="feedbackColumns"
:data-source="feedbackList"
:pagination="false"
:scroll="{ x: 1600 }"
:loading="feedbackLoading"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'attachments'">
<SUploadFile
v-if="record.id"
class="feedback-attachment-list"
:bussiness-id="record.id"
:disabled="true"
:multiple="true"
/>
<span v-else>-</span>
</template>
</template>
</a-table>
</a-tab-pane>
</a-tabs>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, computed, defineExpose } from 'vue';
import Icon from '/@/components/Icon/index';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
import { bgPartymatterFeedbackList } from '../BgPartymatter.api';
import { bgPartymatterFeedbackColumns } from '../BgPartymatter.data';
import type { BasicColumn } from '/@/components/Table';
import { countFeedbackStatus } from '/@/views/bg/utils/feedbackStatusCount';
const visible = ref(false);
const title = ref('详情');
const width = 1100;
const activeKey = ref('item');
const record = ref<Recordable>({});
const feedbackList = ref<Recordable[]>([]);
const feedbackLoading = ref(false);
function fmt(value: any): string {
return value === undefined || value === null || value === '' ? '-' : String(value);
}
function fmtDate(value: any): string {
const s = fmt(value);
return s.length > 10 ? s.slice(0, 10) : s;
}
function ynText(value: any): string {
const v = fmt(value);
if (v === '1') return '是';
if (v === '0') return '否';
return v;
}
function dictText(record: Recordable, key: string): string {
return fmt(record[`${key}_dictText`] || record[key]);
}
const detailFields = 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') },
];
});
const feedbackColumns: BasicColumn[] = [
...bgPartymatterFeedbackColumns,
{
title: '附件下载',
dataIndex: 'id',
key: 'attachments',
align: 'left',
width: 340,
},
];
const count = computed(() => countFeedbackStatus(feedbackList.value, 'bpmStatus', 'planTime'));
async function loadFeedback(mainId: string | number) {
feedbackLoading.value = true;
feedbackList.value = [];
try {
const res = await bgPartymatterFeedbackList({
mainId,
pageNo: 1,
pageSize: 9999,
column: 'createTime',
order: 'desc',
});
feedbackList.value = Array.isArray(res) ? res : res?.records || [];
} finally {
feedbackLoading.value = false;
}
}
function open(currentRecord: Recordable) {
record.value = currentRecord || {};
title.value = '详情';
activeKey.value = 'item';
visible.value = true;
if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
loadFeedback(currentRecord.id);
}
}
defineExpose({ open });
</script>
<style lang="less" scoped>
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 32px;
padding: 4px 0;
}
.detail-row {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.detail-row-full {
grid-column: 1 / -1;
}
.detail-label {
flex: 0 0 150px;
color: #8c8c8c;
line-height: 22px;
}
.detail-value {
flex: 1;
color: #1f2937;
line-height: 22px;
word-break: break-all;
}
.detail-row-bold .detail-value {
font-weight: 700;
font-size: 15px;
}
.feedback-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding: 10px 14px;
background: #f6fbff;
border: 1px solid #d6e8ff;
border-left: 4px solid #1677ff;
border-radius: 6px;
}
.feedback-summary-title {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
min-width: 0;
color: #1f2937;
font-size: 14px;
font-weight: 600;
line-height: 24px;
}
.feedback-summary-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 8px;
color: #1677ff;
background: #e6f4ff;
border-radius: 50%;
}
.feedback-summary-tag {
margin-left: 10px;
}
.feedback-summary-desc {
color: #64748b;
font-size: 13px;
line-height: 22px;
white-space: nowrap;
}
.feedback-attachment-list {
min-width: 300px;
:deep(.file-list-wrapper) {
min-height: 0 !important;
padding: 4px 8px !important;
}
:deep(.ant-spin-nested-loading),
:deep(.ant-spin-container) {
min-height: 0 !important;
line-height: 20px;
}
:deep(.file-list-header) {
margin-bottom: 6px;
padding-bottom: 6px;
}
:deep(.file-list .file-item) {
padding: 8px;
margin-bottom: 6px;
}
:deep(.ant-empty) {
margin: 0 !important;
display: flex;
align-items: center;
min-height: 20px;
text-align: left;
}
:deep(.ant-empty-image) {
display: none !important;
}
:deep(.ant-empty-description) {
color: #94a3b8;
font-size: 12px;
line-height: 20px;
}
}
</style>
@@ -103,8 +103,8 @@
disabled: { type: Boolean, default: false },
});
const formItemLayout = {
labelCol: { xs: { span: 24 }, sm: { span: 7 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 17 } },
labelCol: { style: { width: '110px' } },
wrapperCol: { style: { flex: 1 } },
};
/**
@@ -242,5 +242,17 @@
<style lang="less" scoped>
.antd-modal-form {
padding: 14px;
// 固定 label 宽度,确保所有输入框左边缘对齐
:deep(.ant-form-item-label) {
flex: 0 0 110px;
width: 110px;
max-width: 110px;
}
:deep(.ant-form-item-control) {
flex: 1;
min-width: 0;
}
}
</style>
+5 -5
View File
@@ -200,6 +200,8 @@
</BasicTable>
<!-- 表单区域 -->
<BgTakepulseModal @register="registerModal" @success="handleSuccess"></BgTakepulseModal>
<!-- tab 详情弹窗 -->
<BgTakepulseDetailModal ref="detailModalRef" />
<!-- 审批记录 -->
<BpmPictureModal @register="registerBpmModal" />
<FlowScheduleStartModalForBG ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
@@ -214,6 +216,7 @@
import { useListPage } from '/@/hooks/system/useListPage';
import { useModal } from '/@/components/Modal';
import BgTakepulseModal from './components/BgTakepulseModal.vue';
import BgTakepulseDetailModal from './components/BgTakepulseDetailModal.vue';
import { columns, superQuerySchema } from './BgTakepulse.data';
import {
list,
@@ -272,6 +275,7 @@
}
const formRef = ref();
const detailModalRef = ref();
const queryParam = reactive<any>({});
const selectedResponDept = ref([]);
const selectedAssistDept = ref([]);
@@ -491,11 +495,7 @@
* 详情
*/
function handleDetail(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
showFooter: false,
});
detailModalRef.value?.open(record);
}
/**
* 删除事件
@@ -0,0 +1,329 @@
<template>
<a-modal
v-model:open="visible"
:title="title"
:width="width"
centered
:footer="null"
:maskClosable="false"
:bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
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>
</a-tab-pane>
<a-tab-pane key="feedback" tab="反馈信息">
<div class="feedback-summary-header">
<div class="feedback-summary-title">
<span class="feedback-summary-icon">
<Icon icon="ant-design:message-outlined" />
</span>
<span>办理情况</span>
<a-tag class="feedback-summary-tag" color="warning" style="color: #8c6900">未开始 {{ count.notStarted }}</a-tag>
<a-tag class="feedback-summary-tag" color="error">进行中 {{ count.inProgress }}已逾期 {{ count.overdue }}</a-tag>
<a-tag class="feedback-summary-tag" color="success">已完成 {{ count.completed }}</a-tag>
<a-tag class="feedback-summary-tag"> {{ count.total }} </a-tag>
</div>
<div class="feedback-summary-desc">当前事项的责任部门办理情况记录</div>
</div>
<a-table
rowKey="id"
size="small"
bordered
:columns="feedbackColumns"
:data-source="feedbackList"
:pagination="false"
:scroll="{ x: 1800 }"
:loading="feedbackLoading"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'attachments'">
<SUploadFile
v-if="record.id"
class="feedback-attachment-list"
:bussiness-id="record.id"
:disabled="true"
:multiple="true"
/>
<span v-else>-</span>
</template>
</template>
</a-table>
</a-tab-pane>
</a-tabs>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, computed, defineExpose } from 'vue';
import Icon from '/@/components/Icon/index';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
import { bgTakepulseFeedbackList } from '../BgTakepulse.api';
import type { BasicColumn } from '/@/components/Table';
import { countFeedbackStatus } from '/@/views/bg/utils/feedbackStatusCount';
const visible = ref(false);
const title = ref('详情');
const width = 1100;
const activeKey = ref('item');
const record = ref<Recordable>({});
const feedbackList = ref<Recordable[]>([]);
const feedbackLoading = ref(false);
function fmt(value: any): string {
return value === undefined || value === null || value === '' ? '-' : String(value);
}
function fmtDate(value: any): string {
const s = fmt(value);
return s.length > 10 ? s.slice(0, 10) : s;
}
function ynText(value: any): string {
const v = fmt(value);
if (v === '1') return '是';
if (v === '0') return '否';
return v;
}
function dictText(record: Recordable, key: string): string {
return fmt(record[`${key}_dictText`] || record[key]);
}
const detailFields = 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') },
];
});
const feedbackColumns: BasicColumn[] = [
{ title: '责任部门名称', dataIndex: 'responDeptname', align: 'center', width: 160 },
{ title: '反馈人姓名', dataIndex: 'responPersonname', align: 'center', width: 110 },
{ title: '计划完成目标', dataIndex: 'planExect', align: 'left', width: 260 },
{
title: '计划完成日期',
dataIndex: 'planTime',
align: 'center',
width: 120,
customRender: ({ text }) => (!text ? '' : String(text).slice(0, 10)),
},
{ title: '实际执行情况', dataIndex: 'actualExect', align: 'left', width: 280 },
{
title: '实际完成日期',
dataIndex: 'actualTime',
align: 'center',
width: 155,
customRender: ({ text }) => (!text ? '' : String(text).slice(0, 10)),
},
{ title: '调整落实措施及执行情况', dataIndex: 'actSt', align: 'left', width: 260 },
{
title: '完成状态',
dataIndex: 'bpmStatus',
align: 'center',
width: 95,
customRender: ({ record }) => record?.bpmStatus_dictText || record?.bpmStatus,
},
{
title: '附件下载',
dataIndex: 'id',
key: 'attachments',
align: 'left',
width: 340,
},
];
const count = computed(() => countFeedbackStatus(feedbackList.value, 'bpmStatus', 'planTime'));
async function loadFeedback(mainId: string | number) {
feedbackLoading.value = true;
feedbackList.value = [];
try {
const res = await bgTakepulseFeedbackList({
mainId,
pageNo: 1,
pageSize: 9999,
column: 'createTime',
order: 'desc',
});
feedbackList.value = Array.isArray(res) ? res : res?.records || res?.result?.records || [];
} finally {
feedbackLoading.value = false;
}
}
function open(currentRecord: Recordable) {
record.value = currentRecord || {};
title.value = '详情';
activeKey.value = 'item';
visible.value = true;
if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
loadFeedback(currentRecord.id);
}
}
defineExpose({ open });
</script>
<style lang="less" scoped>
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 32px;
padding: 4px 0;
}
.detail-row {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.detail-row-full {
grid-column: 1 / -1;
}
.detail-label {
flex: 0 0 150px;
color: #8c8c8c;
line-height: 22px;
}
.detail-value {
flex: 1;
color: #1f2937;
line-height: 22px;
word-break: break-all;
}
.detail-row-bold .detail-value {
font-weight: 700;
font-size: 15px;
}
.feedback-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding: 10px 14px;
background: #f6fbff;
border: 1px solid #d6e8ff;
border-left: 4px solid #1677ff;
border-radius: 6px;
}
.feedback-summary-title {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
min-width: 0;
color: #1f2937;
font-size: 14px;
font-weight: 600;
line-height: 24px;
}
.feedback-summary-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 8px;
color: #1677ff;
background: #e6f4ff;
border-radius: 50%;
}
.feedback-summary-tag {
margin-left: 10px;
}
.feedback-summary-desc {
color: #64748b;
font-size: 13px;
line-height: 22px;
white-space: nowrap;
}
.feedback-attachment-list {
min-width: 300px;
:deep(.file-list-wrapper) {
min-height: 0 !important;
padding: 4px 8px !important;
}
:deep(.ant-spin-nested-loading),
:deep(.ant-spin-container) {
min-height: 0 !important;
line-height: 20px;
}
:deep(.file-list-header) {
margin-bottom: 6px;
padding-bottom: 6px;
}
:deep(.file-list .file-item) {
padding: 8px;
margin-bottom: 6px;
}
:deep(.ant-empty) {
margin: 0 !important;
display: flex;
align-items: center;
min-height: 20px;
text-align: left;
}
:deep(.ant-empty-image) {
display: none !important;
}
:deep(.ant-empty-description) {
color: #94a3b8;
font-size: 12px;
line-height: 20px;
}
}
</style>
+6 -3
View File
@@ -118,6 +118,8 @@
</div>
<BgXiSpeakFeedbackViewModal ref="feedbackViewModalRef" />
<!-- tab 详情弹窗 -->
<BgXiSpeakDetailModal ref="detailModalRef" />
<!-- 表单区域 -->
<BgXiSpeakModal ref="registerModal" @success="handleSuccess"></BgXiSpeakModal>
<!-- 审批记录 -->
@@ -146,6 +148,7 @@
import DeptRoleUserSelectDropDown from '/@/components/semri/userComponent/DeptRoleUserSelectDropDown.vue';
import { PARTY_COMMITTEE_DEPT_ID, SDW_LEADER_ROLE_ID } from '/@/constant/supervision';
import BgXiSpeakModal from './components/BgXiSpeakModal.vue';
import BgXiSpeakDetailModal from './components/BgXiSpeakDetailModal.vue';
import BusinessProcessListModal from '/src/components/semri/process/BusinessProcessListModal.vue';
import FlowScheduleStartModal from '/src/components/semri/process/FlowScheduleStartModal.vue';
@@ -180,6 +183,7 @@ import { PARTY_COMMITTEE_DEPT_ID, SDW_LEADER_ROLE_ID } from '/@/constant/supervi
const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
const { createMessage } = useMessage();
const formRef = ref();
const detailModalRef = ref();
const expandedRowKeys = ref([]);
const queryParam = ref<any>({});
const registerModal = ref();
@@ -297,9 +301,8 @@ import { PARTY_COMMITTEE_DEPT_ID, SDW_LEADER_ROLE_ID } from '/@/constant/supervi
/**
* 详情
*/
async function handleDetail(record) {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
function handleDetail(record) {
detailModalRef.value?.open(record);
}
/**
@@ -0,0 +1,304 @@
<template>
<a-modal
v-model:open="visible"
:title="title"
:width="width"
centered
:footer="null"
:maskClosable="false"
:bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
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>
</a-tab-pane>
<a-tab-pane key="feedback" tab="反馈信息">
<div class="feedback-summary-header">
<div class="feedback-summary-title">
<span class="feedback-summary-icon">
<Icon icon="ant-design:message-outlined" />
</span>
<span>办理情况</span>
<a-tag class="feedback-summary-tag"> {{ total }} </a-tag>
<a-tag class="feedback-summary-tag" color="success">已完成 {{ done }} </a-tag>
</div>
<div class="feedback-summary-desc">当前事项的落实情况反馈记录</div>
</div>
<a-table
rowKey="id"
size="small"
bordered
:columns="feedbackColumns"
:data-source="feedbackList"
:pagination="false"
:scroll="{ x: 1500 }"
:loading="feedbackLoading"
>
<template #bodyCell="{ column, record: fb }">
<template v-if="column.key === 'action'">
<a-button type="link" size="small" @click="handleFeedbackDetail(fb)">查看详情</a-button>
</template>
<template v-else-if="column.key === 'attachments'">
<SUploadFile
v-if="fb.id"
class="feedback-attachment-list"
:bussiness-id="fb.id"
:disabled="true"
:multiple="true"
/>
<span v-else>-</span>
</template>
</template>
</a-table>
</a-tab-pane>
</a-tabs>
<BgXiSpeakFeedbackDetailModal ref="feedbackDetailModalRef" />
</a-modal>
</template>
<script lang="ts" setup>
import { ref, computed, defineExpose } from 'vue';
import Icon from '/@/components/Icon/index';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
import BgXiSpeakFeedbackDetailModal from './BgXiSpeakFeedbackDetailModal.vue';
import { bgXiSpeakFeedbackList } from '../BgXiSpeak.api';
import type { BasicColumn } from '/@/components/Table';
const visible = ref(false);
const title = ref('详情');
const width = 1100;
const activeKey = ref('item');
const record = ref<Recordable>({});
const feedbackDetailModalRef = ref();
const feedbackList = ref<Recordable[]>([]);
const feedbackLoading = ref(false);
function fmt(value: any): string {
return value === undefined || value === null || value === '' ? '-' : String(value);
}
function fmtDate(value: any): string {
const s = fmt(value);
return s.length > 10 ? s.slice(0, 10) : s;
}
function ynText(value: any): string {
const v = fmt(value);
if (v === '1') return '是';
if (v === '0') return '否';
return v;
}
function dictText(record: Recordable, key: string): string {
return fmt(record[`${key}_dictText`] || record[key]);
}
const detailFields = computed(() => {
const r = record.value || {};
return [
{ label: '重要讲话指示批示', value: fmt(r.speakStatus), fullWidth: true, bold: true },
{ label: '时间', value: fmtDate(r.time), bold: true },
{ label: '企业负责同志批示情况', value: fmt(r.elmComment) },
{ label: '学习传达研究部署', value: fmt(r.status) },
{ label: '密级', value: dictText(r, 'secretLevel') },
{ label: '所党委责任领导', value: dictText(r, 'responsiblePerson'), bold: true },
{ label: '牵头部门', value: dictText(r, 'implDept'), bold: true },
{ label: '贯彻落实措施', value: fmt(r.implMeasures) },
{ label: '会议决策数', value: fmt(r.numberOfResolutions) },
{ label: '是否需要所党委领导督办', value: ynText(r.needSdwApproval) },
{ label: '所党委领导列表', value: dictText(r, 'sdwLeaderList') },
{ label: '指定落实措施条数', value: fmt(r.implCount) },
{ label: '措施已闭环数量', value: fmt(r.closedCount) },
{ label: '报告反馈情况', value: fmt(r.reportFeedbackStatus) },
{ label: '截止日期', value: fmtDate(r.deadline) },
{ label: '督办次数', value: fmt(r.supervisionCount) },
];
});
const feedbackColumns: BasicColumn[] = [
{ title: '反馈人', dataIndex: 'responPersonname', align: 'center', width: 100 },
{ title: '反馈部门', dataIndex: 'responDeptname', align: 'center', width: 140 },
{ title: '反馈措施', dataIndex: 'method', align: 'left', ellipsis: true },
{ title: '完成状态', dataIndex: 'completionStatus_dictText', align: 'center', width: 100 },
{ title: '成果形式', dataIndex: 'outcomeForm', align: 'center', width: 120 },
{ title: '检查情况(纪检)', dataIndex: 'checkStatus', align: 'left', ellipsis: true, width: 140 },
{ title: '监督意见(纪检)', dataIndex: 'inspectionAdvice', align: 'left', ellipsis: true, width: 140 },
{ title: '措施数量(纪检)', dataIndex: 'measureNum', align: 'center', width: 100 },
{ title: '附件', dataIndex: 'id', key: 'attachments', align: 'left', width: 280 },
{ title: '操作', dataIndex: 'action', key: 'action', align: 'center', width: 90, fixed: 'right' },
];
const total = computed(() => feedbackList.value.length);
const done = computed(() => feedbackList.value.filter((item) => item.completionStatus_dictText === '已完成').length);
async function loadFeedback(mainId: string | number) {
feedbackLoading.value = true;
feedbackList.value = [];
try {
const res = await bgXiSpeakFeedbackList({
mainId,
pageNo: 1,
pageSize: 9999,
column: 'createTime',
order: 'desc',
});
feedbackList.value = Array.isArray(res) ? res : res?.records || [];
} finally {
feedbackLoading.value = false;
}
}
function handleFeedbackDetail(fb: Recordable) {
feedbackDetailModalRef.value?.open(record.value, fb);
}
function open(currentRecord: Recordable) {
record.value = currentRecord || {};
title.value = '详情';
activeKey.value = 'item';
visible.value = true;
if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
loadFeedback(currentRecord.id);
}
}
defineExpose({ open });
</script>
<style lang="less" scoped>
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 32px;
padding: 4px 0;
}
.detail-row {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.detail-row-full {
grid-column: 1 / -1;
}
.detail-label {
flex: 0 0 150px;
color: #8c8c8c;
line-height: 22px;
}
.detail-value {
flex: 1;
color: #1f2937;
line-height: 22px;
word-break: break-all;
}
.detail-row-bold .detail-value {
font-weight: 700;
font-size: 15px;
}
.feedback-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding: 10px 14px;
background: #f6fbff;
border: 1px solid #d6e8ff;
border-left: 4px solid #1677ff;
border-radius: 6px;
}
.feedback-summary-title {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
min-width: 0;
color: #1f2937;
font-size: 14px;
font-weight: 600;
line-height: 24px;
}
.feedback-summary-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 8px;
color: #1677ff;
background: #e6f4ff;
border-radius: 50%;
}
.feedback-summary-tag {
margin-left: 10px;
}
.feedback-summary-desc {
color: #64748b;
font-size: 13px;
line-height: 22px;
white-space: nowrap;
}
.feedback-attachment-list {
min-width: 300px;
:deep(.file-list-wrapper) {
min-height: 0 !important;
padding: 4px 8px !important;
}
:deep(.ant-spin-nested-loading),
:deep(.ant-spin-container) {
min-height: 0 !important;
line-height: 20px;
}
:deep(.file-list-header) {
margin-bottom: 6px;
padding-bottom: 6px;
}
:deep(.file-list .file-item) {
padding: 8px;
margin-bottom: 6px;
}
:deep(.ant-empty) {
margin: 0 !important;
display: flex;
align-items: center;
min-height: 20px;
text-align: left;
}
:deep(.ant-empty-image) {
display: none !important;
}
:deep(.ant-empty-description) {
color: #94a3b8;
font-size: 12px;
line-height: 20px;
}
}
</style>
@@ -119,6 +119,8 @@
</BasicTable>
<!-- 表单区域 -->
<DqInspectProgressFeedbackViewModal ref="feedbackViewModalRef" />
<!-- tab 详情弹窗 -->
<DqInspectTaskDetailModal ref="detailModalRef" />
<DqInspectTaskModal @register="registerModal" @success="handleSuccess"></DqInspectTaskModal>
<!-- 审批记录 -->
<BpmPictureModal @register="registerBpmModal" />
@@ -134,6 +136,7 @@
import { useListPage } from '/@/hooks/system/useListPage';
import { useModal } from '/@/components/Modal';
import DqInspectTaskModal from './components/DqInspectTaskModal.vue';
import DqInspectTaskDetailModal from './components/DqInspectTaskDetailModal.vue';
import DqInspectProgressFeedbackViewModal from '../inspectProgress/components/DqInspectProgressFeedbackViewModal.vue';
import { ledgerColumns, superQuerySchema } from './DqInspectTask.data';
import {
@@ -169,6 +172,7 @@
const checkedKeys = ref<Array<string | number>>([]);
//注册model
const [registerModal, { openModal }] = useModal();
const detailModalRef = ref();
const feedbackViewModalRef = ref();
const flowScheduleModalRef = ref();
const businessProcessListModalRef = ref();
@@ -270,11 +274,7 @@
* 详情
*/
function handleDetail(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
showFooter: false,
});
detailModalRef.value?.open(record);
}
/**
* 删除事件
@@ -0,0 +1,288 @@
<template>
<a-modal
v-model:open="visible"
:title="title"
:width="width"
centered
:footer="null"
:maskClosable="false"
:bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
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>
</a-tab-pane>
<a-tab-pane key="feedback" tab="反馈信息">
<div class="feedback-summary-header">
<div class="feedback-summary-title">
<span class="feedback-summary-icon">
<Icon icon="ant-design:message-outlined" />
</span>
<span>办理情况</span>
<a-tag class="feedback-summary-tag"> {{ total }} </a-tag>
<a-tag class="feedback-summary-tag" color="success">已完成 {{ done }} </a-tag>
</div>
<div class="feedback-summary-desc">当前整改任务的工作进展反馈记录</div>
</div>
<a-table
rowKey="id"
size="small"
bordered
:columns="feedbackColumns"
:data-source="feedbackList"
:pagination="false"
:scroll="{ x: 1200 }"
:loading="feedbackLoading"
>
<template #bodyCell="{ column, record: fb }">
<template v-if="column.key === 'attachments'">
<SUploadFile
v-if="fb.id"
class="feedback-attachment-list"
:bussiness-id="fb.id"
:disabled="true"
:multiple="true"
/>
<span v-else>-</span>
</template>
</template>
</a-table>
</a-tab-pane>
</a-tabs>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, computed, defineExpose } from 'vue';
import Icon from '/@/components/Icon/index';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
import { list } from '../../inspectProgress/DqInspectProgress.api';
import type { BasicColumn } from '/@/components/Table';
const visible = ref(false);
const title = ref('详情');
const width = 1100;
const activeKey = ref('item');
const record = ref<Recordable>({});
const feedbackList = ref<Recordable[]>([]);
const feedbackLoading = ref(false);
function fmt(value: any): string {
return value === undefined || value === null || value === '' ? '-' : String(value);
}
function fmtDate(value: any): string {
const s = fmt(value);
return s.length > 10 ? s.slice(0, 10) : s;
}
function ynText(value: any): string {
const v = fmt(value);
if (v === '1') return '是';
if (v === '0') return '否';
return v;
}
function dictText(record: Recordable, key: string): string {
return fmt(record[`${key}_dictText`] || record[key]);
}
const detailFields = computed(() => {
const r = record.value || {};
return [
{ label: '问题分类', value: fmt(r.categoryName) },
{ label: '面上问题', value: fmt(r.surfaceName) },
{ label: '具体问题', value: fmt(r.specificName) },
{ label: '整改措施', value: fmt(r.improveMeasure), fullWidth: true, bold: true },
{ label: '密级', value: dictText(r, 'secretLevel') },
{ label: '完成时限', value: fmtDate(r.deadline) },
{ label: '目标节点', value: fmt(r.targetNode) },
{ label: '巡视建议', value: fmt(r.inspectAdvice) },
{ label: '检查情况', value: fmt(r.inspectionStatus) },
{ label: '监督意见', value: fmt(r.supervisoryOpinion) },
{ label: '整改状态', value: fmt(r.taskStatus) },
{ label: '措施责任部门', value: dictText(r, 'measureResDept'), bold: true },
{ label: '措施责任负责人', value: dictText(r, 'measureResLeader'), bold: true },
{ label: '分管所领导', value: dictText(r, 'chargeLeaderId'), bold: true },
{ label: '整改交付成果', value: fmt(r.rectificationEvidence) },
{ label: '成效评价标准', value: fmt(r.evaluationCriterion) },
{ label: '需党群负责人审批', value: ynText(r.isNeedAppro) },
{ label: '党群负责人', value: dictText(r, 'supDeptleaderid') },
{ label: '督办状态', value: dictText(r, 'bpmStatus') },
{ label: '督办次数', value: fmt(r.superviseCount) },
];
});
const feedbackColumns: BasicColumn[] = [
{ title: '反馈人', dataIndex: 'feedbackPersonName', align: 'center', width: 100 },
{ title: '反馈部门', dataIndex: 'feedbackDeptName', align: 'center', width: 140 },
{ title: '工作进展', dataIndex: 'workProgress', align: 'left', ellipsis: true },
{ title: '实际完成时间', dataIndex: 'actualTime', align: 'center', width: 120 },
{ title: '进展状态', dataIndex: 'bpmStatus_dictText', align: 'center', width: 100 },
{ title: '附件', dataIndex: 'id', key: 'attachments', align: 'left', width: 280 },
];
const total = computed(() => feedbackList.value.length);
const done = computed(() => feedbackList.value.filter((item) => item.bpmStatus_dictText === '已完成').length);
async function loadFeedback(mainId: string | number) {
feedbackLoading.value = true;
feedbackList.value = [];
try {
const res = await list({ mainId, pageNo: 1, pageSize: 9999, column: 'createTime', order: 'desc' });
feedbackList.value = Array.isArray(res) ? res : res?.records || [];
} finally {
feedbackLoading.value = false;
}
}
function open(currentRecord: Recordable) {
record.value = currentRecord || {};
title.value = '详情';
activeKey.value = 'item';
visible.value = true;
if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
loadFeedback(currentRecord.id);
}
}
defineExpose({ open });
</script>
<style lang="less" scoped>
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 32px;
padding: 4px 0;
}
.detail-row {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.detail-row-full {
grid-column: 1 / -1;
}
.detail-label {
flex: 0 0 150px;
color: #8c8c8c;
line-height: 22px;
}
.detail-value {
flex: 1;
color: #1f2937;
line-height: 22px;
word-break: break-all;
}
.detail-row-bold .detail-value {
font-weight: 700;
font-size: 15px;
}
.feedback-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding: 10px 14px;
background: #f6fbff;
border: 1px solid #d6e8ff;
border-left: 4px solid #1677ff;
border-radius: 6px;
}
.feedback-summary-title {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
min-width: 0;
color: #1f2937;
font-size: 14px;
font-weight: 600;
line-height: 24px;
}
.feedback-summary-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 8px;
color: #1677ff;
background: #e6f4ff;
border-radius: 50%;
}
.feedback-summary-tag {
margin-left: 10px;
}
.feedback-summary-desc {
color: #64748b;
font-size: 13px;
line-height: 22px;
white-space: nowrap;
}
.feedback-attachment-list {
min-width: 300px;
:deep(.file-list-wrapper) {
min-height: 0 !important;
padding: 4px 8px !important;
}
:deep(.ant-spin-nested-loading),
:deep(.ant-spin-container) {
min-height: 0 !important;
line-height: 20px;
}
:deep(.file-list-header) {
margin-bottom: 6px;
padding-bottom: 6px;
}
:deep(.file-list .file-item) {
padding: 8px;
margin-bottom: 6px;
}
:deep(.ant-empty) {
margin: 0 !important;
display: flex;
align-items: center;
min-height: 20px;
text-align: left;
}
:deep(.ant-empty-image) {
display: none !important;
}
:deep(.ant-empty-description) {
color: #94a3b8;
font-size: 12px;
line-height: 20px;
}
}
</style>