能源手动抄表
This commit is contained in:
@@ -1,167 +1,228 @@
|
||||
<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%;" 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'>
|
||||
<base-table border :table-props="tableProps" :table-data="tableData" :add-button-show="addButtonShow"
|
||||
@emitFun="inputChange" @emitButtonClick="emitButtonClick" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<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"
|
||||
filterable>
|
||||
<el-option
|
||||
v-for="item in this.energyTypeList"
|
||||
: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="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-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:table-name-list="tableNameList"
|
||||
@emitFun="inputChange"
|
||||
@emitButtonClick="emitButtonClick" />
|
||||
<!-- <base-table
|
||||
border
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:add-button-show="addButtonShow"
|
||||
@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 InputArea from './InputArea'
|
||||
import SelectArea from './SelectArea'
|
||||
import {
|
||||
energyQuantityManualCreate,
|
||||
energyQuantityManualUpdate,
|
||||
energyQuantityManualGet,
|
||||
} from '@/api/base/energyQuantityManual';
|
||||
import moment from 'moment';
|
||||
import AddTable from './AddTable';
|
||||
import InputArea from './InputArea';
|
||||
import SelectArea from './SelectArea';
|
||||
import { energyTableGet } from '@/api/base/energyQuantityManual';
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'tableName',
|
||||
label: '表名*',
|
||||
subcomponent: SelectArea
|
||||
},
|
||||
{
|
||||
prop: 'readingQuantity',
|
||||
label: '抄表数*',
|
||||
subcomponent: InputArea
|
||||
}
|
||||
]
|
||||
{
|
||||
prop: 'tableName',
|
||||
label: '表名*',
|
||||
subcomponent: SelectArea,
|
||||
},
|
||||
{
|
||||
prop: 'readingQuantity',
|
||||
label: '抄表数*',
|
||||
subcomponent: InputArea,
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: 'EnergyQuantityManualAdd',
|
||||
props: {
|
||||
energyTypeList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableProps,
|
||||
tableData: [],
|
||||
addButtonShow: '新增',
|
||||
form: {
|
||||
id: '',
|
||||
energyTypeId: '',
|
||||
unit: '',
|
||||
recordTime: ''
|
||||
},
|
||||
rules: {
|
||||
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
|
||||
recordTime: [{ required: true, message: '抄表日期不能为空', trigger: 'change' }]
|
||||
},
|
||||
isEdit: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(params) {
|
||||
this.form.recordTime = moment().valueOf()
|
||||
if (params.type === 'add') {
|
||||
this.isEdit = false
|
||||
} else if (params.type === 'meterReading') {
|
||||
this.isEdit = false
|
||||
this.form.energyTypeId = params.energyTypeId
|
||||
let obj = {}
|
||||
obj.tableName = params.tableName + ''
|
||||
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.form.recordTime = res.data.recordTime ? res.data.recordTime : null
|
||||
let obj = {}
|
||||
obj.tableName = res.data.tableName ? res.data.tableName + '' : ''
|
||||
obj.readingQuantity = res.data.readingQuantity
|
||||
this.tableData.push(obj)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
inputChange(val) {
|
||||
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||
},
|
||||
emitButtonClick() {
|
||||
let obj = {}
|
||||
obj.tableName = ''
|
||||
obj.readingQuantity = 0
|
||||
this.tableData.push(obj)
|
||||
},
|
||||
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) {
|
||||
console.log(item)
|
||||
if (!item.tableName || (!item.readingQuantity && item.readingQuantity !== 0)) {
|
||||
this.$modal.msgError("抄表数据有空值，请检查");
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.isEdit) {
|
||||
// 编辑
|
||||
energyQuantityManualUpdate({
|
||||
id: this.form.id,
|
||||
energyTypeId: this.form.energyTypeId,
|
||||
recordTime: this.form.recordTime,
|
||||
tableName: this.tableData[0].tableName,
|
||||
readingQuantity: this.tableData[0].readingQuantity
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit('successSubmit')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
energyQuantityManualCreate({
|
||||
energyTypeId: this.form.energyTypeId,
|
||||
recordTime: this.form.recordTime,
|
||||
data: this.tableData
|
||||
}).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 = []
|
||||
}
|
||||
}
|
||||
}
|
||||
name: 'EnergyQuantityManualAdd',
|
||||
props: {
|
||||
energyTypeList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableNameList: [], //表名list
|
||||
addButtonShow: '新增',
|
||||
form: {
|
||||
id: '',
|
||||
energyTypeId: '',
|
||||
unit: '',
|
||||
recordTime: '',
|
||||
},
|
||||
rules: {
|
||||
energyTypeId: [
|
||||
{ required: true, message: '能源类型不能为空', trigger: 'change' },
|
||||
],
|
||||
recordTime: [
|
||||
{ required: true, message: '抄表日期不能为空', trigger: 'change' },
|
||||
],
|
||||
},
|
||||
isEdit: false,
|
||||
};
|
||||
},
|
||||
components: { AddTable },
|
||||
methods: {
|
||||
init(params) {
|
||||
this.form.recordTime = moment().valueOf();
|
||||
if (params.type === 'add') {
|
||||
this.isEdit = false;
|
||||
} else if (params.type === 'meterReading') {
|
||||
this.isEdit = false;
|
||||
this.form.energyTypeId = params.energyTypeId;
|
||||
let obj = {};
|
||||
obj.tableName = params.tableName + '';
|
||||
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.form.recordTime = res.data.recordTime
|
||||
? res.data.recordTime
|
||||
: null;
|
||||
let obj = {};
|
||||
obj.tableName = res.data.tableName ? res.data.tableName + '' : '';
|
||||
obj.readingQuantity = res.data.readingQuantity;
|
||||
this.tableData.push(obj);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
inputChange(val) {
|
||||
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop];
|
||||
console.log(this.tableData);
|
||||
},
|
||||
emitButtonClick() {
|
||||
if (!this.form.energyTypeId) {
|
||||
this.$modal.msgWarning('请先选择能源类型');
|
||||
return false;
|
||||
}
|
||||
let obj = {};
|
||||
obj.tableName = '';
|
||||
obj.readingQuantity = 0;
|
||||
this.tableData.push(obj);
|
||||
},
|
||||
selEnergyType(id) {
|
||||
// 切换能源类型
|
||||
this.tableData = [];
|
||||
this.tableNameList = [];
|
||||
energyTableGet({ energyTypeId: id }).then((res) => {
|
||||
this.tableNameList = res.data.tableObjs || [];
|
||||
});
|
||||
},
|
||||
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) {
|
||||
console.log(item);
|
||||
if (
|
||||
!item.tableName ||
|
||||
(!item.readingQuantity && item.readingQuantity !== 0)
|
||||
) {
|
||||
this.$modal.msgError('抄表数据有空值，请检查');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.isEdit) {
|
||||
// 编辑
|
||||
energyQuantityManualUpdate({
|
||||
id: this.form.id,
|
||||
energyTypeId: this.form.energyTypeId,
|
||||
recordTime: this.form.recordTime,
|
||||
tableName: this.tableData[0].tableName,
|
||||
readingQuantity: this.tableData[0].readingQuantity,
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess('操作成功');
|
||||
this.$emit('successSubmit');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
energyQuantityManualCreate({
|
||||
energyTypeId: this.form.energyTypeId,
|
||||
recordTime: this.form.recordTime,
|
||||
data: this.tableData,
|
||||
}).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>
|
||||
Reference in New Issue
Block a user