diff --git a/src/mock/system.ts b/src/mock/system.ts
index 5c477fc..d81bcee 100644
--- a/src/mock/system.ts
+++ b/src/mock/system.ts
@@ -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',
},
diff --git a/src/views/system/role/components/roleDrawer.vue b/src/views/system/role/components/roleDrawer.vue
new file mode 100644
index 0000000..db8f388
--- /dev/null
+++ b/src/views/system/role/components/roleDrawer.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 77dcd49..1900cab 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,25 +1,33 @@
+
diff --git a/src/views/system/user/index.scss b/src/views/system/user/index.scss
new file mode 100644
index 0000000..726b612
--- /dev/null
+++ b/src/views/system/user/index.scss
@@ -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%
+ }
+}
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index b052952..d40cb9e 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,34 +1,42 @@
-
-
-
-
-
-
-
-
-
-
- 男
- 女
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -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()
- const ruleFormRef1 = ref()
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)
- }
- })
- }