|
|
@@ -0,0 +1,286 @@
|
|
|
+<template>
|
|
|
+ <div class="data-table">
|
|
|
+ <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
|
|
|
+ <el-table :data="filteredTableData" :span-method="tableSpanMethod" show-summary border ref="table" class="table" style="width: 100%">
|
|
|
+ <el-table-column v-for="(item,index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel">
|
|
|
+ <template #header>
|
|
|
+ <span class="ddd">
|
|
|
+ <el-tooltip :content="item.columnLabel" placement="top"><span>{{ item.columnLabel }}</span>
|
|
|
+ <span>{{ item.columnLabel }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <span v-if="item.needFilters">
|
|
|
+ <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
|
|
|
+ <i slot="reference" :class="['filter-arrow', 'el-icon-arrow-down', arrowClass(item.columnName)]" />
|
|
|
+ <el-form>
|
|
|
+ <el-form-item :label="item.columnLabel">
|
|
|
+ <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
|
|
|
+ <el-option v-for="(option, optionIndex) in tableDataFilters[item.columnName]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="data-table-dialog">
|
|
|
+ <Dialog :width="width" :flag="flag">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div class="title">列设置</div>
|
|
|
+ <div class="content">ddd</div>
|
|
|
+ <div class="foot right t30">
|
|
|
+ <el-button size="medium" class="r24" type="primary">确定</el-button>
|
|
|
+ <el-button size="medium">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { setTableFilters } from '@/utils/table'
|
|
|
+import Dialog from '@/layout/components/Dialog/index.vue'
|
|
|
+import { Query } from '@/api/dataIntegration'
|
|
|
+export default {
|
|
|
+ name: 'DataTable',
|
|
|
+ props: {
|
|
|
+ dataId: {
|
|
|
+ type: String || Number
|
|
|
+ },
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '560px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: { Dialog },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ flag: false,
|
|
|
+ tableCols: [
|
|
|
+ {
|
|
|
+ "columnName": "structureName1",//查询项名称-取值字段名
|
|
|
+ "columnLabel": "名称1",//表头名
|
|
|
+ "columnDescribe": null,//表头浮窗提示内容
|
|
|
+ "needShow": 1,//是否需要显示
|
|
|
+ "needGroup": 0,//是否需要分组合并
|
|
|
+ "needSort": 1,//是否需要排序
|
|
|
+ "needFilters": 1,//是否需要过滤'
|
|
|
+ "listqueryTemplateID": "下拉查询模板",
|
|
|
+ "dataType": "string",//数据类型
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "columnName": "structureName2",//查询项名称-取值字段名
|
|
|
+ "columnLabel": "名称2",//表头名
|
|
|
+ "columnDescribe": null,//表头浮窗提示内容
|
|
|
+ "needShow": 1,//是否需要显示
|
|
|
+ "needGroup": 0,//是否需要分组合并
|
|
|
+ "needSort": 0,//是否需要排序
|
|
|
+ "needFilters": 1,//是否需要过滤'
|
|
|
+ "listqueryTemplateID": "下拉查询模板",
|
|
|
+ "dataType": "string",//数据类型
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "columnName": "structureName3",//查询项名称-取值字段名
|
|
|
+ "columnLabel": "名称3",//表头名
|
|
|
+ "columnDescribe": null,//表头浮窗提示内容
|
|
|
+ "needShow": 1,//是否需要显示
|
|
|
+ "needGroup": 1,//是否需要分组合并
|
|
|
+ "needSort": 0,//是否需要排序
|
|
|
+ "needFilters": 0,//是否需要过滤'
|
|
|
+ "listqueryTemplateID": "下拉查询模板",
|
|
|
+ "dataType": "string",//数据类型
|
|
|
+ }
|
|
|
+ ], //表头数据
|
|
|
+ tableData: [
|
|
|
+ { "dataStructureID": 1, "structureName1": "机器维护数据1-aa", "structureName2": "机器维护数据2-bb", "structureName3": "机器维护数据3-cc" },
|
|
|
+ { "dataStructureID": 2, "structureName1": "机器维护数据1-aa", "structureName2": "机器维护数据2-bb", "structureName3": "机器维护数据3-cc" },
|
|
|
+ ], //表格数据
|
|
|
+ tableColsCopy: [], //表头数据缓存
|
|
|
+ tableDataFilters: {}, //表头-下拉数据
|
|
|
+ filterValues: {}, //表头-下拉-选中数据
|
|
|
+ tableDataCopy: [], //缓存table数据
|
|
|
+ tableGroups: [], //表格分组数据
|
|
|
+ colShowFilter: '', //表头-下拉-箭头
|
|
|
+ spanArr: [], //表格分组数据缓存
|
|
|
+ pos: 0 //表格分组计数
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //设置表头-下拉-箭头样式
|
|
|
+ arrowClass () {
|
|
|
+ return function (prop) {
|
|
|
+ let classString = ''
|
|
|
+ if (this.colShowFilter === prop) {
|
|
|
+ return 'arrow-active'
|
|
|
+ }
|
|
|
+ if (Object.entries(this.tableDataFilters).find(([key, arr]) => this.filterValues[prop])) {
|
|
|
+ classString += 'arrow-blue'
|
|
|
+ }
|
|
|
+ return classString
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //设置表头-下拉-选中数据
|
|
|
+ filteredTableData () {
|
|
|
+ return this.tableData.filter(item => {
|
|
|
+ let flag = true
|
|
|
+ Object.entries(this.filterValues).forEach(([key, value]) => {
|
|
|
+ if (value !== '' && item[key] !== value) {
|
|
|
+ flag = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return flag
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getQuery()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getQuery () {
|
|
|
+ const { code, returnData, columnSet } = await Query({
|
|
|
+ id: this.dataId,
|
|
|
+ dataContent: []
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ this.tableData = returnData
|
|
|
+ this.tableCols = columnSet
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initTableData()
|
|
|
+ }, 100);
|
|
|
+ } else {
|
|
|
+ this.$message.error('获取表格数据失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initTableData () {
|
|
|
+ this.tableColsCopy = this.tableCols.filter(item => item.needShow)
|
|
|
+ this.tableDataCopy = _.cloneDeep(this.tableData)
|
|
|
+ const datas = _.cloneDeep(this.tableColsCopy)
|
|
|
+ datas.forEach(item => {
|
|
|
+ this.tableDataFilters[item.columnName] = []
|
|
|
+ if (item.needGroup) {
|
|
|
+ this.tableGroups.push(item.columnName)
|
|
|
+ }
|
|
|
+ // this.filterValues[item.columnName] = ''
|
|
|
+ });
|
|
|
+ setTableFilters(this.tableData, this.tableDataFilters)
|
|
|
+ this.tableGroup(this.tableData)
|
|
|
+ },
|
|
|
+ //分组
|
|
|
+ tableGroup (tableData) {
|
|
|
+ const spanArr = []
|
|
|
+ let pos = 0
|
|
|
+ let ifYj = this.tableGroups[0]
|
|
|
+ for (let i = 0; i < tableData.length; i++) {
|
|
|
+ if (i === 0) {
|
|
|
+ spanArr.push(1)
|
|
|
+ } else {
|
|
|
+ // this.tableGroups.forEach((item, index) => {
|
|
|
+ // ifYj += tableData[i][item] === tableData[i - 1][item]
|
|
|
+ // })
|
|
|
+ if (
|
|
|
+ tableData[i][ifYj] === tableData[i - 1][ifYj]
|
|
|
+ ) {
|
|
|
+ spanArr[pos] += 1
|
|
|
+ spanArr.push(0)
|
|
|
+ } else {
|
|
|
+ spanArr.push(1)
|
|
|
+ pos = i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.spanArr = spanArr
|
|
|
+ this.pos = pos
|
|
|
+ },
|
|
|
+ popoverShowHandler (prop) {
|
|
|
+ this.colShowFilter = prop
|
|
|
+ },
|
|
|
+ popoverHideHandler () {
|
|
|
+ this.colShowFilter = ''
|
|
|
+ },
|
|
|
+ tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (this.tableGroups.includes(column['property'])) {
|
|
|
+ const _row = this.spanArr[rowIndex]
|
|
|
+ const _col = _row > 0 ? 1 : 0
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: _col
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.data-table {
|
|
|
+ width: 100%;
|
|
|
+ ::v-deep .table {
|
|
|
+ width: 100%;
|
|
|
+ .cell {
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica, "Microsoft YaHei";
|
|
|
+ letter-spacing: 0;
|
|
|
+ }
|
|
|
+ .cell-click {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #2d7cff;
|
|
|
+ &.cell-clicked {
|
|
|
+ color: purple;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table__header-wrapper {
|
|
|
+ .cell {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ }
|
|
|
+ .has-gutter {
|
|
|
+ tr {
|
|
|
+ .bgl-huang {
|
|
|
+ background: #fcf0b1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table__body-wrapper {
|
|
|
+ tr.bgl-hui {
|
|
|
+ background: #d2d6df;
|
|
|
+ td {
|
|
|
+ background: #d2d6df;
|
|
|
+ }
|
|
|
+ &.redBorder {
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ background: #e83f82;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.filter-arrow {
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 0.3s transform;
|
|
|
+ &.arrow-active {
|
|
|
+ transform: rotate(-180deg);
|
|
|
+ }
|
|
|
+ &.arrow-blue {
|
|
|
+ color: #2d7cff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-select-dropdown__item.hover {
|
|
|
+ background: #d2d6df;
|
|
|
+}
|
|
|
+</style>
|
