13 changed files with 2314 additions and 145 deletions
@ -0,0 +1,276 @@ |
|||
<template> |
|||
<div class="safety-appraisal-container"> |
|||
<div class="top-options"> |
|||
<div class="left-options"> |
|||
<div class="search-item"> |
|||
<span class="option-label">档案类型</span> |
|||
<el-select |
|||
v-model="selectedFileType" |
|||
placeholder="请选择档案类型" |
|||
clearable |
|||
style="width: 200px;" |
|||
> |
|||
<el-option |
|||
v-for="item in scaleOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button type="primary" class="add-button" @click="handleSearch">查询</el-button> |
|||
<el-button class="reset-button" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-container"> |
|||
<el-table :data="tableData" border style="width: 100%;color: black"> |
|||
<el-table-column type="index" label="序号" width="120" align="center" /> |
|||
<el-table-column prop="regulationsAttachment" label="档案类型" width="180" align="center" > |
|||
<template #default="{ row }"> |
|||
{{projTypeFormat(row.regulationsAttachment)}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="planAttachment" label="档案附件" align="center"> |
|||
<template #default="{ row }"> |
|||
<div |
|||
v-for="(item, index) in parseAttachments(row.planAttachment)" |
|||
:key="index" |
|||
> |
|||
<i class="el-icon-document"></i> |
|||
{{ item.name }} |
|||
<i |
|||
class="el-icon-download" |
|||
@click="downloadFile(item, index)" |
|||
style="cursor: pointer" |
|||
></i> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" width="120"> |
|||
<template #default="scope"> |
|||
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="档案详情" |
|||
width="50%" |
|||
:before-close="handleDialogClose" |
|||
> |
|||
<div class="detail-container"> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">档案类型：</span> |
|||
<span class="detail-value">{{ projTypeFormat(currentRow.regulationsAttachment) || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">档案附件：</span> |
|||
<div class="detail-value attachment-list"> |
|||
<div |
|||
v-for="(item, index) in parseAttachments(currentRow.planAttachment)" |
|||
:key="index" |
|||
class="attachment-item" |
|||
> |
|||
<i class="el-icon-document"></i> |
|||
{{ item.name }} |
|||
<i |
|||
class="el-icon-download" |
|||
@click="downloadFile(item, index)" |
|||
style="cursor: pointer; margin-left: 8px;" |
|||
></i> |
|||
</div> |
|||
<div v-if="!parseAttachments(currentRow.planAttachment).length" class="no-attachments"> |
|||
无附件 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 如果有其他字段，可以在此添加 --> |
|||
</div> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {ref, onMounted, watch, reactive} from 'vue'; |
|||
import type { PropType } from 'vue'; |
|||
import {listAqjdxx, listDagl, listFzwz} from "~/api/dike"; |
|||
import {getDicts} from "~/api/common"; |
|||
import {getDictLabel} from "~/utils/dictUtils"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
}); |
|||
const scaleOptions=ref([]) |
|||
function getType() { |
|||
getDicts("file_data_type").then((res) => { |
|||
scaleOptions.value = res || []; |
|||
}); |
|||
} |
|||
|
|||
|
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
|
|||
// Search parameters |
|||
const searchDate = ref([]); |
|||
|
|||
function projTypeFormat(key: string) { |
|||
if (!key) return '--'; |
|||
return getDictLabel(scaleOptions.value, key) || key; |
|||
} |
|||
|
|||
const dialogVisible = ref(false); |
|||
|
|||
// Current row being viewed |
|||
const currentRow = reactive({ |
|||
regulationsAttachment: '', |
|||
planAttachment: '' |
|||
}); |
|||
|
|||
// View function |
|||
const handleView = (row: any) => { |
|||
console.log('View row:', row); |
|||
// Copy row data to currentRow |
|||
currentRow.regulationsAttachment = row.regulationsAttachment || ''; |
|||
currentRow.planAttachment = row.planAttachment || ''; |
|||
|
|||
// Show dialog |
|||
dialogVisible.value = true; |
|||
}; |
|||
const selectedFileType = ref(''); |
|||
// View function |
|||
// const handleView = (row: any) => { |
|||
// console.log('View row:', row); |
|||
// }; |
|||
|
|||
const handleSearch = () => { |
|||
initDagl(); |
|||
}; |
|||
|
|||
// 重置函数 |
|||
const handleReset = () => { |
|||
selectedFileType.value = ''; |
|||
initDagl(); |
|||
}; |
|||
|
|||
function downloadFile(item: string, index: number): void { |
|||
const file = JSON.parse(item)[index]; |
|||
handlePreview(file); |
|||
} |
|||
function parseAttachments(attachment: string): FileItem[] { |
|||
return JSON.parse(attachment); |
|||
} |
|||
|
|||
function handlePreview(file: { fileName: string; name: string }): void { |
|||
getFileStream({ fileName: file.fileName }).then((res) => { |
|||
const blob = new Blob([res], { |
|||
type: "application/xlsx", |
|||
}); |
|||
const href = URL.createObjectURL(blob); |
|||
const a = document.createElement("a"); |
|||
a.style.display = "none"; |
|||
a.href = href; |
|||
a.download = file.name; |
|||
a.click(); |
|||
URL.revokeObjectURL(a.href); |
|||
}); |
|||
} |
|||
|
|||
// Fetch data based on resCode changes |
|||
watch( |
|||
() => props.resCode, |
|||
(newVal) => { |
|||
if (newVal) { |
|||
fetchSafetyData(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
// Fetch safety appraisal data |
|||
const fetchSafetyData = async () => { |
|||
|
|||
}; |
|||
|
|||
function initDagl() { |
|||
|
|||
const requestData: any = { |
|||
dikeCode: props.resCode, |
|||
}; |
|||
|
|||
// 如果选择了文件类型，添加到请求中 |
|||
if (selectedFileType.value) { |
|||
requestData.regulationsAttachment = selectedFileType.value; |
|||
} |
|||
|
|||
listDagl({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data:requestData |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value=res.records || []; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getType(); |
|||
initDagl(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.safety-appraisal-container { |
|||
padding: 16px; |
|||
height: 100%; |
|||
|
|||
.top-options { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 16px; |
|||
|
|||
.left-options { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.option-label { |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.right-options { |
|||
.add-button { |
|||
background-color: #4cd964; |
|||
border-color: #4cd964; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.reset-button { |
|||
background-color: #666; |
|||
border-color: #666; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
.view-button { |
|||
color: #3a89fe; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<div class="safety-appraisal-container"> |
|||
<div class="top-options"> |
|||
<div class="left-options"> |
|||
<div class="search-item"> |
|||
<span class="option-label">采购时间</span> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
type="daterange" |
|||
format="YYYY-MM-DD" |
|||
value-format="YYYY-MM-DD" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
style="width: 240px" |
|||
/> |
|||
</div> |
|||
<div class="search-item"> |
|||
<span class="option-label">物资名称</span> |
|||
<el-input |
|||
v-model="materialName" |
|||
placeholder="请输入物资名称" |
|||
style="width: 200px" |
|||
/> |
|||
</div> |
|||
<div class="search-item"> |
|||
<span class="option-label">负责人姓名</span> |
|||
<el-input |
|||
v-model="responsiblePerson" |
|||
placeholder="请输入负责人姓名" |
|||
style="width: 200px" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button type="primary" class="add-button" @click="handleSearch">查询</el-button> |
|||
<el-button class="reset-button" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-container"> |
|||
<el-table :data="tableData" border style="width: 100%;color: black"> |
|||
<el-table-column type="index" label="序号" width="120" align="center" /> |
|||
<el-table-column prop="materialName" label="物资名称" width="180" align="center" /> |
|||
<el-table-column prop="materialNumber" label="物资数量" align="center" /> |
|||
<el-table-column prop="materialType" label="物资类型" align="center" /> |
|||
<el-table-column prop="materialNumber" label="采购时间" align="center" /> |
|||
<el-table-column label="操作" align="center" width="120"> |
|||
<template #default="scope"> |
|||
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="物资详情" |
|||
width="50%" |
|||
:before-close="handleDialogClose" |
|||
> |
|||
<div class="detail-container"> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">物资名称：</span> |
|||
<span class="detail-value">{{ currentRow.materialName || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">物资数量：</span> |
|||
<span class="detail-value">{{ currentRow.materialNumber || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">物资类型：</span> |
|||
<span class="detail-value">{{ currentRow.materialType || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">采购时间：</span> |
|||
<span class="detail-value">{{ currentRow.purchaseTime || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">负责人：</span> |
|||
<span class="detail-value">{{ currentRow.responsiblePerson || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {ref, onMounted, watch, reactive} from 'vue'; |
|||
import type { PropType } from 'vue'; |
|||
import {listAqjdxx, listFzwz} from "~/api/dike"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
}); |
|||
const dateRange = ref([]); |
|||
const materialName = ref(''); |
|||
const responsiblePerson = ref(''); |
|||
|
|||
// Dialog visibility |
|||
const dialogVisible = ref(false); |
|||
|
|||
// Current row being viewed |
|||
const currentRow = reactive({ |
|||
materialName: '', |
|||
materialNumber: '', |
|||
materialType: '', |
|||
purchaseTime: '', |
|||
responsiblePerson: '' |
|||
}); |
|||
|
|||
// View function |
|||
const handleView = (row: any) => { |
|||
console.log('View row:', row); |
|||
|
|||
// Copy row data to currentRow |
|||
currentRow.materialName = row.materialName || ''; |
|||
currentRow.materialNumber = row.materialNumber || ''; |
|||
currentRow.materialType = row.materialType || ''; |
|||
currentRow.purchaseTime = row.purchaseTime || ''; |
|||
currentRow.responsiblePerson = row.responsiblePerson || ''; |
|||
|
|||
// Show dialog |
|||
dialogVisible.value = true; |
|||
}; |
|||
|
|||
// Handle dialog close |
|||
const handleDialogClose = () => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
|
|||
// Search function |
|||
const handleSearch = () => { |
|||
initFxwz(); |
|||
}; |
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
|
|||
// Search parameters |
|||
const searchDate = ref([]); |
|||
|
|||
// View function |
|||
|
|||
|
|||
// Fetch data based on resCode changes |
|||
watch( |
|||
() => props.resCode, |
|||
(newVal) => { |
|||
if (newVal) { |
|||
fetchSafetyData(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
// Fetch safety appraisal data |
|||
const fetchSafetyData = async () => { |
|||
|
|||
}; |
|||
|
|||
function initFxwz() { |
|||
|
|||
const requestData: any = { |
|||
dikeCode: props.resCode, |
|||
}; |
|||
|
|||
// Add search parameters if they exist |
|||
if (materialName.value) { |
|||
requestData.materialName = materialName.value; |
|||
} |
|||
|
|||
if (responsiblePerson.value) { |
|||
requestData.responsiblePerson = responsiblePerson.value; |
|||
} |
|||
|
|||
// Add date range if selected |
|||
if (dateRange.value && dateRange.value.length === 2) { |
|||
requestData.startTime = dateRange.value[0]; |
|||
requestData.endTime = dateRange.value[1]; |
|||
} |
|||
listFzwz({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data:requestData |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value=res.records || []; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
initFxwz(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.safety-appraisal-container { |
|||
padding: 16px; |
|||
height: 100%; |
|||
|
|||
.top-options { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 16px; |
|||
|
|||
.left-options { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.option-label { |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.right-options { |
|||
.add-button { |
|||
background-color: #4cd964; |
|||
border-color: #4cd964; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.reset-button { |
|||
background-color: #666; |
|||
border-color: #666; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
.view-button { |
|||
color: #3a89fe; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,208 @@ |
|||
<template> |
|||
<div class="safety-appraisal-container"> |
|||
<div class="top-options"> |
|||
<div class="left-options"> |
|||
<span class="option-label">安全评定时间</span> |
|||
<el-date-picker |
|||
v-model="identifyTime" |
|||
type="date" |
|||
format="YYYY-MM-DD" |
|||
value-format="YYYY-MM-DD" |
|||
placeholder="选择日期" |
|||
@change="initSafe" |
|||
style="color: black" |
|||
/> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button class="reset-button" @click="resetFilter">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-container"> |
|||
<el-table :data="tableData" border style="width: 100%;color: black" class="custom-table"> |
|||
<el-table-column type="index" label="序号" width="120" align="center"/> |
|||
<el-table-column prop="identifyTime" label="安全评定时间" width="180" align="center" /> |
|||
<el-table-column prop="safetyEvaluationUnit" label="安全评的单位" align="center" /> |
|||
<el-table-column prop="unitQualification" label="评价单位资质" align="center" /> |
|||
<el-table-column prop="mainIssues" label="安全评价结论" align="center" /> |
|||
<el-table-column label="操作" align="center" width="120"> |
|||
<template #default="scope"> |
|||
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="安全评定详情" |
|||
width="50%" |
|||
:before-close="handleDialogClose" |
|||
> |
|||
<div class="detail-container"> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">安全评定时间：</span> |
|||
<span class="detail-value">{{ currentRow.identifyTime || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">安全评的单位：</span> |
|||
<span class="detail-value">{{ currentRow.safetyEvaluationUnit || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">评价单位资质：</span> |
|||
<span class="detail-value">{{ currentRow.unitQualification || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">安全评价结论：</span> |
|||
<span class="detail-value">{{ currentRow.mainIssues || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import {ref, onMounted, watch, reactive} from 'vue'; |
|||
import type { PropType } from 'vue'; |
|||
import {listAqjdxx, listJyjl} from "~/api/dike"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
}); |
|||
|
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
const identifyTime = ref(null); |
|||
|
|||
// Search parameters |
|||
const searchDate = ref([]); |
|||
|
|||
// View function |
|||
// const handleView = (row: any) => { |
|||
// console.log('View row:', row); |
|||
// }; |
|||
|
|||
// Fetch data based on resCode changes |
|||
watch( |
|||
() => props.resCode, |
|||
(newVal) => { |
|||
if (newVal) { |
|||
fetchSafetyData(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
|
|||
// Fetch safety appraisal data |
|||
const fetchSafetyData = async () => { |
|||
|
|||
}; |
|||
const currentRow = reactive({ |
|||
identifyTime: '', |
|||
safetyEvaluationUnit: '', |
|||
unitQualification: '', |
|||
mainIssues: '' |
|||
}); |
|||
const handleView = (row: any) => { |
|||
console.log('View row:', row); |
|||
// Copy row data to currentRow |
|||
currentRow.identifyTime = row.identifyTime || ''; |
|||
currentRow.safetyEvaluationUnit = row.safetyEvaluationUnit || ''; |
|||
currentRow.unitQualification = row.unitQualification || ''; |
|||
currentRow.mainIssues = row.mainIssues || ''; |
|||
|
|||
// Show dialog |
|||
dialogVisible.value = true; |
|||
}; |
|||
|
|||
const resetFilter = () => { |
|||
identifyTime.value = null; |
|||
initSafe(); |
|||
}; |
|||
const dialogVisible = ref(false); |
|||
function initSafe() { |
|||
console.log("Selected date:", identifyTime.value); |
|||
|
|||
// Build request data object |
|||
const requestData: any = { |
|||
dfrwId: props.resCode |
|||
}; |
|||
|
|||
// Only add identifyTime if it has a value |
|||
if (identifyTime.value) { |
|||
requestData.identifyTime = identifyTime.value; |
|||
} |
|||
listAqjdxx({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data: requestData, |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value=res.records || []; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
onMounted(() => { |
|||
initSafe(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.safety-appraisal-container { |
|||
padding: 16px; |
|||
height: 100%; |
|||
color: #333; // 设置字体颜色为深灰色 |
|||
|
|||
.top-options { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 16px; |
|||
|
|||
.left-options { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.option-label { |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.right-options { |
|||
.add-button { |
|||
background-color: #4cd964; |
|||
border-color: #4cd964; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.reset-button { |
|||
background-color: #666; |
|||
border-color: #666; |
|||
color: black; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
.custom-table { |
|||
.el-table__cell { |
|||
color: #333; // 设置表格内容字体颜色为深灰色 |
|||
} |
|||
} |
|||
|
|||
.view-button { |
|||
color: #3a89fe; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,242 @@ |
|||
<template> |
|||
<div class="safety-appraisal-container"> |
|||
<div class="top-options"> |
|||
<div class="left-options"> |
|||
<div class="search-item"> |
|||
<span class="option-label">档案类型</span> |
|||
<el-select |
|||
v-model="selectedFileType" |
|||
placeholder="请选择档案类型" |
|||
clearable |
|||
style="width: 200px;" |
|||
> |
|||
<el-option |
|||
v-for="item in scaleOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button type="primary" class="add-button" @click="handleSearch">查询</el-button> |
|||
<el-button class="reset-button" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-container"> |
|||
<el-table :data="tableData" border style="width: 100%;color: black"> |
|||
<el-table-column type="index" label="序号" width="120" align="center" /> |
|||
<el-table-column prop="regulationsAttachment" label="档案类型" width="180" align="center" > |
|||
<template #default="{ row }"> |
|||
{{projTypeFormat(row.regulationsAttachment)}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="planAttachment" label="档案附件" align="center"> |
|||
<template #default="{ row }"> |
|||
<div |
|||
v-for="(item, index) in parseAttachments(row.planAttachment)" |
|||
:key="index" |
|||
> |
|||
<i class="el-icon-document"></i> |
|||
{{ item.name }} |
|||
<i |
|||
class="el-icon-download" |
|||
@click="downloadFile(item, index)" |
|||
style="cursor: pointer" |
|||
></i> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" width="120"> |
|||
<template #default="scope"> |
|||
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, watch } from 'vue'; |
|||
import type { PropType } from 'vue'; |
|||
import {listDaglsz} from "~/api/sluice"; |
|||
import {getDicts} from "~/api/common"; |
|||
import {getDictLabel} from "~/utils/dictUtils"; |
|||
// import {getFileStream} from "~/api/common"; // 添加缺失的导入 |
|||
|
|||
interface FileItem { |
|||
fileName: string; |
|||
name: string; |
|||
[key: string]: any; |
|||
} |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
}); |
|||
|
|||
// 添加文件类型搜索 |
|||
const selectedFileType = ref(''); |
|||
|
|||
const scaleOptions = ref([]); |
|||
function getType() { |
|||
getDicts("file_data_type").then((res) => { |
|||
scaleOptions.value = res || []; |
|||
}); |
|||
} |
|||
|
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
|
|||
// Search parameters |
|||
const searchDate = ref([]); |
|||
|
|||
// View function |
|||
// const handleView = (row: any) => { |
|||
// console.log('View row:', row); |
|||
// }; |
|||
|
|||
// 搜索函数 |
|||
const handleSearch = () => { |
|||
initDagl(); |
|||
}; |
|||
|
|||
// 重置函数 |
|||
const handleReset = () => { |
|||
selectedFileType.value = ''; |
|||
initDagl(); |
|||
}; |
|||
|
|||
function projTypeFormat(key: string) { |
|||
console.log(scaleOptions.value, 11111111); |
|||
return getDictLabel(scaleOptions.value, key); |
|||
} |
|||
|
|||
function downloadFile(item: string, index: number): void { |
|||
const file = JSON.parse(item)[index]; |
|||
handlePreview(file); |
|||
} |
|||
|
|||
function parseAttachments(attachment: string): FileItem[] { |
|||
if (!attachment) return []; |
|||
try { |
|||
return JSON.parse(attachment); |
|||
} catch (error) { |
|||
console.error('Error parsing attachments:', error); |
|||
return []; |
|||
} |
|||
} |
|||
|
|||
function handlePreview(file: { fileName: string; name: string }): void { |
|||
// getFileStream({ fileName: file.fileName }).then((res) => { |
|||
// const blob = new Blob([res], { |
|||
// type: "application/xlsx", |
|||
// }); |
|||
// const href = URL.createObjectURL(blob); |
|||
// const a = document.createElement("a"); |
|||
// a.style.display = "none"; |
|||
// a.href = href; |
|||
// a.download = file.name; |
|||
// a.click(); |
|||
// URL.revokeObjectURL(a.href); |
|||
// }); |
|||
} |
|||
|
|||
// Fetch data based on resCode changes |
|||
watch( |
|||
() => props.resCode, |
|||
(newVal) => { |
|||
if (newVal) { |
|||
fetchSafetyData(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
// Fetch safety appraisal data |
|||
const fetchSafetyData = async () => { |
|||
|
|||
}; |
|||
|
|||
function initDagl() { |
|||
// 构建请求数据对象 |
|||
const requestData: any = { |
|||
wagaCode: props.resCode, |
|||
}; |
|||
|
|||
// 如果选择了文件类型，添加到请求中 |
|||
if (selectedFileType.value) { |
|||
requestData.regulationsAttachment = selectedFileType.value; |
|||
} |
|||
|
|||
listDaglsz({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data: requestData, |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value = res.records || []; |
|||
} |
|||
}).catch(error => { |
|||
console.error("API error:", error); |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getType(); |
|||
initDagl(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.safety-appraisal-container { |
|||
padding: 16px; |
|||
height: 100%; |
|||
|
|||
.top-options { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 16px; |
|||
|
|||
.left-options { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.search-item { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.option-label { |
|||
margin-right: 8px; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.right-options { |
|||
.add-button { |
|||
background-color: #4cd964; |
|||
border-color: #4cd964; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.reset-button { |
|||
background-color: #666; |
|||
border-color: #666; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
.view-button { |
|||
color: #3a89fe; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,286 @@ |
|||
<template> |
|||
<div class="safety-appraisal-container"> |
|||
<div class="top-options"> |
|||
<div class="left-options"> |
|||
<div class="search-item"> |
|||
<span class="option-label">采购时间</span> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
type="daterange" |
|||
format="YYYY-MM-DD" |
|||
value-format="YYYY-MM-DD" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
style="width: 240px" |
|||
/> |
|||
</div> |
|||
<div class="search-item"> |
|||
<span class="option-label">物资名称</span> |
|||
<el-input |
|||
v-model="materialName" |
|||
placeholder="请输入物资名称" |
|||
style="width: 200px" |
|||
/> |
|||
</div> |
|||
<div class="search-item"> |
|||
<span class="option-label">负责人姓名</span> |
|||
<el-input |
|||
v-model="responsiblePerson" |
|||
placeholder="请输入负责人姓名" |
|||
style="width: 200px" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button type="primary" class="add-button" @click="handleSearch">查询</el-button> |
|||
<el-button class="reset-button" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-container"> |
|||
<el-table :data="tableData" border style="width: 100%;color: black"> |
|||
<el-table-column type="index" label="序号" width="120" align="center" /> |
|||
<el-table-column prop="materialName" label="物资名称" width="180" align="center" /> |
|||
<el-table-column prop="materialNumber" label="物资数量" align="center" /> |
|||
<el-table-column prop="materialType" label="物资类型" align="center" /> |
|||
<el-table-column prop="purchaseTime" label="采购时间" align="center" /> |
|||
<el-table-column prop="responsiblePerson" label="负责人" align="center" /> |
|||
<el-table-column label="操作" align="center" width="120"> |
|||
<template #default="scope"> |
|||
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 查看详情对话框 --> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="物资详情" |
|||
width="50%" |
|||
:before-close="handleDialogClose" |
|||
> |
|||
<div class="detail-container"> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">物资名称：</span> |
|||
<span class="detail-value">{{ currentRow.materialName || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">物资数量：</span> |
|||
<span class="detail-value">{{ currentRow.materialNumber || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">物资类型：</span> |
|||
<span class="detail-value">{{ currentRow.materialType || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">采购时间：</span> |
|||
<span class="detail-value">{{ currentRow.purchaseTime || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">负责人：</span> |
|||
<span class="detail-value">{{ currentRow.responsiblePerson || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, watch, reactive } from 'vue'; |
|||
import type { PropType } from 'vue'; |
|||
import {listFzwz} from "~/api/sluice"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
}); |
|||
|
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
|
|||
// Search parameters |
|||
const dateRange = ref([]); |
|||
const materialName = ref(''); |
|||
const responsiblePerson = ref(''); |
|||
|
|||
// Dialog visibility |
|||
const dialogVisible = ref(false); |
|||
|
|||
// Current row being viewed |
|||
const currentRow = reactive({ |
|||
materialName: '', |
|||
materialNumber: '', |
|||
materialType: '', |
|||
purchaseTime: '', |
|||
responsiblePerson: '' |
|||
}); |
|||
|
|||
// View function |
|||
const handleView = (row: any) => { |
|||
console.log('View row:', row); |
|||
|
|||
// Copy row data to currentRow |
|||
currentRow.materialName = row.materialName || ''; |
|||
currentRow.materialNumber = row.materialNumber || ''; |
|||
currentRow.materialType = row.materialType || ''; |
|||
currentRow.purchaseTime = row.purchaseTime || ''; |
|||
currentRow.responsiblePerson = row.responsiblePerson || ''; |
|||
|
|||
// Show dialog |
|||
dialogVisible.value = true; |
|||
}; |
|||
|
|||
// Handle dialog close |
|||
const handleDialogClose = () => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
|
|||
// Search function |
|||
const handleSearch = () => { |
|||
initFxwz(); |
|||
}; |
|||
|
|||
// Reset function |
|||
const handleReset = () => { |
|||
dateRange.value = []; |
|||
materialName.value = ''; |
|||
responsiblePerson.value = ''; |
|||
initFxwz(); |
|||
}; |
|||
|
|||
// Fetch data based on resCode changes |
|||
watch( |
|||
() => props.resCode, |
|||
(newVal) => { |
|||
if (newVal) { |
|||
initFxwz(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
|
|||
function initFxwz() { |
|||
// Prepare request data |
|||
const requestData: any = { |
|||
wagaCode: props.resCode, |
|||
}; |
|||
|
|||
// Add search parameters if they exist |
|||
if (materialName.value) { |
|||
requestData.materialName = materialName.value; |
|||
} |
|||
|
|||
if (responsiblePerson.value) { |
|||
requestData.responsiblePerson = responsiblePerson.value; |
|||
} |
|||
|
|||
// Add date range if selected |
|||
if (dateRange.value && dateRange.value.length === 2) { |
|||
requestData.startTime = dateRange.value[0]; |
|||
requestData.endTime = dateRange.value[1]; |
|||
} |
|||
|
|||
listFzwz({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data: requestData, |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value = res.records || []; |
|||
} |
|||
}).catch(error => { |
|||
console.error("API error:", error); |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
initFxwz(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.safety-appraisal-container { |
|||
padding: 16px; |
|||
height: 100%; |
|||
|
|||
.top-options { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 16px; |
|||
|
|||
.left-options { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
gap: 15px; |
|||
|
|||
.search-item { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.option-label { |
|||
margin-right: 8px; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.right-options { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.add-button { |
|||
background-color: #4cd964; |
|||
border-color: #4cd964; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.reset-button { |
|||
background-color: #666; |
|||
border-color: #666; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
.view-button { |
|||
color: #3a89fe; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 详情对话框样式 */ |
|||
.detail-container { |
|||
padding: 10px; |
|||
|
|||
.detail-item { |
|||
margin-bottom: 15px; |
|||
display: flex; |
|||
|
|||
.detail-label { |
|||
width: 100px; |
|||
font-weight: 500; |
|||
color: #606266; |
|||
} |
|||
|
|||
.detail-value { |
|||
flex: 1; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.dialog-footer { |
|||
text-align: right; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,230 @@ |
|||
<template> |
|||
<div class="safety-appraisal-container"> |
|||
<div class="top-options"> |
|||
<div class="left-options"> |
|||
<span class="option-label">安全评定时间</span> |
|||
<el-date-picker |
|||
v-model="identifyTime" |
|||
type="date" |
|||
format="YYYY-MM-DD" |
|||
value-format="YYYY-MM-DD" |
|||
placeholder="选择日期" |
|||
@change="initSafe" |
|||
style="color: black" |
|||
/> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button class="reset-button" @click="resetFilter">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-container"> |
|||
<el-table :data="tableData" border style="width: 100%;color: black" class="custom-table"> |
|||
<el-table-column type="index" label="序号" width="120" align="center"/> |
|||
<el-table-column prop="identifyTime" label="安全评定时间" width="180" align="center" /> |
|||
<el-table-column prop="safetyEvaluationUnit" label="安全评的单位" align="center" /> |
|||
<el-table-column prop="unitQualification" label="评价单位资质" align="center" /> |
|||
<el-table-column prop="mainIssues" label="安全评价结论" align="center" /> |
|||
<el-table-column label="操作" align="center" width="120"> |
|||
<template #default="scope"> |
|||
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 查看详情对话框 --> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="安全评定详情" |
|||
width="50%" |
|||
:before-close="handleDialogClose" |
|||
> |
|||
<div class="detail-container"> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">安全评定时间：</span> |
|||
<span class="detail-value">{{ currentRow.identifyTime || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">安全评的单位：</span> |
|||
<span class="detail-value">{{ currentRow.safetyEvaluationUnit || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">评价单位资质：</span> |
|||
<span class="detail-value">{{ currentRow.unitQualification || '--' }}</span> |
|||
</div> |
|||
<div class="detail-item"> |
|||
<span class="detail-label">安全评价结论：</span> |
|||
<span class="detail-value">{{ currentRow.mainIssues || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, reactive } from 'vue'; |
|||
import type { PropType } from 'vue'; |
|||
import { listAqjd } from "~/api/sluice"; |
|||
import { isDate } from "lodash-es"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
default: '1900034196855689218', |
|||
} |
|||
}); |
|||
|
|||
// Use null as default, so we don't send an empty string |
|||
const identifyTime = ref(null); |
|||
|
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
|
|||
// Dialog visibility |
|||
const dialogVisible = ref(false); |
|||
|
|||
// Current row being viewed |
|||
const currentRow = reactive({ |
|||
identifyTime: '', |
|||
safetyEvaluationUnit: '', |
|||
unitQualification: '', |
|||
mainIssues: '' |
|||
}); |
|||
|
|||
// View function |
|||
const handleView = (row: any) => { |
|||
console.log('View row:', row); |
|||
// Copy row data to currentRow |
|||
currentRow.identifyTime = row.identifyTime || ''; |
|||
currentRow.safetyEvaluationUnit = row.safetyEvaluationUnit || ''; |
|||
currentRow.unitQualification = row.unitQualification || ''; |
|||
currentRow.mainIssues = row.mainIssues || ''; |
|||
|
|||
// Show dialog |
|||
dialogVisible.value = true; |
|||
}; |
|||
|
|||
// Handle dialog close |
|||
const handleDialogClose = () => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
|
|||
// Reset filter function |
|||
const resetFilter = () => { |
|||
identifyTime.value = null; |
|||
initSafe(); |
|||
}; |
|||
|
|||
function initSafe() { |
|||
console.log("Selected date:", identifyTime.value); |
|||
|
|||
// Build request data object |
|||
const requestData: any = { |
|||
szrwId: props.resCode |
|||
}; |
|||
|
|||
// Only add identifyTime if it has a value |
|||
if (identifyTime.value) { |
|||
requestData.identifyTime = identifyTime.value; |
|||
} |
|||
|
|||
console.log("Request data:", requestData); |
|||
|
|||
listAqjd({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data: requestData, |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value = res.records || []; |
|||
} |
|||
}).catch(error => { |
|||
console.error("API error:", error); |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
initSafe(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.safety-appraisal-container { |
|||
padding: 16px; |
|||
height: 100%; |
|||
color: #333; // 设置字体颜色为深灰色 |
|||
|
|||
.top-options { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 16px; |
|||
|
|||
.left-options { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.option-label { |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.right-options { |
|||
.add-button { |
|||
background-color: #4cd964; |
|||
border-color: #4cd964; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.reset-button { |
|||
background-color: #666; |
|||
border-color: #666; |
|||
color: black; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
.custom-table { |
|||
.el-table__cell { |
|||
color: #333; // 设置表格内容字体颜色为深灰色 |
|||
} |
|||
} |
|||
|
|||
.view-button { |
|||
color: #3a89fe; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 详情对话框样式 */ |
|||
.detail-container { |
|||
padding: 10px; |
|||
|
|||
.detail-item { |
|||
margin-bottom: 15px; |
|||
display: flex; |
|||
|
|||
.detail-label { |
|||
width: 120px; |
|||
font-weight: 500; |
|||
color: #606266; |
|||
} |
|||
|
|||
.detail-value { |
|||
flex: 1; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.dialog-footer { |
|||
text-align: right; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue