fix：修复用户管理和角色管理部分问题
This commit is contained in:
zouzhibing
parent
1e4d2633bc
commit
bb848895f7
|
|
@ -5,6 +5,8 @@ export const userData =[
|
|||
sex:'男',
|
||||
role:'超级管理员',
|
||||
status:true,
|
||||
photo:'15333333333',
|
||||
describe:'超级管理员不可删除'
|
||||
},
|
||||
{
|
||||
username:'zhangsan',
|
||||
|
|
@ -12,6 +14,8 @@ export const userData =[
|
|||
sex:'女',
|
||||
role:'管理员',
|
||||
status:true,
|
||||
photo:'15311111111',
|
||||
describe:'管理员不可删除'
|
||||
},
|
||||
{
|
||||
username:'lisi',
|
||||
|
|
@ -19,6 +23,8 @@ export const userData =[
|
|||
sex:'男',
|
||||
role:'管理员',
|
||||
status:true,
|
||||
photo:'13823456789',
|
||||
describe:'测试账户'
|
||||
},
|
||||
{
|
||||
username:'wangwu',
|
||||
|
|
@ -26,6 +32,8 @@ export const userData =[
|
|||
sex:'男',
|
||||
role:'超级管理员',
|
||||
status:false,
|
||||
photo:'13923456789',
|
||||
describe:'超级管理员不可删除'
|
||||
},
|
||||
{
|
||||
username:'zhaoliu',
|
||||
|
|
@ -33,6 +41,8 @@ export const userData =[
|
|||
sex:'男',
|
||||
role:'普通用户',
|
||||
status:false,
|
||||
photo:'14523456789',
|
||||
describe:'普通测试用户'
|
||||
},
|
||||
|
||||
]
|
||||
|
|
@ -42,16 +52,22 @@ export const roleData =[
|
|||
{
|
||||
roleName:'超级管理员',
|
||||
roleId:'admin',
|
||||
roleIdentification:'admin',
|
||||
describe:'这是超级管理员，拥有一切权限',
|
||||
createTime:'2022-09-02',
|
||||
},
|
||||
{
|
||||
roleName:'管理员',
|
||||
roleId:'role',
|
||||
roleIdentification:'admin',
|
||||
describe:'普通管理员',
|
||||
createTime:'2022-09-02',
|
||||
},
|
||||
{
|
||||
roleName:'普通用户',
|
||||
roleId:'other',
|
||||
describe:'测试用户',
|
||||
roleIdentification:'other',
|
||||
createTime:'2022-09-02',
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<el-drawer v-model="dialogVisible" :title="title" size="50%" @close="close">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="ruleForm.roleName" placeholder="请输入角色名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识" prop="roleIdentification">
|
||||
<el-input v-model="ruleForm.roleIdentification" placeholder="请输入角色标识"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色状态" >
|
||||
<el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述" >
|
||||
<el-input v-model="ruleForm.describe"
|
||||
type="textarea"
|
||||
placeholder="请输入角色描述"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单权限" >
|
||||
<el-tree
|
||||
:data="menuData"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {reactive, ref} from "vue";
|
||||
import {FormInstance} from "element-plus";
|
||||
import { menuData } from '@/mock/system'
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增角色')
|
||||
const ruleForm = reactive({
|
||||
roleName: '',
|
||||
roleIdentification:'',
|
||||
describe:null,
|
||||
status:true
|
||||
})
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'menuName',
|
||||
}
|
||||
|
||||
function close() {
|
||||
ruleFormRef.value.resetFields()
|
||||
Object.keys(ruleForm).forEach(key=>{
|
||||
if(key==='status') ruleForm[key] = true
|
||||
else ruleForm[key] = null
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const show = (item={})=>{
|
||||
title.value = '新增角色'
|
||||
if(item.roleName){
|
||||
title.value = '编辑角色'
|
||||
Object.keys(item).forEach(key=>{
|
||||
ruleForm[key] = item[key]
|
||||
})
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const rules = reactive({
|
||||
roleName: [
|
||||
{ required: true, message: '请输入角色名称', trigger: 'blur' },
|
||||
],
|
||||
roleIdentification: [{ required: true, message: '请输入角色标识', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
const handleClose = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
dialogVisible.value = false
|
||||
console.log('submit!', obj)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -1,25 +1,33 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="header">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="formInline.roleName" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef1)">重置</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="util">
|
||||
<el-button type="primary" @click="add">新增</el-button>
|
||||
<el-button type="primary" @click="add">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增角色
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-inner">
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column prop="roleName" label="角色名称" />
|
||||
<el-table-column prop="roleIdentification" label="角色标识" />
|
||||
<el-table-column prop="describe"
|
||||
:show-overflow-tooltip="true"
|
||||
width="180"
|
||||
label="角色描述" />
|
||||
<el-table-column prop="createTime" label="创建时间" />
|
||||
<el-table-column prop="status" label="操作">
|
||||
<el-table-column prop="status" label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
|
||||
编辑
|
||||
|
|
@ -32,96 +40,34 @@
|
|||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<el-drawer v-model="dialogVisible" :title="title" width="50%">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="ruleForm.roleName" />
|
||||
</el-form-item>
|
||||
<div style="padding-left: 50px">
|
||||
<div>权限菜单分配</div>
|
||||
<div style="padding-top: 20px; padding-left: 20px">
|
||||
<el-tree
|
||||
:default-expand-all="true"
|
||||
:data="menuData"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-drawer>
|
||||
<RoleDrawer ref="roleDrawer"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import RoleDrawer from './components/roleDrawer.vue'
|
||||
import { roleData } from '@/mock/system'
|
||||
import * as dayjs from 'dayjs'
|
||||
const tableData = ref(roleData)
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增')
|
||||
|
||||
const roleDrawer = ref()
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleFormRef1 = ref<FormInstance>()
|
||||
const formInline = reactive({})
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'menuName',
|
||||
}
|
||||
const rules = reactive({
|
||||
nickname: [
|
||||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
||||
],
|
||||
username: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
role: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择角色',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
}
|
||||
const reset = (formEl: FormInstance | undefined) => {}
|
||||
const add = () => {
|
||||
title.value = '新增'
|
||||
dialogVisible.value = true
|
||||
roleDrawer.value.show()
|
||||
}
|
||||
const ruleForm = reactive({
|
||||
name: '',
|
||||
sex: null,
|
||||
price: null,
|
||||
})
|
||||
|
||||
const edit = (row) => {
|
||||
title.value = '编辑'
|
||||
// rowObj.value = row
|
||||
dialogVisible.value = true
|
||||
roleDrawer.value.show(row)
|
||||
}
|
||||
|
||||
const del = (row) => {
|
||||
|
|
@ -137,7 +83,7 @@
|
|||
const changeStatus = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
|
||||
'提示',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
@ -150,16 +96,7 @@
|
|||
})
|
||||
}
|
||||
|
||||
const handleClose = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
dialogVisible.value = false
|
||||
console.log('submit!', obj)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input v-model="ruleForm.nickname" placeholder="请输入昵称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="ruleForm.sex">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联角色" prop="role">
|
||||
<el-select v-model="ruleForm.role" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="超级管理员" value="超级管理员" :key="0"></el-option>
|
||||
<el-option label="管理员" value="管理员" :key="1"></el-option>
|
||||
<el-option label="普通用户" value="普通用户" :key="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="photo">
|
||||
<el-input v-model="ruleForm.photo" placeholder="请输入手机号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="账户密码" >
|
||||
<el-input v-model="ruleForm.password"
|
||||
placeholder="请输入账户密码,如果不输入默认123456"
|
||||
type="password" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态" >
|
||||
<el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户描述" prop="describe" >
|
||||
<el-input v-model="ruleForm.describe"
|
||||
type="textarea"
|
||||
placeholder="请输入用户描述"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
|
||||
import {reactive, ref} from "vue";
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
const title = ref('新增用户')
|
||||
|
||||
const rules = reactive({
|
||||
nickname: [
|
||||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
||||
],
|
||||
username: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
role: [{required: true, message: '请选择角色', trigger: 'change',},],
|
||||
sex: [{required: true, message: '请选择性别', trigger: 'change',},],
|
||||
})
|
||||
|
||||
const ruleForm = reactive({
|
||||
username: '',
|
||||
nickname: null,
|
||||
sex: '男',
|
||||
role: null,
|
||||
photo:null,
|
||||
password:null,
|
||||
describe:null,
|
||||
status:true
|
||||
})
|
||||
|
||||
function close() {
|
||||
ruleFormRef.value.resetFields()
|
||||
Object.keys(ruleForm).forEach(key=>{
|
||||
if(key==='sex') ruleForm[key] = '男'
|
||||
else if(key==='status') ruleForm[key] = true
|
||||
else ruleForm[key] = null
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const show = (item={})=>{
|
||||
title.value = '新增用户'
|
||||
if(item.username){
|
||||
title.value = '编辑用户'
|
||||
Object.keys(item).forEach(key=>{
|
||||
ruleForm[key] = item[key]
|
||||
})
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleClose = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
dialogVisible.value = false
|
||||
console.log('submit!', ruleForm)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.header{
|
||||
display: flex;
|
||||
padding: 16px 16px 0px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.util{
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.table-inner{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.table{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +1,42 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="header">
|
||||
<el-form :inline="true" :model="formInline" ref="ruleFormRef1">
|
||||
<el-form :inline="true" :model="formInline" ref="ruleFormRef">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="formInline.username" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef1)">重置</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="util">
|
||||
<el-button type="primary" @click="add">新增</el-button>
|
||||
<el-button type="primary" @click="addHandler">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-inner">
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="nickname" label="昵称" />
|
||||
<el-table-column prop="sex" label="性别" />
|
||||
<el-table-column prop="role" label="角色" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<el-table-column prop="username" label="用户名" align="center"/>
|
||||
<el-table-column prop="nickname" label="昵称" align="center"/>
|
||||
<el-table-column prop="sex" label="性别" align="center"/>
|
||||
<el-table-column prop="role" label="关联角色" align="center" width="120"/>
|
||||
<el-table-column prop="photo" label="手机号" align="center" width="120"/>
|
||||
<el-table-column prop="describe"
|
||||
:show-overflow-tooltip="true"
|
||||
width="180"
|
||||
label="用户描述" align="center"/>
|
||||
<el-table-column prop="status" label="用户状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="操作">
|
||||
<el-table-column prop="operator" label="操作" width="200px" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
|
||||
<el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
|
||||
|
|
@ -39,42 +47,7 @@
|
|||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="ruleForm.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input v-model="ruleForm.nickname" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="ruleForm.sex">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="ruleForm.role" placeholder="请选择">
|
||||
<el-option label="超级管理员" value="超级管理员" :key="0"></el-option>
|
||||
<el-option label="管理员" value="管理员" :key="1"></el-option>
|
||||
<el-option label="普通用户" value="普通用户" :key="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<UserDialog ref="userDialog"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -83,60 +56,27 @@
|
|||
import {Search } from '@element-plus/icons-vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { userData } from '@/mock/system'
|
||||
import UserDialog from './components/userDialog.vue'
|
||||
import * as dayjs from 'dayjs'
|
||||
const tableData = ref(userData)
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增')
|
||||
const formSize = ref('default')
|
||||
const userDialog = ref()
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleFormRef1 = ref<FormInstance>()
|
||||
const formInline = reactive({})
|
||||
const rules = reactive({
|
||||
nickname: [
|
||||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
|
||||
],
|
||||
username: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
role: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择角色',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
sex: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择性别',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
}
|
||||
const reset = (formEl: FormInstance | undefined) => {}
|
||||
const add = () => {
|
||||
title.value = '新增'
|
||||
dialogVisible.value = true
|
||||
|
||||
|
||||
const addHandler = () => {
|
||||
userDialog.value.show()
|
||||
}
|
||||
const ruleForm = reactive({
|
||||
username: '',
|
||||
nickname: null,
|
||||
sex: null,
|
||||
role: null,
|
||||
})
|
||||
const edit = (row) => {
|
||||
title.value = '编辑'
|
||||
dialogVisible.value = true
|
||||
ruleForm.nickname = row.nickname
|
||||
ruleForm.username = row.username
|
||||
ruleForm.sex = row.sex
|
||||
ruleForm.role = row.role
|
||||
}
|
||||
function close() {
|
||||
ruleFormRef.value.resetFields()
|
||||
const editHandler = (row) => {
|
||||
userDialog.value.show(row)
|
||||
}
|
||||
|
||||
const del = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
|
|
@ -150,7 +90,7 @@
|
|||
const changeStatus = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
|
||||
'提示',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
@ -162,56 +102,8 @@
|
|||
row.status = !row.status
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
dialogVisible.value = false
|
||||
console.log('submit!', obj)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header{
|
||||
display: flex;
|
||||
padding: 16px 16px 0px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.util{
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.table-inner{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.table{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
@import "./index";
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue