父組件表格頁面代碼：
<template>
<div class="wrapper">
<div class="overview-box">
<div class="box-name">
<div class="flag" />
標的事件
</div>
<p class="con-txt">
{{ similarEventDate
}}{{ queryInfo.symbol }}{{ queryInfo.shortname
}}{{ queryInfo.eventtypename }}{{ pilesNum }}萬股
</p>
</div>
<div class="box-name">
<div class="flag" />
事件表格
</div>
<Table
:heads="columns"
:data="tableData"
:maxheight="500"
:haspage="false"
class="table-item"
@sortChange="sortChange"
@goToSimilarDetail="goToSimilarDetail"
/>
</div>
</template>
<script>
import Table from '@/components/TableDynamic/index.vue' // 引入table組件
import {
querySimilarEventData
} from '@/api/queryEvent' // 后端接口
import { mapState } from 'vuex'
export default {
name: 'EventDeatil',
components: {
Table
},
data() {
return {
queryInfo: {},
code: '', // 代碼
eventType: '', // 事件類型
eventDate: '', // 事件時間
similarEventDate: '', // 事件時間
pilesNum: '', // 股數
detailInfo: {}, // 明細概述信息
columns: [
{
label: '事件名稱',
width: 160,
sortable: true,
prop: 'eventname'
},
{
label: '代碼',
width: 93,
sortable: true,
prop: 'symbol'
},
{
label: '事后1日漲跌幅',
type: 'percent',
sortable: true,
prop: 'onedayratio'
},
{
label: '事后3日漲跌幅',
sortable: true,
type: 'percent',
prop: 'threedayratio'
},
{
label: '事后5日漲跌幅',
sortable: true,
type: 'percent',
prop: 'fivedayratio'
},
{
label: '事件偏向',
sortable: true,
prop: 'eventbias',
type: 'deviation'
},
{
label: '相似度',
sortable: true,
prop: 'similarvalue'
}
],
tableData: [],
sortBackupData: []
}
},
computed: {
...mapState({
eventDisplayInfo: (state) => state.event.eventDisplayInfo
})
},
watch: {
eventDisplayInfo: {
handler(newObj) {
this.code = newObj.symbol || ''
this.eventType = newObj.eventtype || ''
this.eventDate = newObj.eventdate || ''
this.queryInfo = newObj || {}
this.getSimilarEventData()
},
deep: true
}
},
created() {},
mounted() {
// 頁面路徑所傳參數
this.code = this.$route.query.symbol || ''
this.eventType = this.$route.query.eventtype || ''
this.eventDate = this.$route.query.eventdate || ''
this.queryInfo = this.$route.query || {}
this.similarEventDate = this.getDate(this.$route.query.eventdate.split(' ')[0])
this.getSimilarEventData() // 獲取表格數據
},
methods: {
// 獲取表格數據
getSimilarEventData() {
const date = this.eventDate.split(' ')[0]
if (!date) {
this.tableData = []
return
}
const params = {
symbol: this.code,
eventdate: date,
size: 10
}
querySimilarEventData(params).then((res) => {
const data = res.similarItems || []
const arr = []
this.pilesNum = res.Listedshares
data.forEach(el => {
el.similarvalue = this.toDecimal(this.numMul(el.similarvalue, 100)) + '%'
arr.push(el)
})
this.tableData = arr
Object.assign(this, {
tableData: this.tableData,
sortBackupData: this.tableData
})
sessionStorage.setItem('tableData', JSON.stringify(this.tableData))
})
},
// 格式化日期
getDate(date) {
const date1 = new Date(date)
// 獲取年份、月份和日期
const year = date1.getFullYear()
const month = date1.getMonth() + 1 // 注意月份從0開始計數，所以需要加上1得到真正的月份（12）
const day = date1.getDate()
return `${year}年${month}月${day}日`
},
// 排序
sortChange({ column, prop, order }) {
if (column.sortable === 'custom') {
if (order) {
const { tableData } = this
this.tableData = this.customSortBuyProp(order, tableData, prop)
} else {
this.tableData = this.sortBackupData
}
}
},
/**
* 根據選定prop排序(無效值排最后)
* @param {String} order 排序順序ascending/descending
* @param {Array} data 數據
* @param {String} prop 排序屬性
* @param {Array} invalidList 無效值定義
*/
customSortBuyProp(order, data, prop, invalidList) {
if (!order) {
return data
}
invalidList = invalidList || [null, undefined, '', '/']
const isAsc = order === 'ascending'
const effectiveArr = [] // 參與排序的數據
const invalidArr = [] // 不參與排序的數據
data.forEach((item) => {
const value = item[prop]
if (invalidList.includes(value)) {
invalidArr.push(item)
} else {
effectiveArr.unshift(item)
}
})
effectiveArr.sort((a, b) => {
const aValue = a[prop]
const bValue = b[prop]
if (aValue > bValue) {
return isAsc ? 1 : -1
} else if (aValue < bValue) {
return isAsc ? -1 : 1
} else {
return 0
}
})
return effectiveArr.concat(invalidArr)
},
// 跳轉詳情頁面
goToSimilarDetail(row) {
let arr = []
arr = [
{ event_date: this.eventDate.substring(0, 10),
event_type: Number(this.eventType),
shortname: this.queryInfo.shortname,
symbol: this.code },
{ event_date: row.eventdate.substring(0, 10),
event_type: row.eventtype,
shortname: row.shortname,
symbol: row.symbol }
]
sessionStorage.setItem('similarParams', JSON.stringify(arr))
const routeUrl = this.$router.resolve({
path: '/similarDetail/index',
query: row
})
window.open(routeUrl.href, '_blank')
}
}
}
</script>
<style lang="scss">
.baseDataPopper {
.content-box {
max-width: 500px;
max-height: 400px;
overflow-y: auto;
white-space: pre-line;
}
}
</style>
<style lang="scss" scoped>
.wrapper {
padding: 0 16px 20px;
background: #ffffff;
box-sizing: border-box;
-webkit-box-sizing: border-box;
.table-item {
padding: 0;
/deep/.table-box {
padding: 0;
}
}
.overview-box {
margin-bottom: 16px;
border: 1px solid #e6e6e6;
border-top: none;
.con-txt {
padding: 0px 17px 10px;
margin: 0;
line-height: 24px;
font-size: 14px;
color: #666666;
.spec {
font-weight: bold;
color: #f33030;
cursor: pointer;
border-bottom: 1px dashed #f33030;
&:hover {
color: #1e81ff;
border-bottom: 1px dashed #1e81ff;
}
}
}
}
.box-name {
padding: 0 16px;
display: flex;
align-items: center;
height: 44px;
font-size: 14px;
font-weight: bold;
color: #333333;
box-sizing: border-box;
-webkit-box-sizing: border-box;
.flag {
margin-right: 8px;
width: 5px;
height: 14px;
background: #1e81ff;
border-radius: 0px 2px 2px 0px;
}
}
.item-title {
margin: 26px 0 16px;
padding-left: 14px;
height: 28px;
line-height: 28px;
font-size: 14px;
font-weight: 600;
color: #333333;
background: url("~@/assets/images/title_bg.png") no-repeat;
background-size: 130px 100%;
position: relative;
&::before {
position: absolute;
content: "";
top: 5px;
left: 0;
width: 3px;
height: 18px;
background: #1e81ff;
}
}
.pagin-box {
margin-top: 20px;
padding-top: 20px;
text-align: center;
position: relative;
&::before {
position: absolute;
content: "";
top: 0;
left: -16px;
right: -16px;
height: 1px;
background: #eeeff1;
}
}
/deep/.pub-pagin-box {
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
font-size: 12px;
font-weight: normal;
color: #666666;
background: #f6f6f6;
border-radius: 3px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
color: #ffffff;
background-color: #1e81ff;
}
.el-pagination.is-background .btn-next.disabled,
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev.disabled,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .el-pager li.disabled {
color: #c0c4cc;
}
.el-pagination__jump,
.el-input__inner {
font-size: 12px;
color: #666666;
}
}
.chart-area {
margin-top: 26px;
padding: 10px 0;
width: 100%;
height: 380px;
background: #ffffff;
border: 1px solid #e6e6e6;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/deep/.detail-dialog {
.el-dialog__header {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #f3f3f3;
}
.title-box {
font-size: 16px;
position: relative;
.iconfont {
position: absolute;
right: 0;
cursor: pointer;
}
}
.el-dialog__body {
max-height: 350px;
min-height: 200px;
overflow-y: auto;
}
.content-box {
display: flex;
flex-wrap: wrap;
.item {
margin-bottom: 20px;
display: flex;
flex-shrink: 0;
width: 50%;
padding-right: 10px;
box-sizing: border-box;
&:nth-of-type(2n) {
padding-right: 0;
padding-left: 10px;
}
.name {
width: 120px;
font-weight: bold;
}
.con {
margin-left: 10px;
flex: 1;
}
}
}
}
}
</style>
table組件代碼：
<template>
<!-- table-wrapper 具體頁面可能也用了該類名控制表格特殊樣式 -->
<div :class="'table-wrapper ' + headbg">
<div class="table-box">
<el-table
ref="table"
:data="data"
:height="height === 0 ? undefined : height"
:max-height="maxheight === 0 ? undefined : maxheight"
:highlight-current-row="highlightCurrentRow"
:empty-text="emptyText"
:span-method="spanMethod"
:size="size"
:row-class-name="rowclassname"
:tree-props="treeProps"
:row-key="rowKey"
:row-style="size == 'small' ? { height: '30px' } : {}"
:cell-style="size == 'small' ? { padding: '0px' } : {}"
:stripe="stripe"
style="width: 100%"
tooltip-effect="dark"
border
@cell-dblclick="cellDblclick"
@row-click="rowClick"
@current-change="handleRowChange"
@selection-change="handleSelectionChange"
@sort-change="sortChange"
>
<el-table-column
v-if="hasselection"
:reserve-selection="reserveSelection"
type="selection"
header-align="center"
align="center"
width="40"
/>
<el-table-column
v-if="hasindex && data.length > 0"
:index="indexMethod"
label="序號"
type="index"
header-align="center"
align="center"
class-name="rw-table-index"
width="80"
/>
<el-table-column
v-for="h in heads"
:key="'col' + h.prop"
:prop="h.prop"
:fixed="h.hasFixed"
:align="h.align ? h.align : 'center'"
:header-align="h.hAlign ? h.hAlign : 'center'"
:min-width="h.minWidth ? h.minWidth : '128'"
:width="h.width ? h.width: 'auto'"
:sortable="h.sortable ? 'custom' : false"
:label-class-name="h.hasWrap ? 'hasWrap' : ''"
>
<template #header>
<el-tooltip
:content="h.label"
overflow
effect="dark"
placement="top-start"
>
<div class="dialog-box-title">
{{ h.label }}
</div>
</el-tooltip>
<div v-if="h.label === '相似度'">
<span
style="margin-right:8px;"
/>
<el-popover
placement="top-start"
width="250"
trigger="hover"
content="針對付費訂單，使用截止時間來源于合同，可能和最終實施的使用截止日期存在差異。"
>
<i
slot="reference"
class="tips-icon el-icon-question"
/>
</el-popover>
</div>
</template>
<template slot-scope="scope">
<div
v-if="h.type === 'starIcon'"
class="star-icon-box">
<i
v-for="(item, i) in 5"
:key="'icon' + i"
:style="{
color: scope.row[h.prop] > i ? '#F7BA2A' : '#DAE0E7',
}"
:class="
scope.row[h.prop] > i
? 'iconxingxing-tianchong'
: 'iconxingxing'
"
class="iconfont star-icon"
/>
</div>
<template v-else-if="h.type === 'largeText'">
<el-tooltip
popper-class="baseDataPopper"
effect="dark"
placement="bottom-start">
<div :style="scope.row[h.prop + 'Style']">{{ scope.row[h.prop] }}</div>
<template slot="content">
<div class="content-box">{{ scope.row[h.prop] }}</div>
</template>
</el-tooltip>
</template>
<template v-else-if="h.prop === 'similarvalue'">
<div
class="similarText"
@click="goToSimilarDetail(scope.row)">{{ scope.row[h.prop] }}</div>
</template>
<template v-else-if="h.type === 'date'">
<div >{{ formatDate(new Date(scope.row[h.prop])) }}</div>
</template>
<div
v-else
:class="h.type == 'price' || h.type == 'percent'
? (scope.row[h.prop] == 0 || scope.row[h.prop] == null)
? 'zero'
: scope.row[h.prop] > 0
? 'up'
: 'down'
: ''
"
:style="scope.row[h.prop + 'Style']"
>
{{
scope.row[h.prop] === "" ? '' : (h.type == "price"
? toDecimal(scope.row[h.prop], 4)
: h.type == "percent"
? ( scope.row[h.prop] ? toDecimal(numMul(scope.row[h.prop], 100)) + '%' : '-')
: h.type == "date"
? scope.row[h.prop].split(' ')[0].replace(/\-/g, "")
: h.type == "deviation"? eventBiasClick(scope.row[h.prop]): scope.row[h.prop])
}}
</div>
</template>
</el-table-column>
<slot />
<div slot="empty">暫無數據</div>
</el-table>
</div>
<div
v-if="haspage"
class="table-pagination">
<el-pagination
:total="total"
:current-page="pageindex"
:page-size="pagesize"
background
layout="prev, pager, next, jumper"
@current-change="pageChange"
@size-change="pageSizeChange"
/>
</div>
</div>
</template>
<script>
import { eventBiasHandle } from '@/utils/business'
import common from '@/utils/common'
export default {
name: 'CsTable',
props: {
heads: {
type: Array,
required: true
},
// 表格的數據
data: {
type: Array,
required: true
},
stripe: {
type: Boolean,
default: true
},
rowKey: {
type: String,
default: ''
},
emptydata: {
type: String,
default: ''
},
height: {
type: [Number, String],
default: 0
},
maxheight: {
type: [Number, String],
default: 0
},
total: {
type: Number,
default: 0
},
url: {
type: String,
default: ''
},
pagesize: {
type: Number,
default: 0
},
pageindex: {
type: Number,
default: 1
},
hasindex: {
type: Boolean,
default: false
},
hasselection: {
type: Boolean,
default: false
},
reserveSelection: {
type: Boolean,
default: false
},
haspage: {
type: Boolean,
default: true
},
highlightCurrentRow: {
// 是否有點擊選中效果
type: Boolean,
default: false
},
size: {
type: String,
default: 'medium'
},
headbg: {
type: String,
default: ''
},
spanMethod: {
type: Function,
default: function({ row, column, rowIndex, columnIndex }) {}
},
// eslint-disable-next-line vue/require-default-prop
rowclassname: [String, Function],
treeProps: {
type: Object,
default: () => {
return { children: 'children', hasChildren: 'hasChildren' }
}
}
},
data() {
return {
emptyText: '暫無數據'
}
},
mounted() {
if (this.emptydata !== '') {
this.emptyText = this.emptydata
}
},
methods: {
goToSimilarDetail(row) {
this.$emit('goToSimilarDetail', row)
},
eventBiasClick(val) {
return eventBiasHandle(val)
},
pageChange(val) {
this.$emit('pageChange', this.pagesize, val)
},
pageSizeChange(val) {
if (val * (this.pageindex - 1) <= this.total) {
this.$emit('pageChange', val, this.pageindex)
} else {
this.$emit('pageChange', val, 1)
}
},
sortChange(column, prop, order) {
this.$emit('sortChange', column)
},
indexMethod(index) {
return this.pagesize * (this.pageindex - 1) + index + 1
},
handleSelectionChange(val) {
this.$emit('selection-change', val)
},
cellDblclick(row, column, cell, event) {
this.$emit('cell-dblclick', row, column, cell, event)
},
rowClick(row, column, event) {
this.$emit('rowClick', row, column, event)
},
clearSelection() {
this.$refs.table.clearSelection()
},
toggleAllSelection() {
this.$refs.table.toggleAllSelection()
},
toggleRowSelection(row) {
this.$refs.table.toggleRowSelection(row)
},
handleRowChange(row) {
if (this.highlightCurrentRow) {
this.$emit('handleCurRow', row)
}
},
doLayout() {
this.$refs.table.doLayout()
},
formatDate(date, format = 'YYYY-MM-dd') {
return common.formatDate(date, format)
}
}
}
</script>
<style lang="scss">
.baseDataPopper {
.content-box {
max-width: 500px;
max-height: 400px;
overflow-y: auto;
white-space: pre-line;
}
}
</style>
<style scoped lang="scss">
.el-icon-question {
color: #1e81ff;
margin-right: 8px;
}
.similarText {
text-decoration: underline;
color: #1e81ff;
cursor: pointer;
}
.table-wrapper {
padding: 17px 0 20px;
.table-box {
padding: 0 16px;
}
}
.el-table {
/deep/thead {
tr,
th {
padding-top: 0;
padding-bottom: 0;
font-size: 14px;
color: #333333;
font-weight: normal;
background: #fcfcfc;
}
th {
.cell {
display: flex;
justify-content: center;
align-items: center;
line-height: 16px;
white-space: pre;
.dialog-box-title{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.hasWrap {
display: flex;
justify-content: center;
}
}
.caret-wrapper {
width: 14px;
.sort-caret {
left: 2px;
}
}
}
/deep/tr {
height: 44px !important;
td {
padding-top: 4px;
padding-bottom: 4px;
color: #666666;
font-size: 14px;
}
&.el-table__row--striped td {
background: #fcfcfc !important;
}
}
/deep/.el-table__body tr.current-row > td {
background-color: #eff4f9;
}
.star-icon-box {
.star-icon {
margin-right: 6px;
font-size: 14px;
&:nth-last-of-type(1) {
margin-right: 0;
}
}
}
}
/deep/.table-pagination {
margin-top: 20px;
padding-top: 20px;
text-align: center;
border-top: 1px solid #eeeff1;
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
font-size: 12px;
font-weight: normal;
color: #666666;
background: #f6f6f6;
border-radius: 3px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
color: #ffffff;
background-color: #1e81ff;
}
.el-pagination.is-background .btn-next.disabled,
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev.disabled,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .el-pager li.disabled {
color: #c0c4cc;
}
.el-pagination__jump,
.el-input__inner {
font-size: 12px;
color: #666666;
}
}
.up {
color: #ed5959;
}
.down {
color: #33ad34;
}
.zero {
color: #333;
}
</style>
父組件詳情頁面代碼：
<template>
<div>
<div
v-loading="loading"
class="main-wrapper">
<div class="main-box">
<el-card class="box-card">
<div class="title">詳情</div>
<div class="tab-box">
<div
v-for="(item, index) in tabList"
:key="index"
class="item-tab"
@click="handleClick(item, index)">
<div
:class="activeIndex === index ? 'color' : ''"
class="tab"
>{{ item }}</div>
<div
v-if="activeIndex === index"
class="line-box"/>
</div>
</div>
<div class="table">
<ColumnTable
ref="columnTable"
:header-list="headerList"
:table-data="tableData"
:active-index="activeIndex"
@addRow ="addRow"
@delRow ="delRow"
/>
</div>
</el-card>
</div>
</div>
<!-- 添加事件表格 -->
<el-dialog
v-if="dialogVisible"
:visible.sync="dialogVisible"
title="選擇事件"
width="60%"
class="dialog"
@close="cancelSelect">
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="100px"
class="demo-ruleForm">
<el-form-item
label="事件"
prop="similarVal">
<el-select
v-model="ruleForm.similarVal"
:multiple-limit="2"
placeholder="請選擇"
multiple
collapse-tags>
<el-option
v-for="item in similarOptions"
:key="`${getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁`"
:label="`${getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁`"
:value="`${getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁`"/>
</el-select>
</el-form-item>
<el-form-item class="btnOptions">
<el-button
@click="cancelSelect">取消</el-button>
<el-button
type="primary"
style="margin-left:20px"
@click="submitForm('ruleForm')">確定</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import ColumnTable from '@/components/ColumnTable' // 引入父組件表格
import { querySimilarTableData } from '@/api/queryEvent' // 后端接口
export default {
components: {
ColumnTable
},
data() {
return {
tabList: ['基本信息', '財務信息', '行情走勢', '分類業務'],
activeIndex: 0,
headerList: [
{
label: '',
value: 'class',
headerAlign: 'left',
minWidth: '110',
align: 'center'
},
{
label: '基本信息',
value: 'baseInfo',
headerAlign: 'left',
minWidth: '80',
align: 'center'
},
{
label: '公司規模',
value: 'CirculatedMarketValue',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '公司性質',
value: 'OwnshipID',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '注冊地址',
value: 'RegisterAddress',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '注冊資本（元）',
value: 'RegisterCapital',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '辦公地址',
value: 'OfficeAddress',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '上市日期',
value: 'IPODate',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '主營業務',
value: 'MainBusiness',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '所屬行業',
value: 'IndustryCode',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '總股本（萬股）',
value: 'TotalShare',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '流通股本（萬股）',
value: 'CirculatedShare',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '財務信息',
value: 'financialInfo',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '凈資產收益率（%）',
value: 'ROEA',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '凈利潤率（%）',
value: 'ROA2A',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '營業成本率（%）',
value: 'OperatingCostRatio',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '營業利潤率（%）',
value: 'OperatingProfiToRevenue',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '銷售期間費用率（%）',
value: 'PeriodExpenseRate',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '投資收益率（%）',
value: 'ReturnOnInvestment',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '應收賬款周轉率（%）',
value: 'ReceivableTurnoverA',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '總資產周轉率（%）',
value: 'AssetTurnoverA',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '股東權益周轉率（%）',
value: 'EequityTurnoverA',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '行情走勢',
value: 'marketTrend',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '個股事后1日漲跌幅（%）',
value: 'onedayratio',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '個股事后3日漲跌幅（%）',
value: 'threedayratio',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '個股事后5日漲跌幅（%）',
value: 'fivedayratio',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '大盤收益率（%）',
value: 'marketreturn',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '行業收益率（%）',
value: 'industryreturn',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '分類業務',
value: 'age',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '解禁占比（%）',
value: 'Proportion2',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '總限售股數（萬股）',
value: 'TotalLockShares',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '剩余限售股數量（萬股）',
value: 'RemainedLockShares',
headerAlign: 'left',
minWidth: '90',
align: 'center'
},
{
label: '解禁股東數',
value: 'HolderNumber',
headerAlign: 'left',
minWidth: '90',
align: 'center'
}
],
ruleForm: {
similarVal: [] // 下拉框選中值
},
rules: {
similarVal: [
{ required: true, message: '請選擇相似事件', trigger: 'change' }
]
},
tableData: [], // 表格數據
queryParams: [], // 請求參數
queryParams1: [], // 請求參數
loading: false, // 加載狀態
dialogVisible: false, // 是否顯示添加事件彈框
similarOptions: [] // 下拉框選項數據
}
},
mounted() {
let arr = []
arr = sessionStorage.getItem('similarParams')
this.queryParams = JSON.parse(arr)
this.queryParams.forEach(i => {
const tableList = sessionStorage.getItem('tableData')
this.similarOptions = JSON.parse(tableList).filter((item) => item.symbol !== i.symbol)
})
this.getSimilarTableData(this.queryParams)
},
methods: {
// tab欄切換點擊（滾動條錨點定位）
handleClick(item, index) {
this.activeIndex = index
if (this.activeIndex == 0) {
document.documentElement.scrollTop = 0
} else {
// 獲取需要滾動到的元素
const targetElement = document.getElementById('title')
// 將頁面滾動至目標元素處
targetElement.scrollIntoView({ behavior: 'smooth' })
}
},
// 獲取表格數據
getSimilarTableData(params) {
this.loading = true
this.tableData = []
querySimilarTableData(params).then(res => {
this.loading = false
res.forEach((item, index) => {
params.forEach((i, idx) => {
if (index === idx) {
const title = this.getDate(i.event_date)
item.RegisterCapital = this.money(item.RegisterCapital)
item.ROEA = this.toDecimal(item.ROEA, 4)
item.ROA2A = this.toDecimal(item.ROA2A, 4)
item.OperatingCostRatio = this.toDecimal(item.OperatingCostRatio, 4)
item.OperatingProfiToRevenue = this.toDecimal(item.OperatingProfiToRevenue, 4)
item.PeriodExpenseRate = this.toDecimal(item.PeriodExpenseRate, 4)
item.ReturnOnInvestment = this.toDecimal(item.ReturnOnInvestment, 4)
item.ReceivableTurnoverA = this.toDecimal(item.ReceivableTurnoverA, 4)
item.AssetTurnoverA = this.toDecimal(item.AssetTurnoverA, 4)
item.EequityTurnoverA = this.toDecimal(item.EequityTurnoverA, 4)
item.onedayratio = this.toDecimal(item.onedayratio, 2)
item.threedayratio = this.toDecimal(item.threedayratio, 2)
item.fivedayratio = this.toDecimal(item.fivedayratio, 2)
item.marketreturn = this.toDecimal(item.marketreturn, 2)
item.industryreturn = this.toDecimal(item.industryreturn, 2)
item.Proportion2 = this.toDecimal(item.Proportion2, 4)
const obj = {
class: `${title}${i.symbol}${i.shortname}解禁`,
...item
}
this.tableData.push(obj)
}
})
})
const obj1 = {
class: '添加其他事件',
AssetTurnoverA: '', CirculatedMarketValue: '', CirculatedShare: null, EequityTurnoverA: '', HolderNumber: null, IPODate: '', IndustryCode: '', MainBusiness: '', OfficeAddress: '', OperatingCostRatio: '', OperatingProfiToRevenue: '', OwnshipID: '', PeriodExpenseRate: '', Proportion2: '', ROA2A: '', ROEA: '', ReceivableTurnoverA: '', RegisterAddress: '', RegisterCapital: '', RemainedLockShares: null, ReturnOnInvestment: '', Symbol: '', TotalLockShares: null, TotalShare: null, fivedayratio: '', industryreturn: '', marketreturn: '', onedayratio: '', threedayratio: ''
}
this.tableData.push(obj1)
})
},
// 格式化日期
getDate(date) {
const date1 = new Date(date)
// 獲取年份、月份和日期
const year = date1.getFullYear()
const month = date1.getMonth() + 1 // 注意月份從0開始計數，所以需要加上1得到真正的月份（12）
const day = date1.getDate()
return `${year}年${month}月${day}日`
},
// 新增事件
addRow() {
this.ruleForm.similarVal = []
this.tableData.forEach(res => {
this.similarOptions.forEach(i => {
if (res.class === `${this.getDate(i.eventdate.substring(0, 10))}${i.symbol}${i.shortname}解禁`) {
this.ruleForm.similarVal.push(res.class)
}
})
})
this.dialogVisible = true
},
// 刪除事件
delRow(label) {
const index = this.tableData.findIndex(item => item.class === label)
const selectItem = this.tableData.splice(index, 1)
const arr = this.ruleForm.similarVal.filter(i => i !== selectItem[0].class)
this.ruleForm.similarVal = arr
},
// 取消選擇事件
cancelSelect() {
this.dialogVisible = false
},
// 點擊確定添加事件
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.queryParams1 = []
let queryParams2 = []
let tableParams = []
this.ruleForm.similarVal.forEach(i => {
queryParams2 = this.similarOptions.filter((item) => `${this.getDate(item.eventdate.substring(0, 10))}${item.symbol}${item.shortname}解禁` === i)
queryParams2.forEach(item => {
const obj = {
event_date: item.eventdate.substring(0, 10),
event_type: Number(item.eventtype),
shortname: item.shortname,
symbol: item.symbol
}
this.queryParams1.push(obj)
tableParams = this.queryParams.concat(this.queryParams1)
})
})
this.getSimilarTableData(tableParams)
this.dialogVisible = false
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .el-select {
width: 320px !important;
}
/deep/ .el-select > .el-input {
width: 350px;
}
/deep/ .el-dialog {
height: 50%;
position: relative;
}
/deep/ .el-dialog__footer {
position: absolute;
bottom: 20px;
right: 20px;
}
.select-title {
margin-left: 100px;
}
.main-wrapper {
margin: 77px auto 0;
max-width: 1200px;
box-sizing: border-box;
.main-box {
display: flex;
.box-card {
width: 100%;
.title {
font-size: 14px;
font-family: Noto Sans S Chinese;
font-weight: bold;
color: #333333;
}
.tab-box {
display: flex;
align-items: center;
margin: 35px 57px 37px 57px;
.item-tab {
margin-right: 36px;
width: 67px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
position: relative;
.tab {
font-size: 14px;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #333333;
}
.color {
color: #1E81FF;
}
}
.line-box {
width: 67px;
height: 1px;
background: #1E81FF;
position: absolute;
content: "";
bottom: -3px;
left: 0;
}
}
.table {
margin: 33px 57px 56px;
}
}
}
}
.btnOptions {
position: absolute;
right: 20px;
bottom: 20px;
}
</style>
加減表格子組件代碼：<!-- 表格行列轉換 -->
<template>
<el-table
ref="table"
:data="getTableData[0]"
border
style="width: 100%;"
>
<template v-for="(item, index) in getTableData[1]">
<el-table-column
:key="index"
:label="item.label"
:prop="item.value"
:header-align="item.headerAlign || 'center'"
:min-width="item.minWidth || 80"
:align="item.align || 'center'"
>
<template slot-scope="scope">
<!-- {{ tableFormatter(item.value, scope.row) }}-{{ index }}-{{ scope.$index }} index代表表格列索引，scope.$index代表表格行索引 -->
<div
:class="(scope.$index === 0 && activeIndex == 0) || (scope.$index === 11 && activeIndex == 1) || (scope.$index === 21 && activeIndex == 2) || (scope.$index === 27 && activeIndex == 3) ? 'title-text' : ''"
:style="{textAlign: (scope.$index === 4 || scope.$index > 8) && index > 0 ? 'right' : (index === 0 ? 'center' : 'left')}"
:id="(scope.$index === 0 && activeIndex == 0) || (scope.$index === 11 && activeIndex == 1) || (scope.$index === 21 && activeIndex == 2) || (scope.$index === 27 && activeIndex == 3) ? 'title' : ''">
{{ tableFormatter(item.value, scope.row) }}
</div>
</template>
<template
slot="header"
slot-scope="scope">
<div
v-if="scope.$index == tableData.length"
class="ceil">
{{ scope.column.label }}
<i
class="el-icon-circle-plus-outline"
@click="addRow()" />
</div>
<div
v-else-if="scope.$index>2&&scope.$index<tableData.length"
class="ceil">
{{ scope.column.label }}
<i
class="el-icon-remove-outline"
@click="delRow(scope.column.label)"/>
</div>
<span v-else>{{ scope.column.label }}</span>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
props: {
headerList: {
type: Array,
default: () => []
},
tableData: {
type: Array,
default: () => []
},
activeIndex: {
type: Number,
default: 0
}
},
data() {
return {
}
},
computed: {
getTableData() {
return this.fotmatterTableData(this.tableData, this.headerList)
}
},
methods: {
fotmatterTableData(data, header) {
const enddata = []
const endheader = []
header.forEach((item, index) => {
if (index === 0) {
endheader.push({
label: header[index].label,
value: 'mainIndex',
headerAlign: header[index].headerAlign,
minWidth: header[index].minWidth,
align: header[index].align
})
data.forEach((ele, idx) => {
endheader.push({
label: ele[header[index].value],
value: `type${idx}`
})
})
} else {
const obj = {
mainIndex: header[index].label
}
data.forEach((ele, ind) => {
obj[`type${ind}`] = ele[header[index].value]
})
enddata.push(obj)
}
})
console.log('end===', enddata, endheader)
return [enddata, endheader]
},
// 列表格式化
tableFormatter(prop, row) {
if (row[prop] || row[prop] == 0) {
if (prop === 'mainIndex') {
if (row.unit) {
return `${row[prop]}（${row.unit}）`
}
return row[prop]
}
return row[prop]
}
return ''
},
randomStr() {
return Math.random().toString().slice(3, 8)
},
addRow() {
this.$emit('addRow')
},
delRow(label) {
this.$emit('delRow', label)
}
}
}
</script>
<style scoped>
.title-text {
background: rgba(30,129,255,0.1);
color: #1E81FF;
width: 100%;
height: 24px;
}
/deep/ .el-table th > .cell {
padding-left: 0 !important;
padding-right: 0 !important;
}
/deep/ .cell {
padding-left: 0 !important;
padding-right: 0 !important;
height: 100%;
}
/deep/ td {
padding: 0;
}
.el-icon-circle-plus-outline {
cursor: pointer;
color: #1E81FF;
font-size: 16px;
}
.el-icon-remove-outline {
cursor: pointer;
color: #707070;
font-size: 16px;
}
</style>
浙公網安備 33010602011771號