DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

办公V3

Browse Source
This commit is contained in:
86156
2025-12-30 13:47:53 +08:00
parent f1637501b2
commit a623c5673f
137 changed files with 11031 additions and 4043 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
klp-ui/src/components/userSelect/multi.vue
View File

@@ -1,13 +1,14 @@
<template>
<el-dialog title="人员选择"
v-if="showFlag"
<el-dialog
title="人员选择（多选）"
:visible.sync="showFlag"
:modal= false
:modal="false"
width="80%"
center
append-to-body
>
<el-row :gutter="20">
<!--部门数据-->
<!-- 部门数据 -->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
@@ -26,14 +27,23 @@
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="deptId"
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-col>
<!--用户数据-->
<!-- 用户数据 -->
<el-col :span="20" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
@@ -57,23 +67,13 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<KLPTable v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
<!-- <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">-->
<!-- <template slot-scope="scope">-->
<!-- <el-switch-->
<!-- v-model="scope.row.status"-->
<!-- active-value="0"-->
<!-- inactive-value="1"-->
<!-- @change="handleStatusChange(scope.row)"-->
<!-- ></el-switch>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
@@ -82,7 +82,7 @@
</KLPTable>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@@ -90,64 +90,40 @@
/>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmSelect">确 定</el-button>
<el-button @click="showFlag=false">取 消</el-button>
<el-button @click="showFlag = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'
export default {
name: "UserMultiSelect",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect },
name: 'UserMultiSelect',
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
showFlag:false,
// 遮罩层
showFlag: false,
loading: true,
// 选中数组
ids: [],
selectedRows: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 部门树选项
deptOptions: undefined,
// 是否显示弹出层
open: false,
// 部门名称
userList: [],
deptOptions: [],
deptName: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
selectedRows: [],
defaultProps: {
children: "children",
label: "label"
children: 'children',
label: 'deptName'
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
@@ -156,87 +132,120 @@ export default {
status: undefined,
deptId: undefined
},
// 列信息
columns: [
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户名称`, visible: true },
{ key: 2, label: `用户昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
],
};
{ key: 0, label: '用户编号', visible: true },
{ key: 1, label: '用户名称', visible: true },
{ key: 2, label: '用户昵称', visible: true },
{ key: 3, label: '部门', visible: true },
{ key: 4, label: '手机号码', visible: true },
{ key: 5, label: '状态', visible: true },
{ key: 6, label: '创建时间', visible: true }
]
}
},
watch: {
// 根据名称筛选部门树
value: {
immediate: true,
handler(val) {
this.showFlag = !!val
if (val) {
this.getDeptTree()
this.getList()
}
}
},
showFlag(val) {
this.$emit('input', !!val)
},
deptName(val) {
this.$refs.tree.filter(val);
if (this.$refs.tree) {
this.$refs.tree.filter(val)
}
}
},
created() {
this.getList();
this.getTreeselect();
},
methods: {
/** 查询用户列表 */
open() {
this.showFlag = true
this.getDeptTree()
this.getList()
},
buildTree(list, parentId = 0) {
const tree = []
if (!Array.isArray(list)) return tree
list.forEach(item => {
const pid = item.parentId ?? item.pid ?? 0
if (Number(pid) === Number(parentId)) {
const children = this.buildTree(list, item.deptId)
const node = { ...item }
if (children.length) node.children = children
tree.push(node)
}
})
return tree
},
async getDeptTree() {
try {
const res = await listDept()
const rows = res.rows || res.data || []
this.deptOptions = this.buildTree(rows, 0)
} catch (e) {
console.error('获取部门列表失败', e)
this.deptOptions = []
}
},
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
this.loading = true
const params = { ...this.queryParams }
if (params.deptId !== undefined && params.deptId !== null) {
const num = Number(params.deptId)
params.deptId = isNaN(num) ? undefined : num
}
listUser(params)
.then(res => {
this.userList = res.rows || []
this.total = res.total || 0
})
.finally(() => {
this.loading = false
})
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then(response => {
debugger;
this.deptOptions = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
if (!value) return true
return (data.deptName || '').indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
const id = data && (data.deptId ?? data.id)
const num = Number(id)
this.queryParams.deptId = isNaN(num) ? undefined : num
this.queryParams.pageNum = 1
this.getList()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
this.queryParams.pageNum = 1
this.queryParams.userName = undefined
this.queryParams.phonenumber = undefined
this.queryParams.deptId = undefined
this.getList()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.userId);
this.selectedRows = selection;
this.single = selection.length != 1;
this.multiple = !selection.length;
handleSelectionChange(rows) {
this.selectedRows = rows || []
},
//确定选中
confirmSelect(){
if(this.selectedRows == null || this.selectedRows.size == 0){
confirmSelect() {
if (!this.selectedRows || this.selectedRows.length === 0) {
this.$notify({
title:'提示',
type:'warning',
title: '提示',
type: 'warning',
message: '请至少选择一条数据!'
});
return;
})
return
}
this.$emit('onSelected',this.selectedRows);
this.showFlag = false;
this.$emit('onSelected', this.selectedRows)
this.showFlag = false
}
}
};
}
</script>

271
klp-ui/src/components/userSelect/single.vue
View File

@@ -1,13 +1,14 @@
<template>
<el-dialog title="人员选择"
v-if="showFlag"
<el-dialog
title="人员选择"
:visible.sync="showFlag"
:modal= false
:modal="false"
width="80%"
center
append-to-body
>
<el-row :gutter="20">
<!--部门数据-->
<!-- 部门数据 -->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
@@ -26,14 +27,23 @@
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="deptId"
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-col>
<!--用户数据-->
<!-- 用户数据 -->
<el-col :span="20" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
@@ -57,26 +67,17 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<KLPTable v-loading="loading" :data="userList" @current-change="handleCurrent" @row-dblclick="handleRowDbClick">
<el-table-column width="55" align="center" >
<el-table-column width="55" align="center">
<template v-slot="scope">
<el-radio v-model="selectedId" :label="scope.row.userId" @change="handleRowChange(scope.row)">{{""}}</el-radio>
<el-radio v-model="selectedId" :label="scope.row.userId" @change="handleRowChange(scope.row)">{{ '' }}</el-radio>
</template>
</el-table-column>
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
<!-- <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">-->
<!-- <template slot-scope="scope">-->
<!-- <el-switch-->
<!-- v-model="scope.row.status"-->
<!-- active-value="0"-->
<!-- inactive-value="1"-->
<!-- @change="handleStatusChange(scope.row)"-->
<!-- ></el-switch>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
@@ -85,7 +86,7 @@
</KLPTable>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@@ -93,62 +94,48 @@
/>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmSelect">确 定</el-button>
<el-button @click="showFlag=false">取 消</el-button>
<el-button @click="showFlag = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'
export default {
name: "UserSingleSelect",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect },
name: 'UserSingleSelect',
// 让父组件可以通过 v-model 控制弹窗显示
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
showFlag:false,
showFlag: false,
// 遮罩层
loading: true,
// 选中数组
// 选中
selectedId: null,
selectedRow: null,
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 部门树选项
deptOptions: undefined,
// 是否显示弹出层
open: false,
userList: [],
// 部门树
deptOptions: [],
// 部门名称
deptName: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label"
children: 'children',
label: 'deptName'
},
// 查询参数
queryParams: {
@@ -161,98 +148,160 @@ export default {
},
// 列信息
columns: [
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户名称`, visible: true },
{ key: 2, label: `用户昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
],
};
{ key: 0, label: '用户编号', visible: true },
{ key: 1, label: '用户名称', visible: true },
{ key: 2, label: '用户昵称', visible: true },
{ key: 3, label: '部门', visible: true },
{ key: 4, label: '手机号码', visible: true },
{ key: 5, label: '状态', visible: true },
{ key: 6, label: '创建时间', visible: true }
]
}
},
watch: {
// v-model -> showFlag
value: {
immediate: true,
handler(val) {
this.showFlag = !!val
if (val) {
// 打开时再加载，避免页面初始化就请求
this.getDeptTree()
this.getList()
}
}
},
// showFlag -> v-model
showFlag(val) {
this.$emit('input', !!val)
},
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val);
if (this.$refs.tree) {
this.$refs.tree.filter(val)
}
}
},
created() {
this.getList();
this.getTreeselect();
},
methods: {
// 供父组件 ref 调用：this.$refs.xxx.open()
open() {
this.showFlag = true
// watch(value) 不会触发，这里手动加载
this.getDeptTree()
this.getList()
},
// 构建树形
buildTree(list, parentId = 0) {
const tree = []
if (!Array.isArray(list)) return tree
list.forEach(item => {
const pid = item.parentId ?? item.pid ?? 0
if (Number(pid) === Number(parentId)) {
const children = this.buildTree(list, item.deptId)
const node = { ...item }
if (children.length) node.children = children
tree.push(node)
}
})
return tree
},
/** 查询部门树：用 listDept 自己组装，彻底避免 /treeselect 路由冲突 */
async getDeptTree() {
try {
const res = await listDept()
const rows = res.rows || res.data || []
this.deptOptions = this.buildTree(rows, 0)
} catch (e) {
console.error('获取部门列表失败', e)
this.deptOptions = []
}
},
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then(response => {
debugger;
this.deptOptions = response.data;
});
this.loading = true
const params = { ...this.queryParams }
// deptId 必须是 Long，对非法值直接丢弃
if (params.deptId !== undefined && params.deptId !== null) {
const num = Number(params.deptId)
params.deptId = isNaN(num) ? undefined : num
}
listUser(params)
.then(response => {
this.userList = response.rows || []
this.total = response.total || 0
})
.finally(() => {
this.loading = false
})
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
if (!value) return true
return (data.deptName || '').indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
const id = data && (data.deptId ?? data.id)
const num = Number(id)
this.queryParams.deptId = isNaN(num) ? undefined : num
this.queryParams.pageNum = 1
this.getList()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
this.queryParams.pageNum = 1
this.queryParams.userName = undefined
this.queryParams.phonenumber = undefined
this.queryParams.deptId = undefined
this.getList()
},
handleCurrent(row){
if(row){
this.selectedRow = row;
handleCurrent(row) {
if (row) {
this.selectedRow = row
}
},
//行双击选中
handleRowDbClick(row){
if(row){
this.selectedRow = row;
this.$emit('onSelected',this.selectedRow);
this.showFlag = false;
// 行双击选中
handleRowDbClick(row) {
if (row) {
this.selectedRow = row
this.confirmSelect()
}
},
// 单选选中数据
handleRowChange(row) {
debugger;
if(row){
this.selectedRow = row;
if (row) {
this.selectedRow = row
}
},
//确定选中
confirmSelect(){
if(this.selectedId == null || this.selectedId == 0){
// 确定选中
confirmSelect() {
if (!this.selectedRow) {
this.$notify({
title:'提示',
type:'warning',
title: '提示',
type: 'warning',
message: '请至少选择一条数据!'
});
return;
})
return
}
this.$emit('onSelected',this.selectedRow);
this.showFlag = false;
this.$emit('onSelected', this.selectedRow)
this.showFlag = false
}
}
};
}
</script>