基于 ElementUi框架的 table组件制作的 报表功能
<template>
<!-- 月周计划报表 -->
<div class="monthPlanForm">
<el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column v-for="(it, i) in tableCol" :key="i" :label="it.name">
<el-table-column v-for="(child, i) in it.children" :key="i" :prop="child.value" :label="child.name" width="120">
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
tableCol: {
type: Array,
default() {
return [];
// return [
// {
// name: '',
// children: [
// {
// name: '地市',
// },
// {
// name: '月计划总整治量',
// },
// {
// name: '光缆',
// },
// ],
// },
// {
// name: '地市月进度',
// children: [
// {
// name: '计划整治数',
// },
// {
// name: '完成整治数',
// },
// {
// name: '整治完成率',
// },
// ],
// },
// {
// name: '代维月进度',
// children: [
// {
// name: '代维单位',
// },
// {
// name: '计划整治数',
// },
// {
// name: '完成整治数',
// },
// {
// name: '整治完成率',
// },
// ],
// },
// {
// name: '代维回退率',
// children: [
// {
// name: '回退作业项数',
// },
// {
// name: '提交作业项数',
// },
// {
// name: '回退率',
// },
// ],
// },
// {
// name: '周进展',
// children: [
// {
// name: '第一周进展',
// },
// {
// name: '第二周进展',
// },
// {
// name: '第三周进展',
// },
// {
// name: '第四周进展',
// },
// ],
// },
// ];
},
},
tableData: {
type: Array,
default() {
return [];
},
},
arraySpanMethod: {
type: Array,
default: () => [],
},
},
watch: {
tableData() {
this.init();
},
},
data() {
return {
filterData: {},
};
},
mounted() {
this.init();
},
methods: {
init() {
this.filterData = [];
this.arraySpanMethod.forEach((e, i) => {
this.handletableData(this.tableData.concat(), i);
});
},
spanMethod({ row, column, rowIndex, columnIndex }) {
const { property } = column;
const filterData = this.filterData[property];
if (!filterData) {
return {
rowspan: 1,
colspan: 1,
};
}
const count = filterData[rowIndex];
if (count) {
return {
rowspan: count,
colspan: 1,
};
}
return {
rowspan: 0,
colspan: 0,
};
},
spanMethod1({ row, column, rowIndex, columnIndex }) {
let { property } = column;
const ary = this.arraySpanMethod.find((e) => e.name === property);
if (ary) {
property = ary.to || property;
const value = this.tableData[rowIndex][property];
for (let i = 1; i < 999; i++) {
// if (!this.tableData[rowIndex + i]) {
// return {
// rowspan: i,
// colspan: 1,
// };
// }
if (this.tableData[rowIndex - i] && value === this.tableData[rowIndex - i][property]) {
return {
rowspan: 0,
colspan: 0,
};
}
if (!this.tableData[rowIndex + i] || value !== this.tableData[rowIndex + i][property]) {
return {
rowspan: i,
colspan: 1,
};
}
}
}
return {
rowspan: 1,
colspan: 1,
};
},
// 处理数据
handletableData(data, arraySpanMethodIndex = 0) {
const span = this.arraySpanMethod[arraySpanMethodIndex];
if (span) {
const { from } = span;
const spanName = span.name;
const filed = span.to || span.name;
// data.sort((a, b) => a[spanName] - b[spanName]);
const date = this.filterData;
let oldName = '';
const setName = [];
let oldIndex = 0;
let fromString = null;
data.forEach((element, i) => {
if (oldName === element[filed] && (!fromString || fromString === element[from])) {
date[spanName][oldIndex]++;
} else {
if (!date[spanName]) {
date[spanName] = {};
}
date[spanName][i] = 1;
oldIndex = i;
if (from) {
fromString = element[from];
}
oldName = element[filed];
setName.push(oldName);
}
});
}
},
},
};
</script>
<style></style>
调用方式为
<template>
<!-- 测试任务详情 -->
<div class="queryComplanyTaskTotal">
<FormItem ref="supplyFormItem" :layout="layout" :form.sync="form">
<template slot="canshu">
<search-form ref="searchForm" slot="searchBox" :searchItems="searchItems" @onSearch="onSearch" />
</template>
<template slot="table">
<month-plan-form
:tableCol="tableCol"
:tableData="tableData"
:arraySpanMethod="arraySpanMethod"
></month-plan-form>
</template>
</FormItem>
</div>
</template>
<script>
import MonthPlanForm from 'components/business/reportForms/monthPlanForm.vue';
import { queryComplanyTaskTotal } from '@/api/router/renovate';
import SearchForm from '@/components/searchForm/searchForm.vue';
import FormItem from '@/components/formItem';
export default {
components: {
MonthPlanForm,
SearchForm,
FormItem,
},
data() {
return {
form: {},
layout: [
{
title: '地市标准化整治任务进度（整治项）',
render: 'canshu',
},
{
title: '',
render: 'table',
},
],
searchItems: [
{
type: 'dataPicker',
label: '年份',
initValue: '',
props: {
type: 'month',
format: 'yyyy-MM',
fieldName: 'year',
placeholder: '选择年份',
minWidth: '236px',
},
},
// {
// type: 'input',
// label: '标题',
// initValue: '',
// props: {
// fieldName: 'title',
// minWidth: '236px',
// },
// },
// {
// type: 'select',
// label: '任务状态',
// initValue: '',
// props: {
// fieldName: 'status',
// options: this.common().orderCompanyViewStatus,
// minWidth: '178px',
// },
// },
],
tableCol: [
{
name: '',
children: [
{
name: '地市',
value: 'cityName',
},
{
name: '月计划总整治量',
value: 'cityPlanNum',
},
{
name: '整治类型',
value: 'subCategory',
},
{
name: '整治内容',
value: 'middleCategory',
},
],
},
{
name: '地市月进度',
children: [
{
name: '计划整治数',
value: 'projectPlanNum',
},
{
name: '完成整治数',
value: 'projectFinishNum',
},
{
name: '整治完成率',
value: 'projectRate',
},
],
},
{
name: '代维月进度',
children: [
{
name: '代维单位',
value: 'complanyName',
},
{
name: '计划整治数',
value: 'complanyPlanNum',
},
{
name: '完成整治数',
value: 'complanyFinishNum',
},
{
name: '整治完成率',
value: 'complanyRate',
},
],
},
{
name: '代维回退率',
children: [
{
name: '回退作业项数',
value: 'companyFallbackNum',
},
{
name: '提交作业项数',
value: 'complanySubmitToNum',
},
{
name: '回退率',
value: 'complanyFallbackRate',
},
],
},
{
name: '周进展',
children: [
{
name: '第一周进展',
value: 'firstWeek',
},
{
name: '第二周进展',
value: 'secondWeek',
},
{
name: '第三周进展',
value: 'thirdWeek',
},
{
name: '第四周进展',
value: 'fourthWeek',
},
{
name: '第五周进展',
value: 'fifthWeek',
},
{
name: '第六周进展',
value: 'sixthWeek',
},
],
},
],
tableData: [],
arraySpanMethod: [
{ name: 'cityName' },
{
name: 'cityPlanNum',
to: 'cityName',
},
{
name: 'subCategory',
from: 'cityName',
},
{
name: 'middleCategory',
from: 'cityName',
},
{
name: 'projectPlanNum',
to: 'middleCategory',
},
{
name: 'projectFinishNum',
to: 'middleCategory',
},
{
name: 'projectRate',
to: 'middleCategory',
},
],
param: {
data: {
year: 2023,
month: 10,
// cityId: '',
// subCategory: '',
// middleCategory: '',
},
pageNo: 1,
pageSize: 100,
},
};
},
mounted() {
this.init();
},
methods: {
init() {
this.getData().then((res) => {
if (Number(res.code) === 200) {
this.tableData = res.data.data;
}
});
},
getData() {
return queryComplanyTaskTotal(this.param);
},
onSearch(form) {
const time = form.year?.split('-');
if (time) {
this.param.data.year = time[0];
this.param.data.month = time[1];
} else {
this.param.data.year = '2023';
this.param.data.month = '10';
}
this.init();
},
},
};
</script>
<style lang="less">
.test {
height: 100%;
}
</style>
浙公网安备 33010602011771号