<template>
|
<div class="system-edit-user-container">
|
<el-dialog
|
title="用户选择"
|
v-model="isShowDialog"
|
width="1000px"
|
draggable
|
:fullscreen="full"
|
>
|
<el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
|
<el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
|
<el-aside width="200px">
|
<el-input v-model="filterText" placeholder="请输入组织机构过滤" />
|
<el-tree
|
ref="treeRef"
|
class="filter-tree"
|
:data="data"
|
:props="defaultProps"
|
default-expand-all
|
@node-click="handleNodeClick"
|
:filter-node-method="filterNode"
|
/>
|
</el-aside>
|
<el-container style="margin: 0 15px;min-width:560px;">
|
<el-header style="font-size: 12px">
|
<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
|
<el-form-item>
|
<el-input size="default" v-model="ruleForm.name" placeholder="登录名"> </el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="default" type="primary" class="ml10" @click="onSubmit">
|
查询
|
</el-button>
|
<el-button size="default" class="ml10" @click="submitReset">
|
重置
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-header>
|
<el-main style="position: relative;">
|
<el-table
|
:data="tableData"
|
:header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
|
@cell-click="checkbox"
|
>
|
<el-table-column type="selection" width="55">
|
<template #default="scope">
|
<el-checkbox-group v-model="checkbox1">
|
<el-checkbox :label="scope.row.uid" size="large">{{ null }}</el-checkbox>
|
</el-checkbox-group>
|
</template>
|
</el-table-column>
|
<el-table-column prop="realName" label="登录名" width="100" show-overflow-tooltip sortable />
|
<el-table-column prop="username" label="用户名" width="100" show-overflow-tooltip sortable />
|
<el-table-column prop="address" label="所属机构" width="115" show-overflow-tooltip sortable />
|
<el-table-column prop="address" label="所属部门" width="115" show-overflow-tooltip sortable/>
|
<el-table-column align="center" prop="type" label="状态" />
|
<!-- <el-table-column label="状态"-->
|
<!-- width="80"-->
|
<!-- prop="tag"-->
|
<!-- :filters="[-->
|
<!-- { text: '正常', value: 'Home' },-->
|
<!-- { text: '不正常', value: 'Office' },-->
|
<!-- ]"-->
|
<!-- :filter-method="filterTag"-->
|
<!-- filter-placement="bottom-end">-->
|
<!-- <template #default="scope">-->
|
<!-- <el-tag-->
|
<!-- :type="scope.row.tag === 'Home' ? '' : 'success'"-->
|
<!-- disable-transitions-->
|
<!-- >{{ scope.row.tag }}</el-tag-->
|
<!-- >-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
</el-table>
|
<div class="pages">
|
<el-pagination
|
v-model:currentPage="pageIndex"
|
v-model:page-size="pageSize"
|
:page-sizes="[10, 20, 30]"
|
:pager-count="5"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</el-main>
|
</el-container>
|
<div style="width: 200px;">
|
<div v-if="dynamicTags[0]==''?false:true">
|
<el-tag
|
v-for="tag in dynamicTags"
|
:key="tag"
|
class="mx-1"
|
style="margin: 5px"
|
closable
|
:disable-transitions="false"
|
@close="handleClose(tag)"
|
>
|
{{ tag.realName }}
|
</el-tag>
|
</div>
|
</div>
|
</el-container>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button size="default" type="primary" @click="onCancel">确定</el-button>
|
<el-button size="default" @click="onCancel">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {
|
ref,
|
defineComponent,
|
watch,
|
reactive,
|
onMounted,
|
} from 'vue';
|
|
import type {
|
ElTree,
|
// ElTable,
|
} from 'element-plus'
|
import {
|
ElMessage,
|
} from 'element-plus';
|
import {
|
FullScreen
|
} from '@element-plus/icons-vue'
|
import {goalManagementApi} from "/@/api/goalManagement";
|
interface Tree {
|
id: number
|
label: string
|
children?: Tree[]
|
}
|
// interface User {
|
// date: string
|
// name: string
|
// address: string
|
// }
|
export default defineComponent({
|
name: 'userSelections',
|
components: {
|
// Search,
|
},
|
setup(props, { emit }) {
|
const isShowDialog = ref(false)
|
// 打开弹窗
|
const openDialog = (type:any) => {
|
types.value=type
|
isShowDialog.value = true;
|
};
|
// 关闭弹窗
|
const closeDialog = () => {
|
isShowDialog.value = false;
|
};
|
// 取消
|
const onCancel = () => {
|
closeDialog();
|
};
|
|
//部门树
|
const department = () => {
|
goalManagementApi()
|
.getTreedepartment()
|
.then((res) => {
|
if (res.data.code == 200) {
|
data.value = res.data.data;
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
const defaultProps = {
|
label: 'depName',
|
children: 'children',
|
value: 'depId',
|
}
|
//部门树查询
|
const filterText = ref('')
|
const treeRef = ref<InstanceType<typeof ElTree>>() //实例化
|
watch(filterText, (val) => {
|
treeRef.value!.filter(val);
|
});
|
// 节点过滤模糊搜索
|
const filterNode = (depName: string, data: Tree) => {
|
if (!depName) return true
|
return data.depName.includes(depName)
|
}
|
onMounted(() => {
|
department();
|
});
|
//左边树形部分点击获取回调
|
const names = ref<any>();
|
const handleNodeClick = (data: Tree) => {
|
goalManagementApi()
|
.getManName(data.depId)
|
.then((res) => {
|
if (res.data.code == 200) {
|
tableData.value=res.data.data
|
}else{
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
|
|
// 监听搜索关键字改变
|
watch(filterText, (val) => {
|
treeRef.value!.filter(val)
|
})
|
// 树形结构内容
|
const data = ref()
|
|
|
|
|
// const item = {
|
// date: '孙刚',
|
// name: '龚赛健',
|
// address: '综合办公室',
|
// tag: '正常',
|
// }
|
// const tableData = ref(Array.from({ length: 7 }).fill(item))
|
// 定义表单搜索
|
const ruleForm = reactive({
|
name: '',
|
})
|
const types=ref()
|
// 搜索按钮
|
const onSubmit = () => {
|
let obj = JSON.parse(JSON.stringify(dynamicTags.value));
|
emit('SearchUser', obj[0],types.value);
|
isShowDialog.value = false;
|
}
|
|
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
// 右方点击添加后显示标签
|
const dynamicTags = ref(['']);
|
const handleClose = () => {
|
dynamicTags.value.push(checkbox1.value)
|
// dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
|
checkbox1.value = '';
|
};
|
const checkbox1 = ref('');
|
const checkbox = (event: any) => {
|
dynamicTags.value[0] = event;
|
};
|
const tableData = ref();
|
// 分页
|
const pageIndex = ref(4);
|
const pageSize = ref(10);
|
// 分页改变
|
const handleSizeChange = (val: number) => {
|
console.log(`${val} items per page`);
|
};
|
// 分页未改变
|
const handleCurrentChange = (val: number) => {
|
console.log(`current page: ${val}`);
|
};
|
//全屏
|
const full = ref(false);
|
const toggleFullscreen = () => {
|
if (full.value == false) {
|
full.value = true;
|
} else {
|
full.value = false;
|
}
|
};
|
return {
|
openDialog,
|
closeDialog,
|
isShowDialog,
|
onCancel,
|
defaultProps,
|
filterNode,
|
data,
|
tableData,
|
ruleForm,
|
onSubmit,
|
// multipleTableRef,
|
handleClose,
|
dynamicTags,
|
handleSizeChange,
|
handleCurrentChange,
|
pageIndex,
|
pageSize,
|
toggleFullscreen,
|
FullScreen,
|
full,
|
names,
|
handleNodeClick,
|
types,
|
checkbox1,
|
checkbox,
|
};
|
},
|
});
|
</script>
|
<style scoped lang="scss">
|
.layout-container-demo .el-header {
|
position: relative;
|
color: var(--el-text-color-primary);
|
line-height: 32px;
|
--el-header-height: 45px;
|
padding: 0;
|
}
|
.layout-container-demo .el-aside {
|
padding: 10px;
|
border: 1px solid #ebeef5;
|
color: var(--el-text-color-primary);
|
}
|
::v-deep .el-input--large .el-input__inner {
|
height: 32px!important;
|
line-height: 32px!important;
|
}
|
.layout-container-demo .el-menu {
|
border-right: none;
|
}
|
.layout-container-demo .el-main {
|
padding: 0;
|
}
|
.layout-container-demo .toolbar {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
right: 20px;
|
}
|
.el-input--large{
|
//width: 178px;
|
height: 32px;
|
}
|
.el-tree{
|
overflow: auto;
|
}
|
::-webkit-scrollbar {
|
height: 1px;
|
|
}
|
::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
}
|
// 鼠标悬浮样式
|
:hover::-webkit-scrollbar-thumb {
|
border-radius: 15px;
|
background-color: #d8d9db;
|
}
|
::v-deep .el-input__wrapper{
|
width: 215px;
|
}
|
::v-deep .el-form-item{
|
margin-bottom: 0;
|
margin-right: 0;
|
}
|
//弹窗底部边框线
|
::v-deep .el-dialog__footer{
|
border-top: 1px solid #e8e8e8;
|
border-radius: 0 0 4px 4px;
|
}
|
//弹窗顶部边框线
|
::v-deep .el-dialog__header {
|
border-bottom: 1px solid #e8e8e8;
|
margin-right: 0;
|
border-radius: 4px 4px 0 0;
|
}
|
//单选框圆形
|
//::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
|
// display:none
|
//}
|
//::v-deep .el-table-column--selection .cell{
|
// text-align: center;
|
//}
|
//::v-deep .el-checkbox__input .el-checkbox__inner{
|
// border-radius: 50%;
|
//}
|
/*分页*/
|
.pages{
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 15px;
|
align-items: center;
|
//position: absolute;
|
//bottom: 0;
|
}
|
::v-deep .el-pagination{
|
width: 100%;
|
}
|
::v-deep .el-pagination .el-pager li {
|
margin: 0 5px;
|
background-color: #f4f4f5;
|
color: #606266;
|
min-width: 30px;
|
border-radius: 2px;
|
}
|
::v-deep .el-pagination .el-pager li.is-active {
|
background-color: #409eff;
|
color: #fff;
|
}
|
::v-deep .el-pagination .btn-prev {
|
margin: 0 5px;
|
background-color: #f4f4f5;
|
color: #606266;
|
min-width: 30px;
|
border-radius: 2px;
|
}
|
::v-deep .el-pagination button:disabled{
|
color: #c0c4cc;
|
}
|
::v-deep .el-pagination .btn-next{
|
margin: 0 5px;
|
background-color: #f4f4f5;
|
color: #606266;
|
min-width: 30px;
|
border-radius: 2px;
|
}
|
</style>
|
