yqyc-system/snowy-plugin/snowy-plugin-gen/src/main/resources/frontend/form.vue.btl

<template>
	<xn-form-container
		<% for(var i = 0; i < configList.~size; i++) { %>
		<% if(configList[i].needTableId) { %>
		:title="formData.${configList[i].fieldNameCamelCase} ? '编辑${functionName}' : '新增${functionName}'"
		<% } %>
		<% } %>
		:width="700"
		v-model:open="open"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="${formLayout}">
		<% if(gridWhether) { %>
			<a-row :gutter="16">
			<% for(var i = 0; i < configList.~size; i++) { %>
			<% if(!configList[i].needTableId && configList[i].whetherAddUpdate) { %>
				<a-col :span="12">
					<a-form-item label="${configList[i].fieldRemark}：" name="${configList[i].fieldNameCamelCase}">
						<% if(configList[i].effectType == 'input') { %>
						<a-input v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请输入${configList[i].fieldRemark}" allow-clear />
						<% } else if (configList[i].effectType == 'textarea') {%>
						<a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请输入${configList[i].fieldRemark}" :auto-size="{ minRows: 3, maxRows: 5 }" />
						<% } else if (configList[i].effectType == 'select') {%>
						<a-select v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" show-search allow-clear option-filter-prop="label"/>
						<% } else if (configList[i].effectType == 'radio') {%>
						<a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
						<% } else if (configList[i].effectType == 'checkbox') {%>
						<a-checkbox-group v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
						<% } else if (configList[i].effectType == 'datepicker') {%>
						<a-date-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" allow-clear/>
						<% } else if (configList[i].effectType == 'timepicker') {%>
						<a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" allow-clear/>
						<% } else if (configList[i].effectType == 'inputNumber') {%>
						<a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" :min="1" :max="10000" style="width: 100%" />
						<% } else if (configList[i].effectType == 'slider') {%>
						<a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" :max="1000" style="width: 100%" />
						<% } else if (configList[i].effectType == 'fileUpload') {%>
						<xn-upload v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" />
						<% } else if (configList[i].effectType == 'imageUpload') {%>
						<xn-upload v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" uploadMode="image" />
						<% } else if (configList[i].effectType == 'editor') {%>
						<xn-editor v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请输入${configList[i].fieldRemark}" />
						<% } %>
					</a-form-item>
				</a-col>
			<% } %>
			<% } %>
			</a-row>
		<% } else { %>
		<% for(var i = 0; i < configList.~size; i++) { %>
		<% if(!configList[i].needTableId && configList[i].whetherAddUpdate) { %>
			<a-form-item label="${configList[i].fieldRemark}：" name="${configList[i].fieldNameCamelCase}">
				<% if(configList[i].effectType == 'input') { %>
				<a-input v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请输入${configList[i].fieldRemark}" allow-clear />
				<% } else if (configList[i].effectType == 'textarea') {%>
				<a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请输入${configList[i].fieldRemark}" :auto-size="{ minRows: 3, maxRows: 5 }" />
				<% } else if (configList[i].effectType == 'select') {%>
				<a-select v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" show-search allow-clear option-filter-prop="label"/>
				<% } else if (configList[i].effectType == 'radio') {%>
				<a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
				<% } else if (configList[i].effectType == 'checkbox') {%>
				<a-checkbox-group v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
				<% } else if (configList[i].effectType == 'datepicker') {%>
				<a-date-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" allow-clear/>
				<% } else if (configList[i].effectType == 'timepicker') {%>
				<a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" allow-clear/>
				<% } else if (configList[i].effectType == 'inputNumber') {%>
				<a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请输入${configList[i].fieldRemark}" :min="1" :max="10000" style="width: 100%" />
				<% } else if (configList[i].effectType == 'slider') {%>
				<a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请滑动${configList[i].fieldRemark}" :max="1000" style="width: 100%" />
				<% } else if (configList[i].effectType == 'fileUpload') {%>
				<xn-upload v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" />
				<% } else if (configList[i].effectType == 'imageUpload') {%>
				<xn-upload v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" uploadMode="image" />
				<% } else if (configList[i].effectType == 'editor') {%>
				<xn-editor v-model:value="formData.${configList[i].fieldNameCamelCase}" :disabled="isView" placeholder="请输入${configList[i].fieldRemark}" />
				<% } %>
			</a-form-item>
		<% } %>
		<% } %>
		<% } %>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-popconfirm title="请确认是否保存？" @confirm="onSubmit" v-if="!isView">
                <a-button type="primary" :loading="submitLoading">保存</a-button>
            </a-popconfirm>
		</template>
	</xn-form-container>
</template>

<script setup name="${classNameFirstLower}Form">
	<%
	var iptTool = 0;
	for(var i = 0; i < configList.~size; i++) {
		if(!configList[i].needTableId) {
		if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') {
			iptTool++;
		}
		}
	}
	%>
	<% if(iptTool > 0) { %>
	import tool from '@/utils/tool'
	<% } %>
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import ${classNameFirstLower}Api from '@/api/${moduleName}/${classNameFirstLower}Api'
	// 抽屉状态
	const open = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)
	const isView = ref(false)
	<% for(var i = 0; i < configList.~size; i++) { %>
	<% if(!configList[i].needTableId) { %>
	<% if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %>
	const ${configList[i].fieldNameCamelCase}Options = ref([])
	<% } %>
	<% } %>
	<% } %>

	// 打开抽屉
	const onOpen = (record, view = false) => {
		open.value = true
		isView.value = view
		if (record) {
			let recordData = cloneDeep(record)
			<% for(var i = 0; i < configList.~size; i++) { %>
			<% if(!configList[i].needTableId && configList[i].whetherAddUpdate && configList[i].effectType == 'checkbox') { %>
			recordData.${configList[i].fieldNameCamelCase} = JSON.parse(recordData.${configList[i].fieldNameCamelCase})
			<% } %>
			<% } %>
			formData.value = Object.assign({}, recordData)
		}
		<% for(var i = 0; i < configList.~size; i++) { %>
		<% if(!configList[i].needTableId) { %>
		<% if(configList[i].effectType == 'select' || configList[i].effectType == 'radio' || configList[i].effectType == 'checkbox') { %>
		${configList[i].fieldNameCamelCase}Options.value = tool.dictList('${configList[i].dictTypeCode}')
		<% } %>
		<% } %>
		<% } %>
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		open.value = false
		isView.value = true
	}
	// 默认要校验的
	const formRules = {
		<% for(var i = 0; i < configList.~size; i++) { %>
		<% if(!configList[i].needTableId) { %>
		<% if(configList[i].required) { %>
		${configList[i].fieldNameCamelCase}: [required('请输入${configList[i].fieldRemark}')],
		<% } %>
		<% } %>
		<% } %>
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				const formDataParam = cloneDeep(formData.value)
				<% for(var i = 0; i < configList.~size; i++) { %>
				<% if(configList[i].whetherAddUpdate && configList[i].effectType == 'checkbox') { %>
				formDataParam.${configList[i].fieldNameCamelCase} = JSON.stringify(formDataParam.${configList[i].fieldNameCamelCase})
				<% } %>
				<% } %>
				${classNameFirstLower}Api
					<% for(var i = 0; i < configList.~size; i++) { %>
					<% if(configList[i].needTableId) { %>
					.${classNameFirstLower}SubmitForm(formDataParam, formDataParam.${configList[i].fieldNameCamelCase})
					<% } %>
					<% } %>
					.then(() => {
						onClose()
						emit('successful')
					})
					.finally(() => {
						submitLoading.value = false
					})
			})
			.catch(() => {})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>

<style lang="less" scoped>
</style>