327 lines
9.0 KiB
Vue
327 lines
9.0 KiB
Vue
<template>
|
|
<div class="percentage-content">
|
|
<div class="content">
|
|
<div style="margin-bottom: 16px;" class="h-layout space-between h-center">
|
|
<div>
|
|
<div class="h-layout" style="display: flex;align-items: center;">
|
|
<div class="tool-item" @click="getList">
|
|
<svg-icon name="refurbish" class="icon" />
|
|
<span>刷新</span>
|
|
</div>
|
|
<div
|
|
class="tool-item"
|
|
@click="(dialogVisible = true), (form = {}), (readonly = false)"
|
|
>
|
|
<svg-icon name="add" class="icon" />
|
|
<span>新增</span>
|
|
</div>
|
|
<div class="tool-item" @click="getList">
|
|
<svg-icon name="export" class="icon" />
|
|
<span>导出</span>
|
|
</div>
|
|
<div class="label-select filter-tab">
|
|
<label>岗位</label>
|
|
<el-tree-select
|
|
v-model="listperformid"
|
|
:data="postTree"
|
|
:render-after-expand="false"
|
|
check-strictly
|
|
:filter-node-method="filterPostMethod"
|
|
filterable
|
|
clearable
|
|
@change="getList"
|
|
/>
|
|
</div>
|
|
<!-- <div
|
|
v-if="tableCheckBoxs.length > 0"
|
|
class="tool-item"
|
|
@click="deletelist"
|
|
>
|
|
<svg-icon name="delete" class="icon" />
|
|
<span>删除</span>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div style="width: 30%;">
|
|
<div>
|
|
<el-input
|
|
v-model="search"
|
|
@keydown.enter.native="getList"
|
|
placeholder="请输入用户名"
|
|
class="search-input"
|
|
>
|
|
<template #append>
|
|
<span @click="getList" class="search-bottom">
|
|
<svg-icon name="search" class="icon_class" />
|
|
<span>搜索</span>
|
|
</span>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
ref="loading"
|
|
v-loading="tableDataloading"
|
|
:data="tableData"
|
|
header-row-class-name="el-one-header"
|
|
@selection-change="handleSelectionChange"
|
|
border
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
align="center"
|
|
label="序列"
|
|
width="55"
|
|
></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
:resizable="true"
|
|
width="100"
|
|
label="序列"
|
|
>
|
|
<template #default="scope">
|
|
{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="sysusername"
|
|
:resizable="true"
|
|
align="center"
|
|
label="用户名"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="chinaname"
|
|
:resizable="true"
|
|
align="center"
|
|
label="姓名"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="unitName"
|
|
:resizable="true"
|
|
align="center"
|
|
label="所属部门"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="performName"
|
|
:resizable="true"
|
|
align="center"
|
|
label="职务"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="usertype"
|
|
:resizable="true"
|
|
align="center"
|
|
label="用户类型"
|
|
>
|
|
<template #default="scope">
|
|
<span>{{scope.row.usertype==1?'政府用户':scope.row.usertype==2?'党员':'群众'}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="state"
|
|
:resizable="true"
|
|
align="center"
|
|
label="状态"
|
|
>
|
|
<template #default="scope">
|
|
<el-switch
|
|
v-model="scope.row.delState"
|
|
active-text="启用"
|
|
inactive-text="禁用"
|
|
:active-value="1"
|
|
:inactive-value="2"
|
|
@change="staShow(scope.row)"
|
|
>
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
width="200"
|
|
label="操作"
|
|
>
|
|
<template #default="scope">
|
|
<span
|
|
class="operate"
|
|
@click="
|
|
(dialogVisible = true), (form = scope.row), (readonly = false)
|
|
"
|
|
>
|
|
<svg-icon name="edit" class="icon"></svg-icon>
|
|
<span class="edit">编辑</span>
|
|
</span>
|
|
<span
|
|
class="operate"
|
|
@click="
|
|
(dialogVisible = true), (form = scope.row), (readonly = true)
|
|
"
|
|
>
|
|
<svg-icon name="detail" class="icon"></svg-icon>
|
|
<span class="detail">详情</span>
|
|
</span>
|
|
<!-- <span class="operate">
|
|
<svg-icon name="delete" class="icon"></svg-icon>
|
|
<span class="delete">删除</span>
|
|
</span> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
class="pagination"
|
|
@size-change="getList"
|
|
@current-change="getList"
|
|
v-model:current-page.sync="currentPage"
|
|
:page-sizes="[10, 15, 20, 30]"
|
|
v-model:page-size.sync="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
background
|
|
>
|
|
</el-pagination>
|
|
<!-- 新增 -->
|
|
<Adddetails
|
|
:visible="dialogVisible"
|
|
:form="form"
|
|
:readonly="readonly"
|
|
@close="onclone"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang='ts' setup>
|
|
import { onMounted, reactive, ref } from "vue";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import { getUserPage, delUser } from "@/api/Sys";
|
|
import { userListperformTree } from "@/api/Sys";
|
|
import Adddetails from "./details.vue";
|
|
import useUserStore from "@/store/modules/user";
|
|
const userStore = useUserStore();
|
|
const user = ref(JSON.parse(userStore.userInfo));
|
|
const userId = ref(user.value.userId);
|
|
const search = ref([]);
|
|
const tableData = ref([]);
|
|
const currentPage = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(0);
|
|
|
|
const dialogVisible = ref(false);
|
|
const form = ref({});
|
|
const readonly = ref(false);
|
|
|
|
//列表选中
|
|
const tableCheckBoxs = ref([]);
|
|
const handleSelectionChange = (val: any) => {
|
|
tableCheckBoxs.value = [];
|
|
for (let index = 0; index < val.length; index++) {
|
|
const element = val[index];
|
|
tableCheckBoxs.value.push(element.sysuserid);
|
|
}
|
|
};
|
|
|
|
const listperformid = ref('')
|
|
//组织list
|
|
const postTree = ref([]);
|
|
/**筛选组织*/
|
|
const filterPostMethod = (value, data) => data.label.includes(value);
|
|
/**
|
|
* 获取组织
|
|
*/
|
|
const getPostTree = () => {
|
|
userListperformTree().then((res: any) => {
|
|
if (res.code == 1) postTree.value = handlePostData(res.data);
|
|
});
|
|
};
|
|
/**处理组织数据 */
|
|
let handlePostData = (list) => {
|
|
let data = list.map((item) => {
|
|
return {
|
|
label: item.chinaName ? item.performclassname + '-' + item.chinaName :item.performclassname,
|
|
value: item.listperformid,
|
|
children: item.children ? handlePostData(item.children) : [],
|
|
};
|
|
});
|
|
return data;
|
|
};
|
|
|
|
//获取列表
|
|
const tableDataloading = ref(false);
|
|
const getList = () => {
|
|
tableDataloading.value = true;
|
|
let params = {
|
|
condition: search.value,
|
|
limit: pageSize.value,
|
|
page: currentPage.value,
|
|
state: null,
|
|
unitId: null,
|
|
listperformid:listperformid.value
|
|
};
|
|
getUserPage(params).then((res: any) => {
|
|
console.log(res,'res===>');
|
|
|
|
tableData.value = res.data.list;
|
|
total.value = res.data.total;
|
|
tableDataloading.value = false;
|
|
});
|
|
};
|
|
//删除列表
|
|
// const deletelist = () => {
|
|
// ElMessageBox.confirm("是否确认删除?", "提示", {
|
|
// confirmButtonText: "是",
|
|
// cancelButtonText: "否",
|
|
// type: "warning",
|
|
// }).then(() => {
|
|
// delUser(tableCheckBoxs.value.join(",")).then((res: any) => {
|
|
// if (res.code == 1) {
|
|
// ElMessage.success({
|
|
// message: "删除成功",
|
|
// type: "success",
|
|
// });
|
|
// } else {
|
|
// ElMessage.error({
|
|
// message: res.message,
|
|
// type: "error",
|
|
// });
|
|
// }
|
|
// getList();
|
|
// });
|
|
// });
|
|
// };
|
|
const staShow = (data) => {
|
|
let params = {
|
|
userId: data.sysuserid,
|
|
delState: data.delState,
|
|
};
|
|
delUser(params).then(() => {});
|
|
};
|
|
//关闭新增弹窗
|
|
const onclone = () => {
|
|
dialogVisible.value = false;
|
|
form.value = {};
|
|
getList();
|
|
};
|
|
onMounted(() => {
|
|
getPostTree();
|
|
getList();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
// flex: auto;
|
|
background: #fff;
|
|
border-radius: 0.26042vw;
|
|
box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
|
|
height: 100%;
|
|
padding: 0.83333vw;
|
|
overflow-y: auto;
|
|
overflow-x: hidden !important;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |