轮播图

src/api/integrated/sysBanner.ts

@@ -0,0 +1,40 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+	return request({
+		url: "/integrated/sysBanner/page",
+		method: "get",
+		params: query,
+	})
+}
+
+export function addObj(obj?: Object) {
+	return request({
+		url: "/integrated/sysBanner",
+		method: "post",
+		data: obj,
+	})
+}
+
+export function getObj(id?: string) {
+	return request({
+		url: "/integrated/sysBanner/" + id,
+		method: "get",
+	})
+}
+
+export function delObjs(ids?: (string | number)[]) {
+	return request({
+		url: "/integrated/sysBanner",
+		method: "delete",
+		data: ids,
+	})
+}
+
+export function putObj(obj?: Object) {
+	return request({
+		url: "/integrated/sysBanner",
+		method: "put",
+		data: obj,
+	})
+}

src/api/integrated/sysInternalPage.ts

@@ -0,0 +1,53 @@
+import request from "/@/utils/request"
+
+/** 分页查询 */
+export function fetchList(query?: Object) {
+	return request({
+		url: "/integrated/sysInternalPage/page",
+		method: "get",
+		params: query,
+	})
+}
+
+/** 下拉列表（供轮播图内部跳转选择） */
+export function select() {
+	return request({
+		url: "/integrated/sysInternalPage/select",
+		method: "get",
+	})
+}
+
+/** 根据 ID 查询 */
+export function getObj(id?: string) {
+	return request({
+		url: "/integrated/sysInternalPage/" + id,
+		method: "get",
+	})
+}
+
+/** 新增 */
+export function addObj(obj?: Object) {
+	return request({
+		url: "/integrated/sysInternalPage",
+		method: "post",
+		data: obj,
+	})
+}
+
+/** 修改 */
+export function putObj(obj?: Object) {
+	return request({
+		url: "/integrated/sysInternalPage",
+		method: "put",
+		data: obj,
+	})
+}
+
+/** 删除（批量） */
+export function delObjs(ids?: (string | number)[]) {
+	return request({
+		url: "/integrated/sysInternalPage",
+		method: "delete",
+		data: ids,
+	})
+}

src/views/integrated/sysBanner/form.vue

@@ -0,0 +1,271 @@
+<template>
+	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="640px">
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="100px" v-loading="loading">
+			<el-row :gutter="24">
+				<el-col :span="24" class="mb20">
+					<el-form-item label="标题" prop="title">
+						<el-input v-model="form.title" placeholder="请输入标题" maxlength="100" show-word-limit />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="24" class="mb20">
+					<el-form-item label="图片" prop="imageUrl">
+						<upload-img v-model:imageUrl="form.imageUrl" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item label="跳转类型" prop="jumpType">
+						<el-select v-model="form.jumpType" placeholder="请选择跳转类型" style="width: 100%">
+							<el-option label="内部页面" :value="1" />
+							<el-option label="外部链接" :value="2" />
+							<el-option label="不跳转" :value="3" />
+							<el-option label="富文本页面" :value="4" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20" v-if="form.jumpType === 1">
+					<el-form-item label="内部页面" prop="jumpValue">
+						<el-select
+							v-model="form.jumpValue"
+							placeholder="请选择内部页面"
+							style="width: 100%"
+							clearable
+							filterable
+						>
+							<el-option
+								v-for="item in internalPageOptions"
+								:key="item.id"
+								:label="item.name ? `${item.name}（${item.path}）` : item.path"
+								:value="item.path"
+							/>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20" v-if="form.jumpType === 1">
+					<el-form-item label="链接参数" prop="jumpParam">
+						<el-input
+							v-model="form.jumpParam"
+							placeholder="例如 id=1，多个用 & 连接（选填）"
+							clearable
+						/>
+						<div class="form-tip">详情页可填 id=轮播图ID，最终路径为：页面路径?链接参数</div>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20" v-if="form.jumpType === 2">
+					<el-form-item label="跳转值" prop="jumpValue">
+						<el-input v-model="form.jumpValue" placeholder="请输入外部链接" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="24" class="mb20" v-if="form.jumpType === 4">
+					<el-form-item label="富文本内容" prop="richTextContent">
+						<editor v-if="visible" v-model:get-html="form.richTextContent" placeholder="请输入富文本内容" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item label="排序序号" prop="sortOrder">
+						<el-input-number v-model="form.sortOrder" :min="0" placeholder="数值越小越靠前" style="width: 100%" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item label="状态" prop="status">
+						<el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
+							<el-option label="禁用" :value="0" />
+							<el-option label="启用" :value="1" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item label="生效时间" prop="startTime">
+						<el-date-picker
+							v-model="form.startTime"
+							type="datetime"
+							placeholder="请选择生效时间"
+							format="YYYY-MM-DD HH:mm:ss"
+							value-format="YYYY-MM-DD HH:mm:ss"
+							style="width: 100%"
+							clearable
+						/>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item label="失效时间" prop="endTime">
+						<el-date-picker
+							v-model="form.endTime"
+							type="datetime"
+							placeholder="请选择失效时间"
+							format="YYYY-MM-DD HH:mm:ss"
+							value-format="YYYY-MM-DD HH:mm:ss"
+							style="width: 100%"
+							clearable
+						/>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="24" class="mb20">
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" maxlength="200" show-word-limit />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="visible = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="SysBannerDialog">
+import { watch } from "vue"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/integrated/sysBanner"
+import { select as getInternalPageSelect } from "/@/api/integrated/sysInternalPage"
+
+const emit = defineEmits(["refresh"])
+
+const RICH_TEXT_DETAIL_PATH = "/pages/integrated/sysbanner/detail"
+
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+const internalPageOptions = ref<{ id: number; path: string; name: string; moduleLabel: string }[]>([])
+
+const loadInternalPageSelect = async () => {
+	try {
+		const res = await getInternalPageSelect()
+		internalPageOptions.value = (res.data || []) as any
+	} catch {
+		internalPageOptions.value = []
+	}
+}
+
+const defaultForm = {
+	id: "" as string | number,
+	title: "",
+	imageUrl: "",
+	jumpType: 1 as number,
+	jumpValue: "",
+	jumpParam: "", // 仅内部页面使用：链接参数，提交时拼到 jumpValue 后 ?xxx
+	richTextContent: "",
+	params: "{}",
+	sortOrder: 0 as number,
+	status: 1 as number,
+	startTime: "",
+	endTime: "",
+	remark: "",
+}
+
+const form = reactive({ ...defaultForm })
+
+const dataRules = ref({
+	title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+	imageUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
+	jumpType: [{ required: true, message: "请选择跳转类型", trigger: "change" }],
+	status: [{ required: true, message: "请选择状态", trigger: "change" }],
+	startTime: [{ required: true, message: "请选择生效时间", trigger: "change" }],
+	endTime: [{ required: true, message: "请选择失效时间", trigger: "change" }],
+	sortOrder: [],
+})
+
+watch(
+	() => form.jumpType,
+	(val) => {
+		if (val === 4) {
+			form.jumpParam = ""
+			form.jumpValue = form.id
+				? `${RICH_TEXT_DETAIL_PATH}?id=${form.id}`
+				: RICH_TEXT_DETAIL_PATH
+		}
+	},
+)
+
+const openDialog = (id?: string | number) => {
+	visible.value = true
+	// 先清空为默认值，避免新增时残留上次编辑数据
+	Object.assign(form, { ...defaultForm })
+	if (typeof id === "number") form.id = id
+	else if (id) form.id = id
+
+	nextTick(() => {
+		// 再次重置为默认值并清空校验（新增时必须清空，避免 resetFields 恢复成“初始值”为上次编辑）
+		Object.assign(form, { ...defaultForm })
+		if (typeof id === "number") form.id = id
+		else if (id) form.id = id
+		dataFormRef.value?.resetFields()
+	})
+
+	loadInternalPageSelect()
+	if (form.id) {
+		getSysBannerData(form.id)
+	}
+}
+
+const getSysBannerData = (id: string | number) => {
+	loading.value = true
+	getObj(String(id))
+		.then((res: any) => {
+			// 若已切换到新增或其它记录，不再写回表单，避免覆盖
+			if (String(form.id) !== String(id)) return
+			Object.assign(form, res.data)
+			// 内部页面：若 jumpValue 带 ? 则拆成路径 + 链接参数
+			if (form.jumpType === 1 && form.jumpValue && form.jumpValue.includes("?")) {
+				const idx = form.jumpValue.indexOf("?")
+				form.jumpParam = form.jumpValue.slice(idx + 1)
+				form.jumpValue = form.jumpValue.slice(0, idx)
+			} else {
+				form.jumpParam = ""
+			}
+		})
+		.finally(() => {
+			loading.value = false
+		})
+}
+
+const onSubmit = async () => {
+	const valid = await dataFormRef.value.validate().catch(() => {})
+	if (!valid) return false
+
+	try {
+		loading.value = true
+		const submitData = { ...form } as any
+		if (!submitData.params || submitData.params === "") submitData.params = "{}"
+		if (!form.id) delete submitData.id
+		delete submitData.jumpParam
+		// 内部页面：将链接参数拼到 jumpValue
+		if (form.jumpType === 1 && form.jumpValue) {
+			const param = (form.jumpParam || "").trim().replace(/^\?/, "")
+			submitData.jumpValue = param ? form.jumpValue + "?" + param : form.jumpValue
+		}
+		form.id ? await putObj(submitData) : await addObj(submitData)
+		useMessage().success(form.id ? "修改成功" : "添加成功")
+		visible.value = false
+		emit("refresh")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	} finally {
+		loading.value = false
+	}
+}
+
+defineExpose({
+	openDialog,
+})
+</script>
+
+<style scoped>
+.form-tip {
+	font-size: 12px;
+	color: #909399;
+	margin-top: 4px;
+	line-height: 1.4;
+}
+</style>

src/views/integrated/sysBanner/index.vue

@@ -0,0 +1,184 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row v-show="showSearch">
+				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+					<el-form-item label="标题" prop="title">
+						<el-input placeholder="请输入标题" v-model="state.queryForm.title" clearable />
+					</el-form-item>
+					<el-form-item label="状态" prop="status">
+						<el-select v-model="state.queryForm.status" placeholder="请选择状态" clearable style="width: 120px">
+							<el-option label="禁用" :value="0" />
+							<el-option label="启用" :value="1" />
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
+						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+					</el-form-item>
+				</el-form>
+			</el-row>
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="formDialogRef.openDialog()"
+						v-auth="'integrated_sysBanner_add'"
+					>
+						新 增
+					</el-button>
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'integrated_sysBanner_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						删除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="40" />
+				<el-table-column prop="title" label="标题" min-width="140" show-overflow-tooltip />
+				<el-table-column prop="imageUrl" label="图片" align="center" width="120">
+					<template #default="scope">
+						<preview-image :src="scope.row.imageUrl" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="jumpType" label="跳转类型" width="110" align="center">
+					<template #default="scope">
+						<el-tag v-if="scope.row.jumpType === 1" type="primary" size="small">内部页面</el-tag>
+						<el-tag v-else-if="scope.row.jumpType === 2" type="success" size="small">外部链接</el-tag>
+						<el-tag v-else-if="scope.row.jumpType === 4" type="warning" size="small">富文本页面</el-tag>
+						<el-tag v-else type="info" size="small">不跳转</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="jumpValue" label="跳转值" min-width="140" show-overflow-tooltip />
+				<el-table-column prop="sortOrder" label="排序" width="80" align="center" />
+				<el-table-column prop="status" label="状态" width="80" align="center">
+					<template #default="scope">
+						<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
+							{{ scope.row.status === 1 ? '启用' : '禁用' }}
+						</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="startTime" label="生效时间" width="160" show-overflow-tooltip />
+				<el-table-column prop="endTime" label="失效时间" width="180" show-overflow-tooltip>
+					<template #default="scope">
+						<span v-if="scope.row.endTime" :class="{ expired: isExpired(scope.row.endTime) }">
+							{{ scope.row.endTime }}
+							<el-tag v-if="isExpired(scope.row.endTime)" type="danger" size="small" class="ml-1">已过期</el-tag>
+						</span>
+						<span v-else>-</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip />
+				<el-table-column label="操作" width="150" fixed="right">
+					<template #default="scope">
+						<el-button
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'integrated_sysBanner_edit'"
+							@click="formDialogRef.openDialog(scope.row.id)"
+							>编辑</el-button
+						>
+						<el-button
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'integrated_sysBanner_del'"
+							@click="handleDelete([scope.row.id])"
+							>删除</el-button
+						>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
+
+		<!-- 编辑、新增  -->
+		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+	</div>
+</template>
+
+<script setup lang="ts" name="systemSysBanner">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { fetchList, delObjs } from "/@/api/integrated/sysBanner"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+
+const formDialogRef = ref()
+const queryRef = ref()
+const showSearch = ref(true)
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {},
+	pageList: fetchList,
+})
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
+const isExpired = (endTime: string) => {
+	if (!endTime) return false
+	return new Date(endTime) < new Date()
+}
+
+const resetQuery = () => {
+	queryRef.value?.resetFields()
+	selectObjs.value = []
+	getDataList()
+}
+
+const selectionChangHandle = (objs: { id: string | number }[]) => {
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
+
+const handleDelete = async (ids: (string | number)[]) => {
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
+	try {
+		await delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+</script>
+
+<style scoped>
+.expired {
+	color: #f56c6c;
+	text-decoration: line-through;
+}
+.ml-1 {
+	margin-left: 6px;
+}
+</style>

src/views/integrated/sysInternalPage/form.vue

@@ -0,0 +1,121 @@
+<template>
+	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="560px">
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="100px" v-loading="loading">
+			<el-row :gutter="24">
+				<el-col :span="24" class="mb20">
+					<el-form-item label="页面路径" prop="path">
+						<el-input v-model="form.path" placeholder="请输入页面全路径，如 /pages/tabbar/index" maxlength="200" show-word-limit />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="24" class="mb20">
+					<el-form-item label="页面名称" prop="name">
+						<el-input v-model="form.name" placeholder="请输入页面名称/显示名" maxlength="100" show-word-limit />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="24" class="mb20">
+					<el-form-item label="所属模块" prop="moduleLabel">
+						<el-input v-model="form.moduleLabel" placeholder="请输入所属模块/分包名称，如 主包-pages" maxlength="80" show-word-limit />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item label="排序序号" prop="sortOrder">
+						<el-input-number v-model="form.sortOrder" :min="0" placeholder="数值越小越靠前" style="width: 100%" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item label="状态" prop="status">
+						<el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
+							<el-option label="禁用" :value="0" />
+							<el-option label="启用" :value="1" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="visible = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="SysInternalPageDialog">
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/integrated/sysInternalPage"
+
+const emit = defineEmits(["refresh"])
+
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+
+const defaultForm = {
+	id: "" as string | number,
+	path: "",
+	name: "",
+	moduleLabel: "",
+	sortOrder: 0 as number,
+	status: 1 as number,
+}
+
+const form = reactive({ ...defaultForm })
+
+const dataRules = ref({
+	path: [{ required: true, message: "页面路径不能为空", trigger: "blur" }],
+})
+
+const openDialog = (id?: string | number) => {
+	visible.value = true
+	Object.assign(form, defaultForm)
+	if (typeof id === "number") form.id = id
+	else if (id) form.id = id
+
+	nextTick(() => {
+		dataFormRef.value?.resetFields()
+	})
+
+	if (form.id) {
+		getData(form.id)
+	}
+}
+
+const getData = (id: string | number) => {
+	loading.value = true
+	getObj(String(id))
+		.then((res: any) => {
+			Object.assign(form, res.data)
+		})
+		.finally(() => {
+			loading.value = false
+		})
+}
+
+const onSubmit = async () => {
+	const valid = await dataFormRef.value.validate().catch(() => {})
+	if (!valid) return false
+
+	try {
+		loading.value = true
+		const submitData = { ...form } as any
+		if (!form.id) delete submitData.id
+		form.id ? await putObj(submitData) : await addObj(submitData)
+		useMessage().success(form.id ? "修改成功" : "添加成功")
+		visible.value = false
+		emit("refresh")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	} finally {
+		loading.value = false
+	}
+}
+
+defineExpose({
+	openDialog,
+})
+</script>

src/views/integrated/sysInternalPage/index.vue

@@ -0,0 +1,152 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row v-show="showSearch">
+				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+					<el-form-item label="路径" prop="path">
+						<el-input placeholder="请输入路径" v-model="state.queryForm.path" clearable />
+					</el-form-item>
+					<el-form-item label="页面名称" prop="name">
+						<el-input placeholder="请输入页面名称" v-model="state.queryForm.name" clearable />
+					</el-form-item>
+					<el-form-item label="所属模块" prop="moduleLabel">
+						<el-input placeholder="请输入所属模块" v-model="state.queryForm.moduleLabel" clearable />
+					</el-form-item>
+					<el-form-item label="状态" prop="status">
+						<el-select v-model="state.queryForm.status" placeholder="请选择状态" clearable style="width: 120px">
+							<el-option label="禁用" :value="0" />
+							<el-option label="启用" :value="1" />
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
+						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+					</el-form-item>
+				</el-form>
+			</el-row>
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="formDialogRef.openDialog()"
+						v-auth="'integrated_sysInternalPage_add'"
+					>
+						新 增
+					</el-button>
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'integrated_sysInternalPage_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						删除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="40" />
+				<el-table-column prop="path" label="页面路径" min-width="220" show-overflow-tooltip />
+				<el-table-column prop="name" label="页面名称" min-width="140" show-overflow-tooltip />
+				<el-table-column prop="moduleLabel" label="所属模块" min-width="120" show-overflow-tooltip />
+				<el-table-column prop="sortOrder" label="排序" width="80" align="center" />
+				<el-table-column prop="status" label="状态" width="80" align="center">
+					<template #default="scope">
+						<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
+							{{ scope.row.status === 1 ? '启用' : '禁用' }}
+						</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip />
+				<el-table-column label="操作" width="150" fixed="right">
+					<template #default="scope">
+						<el-button
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'integrated_sysInternalPage_edit'"
+							@click="formDialogRef.openDialog(scope.row.id)"
+							>编辑</el-button
+						>
+						<el-button
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'integrated_sysInternalPage_del'"
+							@click="handleDelete([scope.row.id])"
+							>删除</el-button
+						>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
+
+		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+	</div>
+</template>
+
+<script setup lang="ts" name="systemSysInternalPage">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { fetchList, delObjs } from "/@/api/integrated/sysInternalPage"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+
+const formDialogRef = ref()
+const queryRef = ref()
+const showSearch = ref(true)
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {},
+	pageList: fetchList,
+})
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
+const resetQuery = () => {
+	queryRef.value?.resetFields()
+	selectObjs.value = []
+	getDataList()
+}
+
+const selectionChangHandle = (objs: { id: string | number }[]) => {
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
+
+const handleDelete = async (ids: (string | number)[]) => {
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
+	try {
+		await delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+</script>