Compare commits
10 Commits
master
...
feature-no
| Author | SHA1 | Date |
|---|---|---|
 zth
|
6c4e1e582f | 2 weeks ago |
|
zth
|
faf90ffee5 | 3 weeks ago |
|
zth
|
766427769d | 3 weeks ago |
panyuyi
|
e44e7b66f0 | 3 weeks ago |
|
zth
|
deb7321b7c | 3 weeks ago |
|
zth
|
2f1757035e | 3 weeks ago |
|
zth
|
09c5d97617 | 4 weeks ago |
|
panyuyi
|
e6d9097cbd | 1 month ago |
|
panyuyi
|
34b35717ed | 1 month ago |
|
panyuyi
|
f1a2cd5979 | 1 month ago |
23 changed files with 3361 additions and 904 deletions
@ -0,0 +1,278 @@ |
|||
<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="search-btn !ml-12" |
|||
@click="handleSearch" |
|||
>查询</el-button |
|||
> |
|||
<el-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="650" |
|||
align="center" |
|||
> |
|||
<template #default="{ row }"> |
|||
{{ projTypeFormat(row.regulationsAttachment) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="planAttachment" label="档案附件" align="center"> |
|||
<template #default="{ row }"> |
|||
<div |
|||
style="cursor: pointer" |
|||
v-for="(item, index) in parseAttachments(row.planAttachment)" |
|||
:key="index" |
|||
@click="downloadFile(item, index)" |
|||
> |
|||
<i class="el-icon-document"></i> |
|||
{{ item.name }} |
|||
<i class="el-icon-download" style="cursor: pointer"></i> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<el-dialog v-model="dialogVisible" title="档案详情" width="50%"> |
|||
<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" |
|||
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, getFileStream } from "~/api/dike"; |
|||
import { getDicts } from "~/api/common"; |
|||
import { getDictLabel } from "~/utils/dictUtils"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
}, |
|||
}); |
|||
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 { |
|||
console.log(item, 1111); |
|||
const file = item; |
|||
console.log(file); |
|||
handlePreview(item); |
|||
} |
|||
function parseAttachments(attachment: string): [] { |
|||
return JSON.parse(attachment); |
|||
} |
|||
|
|||
function handlePreview(file: object): 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 safety appraisal data |
|||
// const fetchSafetyData = async () => {}; |
|||
|
|||
// // Fetch data based on resCode changes |
|||
// watch( |
|||
// () => props.resCode, |
|||
// (newVal) => { |
|||
// if (newVal) { |
|||
// fetchSafetyData(); |
|||
// } |
|||
// }, |
|||
// { immediate: true } |
|||
// ); |
|||
|
|||
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-left: 10px; |
|||
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,638 @@ |
|||
<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="procurementTime" |
|||
type="date" |
|||
format="YYYY-MM-DD" |
|||
value-format="YYYY-MM-DD" |
|||
placeholder="选择日期" |
|||
style="width: 240px" |
|||
/> |
|||
</div> |
|||
<div class="search-item" style="margin-left: 10px"> |
|||
<span class="option-label">物资名称</span> |
|||
<el-input |
|||
v-model="materialName" |
|||
placeholder="请输入物资名称" |
|||
style="width: 200px" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button |
|||
type="primary" |
|||
class="search-btn !ml-12" |
|||
@click="handleSearch" |
|||
>查询</el-button |
|||
> |
|||
<el-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"> |
|||
<template #default="scope"> |
|||
{{ projTypeFormat(scope.row.materialType) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="procurementTime" |
|||
label="采购时间" |
|||
align="center" |
|||
/> |
|||
<el-table-column prop="personName" 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> |
|||
|
|||
<Teleport to="body"> |
|||
<Transition name="dialog-fade"> |
|||
<div |
|||
v-if="dialogVisible" |
|||
class="modern-dialog-overlay" |
|||
@click="handleOverlayClick" |
|||
> |
|||
<div class="modern-dialog-container" @click.stop> |
|||
<div class="modern-dialog-header"> |
|||
<div class="modern-dialog-title"> |
|||
<div class="title-icon"> |
|||
<i class="el-icon-document"></i> |
|||
</div> |
|||
<h3>防汛物资详情</h3> |
|||
</div> |
|||
<button |
|||
class="modern-dialog-close" |
|||
@click="dialogVisible = false" |
|||
> |
|||
<svg viewBox="0 0 24 24" width="24" height="24"> |
|||
<path |
|||
fill="currentColor" |
|||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" |
|||
/> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-content"> |
|||
<div class="detail-card"> |
|||
<div class="detail-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">物资名称</span> |
|||
<span class="detail-value">{{ |
|||
currentRow.materialName || "--" |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">负责人</span> |
|||
<span class="detail-value">{{ |
|||
currentRow.personName || "--" |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">负责人电话</span> |
|||
<span class="detail-value">{{ |
|||
currentRow.personPhone || "--" |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item conclusion-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">负责人职务</span> |
|||
<div class="detail-value"> |
|||
{{ currentRow.personLevel || "--" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">物资数量</span> |
|||
<div class="detail-value"> |
|||
{{ currentRow.materialNumber || "--" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">采购时间</span> |
|||
<div class="detail-value"> |
|||
{{ currentRow.procurementTime || "--" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">物资种类</span> |
|||
<div class="detail-value"> |
|||
{{ projTypeFormat(currentRow.materialType) || "--" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
<div class="detail-content"> |
|||
<span class="detail-label">保质期</span> |
|||
<div class="detail-value"> |
|||
{{ currentRow.shelfLife || "--" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-footer"> |
|||
<el-button class="close-button" @click="dialogVisible = false" |
|||
>关闭</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Transition> |
|||
</Teleport> |
|||
<!-- <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">{{ projTypeFormat(currentRow.materialType) || '--' }}</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="detail-item">--> |
|||
<!-- <span class="detail-label">采购时间：</span>--> |
|||
<!-- <span class="detail-value">{{ currentRow.procurementTime || '--' }}</span>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="detail-item">--> |
|||
<!-- <span class="detail-label">负责人：</span>--> |
|||
<!-- <span class="detail-value">{{ currentRow.personName || '--' }}</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"; |
|||
import { getDictLabel } from "~/utils/dictUtils"; |
|||
import { getDicts } from "~/api/common"; |
|||
const handleOverlayClick = (e: MouseEvent) => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string>, |
|||
}, |
|||
}); |
|||
const dateRange = ref([]); |
|||
const materialName = ref(""); |
|||
const responsiblePerson = ref(""); |
|||
const procurementTime = ref(null); |
|||
// Dialog visibility |
|||
const dialogVisible = ref(false); |
|||
|
|||
// Current row being viewed |
|||
const currentRow = reactive({ |
|||
materialName: "", |
|||
materialNumber: "", |
|||
personLevel: "", |
|||
personPhone: "", |
|||
shelfLife: "", |
|||
materialType: "", |
|||
procurementTime: "", |
|||
personName: "", |
|||
}); |
|||
|
|||
const handleReset = () => { |
|||
procurementTime.value = null; |
|||
materialName.value = ""; |
|||
responsiblePerson.value = ""; |
|||
initFxwz(); |
|||
}; |
|||
|
|||
// 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.procurementTime = row.procurementTime || ""; |
|||
currentRow.personName = row.personName || ""; |
|||
(currentRow.personPhone = row.personPhone || ""), |
|||
(currentRow.personLevel = row.personLevel || ""), |
|||
(currentRow.shelfLife = row.shelfLife || ""); |
|||
|
|||
// Show dialog |
|||
dialogVisible.value = true; |
|||
}; |
|||
const typesMaterials = ref([]); |
|||
// Handle dialog close |
|||
const handleDialogClose = () => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
function getType() { |
|||
getDicts("types_materials").then((res) => { |
|||
typesMaterials.value = res || []; |
|||
console.log(typesMaterials.value, "11111"); |
|||
}); |
|||
} |
|||
function projTypeFormat(key: string) { |
|||
if (!key) return "--"; |
|||
return getDictLabel(typesMaterials.value, key) || key; |
|||
} |
|||
|
|||
// Search function |
|||
const handleSearch = () => { |
|||
initFxwz(); |
|||
}; |
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
|
|||
// Search parameters |
|||
const searchDate = ref([]); |
|||
|
|||
// View function |
|||
|
|||
// Fetch safety appraisal data |
|||
// const fetchSafetyData = async () => {}; |
|||
|
|||
// // Fetch data based on resCode changes |
|||
// watch( |
|||
// () => props.resCode, |
|||
// (newVal) => { |
|||
// if (newVal) { |
|||
// fetchSafetyData(); |
|||
// } |
|||
// }, |
|||
// { immediate: true } |
|||
// ); |
|||
|
|||
function initFxwz() { |
|||
const requestData: any = { |
|||
dikeCode: props.resCode, |
|||
}; |
|||
|
|||
if (procurementTime.value) { |
|||
requestData.procurementTime = procurementTime.value; |
|||
} |
|||
// Add search parameters if they exist |
|||
if (materialName.value) { |
|||
requestData.materialName = materialName.value; |
|||
} |
|||
|
|||
if (responsiblePerson.value) { |
|||
requestData.personName = responsiblePerson.value; |
|||
} |
|||
|
|||
// Add date range if selected |
|||
|
|||
listFzwz({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data: requestData, |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value = res.records || []; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getType(); |
|||
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 { |
|||
padding: 15px; |
|||
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; |
|||
} |
|||
|
|||
.dialog-fade-enter-active, |
|||
.dialog-fade-leave-active { |
|||
transition: |
|||
opacity 0.3s ease, |
|||
transform 0.3s ease; |
|||
} |
|||
|
|||
.dialog-fade-enter-from, |
|||
.dialog-fade-leave-to { |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
} |
|||
|
|||
.modern-dialog-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.6); |
|||
backdrop-filter: blur(4px); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 2000; |
|||
} |
|||
|
|||
.modern-dialog-container { |
|||
width: 550px; |
|||
max-width: 90%; |
|||
background: #fff; |
|||
border-radius: 12px; |
|||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|||
} |
|||
|
|||
@keyframes dialog-slide-in { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(30px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-header { |
|||
padding: 20px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
color: #fff; |
|||
|
|||
.modern-dialog-title { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.title-icon { |
|||
margin-right: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 36px; |
|||
height: 36px; |
|||
border-radius: 50%; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0; |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-close { |
|||
background: transparent; |
|||
border: none; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
width: 32px; |
|||
height: 22px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
transition: background-color 0.2s; |
|||
|
|||
&:hover { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-content { |
|||
padding: 24px; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
|
|||
.detail-card { |
|||
background: #f8f9fa; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.detail-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 5px; |
|||
padding-bottom: 5px; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
|||
transition: |
|||
transform 0.2s, |
|||
box-shadow 0.2s; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
&:hover { |
|||
transform: translateX(5px); |
|||
} |
|||
|
|||
.detail-icon { |
|||
flex-shrink: 0; |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.detail-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.detail-label { |
|||
font-size: 14px; |
|||
color: #666; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.detail-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
&.conclusion-item { |
|||
.conclusion-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
padding: 12px; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
border-left: 4px solid #0acccc; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-footer { |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
background: #f8f9fa; |
|||
border-top: 1px solid #e9ecef; |
|||
|
|||
.close-button { |
|||
background: linear-gradient(135deg, #2c7ef8 0%, #2c5ef8 100%); |
|||
border: none; |
|||
color: white; |
|||
padding: 10px 24px; |
|||
border-radius: 6px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
transition: |
|||
transform 0.15s, |
|||
box-shadow 0.15s; |
|||
|
|||
&:hover { |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); |
|||
} |
|||
|
|||
&:active { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,450 @@ |
|||
<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="选择日期" |
|||
style="color: black" |
|||
/> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button type="primary" class="search-btn !ml-12" @click="handleSearch">查询</el-button> |
|||
<el-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> |
|||
|
|||
|
|||
<Teleport to="body"> |
|||
<Transition name="dialog-fade"> |
|||
<div v-if="dialogVisible" class="modern-dialog-overlay" @click="handleOverlayClick"> |
|||
<div class="modern-dialog-container" @click.stop> |
|||
<div class="modern-dialog-header"> |
|||
<div class="modern-dialog-title"> |
|||
<div class="title-icon"> |
|||
<i class="el-icon-document"></i> |
|||
</div> |
|||
<h3>安全评定详情</h3> |
|||
</div> |
|||
<button class="modern-dialog-close" @click="dialogVisible = false"> |
|||
<svg viewBox="0 0 24 24" width="24" height="24"> |
|||
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-content"> |
|||
<div class="detail-card"> |
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">安全评定时间</span> |
|||
<span class="detail-value">{{ currentRow.identifyTime || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">安全评的单位</span> |
|||
<span class="detail-value">{{ currentRow.safetyEvaluationUnit || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">评价单位资质</span> |
|||
<span class="detail-value">{{ currentRow.unitQualification || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item conclusion-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">安全评价结论</span> |
|||
<div class="conclusion-value">{{ currentRow.mainIssues || '--' }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-footer"> |
|||
<el-button class="close-button" @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Transition> |
|||
</Teleport> |
|||
</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>, |
|||
}, |
|||
|
|||
}); |
|||
|
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
const identifyTime = ref(null); |
|||
|
|||
// Search parameters |
|||
const searchDate = ref([]); |
|||
|
|||
// Watch for resCode changes |
|||
// watch( |
|||
// () => props.resCode, |
|||
// (newVal) => { |
|||
// if (newVal) { |
|||
// fetchSafetyData(); |
|||
// } |
|||
// }, |
|||
// { immediate: true } |
|||
// ); |
|||
|
|||
// Fetch safety appraisal data |
|||
// const fetchSafetyData = async () => { |
|||
// |
|||
// }; |
|||
|
|||
// Current row data for dialog |
|||
const currentRow = reactive({ |
|||
identifyTime: '', |
|||
safetyEvaluationUnit: '', |
|||
unitQualification: '', |
|||
mainIssues: '' |
|||
}); |
|||
const handleSearch = () => { |
|||
initSafe(); |
|||
}; |
|||
// Dialog visibility |
|||
const dialogVisible = ref(false); |
|||
|
|||
// Handle viewing a row |
|||
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 with animation |
|||
dialogVisible.value = true; |
|||
}; |
|||
|
|||
// Handle dialog overlay click |
|||
const handleOverlayClick = (e: MouseEvent) => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
|
|||
// Reset filter |
|||
const resetFilter = () => { |
|||
identifyTime.value = null; |
|||
initSafe(); |
|||
}; |
|||
|
|||
// Initialize safety data |
|||
function initSafe() { |
|||
console.log("Selected date:", identifyTime.value); |
|||
|
|||
// Build request data object |
|||
const requestData: any = { |
|||
dikeCode: 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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 惊艳的弹窗样式 */ |
|||
.dialog-fade-enter-active, |
|||
.dialog-fade-leave-active { |
|||
transition: opacity 0.3s ease, transform 0.3s ease; |
|||
} |
|||
|
|||
.dialog-fade-enter-from, |
|||
.dialog-fade-leave-to { |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
} |
|||
|
|||
.modern-dialog-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.6); |
|||
backdrop-filter: blur(4px); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 2000; |
|||
} |
|||
|
|||
.modern-dialog-container { |
|||
width: 550px; |
|||
max-width: 90%; |
|||
background: #fff; |
|||
border-radius: 12px; |
|||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|||
} |
|||
|
|||
@keyframes dialog-slide-in { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(30px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-header { |
|||
padding: 20px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
color: #fff; |
|||
|
|||
.modern-dialog-title { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.title-icon { |
|||
margin-right: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 36px; |
|||
height: 36px; |
|||
border-radius: 50%; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0; |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-close { |
|||
background: transparent; |
|||
border: none; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
width: 32px; |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
transition: background-color 0.2s; |
|||
|
|||
&:hover { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-content { |
|||
padding: 24px; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
|
|||
.detail-card { |
|||
background: #f8f9fa; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.detail-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 20px; |
|||
padding-bottom: 20px; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
|||
transition: transform 0.2s, box-shadow 0.2s; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
&:hover { |
|||
transform: translateX(5px); |
|||
} |
|||
|
|||
.detail-icon { |
|||
flex-shrink: 0; |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.detail-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.detail-label { |
|||
font-size: 14px; |
|||
color: #666; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.detail-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
&.conclusion-item { |
|||
.conclusion-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
padding: 12px; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
border-left: 4px solid #0acccc; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-footer { |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
background: #f8f9fa; |
|||
border-top: 1px solid #e9ecef; |
|||
|
|||
.close-button { |
|||
background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); |
|||
border: none; |
|||
color: white; |
|||
padding: 10px 24px; |
|||
border-radius: 6px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
transition: transform 0.15s, box-shadow 0.15s; |
|||
|
|||
&:hover { |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); |
|||
} |
|||
|
|||
&:active { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,252 @@ |
|||
<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="search-btn !ml-12" |
|||
@click="handleSearch" |
|||
>查询</el-button |
|||
> |
|||
<el-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="650" |
|||
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" style="cursor: pointer"></i> |
|||
</div> |
|||
</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>, |
|||
}, |
|||
}); |
|||
|
|||
// 添加文件类型搜索 |
|||
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 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 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,553 @@ |
|||
<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="procurementTime" |
|||
type="date" |
|||
format="YYYY-MM-DD" |
|||
value-format="YYYY-MM-DD" |
|||
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> |
|||
<div class="right-options"> |
|||
<el-button type="primary" class="search-btn !ml-12" @click="handleSearch">查询</el-button> |
|||
<el-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" > |
|||
<template #default="scope"> |
|||
{{projTypeFormat(scope.row.materialType)}} |
|||
</template> |
|||
</el-table-column> <el-table-column prop="purchaseTime" label="采购时间" align="center" /> |
|||
<el-table-column prop="responsiblePerson" label="负责人" align="center" /> |
|||
<el-table-column label="操作" align="center" width="100"> |
|||
<template #default="scope"> |
|||
<el-button type="text" class="view-button" @click="handleView(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 查看详情对话框 --> |
|||
<Teleport to="body"> |
|||
<Transition name="dialog-fade"> |
|||
<div v-if="dialogVisible" class="modern-dialog-overlay" @click="handleOverlayClick"> |
|||
<div class="modern-dialog-container" @click.stop> |
|||
<div class="modern-dialog-header"> |
|||
<div class="modern-dialog-title"> |
|||
<div class="title-icon"> |
|||
<i class="el-icon-document"></i> |
|||
</div> |
|||
<h3>防汛物资详情</h3> |
|||
</div> |
|||
<button class="modern-dialog-close" @click="dialogVisible = false"> |
|||
<svg viewBox="0 0 24 24" width="24" height="24"> |
|||
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-content"> |
|||
<div class="detail-card"> |
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">物资名称</span> |
|||
<span class="detail-value">{{ currentRow.materialName || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">负责人</span> |
|||
<span class="detail-value">{{ currentRow.personName || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">负责人电话</span> |
|||
<span class="detail-value">{{ currentRow.personPhone || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item conclusion-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">负责人职务</span> |
|||
<div class="detail-value">{{ currentRow.personLevel || '--' }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">物资数量</span> |
|||
<div class="detail-value">{{ currentRow.materialNumber || '--' }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">采购时间</span> |
|||
<div class="detail-value">{{ currentRow.procurementTime || '--' }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">物资种类</span> |
|||
<div class="detail-value">{{ projTypeFormat(currentRow.materialType) || '--' }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="detail-item conclusion-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">保质期</span> |
|||
<div class="detail-value">{{ currentRow.shelfLife || '--' }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-footer"> |
|||
<el-button class="close-button" @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Transition> |
|||
</Teleport> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, watch, reactive } from 'vue'; |
|||
import type { PropType } from 'vue'; |
|||
import {listFzwz} from "~/api/sluice"; |
|||
import {getDicts} from "~/api/common"; |
|||
import {getDictLabel} from "~/utils/dictUtils"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String as PropType<string> |
|||
}, |
|||
}); |
|||
|
|||
// Data for the table |
|||
const tableData = ref([]); |
|||
|
|||
// Search parameters |
|||
const dateRange = ref([]); |
|||
const materialName = ref(''); |
|||
const responsiblePerson = ref(''); |
|||
|
|||
// Dialog visibility |
|||
const dialogVisible = ref(false); |
|||
const typesMaterials=ref([]) |
|||
// Current row being viewed |
|||
const currentRow = reactive({ |
|||
materialName: '', |
|||
materialNumber: '', |
|||
personLevel:'', |
|||
personPhone:'', |
|||
shelfLife:'', |
|||
materialType: '', |
|||
procurementTime: '', |
|||
personName: '' |
|||
}); |
|||
function getType() { |
|||
getDicts("types_materials").then((res) => { |
|||
typesMaterials.value = res || []; |
|||
}); |
|||
} |
|||
|
|||
// 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.procurementTime = row.procurementTime || ''; |
|||
currentRow.personName = row.personName || ''; |
|||
currentRow.personPhone=row.personPhone||'', |
|||
currentRow.personLevel=row.personLevel||'', |
|||
currentRow.shelfLife=row.shelfLife||'' |
|||
// Show dialog |
|||
dialogVisible.value = true; |
|||
}; |
|||
|
|||
// Handle dialog close |
|||
const handleDialogClose = () => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
const handleOverlayClick = (e: MouseEvent) => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
// Search function |
|||
const handleSearch = () => { |
|||
initFxwz(); |
|||
}; |
|||
|
|||
// Reset function |
|||
const handleReset = () => { |
|||
procurementTime.value = null; |
|||
materialName.value = ''; |
|||
responsiblePerson.value = ''; |
|||
initFxwz(); |
|||
}; |
|||
|
|||
// Fetch data based on resCode changes |
|||
watch( |
|||
() => props.resCode, |
|||
(newVal) => { |
|||
if (newVal) { |
|||
initFxwz(); |
|||
} |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
const procurementTime=ref(null) |
|||
|
|||
function initFxwz() { |
|||
// Prepare request data |
|||
const requestData: any = { |
|||
wagaCode: props.resCode, |
|||
}; |
|||
if (procurementTime.value){ |
|||
requestData.procurementTime=procurementTime.value; |
|||
} |
|||
// 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 |
|||
|
|||
listFzwz({ |
|||
page: 1, |
|||
pageSize: 10, |
|||
data: requestData, |
|||
}).then((res) => { |
|||
if (res) { |
|||
tableData.value = res.records || []; |
|||
} |
|||
}).catch(error => { |
|||
console.error("API error:", error); |
|||
}); |
|||
} |
|||
function projTypeFormat(key: string) { |
|||
if (!key) return '--'; |
|||
return getDictLabel(typesMaterials.value, key) || key; |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getType() |
|||
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 { |
|||
padding: 15px; |
|||
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; |
|||
} |
|||
|
|||
.dialog-fade-enter-active, |
|||
.dialog-fade-leave-active { |
|||
transition: opacity 0.3s ease, transform 0.3s ease; |
|||
} |
|||
|
|||
.dialog-fade-enter-from, |
|||
.dialog-fade-leave-to { |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
} |
|||
|
|||
.modern-dialog-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.6); |
|||
backdrop-filter: blur(4px); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 2000; |
|||
} |
|||
|
|||
.modern-dialog-container { |
|||
width: 550px; |
|||
max-width: 90%; |
|||
background: #fff; |
|||
border-radius: 12px; |
|||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|||
} |
|||
|
|||
@keyframes dialog-slide-in { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(30px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-header { |
|||
padding: 20px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
color: #fff; |
|||
|
|||
.modern-dialog-title { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.title-icon { |
|||
margin-right: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 36px; |
|||
height: 36px; |
|||
border-radius: 50%; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0; |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-close { |
|||
background: transparent; |
|||
border: none; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
width: 32px; |
|||
height: 22px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
transition: background-color 0.2s; |
|||
|
|||
&:hover { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-content { |
|||
padding: 24px; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
|
|||
.detail-card { |
|||
background: #f8f9fa; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.detail-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 5px; |
|||
padding-bottom: 5px; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
|||
transition: transform 0.2s, box-shadow 0.2s; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
&:hover { |
|||
transform: translateX(5px); |
|||
} |
|||
|
|||
.detail-icon { |
|||
flex-shrink: 0; |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.detail-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.detail-label { |
|||
font-size: 14px; |
|||
color: #666; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.detail-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
&.conclusion-item { |
|||
.conclusion-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
padding: 12px; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
border-left: 4px solid #0acccc; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-footer { |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
background: #f8f9fa; |
|||
border-top: 1px solid #e9ecef; |
|||
|
|||
.close-button { |
|||
background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); |
|||
border: none; |
|||
color: white; |
|||
padding: 10px 24px; |
|||
border-radius: 6px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
transition: transform 0.15s, box-shadow 0.15s; |
|||
|
|||
&:hover { |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); |
|||
} |
|||
|
|||
&:active { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,440 @@ |
|||
<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="选择日期" |
|||
style="color: black" |
|||
/> |
|||
</div> |
|||
<div class="right-options"> |
|||
<el-button type="primary" class="search-btn !ml-12" @click="handleSearch">查询</el-button> |
|||
<el-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> |
|||
|
|||
<!-- 查看详情对话框 --> |
|||
<Teleport to="body"> |
|||
<Transition name="dialog-fade"> |
|||
<div v-if="dialogVisible" class="modern-dialog-overlay" @click="handleOverlayClick"> |
|||
<div class="modern-dialog-container" @click.stop> |
|||
<div class="modern-dialog-header"> |
|||
<div class="modern-dialog-title"> |
|||
<div class="title-icon"> |
|||
<i class="el-icon-document"></i> |
|||
</div> |
|||
<h3>安全评定详情</h3> |
|||
</div> |
|||
<button class="modern-dialog-close" @click="dialogVisible = false"> |
|||
<svg viewBox="0 0 24 24" width="24" height="24"> |
|||
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-content"> |
|||
<div class="detail-card"> |
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">安全评定时间</span> |
|||
<span class="detail-value">{{ currentRow.identifyTime || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">安全评的单位</span> |
|||
<span class="detail-value">{{ currentRow.safetyEvaluationUnit || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">评价单位资质</span> |
|||
<span class="detail-value">{{ currentRow.unitQualification || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail-item conclusion-item"> |
|||
|
|||
<div class="detail-content"> |
|||
<span class="detail-label">安全评价结论</span> |
|||
<div class="conclusion-value">{{ currentRow.mainIssues || '--' }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modern-dialog-footer"> |
|||
<el-button class="close-button" @click="dialogVisible = false">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Transition> |
|||
</Teleport> |
|||
</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> |
|||
} |
|||
}); |
|||
|
|||
// 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: '' |
|||
}); |
|||
const handleSearch = () => { |
|||
initSafe(); |
|||
}; |
|||
const handleOverlayClick = (e: MouseEvent) => { |
|||
dialogVisible.value = false; |
|||
}; |
|||
|
|||
// 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 = { |
|||
wagaCode: 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: #3a89fe; |
|||
border-color: #3a89fe; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
.custom-table { |
|||
.el-table__cell { |
|||
color: #333; // 设置表格内容字体颜色为深灰色 |
|||
} |
|||
} |
|||
|
|||
.view-button { |
|||
color: #3a89fe; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.dialog-fade-enter-active, |
|||
.dialog-fade-leave-active { |
|||
transition: opacity 0.3s ease, transform 0.3s ease; |
|||
} |
|||
|
|||
.dialog-fade-enter-from, |
|||
.dialog-fade-leave-to { |
|||
opacity: 0; |
|||
transform: scale(0.9); |
|||
} |
|||
|
|||
.modern-dialog-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.6); |
|||
backdrop-filter: blur(4px); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 2000; |
|||
} |
|||
|
|||
.modern-dialog-container { |
|||
width: 550px; |
|||
max-width: 90%; |
|||
background: #fff; |
|||
border-radius: 12px; |
|||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
animation: dialog-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|||
} |
|||
|
|||
@keyframes dialog-slide-in { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(30px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-header { |
|||
padding: 20px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
color: #fff; |
|||
|
|||
.modern-dialog-title { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.title-icon { |
|||
margin-right: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 36px; |
|||
height: 36px; |
|||
border-radius: 50%; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0; |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-close { |
|||
background: transparent; |
|||
border: none; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
width: 32px; |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
transition: background-color 0.2s; |
|||
|
|||
&:hover { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-content { |
|||
padding: 24px; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
|
|||
.detail-card { |
|||
background: #f8f9fa; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.detail-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 20px; |
|||
padding-bottom: 20px; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
|||
transition: transform 0.2s, box-shadow 0.2s; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
&:hover { |
|||
transform: translateX(5px); |
|||
} |
|||
|
|||
.detail-icon { |
|||
flex-shrink: 0; |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
background: linear-gradient(135deg, #0acccc 0%, #0acccc 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.detail-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.detail-label { |
|||
font-size: 14px; |
|||
color: #666; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.detail-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
&.conclusion-item { |
|||
.conclusion-value { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
padding: 12px; |
|||
background: #fff; |
|||
border-radius: 6px; |
|||
border-left: 4px solid #0acccc; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modern-dialog-footer { |
|||
padding: 16px 24px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
background: #f8f9fa; |
|||
border-top: 1px solid #e9ecef; |
|||
|
|||
.close-button { |
|||
background: linear-gradient(135deg, #2C7EF8 0%, #2C5EF8 100%); |
|||
border: none; |
|||
color: white; |
|||
padding: 10px 24px; |
|||
border-radius: 6px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
transition: transform 0.15s, box-shadow 0.15s; |
|||
|
|||
&:hover { |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(44, 126, 248, 0.3); |
|||
} |
|||
|
|||
&:active { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue