加入 抄表Excel导入功能

This commit is contained in:
java110 2020-11-22 16:25:56 +08:00
parent 4e9ba4525d
commit cdc841baf1
7 changed files with 257 additions and 13 deletions

View File

@ -10,7 +10,7 @@
<label class="col-sm-2 col-form-label">费用类型</label>
<div class="col-sm-10">
<select class="custom-select" v-model="addMeterWaterInfo.feeTypeCd"
@change="_changeFeeTypeCd(addMeterWaterInfo.feeTypeCd)">
@change="_changeAddMeterWaterFeeTypeCd(addMeterWaterInfo.feeTypeCd)">
<option selected disabled value="">必填,请选择费用类型</option>
<option value="888800010015">水费</option>
<option value="888800010016">电费</option>

View File

@ -222,7 +222,7 @@
});
},
_changeFeeTypeCd: function (_feeTypeCd) {
_changeAddMeterWaterFeeTypeCd: function (_feeTypeCd) {
var param = {
params: {

View File

@ -0,0 +1,72 @@
<div id="importMeterWaterFeeModel" class="modal fade" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<h3 class="m-t-none m-b ">抄表导入</h3>
<div class="ibox-content">
<div>
<div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">费用类型</label>
<div class="col-sm-10">
<select class="custom-select" v-model="importMeterWaterFeeInfo.feeTypeCd"
@change="_changeImportMeterWaterFeeTypeCd(importMeterWaterFeeInfo.feeTypeCd)">
<option selected disabled value="">必填,请选择费用类型</option>
<option value="888800010015">水费</option>
<option value="888800010016">电费</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">收费项目</label>
<div class="col-sm-10">
<select class="custom-select" v-model="importMeterWaterFeeInfo.configId">
<option selected disabled value="">必填,请选择收费项目</option>
<option v-for="(item,index) in importMeterWaterFeeInfo.feeConfigs" :key="index"
v-bind:value="item.configId">{{item.feeName}}
</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">选择文件</label>
<div class="col-sm-10">
<div class="custom-file">
<input id="excelTemplate" ref="excelTemplate" type="file"
class="custom-file-input form-control" name="excelTemplate"
v-on:change="getExcelTemplate($event)" accept=".xls,.xlsx">
<label for="excelTemplate"
class="custom-file-label">{{importMeterWaterFeeInfo.excelTemplate==''?'必填,请选择数据文件':importMeterWaterFeeInfo.excelTemplate.name}}</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">下载模板</label>
<div class="col-sm-10">
请先下载
<a href="javascript:void(0)"
@click="_exportMeterWaterFeeTemplate()"
>导入模板
</a>
准备数据后,上传导入
</div>
</div>
<div class="ibox-content">
<button class="btn btn-primary float-right" type="button" v-on:click="_importMeterWaterData()"><i
class="fa fa-check"></i>&nbsp;导入
</button>
<button type="button" class="btn btn-warning float-right" style="margin-right:20px;"
data-dismiss="modal">取消
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,175 @@
(function (vc) {
vc.extends({
data: {
importMeterWaterFeeInfo: {
communityId: vc.getCurrentCommunity().communityId,
excelTemplate: '',
configId: '',
feeConfigs: [],
feeTypeCd:''
}
},
_initMethod: function () {
vc.getDict('pay_fee_config', "fee_type_cd", function (_data) {
vc.component.importMeterWaterFeeInfo.feeTypeCds = _data;
});
},
_initEvent: function () {
vc.on('importMeterWaterFee', 'openImportMeterWaterFeeModal',
function (_room) {
$('#importMeterWaterFeeModel').modal('show');
});
},
methods: {
importMeterWaterFeeValidate() {
return vc.validate.validate({
importMeterWaterFeeInfo: vc.component.importMeterWaterFeeInfo
},
{
'importMeterWaterFeeInfo.communityId': [{
limit: "required",
param: "",
errInfo: "数据异常还没有入驻小区"
}
],
'importMeterWaterFeeInfo.configId': [{
limit: "required",
param: "",
errInfo: "费用类型不能为空"
}
],
'importMeterWaterFeeInfo.excelTemplate': [
{
limit: "required",
param: "",
errInfo: "文件不能为空"
}
]
});
},
_importMeterWaterData: function () {
if (!vc.component.importMeterWaterFeeValidate()) {
vc.toast(vc.validate.errInfo);
return;
}
// 导入数据
if (!vc.component.checkFileType(vc.component.importMeterWaterFeeInfo.excelTemplate.name.split('.')[1])) {
vc.toast('不是有效的Excel格式');
return;
}
if (!vc.component.checkFileSize(vc.component.importMeterWaterFeeInfo.excelTemplate.size)) {
vc.toast('Excel文件大小不能超过2M');
return;
}
var param = new FormData();
param.append("uploadFile", vc.component.importMeterWaterFeeInfo.excelTemplate);
param.append('communityId', vc.component.importMeterWaterFeeInfo.communityId);
param.append('feeTypeCd', vc.component.importMeterWaterFeeInfo.feeTypeCd);
vc.http.upload(
'importMeterWaterFee',
'importData',
param,
{
emulateJSON: true,
//添加请求头
headers: {
"Content-Type": "multipart/form-data"
}
},
function (json, res) {
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
if (res.status == 200) {
//关闭model
vc.toast("处理成功");
$('#importMeterWaterFeeModel').modal('hide');
vc.jumpToPage('/admin.html#/pages/property/listOwner')
vc.emit('roomFeeImport', 'listFee', {});
return;
}
vc.toast(json, 10000);
},
function (errInfo, error) {
console.log('请求失败处理');
vc.toast(errInfo, 10000);
});
},
_exportMeterWaterFeeTemplate: function () {
let _meterType = '1010';
let _feeTypeCd = $that.importMeterWaterFeeInfo.feeTypeCd;
if(!vc.notNull(_feeTypeCd)){
vc.toast('请选择费用类型');
return ;
}
if(_feeTypeCd == '888800010015'){
_meterType = '2020';
}
vc.jumpToPage('/callComponent/importMeterWaterFee/exportData?communityId=' + vc.getCurrentCommunity().communityId+'&meterType='+_meterType);
},
clearAddFeeConfigInfo: function () {
vc.component.importMeterWaterFeeInfo = {
communityId: vc.getCurrentCommunity().communityId,
excelTemplate: '',
configId: '',
feeConfigs: [],
feeTypeCd:''
};
},
getExcelTemplate: function (e) {
//console.log("getExcelTemplate 开始调用")
vc.component.importMeterWaterFeeInfo.excelTemplate = e.target.files[0];
},
checkFileType: function (fileType) {
const acceptTypes = ['xlsx'];
for (var i = 0; i < acceptTypes.length; i++) {
if (fileType === acceptTypes[i]) {
return true;
}
}
return false;
},
checkFileSize: function (fileSize) {
//2M
const MAX_SIZE = 2 * 1024 * 1024;
if (fileSize > MAX_SIZE) {
return false;
}
return true;
},
_changeImportMeterWaterFeeTypeCd: function (_feeTypeCd) {
var param = {
params: {
page: 1,
row: 20,
communityId: vc.getCurrentCommunity().communityId,
feeTypeCd: _feeTypeCd,
isDefault: 'F',
valid: '1'
}
};
//发送get请求
vc.http.get('roomCreateFeeAdd', 'list', param,
function (json, res) {
var _feeConfigManageInfo = JSON.parse(json);
vc.component.importMeterWaterFeeInfo.feeConfigs = _feeConfigManageInfo.feeConfigs;
},
function (errInfo, error) {
console.log('请求失败处理');
});
},
}
});
})(window.vc);

View File

@ -53,6 +53,10 @@
<i class="glyphicon glyphicon-plus"></i>
抄表
</button>
<button type="button" class="btn btn-primary btn-sm" style="margin-left:10px"
v-on:click="_openMeterWaterImport(null,true)">
抄表导入
</button>
</div>
</div>
<div class="ibox-content">
@ -69,13 +73,10 @@
<th class="text-center">本期读表时间</th>
<th class="text-center">创建时间</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="meterWater in meterWaterManageInfo.meterWaters">
<!-- <td class="text-center">{{meterWater.waterId}}</td> -->
<td class="text-center">{{meterWater.meterType == '1010'?'电表':'水表'}}</td>
<td class="text-center">{{meterWater.objName}}</td>
<td class="text-center">{{meterWater.preDegrees}}</td>
@ -93,7 +94,6 @@
v-on:click="_openDeleteMeterWaterModel(meterWater)">删除</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
@ -110,11 +110,9 @@
</div>
</div>
</div>
<vc:create path="property/addMeterWater" callBackListener="" callBackFunction=""></vc:create>
<vc:create path="property/editMeterWater"></vc:create>
<vc:create path="property/deleteMeterWater"></vc:create>
<vc:create path="property/importMeterWaterFee"></vc:create>
</div>

View File

@ -78,9 +78,10 @@
} else {
vc.component.meterWaterManageInfo.moreCondition = true;
}
},
_openMeterWaterImport:function(){
vc.emit('importMeterWaterFee', 'openImportMeterWaterFeeModal',{});
}
}
});
})(window.vc);

View File

@ -65,8 +65,6 @@
<th class="text-center">创建时间</th>
<th class="text-center">备注</th>
<th class="text-right">操作</th>
</tr>
</thead>
<tbody>