feat(fixcontact): 新增定点联系单前端页面

列表页含展开反馈记录子表,表单使用原生 Ant Design Vue 模式,
选人组件使用 DeptRoleUserSelectDropDown 按部门角色过滤。
This commit is contained in:
wsm
2026-07-30 17:39:51 +08:00
parent f8290836f9
commit d937a1578e
9 changed files with 2391 additions and 0 deletions
@@ -0,0 +1,688 @@
<template>
<div class="p-2 erpNativeList">
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24" class="search-form-row">
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="表单编号" name="formNo">
<JInput v-model:value="queryParam.formNo" type="like" placeholder="请输入表单编号" allow-clear trim @update:value="searchQuery" />
</a-form-item>
</a-col>
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="定点联系所领导" name="contactLeader">
<SzSelectUser v-model:value="queryParam.contactLeader" placeholder="请选择定点联系所领导" allow-clear style="width: 100%" @change="searchQuery" />
</a-form-item>
</a-col>
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="联系时间" name="contactTime">
<a-date-picker v-model:value="queryParam.contactTime" value-format="YYYY-MM-DD" placeholder="请选择联系时间" allow-clear style="width: 100%" @change="searchQuery" />
</a-form-item>
</a-col>
<a-col v-if="toggleSearchStatus" :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="相关分管所领导" name="relatedLeader">
<SzSelectUser v-model:value="queryParam.relatedLeader" placeholder="请选择相关分管所领导" allow-clear style="width: 100%" @change="searchQuery" />
</a-form-item>
</a-col>
<a-col v-if="toggleSearchStatus" :xl="4" :lg="6" :md="8" :sm="12">
<a-form-item label="申请人" name="applicant">
<SzSelectUser v-model:value="queryParam.applicant" placeholder="请选择申请人" allow-clear style="width: 100%" @change="searchQuery" />
</a-form-item>
</a-col>
<a-col :xl="4" :lg="6" :md="8" :sm="12">
<span class="table-page-search-submitButtons">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button preIcon="ant-design:reload-outlined" style="margin-left: 8px" @click="searchReset">重置</a-button>
</span>
</a-col>
<span class="search-toggle-btn">
<a @click="toggleSearchStatus = !toggleSearchStatus" style="cursor: pointer; user-select: none">
{{ toggleSearchStatus ? '收起' : '展开' }}
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</a>
</span>
</a-row>
</a-form>
</div>
<div class="content">
<BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys" @expand="handleExpand" :expandIcon="expandIcon">
<template #tableTitle>
<a-button type="primary" v-auth="actionAuth.add" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" v-auth="actionAuth.exportXls" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" v-auth="actionAuth.importExcel" preIcon="ant-design:import-outlined" @click="onImportXls"> 导入</j-upload-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
<Icon icon="ant-design:delete-outlined"></Icon>
删除
</a-menu-item>
</a-menu>
</template>
<a-button v-auth="actionAuth.deleteBatch">
批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown>
<super-query :config="superQueryConfig" @search="handleSuperQuery" />
</template>
<template #action="{ record }">
<Dropdown :trigger="['hover']" :dropMenuList="getFlowMenuList(record)" popconfirm>
<a-button type="link" size="small">流程操作 <Icon icon="mdi-light:chevron-down" /></a-button>
</Dropdown>
<Dropdown :trigger="['hover']" :dropMenuList="getFormMenuList(record)" popconfirm>
<a-button type="link" size="small">表单操作 <Icon icon="mdi-light:chevron-down" /></a-button>
</Dropdown>
</template>
<template v-slot:bodyCell="{ column, record, text }">
<template v-if="column.dataIndex === 'formNo'">
<a-tooltip title="点击查看详情">
<a style="font-weight: 500" @mousedown.stop @click.stop="handleDetail(record)">{{ text }}</a>
</a-tooltip>
</template>
</template>
<!--嵌套子表-->
<template #expandedRowRender="{ record }">
<div class="feedback-expand-table">
<div class="feedback-expand-header">
<div class="feedback-expand-title">
<span class="feedback-expand-icon">
<Icon icon="ant-design:message-outlined" />
</span>
<span>反馈记录</span>
<template v-if="getFeedbackTableLoading(record)">
<a-tag class="feedback-expand-count" color="processing">加载中</a-tag>
</template>
<template v-else>
<a-tag class="feedback-expand-count"> {{ getFeedbackCount(record) }} </a-tag>
</template>
</div>
<div class="feedback-expand-desc">当前定点联系单的反馈办理记录</div>
</div>
<BasicTable
class="feedback-inner-table"
bordered
size="small"
rowKey="id"
:canResize="false"
:showIndexColumn="false"
:showActionColumn="false"
:showTableSetting="false"
:clickToRowSelect="false"
:columns="feedbackExpandColumns"
:dataSource="getFeedbackTableData(record)"
:loading="getFeedbackTableLoading(record)"
:pagination="false"
:scroll="{ x: 1200 }"
/>
</div>
</template>
</BasicTable>
</div>
<FixedContact20260730Modal ref="registerModal" @success="handleSuccess" />
<FlowScheduleStartModalForBG ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
<BusinessProcessListModal ref="businessProcessListModalRef" />
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, h } from 'vue';
import { BasicTable } from '/@/components/Table';
import type { BasicColumn } from '/@/components/Table';
import { Dropdown } from '/@/components/Dropdown';
import { useListPage } from '/@/hooks/system/useListPage';
import { Tooltip } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import Icon from '/@/components/Icon/index';
import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
import SzUserSelect from '/@/components/semri/userComponent/SzUserSelect.vue';
import FixedContact20260730Modal from './components/FixedContact20260730Modal.vue';
import FlowScheduleStartModalForBG from '/src/components/semri/process/FlowScheduleStartModalForBG.vue';
import BusinessProcessListModal from '/src/components/semri/process/BusinessProcessListModal.vue';
import { startProcessSchedules } from '/@/api/common/api';
import { dateUtil } from '/@/utils/dateUtil';
import { columns, superQuerySchema, fixedContactFeedbackColumns } from './FixedContact20260730.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, fixedContactFeedbackList, saveOrUpdate, withDrawFixContact } from './FixedContact20260730.api';
function expandIcon({ expanded, onExpand, record }: { expanded: boolean; onExpand: Function; record: Recordable }) {
const iconCls = expanded
? 'ant-table-row-expand-icon ant-table-row-expand-icon-expanded'
: 'ant-table-row-expand-icon ant-table-row-expand-icon-collapsed';
return h(
Tooltip,
{ title: '查看当前联系单反馈记录' },
{
default: () =>
h('button', {
type: 'button',
class: iconCls,
onClick: (e: Event) => onExpand(record, e),
}),
},
);
}
const permissionPrefix = 'bg.fixcontact:fixed_contact_20260730';
const actionAuth = {
add: `${permissionPrefix}:add`,
edit: `${permissionPrefix}:edit`,
delete: `${permissionPrefix}:delete`,
deleteBatch: `${permissionPrefix}:deleteBatch`,
exportXls: `${permissionPrefix}:exportXls`,
importExcel: `${permissionPrefix}:importExcel`,
};
const FLOW_CODE = 'fix_contact';
const BUSINESS_TABLE_NAME = 'fixed_contact_20260730';
const FORM_URL = 'bg/fixcontact/components/FixedContact20260730BPMForm';
const formRef = ref();
const registerModal = ref();
const flowScheduleModalRef = ref();
const businessProcessListModalRef = ref();
const toggleSearchStatus = ref<boolean>(false);
const queryParam = reactive<any>({});
const expandedRowKeys = ref<Array<string | number>>([]);
const feedbackTableData = reactive<Record<string, Recordable[]>>({});
const feedbackTableLoading = reactive<Record<string, boolean>>({});
const feedbackExpandColumns: BasicColumn[] = [...fixedContactFeedbackColumns];
const { tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '定点联系单',
api: list,
columns,
canResize: true,
resizeHeightOffset: 56,
useSearchForm: false,
expandRowByClick: true,
clickToRowSelect: false,
rowSelection: { type: 'checkbox' },
actionColumn: {
width: 240,
fixed: 'right',
},
beforeFetch: async (params) => {
return Object.assign(params, getQueryParams());
},
pagination: {
current: 1,
pageSize: 12,
pageSizeOptions: ['12', '24', '36'],
},
},
exportConfig: {
name: '定点联系单',
url: getExportUrl,
},
importConfig: {
url: getImportUrl,
success: handleSuccess,
},
});
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
const superQueryConfig = reactive(superQuerySchema);
function getFeedbackKey(record: Recordable) {
return String(record?.id ?? '');
}
function getFeedbackTableData(record: Recordable) {
return feedbackTableData[getFeedbackKey(record)] || [];
}
function getFeedbackCount(record: Recordable) {
return getFeedbackTableData(record).length;
}
function getFeedbackTableLoading(record: Recordable) {
return !!feedbackTableLoading[getFeedbackKey(record)];
}
function clearFeedbackTableData() {
Object.keys(feedbackTableData).forEach((key) => {
delete feedbackTableData[key];
});
Object.keys(feedbackTableLoading).forEach((key) => {
delete feedbackTableLoading[key];
});
}
function resetFeedbackExpand() {
expandedRowKeys.value = [];
clearFeedbackTableData();
}
async function loadFeedbackTableData(mainId: string | number) {
const key = String(mainId);
feedbackTableLoading[key] = true;
try {
const res = await fixedContactFeedbackList({ id: mainId });
feedbackTableData[key] = Array.isArray(res) ? res : res?.records || [];
} finally {
feedbackTableLoading[key] = false;
}
}
async function handleExpand(expanded: boolean, record: Recordable) {
const mainId = record?.id;
expandedRowKeys.value = [];
if (!expanded || mainId === undefined || mainId === null || mainId === '') {
return;
}
expandedRowKeys.value = [mainId];
await loadFeedbackTableData(mainId);
}
function handleSuperQuery(params) {
Object.keys(params).map((k) => {
queryParam[k] = params[k];
});
searchQuery();
}
function isEmptyQueryValue(value) {
return value === undefined || value === null || value === '' || value === '**' || (Array.isArray(value) && value.length === 0);
}
function getTrimmedQueryValue(value) {
return typeof value === 'string' ? value.trim() : value;
}
function getQueryParams() {
const params: Recordable = {};
Object.keys(queryParam).forEach((key) => {
const value = getTrimmedQueryValue(queryParam[key]);
if (!isEmptyQueryValue(value)) {
params[key] = value;
}
});
return params;
}
function searchQuery() {
selectedRowKeys.value = [];
resetFeedbackExpand();
reload({ page: 1 });
}
function clearQueryParams() {
Object.keys(queryParam).forEach((key) => {
delete queryParam[key];
});
}
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.edit(record);
}
function handleDetail(record: Recordable) {
expandedRowKeys.value = [];
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess);
}
async function batchHandleDelete() {
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
function handleSuccess() {
selectedRowKeys.value = [];
resetFeedbackExpand();
reload();
}
const { createMessage } = useMessage();
function getFlowMenuList(record) {
const list: any[] = [];
if (record.bpmStatus == '1' || !record.bpmStatus) {
list.push({
text: '发起流程',
icon: 'ant-design:play-circle-outlined',
event: 'process',
onClick: handleProcess.bind(null, record),
});
}
list.push({
text: '查询督办流程',
icon: 'ant-design:search-outlined',
event: 'queryProcess',
divider: true,
onClick: handleQueryProcess.bind(null, record),
});
if (record.bpmStatus && record.bpmStatus !== '1') {
list.push({
text: '删除关联流程',
icon: 'ant-design:delete-outlined',
event: 'withdraw',
popConfirm: {
title: '确定删除该记录关联的所有运行中流程吗?',
confirm: handleWithDraw.bind(null, record),
placement: 'topLeft',
},
});
}
return list;
}
function getFormMenuList(record) {
return [
{
text: '编辑',
icon: 'ant-design:edit-outlined',
event: 'edit',
onClick: handleEdit.bind(null, record),
},
{
text: '详情',
icon: 'ant-design:file-text-outlined',
event: 'detail',
onClick: handleDetail.bind(null, record),
},
{
text: '删除',
icon: 'ant-design:delete-outlined',
event: 'delete',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
placement: 'topLeft',
},
auth: actionAuth.delete,
},
];
}
interface DeptOption {
label: string;
value: string;
}
function getNextSuperviseCount(value) {
const count = Number(value || 0);
return Number.isFinite(count) ? count + 1 : 1;
}
const CN = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
function toChinese(num: number): string {
return String(num).split('').map(c => CN[Number(c)]).join('');
}
function splitDeptValue(value) {
if (Array.isArray(value)) {
return value.map((item) => String(item || '').trim()).filter(Boolean);
}
return String(value || '')
.split(/[,]/)
.map((item) => item.trim())
.filter(Boolean);
}
function fetchDeptOptions(record): DeptOption[] {
const hostIds = splitDeptValue(record?.hostDept);
const coIds = splitDeptValue(record?.coDept);
const hostNames = splitDeptValue(record?.hostDept_dictText);
const coNames = splitDeptValue(record?.coDept_dictText);
const optionMap = new Map<string, DeptOption>();
[hostIds, coIds].forEach((ids, groupIndex) => {
const names = groupIndex === 0 ? hostNames : coNames;
ids.forEach((deptId, index) => {
if (optionMap.has(deptId)) return;
optionMap.set(deptId, {
value: deptId,
label: names[index] || deptId,
});
});
});
return Array.from(optionMap.values());
}
function getDeptIds(record) {
const hostIds = splitDeptValue(record?.hostDept);
const coIds = splitDeptValue(record?.coDept);
return [...new Set([...hostIds, ...coIds])].join(',');
}
async function handleProcess(record) {
const deptOptions = await fetchDeptOptions(record);
const nextCount = getNextSuperviseCount(record.superviseCount);
const title = nextCount > 1
? `发起流程(${record?.formNo || record?.seqNo || ''}${toChinese(nextCount)}次督办)`
: '发起流程';
flowScheduleModalRef.value?.open({
title,
taskTitle: nextCount > 1 ? `${record?.formNo || record?.seqNo || ''}${nextCount}次督办` : (record?.formNo || record?.seqNo || ''),
payload: { record },
deptOptions,
showSuoleaderFields: true,
isNeedAppro: record?.isNeedAppro,
supDeptleaderid: record?.supDeptleaderid,
showDeadlineField: true,
deadline: record?.contactTime,
showTriggerMode: false,
});
}
function handleQueryProcess(record) {
businessProcessListModalRef.value?.open({
title: '流程列表',
businessId: record.id,
columns: '',
});
}
async function handleWithDraw(record) {
const res = await withDrawFixContact({ id: record.id });
if (res.success) {
createMessage.success(res.message || '删除流程成功');
reload();
} else {
createMessage.error(res.message || '删除流程失败');
}
}
async function handleFlowScheduleConfirm({ payload, options }) {
const record = payload?.record || {};
const formatDate = (value, format) => {
return value ? dateUtil(value).format(format) : undefined;
};
const formatDeadlineDateTime = (value) => {
const deadlineDate = formatDate(value, 'YYYY-MM-DD');
return deadlineDate ? `${deadlineDate} 00:00:00` : undefined;
};
const nextSuperviseCount = getNextSuperviseCount(record.superviseCount);
const selectedTitle = options.title || record.formNo || record.seqNo || '';
const selectedDeadline = options.deadline || record.contactTime;
const defaultDeptIds = getDeptIds(record);
const flowJsonData = {
...record,
superviseCount: nextSuperviseCount,
title: selectedTitle,
isNeedAppro: options.isNeedAppro ?? '0',
supDeptleaderid: options.supDeptleaderid ?? '',
startApprovalOpinion: options.approvalOpinion,
};
const params = {
intervalType: options.intervalType,
startCount: options.startCount,
taskTask: {
triggerType: options.triggerType,
startTime: options.intervalStartTime,
flowCode: FLOW_CODE,
formUrl: FORM_URL,
flowName: '定点联系督办流程',
jsonData: flowJsonData,
businessTablename: BUSINESS_TABLE_NAME,
businessId: record.id,
title: selectedTitle,
content: record.suggestionSummary || '',
deptId: options.deptId || defaultDeptIds,
deptLeaderId: record.contactLeader || '',
requireFinishDate: formatDate(selectedDeadline, 'YYYY-MM-DD'),
deadline: formatDeadlineDateTime(selectedDeadline),
},
};
await startProcessSchedules(params);
await saveOrUpdate({ id: record.id, bpmStatus: '2', superviseCount: nextSuperviseCount, isNeedAppro: options.isNeedAppro ?? record.isNeedAppro ?? '0', supDeptleaderid: options.supDeptleaderid ?? record.supDeptleaderid ?? '' }, true);
createMessage.success('发起成功');
reload();
}
const labelCol = reactive({
xs: 24,
sm: 4,
xl: 6,
xxl: 8,
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
});
function searchReset() {
formRef.value?.resetFields();
clearQueryParams();
selectedRowKeys.value = [];
resetFeedbackExpand();
reload({ page: 1 });
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.search-form-row {
position: relative;
padding-right: 64px;
.search-toggle-btn {
position: absolute;
right: 12px;
top: 0;
height: 32px;
display: flex;
align-items: center;
white-space: nowrap;
}
}
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.ant-form-item:not(.ant-form-item-with-help) {
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),
:deep(.ant-input-number) {
width: 100%;
}
}
.erpNativeList {
height: 100%;
.content {
background-color: #fff;
height: auto;
}
.feedback-expand-table {
margin: 4px 10px 12px 42px;
padding: 12px 14px 14px;
background: #f6fbff;
border: 1px solid #d6e8ff;
border-left: 4px solid #1677ff;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
.feedback-expand-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.feedback-expand-title {
display: inline-flex;
align-items: center;
min-width: 0;
color: #1f2937;
font-size: 14px;
font-weight: 600;
line-height: 24px;
}
.feedback-expand-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-expand-count {
margin-left: 10px;
}
.feedback-expand-desc {
color: #64748b;
font-size: 13px;
line-height: 22px;
white-space: nowrap;
}
:deep(.jeecg-basic-table) {
background: #fff;
}
:deep(.feedback-inner-table .ant-table-wrapper) {
padding: 0;
border-radius: 4px;
}
:deep(.feedback-inner-table .ant-table-thead > tr > th) {
background: #eef6ff;
color: #334155;
font-weight: 600;
}
:deep(.feedback-inner-table .ant-table-tbody > tr > td) {
background: #fff;
}
:deep(.feedback-inner-table .ant-table-tbody > tr:hover > td) {
background: #f8fbff;
}
}
}
</style>