school-developer/src/views/purchase/purchasingcontract/form.vue

<template>
	<el-dialog
		v-model="state.visible"
		:title="state.title"
		width="700px"
		append-to-body
		destroy-on-close
		:close-on-click-modal="false"
		@close="handleClose"
	>
		<el-form ref="formRef" :model="state.formData" :rules="rules" label-width="140px">
			<el-form-item label="合同编号" prop="contractNo">
				<el-input v-model="state.formData.contractNo" placeholder="请输入合同编号" :disabled="state.operation === 'view'" />
			</el-form-item>
			<el-form-item label="合同名称" prop="contractName">
				<el-input v-model="state.formData.contractName" placeholder="请输入合同名称" :disabled="state.operation === 'view'" />
			</el-form-item>
			<el-form-item label="合同金额(元)" prop="money">
				<el-input-number
					v-model="state.formData.money"
					:min="0"
					:precision="2"
					:controls="false"
					placeholder="请输入合同金额"
					style="width: 100%"
					:disabled="state.operation === 'view'"
				/>
			</el-form-item>
			<el-form-item label="采购申请ID" prop="purchaseId">
				<el-input v-model="state.formData.purchaseId" placeholder="请输入采购申请ID" :disabled="state.operation === 'view'" />
			</el-form-item>
			<el-form-item label="是否需要招标" prop="isBidding">
				<el-radio-group v-model="state.formData.isBidding" :disabled="state.operation === 'view'">
					<el-radio value="0">否</el-radio>
					<el-radio value="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否需要法律顾问" prop="isLegalAdviser">
				<el-radio-group v-model="state.formData.isLegalAdviser" :disabled="state.operation === 'view'">
					<el-radio value="0">否</el-radio>
					<el-radio value="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="state.formData.isLegalAdviser === '1'" label="法律顾问意见" prop="legalAdviserOpinion">
				<el-input
					v-model="state.formData.legalAdviserOpinion"
					type="textarea"
					:rows="3"
					placeholder="请输入法律顾问意见"
					:disabled="state.operation === 'view'"
				/>
			</el-form-item>
			<el-form-item label="是否涉及多个部门" prop="isDepts">
				<el-radio-group v-model="state.formData.isDepts" :disabled="state.operation === 'view'">
					<el-radio value="0">否</el-radio>
					<el-radio value="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否全校合同" prop="isSchool">
				<el-radio-group v-model="state.formData.isSchool" :disabled="state.operation === 'view'">
					<el-radio value="0">否</el-radio>
					<el-radio value="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="备注" prop="remarks">
				<el-input v-model="state.formData.remarks" type="textarea" :rows="2" placeholder="请输入备注" :disabled="state.operation === 'view'" />
			</el-form-item>
		</el-form>
		<template #footer v-if="state.operation !== 'view'">
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="handleSubmit" :loading="state.loading">确定</el-button>
		</template>
		<template #footer v-else>
			<el-button @click="handleClose">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="PurchasingContractForm">
import { ref, reactive, computed } from 'vue';
import { getObj, addObj, editObj } from '/@/api/purchase/purchasingcontract';
import { useMessage } from '/@/hooks/message';

const emit = defineEmits(['refresh']);

const formRef = ref();

const state = reactive({
	visible: false,
	loading: false,
	operation: 'add' as 'add' | 'edit' | 'view',
	title: computed(() => {
		return state.operation === 'add' ? '新增合同' : state.operation === 'edit' ? '编辑合同' : '合同详情';
	}),
	formData: {
		id: '',
		contractNo: '',
		contractName: '',
		money: 0,
		purchaseId: '',
		isBidding: '0',
		isLegalAdviser: '0',
		legalAdviserOpinion: '',
		isDepts: '0',
		isSchool: '0',
		remarks: '',
	},
});

const rules = {
	contractNo: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
	contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
	money: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
	purchaseId: [{ required: true, message: '请输入采购申请ID', trigger: 'blur' }],
	isBidding: [{ required: true, message: '请选择是否需要招标', trigger: 'change' }],
	isLegalAdviser: [{ required: true, message: '请选择是否需要法律顾问', trigger: 'change' }],
	isDepts: [{ required: true, message: '请选择是否涉及多部门', trigger: 'change' }],
	isSchool: [{ required: true, message: '请选择是否全校合同', trigger: 'change' }],
};

const openDialog = async (operation: 'add' | 'edit' | 'view', row?: any) => {
	state.operation = operation;
	state.visible = true;
	state.loading = false;

	if (operation === 'add') {
		resetForm();
		state.formData.isBidding = '0';
		state.formData.isLegalAdviser = '0';
		state.formData.isDepts = '0';
		state.formData.isSchool = '0';
	} else if (row) {
		state.formData.id = row.id;
		await loadData();
	}
};

const loadData = async () => {
	try {
		state.loading = true;
		const res: any = await getObj(state.formData.id);
		if (res.data) {
			Object.assign(state.formData, res.data);
		}
	} catch (err) {
		useMessage().error('加载数据失败');
	} finally {
		state.loading = false;
	}
};

const handleSubmit = async () => {
	const valid = await formRef.value?.validate().catch(() => false);
	if (!valid) return;

	try {
		state.loading = true;
		if (state.operation === 'add') {
			await addObj(state.formData);
			useMessage().success('新增成功');
		} else {
			await editObj(state.formData);
			useMessage().success('修改成功');
		}
		handleClose();
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg || '操作失败');
	} finally {
		state.loading = false;
	}
};

const handleClose = () => {
	state.visible = false;
	resetForm();
};

const resetForm = () => {
	formRef.value?.resetFields();
	state.formData = {
		id: '',
		contractNo: '',
		contractName: '',
		money: 0,
		purchaseId: '',
		isBidding: '0',
		isLegalAdviser: '0',
		legalAdviserOpinion: '',
		isDepts: '0',
		isSchool: '0',
		remarks: '',
	};
};

defineExpose({
	openDialog,
});
</script>

<style scoped>
:deep(.el-dialog__body) {
	padding: 20px;
}
</style>