yudao-dev/src/views/energy/base/energyPlcConnect/components/energyPlcParamAdd.vue

<template>
	<el-form
		ref="form"
		:rules="rules"
		label-width="100px"
		:model="form">
		<el-row>
			<el-col :span="12">
				<el-form-item
					label="能源类型"
					prop="typeId">
					<el-select
						v-model="form.typeId"
						placeholder="请选择"
						style="width: 100%"
						filterable>
						<el-option
							v-for="item in energyListType"
							:key="item.id"
							:label="item.labelName"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item
					label="参数列名"
					prop="plcParamName">
					<el-input v-model="form.plcParamName"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item
					label="参数名称"
					prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item
					label="单位"
					prop="unit">
					<el-select
						v-model="form.unit"
						placeholder="请选择"
						style="width: 100%">
						<el-option
							v-for="item in getDictDatas(DICT_TYPE.UNIT_DICT)"
							:key="item.value"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item
					label="是否采集"
					prop="collection">
					<el-switch v-model="form.collection"></el-switch>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item
					label="描述"
					prop="description">
					<el-input v-model="form.description"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
<script>
import {
	getEnergyPlcParam,
	updateEnergyPlcParam,
	createEnergyPlcParam,
} from '@/api/base/energyPlcParam';
import { getEnergyTypeListAll } from '@/api/base/energyType';
export default {
	name: 'EnergyPlcParamAdd',
	data() {
		return {
			form: {
				id: '',
				typeId: '',
				plcParamName: '',
				name: '',
				unit: '',
				description: '',
				collection: true,
				connectId: '',
			},
			energyListType: [],
			isEdit: false, //是否是编辑
			rules: {
				typeId: [
					{ required: true, message: '能源类型不能为空', trigger: 'change' },
				],
				plcParamName: [
					{ required: true, message: '参数列名不能为空', trigger: 'blur' },
				],
				name: [
					{ required: true, message: '参数名称不能为空', trigger: 'blur' },
				],
			},
		};
	},
	methods: {
		init(param) {
			this.form.connectId = param.connectId;
			getEnergyTypeListAll().then((res) => {
				this.energyListType = res.data || [];
			});
			if (param.id) {
				this.isEdit = true;
				this.form.id = param.id;
				getEnergyPlcParam(this.form.id).then((res) => {
					if (res.code === 0) {
						this.form = res.data;
						this.form.collection = this.form.collection === 0 ? false : true;
					}
				});
			} else {
				this.isEdit = false;
				this.form.id = '';
			}
		},
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.form.collection = this.form.collection === false ? 0 : 1;
					if (this.isEdit) {
						// 编辑
						updateEnergyPlcParam({ ...this.form }).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					} else {
						createEnergyPlcParam({ ...this.form }).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					}
				} else {
					return false;
				}
			});
		},
		formClear() {
			this.$refs.form.resetFields();
			this.isEdit = false;
		},
	},
};
</script>