feat(purchase): 履约验收优化界面,移除是否签订合同选择

- 移除是否签订合同手动选择,由系统自动判断
- 合同信息单独分栏显示,展示合同名称/编号/金额/供应商
- 已签订合同以绿色卡片展示
- 未签订合同显示警告提示
- 合同审批中显示错误提示,禁止操作
- 供应商名称合并到合同信息中展示
- 未签订合同时才显示成交金额和供应商输入
This commit is contained in:
吴红兵
2026-03-15 11:13:10 +08:00
parent 90ae916b93
commit 8bc778345b
2 changed files with 147 additions and 154 deletions

View File

@@ -11,45 +11,70 @@
<el-input :model-value="deptName || form.deptName" readonly placeholder="-" disabled /> <el-input :model-value="deptName || form.deptName" readonly placeholder="-" disabled />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" class="mb20"> </el-row>
<el-form-item label="是否签订合同" prop="hasContract">
<el-radio-group v-model="form.hasContract" :disabled="contractStatus === 'pending'"> <el-divider content-position="left">
<el-radio label="0"></el-radio> <span class="divider-title">合同信息</span>
<el-radio label="1"></el-radio> </el-divider>
</el-radio-group>
</el-form-item> <div v-if="contractLoading" class="contract-loading">
</el-col> <el-icon class="is-loading"><Loading /></el-icon>
<el-col :span="8" class="mb20" v-if="form.hasContract === '1'"> <span>正在查询合同...</span>
<el-form-item label="合同信息"> </div>
<div v-if="contractLoading" class="contract-info-loading">
<el-icon class="is-loading"><Loading /></el-icon> <div v-else-if="form.hasContract === '1' && contractFlowStatus === '1'" class="contract-card success">
<span>正在查询合同...</span> <div class="contract-card-header">
<el-icon><CircleCheckFilled /></el-icon>
<span>已签订合同</span>
</div>
<el-row :gutter="24">
<el-col :span="8">
<div class="info-item">
<span class="info-label">合同名称</span>
<span class="info-value">{{ form.contractName || form.contractNo || '-' }}</span>
</div> </div>
<div v-else-if="contractStatus === 'completed' && currentContract" class="contract-info-display"> </el-col>
<div class="contract-item"> <el-col :span="8">
<span class="label">合同名称</span> <div class="info-item">
<span class="value">{{ currentContract.contractName || currentContract.contractNo || '-' }}</span> <span class="info-label">合同编号</span>
</div> <span class="info-value">{{ form.contractNo || '-' }}</span>
<div class="contract-item">
<span class="label">合同金额</span>
<span class="value">{{ currentContract.money ? `${currentContract.money}` : '-' }}</span>
</div>
</div> </div>
<el-alert v-else-if="contractStatus === 'none'" type="warning" :closable="false" show-icon> </el-col>
<template #title> <el-col :span="8">
<span>未找到关联合同无法进行履约操作</span> <div class="info-item">
</template> <span class="info-label">合同金额</span>
</el-alert> <span class="info-value">{{ form.contractMoney ? `${form.contractMoney}` : '-' }}</span>
<el-alert v-else-if="contractStatus === 'pending'" type="error" :closable="false" show-icon> </div>
<template #title> </el-col>
<span>合同正在流程审批中无法进行履约操作</span> <el-col :span="8">
</template> <div class="info-item">
</el-alert> <span class="info-label">供应商名称</span>
</el-form-item> <span class="info-value">{{ form.supplierName || '-' }}</span>
</el-col> </div>
</el-col>
</el-row>
</div>
<el-alert v-else-if="form.hasContract === '1' && contractFlowStatus !== '1'" type="error" :closable="false" show-icon class="mb20">
<template #title>
<span>合同正在流程审批中无法进行履约操作</span>
</template>
</el-alert>
<el-alert v-else type="warning" :closable="false" show-icon class="mb20">
<template #title>
<span>未签订合同</span>
</template>
</el-alert>
<el-divider content-position="left">
<span class="divider-title">验收信息</span>
</el-divider>
<el-row :gutter="24">
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
<el-form-item label="是否分期验收" prop="isInstallment"> <el-form-item label="是否分期验收" prop="isInstallment">
<el-radio-group v-model="form.isInstallment" :disabled="contractStatus === 'pending'"> <el-radio-group v-model="form.isInstallment" :disabled="!canEdit">
<el-radio label="0"></el-radio> <el-radio label="0"></el-radio>
<el-radio label="1"></el-radio> <el-radio label="1"></el-radio>
</el-radio-group> </el-radio-group>
@@ -57,17 +82,7 @@
</el-col> </el-col>
<el-col :span="8" class="mb20" v-if="form.isInstallment === '1'"> <el-col :span="8" class="mb20" v-if="form.isInstallment === '1'">
<el-form-item label="分期次数" prop="totalPhases"> <el-form-item label="分期次数" prop="totalPhases">
<el-input-number v-model="form.totalPhases" :min="1" :max="99" placeholder="请输入" style="width: 100%" :disabled="contractStatus === 'pending'" /> <el-input-number v-model="form.totalPhases" :min="1" :max="99" placeholder="请输入" style="width: 100%" :disabled="!canEdit" />
</el-form-item>
</el-col>
<el-col :span="8" class="mb20">
<el-form-item label="供应商名称" prop="supplierName">
<el-input
v-model="form.supplierName"
:placeholder="form.hasContract === '1' ? '自动带出' : '请输入供应商名称'"
:readonly="form.hasContract === '1'"
:disabled="contractStatus === 'pending'"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" class="mb20"> <el-col :span="8" class="mb20">
@@ -82,7 +97,7 @@
:remote-method="searchAssetAdmin" :remote-method="searchAssetAdmin"
:loading="assetAdminLoading" :loading="assetAdminLoading"
style="width: 100%" style="width: 100%"
:disabled="contractStatus === 'pending'" :disabled="!canEdit"
@change="onAssetAdminChange" @change="onAssetAdminChange"
> >
<el-option <el-option
@@ -110,7 +125,7 @@
:remote-method="searchPurchaser" :remote-method="searchPurchaser"
:loading="purchaserLoading" :loading="purchaserLoading"
style="width: 100%" style="width: 100%"
:disabled="contractStatus === 'pending'" :disabled="!canEdit"
@change="onPurchaserChange" @change="onPurchaserChange"
> >
<el-option <el-option
@@ -127,27 +142,27 @@
</el-col> </el-col>
<el-col :span="8" class="mb20" v-if="form.hasContract === '0'"> <el-col :span="8" class="mb20" v-if="form.hasContract === '0'">
<el-form-item label="成交金额" prop="transactionAmount" :required="form.hasContract === '0'"> <el-form-item label="成交金额" prop="transactionAmount" required>
<el-input-number v-model="form.transactionAmount" :min="0" :precision="2" placeholder="请输入成交金额" style="width: 100%" /> <el-input-number v-model="form.transactionAmount" :min="0" :precision="2" placeholder="请输入成交金额" style="width: 100%" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" class="mb20" v-if="form.hasContract === '0'">
<el-form-item label="供应商名称" prop="supplierName">
<el-input v-model="form.supplierName" placeholder="请输入供应商名称" clearable />
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'; import { ref, reactive, watch, computed } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'; import type { FormInstance, FormRules } from 'element-plus';
import { Loading } from '@element-plus/icons-vue'; import { Loading, CircleCheckFilled } from '@element-plus/icons-vue';
import { getContracts, searchTeachers } from '/@/api/purchase/purchasingrequisition'; import { searchTeachers } from '/@/api/purchase/purchasingrequisition';
import { useMessage } from '/@/hooks/message'; import { useMessage } from '/@/hooks/message';
const CONTRACT_FLOW_STATUS = {
RUNNING: '0',
COMPLETED: '1',
CANCELLED: '2',
};
const props = defineProps<{ const props = defineProps<{
modelValue: Record<string, any>; modelValue: Record<string, any>;
projectName?: string; projectName?: string;
@@ -160,8 +175,7 @@ const emit = defineEmits(['update:modelValue']);
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const contractLoading = ref(false); const contractLoading = ref(false);
const currentContract = ref<any>(null); const contractFlowStatus = ref('');
const contractStatus = ref<'none' | 'pending' | 'completed' | ''>('');
const purchaserOptions = ref<any[]>([]); const purchaserOptions = ref<any[]>([]);
const purchaserLoading = ref(false); const purchaserLoading = ref(false);
@@ -172,6 +186,9 @@ const assetAdminLoading = ref(false);
const form = reactive({ const form = reactive({
hasContract: '0', hasContract: '0',
contractId: '', contractId: '',
contractName: '',
contractNo: '',
contractMoney: null as number | null,
isInstallment: '0', isInstallment: '0',
totalPhases: 1, totalPhases: 1,
projectName: '', projectName: '',
@@ -182,11 +199,29 @@ const form = reactive({
assetAdminId: '', assetAdminId: '',
assetAdminName: '', assetAdminName: '',
transactionAmount: null as number | null, transactionAmount: null as number | null,
...props.modelValue, });
const canEdit = computed(() => {
return form.hasContract !== '1' || contractFlowStatus.value === '1';
}); });
const syncFormFromModel = (val: Record<string, any> | undefined) => { const syncFormFromModel = (val: Record<string, any> | undefined) => {
Object.assign(form, val || {}); if (!val) return;
form.hasContract = val.hasContract || '0';
form.contractId = val.contractId || '';
form.contractName = val.contractName || '';
form.contractNo = val.contractNo || '';
form.contractMoney = val.contractMoney || null;
contractFlowStatus.value = val.contractFlowStatus || '';
form.isInstallment = val.isInstallment || '0';
form.totalPhases = val.totalPhases || 1;
form.supplierName = val.supplierName || '';
form.purchaserId = val.purchaserId || '';
form.purchaserName = val.purchaserName || '';
form.assetAdminId = val.assetAdminId || '';
form.assetAdminName = val.assetAdminName || '';
form.transactionAmount = val.transactionAmount || null;
if (form.purchaserId && form.purchaserName) { if (form.purchaserId && form.purchaserName) {
purchaserOptions.value = [{ teacherNo: form.purchaserId, realName: form.purchaserName, name: form.purchaserName }]; purchaserOptions.value = [{ teacherNo: form.purchaserId, realName: form.purchaserName, name: form.purchaserName }];
} }
@@ -195,52 +230,6 @@ const syncFormFromModel = (val: Record<string, any> | undefined) => {
} }
}; };
const loadContractInfo = async () => {
if (!props.purchaseId) {
contractStatus.value = '';
currentContract.value = null;
return;
}
contractLoading.value = true;
contractStatus.value = '';
currentContract.value = null;
try {
const res = await getContracts({ id: props.purchaseId });
const list = res?.data;
if (Array.isArray(list) && list.length > 0) {
const contract = list[0];
currentContract.value = contract;
form.contractId = contract.id;
if (contract.flowStatus === CONTRACT_FLOW_STATUS.COMPLETED) {
contractStatus.value = 'completed';
form.supplierName = contract.supplierName || '';
} else if (contract.flowStatus === CONTRACT_FLOW_STATUS.RUNNING) {
contractStatus.value = 'pending';
form.supplierName = '';
} else {
contractStatus.value = 'pending';
form.supplierName = '';
}
} else {
contractStatus.value = 'none';
currentContract.value = null;
form.contractId = '';
form.supplierName = '';
}
} catch (e: any) {
contractStatus.value = 'none';
currentContract.value = null;
form.contractId = '';
form.supplierName = '';
} finally {
contractLoading.value = false;
}
};
const searchPurchaser = async (query: string) => { const searchPurchaser = async (query: string) => {
if (!query) { if (!query) {
purchaserOptions.value = []; purchaserOptions.value = [];
@@ -311,35 +300,12 @@ watch(
() => props.resetKey, () => props.resetKey,
() => { () => {
syncFormFromModel(props.modelValue); syncFormFromModel(props.modelValue);
contractStatus.value = '';
currentContract.value = null;
} }
); );
watch(form, () => emit('update:modelValue', { ...form }), { deep: true }); watch(form, () => emit('update:modelValue', { ...form }), { deep: true });
watch(
() => form.hasContract,
(val) => {
if (val === '1') {
loadContractInfo();
} else {
contractStatus.value = '';
currentContract.value = null;
form.contractId = '';
}
formRef.value?.validateField('transactionAmount');
}
);
onMounted(() => {
if (form.hasContract === '1') {
loadContractInfo();
}
});
const rules: FormRules = { const rules: FormRules = {
hasContract: [{ required: true, message: '请选择是否签订合同', trigger: 'change' }],
isInstallment: [{ required: true, message: '请选择是否分期验收', trigger: 'change' }], isInstallment: [{ required: true, message: '请选择是否分期验收', trigger: 'change' }],
totalPhases: [{ required: true, message: '请输入分期次数', trigger: 'blur' }], totalPhases: [{ required: true, message: '请输入分期次数', trigger: 'blur' }],
transactionAmount: [ transactionAmount: [
@@ -357,14 +323,10 @@ const rules: FormRules = {
}; };
const validate = async () => { const validate = async () => {
if (form.hasContract === '1' && contractStatus.value === 'pending') { if (form.hasContract === '1' && contractFlowStatus.value !== '1') {
useMessage().error('合同正在流程审批中,无法进行履约操作'); useMessage().error('合同正在流程审批中,无法进行履约操作');
return false; return false;
} }
if (form.hasContract === '1' && contractStatus.value === 'none') {
useMessage().error('未找到关联合同,无法进行履约操作');
return false;
}
return formRef.value?.validate(); return formRef.value?.validate();
}; };
@@ -380,28 +342,62 @@ defineExpose({ validate, form });
color: #999; color: #999;
margin-top: 4px; margin-top: 4px;
} }
.contract-info-loading { .divider-title {
font-weight: 600;
color: #303133;
}
.contract-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px 0;
color: #409eff;
}
.contract-card {
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 20px;
}
.contract-card.success {
background: linear-gradient(135deg, #f0f9eb 0%, #e1f3d8 100%);
border: 1px solid #c2e7b0;
}
.contract-card-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: #409eff; margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
color: #67c23a;
} }
.contract-info-display { .contract-card-header .el-icon {
background: #f5f7fa; font-size: 20px;
border-radius: 4px;
padding: 12px;
} }
.contract-item { .info-item {
display: flex; margin-bottom: 12px;
align-items: center;
line-height: 1.8;
} }
.contract-item .label { .info-item:last-child {
color: #606266; margin-bottom: 0;
min-width: 80px;
} }
.contract-item .value { .info-label {
display: block;
font-size: 12px;
color: #909399;
margin-bottom: 4px;
}
.info-value {
display: block;
font-size: 14px;
color: #303133; color: #303133;
font-weight: 500; font-weight: 500;
} }
:deep(.el-divider__text) {
background-color: #fff;
padding: 0 10px;
}
:deep(.el-divider) {
margin: 24px 0;
}
</style> </style>

View File

@@ -237,7 +237,6 @@ const saveCommonConfig = async () => {
const formRef = commonFormRef.value; const formRef = commonFormRef.value;
const valid = await formRef?.validate?.().catch(() => false); const valid = await formRef?.validate?.().catch(() => false);
if (!valid) return; if (!valid) return;
// 直接从子组件 form 读取,确保拿到用户填写的最新值(避免 v-model 同步延迟)
const form = formRef?.form || commonForm.value; const form = formRef?.form || commonForm.value;
const isInstallment = form.isInstallment === '1' || form.isInstallment === 1; const isInstallment = form.isInstallment === '1' || form.isInstallment === 1;
if (isInstallment && (!form.totalPhases || form.totalPhases < 1)) { if (isInstallment && (!form.totalPhases || form.totalPhases < 1)) {
@@ -248,16 +247,14 @@ const saveCommonConfig = async () => {
try { try {
await apiSaveCommonConfig({ await apiSaveCommonConfig({
purchaseId: String(purchaseId.value), purchaseId: String(purchaseId.value),
hasContract: form.hasContract ?? '0',
contractId: form.contractId ?? '',
isInstallment: form.isInstallment ?? '0', isInstallment: form.isInstallment ?? '0',
totalPhases: isInstallment ? Number(form.totalPhases) || 1 : 1, totalPhases: isInstallment ? Number(form.totalPhases) || 1 : 1,
supplierName: String(form.supplierName ?? ''),
purchaserId: String(form.purchaserId ?? ''), purchaserId: String(form.purchaserId ?? ''),
purchaserName: String(form.purchaserName ?? ''), purchaserName: String(form.purchaserName ?? ''),
assetAdminId: String(form.assetAdminId ?? ''), assetAdminId: String(form.assetAdminId ?? ''),
assetAdminName: String(form.assetAdminName ?? ''), assetAdminName: String(form.assetAdminName ?? ''),
transactionAmount: form.transactionAmount ?? null, transactionAmount: form.transactionAmount ?? null,
supplierName: String(form.supplierName ?? ''),
}); });
useMessage().success('保存成功'); useMessage().success('保存成功');
await loadData(); await loadData();