|
|
|
|
@ -1,20 +1,115 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="form-container">
|
|
|
|
|
<el-form :model="form" :rules="rules" label-width="100px">
|
|
|
|
|
<el-form
|
|
|
|
|
class="form-content"
|
|
|
|
|
ref="refsForm"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
:model="form"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
:disabled="route.name === 'UserDetail'"
|
|
|
|
|
>
|
|
|
|
|
<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 :opts="opts.sex" v-model="form.sex" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="头像" prop="avatar">
|
|
|
|
|
<el-upload-image :disabled="route.name === 'UserDetail'" v-model="form.avatar" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="状态" prop="enabled">
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="form.enabled"
|
|
|
|
|
active-text="启用"
|
|
|
|
|
inactive-text="禁用"
|
|
|
|
|
:active-value="true"
|
|
|
|
|
: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 type="primary" @click="handleSave" :disabled="loading" :loading="submitting">保存</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
<el-button @click="handleClose" v-else>返回</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 }],
|
|
|
|
|
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>
|
|
|
|
|
|
saatana
4 years ago