Merge 2dd7cbfa15
into 6a7019ec1a
commit
2ac81dd9df
|
@ -3,8 +3,9 @@
|
||||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :currentPage="page.index"
|
||||||
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
|
:pageSize="page.size" :viewFunc="handleView" :delFunc="handleDelete" :changePage="changePage"
|
||||||
|
:editFunc="handleEdit">
|
||||||
<template #toolbarBtn>
|
<template #toolbarBtn>
|
||||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||||
</template>
|
</template>
|
||||||
|
@ -42,7 +43,7 @@ import { Role } from '@/types/role';
|
||||||
import { fetchRoleData } from '@/api';
|
import { fetchRoleData } from '@/api';
|
||||||
import TableCustom from '@/components/table-custom.vue';
|
import TableCustom from '@/components/table-custom.vue';
|
||||||
import TableDetail from '@/components/table-detail.vue';
|
import TableDetail from '@/components/table-detail.vue';
|
||||||
import RolePermission from './role-permission.vue'
|
import RolePermission from './role-permission.vue';
|
||||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||||
import { FormOption, FormOptionList } from '@/types/form-option';
|
import { FormOption, FormOptionList } from '@/types/form-option';
|
||||||
|
|
||||||
|
@ -52,7 +53,7 @@ const query = reactive({
|
||||||
});
|
});
|
||||||
const searchOpt = ref<FormOptionList[]>([
|
const searchOpt = ref<FormOptionList[]>([
|
||||||
{ type: 'input', label: '角色名称:', prop: 'name' }
|
{ type: 'input', label: '角色名称:', prop: 'name' }
|
||||||
])
|
]);
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
changePage(1);
|
changePage(1);
|
||||||
};
|
};
|
||||||
|
@ -65,15 +66,15 @@ let columns = ref([
|
||||||
{ prop: 'status', label: '状态' },
|
{ prop: 'status', label: '状态' },
|
||||||
{ prop: 'permissions', label: '权限管理' },
|
{ prop: 'permissions', label: '权限管理' },
|
||||||
{ prop: 'operator', label: '操作', width: 250 },
|
{ prop: 'operator', label: '操作', width: 250 },
|
||||||
])
|
]);
|
||||||
const page = reactive({
|
const page = reactive({
|
||||||
index: 1,
|
index: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
})
|
});
|
||||||
const tableData = ref<Role[]>([]);
|
const tableData = ref<Role[]>([]);
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
const res = await fetchRoleData()
|
const res = await fetchRoleData();
|
||||||
tableData.value = res.data.list;
|
tableData.value = res.data.list;
|
||||||
page.total = res.data.pageTotal;
|
page.total = res.data.pageTotal;
|
||||||
};
|
};
|
||||||
|
@ -92,7 +93,7 @@ const options = ref<FormOption>({
|
||||||
{ type: 'input', label: '角色标识', prop: 'key', required: true },
|
{ type: 'input', label: '角色标识', prop: 'key', required: true },
|
||||||
{ type: 'switch', label: '状态', prop: 'status', required: false, activeText: '启用', inactiveText: '禁用' },
|
{ type: 'switch', label: '状态', prop: 'status', required: false, activeText: '启用', inactiveText: '禁用' },
|
||||||
]
|
]
|
||||||
})
|
});
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const isEdit = ref(false);
|
const isEdit = ref(false);
|
||||||
const rowData = ref({});
|
const rowData = ref({});
|
||||||
|
@ -119,7 +120,7 @@ const viewData = ref({
|
||||||
column: 1
|
column: 1
|
||||||
});
|
});
|
||||||
const handleView = (row: Role) => {
|
const handleView = (row: Role) => {
|
||||||
viewData.value.row = { ...row }
|
viewData.value.row = { ...row };
|
||||||
viewData.value.list = [
|
viewData.value.list = [
|
||||||
{
|
{
|
||||||
prop: 'id',
|
prop: 'id',
|
||||||
|
@ -137,26 +138,26 @@ const handleView = (row: Role) => {
|
||||||
prop: 'status',
|
prop: 'status',
|
||||||
label: '角色状态',
|
label: '角色状态',
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
visible1.value = true;
|
visible1.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 删除相关
|
// 删除相关
|
||||||
const handleDelete = (row: Role) => {
|
const handleDelete = (row: Role) => {
|
||||||
ElMessage.success('删除成功');
|
ElMessage.success('删除成功');
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
// 权限管理弹窗相关
|
// 权限管理弹窗相关
|
||||||
const visible2 = ref(false);
|
const visible2 = ref(false);
|
||||||
const permissOptions = ref({})
|
const permissOptions = ref({});
|
||||||
const handlePermission = (row: Role) => {
|
const handlePermission = (row: Role) => {
|
||||||
visible2.value = true;
|
visible2.value = true;
|
||||||
permissOptions.value = {
|
permissOptions.value = {
|
||||||
id: row.id,
|
id: row.id,
|
||||||
permiss: row.permiss
|
permiss: row.permiss
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
|
@ -2,8 +2,9 @@
|
||||||
<div>
|
<div>
|
||||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :currentPage="page.index"
|
||||||
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
|
:pageSize="page.size" :viewFunc="handleView" :delFunc="handleDelete" :changePage="changePage"
|
||||||
|
:editFunc="handleEdit">
|
||||||
<template #toolbarBtn>
|
<template #toolbarBtn>
|
||||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||||
</template>
|
</template>
|
||||||
|
@ -37,7 +38,7 @@ const query = reactive({
|
||||||
});
|
});
|
||||||
const searchOpt = ref<FormOptionList[]>([
|
const searchOpt = ref<FormOptionList[]>([
|
||||||
{ type: 'input', label: '用户名:', prop: 'name' }
|
{ type: 'input', label: '用户名:', prop: 'name' }
|
||||||
])
|
]);
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
changePage(1);
|
changePage(1);
|
||||||
};
|
};
|
||||||
|
@ -49,15 +50,15 @@ let columns = ref([
|
||||||
{ prop: 'phone', label: '手机号' },
|
{ prop: 'phone', label: '手机号' },
|
||||||
{ prop: 'role', label: '角色' },
|
{ prop: 'role', label: '角色' },
|
||||||
{ prop: 'operator', label: '操作', width: 250 },
|
{ prop: 'operator', label: '操作', width: 250 },
|
||||||
])
|
]);
|
||||||
const page = reactive({
|
const page = reactive({
|
||||||
index: 1,
|
index: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
})
|
});
|
||||||
const tableData = ref<User[]>([]);
|
const tableData = ref<User[]>([]);
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
const res = await fetchUserData()
|
const res = await fetchUserData();
|
||||||
tableData.value = res.data.list;
|
tableData.value = res.data.list;
|
||||||
page.total = res.data.pageTotal;
|
page.total = res.data.pageTotal;
|
||||||
};
|
};
|
||||||
|
@ -79,7 +80,7 @@ let options = ref<FormOption>({
|
||||||
{ type: 'input', label: '邮箱', prop: 'email', required: true },
|
{ type: 'input', label: '邮箱', prop: 'email', required: true },
|
||||||
{ type: 'input', label: '角色', prop: 'role', required: true },
|
{ type: 'input', label: '角色', prop: 'role', required: true },
|
||||||
]
|
]
|
||||||
})
|
});
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const isEdit = ref(false);
|
const isEdit = ref(false);
|
||||||
const rowData = ref({});
|
const rowData = ref({});
|
||||||
|
@ -105,7 +106,7 @@ const viewData = ref({
|
||||||
list: []
|
list: []
|
||||||
});
|
});
|
||||||
const handleView = (row: User) => {
|
const handleView = (row: User) => {
|
||||||
viewData.value.row = { ...row }
|
viewData.value.row = { ...row };
|
||||||
viewData.value.list = [
|
viewData.value.list = [
|
||||||
{
|
{
|
||||||
prop: 'id',
|
prop: 'id',
|
||||||
|
@ -135,14 +136,14 @@ const handleView = (row: User) => {
|
||||||
prop: 'date',
|
prop: 'date',
|
||||||
label: '注册日期',
|
label: '注册日期',
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
visible1.value = true;
|
visible1.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 删除相关
|
// 删除相关
|
||||||
const handleDelete = (row: User) => {
|
const handleDelete = (row: User) => {
|
||||||
ElMessage.success('删除成功');
|
ElMessage.success('删除成功');
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
|
@ -2,9 +2,9 @@
|
||||||
<div>
|
<div>
|
||||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :currentPage="page.index"
|
||||||
:delFunc="handleDelete" :editFunc="handleEdit" :refresh="getData" :currentPage="page.index"
|
:pageSize="page.size" :viewFunc="handleView" :delFunc="handleDelete" :editFunc="handleEdit"
|
||||||
:changePage="changePage">
|
:refresh="getData" :changePage="changePage">
|
||||||
<template #toolbarBtn>
|
<template #toolbarBtn>
|
||||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||||
</template>
|
</template>
|
||||||
|
@ -59,7 +59,7 @@ const query = reactive({
|
||||||
});
|
});
|
||||||
const searchOpt = ref<FormOptionList[]>([
|
const searchOpt = ref<FormOptionList[]>([
|
||||||
{ type: 'input', label: '用户名:', prop: 'name' }
|
{ type: 'input', label: '用户名:', prop: 'name' }
|
||||||
])
|
]);
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
changePage(1);
|
changePage(1);
|
||||||
};
|
};
|
||||||
|
@ -73,15 +73,15 @@ let columns = ref([
|
||||||
{ prop: 'thumb', label: '头像' },
|
{ prop: 'thumb', label: '头像' },
|
||||||
{ prop: 'state', label: '账户状态' },
|
{ prop: 'state', label: '账户状态' },
|
||||||
{ prop: 'operator', label: '操作', width: 250 },
|
{ prop: 'operator', label: '操作', width: 250 },
|
||||||
])
|
]);
|
||||||
const page = reactive({
|
const page = reactive({
|
||||||
index: 1,
|
index: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
total: 200,
|
total: 200,
|
||||||
})
|
});
|
||||||
const tableData = ref<TableItem[]>([]);
|
const tableData = ref<TableItem[]>([]);
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
const res = await fetchData()
|
const res = await fetchData();
|
||||||
tableData.value = res.data.list;
|
tableData.value = res.data.list;
|
||||||
};
|
};
|
||||||
getData();
|
getData();
|
||||||
|
@ -101,7 +101,7 @@ let options = ref<FormOption>({
|
||||||
{ type: 'switch', activeText: '正常', inactiveText: '异常', label: '账户状态', prop: 'state', required: true },
|
{ type: 'switch', activeText: '正常', inactiveText: '异常', label: '账户状态', prop: 'state', required: true },
|
||||||
{ type: 'upload', label: '头像', prop: 'thumb', required: true },
|
{ type: 'upload', label: '头像', prop: 'thumb', required: true },
|
||||||
]
|
]
|
||||||
})
|
});
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const isEdit = ref(false);
|
const isEdit = ref(false);
|
||||||
const rowData = ref({});
|
const rowData = ref({});
|
||||||
|
@ -127,7 +127,7 @@ const viewData = ref({
|
||||||
list: []
|
list: []
|
||||||
});
|
});
|
||||||
const handleView = (row: TableItem) => {
|
const handleView = (row: TableItem) => {
|
||||||
viewData.value.row = { ...row }
|
viewData.value.row = { ...row };
|
||||||
viewData.value.list = [
|
viewData.value.list = [
|
||||||
{
|
{
|
||||||
prop: 'id',
|
prop: 'id',
|
||||||
|
@ -149,14 +149,14 @@ const handleView = (row: TableItem) => {
|
||||||
prop: 'thumb',
|
prop: 'thumb',
|
||||||
label: '头像',
|
label: '头像',
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
visible1.value = true;
|
visible1.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 删除相关
|
// 删除相关
|
||||||
const handleDelete = (row: TableItem) => {
|
const handleDelete = (row: TableItem) => {
|
||||||
ElMessage.success('删除成功');
|
ElMessage.success('删除成功');
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
Loading…
Reference in New Issue