<!
--
* @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="v
iew
-more
-right" @click.stop="handleClickV
iew($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="v
iew
-more
-right" @click.stop="handleClickV
iew($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 "@/v
iew/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];
},
//查看更多
handleClickV
iew(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
-or
ient: vertical;
//overflow: auto;
//max
-height: 230px;
}
}
.v
iew
-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
本文探讨了在Internet Explorer浏览器中使用font-size属性调整元素大小时遇到的问题，并指出该方法对于显示背景图片不适用。正确的做法是直接设置元素的宽度和高度，并利用padding确保Firefox等其他浏览器中的兼容性。
扫一扫
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
