yudao-dev/src/views/energy/base/energyPlcConnect/components/energyPlcParam.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="plcTableName"
							size="small"
							readonly
							style="width: 250px"></el-input>
					</el-form-item>
					<el-form-item label="对象">
						<el-input
							v-model="objName"
							size="small"
							readonly
							style="width: 250px"></el-input>
					</el-form-item>
					<el-form-item v-if="showBtn">
						<el-button
							type="success"
							size="small"
							plain
							@click="addNew">
							新增
						</el-button>
					</el-form-item>
				</el-form>
				<base-table
					:page="queryParams.pageNo"
					:limit="queryParams.pageSize"
					:table-props="tableProps"
					:table-data="tableData"
					:max-height="tableH">
					<method-btn
						v-if="tableBtn.length"
						slot="handleBtn"
						:width="100"
						label="操作"
						:method-list="tableBtn"
						@clickBtn="handleClick" />
				</base-table>
				<pagination
					:page.sync="queryParams.pageNo"
					:limit.sync="queryParams.pageSize"
					:total="total"
					@pagination="getList" />
			</div>
		</el-drawer>
		<!-- 新增 -->
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="centervisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel">
			<energy-plc-param-add
				ref="energyPlcParam"
				@successSubmit="successSubmit" />
		</base-dialog>
	</div>
</template>
<script>
import {
	getEnergyPlcParamPage,
	deleteEnergyPlcParam,
} from '@/api/base/energyPlcParam';
import EnergyPlcParamAdd from './energyPlcParamAdd';
import { publicFormatter } from '@/utils/dict';
const tableProps = [
	{
		prop: 'typeId',
		label: '能源类型',
		filter: publicFormatter('energy_type'),
	},
	{
		prop: 'plcParamName',
		label: '参数列名',
	},
	{
		prop: 'name',
		label: '参数名称',
	},
	{
		prop: 'unit',
		label: '单位',
		filter: publicFormatter('unit_dict'),
	},
	{
		prop: 'collection',
		label: '是否采集',
	},
	{
		prop: 'description',
		label: '描述',
	},
];
export default {
	name: 'EnergyPlcParam',
	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,
				connectId: null,
			},
			plcTableName: '',
			objName: '',
			// 弹出层标题
			addOrEditTitle: '',
			// 是否显示弹出层
			centervisible: false,
			collectionList: [
				{ value: 0, label: '否' },
				{ value: 1, label: '是' },
			],
			showBtn: true,
		};
	},
	components: { EnergyPlcParamAdd },
	created() {
		window.addEventListener('resize', () => {
			this.tableH = this.tableHeight(115);
		});
	},
	methods: {
		init(data, title) {
			this.visible = true;
			this.queryParams.connectId = data.id;
			this.plcTableName = data.plcTableName;
			this.objName = data.objName;
			this.getList();
			if (title === 'detail') {
				this.drawerTitle = '查看参数';
				this.showBtn = false;
				this.tableBtn = [];
			} else {
				this.drawerTitle = '参数绑定';
				this.showBtn = true;
				this.tableBtn = [
					{
						type: 'edit',
						btnName: '编辑',
					},
					{
						type: 'delete',
						btnName: '删除',
					},
				];
			}
		},
		getList() {
			getEnergyPlcParamPage({ ...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.addOrEditTitle = '新增';
			this.centervisible = true;
			this.$nextTick(() => {
				this.$refs.energyPlcParam.init({
					connectId: this.queryParams.connectId,
					id: '',
				});
			});
		},
		handleCancel() {
			this.$refs.energyPlcParam.formClear();
			this.centervisible = false;
			this.addOrEditTitle = '';
		},
		handleConfirm() {
			this.$refs.energyPlcParam.submitForm();
		},
		successSubmit() {
			this.handleCancel();
			this.getList();
		},
		handleClick(val) {
			console.log(val);
			switch (val.type) {
				case 'edit':
					this.addOrEditTitle = '编辑';
					this.centervisible = true;
					this.$nextTick(() => {
						this.$refs.energyPlcParam.init({
							connectId: this.queryParams.connectId,
							id: val.data.id,
						});
					});
					break;
				default:
					this.handleDelete(val.data);
			}
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.$modal
				.confirm('是否确认删除参数列名为"' + row.plcParamName + '"的数据项?')
				.then(function () {
					return deleteEnergyPlcParam(row.id);
				})
				.then(() => {
					this.queryParams.pageNo = 1;
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		closeD() {
			this.$emit('closeDrawer');
		},
	},
};
</script>
<style lang="scss" scoped>
.box {
	padding: 0 32px;
}
</style>