bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改客户所提基础问题

This commit is contained in:
lizhenhua 2025-07-10 10:48:11 +08:00
parent f943ee47ac
commit 7cea923408
2 changed files with 123 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/user/rent-facility/index.vue
View File

@ -2,7 +2,7 @@
<div class="equipment-table">
<h2 class="title">机械化施工装备配置率</h2>
<div v-show="!showSecondPage">
<div v-if="!showSecondPage">
<el-table
:data="pagedData"
show-overflow-tooltip
@ -53,13 +53,13 @@
:total="total"
/> -->
</div>
<Line
v-show="showSecondPage"
:title="secondPageTitle"
:secondPageTitleId="secondPageTitleId"
:table-data="detailTableData"
@back="handleBack"
v-if="showSecondPage"
:key="secondPageTitleId + '_' + secondPageTitle"
:title="secondPageTitle"
:secondPageTitleId="secondPageTitleId"
:table-data="detailTableData"
@back="handleBack"
/>
</div>
</template>
@ -116,16 +116,25 @@ onMounted(() => {
// 钻取详情
const handleDrill = async (row, type) => {
const res = await getDetailList({ companyId: row.companyId,configType:type })
if(res.code ==200){
//secondPageTitle.value = `${row.deptName}详情页面`;
secondPageTitle.value = `${row.companyName }详情页面`;
secondPageTitleId.value =row.companyId;
showSecondPage.value = true;
detailTableData.value =res.rows
}
// 1. 先清空旧数据并隐藏旧页面，避免组件未刷新
showSecondPage.value = false
detailTableData.value = []
// 2. 调接口拿到详情数据
const res = await getDetailList({ companyId: row.companyId, configType: type })
if (res.code === 200) {
secondPageTitle.value = `${row.companyName}详情页面`
secondPageTitleId.value = row.companyId
detailTableData.value = res.rows
// 3. nextTick 等组件清理完后再显示
nextTick(() => {
showSecondPage.value = true
})
}
}
// 返回主页面
const handleBack = () => {
showSecondPage.value = false;

102
src/views/user/rent-facility/line.vue
View File

@ -25,14 +25,17 @@
<el-table-column prop="combinedName" label="装备类目" width="120" />
<el-table-column prop="name" label="装备名称" width="120" />
<el-table-column label="基本配置标准（台/套）" min-width="120" align="center">
<el-table-column prop="standard" label="标准" />
<el-table-column
prop="standard"
:label="`标准(${props.tableData && props.tableData[0] && props.tableData[0].labelVol || ''})`"
/>
</el-table-column>
<!-- <el-table-column prop="type" label="装备种类" width="100" /> -->
<el-table-column prop="desc" label="配置说明" width="100" />
<el-table-column prop="value" label="装备配置率赋值" width="200" />
<el-table-column prop="own" label="自有装备数量" width="150" >
<template #default="{ row }">
<span class="cell-yellow">{{ row.own }}</span>
<span class="link" @click="showOwnDetail(row)">{{ row.own }}</span>
</template>
</el-table-column>
<el-table-column prop="rent" label="租赁装备数量" width="120">
@ -54,12 +57,54 @@
<el-table-column prop="reason" label="特殊装备原因" width="130" /> -->
</el-table>
</div>
<!-- 三级页面弹窗 -->
<el-dialog
v-model="dialogVisible"
:title="`【${currentDetail.name || ''}】自有装备详情`"
width="65%"
class="own-detail-dialog"
:destroy-on-close="true"
:close-on-click-modal="false"
>
<div class="dialog-body-wrapper">
<el-table :data="ownDetailList" size="small" border class="custom-table">
<el-table-column prop="index" label="序号" width="60" >
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="deviceName" label="装备名称" />
<el-table-column prop="code" label="装备编号" width="240" />
<el-table-column prop="deviceTypeName" label="装备类目" />
<el-table-column prop="typeName" label="装备型号" />
</el-table>
</div>
<template #footer>
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ArrowLeft } from '@element-plus/icons-vue'
import { defineProps } from 'vue'
import { exportNewBuy} from '@/http/api/rent-facility/line'
import { exportNewBuy,getdeviceInfo} from '@/http/api/rent-facility/line'
// 控制弹窗显示
const dialogVisible = ref(false)
const currentDetail = ref({}) // 当前行数据
const ownDetailList = ref([]) // 自有装备详情数据
function showOwnDetail(row) {
currentDetail.value = row
dialogVisible.value = true
getdeviceInfo({ companyName:row.companyId,devicenewName:row.name}).then((response) => {
if(response.code ==200){
ownDetailList.value =response.data
}
})
}
const props = defineProps({
title: String,
secondPageTitleId: String,
@ -117,6 +162,57 @@ function calculateActual(row) {
</script>
<style scoped>
.own-detail-dialog .el-dialog {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.own-detail-dialog .el-dialog__title {
font-weight: bold;
font-size: 20px;
color: #00a288;
}
.dialog-body-wrapper {
max-height: 80vh;
overflow-y: auto;
padding: 20px 0;
}
/* 表格表头、单元格统一加大字体、居中对齐 */
.own-detail-dialog .custom-table ::v-deep th {
background: #00a288;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.own-detail-dialog .custom-table ::v-deep td {
font-size: 16px;
text-align: center;
padding: 12px 8px;
}
/* 底部按钮样式 */
.own-detail-dialog .el-dialog__footer {
padding: 16px 24px;
text-align: right;
}
.own-detail-dialog .el-button {
font-size: 16px;
padding: 10px 20px;
}
.link {
color: #409eff;
cursor: pointer;
text-decoration: underline;
}
.link:hover {
color: #66b1ff;
}
.second-page { animation: fadeIn .3s; background: #fff; padding: 24px; border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: translateY(0);} }