<template>
|
<el-dialog
|
:title="title"
|
:visible.sync="dialogFormVisible"
|
width="500px"
|
:close-on-click-modal="false"
|
@close="close"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form-item label="用户名" prop="username">
|
<el-tag v-if="!createAction">{{ form.username }}</el-tag>
|
<el-input
|
v-else
|
v-model.trim="form.username"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model.trim="form.name" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号" prop="tel">
|
<el-input v-model.trim="form.tel" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="权限" prop="permissions">
|
<el-radio-group v-model="form.permissions">
|
<el-radio label="admin">管理员</el-radio>
|
<el-radio label="user">用户</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="createAction" label="密码" prop="tel">
|
<el-input v-model.trim="form.password" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="close">取 消</el-button>
|
<el-button type="primary" @click="save">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { doEdit, register } from "@/api/user";
|
|
export default {
|
name: "UserEdit",
|
data() {
|
return {
|
activeName: "base",
|
form: {
|
name: "",
|
username: "",
|
},
|
rules: {
|
username: [
|
{ required: true, trigger: "blur", message: "请输入用户名" },
|
],
|
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
|
},
|
title: "",
|
dialogFormVisible: false,
|
createAction: false,
|
};
|
},
|
created() {},
|
methods: {
|
showEdit(row) {
|
if (!row) {
|
this.title = "添加";
|
this.createAction = true;
|
this.form.permissions = "user";
|
} else {
|
this.title = "编辑";
|
this.form = Object.assign({}, row);
|
this.createAction = false;
|
}
|
this.dialogFormVisible = true;
|
},
|
close() {
|
this.$refs["form"].resetFields();
|
this.form = this.$options.data().form;
|
this.dialogFormVisible = false;
|
// this.$emit("fetch-data");
|
},
|
async save() {
|
if (this.createAction) {
|
this.$refs["form"].validate(async (valid) => {
|
if (valid) {
|
let rsp = await register(this.form);
|
if (rsp && rsp.success) {
|
console.log(rsp);
|
this.$baseMessage(rsp.msg, "success");
|
this.closeDialog();
|
}
|
}
|
});
|
} else {
|
let rsp = await doEdit(this.form);
|
if (rsp && rsp.success) {
|
this.$baseMessage(rsp.msg, "success");
|
this.closeDialog();
|
}
|
}
|
},
|
closeDialog() {
|
this.$refs["form"].resetFields();
|
this.dialogFormVisible = false;
|
this.$emit("fetch-data");
|
this.form = this.$options.data().form;
|
},
|
handleClick(tab, event) {
|
// console.log(tab, event)
|
},
|
},
|
};
|
</script>
|
