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

<template>
    <a-drawer
        :title="formData.id ? '编辑${functionName}' : '增加${functionName}'"
        :width="600"
        :visible="visible"
        :destroy-on-close="true"
        :footer-style="{ textAlign: 'right' }"
        @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}" placeholder="请输入${configList[i].fieldRemark}" allow-clear />
                        <% } else if (configList[i].effectType == 'textarea') {%>
                        <a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" 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}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
                        <% } else if (configList[i].effectType == 'radio') {%>
                        <a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" :options="formData.${configList[i].fieldNameCamelCase}Options" />
                        <% } else if (configList[i].effectType == 'checkbox') {%>
                        <a-checkbox-group v-model:value="formData.${configList[i].fieldNameCamelCase}" 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}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
                        <% } else if (configList[i].effectType == 'timepicker') {%>
                        <a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
                        <% } else if (configList[i].effectType == 'inputNumber') {%>
                        <a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" :min="1" :max="100" style="width: 100%" />
                        <% } else if (configList[i].effectType == 'slider') {%>
                        <a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" :max="100" style="width: 100%" />
                        <% } %>
                    </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}" placeholder="请输入${configList[i].fieldRemark}" allow-clear />
                <% } else if (configList[i].effectType == 'textarea') {%>
                <a-textarea v-model:value="formData.${configList[i].fieldNameCamelCase}" 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}" placeholder="请选择${configList[i].fieldRemark}" :options="${configList[i].fieldNameCamelCase}Options" />
                <% } else if (configList[i].effectType == 'radio') {%>
                <a-radio-group v-model:value="formData.${configList[i].fieldNameCamelCase}" 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}" 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}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
                <% } else if (configList[i].effectType == 'timepicker') {%>
                <a-time-picker v-model:value="formData.${configList[i].fieldNameCamelCase}" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择${configList[i].fieldRemark}" style="width: 100%" />
                <% } else if (configList[i].effectType == 'inputNumber') {%>
                <a-input-number v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请输入${configList[i].fieldRemark}" :min="1" :max="100" style="width: 100%" />
                <% } else if (configList[i].effectType == 'slider') {%>
                <a-slider v-model:value="formData.${configList[i].fieldNameCamelCase}" placeholder="请滑动${configList[i].fieldRemark}" :max="100" style="width: 100%" />
                <% } %>
            </a-form-item>
        <% } %>
        <% } %>
        <% } %>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        </template>
    </a-drawer>
</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 visible = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = 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) => {
        visible.value = true
        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 = {}
        visible.value = false
    }
    // 默认要校验的
    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
                    })
            })
    }
    // 抛出函数
    defineExpose({
        onOpen
    })
</script>