实现审批界面样式统一

This commit is contained in:
wsm
2026-05-14 10:09:21 +08:00
parent 8e2f94c33f
commit 7cd932871d
2 changed files with 763 additions and 434 deletions
@@ -0,0 +1,305 @@
<template>
<JModal
title="新增反馈"
: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-form-item label="反馈部门" name="responDeptid">
<j-select-dept v-model:value="formData.responDeptid" :multiple="true" checkStrictly allow-clear @change="handleDeptChange" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="反馈人" name="responPersonid">
<j-select-user v-model:value="formData.responPersonid" allow-clear @change="handleUserChange" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="序号" name="num">
<a-input-number v-model:value="formData.num" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="完成期限" name="deadline">
<a-date-picker v-model:value="formData.deadline" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="措施内容" name="method" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.method" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="成果形式" name="outcomeForm">
<a-input v-model:value="formData.outcomeForm" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="完成状态" name="completionStatus">
<a-input v-model:value="formData.completionStatus" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="进展情况" name="progress" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.progress" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="落实情况" name="implStatus" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.implStatus" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="落实计划" name="completionPlan" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.completionPlan" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="总措施号" name="sumMethodNum">
<a-input v-model:value="formData.sumMethodNum" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="检查情况" name="checkStatus">
<a-input v-model:value="formData.checkStatus" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="监督意见" name="inspectionAdvice" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="formData.inspectionAdvice" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="措施数量" name="measureNum">
<a-input-number v-model:value="formData.measureNum" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="发起类型" name="launchType">
<a-select v-model:value="formData.launchType" placeholder="请选择发起类型" allow-clear>
<a-select-option :value="0">立即发起</a-select-option>
<a-select-option :value="1">周期发起</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期类型" name="intervalType">
<a-select v-model:value="formData.intervalType" placeholder="请选择周期类型" allow-clear>
<a-select-option :value="1"></a-select-option>
<a-select-option :value="2"></a-select-option>
<a-select-option :value="3">两周</a-select-option>
<a-select-option :value="4"></a-select-option>
<a-select-option :value="5"></a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期任务数量" name="startCount">
<a-input-number v-model:value="formData.startCount" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期开始时间" name="startTime">
<a-date-picker v-model:value="formData.startTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" placeholder="请选择周期开始时间" 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"
:bussiness-secret-level="uploadSecretLevel"
:multiple="true"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</JModal>
</template>
<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
import { bgXiSpeakFeedbackSaveOrUpdate } from '../BgXiSpeak.api';
import { useUserStore } from '/@/store/modules/user';
import { buildUUID } from '/@/utils/uuid';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
const emit = defineEmits(['success']);
const { createMessage } = useMessage();
const userStore = useUserStore();
const visible = ref(false);
const saving = ref(false);
const formRef = ref();
const uploadFileRef = ref<InstanceType<typeof SUploadFile> | null>(null);
const uploadSecretLevel = ref(1);
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 formData = reactive<Record<string, any>>({
id: '',
responDeptid: '',
responDeptname: '',
responPersonid: '',
responPersonname: '',
implStatus: '',
completionStatus: '',
completionPlan: '',
mainId: '',
bpmProcessId: '',
num: undefined,
method: '',
deadline: '',
outcomeForm: '',
progress: '',
sumMethodNum: '',
checkStatus: '',
inspectionAdvice: '',
measureNum: undefined,
launchType: undefined,
intervalType: undefined,
startCount: undefined,
startTime: '',
});
const formRules = {
implStatus: [{ required: true, message: '请输入落实情况' }],
};
function resetForm(mainId = '', bpmProcessId = '') {
Object.keys(formData).forEach((key) => {
if (key === 'num' || key === 'measureNum' || key === 'launchType' || key === 'intervalType' || key === 'startCount') {
formData[key] = undefined;
} else {
formData[key] = '';
}
});
formData.mainId = mainId;
formData.bpmProcessId = bpmProcessId;
uploadKey.value += 1;
nextTick(() => formRef.value?.clearValidate?.());
}
function open(mainId: string, secretLevel?: string | number, bpmProcessId = '') {
resetForm(mainId, bpmProcessId);
uploadSecretLevel.value = normalizeSecretLevel(secretLevel);
void applyCurrentUserFeedbackInfo();
visible.value = true;
}
function normalizeSecretLevel(value?: string | number) {
const level = Number(value);
return [1, 2, 3, 4].includes(level) ? level : 1;
}
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;
}
async function getCurrentDepartInfo() {
const userInfo = (userStore.getUserInfo || {}) as Record<string, any>;
const loginDepart = getCurrentLoginDepart();
if (loginDepart) {
return {
id: loginDepart.id || '',
departName: loginDepart.departName || '',
};
}
return {
id: userInfo.departIds || '',
departName: userInfo.departIds_dictText || userInfo.orgCodeTxt || '',
};
}
async function applyCurrentUserFeedbackInfo() {
const userInfo = (userStore.getUserInfo || {}) as Record<string, any>;
formData.responPersonid = userInfo.id || userInfo.userId || '';
formData.responPersonname = userInfo.realname || '';
const departInfo = await getCurrentDepartInfo();
formData.responDeptid = departInfo.id;
formData.responDeptname = departInfo.departName;
}
function handleDeptChange(value, row) {
if (row) {
formData.responDeptname = row.name || '';
}
}
function handleUserChange(value, row) {
if (row) {
formData.responPersonname = row.realname || row.name || '';
}
}
function handleCancel() {
visible.value = false;
}
async function handleOk() {
try {
await formRef.value?.validate?.();
} catch {
return;
}
saving.value = true;
try {
await applyCurrentUserFeedbackInfo();
if (!formData.id && uploadFileRef.value?.hasPendingFiles?.()) {
formData.id = buildUUID();
}
const res = await bgXiSpeakFeedbackSaveOrUpdate({ ...formData }, 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>
@@ -1,17 +1,35 @@
<template>
<a-spin :spinning="loading">
<div class="bg-xispeak-bpm-form">
<a-form class="main-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :model="mainForm">
<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-row :gutter="16">
<a-col :span="24" v-if="hasPermission('xizhishi')">
<a-form-item label="习近平总书记重要讲话指示批示情况" name="speakStatus" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<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="9" v-if="hasPermission('xizhishi')">
<a-form-item label="重要讲话指示批示" name="speakStatus" :labelCol="compactLabelCol" :wrapperCol="compactWrapperCol">
<a-input v-model:value="mainForm.speakStatus" :disabled="isDisabledAuth('xizhishi')" allow-clear />
</a-form-item>
</a-col>
<a-col :xs="24" :md="15">
<a-form-item label="学习传达研究部署" name="status" :labelCol="compactLabelCol" :wrapperCol="compactWrapperCol">
<a-textarea v-model:value="mainForm.status" :auto-size="{ minRows: 1, maxRows: 7 }" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<template v-if="showBaseInfoDetail">
<a-col :span="12" v-if="hasPermission('xitime')">
<a-form-item label="时间" name="time">
<a-date-picker v-model:value="mainForm.time" value-format="YYYY-MM-DD" :disabled="mainDisabled" style="width: 100%" allow-clear />
<a-date-picker v-model:value="mainForm.time" value-format="YYYY-MM-DD" :disabled="isDisabledAuth('xitime')" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
@@ -24,11 +42,6 @@
<a-input v-model:value="mainForm.elmComment" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="学习传达研究部署情况" name="status" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-input v-model:value="mainForm.status" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="牵头部门" name="leadDepartment">
<j-select-dept v-model:value="mainForm.leadDepartment" :disabled="mainDisabled" :multiple="true" checkStrictly allow-clear />
@@ -71,7 +84,7 @@
</a-col>
<a-col :span="24">
<a-form-item label="落实情况" name="implStatus" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="mainForm.implStatus" :rows="3" :disabled="mainDisabled" allow-clear />
<a-textarea v-model:value="mainForm.implStatus" :auto-size="{ minRows: 1, maxRows: 7 }" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
@@ -94,183 +107,95 @@
<j-tree-select v-model:value="mainForm.pid" dict="bg_xi_speak,impl_status,id" pidField="pid" pidValue="0" hasChildField="has_child" :disabled="mainDisabled" allow-clear />
</a-form-item>
</a-col>
</template>
</a-row>
<div v-if="!mainDisabled" class="main-actions">
<a-button type="primary" :loading="savingMain" @click="submitForm">保存主表数据</a-button>
</div>
</a-form>
<a-divider />
<div class="feedback-header">
<div class="feedback-header section-toolbar">
<div class="section-title">反馈信息</div>
<a-button v-if="hasPermission('xifankui')" type="primary" @click="showFeedbackForm = true">新增反馈</a-button>
<a-button v-if="showAddFeedback" class="section-action-button feedback-add-button" type="primary" @click="openFeedbackModal">
<Icon icon="ant-design:plus-outlined" />
新增反馈
</a-button>
</div>
<a-table rowKey="id" size="small" bordered :columns="feedbackColumns" :data-source="feedbackList" :pagination="false" :scroll="{ x: 900 }" />
<a-form
v-if="showFeedbackForm && !mainDisabled"
ref="feedbackFormRef"
class="feedback-form"
:model="feedbackForm"
:rules="feedbackRules"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
<a-table
rowKey="id"
size="small"
bordered
:columns="feedbackColumns"
:data-source="feedbackList"
:pagination="false"
:scroll="{ x: 1400 }"
>
<div class="section-title">新增反馈</div>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="序号" name="num">
<a-input-number v-model:value="feedbackForm.num" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="反馈部门id" name="responDeptid">
<a-input v-model:value="feedbackForm.responDeptid" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="反馈部门名称" name="responDeptname">
<a-input v-model:value="feedbackForm.responDeptname" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="反馈人id" name="responPersonid">
<a-input v-model:value="feedbackForm.responPersonid" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="反馈人姓名" name="responPersonname">
<a-input v-model:value="feedbackForm.responPersonname" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="措施内容" name="method" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="feedbackForm.method" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="完成期限" name="deadline">
<a-date-picker v-model:value="feedbackForm.deadline" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="成果形式" name="outcomeForm">
<a-input v-model:value="feedbackForm.outcomeForm" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="进展情况" name="progress" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="feedbackForm.progress" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="落实情况" name="implStatus" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="feedbackForm.implStatus" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="完成状态" name="completionStatus">
<a-input v-model:value="feedbackForm.completionStatus" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="落实计划" name="completionPlan" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="feedbackForm.completionPlan" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="总措施号" name="sumMethodNum">
<a-input v-model:value="feedbackForm.sumMethodNum" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="检查情况" name="checkStatus">
<a-input v-model:value="feedbackForm.checkStatus" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="监督意见" name="inspectionAdvice" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-textarea v-model:value="feedbackForm.inspectionAdvice" :rows="3" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="措施数量" name="measureNum">
<a-input-number v-model:value="feedbackForm.measureNum" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="发起类型" name="launchType">
<a-select v-model:value="feedbackForm.launchType" placeholder="请选择发起类型" allow-clear>
<a-select-option :value="0">立即发起</a-select-option>
<a-select-option :value="1">周期发起</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期类型" name="intervalType">
<a-select v-model:value="feedbackForm.intervalType" placeholder="请选择周期类型" allow-clear>
<a-select-option :value="1"></a-select-option>
<a-select-option :value="2"></a-select-option>
<a-select-option :value="3">两周</a-select-option>
<a-select-option :value="4"></a-select-option>
<a-select-option :value="5"></a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期任务数量" name="startCount">
<a-input-number v-model:value="feedbackForm.startCount" style="width: 100%" allow-clear />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="周期开始时间" name="startTime">
<a-date-picker v-model:value="feedbackForm.startTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" placeholder="请选择周期开始时间" allow-clear />
</a-form-item>
</a-col>
</a-row>
<div class="main-actions">
<a-button @click="cancelFeedback">取消</a-button>
<a-button type="primary" :loading="savingFeedback" @click="saveFeedback">保存反馈</a-button>
</div>
</a-form>
<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>
<BgXiSpeakBPMFeedbackModal ref="feedbackModalRef" @success="loadFeedbackList" />
<template v-if="showProcessHandle">
<a-divider />
<div class="process-header section-toolbar">
<div class="section-title">流程办理</div>
<a-form class="process-variable-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
</div>
<a-form v-if="showSubApproveUser" class="process-variable-form" labelAlign="left" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="子流程经办人" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-space class="sub-approve-user-row">
<a-input
<a-col :span="12">
<a-form-item label="是否办结" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<a-radio-group v-model:value="isEnd" :disabled="savingSubApproveUser">
<a-radio :value="0">分配部门经办人</a-radio>
<a-radio :value="1">办结</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
<a-col v-if="showSubApproveUserSelector" :span="12">
<a-form-item label="部门经办人" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
<j-select-user
v-model:value="subApproveUser"
placeholder="输入username,多个用英文逗号分隔"
allow-clear
:disabled="savingSubApproveUser"
allow-clear
/>
<a-button type="primary" :loading="savingSubApproveUser" @click="saveSubApproveUserVariable">保存经办人</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<TaskHandleInnerContent :form-data="formData" :claim="claim" @success="handleProcessSuccess" @claimSuccess="handleClaimSuccess" />
<TaskHandleInnerContent
:form-data="formData"
:claim="claim"
:beforeHandle="saveMainFormBeforeProcessHandle"
@success="handleProcessSuccess"
@claimSuccess="handleClaimSuccess"
/>
</template>
</div>
</a-spin>
</template>
<script lang="ts" setup>
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue';
import { bgXiSpeakFeedbackList, bgXiSpeakFeedbackSaveOrUpdate, saveBpmForm, setProcessVariable } from '../BgXiSpeak.api';
import Icon from '/@/components/Icon/index';
import { bgXiSpeakFeedbackList, saveBpmForm, setProcessVariable } from '../BgXiSpeak.api';
import { usePermission } from '/@/hooks/web/usePermission';
import TaskHandleInnerContent from '/@/views/super/bpm/process/personalOffice/myHandleTask/content/TaskHandleInnerContent.vue';
import BgXiSpeakBPMFeedbackModal from './BgXiSpeakBPMFeedbackModal.vue';
import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
const { isDisabledAuth, hasPermission, initBpmFormData } = usePermission();
@@ -282,6 +207,8 @@
});
initBpmFormData(props.formData);
console.log("@props.formData", props.formData);
console.log("@props", props);
const emit = defineEmits(['ok', 'success', 'claimSuccess']);
const { createMessage } = useMessage();
@@ -291,15 +218,17 @@
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 compactLabelCol = { xs: { span: 24 }, sm: { span: 5 } };
const compactWrapperCol = { xs: { span: 24 }, sm: { span: 19 } };
const feedbackFormRef = ref();
const feedbackModalRef = ref();
const loading = ref(false);
const savingMain = ref(false);
const savingFeedback = ref(false);
const savingSubApproveUser = ref(false);
const showFeedbackForm = ref(false);
const showBaseInfoDetail = ref(false);
const feedbackList = ref<any[]>([]);
const subApproveUser = ref('');
const isEnd = ref(0);
const mainForm = reactive<Record<string, any>>({
id: '',
@@ -329,106 +258,15 @@
supervisionCount: undefined,
});
const feedbackForm = reactive<Record<string, any>>({
id: '',
responDeptid: '',
responDeptname: '',
responPersonid: '',
responPersonname: '',
implStatus: '',
completionStatus: '',
completionPlan: '',
mainId: '',
num: undefined,
method: '',
deadline: '',
outcomeForm: '',
progress: '',
sumMethodNum: '',
checkStatus: '',
inspectionAdvice: '',
measureNum: undefined,
launchType: undefined,
intervalType: undefined,
startCount: undefined,
startTime: '',
});
const feedbackRules = {
implStatus: [{ required: true, message: '请输入落实情况' }],
};
const feedbackColumns = [
{ title: '序号', dataIndex: 'num', align: 'center', width: 60 },
{ title: '反馈部门名称', dataIndex: 'responDeptname', align: 'center', width: 120 },
{ title: '反馈人姓名', dataIndex: 'responPersonname', align: 'center', width: 100 },
{ title: '反馈部门名称', dataIndex: 'responDeptname', align: 'center', width: 140 },
{ title: '反馈人姓名', dataIndex: 'responPersonname', align: 'center', width: 120 },
{ title: '措施内容', dataIndex: 'method', align: 'left', width: 200 },
{
title: '完成期限',
dataIndex: 'deadline',
align: 'center',
width: 120,
customRender: ({ text }) => {
if (!text) return '';
if (text instanceof Date) {
const y = text.getFullYear();
const m = String(text.getMonth() + 1).padStart(2, '0');
const d = String(text.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
}
return String(text).substr(0, 10);
},
},
{ title: '成果形式', dataIndex: 'outcomeForm', align: 'center', width: 100 },
{ title: '完成状态', dataIndex: 'completionStatus', align: 'center', width: 100 },
{ title: '进展情况', dataIndex: 'progress', align: 'left', width: 200 },
{ title: '落实情况', dataIndex: 'implStatus', align: 'left', width: 200 },
{ title: '完成状态', dataIndex: 'completionStatus', align: 'center', width: 100 },
{ title: '落实计划', dataIndex: 'completionPlan', align: 'left', width: 200 },
{ title: '总措施号', dataIndex: 'sumMethodNum', align: 'center', width: 100 },
{ title: '检查情况', dataIndex: 'checkStatus', align: 'center', width: 120 },
{ title: '监督意见', dataIndex: 'inspectionAdvice', align: 'left', width: 200 },
{ title: '措施数量', dataIndex: 'measureNum', align: 'center', width: 80 },
{
title: '发起类型',
dataIndex: 'launchType',
align: 'center',
width: 100,
customRender: ({ text }) => {
if (text === 0) return '立即发起';
if (text === 1) return '周期发起';
return text || '';
},
},
{
title: '周期类型',
dataIndex: 'intervalType',
align: 'center',
width: 80,
customRender: ({ text }) => {
const map = { 1: '日', 2: '周', 3: '两周', 4: '月', 5: '季' };
return map[text] || text || '';
},
},
{ title: '周期任务数量', dataIndex: 'startCount', align: 'center', width: 100 },
{
title: '周期开始时间',
dataIndex: 'startTime',
align: 'center',
width: 160,
customRender: ({ text }) => {
if (!text) return '';
if (text instanceof Date) {
const y = text.getFullYear();
const m = String(text.getMonth() + 1).padStart(2, '0');
const d = String(text.getDate()).padStart(2, '0');
const h = String(text.getHours()).padStart(2, '0');
const min = String(text.getMinutes()).padStart(2, '0');
const s = String(text.getSeconds()).padStart(2, '0');
return `${y}-${m}-${d} ${h}:${min}:${s}`;
}
return String(text);
},
},
{ title: '附件', dataIndex: 'id', key: 'attachments', align: 'left', width: 340 },
];
const mainDisabled = computed(() => {
@@ -437,13 +275,22 @@
}
return props.formDisabled;
});
const showProcessHandle = computed(() => props.formBpm && !!props.formData?.taskId);
const showAddFeedback = computed(() => String(props.formData?.extendUrlParams?.addfeedback ?? '') === '1');
const showSubApproveUser = computed(() => String(props.formData?.extendUrlParams?.selectuser ?? '') === '1');
const showSubApproveUserSelector = computed(() => showSubApproveUser.value && String(isEnd.value) !== '1');
const processInfo = computed(() => ({
taskId: props.formData?.taskId,
taskDefKey: props.formData?.taskDefKey,
processInstanceId: props.formData?.procInsId || props.formData?.processInstanceId || props.formData?.vars?.BPM_INST_ID,
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,
}));
@@ -453,15 +300,24 @@
});
watch(
() => props.formData?.dataId,
[() => props.formData?.dataId, () => processInfo.value.processInstanceId],
() => initFormData()
);
watch(
() => props.formData?.vars?.isEnd,
(value) => {
isEnd.value = String(value ?? '0') === '1' ? 1 : 0;
},
{ immediate: true }
);
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 } });
@@ -479,132 +335,126 @@
}
async function loadFeedbackList() {
if (!mainForm.id) {
const bpmProcessId = processInfo.value.processInstanceId;
if (!mainForm.id || !bpmProcessId) {
feedbackList.value = [];
return;
}
const res = await bgXiSpeakFeedbackList({ mainId: mainForm.id, pageNo: 1, pageSize: 999 });
const res = await bgXiSpeakFeedbackList({ mainId: mainForm.id, bpmProcessId, pageNo: 1, pageSize: 999 });
feedbackList.value = res?.records || res?.result?.records || [];
}
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;
console.log('BgXiSpeak BPM process info', { ...processInfo.value, processInstanceId });
const res = await saveBpmForm({
processInstanceId,
varField: 'json_data',
formData: { ...mainForm },
});
if (res.success) {
if (processInstanceId && (mainForm.needSdwApproval != null || mainForm.sdwLeaderList)) {
const varTasks = [];
if (mainForm.needSdwApproval != null) {
varTasks.push(
setProcessVariable({
processInstanceId,
taskId: processInfo.value.taskId,
local: true,
varField: 'needSdwApproval',
varVal: String(mainForm.needSdwApproval),
})
);
}
if (mainForm.sdwLeaderList) {
varTasks.push(
setProcessVariable({
processInstanceId,
taskId: processInfo.value.taskId,
local: true,
varField: 'sdwLeaderList',
varVal: mainForm.sdwLeaderList,
})
);
}
if (varTasks.length > 0) {
await Promise.all(varTasks);
}
}
if (showMessage) {
createMessage.success(res.message || '保存成功');
emit('ok');
} else {
createMessage.warning(res.message || '保存失败');
}
if (emitOk) {
emit('ok');
}
return true;
}
createMessage.warning(res.message || '保存失败');
return false;
} catch (error) {
createMessage.warning('保存失败');
return false;
} finally {
savingMain.value = false;
}
}
function cancelFeedback() {
showFeedbackForm.value = false;
resetFeedbackForm();
async function saveMainFormBeforeProcessHandle() {
if (!mainDisabled.value) {
const mainSaved = await saveMainForm({ showMessage: false, emitOk: false });
if (!mainSaved) {
return false;
}
}
if (showSubApproveUser.value) {
return saveSubApproveUserVariable({ showSuccessMessage: false });
}
return true;
}
function resetFeedbackForm() {
Object.keys(feedbackForm).forEach((key) => {
if (key === 'num' || key === 'measureNum' || key === 'launchType' || key === 'intervalType' || key === 'startCount') {
feedbackForm[key] = undefined;
} else {
feedbackForm[key] = '';
}
});
feedbackForm.mainId = mainForm.id;
nextTick(() => feedbackFormRef.value?.clearValidate?.());
}
async function saveFeedback() {
function openFeedbackModal() {
if (!mainForm.id) {
createMessage.warning('主表数据不存在,无法新增反馈');
return;
}
await feedbackFormRef.value?.validate?.();
savingFeedback.value = true;
try {
feedbackForm.mainId = mainForm.id;
const res = await bgXiSpeakFeedbackSaveOrUpdate({ ...feedbackForm }, false);
if (res.success) {
createMessage.success(res.message || '保存成功');
cancelFeedback();
await loadFeedbackList();
} else {
createMessage.warning(res.message || '保存失败');
}
} finally {
savingFeedback.value = false;
const processInstanceId = processInfo.value.processInstanceId;
if (!processInstanceId) {
createMessage.warning('流程实例ID不能为空,无法新增反馈');
return;
}
feedbackModalRef.value?.open(mainForm.id, undefined, processInstanceId);
}
async function saveSubApproveUserVariable() {
async function saveSubApproveUserVariable(options: { showSuccessMessage?: boolean } = {}) {
const { showSuccessMessage = true } = options;
const processInstanceId = processInfo.value.processInstanceId;
const isEndValue = String(isEnd.value);
const usernameValue = normalizeUsernameList(subApproveUser.value);
if (!processInstanceId) {
createMessage.warning('流程实例ID不能为空');
return;
return false;
}
if (!usernameValue) {
createMessage.warning('请输入子流程经办人username');
return;
if (isEndValue !== '1' && !usernameValue) {
createMessage.warning('请选择部门经办人');
return false;
}
savingSubApproveUser.value = true;
try {
const res = await setProcessVariable({
processInstanceId,
taskId: processInfo.value.taskId,
local: true,
varField: 'subApproveUser',
varVal: usernameValue,
});
if (res.success) {
createMessage.success(res.message || '保存成功');
} else {
createMessage.warning(res.message || '保存失败');
const isEndResult = await saveProcessVariable('isEnd', isEndValue);
if (!isEndResult?.success) {
createMessage.warning(isEndResult.message || '保存失败');
return false;
}
if (isEndValue !== '1') {
const subApproveUserResult = await saveProcessVariable('subApproveUser', usernameValue);
if (!subApproveUserResult?.success) {
createMessage.warning(subApproveUserResult.message || '保存失败');
return false;
}
}
if (showSuccessMessage) {
createMessage.success('保存成功');
}
return true;
} catch (error) {
createMessage.warning('保存失败');
return false;
} finally {
savingSubApproveUser.value = false;
}
}
function saveProcessVariable(varField: string, varVal: any) {
return setProcessVariable({
processInstanceId: processInfo.value.processInstanceId,
taskId: processInfo.value.taskId,
local: true,
varField,
varVal,
});
}
function normalizeUsernameList(value: string) {
return String(value || '')
.split(',')
@@ -630,39 +480,193 @@
<style lang="less" scoped>
.bg-xispeak-bpm-form {
padding: 12px 16px 20px;
padding: 8px 12px 14px;
}
.main-form,
.feedback-form {
.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: 12px;
margin-bottom: 8px;
padding-left: 8px;
border-left: 3px solid #1677ff;
color: #1f2937;
font-size: 15px;
font-size: 14px;
font-weight: 600;
line-height: 18px;
line-height: 16px;
}
.feedback-header {
.section-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
margin-bottom: 8px;
padding: 6px 10px;
background: #f6fbff;
border: 1px solid #d6e8ff;
border-radius: 6px;
.section-title {
margin-bottom: 0;
}
.feedback-form {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
.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-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-affix-wrapper-disabled:hover),
:deep(.ant-input-affix-wrapper-disabled:focus),
:deep(.ant-input-affix-wrapper-disabled-focused),
: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-affix-wrapper-disabled),
:deep(textarea.ant-input[disabled]) {
padding-left: 0 !important;
padding-right: 0 !important;
}
:deep(.ant-input-affix-wrapper-disabled .ant-input) {
background: transparent !important;
color: #1f2937 !important;
cursor: default !important;
}
:deep(.ant-input[disabled]::placeholder),
:deep(.ant-input-disabled::placeholder),
:deep(.ant-input-affix-wrapper-disabled .ant-input::placeholder) {
color: #9ca3af !important;
}
:deep(.ant-picker-disabled input),
:deep(.ant-select-disabled .ant-select-selection-item),
:deep(.ant-select-disabled .ant-select-selection-item span),
:deep(.ant-select-disabled .ant-select-selection-placeholder),
:deep(.ant-select-disabled .ant-select-selection-placeholder span) {
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),
:deep(.ant-select-disabled *),
:deep(.ant-select-disabled.ant-select-outlined),
:deep(.ant-select-disabled.ant-select-outlined .ant-select-selector) {
color: #1f2937 !important;
-webkit-text-fill-color: #1f2937 !important;
opacity: 1 !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-select-disabled .ant-select-clear) {
display: none;
}
}
.feedback-header {
margin-bottom: 8px;
.feedback-add-button {
min-width: 104px;
}
}
.process-variable-form {
margin-bottom: 12px;
margin-bottom: 8px;
}
.sub-approve-user-row {
@@ -675,10 +679,30 @@
}
}
.main-actions {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 8px;
:deep(.ant-divider-horizontal) {
margin: 10px 0;
}
.feedback-attachment-list {
min-width: 300px;
:deep(.file-list-wrapper) {
min-height: auto;
padding: 8px;
}
: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;
}
}
</style>