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 #operation="scope">
				<div class="operate-option"></div>
			</template>
			<template #state="{ row }">
				<span :class="row.state === 1 ? '' : 'redText'">{{ row.state === 1 ? "启用" : "禁用" }}</span>
			</template>
			<template #authProject="{ row }">
				{{ (row.installProject ? row.installProject : 0) + "/" + row.authProject }}
			</template>
			<template #diffDay="{ row }">
				{{ row.expireTime === null ? "永久有效" : row.diffDay }}
			</template>
		</ProTable>
		<!-- 图层新增/编辑 -->
		<operateDialog v-model:operateVisible="operateVisible" :relativeId="relativeId"></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 { getGovermentTreeList } from "@/api/modules/jxjview";
import operateDialog from "./components/operateDialog.vue";
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: "governmentName",
		label: "ID",
		search: { el: "input" }
	},
	// 多级 prop
	{ prop: "createTime", label: "名称" },
	{ prop: "governmentTel", label: "是否启用" },
	{ prop: "state", label: "飞到该白膜" },
	{ prop: "diffDay", label: "白膜颜色" },
	{ prop: "authProject", label: "开启打光效果" },
	{ prop: "authProject", label: "创建时间" },
	{ prop: "authProject", label: "更新时间" },
	{ prop: "operation", label: "操作", fixed: "right", width: 260 }
];
// const AuthIdData = ref([]);

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	// type: 1
});
// 添加数据按钮
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 getGovermentTreeList(newParams);
};
onMounted(async () => {});
</script>
<style scoped lang="scss">
.operate-option {
	display: flex;
	align-items: center;
	:deep() {
		.el-button + .el-button {
			margin-left: 0px;
		}
	}
}
.littleTitle {
	border-left: 3px solid #008bff;
	padding-left: 6px;
}
.allModular {
	width: 100%;
	margin: 10px;
	display: flex;
	flex-wrap: wrap;
	.modularItem {
		padding-right: 50px;
	}
}
.select-all {
	display: flex;
	flex-direction: column;
	.radio-select {
		display: flex;
		align-items: center;
	}
}
:deep(.el-dialog__footer) {
	text-align: center;
}
:focus-visible {
	outline: none;
}
// .redText {
// 	color: red;
// }
</style>