car-wash-java/car-wash-admin/src/main/resources/tmpl/dialog.vue.vm

<style scoped lang="scss">

</style>
<template>
    <div class="system-dialog-container">
        <el-dialog
                :title="state.dialog.title"
                v-model="state.dialog.visible"
                width="820px"
                draggable
                destroy-on-close
                :close-on-click-modal="false"
                align-center>
            <el-form
                    inline
                    :model="state.ruleForm"
                    :rules="rules"
                    label-position="top"
                    ref="formRef"
                    size="default"
                    label-width="100px"
                    class="mt5">
                #foreach($ele in $fields)
                    #if($ele.columnName!="id"&&$ele.columnName!="createTime"&&$ele.columnName!="updateTime" )
                        <el-form-item label="$ele.columnComment" prop="$ele.columnName">
                            <el-input
                                    v-model="state.ruleForm.$ele.columnName"
                                    placeholder="$ele.columnComment"
                                    clearable
                                    class="wd350">
                            </el-input>
                        </el-form-item>
                    #end
                #end
            </el-form>

            <template #footer>

                <el-row>
                    <el-col :span="12">
                        <p class="text-align-left">
                            <el-checkbox v-model="state.continueAdd" v-if="!state.ruleForm.id">继续创建</el-checkbox>
                            <template v-else>
                                <el-button @click="handleActive" type="success" v-if="state.ruleForm.status !=1" size="default">激 活</el-button>
                                <el-button @click="handleActive" type="danger" v-else size="default">禁 用</el-button>
                            </template>
                        </p>
                    </el-col>
                    <el-col :span="12">
                        <p class="dialog-footer">
                            <el-button @click="onCancel" size="default">取 消</el-button>
                            <el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                        </p>
                    </el-col>
                </el-row>

            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="${pojoName}Dialog">
    import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
    import {Msg} from "/@/utils/message";
    import {$body, $get} from "/@/utils/request";
    import u from '/@/utils/u'

    // 引入异步组件
    // const ExtDetailForm = defineAsyncComponent(() => import('/@/components/form/ExtDetailForm.vue'));

    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const formRef = ref();
    //定义初始变量，重置使用
    const initState = () => ({
        ruleForm: {
            id: 0
        },
        btnLoading: false,
        dialog: {
            visible: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        rules: {},
        continueAdd: false
    })

    // 定义变量内容
    const state = reactive(initState());


    // 打开弹窗
    const open = (action: string = 'add', row: any) => {
        state.dialog.title = u.dialog.actions[action].title + "『${pojoComment}』"
        state.dialog.submitTxt = u.dialog.actions[action].btn + "『${pojoComment}』"
        state.dialog.visible = true;
        if (action !== 'add') {
            loadData(row.id);
        } else {
            state.ruleForm = Object.assign(state.ruleForm, row);
        }
    };
    // 关闭弹窗
    const onClose = () => {
        state.dialog.visible = false;
        Object.assign(state, initState())
    };
    // 取消
    const onCancel = () => {
        onClose();
    };
    // 提交
    const onSubmit = () => {
        formRef.value.validate((v: boolean) => {
            if (v) {
                state.btnLoading = true;
                const url = state.ruleForm.id > 0 ? "${firstLowPojoName}/modify" : "${firstLowPojoName}/add"
                    $body(url, state.ruleForm).then(() => {
                    state.btnLoading = false;
                    Msg.message('操作成功');
                    console.log('submit!')
                    if (!state.continueAdd) {
                        onClose();
                        emit('refresh');
                    }
                })
            } else {
                state.btnLoading = false;
                Msg.message('请先完整填写表单', 'error');
            }
        })
    };

    const handleFormChange = (formData: any) => {
        console.log(formData)
    }

    // 初始化详情页
    const loadData = (id: number) => {
            $get(`${firstLowPojoName}/detail/${id}`).then((res: any) => {
            state.ruleForm = res;
        })
    }

    // 暴露变量
    defineExpose({
        open
    });


</script>