<!--
* @Author:wb_shaohui
* @Date: 2024/05/09 13:37:18
* @LastEditors:
* @LastEditTime: 2024/05/11 12:37:18
* @Description:
-->
<template>
<div class="price-refer-box">
<div class="price-refer__title">
<div class="revenue-voucher-position-title">定制收益率参考</div>
<div class="revenue-voucher-bg-photo"></div>
</div>
<!-- 价格参考 -->
<div class="price-refer__content">
<div class="flex-bettween">
<div class="price-refer__desc">本周固定收益率凭证定制收益率参考</div>
<!-- <div class="price-refer__right">销售收入:0.2%年</div> -->
<el-row>
<el-col :span="12" style="width: 85%">
<div class="price-refer_right">
<el-button type="text" class="view-more-right" @click.stop="handleClickView($event,'bzgs')">
查看更多<el-badge v-if="hasBtnAuth('iterBusi-bzgs-fh-btn')" :value="unRecheckNum_bzgs" :max="99" class="badge-item"></el-badge>>>
</el-button>
</div>
</el-col>
</el-row>
</div>
<div class="price-refer__wrap">
<div class="price-refer__table">
<el-table
:data="sypjData"
height="225"
:border="false"
style="width: 100%"
stripe
:row-class-name="tableRowClassName"
:header-cell-style="{ background: '#DCEDFF',color:'#606266' }"
:cell-style="gspzCellStyle"
>
<el-table-column
v-for="(col, index) in columns"
:key="index"
:prop="col.prop"
:label="dynamicHeaders[col.prop]"
:width="col.width">
<template v-if="hasBtnAuth('iterBusi-bzgs-edit')" #header>
<el-input
v-model="dynamicHeaders[col.prop]"
@blur="saveHeader(col.prop)"
size="mini"
class="elinput"
style="color:#606266;font-size:14px;"
/>
</template>
<template v-else #header>
<span>{{dynamicHeaders[col.prop]}}</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- <div class="price-refer_bc">
<div class="price-refer__tbts">特别提示:</div>
<div class="price-refer__tip" title="
1、本表供内部参考,禁止向客户提供
2、原则上定制起点1000万元。">
1、本表供内部参考,禁止向客户提供<br />
2、原则上定制起点1000万元。
</div>
</div> -->
</div>
</div>
<div class="price-refer__content">
<div class="flex-bettween">
<div class="price-refer__desc">代销收益率参考</div>
<el-row>
<el-col :span="12">
</el-col>
<el-col :span="12" style="width: 85%">
<div class="price-refer_right">
<el-button type="text" class="view-more-right" @click.stop="handleClickView($event,'dljybj')">
查看更多<el-badge v-if="hasBtnAuth('iterBusi-dljyjgck-fh-btn')" :value="unRecheckNum_dljybj" :max="99" class="badge-item"></el-badge>>>
</el-button>
</div>
</el-col>
</el-row>
</div>
<div class="price-refer__wrap">
<div class="price-refer__table">
<el-table
:data="dljyData"
height="225"
:border="false"
style="width: 100%"
stripe
:row-class-name="tableRowClassName"
:header-cell-style="{ background: '#DCEDFF',color:'#606266' }"
:cell-style="gspzCellStyle"
>
<el-table-column
prop="fxrbjxt"
label="发行人报价系统评级"
width="160"
height="15"
>
</el-table-column>
<el-table-column
prop="dbjg"
label="整体收益率"
width="160"
height="15"
>
</el-table-column>
<el-table-column
prop="fxrbjxtt"
label="发行期限(月)"
width="160"
height="15"
>
</el-table-column>
<el-table-column
prop="cped"
label="产品额度(元)"
height="15"
>
</el-table-column>
</el-table>
</div>
<!-- <div class="price-refer_bc">
<div class="price-refer__tbts">特别提示:</div>
<div class="price-refer__tip">
打包价格包含客户收益及销售收入,以打包价格3%(年化)为例,
客户经理与客户沟通确定客户收益为2.7%(年化)时,客户经理销售收入为0.3%(年化)
</div>
</div> -->
</div>
</div>
<DljyTable ref="dljyTable" :dljyMemo="dljyMemo" @handleDljyjgckTableSubmit="handleDljyjgckTableSubmit"
> </DljyTable>
<BzgsTable ref="bzgsTable" :bzgsMemo="bzgsMemo" @handleBzgsTableSubmit="handleBzgsTableSubmit"></BzgsTable>
</div>
</template>
<script>
import { gentlenessAll, getDljyjgckAll } from "@/api/servicehall.js";
import DljyTable from "./dljyjgck/dljyTable.vue";
import BzgsTable from "./bzgs/bzgsTable.vue";
import mixins from "@/view/iterationBusinessflow/mixins";
import authoMixins from "@/mixins/authoMixins";
export default {
mixins: [mixins,authoMixins],
props: {
paramValues:{
type: Array,
require: true
},
},
components: { DljyTable,BzgsTable},
computed:{
dljyMemo(){//代理交易备注信息
return this.getParamData("dljy_memo");
},
bzgsMemo(){
return this.getParamData("bzgs_memo")
}
},
//components: { DljyTable },
data() {
return {
width: 1700, // 初始宽
height: 870, // 初始高
zoom: 1, // 计算要缩放的 宽度比(浏览器可视宽度与设计稿的宽度比)
allDljyDatas:[],//代理交易价格参考弹框展示
allBzgsDatas:[],//本周固收弹框展示
sypjData: [], //本周固收
dljyData: [], //代理交易价格参考
showDataNum: [], //设定表格中最大显示数据条数
dialogVisible:false,//关闭
tabIndex: 0,
sjzsDialogVisible: false, //代理交易/做市业务数据展示
intervalId: null,
unRecheckNum_bzgs:"",//本周固收未复核提示
unRecheckNum_dljybj:"",//定制价格参考未复核提示
columns: [
{ prop: 'fxqx', width: 310 },
{ prop: 'dqck', width: 309 },
{ prop: 'decd', width: 309 }
],
dynamicHeaders: {
fxqx: '发行期限',
dqck: '银行存款',
decd: '大额存单收益率',
}
};
},
mounted() {
const savedHeaders = localStorage.getItem('sharedTableHeaders');
if (savedHeaders) {
this.dynamicHeaders = JSON.parse(savedHeaders);
}
// 监听其他标签页的修改
window.addEventListener('storage', (event) => {
if (event.key === 'sharedTableHeaders') {
this.dynamicHeaders = JSON.parse(event.newValue);
}
});
this.initData();
if (this.revenueData1 && this.revenueData1.length > 0) {
this.startScroll();
}
},
created() {
window.addEventListener('tableHeadersUpdated', () => {
const savedHeaders = localStorage.getItem('sharedTableHeaders');
if (savedHeaders) {
this.dynamicHeaders = JSON.parse(savedHeaders);
}
});
},
methods: {
initData() {
this.gentlenessAll();
this.getDljyjgckAll();
this.getAllDljyData();
this.getAllBzgsData();
},
//过滤参数数据
getParamData(val){
let temp=this.paramValues && this.paramValues.filter(item => {return item.paraCode.toLowerCase()==val;});
return temp&&temp[0];
},
//查看更多
handleClickView(evt, val) {
this.elButtonBlur(evt);
if (val == "dljybj" && this.$refs.dljyTable) {
this.$refs.dljyTable.handleOpen("false",);
} else {
//bzgs
this.$refs.bzgsTable.handleOpen("close",);
}
},
handleBzgsTableSubmit(type,data){
if(type == "close") {
this.gentlenessAll(data);
}
},
handleDljyjgckTableSubmit(type,data){
if(type == "false") {
this.getDljyjgckAll(data);
}
},
async getAllBzgsData(){
try{
let res = await gentlenessAll();
if(res && res.code==200) {
this.allBzgsDatas = res.data;
}
} catch(err){
}
},
async getAllDljyData(){
try{
let res = await getDljyjgckAll();
if(res && res.code==200) {
this.allDljyDatas = res.data;
}
} catch(err){
}
},
// 获取本周固收表专区数据
async gentlenessAll() {
try {
let res = await gentlenessAll();
if (res && res.code == 200) {
this.sypjData = res.data.dateList;
this.unRecheckNum_bzgs = Number(res.data.unRecheckNum);
}
} catch (err) {
}
},
//获取定制价格参考表专区数据
async getDljyjgckAll() {
try {
let res = await getDljyjgckAll();
if (res && res.code == 200) {
this.dljyData = res.data.dateList;
this.unRecheckNum_dljybj = Number(res.data.unRecheckNum);
}
} catch (err) {}
},
getParamData(val){
let temp=this.paramValues && this.paramValues.filter(item => {return item.paraCode.toLowerCase()==val;});
return temp&&temp[0];
},
handleScroll(event) {
// 获取滚动条当前位置
const scrollTop = event.target.scrollTop;
// 在这里根据滚动位置进行相应的处理
},
tableRowClassName({ row, rowIndex }) {
return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
},
onTabContentOne() {
this.$router.push("/informationdisplay");
},
gspzCellStyle({ row, column }) {
if (column.property === 'gspz') {
return 'color: #FF3D3D;'; // 设置姓名列字体颜色为红色
}
if (column.property === 'dbjg') {
return 'color: #FF3D3D;'; // 设置姓名列字体颜色为红色
}
},
handleHeaderEdit(prop, newValue) {
this.$set(this.dynamicHeaders, prop, newValue)
// 可添加保存到后端或localStorage的逻辑
},
saveHeader(prop) {
// 保存到localStorage
localStorage.setItem('sharedTableHeaders', JSON.stringify(this.dynamicHeaders));
// 触发自定义事件通知其他标签页
const event = new Event('tableHeadersUpdated');
localStorage.setItem('tableHeadersUpdateTime', Date.now());
window.dispatchEvent(event);
}
},
};
</script>
<style lang="scss" scoped>
// .iteration-businessflow {
// min-width: 1600px;
// }
.el-link {
color: #ffffff;
}
.el-link:hover {
color: #0589fd;
text-decoration: none;
}
.iteration-businessflow {
box-sizing: border-box;
width: 100%;
height: 100%;
background: #c0f0ff;
transform: scale(var(--scaleww), var(--scalewh));
display: flex;
flex-direction: column;
transform-origin: 0 0;
transition: 0.3s;
z-index: 3;
&__top {
display: flex;
justify-content: space-between;
height: 70%;
width: 100%;
box-sizing: border-box;
}
}
.no-zoom {
transform: scale(var(1 / --scaleww), var(1 / --scalewh));
}
.flex-center {
height: 36px;
display: flex;
align-items: center;
border-radius: 5px;
background: #ffecc8;
padding-left: 10px;
}
.flex-bettween {
display: flex;
align-items: center;
justify-content: space-between;
height: 35px;
}
.price-refer-box {
// flex: 1;
//padding: 10px;
margin-bottom: 5px;
margin-left: 5px;
background: #fff;
// min-width: 785px;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
border-radius: 5px 5px 5px 5px;
}
.revenue-voucher {
&__container {
display: flex;
flex-direction: column;
background-size: cover;
&:not(:first-child) {
margin-top: 10px;
}
}
&__item {
//display: flex;
//justify-content: space-around;
white-space: nowrap; /* 防止内容换行 */
// overflow-x: auto; /* 启用水平滚动 */
overflow-y: hidden; /* 隐藏垂直滚动 */
display: flex;
//height: 116px;
height: 100%;
width: 818px;
justify-content: space-around;
}
&__header {
margin-bottom: 10px;
font-size: 14px;
}
&__title {
position: relative;
color: 30px;
}
&-position-title {
position: absolute;
top: 2px;
left: 10px;
color: #fff;
}
&-bg-photo {
background-image: url("~@/assets/images/businessflow/businessflow2/bg_title.png");
background-repeat: no-repeat;
background-size: contain;
height: 30px;
}
&__content {
padding-left: 10px;
}
}
.price-refer {
&__title {
position: relative;
color: 30px;
// width: 100%;
// display: flex;
// justify-content: space-between;
}
&_right {
width: 100%;
// height: 576px;
background: rgba(255, 255, 255, 0.8);
border-radius: 5px 5px 5px 5px;
.el-col-12 {
width: 50%;
}
}
&__content {
padding-left: 10px;
width: 100%;
//min-width: 766px;
}
&__desc {
margin: 5px 0;
font-size: 14px;
}
&__wrap {
display: flex;
justify-content: space-between;
width: 98%;
max-height: 35%;
//min-width: 775px;
}
&__table {
flex: 5;
width: 64%;
//min-width: 635px;
position: relative;
}
&_bc {
background: #ffffff;
margin-left: 5px;
width: 19%;
//min-width: 126px;
height:225px;
position: relative;
// white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 显示省略号 */
overflow: hidden;
/* padding: revert; */
position: relative;
}
// &_tt{
// font-weight: 500;
// }
&__tbts{
background: #ffffff;
margin-left: 10px;
margin-top: 10px;
width: 97%;
//height: 100%;
font-family: font-family;
font-weight: 600;
font-size: 14px;
color: #303133;
line-height: 22px;
text-align: left;
font-style: normal;
}
&__tip {
// flex: 2;
background: #ffffff;
margin-left: 10px;
margin-right: 10px;
width: 93%;
height: 100%;
font-family: font-family;
font-weight: 500;
font-size: 14px;
color: #303133;
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 省略号显示 */
display: -webkit-box;
-webkit-line-clamp: 10; /* 显示最大行数 */
-webkit-box-orient: vertical;
//overflow: auto;
//max-height: 230px;
}
}
.view-more-right{
float: right !important;
}
.price-refer__table{
// .el-table {
// background-color: #dcedff; /* 你想要的颜色 */
// }
.even-row {
background-color: #FFFFFF; /* 偶数行的背景色 */
}
.odd-row {
background-color: #F5F7FA ; /* 奇数行的背景色 */
}
.el-table .warning-row {
background: #f5f7fa;
}
.el-table .success-row {
background: #ffffff;
}
:deep(.el-table .el-input__inner) {
background-color: rgb(220, 237, 255) !important;
font-family: inherit;
font-weight: 600;
// font-size: 14px;
// color: #303133;
line-height: 22px;
text-align: left;
font-style: normal;
border: none;
padding: 0;
}
//隐藏滚动条
:deep(.el-table__body-wrapper) {
&::-webkit-scrollbar {
// 整个滚动条
width: 0; // 纵向滚动条的宽度
//overflow-x: auto;
background: rgba(213, 215, 220, 0.3);
border: none;
}
&::-webkit-scrollbar-track {
// 滚动条轨道
border: none;
}
}
:deep.el-table--scrollable-x .el-table__body-wrapper {
// overflow-x: auto;
}
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
width: 4px;
}
// 设置滚动条的背景色和圆角
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
//background-color: #ebebeb;
border-radius: 8px;
}
:deep(.el-table th.gutter) {
display: none;
width: 0;
}
:deep(.el-table colgroup col[name="gutter"]) {
display: none;
width: 0;
}
:deep(.el-table__body) {
width: 100% !important;
}
//隐藏滚动条
/deep/ .el-table .el-table__cell {
padding: 3px 0;
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
text-align: left;
}
}
/deep/ .revenue-voucher__item::-webkit-scrollbar {
// 整个滚动条
height: 0; // 纵向滚动条的宽度
// background: rgba(213, 215, 220, 0.3);
border: none;
}
// .badge-item{
// position: absolute;
// top: 0;
// right: 20px;
// transform: translateY(-20%) translateX(100%);
// }
</style>给这段代码中的el-table__body-wrapper取消overflow-x的auto