实现审批界面样式统一
This commit is contained in:
wsm
@@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user