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,75 @@
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
const { createConfirm } = useMessage();
enum Api {
list = '/bg/fixcontact/fixedContact20260730/list',
save = '/bg/fixcontact/fixedContact20260730/add',
edit = '/bg/fixcontact/fixedContact20260730/edit',
deleteOne = '/bg/fixcontact/fixedContact20260730/delete',
deleteBatch = '/bg/fixcontact/fixedContact20260730/deleteBatch',
importExcel = '/bg/fixcontact/fixedContact20260730/importExcel',
exportXls = '/bg/fixcontact/fixedContact20260730/exportXls',
queryById = '/bg/fixcontact/fixedContact20260730/queryById',
fixedContactFeedbackList = '/bg/fixcontact/fixedContact20260730/queryFixedContactFeedback20260730ByMainId',
}
export const getExportUrl = Api.exportXls;
export const getImportUrl = Api.importExcel;
export const list = (params) =>
defHttp.get({ url: Api.list, params });
export const deleteOne = (params, handleSuccess) => {
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
handleSuccess();
});
};
export const batchDelete = (params, handleSuccess) => {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '是否删除选中数据',
okText: '确认',
cancelText: '取消',
onOk: () => {
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
handleSuccess();
});
},
});
};
export const saveOrUpdate = (params, isUpdate) => {
let url = isUpdate ? Api.edit : Api.save;
return defHttp.post({ url: url, params }, { isTransformResponse: false });
};
export const queryById = (id) =>
defHttp.get({ url: Api.queryById, params: { id } });
export const fixedContactFeedbackList = (params) => {
if (params['id']) {
return defHttp.get({ url: Api.fixedContactFeedbackList, params });
}
return Promise.resolve([]);
};
const BpmApi = {
saveBpmForm: '/bg/fixcontact/fixedContact20260730/saveBpmForm',
setBpmVariableLocal: '/act/process/setBpmVariableLocal',
};
export const saveBpmForm = (params) => {
return defHttp.post({ url: BpmApi.saveBpmForm, params }, { isTransformResponse: false });
};
export const setBpmVariableLocal = (params) => {
return defHttp.post({ url: BpmApi.setBpmVariableLocal, params }, { isTransformResponse: false });
};
export const withDrawFixContact = (params) => {
return defHttp.post({ url: '/bg/fixcontact/fixedContact20260730/withDrawFixContact', params }, { joinParamsToUrl: true, isTransformResponse: false });
};
@@ -0,0 +1,143 @@
import { BasicColumn } from '/@/components/Table';
export const columns: BasicColumn[] = [
{
title: '序号',
align: 'center',
dataIndex: 'seqNo',
width: '80px',
},
{
title: '表单编号',
align: 'center',
dataIndex: 'formNo',
width: '160px',
},
{
title: '定点联系所领导',
align: 'center',
dataIndex: 'contactLeader_dictText',
width: '120px',
},
{
title: '联系单位(部门)',
align: 'center',
dataIndex: 'contactDept_dictText',
width: '160px',
},
{
title: '联系时间',
align: 'center',
dataIndex: 'contactTime',
width: '110px',
customRender: ({ text }) => {
text = !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
return text;
},
},
{
title: '座谈地点',
align: 'center',
dataIndex: 'meetingPlace',
width: '160px',
},
{
title: '相关分管所领导',
align: 'center',
dataIndex: 'relatedLeader_dictText',
width: '120px',
},
{
title: '申请人',
align: 'center',
dataIndex: 'applicant_dictText',
width: '100px',
},
{
title: '主办部门',
align: 'center',
dataIndex: 'hostDept_dictText',
width: '120px',
},
{
title: '协办部门',
align: 'center',
dataIndex: 'coDept_dictText',
width: '120px',
},
{
title: '督办次数',
align: 'center',
dataIndex: 'superviseCount',
width: '80px',
},
];
export const fixedContactFeedbackColumns: BasicColumn[] = [
{
title: '计划完成时间',
align: 'center',
dataIndex: 'planFinishTime',
width: 120,
customRender: ({ text }) => {
text = !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
return text;
},
},
{
title: '计划完成情况',
align: 'center',
dataIndex: 'planFinishStatus',
width: 160,
},
{
title: '处理意见、承办情况',
align: 'center',
dataIndex: 'handleOpinion',
width: 200,
},
{
title: '办结情况',
align: 'center',
dataIndex: 'finishStatus',
width: 160,
},
{
title: '实际完成时间',
align: 'center',
dataIndex: 'actualFinishTime',
width: 120,
customRender: ({ text }) => {
text = !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
return text;
},
},
{
title: '实际完成情况',
align: 'center',
dataIndex: 'actualFinishStatus',
width: 160,
},
{
title: '反馈人',
align: 'center',
dataIndex: 'feedbackUser_dictText',
width: 110,
},
{
title: '反馈部门',
align: 'center',
dataIndex: 'feedbackDept_dictText',
width: 150,
},
];
export const superQuerySchema = {
formNo: { title: '表单编号', order: 0, view: 'text', type: 'string' },
contactLeader: { title: '定点联系所领导', order: 1, view: 'sel_user', type: 'string' },
contactTime: { title: '联系时间', order: 2, view: 'date', type: 'string' },
relatedLeader: { title: '相关分管所领导', order: 3, view: 'sel_user', type: 'string' },
applicant: { title: '申请人', order: 4, view: 'sel_user', type: 'string' },
seqNo: { title: '序号', order: 5, view: 'text', type: 'string' },
meetingPlace: { title: '座谈地点', order: 6, view: 'text', type: 'string' },
};
@@ -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>
@@ -0,0 +1,210 @@
<template>
<JModal
:title="modalTitle"
:width="820"
:visible="visible"
:confirmLoading="saving"
okText="保存"
cancelText="取消"
@ok="handleOk"
@cancel="handleCancel"
>
<a-form
ref="formRef"
class="bpm-feedback-modal-form"
:model="formData"
:rules="formRules"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-row :gutter="16">
<a-col :span="12">
<a-tooltip :title="isEdit ? '' : '该信息后续不可编辑,请谨慎填写'">
<a-form-item label="计划完成时间" name="planFinishTime">
<a-date-picker v-model:value="formData.planFinishTime" value-format="YYYY-MM-DD" style="width: 100%" :disabled="isEdit" allow-clear />
</a-form-item>
</a-tooltip>
</a-col>
<a-col :span="24">
<a-tooltip :title="isEdit ? '' : '该信息后续不可编辑,请谨慎填写'">
<a-form-item label="计划完成情况" name="planFinishStatus" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.planFinishStatus" :rows="3" :disabled="isEdit" allow-clear />
</a-form-item>
</a-tooltip>
</a-col>
<a-col :span="24">
<a-form-item label="处理意见、承办情况" name="handleOpinion" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.handleOpinion" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="办结情况" name="finishStatus" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.finishStatus" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="实际完成时间" name="actualFinishTime">
<a-date-picker v-model:value="formData.actualFinishTime" value-format="YYYY-MM-DD" style="width: 100%" :disabled="isEdit" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="实际完成情况" name="actualFinishStatus">
<a-input v-model:value="formData.actualFinishStatus" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="附件" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<SUploadFile
:key="uploadKey"
ref="uploadFileRef"
:bussiness-id="formData.id"
:multiple="true"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</JModal>
</template>
<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
import { useUserStore } from '/@/store/modules/user';
import { buildUUID } from '/@/utils/uuid';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
const emit = defineEmits(['success']);
const { createMessage } = useMessage();
const userStore = useUserStore();
const visible = ref(false);
const saving = ref(false);
const isEdit = ref(false);
const modalTitle = ref('新增反馈');
const formRef = ref();
const uploadFileRef = ref<InstanceType<typeof SUploadFile> | null>(null);
const uploadKey = ref(0);
const labelCol = { xs: { span: 24 }, sm: { span: 7 } };
const wrapperCol = { xs: { span: 24 }, sm: { span: 17 } };
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } };
const feedbackSaveUrl = '/bg/fixcontact/fixedContact20260730/addFixedContactFeedback20260730';
const feedbackEditUrl = '/bg/fixcontact/fixedContact20260730/editFixedContactFeedback20260730';
const formData = reactive<Record<string, any>>({
id: '',
planFinishTime: '',
planFinishStatus: '',
handleOpinion: '',
finishStatus: '',
actualFinishTime: '',
actualFinishStatus: '',
feedbackUser: '',
feedbackDept: '',
fixedContact20260730Id: '',
bpmProcessId: '',
});
const formRules = {
planFinishStatus: [{ required: true, message: '请输入计划完成情况' }],
};
function resetForm(mainId = '', bpmProcessId = '') {
Object.keys(formData).forEach((key) => {
formData[key] = '';
});
formData.fixedContact20260730Id = mainId;
formData.bpmProcessId = bpmProcessId;
uploadKey.value += 1;
nextTick(() => formRef.value?.clearValidate?.());
}
function open(mainId: string, bpmProcessId = '', record?: Record<string, any>) {
resetForm(mainId, bpmProcessId);
if (record?.id) {
isEdit.value = true;
modalTitle.value = '编辑反馈';
Object.keys(formData).forEach((key) => {
if (Object.prototype.hasOwnProperty.call(record, key)) {
formData[key] = record[key] ?? '';
}
});
formData.fixedContact20260730Id = formData.fixedContact20260730Id || mainId;
formData.bpmProcessId = formData.bpmProcessId || bpmProcessId;
} else {
isEdit.value = false;
modalTitle.value = '新增反馈';
void applyCurrentUserFeedbackInfo();
}
visible.value = true;
}
function getCurrentLoginDepart() {
const userInfo = (userStore.getUserInfo || {}) as Record<string, any>;
const loginInfo = (userStore.getLoginInfo || {}) as Record<string, any>;
const departs = Array.isArray(loginInfo.departs) ? loginInfo.departs : [];
if (userInfo.orgCode) {
return departs.find((item: any) => item.orgCode === userInfo.orgCode);
}
return departs.length === 1 ? departs[0] : undefined;
}
function applyCurrentUserFeedbackInfo() {
const userInfo = (userStore.getUserInfo || {}) as Record<string, any>;
formData.feedbackUser = userInfo.id || userInfo.userId || '';
const loginDepart = getCurrentLoginDepart();
if (loginDepart) {
formData.feedbackDept = loginDepart.id || '';
}
}
function handleCancel() {
visible.value = false;
}
async function handleOk() {
try {
await formRef.value?.validate?.();
} catch {
return;
}
saving.value = true;
try {
const isUpdate = !!formData.id;
if (!isUpdate) {
await applyCurrentUserFeedbackInfo();
}
if (!isUpdate && uploadFileRef.value?.hasPendingFiles?.()) {
formData.id = buildUUID();
}
const saveUrl = isUpdate ? feedbackEditUrl : feedbackSaveUrl;
const res = await defHttp.post({ url: saveUrl, params: { ...formData } }, { isTransformResponse: false });
if (res.success) {
if (formData.id && uploadFileRef.value?.hasPendingFiles?.()) {
await uploadFileRef.value.bindBussinessId(formData.id);
}
createMessage.success(res.message || '保存成功');
visible.value = false;
emit('success');
} else {
createMessage.warning(res.message || '保存失败');
}
} finally {
saving.value = false;
}
}
defineExpose({
open,
});
</script>
<style lang="less" scoped>
.bpm-feedback-modal-form {
padding: 12px 8px 0;
}
</style>
@@ -0,0 +1,660 @@
<template>
<a-spin :spinning="loading">
<div class="bg-fixcontact-bpm-form">
<a-form
class="main-form"
:class="{ 'main-form-readonly': mainDisabled }"
labelAlign="left"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:model="mainForm"
>
<div class="base-info-header section-toolbar">
<div class="section-title">基础信息</div>
<a-space class="section-actions">
<a-button v-if="!mainDisabled" class="base-save-button" type="link" size="small" :loading="savingMain" @click="submitForm">
<Icon icon="ant-design:save-outlined" />
保存
</a-button>
<a-button
class="section-action-button"
:type="showBaseInfoDetail ? 'default' : 'link'"
size="small"
@click="showBaseInfoDetail = !showBaseInfoDetail"
>
<Icon :icon="showBaseInfoDetail ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
{{ showBaseInfoDetail ? '收起基础信息' : '展开全部信息' }}
</a-button>
</a-space>
</div>
<a-row class="base-info-row" :gutter="[12, 4]">
<a-col :xs="24" :md="12">
<a-form-item label="序号" name="seqNo">
<a-input v-model:value="mainForm.seqNo" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="表单编号" name="formNo">
<a-input v-model:value="mainForm.formNo" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="定点联系所领导" name="contactLeader">
<DeptRoleUserSelectDropDown
v-model:value="mainForm.contactLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
:disabled="mainDisabled"
placeholder="请选择定点联系所领导"
/>
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="联系单位(部门)" name="contactDept">
<SzSelectDept v-model:value="mainForm.contactDept" :disabled="mainDisabled" placeholder="请选择联系单位(部门)" allow-clear />
</a-form-item>
</a-col>
<template v-if="showBaseInfoDetail">
<a-divider />
<a-col :xs="24" :md="12">
<a-form-item label="联系时间" name="contactTime">
<a-date-picker v-model:value="mainForm.contactTime" value-format="YYYY-MM-DD" :disabled="mainDisabled" placeholder="请选择联系时间" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="座谈地点" name="meetingPlace">
<a-input v-model:value="mainForm.meetingPlace" :disabled="mainDisabled" placeholder="请输入座谈地点" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="联系点建议诉求摘要" name="suggestionSummary" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="mainForm.suggestionSummary" :auto-size="{ minRows: 1, maxRows: 7 }" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="定点联系所领导审批意见" name="leaderOpinion" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="mainForm.leaderOpinion" :auto-size="{ minRows: 1, maxRows: 7 }" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="相关分管所领导批示意见" name="relatedLeaderOpinion" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="mainForm.relatedLeaderOpinion" :auto-size="{ minRows: 1, maxRows: 7 }" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="相关分管所领导" name="relatedLeader">
<DeptRoleUserSelectDropDown
v-model:value="mainForm.relatedLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
:disabled="mainDisabled"
placeholder="请选择相关分管所领导"
/>
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="申请人" name="applicant">
<SzSelectUser v-model:value="mainForm.applicant" :disabled="mainDisabled" placeholder="请选择申请人" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="主办部门" name="hostDept">
<SzSelectDept v-model:value="mainForm.hostDept" :disabled="mainDisabled" placeholder="请选择主办部门" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="协办部门" name="coDept">
<SzSelectDept v-model:value="mainForm.coDept" :disabled="mainDisabled" placeholder="请选择协办部门" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="督办次数" name="superviseCount">
<a-input-number v-model:value="mainForm.superviseCount" :disabled="mainDisabled" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
</template>
</a-row>
</a-form>
<a-divider />
<div class="feedback-header section-toolbar">
<div class="section-title">办理情况</div>
<a-space class="section-actions">
<a-tooltip v-if="showAddFeedback" title="可以多次新增反馈">
<a-button class="section-action-button feedback-add-button" type="primary" @click="openFeedbackModal">
<Icon icon="ant-design:plus-outlined" />
新增反馈
</a-button>
</a-tooltip>
<a-button
class="section-action-button"
:type="showFeedbackDetail ? 'default' : 'link'"
size="small"
@click="showFeedbackDetail = !showFeedbackDetail"
>
<Icon :icon="showFeedbackDetail ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
{{ showFeedbackDetail ? '收起办理情况' : '展开办理情况' }}
</a-button>
</a-space>
</div>
<a-table
v-if="showFeedbackDetail"
rowKey="id"
size="small"
bordered
:columns="feedbackColumns"
:data-source="feedbackList"
:pagination="false"
:scroll="{ x: feedbackTableScrollX }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'attachments'">
<SUploadFile
v-if="record.id"
:key="getFeedbackAttachmentKey(record)"
class="feedback-attachment-list"
:bussiness-id="record.id"
:disabled="true"
:multiple="true"
/>
<span v-else>-</span>
</template>
<template v-else-if="canManageFeedback && column.key === 'action'">
<a-space>
<a-button type="link" size="small" @click="openFeedbackEditModal(record)">编辑</a-button>
<a-popconfirm title="是否确认删除" @confirm="handleFeedbackDelete(record)">
<a-button type="link" size="small" danger>删除</a-button>
</a-popconfirm>
</a-space>
</template>
</template>
</a-table>
<FixedContact20260730BPMFeedbackModal ref="feedbackModalRef" @success="loadFeedbackList" />
<template v-if="showProcessHandle">
<a-divider />
<div class="process-header section-toolbar">
<div class="section-title">流程办理</div>
</div>
<TaskHandleInnerContent
:form-data="formData"
:claim="claim"
:beforeHandle="saveMainFormBeforeProcessHandle"
@success="handleProcessSuccess"
@claimSuccess="handleClaimSuccess"
/>
</template>
</div>
</a-spin>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { usePermission } from '/@/hooks/web/usePermission';
import Icon from '/@/components/Icon/index';
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
import SzSelectUser from '/@/components/semri/userComponent/SzUserSelect.vue';
import DeptRoleUserSelectDropDown from '/@/components/semri/userComponent/DeptRoleUserSelectDropDown.vue';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
import TaskHandleInnerContent from '/@/views/super/bpm/process/personalOffice/myHandleTask/content/TaskHandleInnerContent.vue';
import FixedContact20260730BPMFeedbackModal from './FixedContact20260730BPMFeedbackModal.vue';
import { fixedContactFeedbackList, saveBpmForm, setBpmVariableLocal } from '../FixedContact20260730.api';
import { PARTY_COMMITTEE_DEPT_ID, CHARGE_LEADER_ROLE_ID } from '/@/constant/supervision';
const { initBpmFormData } = usePermission();
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({}) },
formBpm: { type: Boolean, default: true },
claim: { type: Boolean, default: false },
});
initBpmFormData(props.formData);
const emit = defineEmits(['ok', 'success', 'claimSuccess']);
const { createMessage } = useMessage();
const queryByIdUrl = '/bg/fixcontact/fixedContact20260730/queryById';
const labelCol = { xs: { span: 24 }, sm: { span: 7 } };
const wrapperCol = { xs: { span: 24 }, sm: { span: 17 } };
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } };
const feedbackModalRef = ref();
const loading = ref(false);
const savingMain = ref(false);
const showBaseInfoDetail = ref(false);
const showFeedbackDetail = ref(true);
const feedbackList = ref<any[]>([]);
const feedbackAttachmentRefreshKey = ref(0);
const mainForm = reactive<Record<string, any>>({
id: '',
seqNo: '',
formNo: '',
contactLeader: '',
contactDept: '',
contactTime: '',
meetingPlace: '',
suggestionSummary: '',
leaderOpinion: '',
relatedLeaderOpinion: '',
relatedLeader: '',
applicant: '',
hostDept: '',
coDept: '',
superviseCount: '',
});
const feedbackBaseColumns = [
{ title: '反馈部门', dataIndex: 'feedbackDept_dictText', align: 'center', width: 160 },
{ title: '反馈人', dataIndex: 'feedbackUser_dictText', align: 'center', width: 120 },
{ title: '计划完成时间', dataIndex: 'planFinishTime', align: 'center', width: 130, customRender: ({ text }) => (!text ? '' : String(text).slice(0, 10)) },
{ title: '计划完成情况', dataIndex: 'planFinishStatus', align: 'center', width: 260 },
{ title: '处理意见、承办情况', dataIndex: 'handleOpinion', align: 'center', width: 260 },
{ title: '办结情况', dataIndex: 'finishStatus', align: 'center', width: 200 },
{ title: '实际完成时间', dataIndex: 'actualFinishTime', align: 'center', width: 130, customRender: ({ text }) => (!text ? '' : String(text).slice(0, 10)) },
{ title: '实际完成情况', dataIndex: 'actualFinishStatus', align: 'center', width: 200 },
{ title: '附件', dataIndex: 'id', key: 'attachments', align: 'left', width: 340 },
];
const feedbackActionColumn = { title: '操作', dataIndex: 'action', key: 'action', align: 'center', width: 120, fixed: 'right' };
const feedbackColumns = computed(() => {
return canManageFeedback.value ? [...feedbackBaseColumns, feedbackActionColumn] : feedbackBaseColumns;
});
const feedbackTableScrollX = computed(() => {
return canManageFeedback.value ? 1920 : 1800;
});
const mainDisabled = computed(() => {
if (props.formBpm) {
return props.formData?.disabled !== false;
}
return props.formDisabled;
});
const showProcessHandle = computed(() => props.formBpm && props.formData?.PROCESS_TAB_TYPE === 'run' && !!props.formData?.taskId);
const canManageFeedback = computed(() => props.formBpm && props.formData?.PROCESS_TAB_TYPE === 'run' && !!props.formData?.taskId);
const showAddFeedback = computed(() => String(props.formData?.extendUrlParams?.addfeedback ?? '') === '1');
const processInfo = computed(() => ({
taskId: props.formData?.taskId,
taskDefKey: props.formData?.taskDefKey,
processInstanceId:
props.formData?.procInsId ||
props.formData?.procInstId ||
props.formData?.processInstanceId ||
props.formData?.vars?.BPM_INST_ID ||
props.formData?.vars?.JG_LOCAL_PROCESS_ID ||
props.formData?.vars?.process_inst_id ||
props.formData?.vars?.processInstanceId,
processDataId: props.formData?.processDataId,
processTableName: props.formData?.processTableName,
}));
onMounted(() => {
initFormData();
});
watch([() => props.formData?.dataId, () => processInfo.value.processInstanceId], () => initFormData());
async function initFormData() {
const dataId = props.formData?.dataId;
if (!dataId) {
return;
}
showBaseInfoDetail.value = false;
loading.value = true;
try {
const data = await defHttp.get({ url: queryByIdUrl, params: { id: dataId } });
if (dataId !== props.formData?.dataId) {
return;
}
setMainForm(data || {});
if (dataId !== props.formData?.dataId) {
return;
}
await loadFeedbackList();
} finally {
loading.value = false;
}
}
function setMainForm(record: Record<string, any>) {
Object.keys(mainForm).forEach((key) => {
mainForm[key] = record[key] ?? '';
});
}
async function loadFeedbackList() {
const bpmProcessId = processInfo.value.processInstanceId;
if (!mainForm.id || !bpmProcessId) {
feedbackList.value = [];
feedbackAttachmentRefreshKey.value += 1;
return;
}
const res = await fixedContactFeedbackList({ id: mainForm.id, bpmProcessId });
feedbackList.value = res?.records || res?.result?.records || [];
feedbackAttachmentRefreshKey.value += 1;
}
function getFeedbackAttachmentKey(record: Recordable) {
return `${record?.id || ''}-${feedbackAttachmentRefreshKey.value}`;
}
async function submitForm() {
return saveMainForm();
}
async function saveMainForm(options: { showMessage?: boolean; emitOk?: boolean } = {}) {
const { showMessage = true, emitOk = true } = options;
savingMain.value = true;
try {
const processInstanceId = processInfo.value.processInstanceId;
const res = await saveBpmForm({
processInstanceId,
varField: 'json_data',
formData: { ...mainForm },
});
if (res.success) {
if (showMessage) {
createMessage.success(res.message || '保存成功');
}
if (emitOk) {
emit('ok');
}
return true;
}
createMessage.warning(res.message || '保存失败');
return false;
} catch (error) {
createMessage.warning('保存失败');
return false;
} finally {
savingMain.value = false;
}
}
async function saveMainFormBeforeProcessHandle() {
if (!mainDisabled.value) {
const mainSaved = await saveMainForm({ showMessage: false, emitOk: false });
if (!mainSaved) {
return false;
}
}
return true;
}
function openFeedbackModal() {
if (!mainForm.id) {
createMessage.warning('主表数据不存在,无法新增反馈');
return;
}
const processInstanceId = processInfo.value.processInstanceId;
if (!processInstanceId) {
createMessage.warning('流程实例ID不能为空,无法新增反馈');
return;
}
feedbackModalRef.value?.open(mainForm.id, processInstanceId);
}
function openFeedbackEditModal(record: Recordable) {
if (!canManageFeedback.value) {
createMessage.warning('当前流程状态不允许编辑反馈');
return;
}
if (!record?.id) {
createMessage.warning('反馈记录不存在,无法编辑');
return;
}
feedbackModalRef.value?.open(mainForm.id, processInfo.value.processInstanceId, record);
}
async function handleFeedbackDelete(record: Recordable) {
if (!canManageFeedback.value) {
createMessage.warning('当前流程状态不允许删除反馈');
return;
}
if (!record?.id) {
createMessage.warning('反馈记录不存在,无法删除');
return;
}
try {
await defHttp.delete({ url: '/bg/fixcontact/fixedContact20260730/deleteFixedContactFeedback20260730', params: { id: record.id } });
createMessage.success('删除成功');
await loadFeedbackList();
} catch (error) {
createMessage.warning('删除失败');
}
}
function handleProcessSuccess() {
emit('success');
}
function handleClaimSuccess() {
emit('claimSuccess');
}
defineExpose({
submitForm,
initFormData,
loadFeedbackList,
});
</script>
<style lang="less" scoped>
.bg-fixcontact-bpm-form {
padding: 8px 12px 14px;
}
.main-form {
background: #fff;
}
.main-form,
.process-variable-form {
:deep(.ant-form-item-label) {
text-align: left;
}
:deep(.ant-form-item-label > label) {
justify-content: flex-start;
color: #1f2937;
font-weight: 500;
}
:deep(.ant-form-item-control),
:deep(.ant-form-item-control-input),
:deep(.ant-form-item-control-input-content) {
text-align: left;
}
}
.section-title {
margin-bottom: 8px;
padding-left: 8px;
border-left: 3px solid #1677ff;
color: #1f2937;
font-size: 14px;
font-weight: 600;
line-height: 16px;
}
.section-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding: 6px 10px;
background: #f6fbff;
border: 1px solid #d6e8ff;
border-radius: 6px;
.section-title {
margin-bottom: 0;
}
.section-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.section-action-button {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 58px;
justify-content: center;
font-weight: 500;
box-shadow: none;
}
.base-save-button {
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 6px;
color: #64748b;
font-weight: 400;
}
}
.base-info-header {
margin-top: 0;
}
.base-info-row {
padding: 0 10px;
:deep(.ant-form-item) {
margin-bottom: 6px;
}
:deep(.ant-form-item-label) {
padding-bottom: 0;
}
:deep(.ant-form-item-label > label) {
width: 100%;
}
:deep(.ant-input),
:deep(.ant-input-affix-wrapper),
:deep(.ant-input-number),
:deep(.ant-picker),
:deep(.ant-select-selector) {
min-height: 30px;
}
}
.main-form-readonly {
:deep(.ant-input[disabled]),
:deep(.ant-input-disabled),
:deep(.ant-input-affix-wrapper-disabled),
:deep(.ant-input-affix-wrapper-disabled.ant-input-outlined),
:deep(.ant-input-number-disabled),
:deep(.ant-input-outlined[disabled]),
:deep(.ant-input-outlined.ant-input-disabled),
:deep(textarea.ant-input[disabled]),
:deep(.ant-picker-disabled),
:deep(.ant-select-disabled .ant-select-selector) {
background: transparent !important;
border-color: transparent !important;
color: #1f2937 !important;
box-shadow: none !important;
cursor: default !important;
opacity: 1 !important;
}
:deep(.ant-input[disabled]),
:deep(.ant-input-disabled),
:deep(.ant-input-number-disabled),
:deep(.ant-input-affix-wrapper-disabled),
:deep(textarea.ant-input[disabled]) {
padding-left: 0 !important;
padding-right: 0 !important;
}
:deep(.ant-input-number-disabled .ant-input-number-input) {
background: transparent !important;
color: #1f2937 !important;
-webkit-text-fill-color: #1f2937 !important;
cursor: default !important;
}
:deep(.ant-picker-disabled),
:deep(.ant-select-disabled .ant-select-selector) {
padding-left: 0 !important;
}
:deep(.ant-select-disabled .ant-select-arrow),
:deep(.ant-picker-disabled .ant-picker-suffix),
:deep(.ant-input-disabled .ant-input-clear-icon),
:deep(.ant-input-affix-wrapper-disabled .ant-input-clear-icon),
:deep(.ant-input-number-disabled .ant-input-number-handler-wrap),
:deep(.ant-select-disabled .ant-select-clear) {
display: none;
}
}
.feedback-header {
margin-bottom: 8px;
.feedback-add-button {
min-width: 104px;
}
}
:deep(.ant-divider-horizontal) {
margin: 10px 0;
}
.feedback-attachment-list {
min-width: 300px;
:deep(.file-list-wrapper) {
min-height: 0 !important;
padding: 4px 8px;
}
: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>
@@ -0,0 +1,194 @@
<template>
<a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form class="antd-modal-form" v-bind="formItemLayout" ref="formRef" name="FixedContact20260730FeedbackForm">
<a-row>
<a-col :span="12">
<a-form-item label="计划完成时间" v-bind="validateInfos.planFinishTime" id="FixedContact20260730FeedbackForm-planFinishTime" name="planFinishTime">
<a-date-picker v-model:value="formData.planFinishTime" value-format="YYYY-MM-DD" placeholder="请选择计划完成时间" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="计划完成情况" v-bind="validateInfos.planFinishStatus" id="FixedContact20260730FeedbackForm-planFinishStatus" name="planFinishStatus">
<a-textarea v-model:value="formData.planFinishStatus" placeholder="请输入计划完成情况" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="处理意见、承办情况" v-bind="validateInfos.handleOpinion" id="FixedContact20260730FeedbackForm-handleOpinion" name="handleOpinion">
<a-textarea v-model:value="formData.handleOpinion" placeholder="请输入处理意见、承办情况" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="办结情况" v-bind="validateInfos.finishStatus" id="FixedContact20260730FeedbackForm-finishStatus" name="finishStatus">
<a-textarea v-model:value="formData.finishStatus" placeholder="请输入办结情况" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="实际完成时间" v-bind="validateInfos.actualFinishTime" id="FixedContact20260730FeedbackForm-actualFinishTime" name="actualFinishTime">
<a-date-picker v-model:value="formData.actualFinishTime" value-format="YYYY-MM-DD" placeholder="请选择实际完成时间" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="实际完成情况" v-bind="validateInfos.actualFinishStatus" id="FixedContact20260730FeedbackForm-actualFinishStatus" name="actualFinishStatus">
<a-input v-model:value="formData.actualFinishStatus" placeholder="请输入实际完成情况" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="反馈人" v-bind="validateInfos.feedbackUser" id="FixedContact20260730FeedbackForm-feedbackUser" name="feedbackUser">
<SzSelectUser v-model:value="formData.feedbackUser" placeholder="请选择反馈人" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="反馈部门" v-bind="validateInfos.feedbackDept" id="FixedContact20260730FeedbackForm-feedbackDept" name="feedbackDept">
<SzSelectDept v-model:value="formData.feedbackDept" placeholder="请选择反馈部门" allow-clear />
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, inject, defineProps, unref, computed } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
import SzUserSelect from '/@/components/semri/userComponent/SzUserSelect.vue';
import { useUserStore } from '/@/store/modules/user';
const mainId = inject('mainId');
const formRef = ref();
const useForm = Form.useForm;
const userStore = useUserStore();
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
planFinishTime: '',
planFinishStatus: '',
handleOpinion: '',
finishStatus: '',
actualFinishTime: '',
actualFinishStatus: '',
feedbackUser: '',
feedbackDept: '',
fixedContact20260730Id: '',
});
const { createMessage } = useMessage();
const confirmLoading = ref<boolean>(false);
const validatorRules = {};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
const props = defineProps({
disabled: { type: Boolean, default: false },
});
const disabled = computed(() => props.disabled);
const formItemLayout = {
labelCol: { xs: { span: 24 }, sm: { span: 5 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
};
function add() {
edit({});
nextTick(() => {
applyCurrentUserFeedbackInfo();
});
}
function edit(record) {
nextTick(() => {
resetFields();
const tmpData = {};
Object.keys(formData).forEach((key) => {
if (record.hasOwnProperty(key)) {
tmpData[key] = record[key];
}
});
Object.assign(formData, tmpData);
});
}
function getCurrentLoginDepart() {
const userInfo = (userStore.getUserInfo || {}) as Record<string, any>;
const loginInfo = (userStore.getLoginInfo || {}) as Record<string, any>;
const departs = Array.isArray(loginInfo.departs) ? loginInfo.departs : [];
if (userInfo.orgCode) {
return departs.find((item) => item.orgCode === userInfo.orgCode);
}
return departs.length === 1 ? departs[0] : undefined;
}
function applyCurrentUserFeedbackInfo() {
const userInfo = (userStore.getUserInfo || {}) as Record<string, any>;
formData.feedbackUser = userInfo.id || userInfo.userId || '';
const loginDepart = getCurrentLoginDepart();
if (loginDepart) {
formData.feedbackDept = loginDepart.id || '';
}
}
async function submitForm() {
try {
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
let model = formData;
if (model.id) {
isUpdate.value = true;
}
if (!isUpdate.value) {
applyCurrentUserFeedbackInfo();
}
for (let data in model) {
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
if (unref(mainId)) {
model['fixedContact20260730Id'] = unref(mainId);
}
// feedback save uses the same saveOrUpdate but differently
const isUpdateVal = isUpdate.value;
const saveUrl = isUpdateVal ? '/bg/fixcontact/fixedContact20260730/edit' : '/bg/fixcontact/fixedContact20260730/add';
await defHttp.post({ url: saveUrl, params: model }, { isTransformResponse: false })
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.antd-modal-form {
padding: 14px;
}
</style>
@@ -0,0 +1,59 @@
<template>
<j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
<FixedContact20260730FeedbackForm ref="registerForm" @ok="submitCallback" :disabled="disableSubmit" />
</j-modal>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import FixedContact20260730FeedbackForm from './FixedContact20260730FeedbackForm.vue';
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
const title = ref<string>('');
const width = ref<number>(800);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
function add() {
title.value = '新增';
visible.value = true;
nextTick(() => {
registerForm.value.add();
});
}
function edit(record) {
title.value = disableSubmit.value ? '详情' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.edit(record);
});
}
function handleOk() {
registerForm.value.submitForm();
}
function submitCallback() {
handleCancel();
emit('success');
}
function handleCancel() {
visible.value = false;
}
defineExpose({
add,
edit,
disableSubmit,
});
</script>
<style lang="less">
.jee-hidden {
display: none !important;
}
</style>
@@ -0,0 +1,298 @@
<template>
<a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" labelAlign="left" :labelCol="labelCol" :wrapperCol="wrapperCol" name="FixedContact20260730Form">
<a-row class="form-content-row" :gutter="[12, 4]">
<a-col :xs="24" :md="12">
<a-form-item label="序号" v-bind="validateInfos.seqNo" id="FixedContact20260730Form-seqNo" name="seqNo">
<a-input v-model:value="formData.seqNo" placeholder="请输入序号" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="表单编号" v-bind="validateInfos.formNo" id="FixedContact20260730Form-formNo" name="formNo">
<a-input v-model:value="formData.formNo" placeholder="请输入表单编号" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="定点联系所领导" v-bind="validateInfos.contactLeader" id="FixedContact20260730Form-contactLeader" name="contactLeader">
<DeptRoleUserSelectDropDown
v-model:value="formData.contactLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
placeholder="请选择定点联系所领导"
/>
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="联系单位(部门)" v-bind="validateInfos.contactDept" id="FixedContact20260730Form-contactDept" name="contactDept">
<SzSelectDept v-model:value="formData.contactDept" placeholder="请选择联系单位(部门)" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="联系时间" v-bind="validateInfos.contactTime" id="FixedContact20260730Form-contactTime" name="contactTime">
<a-date-picker v-model:value="formData.contactTime" value-format="YYYY-MM-DD" placeholder="请选择联系时间" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="座谈地点" v-bind="validateInfos.meetingPlace" id="FixedContact20260730Form-meetingPlace" name="meetingPlace">
<a-input v-model:value="formData.meetingPlace" placeholder="请输入座谈地点" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="24">
<a-form-item label="联系点建议诉求摘要" v-bind="validateInfos.suggestionSummary" id="FixedContact20260730Form-suggestionSummary" name="suggestionSummary" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.suggestionSummary" :rows="4" placeholder="请输入联系点建议诉求摘要" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xs="24" :md="24">
<a-form-item label="定点联系所领导审批意见" v-bind="validateInfos.leaderOpinion" id="FixedContact20260730Form-leaderOpinion" name="leaderOpinion" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.leaderOpinion" :rows="4" placeholder="请输入定点联系所领导审批意见" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xs="24" :md="24">
<a-form-item label="相关分管所领导批示意见" v-bind="validateInfos.relatedLeaderOpinion" id="FixedContact20260730Form-relatedLeaderOpinion" name="relatedLeaderOpinion" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.relatedLeaderOpinion" :rows="4" placeholder="请输入相关分管所领导批示意见" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="相关分管所领导" v-bind="validateInfos.relatedLeader" id="FixedContact20260730Form-relatedLeader" name="relatedLeader">
<DeptRoleUserSelectDropDown
v-model:value="formData.relatedLeader"
:deptId="PARTY_COMMITTEE_DEPT_ID"
:roleId="CHARGE_LEADER_ROLE_ID"
placeholder="请选择相关分管所领导"
/>
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="申请人" v-bind="validateInfos.applicant" id="FixedContact20260730Form-applicant" name="applicant">
<SzSelectUser v-model:value="formData.applicant" placeholder="请选择申请人" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="主办部门" v-bind="validateInfos.hostDept" id="FixedContact20260730Form-hostDept" name="hostDept">
<SzSelectDept v-model:value="formData.hostDept" placeholder="请选择主办部门" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="协办部门" v-bind="validateInfos.coDept" id="FixedContact20260730Form-coDept" name="coDept">
<SzSelectDept v-model:value="formData.coDept" placeholder="请选择协办部门" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="是否所办领导审批" id="FixedContact20260730Form-isNeedAppro" name="isNeedAppro">
<a-radio-group v-model:value="formData.isNeedAppro">
<a-radio value="1"></a-radio>
<a-radio value="0"></a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="所办领导" v-bind="validateInfos.supDeptleaderid" id="FixedContact20260730Form-supDeptleaderid" name="supDeptleaderid">
<DeptRoleUserSelectDropDown
v-model:value="formData.supDeptleaderid"
:deptId="SUOBAN_DEPT_ID"
:roleId="MEASURE_RES_LEADER_ROLE_ID"
:disabled="formData.isNeedAppro !== '1'"
placeholder="请选择所办领导"
/>
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="督办次数" v-bind="validateInfos.superviseCount" id="FixedContact20260730Form-superviseCount" name="superviseCount">
<a-input-number v-model:value="formData.superviseCount" placeholder="请输入督办次数" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
import SzUserSelect from '/@/components/semri/userComponent/SzUserSelect.vue';
import SzSelectUser from '/@/components/semri/userComponent/SzUserSelect.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../FixedContact20260730.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import DeptRoleUserSelectDropDown from '/@/components/semri/userComponent/DeptRoleUserSelectDropDown.vue';
import { PARTY_COMMITTEE_DEPT_ID, CHARGE_LEADER_ROLE_ID, SUOBAN_DEPT_ID, MEASURE_RES_LEADER_ROLE_ID } from '/@/constant/supervision';
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({}) },
formBpm: { type: Boolean, default: true },
});
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
seqNo: '',
formNo: '',
contactLeader: '',
contactDept: '',
contactTime: '',
meetingPlace: '',
suggestionSummary: '',
leaderOpinion: '',
relatedLeaderOpinion: '',
relatedLeader: '',
applicant: '',
hostDept: '',
coDept: '',
superviseCount: '',
isNeedAppro: '0',
supDeptleaderid: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 7 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 17 } });
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } };
const confirmLoading = ref<boolean>(false);
const validatorRules = reactive({
seqNo: [{ required: true, message: '请输入序号' }],
formNo: [{ required: true, message: '请输入表单编号' }],
contactLeader: [{ required: true, message: '请选择定点联系所领导' }],
contactDept: [{ required: true, message: '请选择联系单位(部门)' }],
contactTime: [{ required: true, message: '请选择联系时间' }],
meetingPlace: [{ required: true, message: '请输入座谈地点' }],
suggestionSummary: [{ required: true, message: '请输入联系点建议诉求摘要' }],
leaderOpinion: [{ required: true, message: '请输入定点联系所领导审批意见' }],
relatedLeaderOpinion: [{ required: true, message: '请输入相关分管所领导批示意见' }],
relatedLeader: [{ required: true, message: '请选择相关分管所领导' }],
applicant: [{ required: true, message: '请选择申请人' }],
hostDept: [{ required: true, message: '请选择主办部门' }],
});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
const formRef = ref();
const disabled = computed(() => {
if (props.formBpm === true) {
if (props.formData.disabled === false) {
return false;
}
return true;
}
return props.formDisabled;
});
const queryByIdUrl = '/bg/fixcontact/fixedContact20260730/queryById';
onMounted(() => {
initFormData();
});
async function initFormData() {
if (props.formBpm === true) {
let params = { id: props.formData.dataId };
const data = await defHttp.get({ url: queryByIdUrl, params });
edit({ ...data });
}
}
function add(record: Record<string, any> = {}) {
edit(record);
}
function edit(record) {
nextTick(() => {
resetFields();
const tmpData = {};
Object.keys(formData).forEach((key) => {
if (record.hasOwnProperty(key)) {
tmpData[key] = record[key];
}
});
Object.assign(formData, tmpData);
});
}
async function submitForm() {
try {
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
let model = formData;
if (model.id) {
isUpdate.value = true;
}
for (let data in model) {
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.antd-modal-form {
padding: 14px;
:deep(.ant-form-item-label) {
padding-bottom: 0;
text-align: left;
}
:deep(.ant-form-item-label > label) {
width: 100%;
justify-content: flex-start;
}
:deep(.ant-form-item-control),
:deep(.ant-form-item-control-input),
:deep(.ant-form-item-control-input-content) {
text-align: left;
}
}
.form-content-row {
:deep(.ant-form-item) {
margin-bottom: 6px;
}
:deep(.ant-input),
:deep(.ant-input-affix-wrapper),
:deep(.ant-input-number),
:deep(.ant-picker),
:deep(.ant-select-selector) {
min-height: 30px;
}
}
</style>
@@ -0,0 +1,64 @@
<template>
<j-modal :title="title" :width="width" :maxHeight="maxHeight" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
<FixedContact20260730Form ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false" />
<template #footer>
<a-button @click="handleCancel">取消</a-button>
<a-button :class="{ 'jee-hidden': disableSubmit }" type="primary" @click="handleOk">确认</a-button>
</template>
</j-modal>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import FixedContact20260730Form from './FixedContact20260730Form.vue';
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
const title = ref<string>('');
const width = ref<number>(1100);
const maxHeight = ref<number>(720);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
function add(record: Record<string, any> = {}) {
title.value = '新增';
visible.value = true;
nextTick(() => {
registerForm.value.add(record);
});
}
function edit(record) {
title.value = disableSubmit.value ? '详情' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.edit(record);
});
}
function handleOk() {
registerForm.value.submitForm();
}
function submitCallback() {
handleCancel();
emit('success');
}
function handleCancel() {
visible.value = false;
}
defineExpose({
add,
edit,
disableSubmit,
});
</script>
<style lang="less">
.jee-hidden {
display: none !important;
}
</style>