aizuda-web-vue3/src/views/setting/user/index.vue

<template>
	<div class="pageWrap">
		<el-aside style="background: #fff; margin-right: 10px" width="200px">
			<el-container>
				<el-header>
					<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
				</el-header>
				<el-main class="nopadding">
					<el-tree
						ref="treeRef"
						class="menu-tree"
						:data="treeData"
						node-key="id"
						:current-node-key="''"
						:highlight-current="true"
						:expand-on-click-node="false"
						:props="defaultProps"
						default-expand-all
						:filter-node-method="filterNode"
						@node-click="roleClick"
					/>
				</el-main>
			</el-container>
		</el-aside>
		<!--		<el-divider direction="vertical" style="height: 100%" />-->
		<div class="content-warp flex-column-page-wrap">
			<!-- 公用搜索组件 -->
			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>

			<!--  LeTable 组件使用  -->
			<LeTable
				ref="tableRef"
				v-model:searchParams="tableOpts.searchParams"
				v-bind="tableOpts"
				v-model:checked-options="checkedColumns"
				:columns="activeColumns"
			>
				<template #toolLeft>
					<el-button type="primary" @click="addHandler">
						<el-icon class="btn-icon">
							<Plus />
						</el-icon>
					</el-button>
					<el-button type="danger">
						<el-icon class="btn-icon">
							<Delete />
						</el-icon>
					</el-button>
					<el-button plain> 分配角色 </el-button>
					<el-button plain> 密码重置 </el-button>
				</template>

				<template #filterAvatarSlot="scope">
					<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
				</template>

				<template #statusSlot="scope">
					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
					<status-indicator v-else pulse type="danger"></status-indicator>
				</template>

				<template #actionSlot="">
					<el-tooltip content="编辑" placement="bottom" effect="light">
						<el-icon class="ibt0">
							<Edit />
						</el-icon>
					</el-tooltip>
					<el-divider direction="vertical"></el-divider>
					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
						<template #reference>
							<el-icon class="ibt0">
								<Delete />
							</el-icon>
						</template>
					</el-popconfirm>
				</template>
			</LeTable>
		</div>

		<LeFormConfigDialog
			v-if="visible"
			ref="dialogUserRef"
			v-model="visible"
			:title="`${isCreate ? '新增' : '编辑'}用户`"
			width="600px"
			:form-data="activeData"
			:form-options="formOptions"
			@submit="submitHandler"
		/>
	</div>
</template>
<script lang="tsx" setup>
import role from '@/api/system/role'
import user from '@/api/system/user'
import { nextTick, ref, watch } from 'vue'
import { ElMessage, ElTree } from 'element-plus'
import { useTablePage } from '@/hooks/useTablePage'
import { Plus, Delete } from '@element-plus/icons-vue'
import StatusIndicator from '@/components/StatusIndicator'
const visible = ref(false) // 弹窗显示隐藏
const isCreate = ref(true)
const activeData = ref({})
const formOptions = ref({
	forms: [
		{
			prop: 'custName',
			label: '登录账号',
			itemType: 'input',
			placeholder: '用于登录系统',
			rules: [{ required: true, message: '请输入登录账号', trigger: 'blur' }]
		},
		{
			prop: 'custName1',
			label: '登录密码',
			itemType: 'input',
			rules: [{ required: true, message: '请输入登录密码', trigger: 'blur' }]
		},
		{
			prop: 'custName2',
			label: '确认密码',
			itemType: 'input',
			rules: [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
		},
		{
			prop: 'custName3',
			label: '昵称',
			itemType: 'input'
		},
		{
			prop: 'custName4',
			label: '姓名',
			itemType: 'input'
		},
		{
			prop: 'custName5',
			label: '性别',
			itemType: 'radio',
			options: [
				{ value: '0', label: '男' },
				{ value: '1', label: '女' }
			]
		},
		{
			prop: 'switch',
			// label: '状态',
			t_label: '状态',
			itemType: 'switch',
			slots: {
				label: 'slot_label_test'
			},
			activeText: '是',
			inactiveText: '否',
			change(value, options, params) {
				console.warn('dataType change  value, options, params', value, options, params)
			}
		},
		{
			prop: 'select多选',
			label: '所属角色',
			itemType: 'select',
			multiple: true,
			collapseTags: true,
			maxCollapseTags: 1,
			filterable: true,
			itemWidth: '200px',
			options: [
				{ value: '类型one', label: '类型一' },
				{ value: '类型two', label: '类型二' },
				{ value: '类型three', label: '类型三' }
			]
		}
	],
	labelWidth: 120,
	span: 30,
	showResetBtn: true,
	formConfig: {
		submitLoading: false
	}
})
const showGroupLoading = ref(false)
const groupFilterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
	children: 'children',
	label: 'label'
}

const filterNode = (value: string, data: Tree) => {
	if (!value) return true
	return data.label.includes(value)
}

const treeData = ref([])

// 获取左侧菜单数据
const getGroup = async () => {
	showGroupLoading.value = true
	let data = await role.roleListTreeApi()
	showGroupLoading.value = false
	data.unshift({ id: '', label: '所有' })
	treeData.value = data // console.log('获取左侧菜单数据')
}

// 左侧菜单点击
const roleClick = data => {
	console.log(data.id, 'data.id')
	// 修改search参数 watch 变更 自动刷新 列表
	searchData.value = { ...searchData.value, data: { roleId: data.id ? data.id : null } }
	// queryList()
	// 刷新右侧的表格
}

// 搜索条件
const forms = ref([
	{
		prop: 'name',
		label: '账号/姓名：',
		itemType: 'input',
		placeholder: '请输入登录账号 / 姓名'
	}
])

// table列表数据请求
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	console.log('搜索参数： ', JSON.stringify(tableOpts.searchParams))
	try {
		const { records: list, total } = await user.userPageApi(searchParams)
		tableOpts.total = total
		tableOpts.list = list
	} catch {
		console.log('获取列表数据失败')
		tableOpts.total = 0
		tableOpts.list = []
		options.loading = false // 更改加载中的 loading值
	} finally {
		options.loading = false
	}
}

// table 参数
const columns = [
	{
		prop: 'filterAvatar',
		label: '头像',
		minWidth: 80,
		slots: {
			default: 'filterAvatarSlot'
		}
	},
	{
		prop: 'username',
		label: '登录账号',
		minWidth: 100
	},
	{
		prop: 'status',
		label: '状态',
		minWidth: 50,
		slots: {
			default: 'statusSlot'
		}
	},
	{
		prop: 'nickName',
		label: '昵称',
		minWidth: 100
	},
	{
		prop: 'realName',
		label: '姓名',
		minWidth: 100
	},
	{
		prop: 'sex',
		label: '性别',
		minWidth: 80
	},
	{
		prop: 'updateBy',
		label: '修改人',
		minWidth: 100
	},
	{
		prop: 'updateTime',
		label: '修改时间',
		minWidth: 126
	},
	{
		prop: 'createBy',
		label: '创建人',
		minWidth: 100
	},
	{
		prop: 'createTime',
		label: '创建时间',
		minWidth: 126
	},
	{
		prop: 'action',
		label: '操作',
		width: 100,
		fixed: 'right',
		slots: {
			default: 'actionSlot'
		}
	}
]

const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
	{
		options: {
			showIndex: false
		},
		// searchParams: {
		// 	// page: 1,
		// 	// size: 10,
		// 	test: 1
		// },
		// 需要展示的列
		columns,
		// 控制列配置
		columnsConfig: {
			columns
		}
	},
	{
		queryList,
		fetchImmediate: false
	}
)
// // 列接口请求后 进行赋值
// checkedColumns.value = columns
// 删除
const table_del = row => {
	// 删除
}

//批量删除
const batch_del = () => {}

// 弹窗事件
const submitHandler = params => {
	ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
}

const addHandler = () => {
	isCreate.value = true
	activeData.value = {}
	visible.value = true
}

nextTick(() => {
	getGroup()
	queryList()
})

watch(groupFilterText, val => {
	treeRef.value!.filter(val)
})
</script>
<style scoped lang="scss">
.pageWrap {
	flex: 1;
	display: flex;
	height: 100%;
	//background: #fff;
}
.content-warp {
	flex: 1;
	//width: calc(100% - 250px);
	width: calc(100% - 210px);
}
// 单独自己写的
/*:deep(.box-card) {
	height: 100%;
	.el-card__body {
		padding: 0;
	}
}*/

// 角色的树结构样式
:deep(.menu-tree) {
	.el-tree-node__content {
		height: 36px;
	}
	.el-tree-node__content .el-tree-node__label .icon {
		margin-right: 5px;
	}
}

.nopadding {
	padding: 0px;
}
</style>