shop-admin/src/views/system/permission/form.vue

<template>
    <div class="form-container">
        <el-form
            ref="refsForm"
            v-loading="loading"
            class="form-content"
            :disabled="route.name === 'UserDetail'"
            label-width="100px"
            :model="form"
            :rules="rules"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickname" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="form.sex" :opts="opts.sex" />
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <el-upload-image v-model="form.avatar" :disabled="route.name === 'UserDetail'" />
            </el-form-item>
            <el-form-item label="状态" prop="enabled">
                <el-switch
                    v-model="form.enabled"
                    active-text="启用"
                    :active-value="true"
                    inactive-text="禁用"
                    :inactive-value="false"
                />
            </el-form-item>
        </el-form>
        <div class="form-footer">
            <template v-if="route.name !== 'UserDetail'">
                <el-button @click="handleCancel">取消</el-button>
                <el-button :disabled="loading" :loading="submitting" type="primary" @click="handleSave">保存</el-button>
            </template>
            <el-button v-else @click="handleClose">返回</el-button>
        </div>
    </div>
</template>

<script setup>
    /* 全局 */
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    /* 表单 */
    const loading = ref(false);
    const submitting = ref(false);
    const refsForm = ref(null);
    const form = reactive({
        username: null,
        nickname: null,
        sex: 0,
        avatar: null,
        enabled: true,
    });
    const rules = reactive({
        username: [{ required: true, message: '用户名不能为空' }],
        nickname: [{ required: true, message: '昵称不能为空' }],
        sex: [{ required: true, message: '性别不能为空' }],
        avatar: [{ required: true, message: '头像不能为空' }],
        enabled: [{ required: true, message: '状态不能为空' }],
    });
    const opts = computed(() => store.state.user.opts);
    if (!unref(opts).init) {
        store.dispatch('user/load');
    }
    /* 详情 */
    watch(
        () => [route.name, route.params.id],
        async (value) => {
            // 不论当前是哪个路由只要名字相同的参数改变就会触发watch，所以需要加上当前路由名字判断，或者可以取独一无二的路由参数名
            if (['UpdateUser', 'UserDetail'].includes(value[0]) && value[1]) {
                loading.value = true;
                let res = await store.dispatch('user/detail', +value[1]);
                if (res) {
                    Object.assign(form, res);
                }
                loading.value = false;
            }
        },
        { immediate: true }
    );
    /* 交互 */
    const handleSave = async () => {
        submitting.value = true;
        try {
            await unref(refsForm).validate();
            let res = await store.dispatch('user/save', unref(form));
            if (res) {
                handleClose();
            }
        } catch (e) {
            console.info('取消保存', e);
        }
        submitting.value = false;
    };
    const handleCancel = async () => {
        try {
            await proxy.$confirm('确定要放弃未保存的数据继续离开吗?', '数据未保存');
            handleClose();
        } catch (e) {
            console.info('取消关闭', e);
        }
    };
    const handleClose = () => {
        router.push({ name: 'UserManagement' });
    };
</script>

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