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

<template>
	<div class="pageWrap">
		<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:curRow="tableOpts.curRow"
				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" :disabled="curSelectionRows.length === 0" @click="batch_del">
						<el-icon class="btn-icon">
							<Delete />
						</el-icon>
					</el-button>
				</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="scope">
					<el-tooltip content="编辑" placement="bottom" effect="light">
						<el-icon class="ibt0" @click="table_edit(scope.row)">
							<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 department from '@/api/system/department'
import { computed, 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 curSelectionRows = ref([]) // 表格选中数据
const formsDialog = ref([
	{
		prop: 'pid',
		label: '上级部门',
		itemType: 'cascader',
		props: {
			value: 'id',
			label: 'name',
			emitPath: false,
			checkStrictly: true
		},
		options: []
	},
	{
		prop: 'name',
		label: '名称',
		itemType: 'input',
		rules: [{ required: true, message: '请输入名称', trigger: 'blur' }]
	},
	{
		prop: 'code',
		label: '编码',
		itemType: 'input',
		rules: [{ required: true, message: '请输入编码', trigger: 'blur' }]
	},
	{
		prop: 'sort',
		label: '排序',
		itemType: 'inputNumber',
		rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
	},
	{
		prop: 'status',
		label: '状态',
		itemType: 'switch',
		activeText: '是',
		inactiveText: '否'
	},
	{
		prop: 'remark',
		label: '备注',
		itemType: 'input',
		rules: [{ required: true, message: '请输入备注', trigger: 'blur' }]
	}
])
// 新增的表单 和 编辑的表单
const formOptions = computed(() => {
	return {
		forms: formsDialog.value,
		labelWidth: 120,
		span: 30,
		showResetBtn: true,
		formConfig: {
			showCancelBtn: true,
			submitLoading: false
		}
	}
})
const groupFilterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const replaceChildren = arr => {
	arr.forEach(item => {
		item.label = item.name
		item.value = item.id
		if (item.children && item.children.length > 0) {
			replaceChildren(item.children)
		}
	})
	return arr
}

// table列表数据请求
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	try {
		const list = await department.departmentPageApi(searchParams)
		// tableOpts.total = total
		tableOpts.list = list
		formsDialog.value[0].options = list
		// const test = replaceChildren(list)
		// console.log(test);
		// formsDialog.value[1].options = list
	} catch {
		console.log('获取列表数据失败')
		// tableOpts.total = 0
		tableOpts.list = []
		options.loading = false // 更改加载中的 loading值
	} finally {
		options.loading = false
	}
}

const selectionChange = e => {
	// console.error('click 测试', e)
	curSelectionRows.value = e
}

// 表格搜索条件
const forms = ref([
	{
		prop: 'keyword',
		label: '角色名称：',
		itemType: 'input',
		placeholder: '请输入角色名称'
	}
])

// table 参数
const columns = [
	{
		prop: 'name',
		label: '部门名称',
		minWidth: 250
	},
	{
		prop: 'code',
		label: '编码',
		minWidth: 100
	},
	{
		prop: 'status',
		label: '状态',
		minWidth: 50,
		slots: {
			default: 'statusSlot'
		}
	},

	{
		prop: 'secretKey',
		label: '密钥',
		minWidth: 100
	},
	{
		prop: 'sort',
		label: '排序',
		minWidth: 80
	},
	{
		prop: 'updateBy',
		label: '修改人',
		minWidth: 100
	},
	{
		prop: 'updateTime',
		label: '修改时间',
		minWidth: 150
	},
	{
		prop: 'createBy',
		label: '创建人',
		minWidth: 100
	},
	{
		prop: 'createTime',
		label: '创建时间',
		minWidth: 150
	},
	{
		prop: 'action',
		label: '操作',
		width: 100,
		fixed: 'right',
		slots: {
			default: 'actionSlot'
		}
	}
]

const { searchData, tableOpts, checkedColumns, activeColumns, updateParams } = useTablePage(
	{
		options: {
			showIndex: false,
			defaultExpandAll: true,
			onSelectionChange: selectionChange
		},
		// 需要展示的列
		columns,
		// 控制列配置
		columnsConfig: {
			columns
		}
	},
	{
		queryList,
		fetchImmediate: false
	}
)

// 删除
const deleteItem = async ids => {
	try {
		await department.departmentDeleteApi(ids)
		updateParams()
	} catch (e) {
		console.log('删除失败')
		ElMessage.error(`删除失败~`)
	}
}

// 单个删除
const table_del = row => {
	deleteItem([row.id])
}

//批量删除
const batch_del = () => {
	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
	deleteItem(ids)
}

const table_edit = async row => {
	isCreate.value = false
	activeData.value = { ...row, status: row.status ? true : false }
	visible.value = true
}

// 弹窗事件
const submitHandler = async params => {
	formOptions.value.formConfig.submitLoading = true
	try {
		params.status = params.status ? 1 : 0
		params.id = activeData.value.id ? activeData.value.id : null
		await department.departmentAddOrEditSaveApi(params)
		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
		visible.value = false
		updateParams()
		formOptions.value.formConfig.submitLoading = false
	} catch (e) {
		console.log(e)
		formOptions.value.formConfig.submitLoading = false
	}
}

const addHandler = () => {
	isCreate.value = true
	activeData.value = {}
	visible.value = true
}
nextTick(() => {
	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>