feat: #0000 行政区域 100%

src/api/system/region.ts

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+import { AxiosPromise } from 'axios'
+
+// apiUrl 部门管理
+const api = {
+	page: '/sys/region/list-tree',
+	create: '/sys/region/create',
+	update: '/sys/region/update',
+	delete: '/sys/region/delete'
+}
+/**
+ * 部门管理 - 列表
+ */
+function regionPageApi(data: any): AxiosPromise {
+	return request({
+		url: api.page,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 部门管理 - 新增编辑保存
+ */
+function regionAddOrEditSaveApi(data: any): AxiosPromise {
+	return request({
+		url: data.id ? api.update : api.create,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 部门管理 - 删除
+ */
+function regionDeleteApi(data: any): AxiosPromise {
+	return request({
+		url: api.delete,
+		method: 'post',
+		data
+	})
+}
+export default {
+	regionPageApi,
+	regionAddOrEditSaveApi,
+	regionDeleteApi
+}

src/router/index.ts

@@ -181,6 +181,12 @@ export const constantRoutes: Array<AppRouteRecordRaw> = [
 				component: () => import('@/views/setting/department/index.vue'),
 				name: 'department',
 				meta: { title: '部门管理', icon: '' }
+			},
+			{
+				path: 'region',
+				component: () => import('@/views/setting/region/index.vue'),
+				name: 'region',
+				meta: { title: '行政区域', icon: '' }
 			}
 		]
 	},

src/views/setting/department/index.vue

@@ -53,7 +53,7 @@
 			v-if="visible"
 			ref="dialogUserRef"
 			v-model="visible"
-			:title="`${isCreate ? '新增' : '编辑'}应用`"
+			:title="`${isCreate ? '新增' : '编辑'}部门`"
 			width="600px"
 			:form-data="activeData"
 			:form-options="formOptions"

src/views/setting/region/index.vue

@@ -0,0 +1,337 @@
+<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 #levelSlot="scope">
+					<div v-if="+scope.row.level === 0">省份直辖市</div>
+					<div v-else-if="+scope.row.level === 1">地市</div>
+					<div v-else>区县</div>
+				</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 region from '@/api/system/region'
+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'
+
+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' }]
+	}
+])
+// 新增的表单 和 编辑的表单
+const formOptions = computed(() => {
+	return {
+		forms: formsDialog.value,
+		labelWidth: 120,
+		span: 30,
+		showResetBtn: true,
+		formConfig: {
+			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 region.regionPageApi(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: 'sort',
+		label: '排序',
+		minWidth: 80
+	},
+	{
+		prop: 'level',
+		label: '级别',
+		minWidth: 100,
+		slots: {
+			default: 'levelSlot'
+		}
+	},
+	{
+		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 region.regionDeleteApi(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.id = activeData.value.id ? activeData.value.id : null
+		await region.regionAddOrEditSaveApi(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>