优化协议管理列表展示问题

This commit is contained in:
BianLzhaoMin 2024-06-17 11:08:33 +08:00
parent aaf91518ea
commit 0d9c4e82a0
1 changed files with 117 additions and 10 deletions

View File

@ -157,7 +157,7 @@
prop="contractCode" prop="contractCode"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column <!-- <el-table-column
label="协议类型" label="协议类型"
align="center" align="center"
prop="protocol" prop="protocol"
@ -183,13 +183,7 @@
>{{ scope.row.imgNameList[index] }}</div >{{ scope.row.imgNameList[index] }}</div
> >
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column
label="签订日期"
align="center"
prop="signTime"
:show-overflow-tooltip="true"
/>
<el-table-column <el-table-column
label="往来单位" label="往来单位"
align="center" align="center"
@ -203,6 +197,14 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column <el-table-column
label="签订日期"
align="center"
prop="signTime"
width="120"
show-overflow-tooltip
/>
<!-- <el-table-column
label="开始日期" label="开始日期"
align="center" align="center"
prop="planStartTime" prop="planStartTime"
@ -231,8 +233,8 @@
align="center" align="center"
prop="remark" prop="remark"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> /> -->
<el-table-column label="操作" align="center" width="120"> <el-table-column label="操作" align="center" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
@ -250,6 +252,14 @@
v-hasPermi="['picking:protocol:del']" v-hasPermi="['picking:protocol:del']"
>删除</el-button >删除</el-button
> >
<el-button
size="mini"
type="text"
icon="el-icon-chat-dot-round"
@click="handleDetails(scope.row)"
v-hasPermi="['picking:protocol:edit']"
>详情</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -449,6 +459,64 @@
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<img width="100%" height="650px" :src="dialogImageUrl" alt /> <img width="100%" height="650px" :src="dialogImageUrl" alt />
</el-dialog> </el-dialog>
<!-- 详情弹框 -->
<el-dialog
title="协议详情"
:visible.sync="protocolDetailsDialogVisible"
width="70%"
>
<el-descriptions
class="margin-top"
:column="3"
size="medium"
border
:labelStyle="labelStyle"
:contentStyle="contentStyle"
>
<el-descriptions-item
v-for="(item, v) in protocolDetailsLabelList"
:key="v"
>
<template slot="label">{{ item.label }}</template>
<template v-if="item.v_slot">
<template v-if="item.v_slot === 'type'">
<el-tag v-if="protocolDetailsInfo['protocol'] == 1"
>内部单位</el-tag
>
<el-tag
v-else-if="protocolDetailsInfo['protocol'] == 2"
>外部单位</el-tag
>
<template v-else> - </template>
</template>
<template v-if="item.v_slot === 'img'">
<template
v-if="
protocolDetailsInfo['imgUrlList'] &&
protocolDetailsInfo['imgUrlList'].length > 0
"
>
<ImagePreview
v-for="(img, index) in protocolDetailsInfo[
'imgUrlList'
]"
:key="index"
:src="`${uploadUrl}${img}`"
:width="`20px`"
:height="`20px`"
class="img-box"
/>
</template>
<template v-else> - </template>
</template>
</template>
<template v-else>
{{ protocolDetailsInfo[item.content] || '-' }}
</template>
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div> </div>
</template> </template>
@ -568,6 +636,27 @@ export default {
], ],
}, },
deptName: undefined, deptName: undefined,
protocolDetailsDialogVisible: false, //
labelStyle: {
'text-align': 'center',
width: '200px',
},
contentStyle: {
'text-align': 'center',
width: '400px',
},
protocolDetailsLabelList: [
{ label: '协议类型', content: 'protocol', v_slot: 'type' },
{ label: '附件图片', content: 'imgUrlList', v_slot: 'img' },
{ label: '开始日期', content: 'planStartTime' },
{ label: '租赁期限(天)', content: 'leaseDay' },
{ label: '授权人', content: 'authPerson' },
{ label: '联系电话', content: 'phone' },
{ label: '备注', content: 'remark' },
],
protocolDetailsInfo: {
imgUrlList: [],
}, //
} }
}, },
computed: { computed: {
@ -808,6 +897,15 @@ export default {
this.$modal.msgWarning('请选择要导出的数据') this.$modal.msgWarning('请选择要导出的数据')
} }
}, },
/**
* 详情
*/
handleDetails(row) {
console.log(row, '详情--------')
this.protocolDetailsInfo = row
this.protocolDetailsDialogVisible = true
},
}, },
} }
</script> </script>
@ -822,4 +920,13 @@ export default {
display: none; display: none;
} }
} }
.margin-top {
margin-top: -15px;
}
.img-box {
margin-right: 12px;
}
.img-box:last-child {
margin: 0;
}
</style> </style>