<template>
<div>
<div>
<div style="padding: 20px;position: relative;">
<div style="width: 100%;z-index: 998;">
<div style="display: flex;align-items: center;justify-content: space-between;">
<div style="display: flex;align-items: center;">
<div>
<span style="cursor: pointer;" @click="$emit('backFnc')">
<img src="../../../assets/51.png" alt="">
</span>
</div>
<div style="margin-left: 20px;">
<div>
{{ form.title }}
</div>
<div style="font-size: 12px;color: #ccc;display: flex;align-items: center;">
<div>
<span>
{{ form.lingyu }}
</span>
-
<span>
{{ form.ku }}
</span>
</div>
<div style="width: 1px;height: 12px;background: #ccc;margin: 0px 10px;">
</div>
<div>更新时间：
<span>
{{ form.date }}
</span>
</div>
</div>
</div>
</div>
<div style="display: flex;align-items: center;">
<div class="input">
<el-input placeholder="请输入内容" v-model="searchValue" prefix-icon="el-icon-search"
clearable>
</el-input>
</div>
<div>
<el-button size="small" type="primary" @click="daochuFnc" style="margin-left: 10px;"
:disabled="isDcDisabled">
<img style="width: 12px;height: 12px;vertical-align: middle;"
src="../../../assets/24.png" alt="">
导出</el-button>
<el-button size="small" type="primary" @click="calculateSum(currentSummaryColumn)"
:disabled="isDisabled">
<img style="width: 12px;height: 12px;vertical-align: middle;"
src="../../../assets/8.png" alt="">
求和</el-button>
</div>
</div>
</div>
</div>
<div>
<div class="tableData">
<el-table :data="tableData" :style="{ height: isShow ? 645 + 'px' : 670 + 'px' }"
:max-height="isShow ? 645 : 670" border style="width: 100%; position: relative;"
@selection-change="handleSelectionChange" :row-style="isRed" ref="firstTable">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop"
:label="column.label" :width="column.width" align="center">
<template v-slot:header>
<el-checkbox v-model="column.checked2" style="float: left;"
@change="changeFnc('1', column.prop, column.checked2)">
</el-checkbox>
<span class="table-heard-filter" style="font-weight: normal;">{{ column.label
}}</span>
<!-- <i class="el-icon-search" style="margin-right: 15px;float: right;line-height: 23px;"
@click.stop="filterData($event, column.prop)"></i> -->
<img style="float: right;cursor: pointer;width: 15px;height: 15px;margin-top: 3px;"
@click.stop="filterData($event, column.prop)" src="../../../assets/14.png"
alt="">
</template>
<template slot-scope="scope">
<span v-html="createKeywordHtml_content(scope.row[column.prop])">{{
scope.row[column.prop] }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="table3">
<el-table v-if="isShow" :data="dataTable2" :show-header=false style="width: 100%;"
ref="secondTable" :span-method="arraySpanMethod" class="tabetabe2 secondTable">
<el-table-column width="55">总计</el-table-column>
<el-table-column width="60"></el-table-column>
<el-table-column style="" v-for="(column, index) in columns" :key="index"
:prop="column.prop" :label="column.label" :width="column.width"
align="center"></el-table-column>
</el-table>
</div>
</div>
<!-- 分页器 -->
<div class="form"
style="width: 100%;display: flex;align-items: center;justify-content:space-between;margin-top: 20px;">
<div>
本平台共15个领域，70个数据库，200张数据表
</div>
<el-pagination :popper-append-to-body="false" :total="total" :page-size="pagesize"
:page-sizes="[10, 50, 100]" layout="total,sizes,prev, pager, next"
@size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</div>
<TableTool v-if="showFilterTool" ref="selectTool" :filterToolLeft="filterToolLeft"
:filterToolTop="filterToolTop" @closeTool="closeTool" @saveSeach="saveSeach" :ids="ids" :type="type" />
</div>
</template>
<script>
import TableTool from '@/components/TableTool/index.vue'
export default {
name: 'dataDirectory',
components: {
TableTool,
},
data() {
return {
form: {
title: "支付明细表",
lingyu: "社会保障领域",
ku: "公积金业务库",
date: "2024-02-05"
},
//两个表绑定的data一致
dataTable2: [
{
date: '',
name: "",
address: "",
}
],
//两个表绑定的prop,label一致，
columns: [
{
label: '数据年份',
prop: 'date',
width: '180',
checked: "",
},
{
label: '字段1',
prop: 'name',
width: '180',
checked: ""
},
{
label: '字段2',
prop: 'address',
width: '180',
checked: ""
},
{
label: '字段2',
prop: 'address',
width: '180',
checked: ""
},
{
label: '字段2',
prop: 'address',
width: '180',
checked: ""
},
{
label: '字段2',
prop: 'address',
width: '180',
checked: ""
},
{
label: '字段2',
prop: 'address',
width: '180',
checked: ""
},
{
label: '字段2',
prop: 'address',
width: '180',
checked: ""
},
{
label: '字段2',
prop: 'address',
width: '180',
checked: ""
}, {
label: '字段2',
prop: 'address',
width: '180',
checked: ""
}, {
label: '字段2',
prop: 'address',
width: '180',
checked: ""
}, {
label: '字段2',
prop: 'address',
width: '180',
checked: ""
}, {
label: '字段2',
prop: 'address',
width: '180',
checked: ""
}, {
label: '字段2',
prop: 'address',
width: '180',
checked: ""
},
],
isShow: false,
isDisabled: true,
isDcDisabled: true,
summary: [], // 用于存放总计数据的数组
CheckboxArr: [],
currentSummaryColumn: null, // 当前点击的列名
tableData: [{
date: '2016',
name: 56,
address: 82016,
id: "0"
}, {
date: '2016',
name: 78,
address: 885,
id: "1"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}, {
date: '2016',
name: 0,
address: 8,
id: "2"
}
],
showFilterTool: false,
ids: [],
type: "",
pagesize: 10,
currpage: 1,
searchValue: "",
total: 0,
tableIds: [],
selectedRows: [] // 用于存储选中的行数据
};
},
mounted() {
// this.syncScroll()
this.closeTableToolFnc()
},
beforeDestroy() {
this.closeTableToolFnc()
},
methods: {
closeTableToolFnc() {
document.addEventListener("click", (e) => {
this.closeTool()
});
},
syncScroll() {
let firstTable = this.$refs.firstTable.bodyWrapper
this.$nextTick(() => {
let secondTable = this.$refs.secondTable.bodyWrapper
firstTable.addEventListener("scroll", () => {
secondTable.scrollLeft = firstTable.scrollLeft
this.closeTableToolFnc()
})
secondTable.addEventListener("scroll", () => {
firstTable.scrollLeft = secondTable.scrollLeft
this.closeTableToolFnc()
})
})
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 1 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
isRed({ row }) {
const checkIdList = this.selectedRows.map((item) => item.id);
if (checkIdList.includes(row.id)) {
return {
backgroundColor: "#F0F6FF"
}
}
},
handleSelectionChange(val) {
this.tableIndex = [...val.map(i => i.id)]
console.log(this.tableIndex);
if (this.tableIndex.length) {
this.isDcDisabled = false
} else {
this.isDcDisabled = true
}
this.selectedRows = val;
},
createKeywordHtml_content(data) {
if (data === undefined) {
return data;
}
if (typeof data !== 'string') {
data = String(data)
}
let value = data.replace(this.searchValue, '<span style="color:#488CF1">$&</span>');
return value
},
changeFnc(tableIndex, column, checked) {
// console.log(checked);
const hasChecked = this.columns.some(item => item.checked2 == true);
if (hasChecked) {
this.isDisabled = false
} else {
this.isDisabled = true
}
this.currentSummaryColumn = column;
console.log(column);
const columnIndex = this.columns.findIndex(u => u.prop === column)
if (this.columns[columnIndex].checked2) {
// 选中时将该列的背景色变为红色
this.$nextTick(() => {
const cells = document.querySelectorAll(`.tableData .el-table__body-wrapper tr td:nth-child(${columnIndex + 3})`)
cells.forEach(cell => {
cell.style.backgroundColor = '#F0F6FF'
})
})
} else {
// 取消选中时将该列的背景色还原
this.$nextTick(() => {
const cells = document.querySelectorAll(`.tableData .el-table__body-wrapper tr td:nth-child(${columnIndex + 3})`)
cells.forEach(cell => {
cell.style.backgroundColor = ''
})
})
}
},
daochuFnc() {
console.log(this.selectedRows);
},
calculateSum(columnName) {
this.isShow = true
let sum = 0;
this.tableData.forEach(item => {
console.log(item[this.currentSummaryColumn]);
if (typeof item[this.currentSummaryColumn] == 'number') {// 确保将值转换为数值类型
sum += item[this.currentSummaryColumn];
} else {
sum = <div style="height:40px;position: relative;width:100%;line-height:40px">
<div style="width:20px;height:20px; position: absolute;top:0px;left:0px; background: red;clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);">
</div>
错误（N/A）
</div>
}
console.log(item);
});
this.summary.push(sum); // 将计算出的总和添加到summary数组中
this.dataTable2[0][columnName] = sum;
this.syncScroll()
},
filterData(e, type) {
this.type = type
this.showFilterTool = false;
this.$nextTick(() => {
this.filterToolTop = e.pageY;
this.filterToolLeft = e.pageX;
this.ids = []
this.tableData.forEach(t => {
this.ids.push(t.id)
})
this.showFilterTool = true;
});
},
closeTool() {
this.showFilterTool = false;
},
saveSeach(data) {
this.tableData = []
this.tableData = data
this.closeTool();
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.pagesize = val
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.currpage = val
},
}
};
</script>
<style scoped>
.contaniner {
width: calc(100% - 40px);
height: calc(100% - 30px);
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f2f4f8;
}
.leftDiv {
width: 20%;
height: 100%;
background: #FFFFFF;
}
.contenDiv {
width: 100%;
height: 100%;
background: #FFFFFF
}
::v-deep .el-tree-node__expand-icon.is-leaf {
display: none;
}
::v-deep .el-tree-node__content {
padding: 10px 0;
}
.tree {
margin-top: 20px;
}
::v-deep .is-current {
color: #4992F5;
background-color: rgba(73, 146, 245, 0.3) !important;
}
::v-deep .el-tree-node:focus>.el-tree-node__content {
background-color: rgba(73, 146, 245, 0.3) !important;
}
::v-deep .el-tree-node__content:hover {
background-color: rgba(73, 146, 245, 0.3) !important;
}
.edit-icon {
width: 23px;
height: 23px;
background: url('../../../assets/edit-icon.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.userTil {
font-size: 22px;
color: #1753E8;
font-weight: bold;
height: 4%;
}
.infoTil {
color: #397BD9;
padding-top: 20px;
}
.color {
color: #7F7F7F;
font-size: 14px;
}
::v-deep .el-radio-group {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
::v-deep .el-radio {
color: #7F7F7F;
width: 33.33%;
margin-right: 0;
padding: 6px 0;
}
.paddingTop20 {
padding-top: 10px;
}
.parFlex {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.chilWid {
color: #7F7F7F;
width: 40%;
margin: 10px 20px;
padding: 10px 10px;
margin-left: 0;
background: #fff;
box-shadow: 0 0 8px #DEE7FC;
border-left: 3px solid #2860EA;
border-radius: 8px;
}
.input ::v-deep .el-input__inner {
/* padding-left: 30px; */
/* width: 500px; */
height: 35px;
/* padding-right: 60px; */
}
.input ::v-deep .el-input__icon {
margin-top: -2px;
}
.input ::v-deep .el-input__suffix {
/* height: 40px; */
/* padding-right: 20px; */
}
::v-deep .el-form-item {
margin: 0 !important;
}
::v-deep .el-select {
width: 100% !important;
}
.iscolor {
font-size: 16px;
}
.span {
font-size: 12px;
color: #AAAAAA;
}
.point:hover {
background: #F2F2F2;
}
.maindialog {
width: 100%;
display: flex;
}
.left {
width: 70%;
height: 500px;
margin: 20px;
/* overflow: auto; */
}
.marRight {
margin-right: 10px;
color: #606266;
}
.right {
width: 30%;
margin: 20px;
height: 500px;
/* overflow: auto; */
}
.groupcheckbox ::v-deep .el-checkbox {
width: 20%;
margin-top: 10px;
}
.keSeachValue {
width: 40%
}
.borra {
width: 35px;
height: 35px;
border-radius: 50px;
text-align: center;
line-height: 35px;
margin-right: -22px;
z-index: 99;
color: #fff;
}
.selected-row {
background-color: red;
}
.tableData ::v-deep .el-table--border {
border: none;
}
.secondTable ::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
display: none;
}
.table3 ::v-deep .el-table {
margin: 0 !important;
}
.table3 ::v-deep .el-table .el-table__cell {
padding: 0 !important;
height: 40px !important;
}
.table3 ::v-deep .el-table .cell {
padding: 0 !important;
}
</style>
<style>
.el-select-dropdown.el-popper {
border-radius: 0px !important;
padding: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
box-shadow: 0 2px 12px 0 #c2c2c2 !important;
}
</style>
4574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
