|
|
@@ -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> |