guest-security-check-system/snowy-plugin/snowy-plugin-gen/src/main/resources/frontend/detail.vue.btl

<template>
    <a-card :bordered="false">
		<a-page-header
			<% for(var i = 0; i < configList.~size; i++) { %>
            <% if(configList[i].needTableId) { %>
            :title="formData.${configList[i].fieldNameCamelCase} ? '编辑${functionName}' : '新增${functionName}'"
            <% } %>
            <% } %>
			@back="onClose"
		>
			<template #extra>
				<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>
		</a-page-header>
		<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>
	</a-card>
</template>

<script setup name="${classNameFirstLower}Detail">
	<%
	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 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) => {
	    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 = {}
		isView.value = true
		emit('onClose')
	}
	// 默认要校验的
	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>