<script setup name="user">
|
import { ref, reactive, onMounted } from "vue";
|
import { useUserStore } from "@/stores/user";
|
import { storeToRefs } from "pinia";
|
import { Search, Plus } from "@element-plus/icons-vue";
|
import addEdit from "./addEdit.vue";
|
import { ElMessage } from "element-plus";
|
import useElement from "@/hooks/useElement.js";
|
import {
|
getAllUser,
|
deleteUser,
|
dropRole,
|
improveRole,
|
resetSnId,
|
} from "./api";
|
|
const { $loading, $message, $confirm } = useElement();
|
// const $message = ElMessage;
|
const headers = [
|
{
|
prop: "uname",
|
label: "姓名",
|
width: "",
|
},
|
{
|
prop: "createTime",
|
label: "创建时间",
|
width: "",
|
},
|
// {
|
// prop: "canDownload",
|
// label: "控制权限",
|
// width: "",
|
// },
|
];
|
const pageCurr = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const addEditVisible = ref(false);
|
const dialogTitle = ref("");
|
const datas = reactive({
|
tableData: [],
|
userInfo: {},
|
});
|
// const tableData = reactive([]);
|
// const userInfo = reactive({});
|
|
const userStore = useUserStore();
|
const { uid, uname } = storeToRefs(userStore);
|
|
function getList() {
|
let loading = $loading();
|
getAllUser(pageCurr.value, pageSize.value)
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let list = [];
|
let _total = 0;
|
if (code && data) {
|
// console.log(data);
|
list = data2.list.map((v) => {
|
v.canDownload = v.udownloadRole ? "有" : "无";
|
return v;
|
});
|
_total = data2.total;
|
}
|
loading.close();
|
// tableData.length = 0;
|
// tableData.push(...list);
|
datas.tableData = list;
|
total.value = _total;
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
// 展示数据数量
|
function handleSizeChange(val) {
|
pageSize.value = val;
|
getList();
|
}
|
// 翻页
|
function handleCurrentChange(val) {
|
pageCurr.value = val;
|
getList();
|
}
|
function addUser() {
|
dialogTitle.value = "添加用户";
|
datas.userInfo = undefined;
|
addEditVisible.value = true;
|
}
|
function edit(record) {
|
dialogTitle.value = "编辑用户";
|
addEditVisible.value = true;
|
datas.userInfo = record;
|
}
|
function confirmRemove(record) {
|
$confirm("删除该用户", () => {
|
remove(record.uid);
|
});
|
}
|
function remove(uid) {
|
let loading = $loading();
|
deleteUser(uid)
|
.then((res) => {
|
let { code, data } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
handleCurrentChange(1);
|
} else {
|
$message.success("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
function onOk() {
|
addEditVisible.value = false;
|
handleCurrentChange(1);
|
}
|
function onCanel() {
|
addEditVisible.value = false;
|
}
|
function improveRolefn(record) {
|
let loading = $loading();
|
improveRole(record.uid)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success(msg);
|
getList();
|
} else {
|
$message.error(msg);
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
function dropRolefn(record) {
|
let loading = $loading();
|
dropRole(record.uid)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
loading.close();
|
if (code && data) {
|
$message.success(msg);
|
getList();
|
} else {
|
$message.error(msg);
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
function resetSnIdfn(record) {
|
$confirm("重置该用户密码", () => {
|
let loading = $loading();
|
resetSnId(record.uid).then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
$message.success(msg);
|
} else {
|
$message.error(msg);
|
}
|
loading.close();
|
});
|
});
|
}
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<template>
|
<div class="p-container">
|
<div class="p-header">
|
<div class="title">用户列表</div>
|
<div class="btn-grp">
|
<el-button
|
type="primary"
|
round
|
size="small"
|
@click="addUser"
|
:icon="Plus"
|
>添加</el-button
|
>
|
<el-button
|
type="primary"
|
round
|
size="small"
|
@click="getList"
|
:icon="Search"
|
>查询</el-button
|
>
|
</div>
|
</div>
|
<div class="p-content posR">
|
<!-- 用户列表 -->
|
<div class="table-wrap posR">
|
<div class="pos-full">
|
<el-table
|
class="yc-table"
|
stripe
|
height="100%"
|
size="small"
|
:data="datas.tableData"
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
v-for="header in headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:min-width="header.width"
|
align="center"
|
></el-table-column>
|
<el-table-column label="操作" width="360" align="center">
|
<template #default="scope">
|
<!-- <el-button
|
type="primary"
|
size="small"
|
:disabled="scope.row.uid == uid"
|
@click="edit(scope.row)"
|
>编辑</el-button
|
> -->
|
<el-button
|
type="primary"
|
size="small"
|
:disabled="scope.row.uid == uid"
|
@click="resetSnIdfn(scope.row)"
|
>重置密码</el-button
|
>
|
<el-button
|
type="danger"
|
size="small"
|
:disabled="scope.row.uid == uid"
|
@click="confirmRemove(scope.row)"
|
>删除</el-button
|
>
|
<el-button
|
type="success"
|
v-if="scope.row.uid > 1000"
|
size="small"
|
@click="improveRolefn(scope.row)"
|
>加入管理员组</el-button
|
>
|
<el-button
|
type="danger"
|
v-else
|
:disabled="scope.row.uid == uid"
|
size="small"
|
@click="dropRolefn(scope.row)"
|
>移出管理员组</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<!-- 底部 -->
|
<!-- 底部分页 -->
|
<el-pagination
|
class="yc-pagination"
|
:current-page="pageCurr"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
|
<!-- 弹窗 -->
|
<el-dialog
|
:title="dialogTitle"
|
v-model="addEditVisible"
|
top="0"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
width="700px"
|
center
|
>
|
<add-edit
|
v-if="addEditVisible"
|
@success="onOk"
|
:info="datas.userInfo"
|
@cancel="onCanel"
|
></add-edit>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.p-container {
|
height: 100%;
|
padding: 0 8px;
|
display: flex;
|
flex-direction: column;
|
.p-header {
|
display: flex;
|
align-items: center;
|
.title {
|
font-size: 20px;
|
font-weight: bold;
|
}
|
}
|
.p-content {
|
flex: 1;
|
margin-top: 4px;
|
display: flex;
|
flex-direction: column;
|
.table-wrap {
|
flex: 1;
|
margin-top: 6px;
|
margin-bottom: 6px;
|
}
|
}
|
}
|
.btn-grp {
|
padding: 0.6em;
|
}
|
</style>
|
