yudao-dev/src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue

<template>
	<div>
		<el-drawer
			:title="drawerTitle"
			:visible.sync="visible"
			size="70%"
			@close="closeD"
			:show-close="false">
			<div class="box">
				<el-form :inline="true">
					<el-form-item label="方案名称">
						<el-input
							v-model="name"
							size="small"
							readonly></el-input>
					</el-form-item>
					<el-form-item label="能源类型">
						<el-input
							v-model="energyTypeLabel"
							size="small"
							readonly></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="success"
							size="small"
							v-if="showBtn"
							plain
							@click="addNew">
							新增
						</el-button>
						<el-button
							type="danger"
							size="small"
							v-if="showBtn"
							plain
							@click="deleteAll">
							批量删除
						</el-button>
					</el-form-item>
				</el-form>
				<base-table
					:page="queryParams.pageNo"
					:limit="queryParams.pageSize"
					:table-props="tableProps"
					:table-data="tableData"
					:max-height="tableH"
					:selectWidth="55"
					@selection-change="selectChange">
					<method-btn
						v-if="tableBtn.length"
						slot="handleBtn"
						:width="80"
						label="操作"
						:method-list="tableBtn"
						@clickBtn="handleClick" />
				</base-table>
				<pagination
					:page.sync="queryParams.pageNo"
					:limit.sync="queryParams.pageSize"
					:total="total"
					@pagination="getList" />
			</div>
		</el-drawer>
		<!-- 新增 -->
		<energy-statistics-det-add
			ref="energyStatistics"
			@closeDet="closeDet" />
	</div>
</template>
<script>
import {
	getEnergyStatisticsDetPage,
	deleteEnergyStatisticsDet,
	deleteMany,
} from '@/api/monitoring/energyStatisticsDet';
import EnergyStatisticsDetAdd from './energyStatisticsDetAdd';
import { publicFormatter } from '@/utils/dict';
const tableProps = [
	{
		prop: 'objName',
		label: '所属对象',
	},
	{
		prop: 'objCode',
		label: '对象编码',
	},
	{
		prop: 'paramName',
		label: '参数名称',
	},
	{
		prop: 'unit',
		label: '单位',
		filter: publicFormatter('unit_dict'),
	},
	{
		prop: 'desc',
		label: '描述',
	},
];
export default {
	name: 'EnergyStatisticsDet',
	props: {
		energyTypeList: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {
			visible: false,
			drawerTitle: '',
			tableProps,
			tableData: [],
			tableBtn: [],
			tableH: this.tableHeight(115),
			total: 0,
			queryParams: {
				pageNo: 1,
				pageSize: 30,
				statisticsId: null,
			},
			name: '',
			energyTypeLabel: '',
			energyTypeId: '',
			// 弹出层标题
			addOrEditTitle: '',
			// 是否显示弹出层
			centervisible: false,
			collectionList: [
				{ value: 0, label: '否' },
				{ value: 1, label: '是' },
			],
			showBtn: true,
			selectedList: [],
		};
	},
	components: { EnergyStatisticsDetAdd },
	created() {
		window.addEventListener('resize', () => {
			this.tableH = this.tableHeight(115);
		});
	},
	methods: {
		init(data, title) {
			this.visible = true;
			this.queryParams.statisticsId = data.id;
			this.name = data.name;
			this.energyTypeLabel = data.energyTypeLabel;
			this.energyTypeId = data.energyTypeId;
			this.getList();
			if (title === 'detail') {
				this.drawerTitle = '查看参数';
				this.showBtn = false;
				this.tableBtn = [];
			} else {
				this.drawerTitle = '参数绑定';
				this.showBtn = true;
				this.tableBtn = [
					{
						type: 'delete',
						btnName: '删除',
					},
				];
			}
		},
		getList() {
			console.log(this.queryParams);
			getEnergyStatisticsDetPage({ ...this.queryParams }).then((res) => {
				let arr = res.data.list || [];
				arr &&
					arr.map((item) => {
						this.collectionList.map((i) => {
							if (item.collection === i.value) {
								item.collection = i.label;
							}
						});
						this.energyTypeList.map((j) => {
							if (item.typeId === j.id) {
								item.typeId = j.name;
							}
						});
					});
				this.tableData = arr;
				this.total = res.data.total;
			});
		},
		// 新增
		addNew() {
			this.$nextTick(() => {
				this.$refs.energyStatistics.init({
					statisticsId: this.queryParams.statisticsId,
					energyTypeId: this.energyTypeId,
				});
			});
		},
		selectChange(val) {
			console.log(val);
			this.selectedList = val;
		},
		// 批量删除
		deleteAll() {
			let arr = [];
			if (this.selectedList.length === 0) {
				this.$modal.msgWarning('请选勾选数据');
				return false;
			} else {
				this.selectedList.map((item) => {
					arr.push(item.id);
				});
			}
			this.$modal
				.confirm('是否确认删除所有勾选的数据项?')
				.then(function () {
					return deleteMany(arr);
				})
				.then(() => {
					this.queryParams.pageNo = 1;
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		handleCancel() {
			this.$refs.energyStatistics.formClear();
			this.centervisible = false;
			this.addOrEditTitle = '';
		},
		handleConfirm() {
			this.$refs.energyStatistics.submitForm();
		},
		successSubmit() {
			this.handleCancel();
			this.getList();
		},
		handleClick(val) {
			this.handleDelete(val.data);
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.$modal
				.confirm('是否确认删除参数列名为"' + row.paramName + '"的数据项?')
				.then(function () {
					return deleteEnergyStatisticsDet(row.id);
				})
				.then(() => {
					this.queryParams.pageNo = 1;
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		closeD() {
			this.$emit('closeDrawer');
		},
		closeDet() {
			// 关闭新增框
			this.getList();
		},
	},
};
</script>
<style lang="scss" scoped>
.box {
	padding: 0 32px;
}
</style>