<script setup name="UserManage">
|
import { ref, reactive, onMounted, computed } from "vue";
|
import { storeToRefs } from "pinia";
|
import { Search, Plus } from "@element-plus/icons-vue";
|
import ycCard from "@/components/ycCard/index.vue";
|
import addEdit from "./addEdit.vue";
|
import { ElMessage } from "element-plus";
|
import useElement from "@/hooks/useElement.js";
|
import { useUserStore } from '@/store/user';
|
const userStore = useUserStore();
|
const { uid, uname } = storeToRefs(userStore);
|
|
import {
|
getAllUser,
|
deleteUser,
|
dropRole,
|
improveRole,
|
resetSnId,
|
} from "@/api/user";
|
|
const { $loading, $message, $confirm } = useElement();
|
|
// const $message = ElMessage;
|
const headers = [
|
{
|
prop: "uname",
|
label: "用户名",
|
width: "",
|
},
|
{
|
prop: "realName",
|
label: "姓名",
|
width: "",
|
},
|
{
|
prop: "phoneNumber",
|
label: "电话",
|
width: "",
|
},
|
{
|
prop: "address",
|
label: "地址",
|
width: "",
|
},
|
{
|
prop: "createTime",
|
label: "创建时间",
|
width: "",
|
},
|
// {
|
// prop: "canDownload",
|
// label: "控制权限",
|
// width: "",
|
// },
|
];
|
const background = ref(true);
|
const disabled = ref(false);
|
const pageCurr = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const addEditVisible = ref(false);
|
const dialogTitle = ref("");
|
const currentAreaId = ref();
|
const currentAreaIds = 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(currentAreaId.value, pageCurr.value, pageSize.value)
|
.then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
let _total = 0;
|
if (code && data) {
|
// console.log(data);
|
list = data2.list;
|
_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 = { areaId: [currentAreaIds.value] };
|
addEditVisible.value = true;
|
}
|
function edit(record) {
|
dialogTitle.value = "编辑用户";
|
addEditVisible.value = true;
|
console.log(record, '=======edit======');
|
// if (record.ainfList.idPath) {
|
// ids = record.ainfList.idPath.split("_").map((v) => v * 1);
|
// }
|
// ids.push(record.areaId);
|
|
datas.userInfo = { ...record };
|
}
|
function confirmRemove(record) {
|
$confirm("删除该用户", () => {
|
remove(record.uname);
|
});
|
}
|
function remove(uname) {
|
let loading = $loading();
|
deleteUser(uname)
|
.then((res) => {
|
let { code, data } = res;
|
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;
|
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;
|
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;
|
if (code && data) {
|
$message.success(msg);
|
} else {
|
$message.error(msg);
|
}
|
loading.close();
|
});
|
});
|
}
|
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<!-- <div class="page-header">
|
</div> -->
|
<div class="page-content">
|
<yc-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<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 class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table class="yc-table" stripe height="100%" size="small" :data="datas.tableData" style="width: 100%">
|
<el-table-column type="index" fixed="left" 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.uname == uname"
|
@click="edit(scope.row)">编辑</el-button>
|
<el-button type="primary" size="small" :disabled="scope.row.uname == uname"
|
@click="resetSnIdfn(scope.row)">重置密码</el-button>
|
<el-button type="danger" size="small" :disabled="scope.row.uname == uname"
|
@click="confirmRemove(scope.row)">删除</el-button>
|
<el-button
|
type="success"
|
v-if="scope.row.uid > 10000"
|
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>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="el-page-container">
|
<el-pagination v-model:current-page="pageCurr" v-model:page-size="pageSize"
|
:page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small" :disabled="disabled"
|
:background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<div class="page-footer"></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="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
border-top: 1px solid var(--border-light-color);
|
box-sizing: border-box;
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
.filter-label {
|
display: inline-block;
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
