jn_manager/src/views/stationConfiguration/projectstudy/index.vue

<template>
	<div class="table-container">
		<vab-query-form>
			<vab-query-form-left-panel>
				<el-form ref="form" :model="queryForm" :inline="true" @submit.native.prevent>
					<el-form-item>
						<el-cascader class="cascaders" v-model="cascaderSel" :options="options"
							:props="{ checkStrictly: true, label: 'name', value: 'id' }" clearable>
						</el-cascader>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary" native-type="submit" @click="handleQuery">
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</vab-query-form-left-panel>
			<vab-query-form-right-panel>
				<el-button icon="el-icon-plus" type="primary" @click="handleAdd">
					添加
				</el-button>
				<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
					删除
				</el-button>
			</vab-query-form-right-panel>
		</vab-query-form>

		<el-table ref="tableSort" v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText"
			:height="height" @selection-change="setSelectRows" @sort-change="tableSortChange" show-summary
			:summary-method="getSummaries">
			<el-table-column show-overflow-tooltip type="selection" width="65"></el-table-column>
			<el-table-column show-overflow-tooltip label="风场编号" prop="windpower" width="200" align="center" sortable>
			</el-table-column>
			<el-table-column show-overflow-tooltip label="工程编号" prop="projectid" align="center" sortable></el-table-column>
			<el-table-column show-overflow-tooltip label="计划发电量" prop="generatingcapacity" align="center" sortable>
			</el-table-column>
			<el-table-column show-overflow-tooltip label="计划停运小时" prop="outagehours" align="center" sortable>
			</el-table-column>
			<el-table-column show-overflow-tooltip label="年份" prop="year" align="center" sortable></el-table-column>
			<el-table-column show-overflow-tooltip label="月份" prop="month" align="center" sortable></el-table-column>
			<el-table-column show-overflow-tooltip label="操作" width="180px">
				<template #default="{ row }">
					<el-button type="text" @click="handleEdit(row)">编辑</el-button>
					<el-button type="text" @click="handleDelete(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :background="background" :current-page="queryForm.pageNo" :layout="layout"
			:page-size="queryForm.pageSize" :total="total" @current-change="handleCurrentChange"
			@size-change="handleSizeChange"></el-pagination>
		<table-edit ref="edit" :options="options" @handleSuccess="fetchData"></table-edit>
	</div>
</template>

<script>
import api from '@/api/table'
import TableEdit from './components/TableEdit'
export default {
	name: 'ComprehensiveTable',
	components: {
		TableEdit
	},
	filters: {
		statusFilter(status) {
			const statusMap = {
				published: 'success',
				draft: 'gray',
				deleted: 'danger',
			}
			return statusMap[status]
		},
	},
	data() {
		return {
			imgShow: true,
			list: [],
			cascaderSel: [],
			imageList: [],
			listLoading: true,
			layout: 'total, sizes, prev, pager, next, jumper',
			total: 0,
			background: true,
			selectRows: '',
			elementLoadingText: '正在加载...',
			queryForm: {
				pageNo: 1,
				pageSize: 20,
				title: '',
			},
			options: []
		}
	},
	computed: {
		height() {
			return this.$baseTableHeight() + 50
		},
	},
	created() {
		this.getStation()
		this.fetchData()
	},
	beforeDestroy() { },
	mounted() { },
	methods: {
		getStation() {
			api.wtls().then(res => {
				if (res.data) {
					this.options = res.data
				}
			})
		},
		tableSortChange() {
			const imageList = []
			this.$refs.tableSort.tableData.forEach((item, index) => {
				imageList.push(item.img)
			})
			this.imageList = imageList
		},
		setSelectRows(val) {
			this.selectRows = val
		},
		handleAdd() {
			this.$refs['edit'].showEdit()
		},
		handleEdit(row) {
			this.$refs['edit'].showEdit(row)
		},
		handleDelete(row) {
			if (row.id) {
				this.$baseConfirm('你确定要删除当前项吗', null, async () => {
					api.deleteProjectstudy({
						id: row.id
					}).then(res => {
						if (res.code == 200) {
							this.$baseMessage('删除成功', 'success')
							this.fetchData()
						}
					})
				})
			} else {
				if (this.selectRows.length > 0) {
					const ids = this.selectRows.map((item) => item.id).join()
					this.$baseConfirm('你确定要删除选中项吗', null, async () => {
						api.deleteProjectstudy({
							id: ids
						}).then(res => {
							if (res.code == 200) {
								this.$baseMessage('删除成功', 'success')
								this.fetchData()
							}
						})
					})
				} else {
					this.$baseMessage('未选中任何行', 'error')
					return false
				}
			}
		},
		handleSizeChange(val) {
			this.queryForm.pageSize = val
			this.fetchData()
		},
		handleCurrentChange(val) {
			this.queryForm.pageNo = val
			this.fetchData()
		},
		handleQuery() {
			this.queryForm.pageNo = 1
			this.fetchData()
		},
		async fetchData() {
			this.listLoading = true
			api.projectstudy({
				pagenum: this.queryForm.pageNo,
				pagesize: this.queryForm.pageSize,
			}).then(res => {
				if (res.data) {
					this.total = res.data.total
					this.list = res.data.records
					setTimeout(() => {
						this.listLoading = false
					}, 500)
				}
			})

		},
		testMessage() {
			this.$baseMessage('test1', 'success')
		},
		testALert() {
			this.$baseAlert('11')
			this.$baseAlert('11', '自定义标题', () => {
				/* 可以写回调; */
			})
			this.$baseAlert('11', null, () => {
				/* 可以写回调; */
			})
		},
		testConfirm() {
			this.$baseConfirm(
				'你确定要执行该操作?',
				null,
				() => {
					/* 可以写回调; */
				},
				() => {
					/* 可以写回调; */
				}
			)
		},
		testNotify() {
			this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
		},
		getSummaries(param) {
			console.log(11111);
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '总计';
					return;
				}
				else if (index === 3) {
					let totle = 0
					data.forEach(item => {
						totle = totle + Number(item.generatingcapacity)
					})
					sums[index] = totle;
				}
				else if (index === 4) {
					let totle = 0
					data.forEach(item => {
						totle = totle + Number(item.outagehours)
					})
					sums[index] = totle;
				} else {
					sums[index] = '--';
				}
			});
			return sums;
		}
	},
}
</script>
<style lang="less" scoped>
.cascaders {
	width: 300px;
}
</style>