yudao-dev/src/views/energy/base/energyQuantityManual/components/energyQuantityManualAdd.vue

<template>
	<el-form
		ref="energyQuantityManualForm"
		:rules="rules"
		label-width="90px"
		:model="form">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="能源类型" prop="energyTypeId">
					<el-select
						v-model="form.energyTypeId"
						placeholder="请选择"
						style="width: 100%"
						@change="selEnergyType"
						:disabled="isEdit"
						filterable>
						<el-option
							v-for="item in this.energyTypeList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="抄表日期" prop="recordTime">
					<el-date-picker
						v-model="form.recordTime"
						type="date"
						format="yyyy-MM-dd"
						value-format="timestamp"
						placeholder="选择日期"
						style="width: 100%"></el-date-picker>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<add-table
					:table-data="tableData"
					:table-name-list="tableNameList"
					:isEdit="isEdit"
					@emitFun="inputChange"
					@emitButtonClick="emitButtonClick" />
			</el-col>
		</el-row>
	</el-form>
</template>
<script>
import {
	energyQuantityManualCreate,
	energyQuantityManualUpdate,
	energyQuantityManualGet,
} from '@/api/base/energyQuantityManual';
import moment from 'moment';
import AddTable from './AddTable';
import { energyTableGet } from '@/api/base/energyQuantityManual';
export default {
	name: 'EnergyQuantityManualAdd',
	props: {
		energyTypeList: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {
			tableData: [],
			tableNameList: [], //表名list
			addButtonShow: '新增',
			form: {
				id: '',
				energyTypeId: '',
				unit: '',
				recordTime: '',
			},
			rules: {
				energyTypeId: [
					{ required: true, message: '能源类型不能为空', trigger: 'change' },
				],
				recordTime: [
					{ required: true, message: '抄表日期不能为空', trigger: 'change' },
				],
			},
			isEdit: false,
			meterArr: [],
		};
	},
	components: { AddTable },
	methods: {
		init(params) {
			this.form.recordTime = moment().valueOf();
			this.meterArr = this.getDictDatas('meter');
			if (params.type === 'add') {
				this.isEdit = false;
			} else if (params.type === 'meterReading') {
				this.isEdit = false;
				this.form.energyTypeId = params.energyTypeId;
				this.selEnergyType(this.form.energyTypeId);
				let obj = {};
				obj.meter = params.meter + '';
				obj.readingQuantity = 0;
				this.tableData.push(obj);
			} else {
				this.isEdit = true;
				this.form.id = params.id;
				this.addButtonShow = '';
				energyQuantityManualGet({ id: this.form.id }).then((res) => {
					if (res.code === 0) {
						this.form.energyTypeId = res.data.energyTypeId;
						this.selEnergyType(this.form.energyTypeId);
						this.form.recordTime = res.data.recordTime
							? res.data.recordTime
							: null;
						let obj = {};
						obj.meter = res.data.meter ? res.data.meter + '' : '';
						obj.readingQuantity = res.data.readingQuantity;
						this.tableData.push(obj);
					}
				});
			}
		},
		inputChange(val) {
			this.tableData[val._pageIndex - 1][val.prop] = val[val.prop];
		},
		emitButtonClick() {
			if (!this.form.energyTypeId) {
				this.$modal.msgWarning('请先选择能源类型');
				return false;
			}
			let obj = {};
			obj.meter = '';
			obj.readingQuantity = 0;
			this.tableData.push(obj);
		},
		selEnergyType(id) {
			// 切换能源类型
			this.tableData = [];
			this.tableNameList = [];
			energyTableGet({ energyTypeId: id }).then((res) => {
				if (res.data.length === 0) {
					this.$modal.msgWarning(
						'当前能源类型暂无配置表名，请先到《表名配置》页面配置'
					);
					return;
				}
				res.data[0].meters.forEach((meter) => {
					this.tableNameList.push(this.meterArr.find((i) => i.value === meter));
				});
			});
		},
		submitForm() {
			this.$refs['energyQuantityManualForm'].validate((valid) => {
				if (valid) {
					// 校验表格
					if (this.tableData.length === 0) {
						this.$modal.msgError('抄表数据不能为空');
						return false;
					} else {
						for (let item of this.tableData) {
							if (
								!item.meter ||
								(!item.readingQuantity && item.readingQuantity !== 0)
							) {
								this.$modal.msgError('抄表数据有空值，请检查');
								return false;
							}
						}
					}
					if (this.isEdit) {
						// 编辑
						energyQuantityManualUpdate({
							id: this.form.id,
							recordTime: this.form.recordTime,
							readingQuantity: this.tableData[0].readingQuantity,
						}).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					} else {
						let obj = {};
						this.tableData.forEach((item) => {
							obj[item.meter] = item.readingQuantity;
						});
						energyQuantityManualCreate({
							energyTypeId: this.form.energyTypeId,
							recordTime: this.form.recordTime,
							meters: obj,
						}).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					}
				} else {
					return false;
				}
			});
		},
		formClear() {
			this.$refs.energyQuantityManualForm.resetFields();
			this.form.unit = '';
			this.isEdit = false;
			this.addButtonShow = '新增';
			this.tableData = [];
		},
	},
};
</script>