twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2026-02-13 17:30:27 +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

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>