143 lines
4.2 KiB
Vue
143 lines
4.2 KiB
Vue
<template>
|
|
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
|
<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px"
|
|
label-position="right">
|
|
<el-form-item label="账号" prop="username">
|
|
<el-input v-model="form.username" placeholder="用于登录系统" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="名称" prop="nickname">
|
|
<el-input v-model="form.nickname" placeholder="请输入名称" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电话" prop="phone">
|
|
<el-input v-model="form.phone" placeholder="请输入联系电话" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="登录密码" prop="password">
|
|
<el-input type="password" v-model="form.password" clearable show-password></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属部门" prop="dept_id">
|
|
<el-cascader ref="deptRef" v-model="form.dept_id" :options="depts" :props="deptsProps" clearable
|
|
style="width: 100%;"></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="所属岗位" prop="posts">
|
|
<el-select v-model="form.posts" multiple filterable style="width: 100%">
|
|
<el-option v-for="item in groups2" :key="item.post_id" :label="item.post_name"
|
|
:value="item.post_id"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="所属角色" prop="roles">
|
|
<el-select v-model="form.roles" multiple filterable style="width: 100%">
|
|
<el-option v-for="item in groups" :key="item.role_id" :label="item.role_name"
|
|
:value="item.role_id"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="visible=false">取 消</el-button>
|
|
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
import {ref, onMounted, getCurrentInstance} from 'vue'
|
|
import api from "@/api/index"
|
|
import tools from "@/utils/tools.js";
|
|
|
|
defineExpose({
|
|
open
|
|
})
|
|
|
|
const {proxy} = getCurrentInstance()
|
|
const emit = defineEmits(['success', 'closed'])
|
|
const formRef = ref(null)
|
|
const deptRef = ref(null)
|
|
let mode = ref('add')
|
|
let titleMap = ref({
|
|
add: '新增',
|
|
edit: '编辑',
|
|
show: '查看'
|
|
})
|
|
let visible = ref(false)
|
|
let isSaveing = ref(false)
|
|
const form = ref({
|
|
account_id: null,
|
|
username: "",
|
|
email: '',
|
|
phone: '',
|
|
password: "",
|
|
dept_id: 0,
|
|
roles: [],
|
|
posts: []
|
|
})
|
|
const rules = ref({
|
|
username: [
|
|
{required: true, message: '请输入登录账号'}
|
|
],
|
|
realname: [
|
|
{required: true, message: '请输入真实姓名'}
|
|
],
|
|
dept_id: [
|
|
{required: true, message: '请选择所属部门'}
|
|
],
|
|
roles: [
|
|
{required: true, message: '请选择所属角色', trigger: 'change'}
|
|
]
|
|
})
|
|
let groups = ref([])
|
|
let groups2 = ref([])
|
|
let depts = ref([])
|
|
let deptsProps = ref({
|
|
value: "dept_id",
|
|
label: "dept_name",
|
|
checkStrictly: true
|
|
})
|
|
|
|
onMounted(() => {
|
|
getGroup()
|
|
getGroup2()
|
|
})
|
|
|
|
function open(m = 'add', data = {}, d = []) {
|
|
mode.value = m;
|
|
if (data) {
|
|
Object.assign(form.value, data)
|
|
form.value.roles = data.roles.map(item => item.role_id)
|
|
form.value.posts = data.posts.map(item => item.post_id)
|
|
}
|
|
depts.value = d
|
|
visible.value = true
|
|
}
|
|
|
|
//加载树数据
|
|
async function getGroup() {
|
|
const res = await api.system.role.option();
|
|
groups.value = res.data;
|
|
}
|
|
|
|
async function getGroup2() {
|
|
const res = await api.system.post.option();
|
|
groups2.value = res.data;
|
|
}
|
|
|
|
//表单提交方法
|
|
async function submit() {
|
|
// 校验登录
|
|
const validate = await formRef.value.validate().catch(() => {
|
|
});
|
|
if (!validate) {
|
|
return false
|
|
}
|
|
// 部门获取最后一项
|
|
form.value.dept_id = deptRef.value.getCheckedNodes()[0].data.dept_id
|
|
if (form.value.password) form.value.password = tools.md5(form.value.password)
|
|
isSaveing.value = true;
|
|
const res = form.value.account_id ? await api.system.account.edit(form.value) : await api.system.account.add(form.value);
|
|
isSaveing.value = false;
|
|
emit('success')
|
|
visible.value = false;
|
|
proxy.$message.success(res.msg)
|
|
}
|
|
</script>
|