<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
|
: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="formInline" class="demo-form-inline">
|
<el-form-item>
|
<el-input size="default" v-model="formInline.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="radio"
|
>
|
<el-table-column align="center" width="55">
|
<template #default="scope">
|
<el-radio-group v-model="radio1">
|
<el-radio :label="scope.row.id" size="large">{{ null }}</el-radio>
|
</el-radio-group>
|
</template>
|
</el-table-column>
|
<el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
|
<el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
|
<el-table-column prop="address" label="所属机构" width="115" show-overflow-tooltip sortable />
|
<el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
|
<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"
|
:small="small"
|
:disabled="disabled"
|
:background="background"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="40"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</el-main>
|
</el-container>
|
<div style="width: 200px;">
|
<el-tag
|
v-for="tag in dynamicTags"
|
:key="tag"
|
class="mx-1"
|
style="margin: 5px"
|
closable
|
:disable-transitions="false"
|
@close="handleClose(tag)"
|
>
|
{{ tag }}
|
</el-tag>
|
</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,
|
} from 'vue';
|
|
import type {
|
ElTree,
|
// ElTable,
|
} from 'element-plus'
|
import {
|
FullScreen
|
} from '@element-plus/icons-vue'
|
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 = () => {
|
isShowDialog.value = true;
|
};
|
// 关闭弹窗
|
const closeDialog = () => {
|
isShowDialog.value = false;
|
};
|
// 取消
|
const onCancel = () => {
|
let obj=JSON.parse(JSON.stringify(dynamicTags.value))
|
emit("SearchUser",obj[0])
|
closeDialog();
|
};
|
|
|
const filterText = ref('')
|
const treeRef = ref<InstanceType<typeof ElTree>>() //实例化
|
|
const defaultProps = {
|
children: 'children',
|
label: 'label',
|
}
|
|
// 监听搜索关键字改变
|
watch(filterText, (val) => {
|
treeRef.value!.filter(val)
|
})
|
|
// 节点过滤模糊搜索
|
const filterNode = (value: string, data: Tree) => {
|
if (!value) return true
|
return data.label.includes(value)
|
}
|
|
// 树形结构内容
|
const data: Tree[] = [
|
{
|
id: 1,
|
label: '广汇能源综合物流发展有限责任公司',
|
children: [
|
{
|
id: 4,
|
label: '经营班子',
|
children: []
|
},
|
],
|
},
|
{
|
id: 2,
|
label: '生产运行部',
|
children: [
|
{
|
id: 5,
|
label: '工艺二班',
|
},
|
{
|
id: 6,
|
label: '灌装一班',
|
},
|
],
|
},
|
{
|
id: 3,
|
label: '设备部',
|
children: [
|
{
|
id: 7,
|
label: '仪表班',
|
},
|
{
|
id: 8,
|
label: '机修班',
|
},
|
],
|
},
|
]
|
// const item = {
|
// date: '孙刚',
|
// name: '龚赛健',
|
// address: '综合办公室',
|
// tag: '正常',
|
// }
|
// const tableData = ref(Array.from({ length: 7 }).fill(item))
|
const tableData = [
|
{
|
date: '孙刚',
|
name: '孙刚',
|
address: '',
|
department: '经营班子',
|
tag: '正常',
|
},
|
{
|
date: '谭柏',
|
name: '谭柏',
|
address: '',
|
department: '经营班子',
|
tag: '正常',
|
},
|
{
|
date: '倪威',
|
name: '倪威',
|
address: '',
|
department: '经营班子',
|
tag: '正常',
|
},
|
{
|
date: '倪玲婕',
|
name: '倪玲婕',
|
address: '',
|
department: '经营班子',
|
tag: '正常',
|
},
|
];
|
// 定义表单搜索
|
const formInline = reactive({
|
name: '',
|
})
|
// 搜索按钮
|
const onSubmit = () => {
|
console.log('submit!')
|
}
|
|
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
// 右方点击添加后显示标签
|
const dynamicTags = ref(['胡海涛']);
|
const handleClose = (tag: string) => {
|
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
|
radio1.value=""
|
};
|
const radio1=ref('')
|
const radio=(event:any)=>{
|
dynamicTags.value[0]=event
|
}
|
|
// 分页
|
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,
|
formInline,
|
onSubmit,
|
// multipleTableRef,
|
handleClose,
|
dynamicTags,
|
handleSizeChange,
|
handleCurrentChange,
|
pageIndex,
|
pageSize,
|
radio1,
|
radio,
|
toggleFullscreen,
|
FullScreen,
|
full,
|
};
|
},
|
});
|
</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>
|
