更新
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="energyQuantityManualAddTable">
|
||||
<el-table
|
||||
:data="renderData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#F2F4F9',
|
||||
color: '#606266',
|
||||
}">
|
||||
<el-table-column prop="meter" label="表名*">
|
||||
<template slot-scope="scope">
|
||||
<div class="tableInner">
|
||||
<el-select
|
||||
v-model="scope.row.meter"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
:disabled="isEdit"
|
||||
@change="changeSelect(scope.row, 'meter')">
|
||||
<el-option
|
||||
v-for="item in tableNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="readingQuantity" label="抄表数*">
|
||||
<template slot-scope="scope">
|
||||
<div class="tableInner">
|
||||
<el-input-number
|
||||
v-model="scope.row.readingQuantity"
|
||||
:min="0"
|
||||
:max="999999999"
|
||||
style="width: 100%"
|
||||
:controls="false"
|
||||
@change="changeInput(scope.row, 'readingQuantity')"
|
||||
:precision="2"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button
|
||||
v-show="!isEdit"
|
||||
class="addButton"
|
||||
icon="el-icon-plus"
|
||||
@click="emitButtonClick">
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddTable',
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tableNameList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
renderData() {
|
||||
return this.tableData.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
_pageIndex: index + 1,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
emitButtonClick() {
|
||||
this.$emit('emitButtonClick');
|
||||
},
|
||||
changeInput(val1, val2) {
|
||||
val1.prop = val2;
|
||||
this.$emit('emitFun', val1);
|
||||
},
|
||||
changeSelect(val1, val2) {
|
||||
val1.prop = val2;
|
||||
this.$emit('emitFun', val1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.energyQuantityManualAddTable {
|
||||
.el-table .el-table__cell {
|
||||
padding: 0;
|
||||
height: 35px;
|
||||
}
|
||||
.addButton {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-top: none;
|
||||
color: #0b58ff;
|
||||
border-color: #ebeef5;
|
||||
border-radius: 0;
|
||||
}
|
||||
.addButton:hover {
|
||||
color: #0b58ff;
|
||||
border-color: #ebeef5;
|
||||
background-color: #fff;
|
||||
}
|
||||
.addButton:focus {
|
||||
border-color: #ebeef5;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tableInner .el-input__inner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.energyQuantityManualAddTable {
|
||||
.el-table .el-table__cell {
|
||||
padding: 0;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user