Mars3D-screen_web/src/views/jxjview/albugineaManagement/index.vue

<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="白膜图层列表"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
			:tool-button="false"
			:pagination="true"
			:treeProps="treeProps"
			selectId="governmentId"
			background
			onReset
		>
			<template #formButton="scope">
				<el-button class="addButtonStyle" @click="handleAddItem()">新增</el-button>
			</template>
			<!-- 是否启用 -->
			<template #show="scope">
				<el-switch v-model="scope.row.show" disabled style="--el-switch-on-color: #13ce66" />
			</template>
			<!-- 是否飞到该白膜 -->
			<template #flyTo="scope">
				<el-switch v-model="scope.row.flyTo" disabled style="--el-switch-on-color: #13ce66" />
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<div class="operate-option">
					<el-button type="primary" link @click="handleEditItem(scope.row)">
						<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
						<span>编辑</span>
					</el-button>
					<el-button type="danger" link :icon="Delete" @click="handleDeleteItem(scope.row)">删除</el-button>
				</div>
			</template>
		</ProTable>
		<!-- 图层新增/编辑 -->
		<operateDialog
			v-model:operateVisible="operateVisible"
			:relativeId="relativeId"
			:title="title"
			@confirm="requestTable"
		></operateDialog>
	</div>
</template>

<script setup lang="tsx" name="jxjGovernMent">
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules, FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import operateDialog from "./components/operateDialog.vue";
import { Delete } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import { albugineaMapPage, albugineaMapDelete } from "@/api/modules/mapCommon";
import { jxj_User } from "@/api/types";
const relativeId = ref("");
const operateVisible = ref(false);
const treeProps = ref({ children: "children", hasChildren: "hasChildren" });
const router = useRouter();
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const title = ref("");

const visible = ref(false);
const formData = ref({});

// 表格配置项
const columns: ColumnProps[] = [
	{
		prop: "id",
		label: "ID"
	},
	// 多级 prop
	{ prop: "name", label: "名称", search: { el: "input" } },
	{ prop: "show", label: "是否启用" },
	{ prop: "flyTo", label: "飞到该白膜" },
	{ prop: "color", label: "白膜颜色" },
	// { prop: "authProject", label: "开启打光效果" },
	{ prop: "createTime", label: "创建时间" },
	{ prop: "updateTime", label: "更新时间" },
	{ prop: "operation", label: "操作", fixed: "right", width: 160 }
];
// const AuthIdData = ref([]);

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	// type: 1
});

// 刷新列表数据
const requestTable = () => {
	proTable.value.getTableList();
};
// 删除白膜图层
const handleDeleteItem = async (params: jxj_User.ResUserList) => {
	await useHandleData(albugineaMapDelete, { id: params.id }, `删除【${params.name}】`);
	proTable.value.getTableList();
};
// 编辑
const handleEditItem = (row: any) => {
	operateVisible.value = true;
	title.value = "编辑白膜图层";
	relativeId.value = row.id;
};
// 添加数据按钮
const handleAddItem = () => {
	operateVisible.value = true;
	title.value = "新增白膜图层";
	formData.value = reactive({});
};
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	// console.log(data);
	return {
		list: data.records,
		total: Number(data.total),
		pageNo: Number(data.current),
		pageSize: Number(data.size)
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	return albugineaMapPage(newParams);
};
onMounted(async () => {});
</script>
<style scoped lang="scss">
.table-box {
	position: relative;
}
.operate-option {
	display: flex;
	align-items: center;
	justify-content: center;
	:deep() {
		.el-button + .el-button {
			margin-left: 0px;
		}
	}
}
</style>