RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新采购申请前端给审核时用

Browse Source
This commit is contained in:
吴红兵
2026-02-08 21:12:20 +08:00
parent 496116d7f8
commit f209700fa9
2 changed files with 307 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
src/views/finance/purchasingrequisition/add.vue
View File

@@ -16,11 +16,11 @@
:model="dataForm"
:rules="dataRules"
label-width="150px"
:disabled="isViewMode"
:disabled="isViewMode || flowFormDisabled"
class="compact-form">
<!-- 第一步：基本信息（查看模式下一并展示，新增/编辑按步骤切换） -->
<div v-show="isViewMode || currentStep === 0">
<!-- 第一步：基本信息（查看/流程嵌入时单页展示，否则按步骤切换） -->
<div v-show="isViewMode || isFlowEmbed || currentStep === 0">
<el-row :gutter="24">
<el-col :span="12" class="mb16">
<el-form-item label="采购项目名称" prop="projectName">
@@ -131,8 +131,8 @@
</el-row>
</div>
<!-- 第二步：采购详情（查看模式下一并展示，新增/编辑按步骤切换） -->
<div v-show="isViewMode || currentStep === 1">
<!-- 第二步：采购详情（查看/流程嵌入时单页展示，否则按步骤切换） -->
<div v-show="isViewMode || isFlowEmbed || currentStep === 1">
<!-- 分支一：部门自行采购（单行两列流式布局，条件显示的项自动填满两列） -->
<div class="mb20" v-if="isDeptPurchase">
<div class="step-title mb16">部门自行采购</div>
@@ -384,7 +384,7 @@
</div>
</div>
<el-row :gutter="24" v-if="currentStep === 1">
<el-row :gutter="24" v-if="currentStep === 1 || isFlowEmbed">
<el-col :span="12" class="mb16">
<el-form-item label="备注" prop="remark" class="mb16">
<el-input
@@ -398,24 +398,24 @@
</el-row>
</el-form>
<!-- 操作按钮 -->
<!-- 操作按钮（流程嵌入时隐藏取消/返回，由流程页处理） -->
<div class="form-footer">
<template v-if="isViewMode">
<el-button @click="handleCancel">返回</el-button>
<el-button v-if="!isFlowEmbed" @click="handleCancel">返回</el-button>
</template>
<template v-else>
<el-button @click="handleCancel">取消</el-button>
<el-button v-if="currentStep > 0" @click="prevStep">上一步</el-button>
<el-button v-if="!isFlowEmbed" @click="handleCancel">取消</el-button>
<el-button v-if="!isFlowEmbed && currentStep > 0" @click="prevStep">上一步</el-button>
<el-button
v-if="currentStep < 1"
v-if="!isFlowEmbed && currentStep < 1"
type="primary"
@click="nextStep"
:disabled="loading">
下一步
</el-button>
<template v-if="currentStep === 1">
<template v-if="currentStep === 1 || isFlowEmbed">
<el-button
v-if="!isEditMode"
v-if="!isEditMode && !flowSubmitDisabled"
type="warning"
@click="handleTempStore"
:disabled="loading">
@@ -449,20 +449,56 @@ import other from '/@/utils/other';
import { Document, Download } from '@element-plus/icons-vue';
import { fetchList as getBusinessDeptList } from '/@/api/purchase/purchasingBusinessDept';
import { getPage as getSchoolLeaderPage } from '/@/api/finance/purchasingschoolleader';
import * as orderVue from '/@/api/order/order-key-vue';
// 兼容流程 dynamic-link 引用：接收 currJob / currElTab，并支持 handleJob 事件
const props = defineProps({
currJob: { type: Object, default: null },
currElTab: { type: Object, default: null }
});
const emit = defineEmits(['handleJob']);
// 路由
const router = useRouter();
const route = useRoute();
// 模式：add | edit | view（来自 URL 参数，用于 form 弹窗内 iframe 打开）
const isEditMode = computed(() => String(route.query.mode) === 'edit');
const isViewMode = computed(() => String(route.query.mode) === 'view');
/** 是否被流程 handle 页通过 dynamic-link 嵌入 */
const isFlowEmbed = computed(() => !!props.currJob);
/** 当前使用的申请单 ID：优先来自流程 currJob.orderId，否则来自 route.query.id */
const effectiveQueryId = computed(() => {
if (props.currJob?.orderId != null && props.currJob?.orderId !== '') {
return String(props.currJob.orderId);
}
const q = route.query.id;
return q ? String(q) : '';
});
// 模式：add | edit | view（URL 参数 或 流程嵌入时的 currJob/currElTab）
const isEditMode = computed(() => {
if (isFlowEmbed.value && props.currElTab) {
return !!effectiveQueryId.value && props.currElTab.isFormEdit !== '0' && !props.currJob?.hiJob;
}
return String(route.query.mode) === 'edit';
});
const isViewMode = computed(() => {
if (isFlowEmbed.value && props.currJob) {
if (props.currJob.hiJob) return true;
if (props.currElTab?.isFormEdit === '0') return true;
return false;
}
return String(route.query.mode) === 'view';
});
const pageTitle = computed(() => {
if (isViewMode.value) return '查看采购申请';
if (isEditMode.value) return '编辑采购申请';
return '新增采购申请';
});
/** 流程嵌入时，由 currElTabIsView 控制的只读/禁用提交 */
const flowFormDisabled = ref(false);
const flowSubmitDisabled = ref(false);
// 定义变量内容
const formRef = ref();
const currentStep = ref(0);
@@ -999,7 +1035,10 @@ const prevStep = () => {
// 取消
const handleCancel = () => {
// 如果是在 iframe 中，向父窗口发送关闭消息
// 流程嵌入时由流程页处理返回，不 postMessage
if (isFlowEmbed.value) {
return;
}
if (window.parent !== window) {
window.parent.postMessage({
type: 'purchasingrequisition:close'
@@ -1009,6 +1048,151 @@ const handleCancel = () => {
}
};
/** 根据申请单 ID 加载详情并回填表单（供 URL 与流程嵌入共用） */
async function loadDetail(applyId: string | number) {
if (!applyId) return;
try {
const res = await getObj(Number(applyId));
const detail = res?.data;
if (detail && typeof detail === 'object') {
Object.assign(dataForm, {
id: detail.id ?? dataForm.id,
projectName: detail.projectName ?? '',
projectType: detail.projectType ?? '',
projectContent: detail.projectContent ?? '',
applyDate: detail.applyDate ?? '',
fundSource: detail.fundSource ?? '',
budget: detail.budget != null ? Number(detail.budget) : null,
isCentralized: detail.isCentralized != null ? String(detail.isCentralized) : '',
isSpecial: detail.isSpecial != null ? String(detail.isSpecial) : '',
purchaseMode: detail.purchaseMode ?? '',
purchaseType: detail.purchaseType ?? '',
purchaseTypeUnion: detail.purchaseTypeUnion ?? '',
categoryCode: detail.categoryCode ?? '',
remark: detail.remark ?? '',
status: detail.status ?? '',
businessNegotiationTable: detail.businessNegotiationTable ?? '',
marketPurchaseMinutes: detail.marketPurchaseMinutes ?? '',
onlineMallMaterials: detail.onlineMallMaterials ?? '',
inquiryTemplate: detail.inquiryTemplate ?? '',
entrustCenterType: detail.entrustCenterType ?? '',
hasSupplier: detail.hasSupplier != null && detail.hasSupplier !== '' ? detail.hasSupplier : '0',
suppliers: detail.suppliers ?? '',
serviceDirectSelect: detail.serviceDirectSelect ?? '',
servicePublicSelect: detail.servicePublicSelect ?? '',
purchaseRequirementTemplate: detail.purchaseRequirementTemplate ?? '',
serviceInviteSelect: detail.serviceInviteSelect ?? '',
servicePublicSelectAuto: detail.servicePublicSelectAuto ?? '',
purchaseRequirement: detail.purchaseRequirement ?? '',
meetingMinutes: detail.meetingMinutes ?? '',
feasibilityReport: detail.feasibilityReport ?? '',
meetingMinutesUrgent: detail.meetingMinutesUrgent ?? '',
meetingMinutesSingle: detail.meetingMinutesSingle ?? '',
meetingMinutesImport: detail.meetingMinutesImport ?? '',
singleSourceProof: detail.singleSourceProof ?? '',
importApplication: detail.importApplication ?? '',
governmentPurchaseIntent: detail.governmentPurchaseIntent ?? '',
servicePublicSelectSchool: detail.servicePublicSelectSchool ?? '',
serviceInviteSelectSchool: detail.serviceInviteSelectSchool ?? '',
servicePublicSelectSchoolAuto: detail.servicePublicSelectSchoolAuto ?? '',
deptClassifyUserId: detail.deptClassifyUserId ?? '',
deptClassifyName: detail.deptClassifyName ?? '',
schoolLeaderUserId: detail.schoolLeaderUserId ?? '',
schoolLeaderName: detail.schoolLeaderName ?? '',
otherMaterials: detail.otherMaterials ?? '',
});
setCategoryCodePath();
if (dataForm.budget != null) {
budgetInputValue.value = dataForm.budget;
budgetUnit.value = 'yuan';
}
currentStep.value = 0;
try {
const fileRes = await getApplyFiles(String(applyId));
const fileList: { id: string; fileType: string; fileTitle?: string }[] = fileRes?.data ?? [];
if (Array.isArray(fileList) && fileList.length > 0) {
const byType: Record<string, { id: string; fileTitle?: string }[]> = {};
fileList.forEach((f: any) => {
const t = String(f.fileType || '');
if (!byType[t]) byType[t] = [];
byType[t].push({ id: f.id, fileTitle: f.fileTitle });
});
Object.entries(byType).forEach(([fileType, files]) => {
const fields = FILE_TYPE_TO_FIELDS[fileType];
if (!fields || fields.length === 0) return;
const fileItems = files.map((f) => ({ id: f.id, name: f.fileTitle || '附件' }));
if (fields.length === 1) {
(dataForm as any)[fields[0]] = fileItems;
} else {
fields.forEach((field) => {
(dataForm as any)[field] = fileItems.length ? [...fileItems] : '';
});
}
});
}
} catch (err) {
console.error('加载采购申请附件失败', err);
}
}
} catch (e) {
console.error('加载采购申请详情失败', e);
useMessage().error('加载详情失败');
}
}
/** 流程嵌入时提供给 orderVue.currElTabIsView 的 methods（只读/禁用提交） */
const flowMethods = {
disableForm(disabled?: boolean) {
flowFormDisabled.value = !!disabled;
},
disableSubmit() {
flowSubmitDisabled.value = true;
},
enableSubmit() {
flowSubmitDisabled.value = false;
},
};
/** 流程嵌入时的“保存”回调：校验后调用 editObj，并通知流程已保存 */
async function flowSubmitForm() {
if (loading.value) return;
loading.value = true;
try {
const valid = await formRef.value?.validate().catch(() => false);
if (!valid) {
loading.value = false;
return;
}
const submitData: any = { ...dataForm };
const fileFields = [
'businessNegotiationTable', 'marketPurchaseMinutes', 'onlineMallMaterials', 'inquiryTemplate',
'serviceDirectSelect', 'servicePublicSelect', 'purchaseRequirementTemplate',
'serviceInviteSelect', 'servicePublicSelectAuto', 'purchaseRequirement',
'meetingMinutes', 'feasibilityReport', 'meetingMinutesUrgent',
'meetingMinutesSingle', 'meetingMinutesImport', 'singleSourceProof', 'importApplication',
'governmentPurchaseIntent', 'servicePublicSelectSchool', 'serviceInviteSelectSchool',
'servicePublicSelectSchoolAuto', 'otherMaterials'
];
const allFileIds: string[] = [];
fileFields.forEach(field => {
if (submitData[field]) {
allFileIds.push(...getFileIdsArray(submitData[field]));
delete submitData[field];
}
});
if (allFileIds.length > 0) submitData.fileIds = allFileIds;
await editObj(submitData);
useMessage().success('保存成功');
if (props.currJob && props.currElTab?.id) {
orderVue.currElTabIsSave(props.currJob, props.currElTab.id, true, emit);
}
} catch (err: any) {
if (!err?.msg) useMessage().error('保存失败');
} finally {
loading.value = false;
}
}
// 获取品目树形数据
const getCategoryTreeData = async () => {
try {
@@ -1427,18 +1611,17 @@ const handleTempStore = async () => {
await tempStore(submitData);
useMessage().success('暂存成功');
// 如果是在 iframe 中，向父窗口发送消息
if (window.parent !== window) {
window.parent.postMessage({
type: 'purchasingrequisition:submitSuccess'
}, '*');
} else {
router.push('/finance/purchasingrequisition');
// 流程嵌入时不关闭、不跳转
if (!isFlowEmbed.value) {
if (window.parent !== window) {
window.parent.postMessage({
type: 'purchasingrequisition:submitSuccess'
}, '*');
} else {
router.push('/finance/purchasingrequisition');
}
}
} catch (err: any) {
// 全局拦截器已经显示了错误提示，这里不需要再次显示
// 只有当错误没有 msg 时才显示默认错误提示
if (!err?.msg) {
useMessage().error('暂存失败');
}
@@ -1545,6 +1728,17 @@ watch(() => categoryTreeData.value, () => {
}
}, { deep: true });
// 流程嵌入：切换工单时重新加载该 tab 对应的申请单
watch(
() => props.currJob?.id,
async (newVal, oldVal) => {
if (!isFlowEmbed.value || !props.currJob?.orderId) return;
if (newVal !== oldVal) {
await loadDetail(props.currJob.orderId);
}
}
);
// 初始化
onMounted(async () => {
// 检测是否在 iframe 中，如果是，则修改相关元素的 overflow 样式以支持滚动
@@ -1584,101 +1778,16 @@ onMounted(async () => {
getSchoolLeaderListData(),
]);
// 编辑/查看：从 URL 参数 id 加载详情
const queryId = route.query.id;
// 编辑/查看：从 URL 或流程 currJob.orderId 加载详情
const queryId = effectiveQueryId.value;
if (queryId) {
try {
const res = await getObj(Number(queryId));
const detail = res?.data;
if (detail && typeof detail === 'object') {
Object.assign(dataForm, {
id: detail.id ?? dataForm.id,
projectName: detail.projectName ?? '',
projectType: detail.projectType ?? '',
projectContent: detail.projectContent ?? '',
applyDate: detail.applyDate ?? '',
fundSource: detail.fundSource ?? '',
budget: detail.budget != null ? Number(detail.budget) : null,
isCentralized: detail.isCentralized != null ? String(detail.isCentralized) : '',
isSpecial: detail.isSpecial != null ? String(detail.isSpecial) : '',
purchaseMode: detail.purchaseMode ?? '',
purchaseType: detail.purchaseType ?? '',
purchaseTypeUnion: detail.purchaseTypeUnion ?? '',
categoryCode: detail.categoryCode ?? '',
remark: detail.remark ?? '',
status: detail.status ?? '',
businessNegotiationTable: detail.businessNegotiationTable ?? '',
marketPurchaseMinutes: detail.marketPurchaseMinutes ?? '',
onlineMallMaterials: detail.onlineMallMaterials ?? '',
inquiryTemplate: detail.inquiryTemplate ?? '',
entrustCenterType: detail.entrustCenterType ?? '',
hasSupplier: detail.hasSupplier != null && detail.hasSupplier !== '' ? detail.hasSupplier : '0',
suppliers: detail.suppliers ?? '',
serviceDirectSelect: detail.serviceDirectSelect ?? '',
servicePublicSelect: detail.servicePublicSelect ?? '',
purchaseRequirementTemplate: detail.purchaseRequirementTemplate ?? '',
suppliers: detail.suppliers ?? '',
serviceInviteSelect: detail.serviceInviteSelect ?? '',
servicePublicSelectAuto: detail.servicePublicSelectAuto ?? '',
purchaseRequirement: detail.purchaseRequirement ?? '',
meetingMinutes: detail.meetingMinutes ?? '',
feasibilityReport: detail.feasibilityReport ?? '',
meetingMinutesUrgent: detail.meetingMinutesUrgent ?? '',
meetingMinutesSingle: detail.meetingMinutesSingle ?? '',
meetingMinutesImport: detail.meetingMinutesImport ?? '',
singleSourceProof: detail.singleSourceProof ?? '',
importApplication: detail.importApplication ?? '',
governmentPurchaseIntent: detail.governmentPurchaseIntent ?? '',
servicePublicSelectSchool: detail.servicePublicSelectSchool ?? '',
suppliers: detail.suppliers ?? '',
serviceInviteSelectSchool: detail.serviceInviteSelectSchool ?? '',
servicePublicSelectSchoolAuto: detail.servicePublicSelectSchoolAuto ?? '',
deptClassifyUserId: detail.deptClassifyUserId ?? '',
deptClassifyName: detail.deptClassifyName ?? '',
schoolLeaderUserId: detail.schoolLeaderUserId ?? '',
schoolLeaderName: detail.schoolLeaderName ?? '',
otherMaterials: detail.otherMaterials ?? '',
});
setCategoryCodePath();
if (dataForm.budget != null) {
budgetInputValue.value = dataForm.budget;
budgetUnit.value = 'yuan';
}
// 编辑时默认显示第一步，用户可自行切换到第二步查看
currentStep.value = 0;
// 加载已上传附件并按 fileType 回填到对应表单项
try {
const fileRes = await getApplyFiles(String(queryId));
const fileList: { id: string; fileType: string; fileTitle?: string }[] = fileRes?.data ?? [];
if (Array.isArray(fileList) && fileList.length > 0) {
const byType: Record<string, { id: string; fileTitle?: string }[]> = {};
fileList.forEach((f: any) => {
const t = String(f.fileType || '');
if (!byType[t]) byType[t] = [];
byType[t].push({ id: f.id, fileTitle: f.fileTitle });
});
Object.entries(byType).forEach(([fileType, files]) => {
const fields = FILE_TYPE_TO_FIELDS[fileType];
if (!fields || fields.length === 0) return;
const fileItems = files.map((f) => ({ id: f.id, name: f.fileTitle || '附件' }));
if (fields.length === 1) {
(dataForm as any)[fields[0]] = fileItems;
} else {
// 同类型多字段（如 120 采购需求表）：后端不区分具体子项，将同一批文件回填到所有对应字段，当前展示的“需求文件”才能正确显示
fields.forEach((field) => {
(dataForm as any)[field] = fileItems.length ? [...fileItems] : '';
});
}
});
}
} catch (err) {
console.error('加载采购申请附件失败', err);
}
}
} catch (e) {
console.error('加载采购申请详情失败', e);
useMessage().error('加载详情失败');
}
await loadDetail(queryId);
}
// 流程嵌入：注册 tab 显隐与保存回调，供审批页调用
if (isFlowEmbed.value && props.currJob && props.currElTab?.id) {
orderVue.currElTabIsExist(props.currJob, props.currElTab.id);
await orderVue.currElTabIsView(flowMethods, props.currJob, props.currElTab.id, flowSubmitForm);
}
// 新增模式下设置默认值（只有在没有 id 的情况下才设置）

83
src/views/finance/purchasingrequisition/index.vue
View File

@@ -184,13 +184,48 @@
<span style="margin-left: 4px">审核状态</span>
</template>
<template #default="scope">
<el-tag v-if="scope.row.status === '-2'" type="info">撤回</el-tag>
<el-tag v-else-if="scope.row.status === '-1'" type="warning">暂存</el-tag>
<el-tag v-else-if="scope.row.status === '0'" type="primary">运行中</el-tag>
<el-tag v-else-if="scope.row.status === '1'" type="success">完成</el-tag>
<el-tag v-else-if="scope.row.status === '2'" type="danger">作废</el-tag>
<el-tag v-else-if="scope.row.status === '3'" type="info">终止</el-tag>
<span v-else>-</span>
<el-tooltip v-if="scope.row.flowInstId" content="点击查看审批过程" placement="top">
<el-tag
v-if="scope.row.status === '-2'"
type="info"
class="status-tag-clickable"
@click="handleShowFlowComment(scope.row)">撤回</el-tag>
<el-tag
v-else-if="scope.row.status === '-1'"
type="warning"
class="status-tag-clickable"
@click="handleShowFlowComment(scope.row)">暂存</el-tag>
<el-tag
v-else-if="scope.row.status === '0'"
type="primary"
class="status-tag-clickable"
@click="handleShowFlowComment(scope.row)">运行中</el-tag>
<el-tag
v-else-if="scope.row.status === '1'"
type="success"
class="status-tag-clickable"
@click="handleShowFlowComment(scope.row)">完成</el-tag>
<el-tag
v-else-if="scope.row.status === '2'"
type="danger"
class="status-tag-clickable"
@click="handleShowFlowComment(scope.row)">作废</el-tag>
<el-tag
v-else-if="scope.row.status === '3'"
type="info"
class="status-tag-clickable"
@click="handleShowFlowComment(scope.row)">终止</el-tag>
<span v-else>-</span>
</el-tooltip>
<template v-else>
<el-tag v-if="scope.row.status === '-2'" type="info">撤回</el-tag>
<el-tag v-else-if="scope.row.status === '-1'" type="warning">暂存</el-tag>
<el-tag v-else-if="scope.row.status === '0'" type="primary">运行中</el-tag>
<el-tag v-else-if="scope.row.status === '1'" type="success">完成</el-tag>
<el-tag v-else-if="scope.row.status === '2'" type="danger">作废</el-tag>
<el-tag v-else-if="scope.row.status === '3'" type="info">终止</el-tag>
<span v-else>-</span>
</template>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="150">
@@ -232,6 +267,19 @@
<!-- 履约验收弹窗 -->
<PurchasingAcceptModal ref="acceptModalRef" @refresh="getDataList" />
<!-- 查看审批过程（参考 hi-job 流程弹窗） -->
<el-dialog
v-model="showFlowComment"
v-if="showFlowComment"
title="查看审批过程"
top="20px"
width="90%"
append-to-body
destroy-on-close
@close="currFlowJob = null">
<FlowCommentTimeline v-if="currFlowJob" :key="currFlowJob.flowInstId" :curr-job="currFlowJob" />
</el-dialog>
</div>
</template>
@@ -249,6 +297,7 @@ import { List, Document, DocumentCopy, Search, Collection, Money, CircleCheck, I
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const ActionDropdown = defineAsyncComponent(() => import('/@/components/tools/action-dropdown.vue'));
const PurchasingAcceptModal = defineAsyncComponent(() => import('./accept/PurchasingAcceptModal.vue'));
const FlowCommentTimeline = defineAsyncComponent(() => import('/@/views/jsonflow/comment/timeline.vue'));
// 字典数据和品目树数据
const dictData = ref({
@@ -268,6 +317,9 @@ const formDialogRef = ref()
const acceptModalRef = ref()
const searchFormRef = ref()
const showSearch = ref(true)
/** 审批过程弹窗：是否显示、当前行对应的流程 job（供 Comment 组件用） */
const showFlowComment = ref(false)
const currFlowJob = ref<{ id?: number; flowInstId?: number } | null>(null)
/**
* 定义响应式表格数据
@@ -305,6 +357,19 @@ const handleAdd = () => {
};
/**
/**
* 点击审核状态：若有流程实例则打开「查看审批过程」弹窗（参考 hi-job.vue）
* @param row - 当前行数据（需含 flowInstId）
*/
const handleShowFlowComment = (row: any) => {
if (!row?.flowInstId) {
useMessage().info('暂存状态无审批过程');
return;
}
currFlowJob.value = { id: row.id, flowInstId: row.flowInstId };
showFlowComment.value = true;
};
/**
* 打开查看对话框
* @param row - 当前行数据
@@ -569,5 +634,9 @@ onMounted(() => {
align-items: center;
justify-content: center;
}
.status-tag-clickable {
cursor: pointer;
}
</style>