jn_manager/src/views/realDatabaseConfig/components/TableEdit.vue

<template>
	<el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" @close="close">
		<el-form ref="form" :model="form" :rules="rules">
			<div class="lists">
				<el-form-item label="id" prop="id">
					<el-input class="inputs" v-model="form.id" autocomplete="off" :disabled="!idAdd?true:false"></el-input>
				</el-form-item>
				<el-form-item label="服务姓" prop="surname">
					<el-input class="inputs" v-model.trim="form.surname" autocomplete="off"></el-input>
				</el-form-item>
			</div>
			<div class="lists">
				<el-form-item label="服务名历史" prop="namehist">
					<el-input class="inputs" v-model="form.namehist" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="服务名配置" prop="namecmcfg">
					<el-input class="inputs" v-model="form.namecmcfg" autocomplete="off"></el-input>
				</el-form-item>
			</div>
			<div class="lists">
				<el-form-item label="服务名实时" prop="namerts">
					<el-input class="inputs" v-model="form.namerts" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="点标签" prop="label">
					<el-input class="inputs" v-model="form.label" autocomplete="off"></el-input>
				</el-form-item>
			</div>
			<div class="lists">
				<el-form-item label="风场编号" prop="windpowerstationid">
					<el-select v-model="form.windpowerstationid" placeholder="请选择" clearable>
						<el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="端口历史" prop="porthist">
					<el-input class="inputs" v-model.trim="form.porthist" autocomplete="off"></el-input>
				</el-form-item>
			</div>
			<div class="lists">
				<el-form-item label="端口配置" prop="portcmcfg">
					<el-input class="inputs" v-model.trim="form.portcmcfg" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="端口实时" prop="portrts">
					<el-input class="inputs" v-model.trim="form.portrts" autocomplete="off"></el-input>
				</el-form-item>
			</div>
			<div class="lists">
				<el-form-item label="地址历史" prop="iphist">
					<el-input class="inputs" v-model.trim="form.iphist" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="地址配置" prop="ipcmcfg">
					<el-input class="inputs" v-model.trim="form.ipcmcfg" autocomplete="off"></el-input>
				</el-form-item>
			</div>
			<div class="lists">
				<el-form-item label="地址实时" prop="iprts">
					<el-input class="inputs" v-model.trim="form.iprts" autocomplete="off"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="save">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import api from '@/api/realtimeDatabaseConfiguration'
import dayjs from "dayjs";
export default {
	name: 'TableEdit',
	props: {
		options: {
			type: Array,
			default: []
		},
		stationList: {
			type: Array,
			default: []
		},
	},
	data() {
		return {
			form: {
				id: '',
				surname: '',
				namehist: '',
				namecmcfg: '',
				namerts: '',
				label: '',
				windpowerstationid: '',
				porthist: '',
				portcmcfg: '',
				portrts: '',
				iphist: '',
				ipcmcfg: '',
				iprts: '',
			},
			rules: {
				id: [{ required: true, trigger: 'blur', message: '请输入' }],
				surname: [{ required: true, trigger: 'blur', message: '请输入' }],
				namehist: [{ required: true, trigger: 'blur', message: '请输入' }],
				namecmcfg: [{ required: true, trigger: 'blur', message: '请输入' }],
				namerts: [{ required: true, trigger: 'blur', message: '请输入' }],
				label: [{ required: true, trigger: 'blur', message: '请输入' }],
				windpowerstationid: [{ required: true, trigger: 'blur', message: '请输入' }],
				porthist: [{ required: true, trigger: 'blur', message: '请输入' }],
				portcmcfg: [{ required: true, trigger: 'blur', message: '请输入' }],
				portrts: [{ required: true, trigger: 'blur', message: '请输入' }],
				iphist: [{ required: true, trigger: 'blur', message: '请输入' }],
				ipcmcfg: [{ required: true, trigger: 'blur', message: '请输入' }],
				iprts: [{ required: true, trigger: 'blur', message: '请输入' }],
			},
			title: '',
			dialogFormVisible: false,
			idAdd: true,
		}
	},
	created() { },
	methods: {
		showEdit(row) {
			if (!row) {
				this.title = '添加'
				this.idAdd = true
			} else {
				this.title = '编辑'
				this.idAdd = false
				this.form = Object.assign({}, row)
			}
			this.dialogFormVisible = true
		},
		close() {
			this.$refs['form'].resetFields()
			this.form = this.$options.data().form
			this.dialogFormVisible = false
			this.$emit('fetch-data')
		},
		save() {
			this.$refs['form'].validate(async (valid) => {
				if (valid) {
					api.addDatabase(this.form).then(res => {
						if (res.data) {
							this.$message({
								type: 'success',
								message: '添加成功!'
							});
							this.$emit('save-success');
							this.dialogFormVisible = false
						}
					})
				} else {
					return false
				}
			})
		},
		handleChange() {
		},
		onBlur(val, param) {
			if (typeof (this.form[param]) !== 'number') {
				this.form[param] = val.replace(/[^0-9]/ig, "")
			}
		},
	},
}
</script>
<style lang="less" scoped>
.inputs {
	width: 200px;
}

.lists {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
</style>