wisdomisitezwfront-web/src/views/project/dangerousEngineering/index.vue

<template>
	<div class="type-select">
		<div class="sta-item" v-for="(item, index) in statisticsOption" :key="index">
			<div class="sta-item-content">
				<img :src="item.img" alt="" />
				<span>{{ item.value }}</span>
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
	<div class="table-box">
		<div class="table">
			<ProTable
				ref="proTable"
				title="危大工程台账管理"
				:columns="columns"
				:request-api="getTableList"
				:dataCallback="dataCallback"
				:tableRowClassName="tableRowClassName"
				:tool-button="false"
				:pagination="true"
				background
				:isShowSearch="false"
				:onReset="true"
				@row-click="rowClick"
			>
				<template #formButton="scope">
					<el-button v-auth="'dangerous_engineering_add'" class="addButtonStyle" @click="handleAddItem">新增</el-button>
				</template>
				<template #type="{ row }">
					<div class="type-content">
						<span>{{ textTransform(row.type) }}</span>
						<span>{{ row.typeDescribe }}</span>
						<span v-if="row.dangerType == 1">超危</span>
					</div>
				</template>
				<template #engineering="{ row }">
					<div class="type-content">
						<span>{{ row.engineeringName }}</span>
						<span>{{ row.engineeringSurvey }}</span>
					</div>
				</template>
				<template #progress="{ row }">
					<div class="type-content">
						<span>{{ JSON.parse(row.progress)?.currentProgress }}</span>
						<span>记录于：{{ JSON.parse(row.progress)?.createTime }}</span>
						<div class="img-tip">
							<img src="@/assets/images/dangerousEngineeringImg/图片.png" alt="" />
							<span>{{ JSON.parse(row.progress)?.imageUrl ? 1 : 0 }}</span>
						</div>
					</div>
				</template>
				<template #operation="{ row }">
					<el-button
						v-auth="'dangerous_engineering_del'"
						type="danger"
						style="margin-right: 5px"
						link
						:icon="Delete"
						@click.stop="deleteItem(row)"
						>删除</el-button
					>
				</template>
			</ProTable>
		</div>
		<!-- 新增危大工程 -->
		<engineerAdd
			v-model:addVisible="addVisible"
			:searchSn="searchSn"
			:activeValue="activeValue"
			@confirm="confirmAdd"
		></engineerAdd>
		<!-- 危大工程详情 -->
		<engineerDetails
			v-model:detailsVisible="detailsVisible"
			:relativeId="relativeId"
			:searchSn="searchSn"
			:activeValue="activeValue"
			@confirm="confirmAdd"
		></engineerDetails>

		<!-- 侧边栏选择 -->
		<engineeringEngDrawer v-model="engVisable" :active="activeValue" ref="engDrawer" :engList="engList" @select="tabsSelect">
			<template #default="{ data }">
				<span style="margin-left: 10px" @click="onUpdate(data)">{{
					activeValue == "eng" ? data.engineeringName : data.projectName
				}}</span>
			</template>
		</engineeringEngDrawer>
		<allEngineering @click="engVisable = true" />
	</div>
</template>

<script setup lang="tsx" name="ProjectSupervisionRecord">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { User } from "@/api/interface";
import { getDicList } from "@/api/modules/jxjview";
import { Delete } from "@element-plus/icons-vue";
import { jxj_User } from "@/api/types";
import { useHandleData } from "@/hooks/useHandleData";
import engineerAdd from "./components/engineerAdd.vue";
import engineerDetails from "./components/engineerDetails.vue";
import { getRelevanceList } from "@/api/modules/common";
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
import allEngineering from "@/components/allEngineering/index.vue";
import {
	dangerousEngineerPage,
	dangerousEngineerDelete,
	getEngineeringName,
	dangerousEngineerCount
} from "@/api/modules/project";
const activeValue = ref("eng");
const engList = ref([]);
const engVisable = ref(false);
const searchSn = ref("");
const addVisible = ref(false);
const detailsVisible = ref(false);
const relativeId = ref("");
const statisticsOption = ref([
	{
		name: "在施危大工程",
		value: 0,
		img: new URL("@/assets/images/dangerousEngineeringImg/在施危大工程.png", import.meta.url).href,
		prop: "building"
	},
	{
		name: "危大工程施工部位",
		value: 0,
		img: new URL("@/assets/images/dangerousEngineeringImg/危大工程施工部位.png", import.meta.url).href,
		prop: "siteNum"
	},
	{
		name: "本月检查总数",
		value: 0,
		img: new URL("@/assets/images/dangerousEngineeringImg/本月检查总数.png", import.meta.url).href,
		prop: "checkNumber"
	},
	{
		name: "本月危大工程导致隐患数量",
		value: 0,
		img: new URL("@/assets/images/dangerousEngineeringImg/本月危大工程导致隐患数量.png", import.meta.url).href,
		prop: "questionNum"
	},
	{
		name: "本月危大工程排查覆盖率",
		value: 0,
		img: new URL("@/assets/images/dangerousEngineeringImg/本月危大工程排查覆盖率.png", import.meta.url).href,
		prop: "checkRatio"
	},
	{
		name: "下月计划施工的危大工程",
		value: 0,
		img: new URL("@/assets/images/dangerousEngineeringImg/下月计划施工的危大工程.png", import.meta.url).href,
		prop: "planNum"
	}
]);
const typeList = ref([]);
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
	{ type: "index", label: "序号", width: 100 },
	{
		prop: "type",
		width: 260,
		label: "类别",
		align: "left",
		search: { el: "select" },
		enum: typeList.value,
		fieldNames: { label: "dictValue", value: "dictLabel" }
	},
	{
		prop: "engineering",
		width: 200,
		align: "left",
		label: "危大工程"
	},
	{
		prop: "constructionLocation",
		align: "left",
		label: "施工部位"
	},
	// {
	// 	prop: "constructionPlanTime",
	// 	align: "left",
	// 	label: "施工计划"
	// },
	{
		prop: "personLiable",
		align: "left",
		label: "责任人"
	},
	{
		prop: "responsibilityCompany",
		align: "left",
		label: "分包单位"
	},
	{
		prop: "progress",
		label: "施工进度",
		align: "left"
	},
	{ prop: "operation", label: "操作", fixed: "right", width: 260 }
];
// 获取危大工程统计数据
const getCountData = async () => {
	let requestData = {};
	if (activeValue.value == "eng") {
		requestData.engineeringSn = searchSn.value;
	} else if (activeValue.value == "project") {
		requestData.projectSn = searchSn.value;
	}
	const res = await dangerousEngineerCount(requestData);
	statisticsOption.value.map(item => {
		item.value = res.result[item.prop];
	});
	console.log(res);
};
// 类别文本转换
const textTransform = (val: any) => {
	let findItem: any = typeList.value.find(item => item.dictLabel == val);
	return findItem?.dictValue;
};
const getTypeDicMainList = async () => {
	// 获取危大工程类别字典
	const { result } = await getDicList({ dictType: "dangerous_engineer_type" });
	if (result.length > 0) {
		typeList.value.length = 0;
		typeList.value.push(...result);
	}
};
// 操作完成
const confirmAdd = () => {
	proTable.value.getTableList();
};
// 新增
const handleAddItem = () => {
	addVisible.value = true;
};
// 删除表格数据
const deleteItem = async (params: jxj_User.ResUserList) => {
	await useHandleData(dangerousEngineerDelete, { id: params.id }, `删除【${params.engineeringName}】`);
	proTable.value.getTableList();
};
// 点击行查看详情
const rowClick = (row: any, column: ColumnProps) => {
	console.log("row", row, "column", column);
	relativeId.value = row.id;
	detailsVisible.value = true;
};
// 处理不同状态行不同颜色
const tableRowClassName = ({ rowIndex }: { row: User.ResUserList; rowIndex: number }) => {
	console.log(rowIndex);
	if (rowIndex === 0) return "warning-row";
	if (rowIndex === 6) return "success-row";
	return "";
};
// 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));
	getCountData();
	if (searchSn.value) {
		if (activeValue.value == "eng") {
			newParams.engineeringSn = searchSn.value;
		} else if (activeValue.value == "project") {
			newParams.projectSn = searchSn.value;
		}
	} else {
		return { result: { current: "1", pages: "1", records: [], size: "10", total: "0" } };
	}
	return dangerousEngineerPage(newParams);
};

// 抽屉tab选择时
const tabsSelect = val => {
	activeValue.value = val;
	if (val == "eng") {
		getengineering();
	} else if (val == "project") {
		getProject();
	}
};
// 获取项目信息
const getProject = async () => {
	const res = await getEngineeringName();
	engList.value = [res.result];
	if (res.result) {
		searchSn.value = res.result.projectSn;
	}
	proTable.value.getTableList();
	console.log(res);
};
const getengineering = async () => {
	// let newParams = JSON.parse(JSON.stringify(params));
	const res = await getRelevanceList();
	engList.value = res.result;
	if (res.result && res.result.length > 0) {
		searchSn.value = res.result[0].engineeringSn;
	}
	proTable.value.getTableList();
	console.log(res);
};
// 点击抽屉的工程名称更新页面
const onUpdate = async row => {
	if (activeValue.value == "eng") {
		searchSn.value = row.engineeringSn;
	} else if (activeValue.value == "project") {
		searchSn.value = row.projectSn;
	}
	proTable.value.getTableList();
	ElMessage.success("页面已更新");
};
onMounted(async () => {
	await getTypeDicMainList();
	await getengineering();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>