twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加用户管理demo

Browse Source
This commit is contained in:
xiaoxian521
2022-04-18 00:30:10 +08:00
parent 9271997a30
commit 42b7e36e0d
14 changed files with 653 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/system/dept/index.vue
View File

@@ -64,10 +64,10 @@ onMounted(() => {
class="bg-white w-99/100 pl-8 pt-4"
>
<el-form-item label="部门名称：" prop="user">
<el-input v-model="form.user" placeholder="请输入" clearable />
<el-input v-model="form.user" placeholder="请输入部门名称" clearable />
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select v-model="form.status" placeholder="请选择" clearable>
<el-select v-model="form.status" placeholder="请选择状态" clearable>
<el-option label="开启" value="1" />
<el-option label="关闭" value="0" />
</el-select>

6
src/views/system/role/index.vue
View File

@@ -117,13 +117,13 @@ onMounted(() => {
class="bg-white w-99/100 pl-8 pt-4"
>
<el-form-item label="角色名称：" prop="name">
<el-input v-model="form.name" placeholder="请输入" clearable />
<el-input v-model="form.name" placeholder="请输入角色名称" clearable />
</el-form-item>
<el-form-item label="角色标识：" prop="code">
<el-input v-model="form.code" placeholder="请输入" clearable />
<el-input v-model="form.code" placeholder="请输入角色标识" clearable />
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select v-model="form.status" placeholder="请选择" clearable>
<el-select v-model="form.status" placeholder="请选择状态" clearable>
<el-option label="已开启" value="1" />
<el-option label="已关闭" value="0" />
</el-select>

528
src/views/system/user/index.vue
View File

@@ -5,218 +5,330 @@ export default {
</script>
<script setup lang="ts">
import { reactive } from "vue";
import { $t } from "/@/plugins/i18n";
import { VxeGridProps } from "vxe-table";
import dayjs from "dayjs";
import tree from "./tree.vue";
import { getUserList } from "/@/api/system";
import { FormInstance } from "element-plus";
import { ElMessageBox } from "element-plus";
import { reactive, ref, onMounted } from "vue";
import { EpTableProBar } from "/@/components/ReTable";
import { Switch, message } from "@pureadmin/components";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
const gridOptions = reactive({
border: true,
resizable: true,
keepSource: true,
height: 578,
printConfig: {},
importConfig: {},
exportConfig: {},
pagerConfig: {
perfect: true,
pageSize: 15
},
editConfig: {
trigger: "click",
mode: "row",
showStatus: true
},
toolbarConfig: {
buttons: [
{
code: "insert_actived",
name: $t("buttons.hsadd"),
status: "perfect",
icon: "fa fa-plus"
},
{
code: "mark_cancel",
name: $t("buttons.hsmark"),
status: "perfect",
icon: "fa fa-trash-o"
},
{
code: "save",
name: $t("buttons.hssave"),
status: "perfect",
icon: "fa fa-save"
}
],
perfect: true,
refresh: {
icon: "fa fa-refresh",
iconLoading: "fa fa-spinner fa-spin"
},
import: {
icon: "fa fa-upload"
},
export: {
icon: "fa fa-download"
},
print: {
icon: "fa fa-print"
},
zoom: {
iconIn: "fa fa-arrows-alt",
iconOut: "fa fa-expand"
},
custom: {
icon: "fa fa-cog"
}
},
proxyConfig: {
props: {
result: "result",
total: "page.total"
},
ajax: {
// 接收 Promise
query: ({ page }) => {
return new Promise(resolve => {
setTimeout(() => {
const list = [
{
id: 10001,
name: "Test1",
nickname: "T1",
role: "Develop",
sex: "Man",
age: 28,
address: "Shenzhen"
},
{
id: 10002,
name: "Test2",
nickname: "T2",
role: "Test",
sex: "Women",
age: 22,
address: "Guangzhou"
},
{
id: 10003,
name: "Test3",
nickname: "T3",
role: "PM",
sex: "Man",
age: 32,
address: "Shanghai"
},
{
id: 10004,
name: "Test4",
nickname: "T4",
role: "Designer",
sex: "Women ",
age: 23,
address: "Shenzhen"
},
{
id: 10005,
name: "Test5",
nickname: "T5",
role: "Develop",
sex: "Women ",
age: 30,
address: "Shanghai"
},
{
id: 10006,
name: "Test6",
nickname: "T6",
role: "Designer",
sex: "Women ",
age: 21,
address: "Shenzhen"
},
{
id: 10007,
name: "Test7",
nickname: "T7",
role: "Test",
sex: "Man ",
age: 29,
address: "vxe-table 从入门到放弃"
},
{
id: 10008,
name: "Test8",
nickname: "T8",
role: "Develop",
sex: "Man ",
age: 35,
address: "Shenzhen"
},
{
id: 10009,
name: "Test9",
nickname: "T9",
role: "Develop",
sex: "Man ",
age: 35,
address: "Shenzhen"
},
{
id: 100010,
name: "Test10",
nickname: "T10",
role: "Develop",
sex: "Man ",
age: 35,
address: "Guangzhou"
}
];
resolve({
page: {
total: list.length
},
result: list.slice(
(page.currentPage - 1) * page.pageSize,
page.currentPage * page.pageSize
)
});
}, 100);
});
},
// body 对象： { removeRecords }
delete: () => {
return new Promise(resolve => {
setTimeout(() => {
resolve({});
}, 100);
});
},
// body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
save: () => {
return new Promise(resolve => {
setTimeout(() => {
resolve({});
}, 100);
});
}
}
},
columns: [
{ type: "checkbox", width: 50 },
{ type: "seq", width: 60 },
{ field: "name", title: "Name", editRender: { name: "input" } },
{ field: "nickname", title: "Nickname", editRender: { name: "input" } },
{ field: "role", title: "Role", editRender: { name: "input" } },
const form = reactive({
username: "",
mobile: "",
status: ""
});
let dataList = ref([]);
let pageSize = ref(10);
let totalPage = ref(0);
let loading = ref(true);
let switchLoadMap = ref({});
const formRef = ref<FormInstance>();
function handleUpdate(row) {
console.log(row);
}
function handleDelete(row) {
console.log(row);
}
function handleCurrentChange(val: number) {
console.log(`current page: ${val}`);
}
function handleSizeChange(val: number) {
console.log(`${val} items per page`);
}
function handleSelectionChange(val) {
console.log("handleSelectionChange", val);
}
function onChange(checked, { $index, row }) {
ElMessageBox.confirm(
`确认要<strong>${
row.status === 0 ? "停用" : "启用"
}</strong><strong style='color:var(--el-color-primary)'>${
row.username
}</strong>用户吗?`,
"系统提示",
{
field: "address",
title: "Address",
showOverflow: true,
editRender: { name: "input" }
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
draggable: true
}
]
} as VxeGridProps);
)
.then(() => {
switchLoadMap.value[$index] = Object.assign(
{},
switchLoadMap.value[$index],
{
loading: true
}
);
setTimeout(() => {
switchLoadMap.value[$index] = Object.assign(
{},
switchLoadMap.value[$index],
{
loading: false
}
);
message.success("已成功修改用户状态");
}, 300);
})
.catch(() => {
row.status === 0 ? (row.status = 1) : (row.status = 0);
});
}
async function onSearch() {
loading.value = true;
let { data } = await getUserList();
dataList.value = data.list;
totalPage.value = data.total;
setTimeout(() => {
loading.value = false;
}, 500);
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
onSearch();
};
onMounted(() => {
onSearch();
});
</script>
<template>
<vxe-grid v-bind="gridOptions" />
<div class="main flex">
<tree />
<div class="flex-1 ml-4">
<el-form
ref="formRef"
:inline="true"
:model="form"
class="bg-white w-99/100 pl-8 pt-4"
>
<el-form-item label="用户名称：" prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名称"
clearable
/>
</el-form-item>
<el-form-item label="手机号码：" prop="mobile">
<el-input
v-model="form.mobile"
placeholder="请输入手机号码"
clearable
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select v-model="form.status" placeholder="请选择" clearable>
<el-option label="已开启" value="1" />
<el-option label="已关闭" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon('search')"
:loading="loading"
@click="onSearch"
>
搜索
</el-button>
<el-button
:icon="useRenderIcon('refresh')"
@click="resetForm(formRef)"
>
重置
</el-button>
</el-form-item>
</el-form>
<EpTableProBar
title="用户管理"
:loading="loading"
:dataList="dataList"
@refresh="onSearch"
>
<template #buttons>
<el-button type="primary" :icon="useRenderIcon('add')">
新增用户
</el-button>
</template>
<template v-slot="{ size, checkList }">
<el-table
border
table-layout="auto"
:size="size"
:data="dataList"
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
@selection-change="handleSelectionChange"
>
<el-table-column
v-if="checkList.includes('勾选列')"
type="selection"
align="center"
width="55"
/>
<el-table-column
v-if="checkList.includes('序号列')"
type="index"
label="序号"
align="center"
width="70"
/>
<el-table-column label="用户编号" align="center" prop="id" />
<el-table-column label="用户名称" align="center" prop="username" />
<el-table-column label="用户昵称" align="center" prop="nickname" />
<el-table-column label="性别" align="center" prop="sex">
<template #default="scope">
<el-tag
:size="size"
:type="scope.row.sex === 1 ? 'danger' : ''"
effect="plain"
>
{{ scope.row.sex === 1 ? "女" : "男" }}
</el-tag>
</template>
</el-table-column>
<el-table-column
label="部门"
align="center"
prop="dept"
:formatter="
({ dept }) => {
return dept.name;
}
"
/>
<el-table-column label="手机号码" align="center" prop="mobile" />
<el-table-column
label="状态"
align="center"
width="130"
prop="status"
>
<template #default="scope">
<Switch
:size="size === 'small' ? 'small' : 'default'"
:loading="switchLoadMap[scope.$index]?.loading"
v-model:checked="scope.row.status"
:checkedValue="1"
:unCheckedValue="0"
checked-children="已开启"
un-checked-children="已关闭"
@change="checked => onChange(checked, scope)"
/>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
width="180"
prop="createTime"
:formatter="
({ createTime }) => {
return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
}
"
/>
<el-table-column
fixed="right"
label="操作"
width="180"
align="center"
>
<template #default="scope">
<el-button
class="reset-margin"
type="text"
:size="size"
@click="handleUpdate(scope.row)"
:icon="useRenderIcon('edits')"
>
修改
</el-button>
<el-popconfirm title="是否确认删除?">
<template #reference>
<el-button
class="reset-margin"
type="text"
:size="size"
:icon="useRenderIcon('delete')"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-popconfirm>
<el-dropdown>
<el-button
class="ml-3"
type="text"
:size="size"
@click="handleUpdate(scope.row)"
:icon="useRenderIcon('more')"
/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
:size="size"
:icon="useRenderIcon('password')"
>
重置密码
</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
:size="size"
:icon="useRenderIcon('role')"
>
分配角色
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<el-pagination
class="flex justify-end mt-4"
:small="size === 'small' ? true : false"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 50]"
:background="true"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
</EpTableProBar>
</div>
</div>
</template>
<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
</style>

187
src/views/system/user/tree.vue Normal file
View File

@@ -0,0 +1,187 @@
<script lang="ts" setup>
import type { ElTree } from "element-plus";
import { handleTree } from "/@/utils/tree";
import { getDeptList } from "/@/api/system";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { ref, watch, onMounted, getCurrentInstance } from "vue";
interface Tree {
id: number;
name: string;
highlight?: boolean;
children?: Tree[];
}
const defaultProps = {
children: "children",
label: "name"
};
const treeData = ref([]);
const searchValue = ref("");
const { proxy } = getCurrentInstance();
const treeRef = ref<InstanceType<typeof ElTree>>();
let highlightMap = ref({});
const filterNode = (value: string, data: Tree) => {
if (!value) return true;
return data.name.includes(value);
};
function nodeClick(value) {
const nodeId = value.$treeNodeId;
highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
highlight: false
})
: Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
highlight: true
});
Object.values(highlightMap.value).forEach((v: Tree) => {
if (v.id !== nodeId) {
v.highlight = false;
}
});
}
function toggleRowExpansionAll(status) {
// @ts-expect-error
let nodes = proxy.$refs["treeRef"].store._getAllNodes();
for (var i = 0; i < nodes.length; i++) {
nodes[i].expanded = status;
}
}
// 重置状态（选中状态、搜索框值、树初始化）
function onReset() {
highlightMap.value = {};
searchValue.value = "";
toggleRowExpansionAll(true);
}
watch(searchValue, val => {
treeRef.value!.filter(val);
});
onMounted(async () => {
let { data } = await getDeptList();
treeData.value = handleTree(data);
});
</script>
<template>
<div class="max-w-260px h-full min-h-780px bg-white">
<div class="flex items-center h-34px">
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
部门列表
</p>
<el-input
style="flex: 2"
size="small"
v-model="searchValue"
placeholder="请输入部门名称"
clearable
>
<template #suffix>
<el-icon class="el-input__icon">
<IconifyIconOffline
v-show="searchValue.length === 0"
icon="search"
/>
</el-icon>
</template>
</el-input>
<el-dropdown>
<IconifyIconOffline
class="w-28px cursor-pointer"
width="18px"
icon="more-vertical"
/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
:icon="useRenderIcon('expand')"
@click="toggleRowExpansionAll(true)"
>
展开全部
</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
:icon="useRenderIcon('unExpand')"
@click="toggleRowExpansionAll(false)"
>
折叠全部
</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
type="text"
:icon="useRenderIcon('reset')"
@click="onReset"
>
重置状态
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-divider />
<el-tree
ref="treeRef"
:data="treeData"
node-key="id"
size="small"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="nodeClick"
>
<template #default="{ node, data }">
<span
:class="[
'pl-1',
'pr-1',
'rounded',
'flex',
'items-center',
'select-none',
searchValue.trim().length > 0 &&
node.label.includes(searchValue) &&
'text-red-500'
]"
:style="{
background: highlightMap[node.id]?.highlight
? 'var(--el-color-primary-light-7)'
: 'transparent'
}"
>
<IconifyIconOffline
:icon="
data.type === 1
? 'office-building'
: data.type === 2
? 'location-company'
: 'dept'
"
/>
{{ node.label }}
</span>
</template>
</el-tree>
</div>
</template>
<style lang="scss" scoped>
:deep(.el-divider) {
margin: 0;
}
</style>