web-retail-admin/src/views/settlementCenter/bonusDetail/index.vue

1206 lines
30 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2022-10-24 15:45:01
-->
<template>
<div class="page">
<topBar v-if="topList.length > 0" :top-list="topList" :moren="moren" />
<div class="main">
<el-form
ref="select"
:model="select"
style="padding: 0px 10px 0px 0; background: #fff"
label-width="auto"
>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item :label="'会员编号'">
<el-input v-model="select.memberCode" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'会员姓名'">
<el-input v-model="select.memberName" clearable />
</el-form-item>
</el-col>
<!-- <el-col :span="4" style="margin-left: 38px">-->
<!-- <el-form-item label="排列顺序">-->
<!-- <el-select clearable :placeholder="'请选择'"-->
<!-- v-model="select.pkCurrency">-->
<!-- <el-option v-for="item in acList"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="4">
<el-form-item :label="'币种展示'">
<el-select
v-model="select.pkCurrency"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in acList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> -->
<!-- 一层 -->
<el-col :span="4">
<el-form-item :label="'结算期数'">
<div style="display: flex">
<div>
<el-input v-model="select.period" clearable />
</div>
<!-- <span style="margin: 0 10px">至</span>-->
<!-- <div>-->
<!-- <el-input v-model="select.endPeriod" clearable />-->
<!-- </div>-->
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="'隶属体系'">
<el-cascader
v-model="select.pkBdVertexStred"
:options="verList"
:props="props"
collapse-tags
clearable
@change="getPkBdVertexStr"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'结算日期'">
<el-date-picker
v-model="creationTime"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
type="datetimerange"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
@change="changeTime"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="primary" class="my_search" @click="getDataList">
{{ '搜索' }}</el-button>
<el-button class="my_reset" @click="reset">
{{ '重置' }}</el-button>
</el-col>
</el-row>
</el-form>
<div class="maintop">
<div class="mainbtn">
<el-button
v-hasButtons="['BonusDetailImport']"
size="small"
style="background-color: #ff6723"
class="thebtn2"
>
{{ '导入' }}</el-button>
<el-button
v-hasButtons="['BonusDetailExport']"
size="small"
class="thebtn2"
@click="handleExport"
>
{{ '导出' }}</el-button>
</div>
<!-- <div>
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link kuang">
{{ '筛选字段' }}<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in menuList"
:key="item.id">
<el-checkbox v-model="item.checked"
@change="getMenu($event,item.id)">{{ item.text }}</el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
<div class="maintable">
<div class="itemTrading">
<el-table
ref="table"
v-loading="loading"
:data="tableData.censusSummaryList"
:summary-method="getSummaries"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="100" />
<el-table-column
align="center"
prop="memberCode"
width="130"
:label="'会员编号'"
/>
<el-table-column
align="center"
prop="memberName"
width="130"
:label="'会员姓名'"
/>
<el-table-column
align="center"
prop="vertexName"
width="130"
:label="'隶属体系'"
/>
<el-table-column
align="center"
prop="teamName"
width="130"
:label="'隶属团队'"
/>
<el-table-column
align="center"
prop="period"
width="130"
:label="'结算期数'"
/>
<el-table-column
align="center"
prop="settleDate"
width="130"
:label="'结算日期'"
/>
<el-table-column
align="center"
prop="retailRangeIncomeOri"
width="130"
:label="$t('直推收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailSameLevelIncomeOri"
width="130"
:label="$t('平级收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailAreaIncomeOri"
width="130"
:label="$t('区域收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailBenefitRangeIncomeOri"
width="130"
:label="$t('福利极差收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailBenefitIncomeOri"
width="130"
:label="$t('福利分红收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="backPointsOri"
width="130"
:label="$t('重消收益') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="retailRealSubtotalOri"
width="130"
:label="$t('小计') + `(${isLocalSymbol()})`"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="repurCouponOri"
width="130"
:formatter="stateFormat"
:label="'复购券' + `(${isLocalSymbol()})`"
/>
<el-table-column
align="center"
prop="repurCouponShareOri"
width="130"
:formatter="stateFormat"
:label="'复购券均分'"
/>
<el-table-column
align="center"
prop="backPointsOri"
width="130"
:formatter="stateFormat"
:label="'商城重消' + `(${isLocalSymbol()})`"
/>
<el-table-column
align="center"
prop="serviceSpendOri"
width="130"
:formatter="stateFormat"
:label="'平台服务费' + `(${isLocalSymbol()})`"
/>
<el-table-column
align="center"
prop="globalPointsOri"
width="130"
:label="$t('直推极差') + '(¥)'"
:formatter="stateFormat"
/>
<el-table-column
align="center"
prop="purRealSubtotalOri"
width="130"
:formatter="stateFormat"
:label="'首购实发小计' + `(${isLocalSymbol()})`"
/>
<el-table-column
align="center"
prop="cloudRealSubtotalOri"
width="130"
:formatter="stateFormat"
:label="$t('极差小计') + '(¥)'"
/>
<el-table-column
align="center"
prop="repurRealSubtotalOri"
width="130"
:formatter="stateFormat"
:label="'复购实发小计' + `(${isLocalSymbol()})`"
/>
<el-table-column
align="center"
prop="repurCouponSubtotalOri"
width="160"
:formatter="stateFormat"
:label="'复购券实发小计' + `(${isLocalSymbol()})`"
/>
<el-table-column
align="center"
prop="realIncomeTotalOri"
width="130"
:formatter="stateFormat"
:label="'实发收益总计' + `(${isLocalSymbol()})`"
/>
</el-table>
</div>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDataList"
/>
</div>
</template>
<script>
import topBar from '@/components/topBar'
import * as api from '@/api/settle.js'
import { classifyUpdate, classifySave } from '@/api/product'
import { queryBonusDetail, queryBonusTotal } from '@/api/bonus'
import { isLocals, isLocalSymbol, stateFormat } from '@/utils/numberToCurrency'
import { getRoleMenu } from '@/api/notice'
export default {
name: 'Bzpz',
components: {
topBar
},
filters: {
isAgree(val) {
if (!val) {
return '允许'
} else {
return '禁止'
}
}
},
data() {
return {
typeList: [
{
value: 0,
label: '前台'
},
{
value: 1,
label: '后台'
}
],
digList: [
{
value: 0,
label: '允许'
},
{
value: 1,
label: '禁止'
}
],
menuList: [
{
id: 0,
text: '全选',
checked: true
},
{
id: 21,
text: '直推收益' + '($)',
checked: true,
prop: 'firstBuyAmountDollar'
},
{
id: 22,
text: '拓展收益' + '($)',
checked: true,
prop: 'expandIncome'
},
{
id: 23,
text: '辅导收益' + '($)',
checked: true,
prop: 'coachIncome'
},
{
id: 24,
text: '分红收益' + '($)',
checked: true,
prop: 'shareIncome'
},
{
id: 25,
text: '报单收益' + '($)',
checked: true,
prop: 'serviceIncome'
},
{
id: 26,
text: this.$t('幸运收益') + '($)',
checked: true,
prop: 'cloudDirectIncome'
},
{
id: 27,
text: this.$t('极差收益') + '($)',
checked: true,
prop: 'cloudPurIncome'
},
{
id: 28,
text: this.$t('平级收益') + '($)',
checked: true,
prop: 'cloudRepurIncome'
},
{
id: 39,
text: '复购级差收益' + '($)',
checked: true,
prop: 'repurRangeIncome'
},
{
id: 30,
text: '复购拓展收益' + '($)',
checked: true,
prop: 'repurExpandIncome'
},
{
id: 31,
text: '复购券',
checked: true,
prop: 'repurCoupon',
flag: 1
},
{
id: 32,
text: '商城重消' + '($)',
checked: true,
prop: 'backPoints'
},
{
id: 35,
text: '平台服务费' + '($)',
checked: true,
prop: 'backPoints'
},
{
id: 44,
text: '首购实发小计' + '($)',
checked: true,
prop: 'purRealSubtotal'
},
{
id: 45,
text: this.$t('极差小计') + '($)',
checked: true,
prop: 'cloudRealSubtotal'
},
{
id: 46,
text: '复购实发小计' + '($)',
checked: true,
prop: 'repurRealSubtotal'
},
{
id: 47,
text: '实发收益总计' + '($)',
checked: true,
prop: 'realIncomeTotal'
}
],
creationTime: [],
creationTime1: [],
select: {
// pkVertex: [],
// pkMemberTeam: [],
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 50
},
addOrEdit: '',
total: 0,
dialogVisible: false,
loading: false,
tableData: {
censusSummaryList: []
},
moren: '/settlementCenter/bonusDetail',
topList: [
{
name: '奖金明细',
path: '/settlementCenter/bonusDetail'
}
],
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入规格类型', trigger: 'blur' }
]
},
acList: [],
verList: [],
memberList: [],
pkMemberTeam: [],
pkVertex: [],
dataList: [
{
name: 'memberCode',
key: ''
},
{
name: 'memberName',
key: ''
},
{
name: 'vertexName',
key: ''
},
{
name: 'teamName',
key: ''
},
{
name: 'period',
key: ''
},
{
name: 'settleDate',
key: ''
},
{
name: 'directIncomeOri',
key: ''
},
{
name: 'directIncome',
key: ''
},
{
name: 'expandIncomeOri',
key: ''
},
{
name: 'expandIncome',
key: ''
},
{
name: 'coachIncomeOri',
key: ''
},
{
name: 'coachIncome',
key: ''
},
{
name: 'shareIncomeOri',
key: ''
},
{
name: 'shareIncome',
key: ''
},
{
name: 'serviceIncomeOri',
key: ''
},
{
name: 'serviceIncome',
key: ''
},
{
name: 'cloudDirectIncomeOri',
key: ''
},
{
name: 'cloudDirectIncome',
key: ''
},
{
name: 'cloudPurIncomeOri',
key: ''
},
{
name: 'cloudPurIncome',
key: ''
},
{
name: 'cloudRepurIncomeOri',
key: ''
},
{
name: 'cloudRepurIncome',
key: ''
},
{
name: 'repurPushIncomeOri',
key: ''
},
{
name: 'repurPushIncome',
key: ''
},
{
name: 'repurRangeIncomeOri',
key: ''
},
{
name: 'repurRangeIncome',
key: ''
},
{
name: 'repurExpandIncomeOri',
key: ''
},
{
name: 'repurExpandIncome',
key: ''
},
{
name: 'repurCouponOri',
key: ''
},
{
name: 'repurCoupon',
key: ''
},
{
name: 'repurCouponShareOri',
key: ''
},
{
name: 'backPointsOri',
key: ''
},
{
name: 'backPoints',
key: ''
},
{
name: 'serviceSpendOri',
key: ''
},
{
name: 'serviceSpend',
key: ''
},
{
name: 'globalPoints',
key: ''
},
{
name: 'carAwardPoints',
key: ''
},
{
name: 'storeIncome',
key: ''
},
{
name: 'hiFunIncomeOri',
key: ''
},
{
name: 'makerDirectIncomeOri',
key: ''
},
{
name: 'makerShareIncomeOri',
key: ''
},
{
name: 'purRealSubtotalOri',
key: ''
},
{
name: 'purRealSubtotal',
key: ''
},
{
name: 'cloudRealSubtotalOri',
key: ''
},
{
name: 'cloudRealSubtotal',
key: ''
},
{
name: 'repurRealSubtotalOri',
key: ''
},
{
name: 'repurRealSubtotal',
key: ''
},
{
name: 'repurCouponSubtotalOri',
key: ''
},
{
name: 'makerRealSubtotalOri',
key: ''
},
{
name: 'realIncomeTotalOri',
key: ''
},
{
name: 'realIncomeTotal',
key: ''
}
],
flag: false,
allTxt: {},
pkTeamId: '', // 隶属团队id
pkVertId: '', // 隶属体系id
props: {
multiple: true,
expandTrigger: 'hover',
value: 'pkId',
label: 'vertexName',
children: 'childList'
}
}
},
mounted() {
// 获取下拉
this.getData()
// 获取列表
const geturl = window.location.href
const getqyinfo = geturl.split('?')[1]
const getqys = new URLSearchParams('?' + getqyinfo)
const time = getqys.get('time')
if (time) {
this.select.startDate = time
this.select.endDate = time
this.$set(this.creationTime, 0, time)
this.$set(this.creationTime, 1, time)
this.$forceUpdate()
}
var day1 = new Date()
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
var s1 = this.getStartTime()
var s2 = this.getEndTime()
this.select.startDate = s1
this.select.endDate = s2
this.creationTime = [s1, s2]
setTimeout(() => {
this.getDataList()
}, 50)
this.getUserRole()
},
methods: {
getPkBdVertexStr(e) {
const arr = e.map((item) => item[1])
const pkBdVertexStr = arr.join(',')
this.$set(this.select, 'pkBdVertexStr', pkBdVertexStr)
},
isLocals,
getStartTime() {
const date = new Date()
date.setDate(1) // 将当前时间的日期设置成第一天
const year = date.getFullYear() // 得到当前年份
let month = date.getMonth() + 1 // 得到当前月份0-11月份+1是当前月份
month = month >= 10 ? month : '0' + month // 补零
let day = date.getDate() // 得到当前天数实际是本月第一天因为前面setDate(1) 设置过了
day = day >= 10 ? day : '0' + day // 补零
return year + '-' + month + '-' + day
},
getEndTime() {
var date = new Date()
var year = date.getFullYear() // 年
var month = date.getMonth() + 1 // 月
var day = date.getDate() > 1 ? date.getDate() - 1 : date.getDate() // 日
var hour = date.getHours() // 时
var minutes = date.getMinutes() // 分
var seconds = date.getSeconds() // 秒
// 给一位数的数据前面加 “0”
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (day >= 0 && day <= 9) {
day = '0' + day
}
if (hour >= 0 && hour <= 9) {
hour = '0' + hour
}
if (minutes >= 0 && minutes <= 9) {
minutes = '0' + minutes
}
if (seconds >= 0 && seconds <= 9) {
seconds = '0' + seconds
}
return year + '-' + month + '-' + day + ' '
},
isLocalSymbol,
// getUserRole() {
// getRoleMenu('BonusDetail').then((res) => {
// this.dataList.forEach((item) => {
// res.data.forEach((items) => {
// if (item.name == items) {
// item.key = items
// }
// })
// })
// this.flag = true
// })
// },
getUserRole() {
getRoleMenu('BonusDetail').then((res) => {
const obj = {}
res.data.forEach((item) => {
obj[item] = 1
})
this.allTxt = obj
this.$nextTick(() => {
this.$refs.table.doLayout()
})
})
},
stateFormat,
vertCheck(index, item) {
if (this.pkVertex.length > 1) {
this.pkVertex.splice(0, 1)
this.pkVertId = item.pkId
} else if (this.pkVertex.length == 1) {
this.pkVertId = item.pkId
} else {
this.pkVertId = ''
}
},
teamCheck(index, item) {
if (this.pkMemberTeam.length > 1) {
this.pkMemberTeam.splice(0, 1)
this.pkTeamId = item.pkId
} else if (this.pkMemberTeam.length == 1) {
this.pkTeamId = item.pkId
} else {
this.pkTeamId = ''
}
},
reset() {
this.getDataList()
this.select = {
// pkVertex: [],
// pkMemberTeam: [],
}
this.creationTime = ''
this.pkVertex = []
this.pkMemberTeam = []
},
getMenu(e, id) {
if (e && id == 0) {
this.menuList.forEach((item) => {
this.$set(item, 'checked', true)
})
} else if (!e && id == 0) {
this.menuList.forEach((item) => {
this.$set(item, 'checked', false)
})
}
},
getData() {
api.accountList().then((res) => {
this.acList = res.data
})
api.vertexChild().then((res) => {
this.verList = res.data
})
api.memberTeam().then((res) => {
this.memberList = res.rows
})
},
changeTime(val) {
this.select.startDate = val[0]
this.select.endDate = val[1]
},
changeTime1(val) {
this.select.startEffectDate = val[0]
this.select.endEffectDate = val[1]
},
// 点击修改
toFixed(id) {
this.addOrEdit = false
this.dialogVisible = true
this.$router.push({
path: 'noticeList/details',
query: {
pkId: id
}
})
},
getSummaries(param) {
this.$nextTick(() => {
this.$refs.table.doLayout()
})
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '小计' + '(¥)'
return
}
if (index === 1) {
sums[index] = ''
return
}
if (index === 2) {
sums[index] = ''
return
}
if (index === 5) {
sums[index] = ''
return
}
const values = data.map((item) => Number(item[column.property]))
if (!values.every((value) => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
if (typeof sums[index] === 'number') {
sums[index] = sums[index].toFixed(2)
}
} else {
sums[index] = ''
}
})
return sums
},
// 删除
handleDelete(id) {
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
api.classifyDel(id).then((res) => {
this.getDataList()
})
})
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let url = ''
if (this.addOrEdit == true) {
url = classifySave
} else {
url = classifyUpdate
}
url(this.form).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
})
this.dialogVisible = false
// 充值数据
this.$refs[formName].resetFields()
// 获取列表
this.getDataList()
}
})
} else {
return false
}
})
},
handleClose() {
this.dialogVisible = false
this.$refs['form'].clearValidate()
this.$refs['form'].resetFields()
},
openDig() {
this.$router.push({
path: 'noticeList/details'
})
},
getDataList() {
this.loading = true
if (this.creationTime == '' || this.creationTime == null) {
this.select.startDate = ''
this.select.endDate = ''
}
queryBonusDetail(
Object.assign(
{},
{ pkVertex: this.pkVertId, pkTeamCode: this.pkTeamId },
this.select
),
`?pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`
).then((res) => {
this.loading = false
this.tableData.censusSummaryList = res.rows
this.total = res.total
})
},
handleSelectionChange(val) {},
/** 导出按钮操作 */
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((_) => {
this.download(
'/bonus/manage/bonus/export-bonus-detail',
Object.assign({}, this.queryParams, this.select),
`${'奖金明细'}-${new Date().getTime()}.xlsx`
)
})
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return 'success-row'
}
return ''
}
}
}
</script>
<style scoped lang="scss">
.content {
// height:450px;/* 可以根据需要设置,也可以是百分比或者在父级flex布局中通过flex:1来确定高度 */
display: flex;
flex-direction: column;
}
.custom-table {
flex: 1;
overflow: hidden;
}
::v-deep .el-table__header-wrapper {
position: sticky;
top: 0; //这个值根据实际情况而定
z-index: 10;
}
::v-deep .el-range-editor.el-input__inner {
width: 100%;
}
::v-deep .el-button {
padding: 8px 20px;
}
::v-deep .el-date-editor .el-range__close-icon {
margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator {
margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon {
margin-top: -10px;
}
::v-deep .el-input__inner {
//height:28px;
//line-height: 28px;
}
::v-deep .el-form-item {
margin-bottom: 0;
}
::v-deep .el-cascader {
width: 100%;
}
::v-deep .el-form-item__label {
color: #333;
font-weight: inherit;
}
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
::v-deep .el-table .success-row {
background: #ffffff;
}
::v-deep .el-table thead {
color: #000000;
}
::v-deep .el-select {
width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
display: none !important; /* 上传按钮隐藏 */
}
.page {
padding: 20px;
background: #f9f9f9;
font-size: 14px;
.main {
background: #f9f9f9;
overflow: hidden;
display: flex;
flex-direction: column;
.maintop {
display: flex;
//padding: 10px 0px;
justify-content: space-between;
align-items: center;
.mainbtn {
.thebtn1 {
background: #3181e5;
color: #ffffff;
}
.thebtn2 {
background: #ffad41;
color: #ffffff;
height: 32px;
}
}
.maintitle {
font-size: 10px;
font-family: MicrosoftYaHei;
color: #999999;
}
}
.maintable {
flex: 1;
overflow-y: auto;
}
}
.tem {
display: flex;
align-items: center;
justify-content: center;
img {
width: 28px;
height: 20px;
margin-right: 3px;
}
}
.isRed {
color: #ed1d25;
}
.isGreen {
color: #1ab62b;
}
.bgImg {
width: 48px;
height: 48px;
}
}
.openClose {
text-align: right;
margin-right: 10px;
color: #3181e5;
}
.kuang {
padding: 5px 20px;
background: rgba(255, 255, 255, 0);
border-radius: 4px;
border: 1px solid #cccccc;
}
.heji {
margin-top: 10px;
.dis {
display: flex;
justify-content: right;
padding: 5px 10px;
font-size: 14px;
color: #333333;
:nth-child(1) {
font-size: 14px;
font-weight: bold;
color: #333333;
margin-right: 20px;
}
}
}
</style>
<style>
/* .itemTrading .el-table {
overflow: auto;
}
.itemTrading .el-table__body-wrapper,
.itemTrading .el-table__header-wrapper,
.itemTrading .el-table__footer-wrapper {
overflow: visible;
}
.itemTrading .el-table::after {
position: relative !important;
}
.body-theme-grenn .el-table--scrollable-x .el-table__body-wrapper {
overflow: visible;
} */
</style>