feat: 切换主题内容新增

src/components/changeTheme/index.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="theme-transform">
+		<img src="@/assets/images/hzImg/themeIcon.png" alt="" />
+		<img src="@/assets/images/hzImg/blueTheme.png" alt="" @click="changePrimary('#5289D9')" />
+		<img src="@/assets/images/hzImg/greenTheme.png" alt="" @click="changePrimary('#02A47D')" />
+	</div>
+</template>
+
+<script setup lang="tsx" name="ProjectSupervisionRecord">
+import { ref, reactive, nextTick, computed } from "vue";
+import { useTheme } from "@/hooks/useTheme";
+const { changePrimary } = useTheme();
+</script>
+<style scoped lang="scss">
+.theme-transform {
+	width: 92px;
+	height: 29px;
+	position: absolute;
+	left: 22px;
+	bottom: 19px;
+	border: 2px solid #1bbcc8;
+	border-radius: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+</style>

src/views/hz-project/projectMonitor/progressManagement/index.vue

@@ -0,0 +1,160 @@
+<template>
+	<div class="table-box">
+		<ProTable
+			ref="proTable"
+			title="用户列表"
+			:columns="columns"
+			:requestApi="getTableList"
+			:dataCallback="dataCallback"
+			:tool-button="false"
+			:pagination="true"
+			background
+			:isShowSearch="false"
+			:onReset="true"
+		>
+			<template #operation="{ row }">
+				<el-button type="primary" link @click="handleAddItem(2, row)">
+					<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
+					<span>编辑</span>
+				</el-button>
+			</template>
+		</ProTable>
+		<changeTheme />
+	</div>
+</template>
+
+<script setup lang="tsx" name="ProjectSupervisionRecord">
+import { ref, reactive, nextTick, computed } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useRouter } from "vue-router";
+import { ColumnProps } from "@/components/ProTable/interface";
+import ProTable from "@/components/ProTable/index.vue";
+import changeTheme from "@/components/changeTheme/index.vue";
+import { getRoleList, getTreemRoleList, getTreeByIdList } from "@/api/modules/project";
+import { GlobalStore } from "@/stores";
+
+const treeRef = ref(null);
+
+const datas = reactive([]);
+const router = useRouter();
+const globalStore = GlobalStore();
+const themeConfig = computed(() => globalStore.themeConfig);
+const visible = ref(false);
+const drawerVisible = ref(false);
+const title = ref("");
+const formData = ref({});
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTable = ref();
+
+const getId = ref<number | undefined>(undefined);
+
+// 表格配置项
+const columns: ColumnProps[] = [
+	{ type: "index", label: "序号", width: 80 },
+	{
+		prop: "roleName",
+		label: "角色名称",
+		search: { el: "input" }
+	},
+	// 多级 prop
+	{ prop: "priority", label: "显示顺序" },
+	{ prop: "state", label: "使用状态" },
+	{
+		prop: "state",
+		label: "状态",
+		search: { el: "select" },
+		isShow: false,
+		enum: [
+			{ label: "启用", value: 1 },
+			{ label: "禁用", value: 0 }
+		]
+	},
+	{
+		prop: "createTime",
+		label: "时间筛选",
+		isShow: false,
+		search: {
+			el: "date-picker",
+			props: {
+				type: "daterange",
+				format: "YYYY-MM-DD",
+				valueFormat: "YYYY-MM-DD"
+				// defaultTime: defaultTime2
+			}
+		}
+	},
+	{ prop: "operation", label: "操作", fixed: "right" }
+];
+// 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)
+	};
+};
+
+const transfrom = (arr: Array<any>) => {
+	const result = [];
+	return arr
+		.map(item => {
+			if (arr.children && Array.isArray(arr.children)) {
+				result.concat(transfrom(arr.children));
+			}
+
+			return {
+				authorityId: item.name,
+				roleId: getId.value,
+				type: item.type
+			};
+		})
+		.concat(result);
+};
+
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+	let newParams = JSON.parse(JSON.stringify(params));
+	if (newParams.createTime) {
+		newParams.createTime_begin = newParams.createTime[0];
+		newParams.createTime_end = newParams.createTime[1];
+		delete newParams.createTime;
+	}
+	return getRoleList(newParams);
+};
+
+const handleAddItem = (index: number, row: any) => {
+	if (index === 1) {
+		title.value = "新增角色";
+		formData.value = reactive({});
+	} else {
+		title.value = "编辑角色";
+		formData.value = reactive({ ...row });
+	}
+	visible.value = true;
+};
+
+// 修改数据按钮
+const handleEditItem = async (row: any) => {
+	getId.value = row.roleId;
+
+	drawerVisible.value = true;
+	const { result = [] } = await getTreemRoleList();
+	// console.log("test", result);
+	datas.push(...result);
+
+	const res = await getTreeByIdList({ roleId: row.roleId });
+
+	nextTick(() => {
+		treeRef.value.setCheckedKeys(res.result.map(item => item.authorityId));
+	});
+};
+</script>
+<style scoped lang="scss">
+.table-box {
+	position: relative;
+}
+</style>