!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
@@ -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>
|
||||
Reference in New Issue
Block a user