350 lines
10 KiB
Vue
350 lines
10 KiB
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 }}{{ item.prop == "checkRatio" ? "%" : "" }}</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 (searchSn.value) {
|
||
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];
|
||
});
|
||
} else {
|
||
statisticsOption.value.map(item => {
|
||
item.value = 0;
|
||
});
|
||
}
|
||
};
|
||
// 类别文本转换
|
||
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 = () => {
|
||
if (!searchSn.value) {
|
||
ElMessage.error("请先选择工程/项目");
|
||
return;
|
||
}
|
||
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;
|
||
} else {
|
||
searchSn.value = "";
|
||
}
|
||
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;
|
||
} else {
|
||
searchSn.value = "";
|
||
}
|
||
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>
|