elink-star
/
epmet-work-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

安检管理页面

feature
mk 1 year ago
parent
911efa3681
commit
188c534f17
3 changed files with 915 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 426
      src/views/modules/resourceManagement/enterprise/addForm.vue
  2. 489
      src/views/modules/resourceManagement/enterprise/index.vue
  3. 0
      src/views/modules/resourceManagement/enterprise/patrolRecord.vue

426
src/views/modules/resourceManagement/enterprise/addForm.vue
View File

@ -0,0 +1,426 @@
<template>
<el-dialog title="提示" :visible.sync="dialogVisible" width="1370px" :before-close="handleCancle">
<span slot="title">
<span v-if="pageType == 'add'">新增</span>
<span v-if="pageType == 'edit'">修改</span>
<span v-if="pageType == 'view'">查看</span>
</span>
<div>
<div class="dialog-h-content scroll-h">
<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" :label-width="'90px'" v-if="pageType != 'view'">
<el-row>
<el-col :span="6">
<el-form-item label="设备名称" prop="equipmentName">
<el-input v-model.trim="formData.equipmentName" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备编号" prop="equipmentNum">
<el-input v-model.trim="formData.equipmentNum" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="负责人" prop="principalName">
<el-input v-model.trim="formData.principalName" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话" prop="contactNum">
<el-input v-model.trim="formData.contactNum" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="所处位置" prop="location" style="display: block">
<el-select
v-model.trim="formData.location"
:disabled="disabled"
filterable
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
@keyup.enter.native="remoteMethod(formData.location)"
>
<el-option
v-for="(item, index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div id="app_event" class="div_map"></div>
</el-form>
<el-form :inline="false" :model="formData" ref="form" :label-width="'90px'" v-if="pageType == 'view'">
<el-row>
<el-col :span="6">
<el-form-item label="设备名称" prop="equipmentName">{{ formData.equipmentName }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备编号" prop="equipmentNum">{{ formData.equipmentNum }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="负责人" prop="principalName">{{ formData.principalName }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话" prop="contactNum">{{ formData.contactNum }}</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="场所地址" prop="location" style="display: block">{{ formData.location }}</el-form-item>
</el-col>
</el-row>
<div id="app_event" class="div_map"></div>
</el-form>
</div>
<div class="div_btn" v-if="pageType != 'view'">
<el-button size="small" @click="handleCancle">取 消</el-button>
<!-- <el-button size="small" @click="resetData" v-if="pageType != 'view'">重置</el-button> -->
<el-button size="small" type="primary" :disabled="btnDisable" @click="handleComfirm">确 定</el-button>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCancle" size="small">关 闭</el-button>
<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> -->
</span>
</el-dialog>
</template>
<script>
import { isMobile } from '@/utils/validate';
import { mapGetters } from 'vuex';
import { Loading } from 'element-ui'; // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request';
import daiMap from '@/utils/dai-map';
import nextTick from 'dai-js/tools/nextTick';
let loading; // 加载动画
let map;
var search;
var markers;
var infoWindowList;
var geocoder; // 新建一个正逆地址解析类
export default {
props: {
dialogVisible: {
type: Boolean,
default: ''
},
defaultData: {
type: Object,
default: null
},
pageType: {
type: String,
default: ''
},
detailId: {
type: String,
default: ''
},
detailData: {
type: Object,
default: null
},
disabled: {
type: Boolean,
default: false
}
},
data() {
let checkMObile = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入联系电话'));
} else {
if (!isMobile(value)) {
callback(new Error('联系电话格式不正确'));
}
callback();
}
};
return {
detailIdcopy:this.detailId,
btnDisable: false,
user: '',
agencyId: '',
gridList: [], //所属网格list--场所区域
placeTypeList: [], //场所类型
resultArray: [{ value: '0', label: '合格' }, { value: '1', label: '不合格' }],
equipmentCategoryCodeArray: [],
list: {},
formData: {
equipmentName: '',
equipmentCategoryCode: '',
principalName: '',
location: '',
contactNum: ''
},
dataRule: {
equipmentName: [{ required: true, message: '设备名称不能为空', trigger: 'bulr' }],
equipmentNum: [{ required: true, message: '设备编号不能为空', trigger: 'bulr' }],
principalName: [{ required: true, message: '负责人不能为空', trigger: 'bulr' }],
contactNum: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
location: [{ required: true, message: '所处位置不能为空', trigger: 'blur' }]
},
//地图
loading: false,
searchValue: '',
searchOptions: []
};
},
watch: {},
components: { },
created() {},
async mounted() {
console.log('detailId', this.detailId);
this.user = this.$store.state.user;
this.agencyId = this.user.agencyId;
this.startLoading();
this.loadCategory();
// this.loadGrid();
// this.loadplaceType();
if (this.pageType != 'add') {
this.getDetail();
} else {
this.initMap();
}
await this.endLoading();
this.endLoading();
},
methods: {
async loadCategory() {
const url = '/sys/dict/data/dictlist';
let params = {
dictType: 'safety_equipment_category'
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.equipmentCategoryCodeArray = data;
} else {
this.$message.error(msg);
}
},
async loadGrid() {
const url = '/gov/org/customergrid/gridoption';
let params = {
agencyId: this.agencyId,
purpose: 'query'
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.gridList = data;
} else {
this.$message.error(msg);
}
},
//场所类型
async loadplaceType() {
const url = '/gov/org/coverage/dict-select-list/enterprise_patrol';
let params = {
// agencyId: this.agencyId,
// purpose: 'query'
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.placeTypeList = data;
} else {
this.$message.error(msg);
}
},
async getDetail() {
const url = `/actual/base/monitoringEquipment/detail/${this.detailIdcopy}`;
const { data, code, msg } = await requestPost(url);
if (code === 0) {
console.log('详情数据', data);
this.formData = { ...data };
// this.remoteMethod("青岛");
// this.list = this.searchOptions.map(item => {
// return { value: item.value, label: item.label };
// });
// this.formData.location.push(this.list[0].value);
// this.remoteMethod(this.list[0].label);//调用远程搜索函数
// this.remoteMethod("对对对");
this.initMap();
} else {
this.$message.error(msg);
}
},
handleComfirm() {
this.save();
},
async handleAdd() {
// this.btnDisable = true;
// setTimeout(() => {
// this.btnDisable = false;
// }, 10000);
// nextTick(1000);
// const form = new Promise((resolve, reject) => {
// this.$refs['form'].validate(valid => {
// if (valid) resolve();
// });
// });
// const form1 = new Promise((resolve, reject) => {
// this.$refs['form1'].validate(valid => {
// if (valid) resolve();
// });
// });
// Promise.all([form1, form])
// .then(() => {
// this.addFuwu();
// })
// .catch(() => {
// app.util.validateRule(messageObj);
// this.btnDisable = false;
// });
},
async save() {
console.log('this.formData', this.formData);
var url = '';
var params = {};
if (this.pageType == 'add') {
url = '/actual/base/monitoringEquipment/save';
} else {
url = '/actual/base/monitoringEquipment/update';
}
params = { ...this.formData };
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.$message.success('操作成功');
this.detailIdcopy=data
// this.handleCancle();
} else if (code >= 8000) {
this.$message.error(msg);
}
},
handleCancle() {
this.resetData();
this.$emit('handleClose');
},
resetData() {
this.$refs.form.resetFields();
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
});
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close();
}
}, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap() {
let { latitude, longitude } = this.$store.state.user;
if (this.formData.latitude && this.formData.longitude) {
latitude = this.formData.latitude;
longitude = this.formData.longitude;
}
if (!latitude || latitude == '' || latitude == '0') {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
this.$nextTick(() => {
map = new daiMap(
document.getElementById('app_event'),
{ latitude, longitude },
{
zoom: 16.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
}
);
// 监听地图平移结束
map.on('dragend', e => {
if (!this.disabled) {
this.handleMoveCenter(e);
}
});
map.setCenter(latitude, longitude);
if (this.formData.latitude) {
map.setMarker(latitude, longitude);
}
});
},
async handleMoveCenter() {
//修改地图中心点
const { lat, lng } = map.getCenter();
this.formData.latitude = lat;
this.formData.longitude = lng;
map.setMarker(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == 'success') {
this.formData.location = data.address;
this.searchValue = data.address;
this.searchOptions = [];
}
},
async remoteMethod(query) {
console.log("query",query)
if (query !== '') {
this.loading = true;
const { msg, data } = await map.searchNearby(query);
this.loading = false;
this.resultList = [];
if (msg == 'success' && data.resultList && data.resultList.length > 0) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList;
this.searchOptions = this.resultList.map(item => {
return { value: `${item.id}`, label: `${item.address + item.name}` };
});
console.log("this.searchOptions",this.searchOptions )
}
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
];
}
} else {
this.searchOptions = [];
}
},
handleClickKey(index) {
let selPosition = this.resultList[index];
let lonlat = selPosition.lonlat.split(' ');
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.formData.latitude = lonlat[1];
this.formData.longitude = lonlat[0];
this.formData.location = selPosition.address + selPosition.name;
}
}
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/modules/management/form-main.scss';
@import '@/assets/scss/modules/management/form.scss';
@import '@/assets/scss/modules/visual/a_customize.scss';
.el-dialog__body {
padding: 30px 80px;
}
</style>

489
src/views/modules/resourceManagement/enterprise/index.vue
View File

@ -0,0 +1,489 @@
<template>
<div class="g-main">
<div>
<div class="m-search">
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'105px'">
<div>
<el-form-item label="企业名称" prop="equipmentName">
<el-input v-model.trim="formData.equipmentName" class="u-item-width-normal" size="small"
clearable placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="规模" prop="equipmentNum">
<el-input v-model.trim="formData.equipmentNum" class="u-item-width-normal" size="small"
clearable placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="负责人" prop="location">
<el-input v-model.trim="formData.location" class="u-item-width-normal" size="small"
clearable placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="联系人" prop="principalName">
<el-input v-model.trim="formData.principalName" class="u-item-width-normal" size="small"
clearable placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="九小场所分类" prop="latestInspectTime">
<el-select v-model.trim="formData.location" placeholder="请选择" class="u-item-width-normal"
size="small">
<el-option v-for="item in option" :label="item.label" :value="item.value"
:key="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="最新检查时间" prop="latestInspectResult">
<el-date-picker class="u-item-width-normal" size="small"
v-model.trim="formData.latestInspectTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="最新检查结果" prop="latestInspectResult">
<el-select v-model.trim="formData.latestInspectResult" placeholder="请选择" size="small"
clearable class="u-item-width-normal">
<el-option v-for="item in resultArray" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-row>
<el-col :span="24" align="right">
<el-button style="margin-left: 30px" size="small" type="primary "
@click="handleSearch">查询</el-button>
<el-button style="margin-left: 10px" size="small" class="diy-button--white"
@click="resetSearch">重置</el-button>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div class="m-table">
<div class="div_btn">
<el-button size="small" type="primary " @click="handleAdd({}, 'add')">新增</el-button>
<el-button class="diy-button--white" size="small"
@click="handleExportModule('room')">下载模板</el-button>
<el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" action="uploadUlr"
:limit="1" :accept="'.xls,.xlsx'" :with-credentials="true" :show-file-list="false"
:auto-upload="true" :on-progress="handleProgress" :on-success="handleExcelSuccess"
:before-upload="beforeExcelUpload" :http-request="uploadHttpRequest"
style="display: inline-block;margin:0px 10px">
<el-button size="small" class="diy-button--white" :loading="importLoading">导入</el-button>
</el-upload>
<el-button @click="handleExport" class="diy-button--white" size="small">导出</el-button>
</div>
<el-table :data="tableData" border class="m-table-item" style="width: 100%"
@selection-change="handleSelectionChange" :height="maxTableHeight">
<!-- <el-table-column label="" fixed="left" type="selection" align="center" width="50" /> -->
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
<el-table-column prop="equipmentName" align="center" label="设备名称"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="equipmentNum" align="center" label="设备编号"></el-table-column>
<el-table-column prop="location" label="所处位置" min-width="140" align="center"
:show-overflow-tooltip="true" />
<el-table-column prop="principalName" align="center" label="负责人"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="contactNum" align="center" :show-overflow-tooltip="true"
label="联系电话"></el-table-column>
<el-table-column prop="latestInspectTime" align="center" label="最新检查时间"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="latestInspectResultName" align="center" label="最新结果"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="250">
<template slot-scope="scope">
<el-button @click="handleAdd(scope.row, 'view')" type="text" size="small">查看</el-button>
<el-button v-if="scope.row.latitude && agencyId == scope.row.agencyId"
style="margin-right: 10px" @click="handleAdd(scope.row, 'edit')" size="small"
type="text">
编辑
</el-button>
<el-button style="margin-right: 10px" @click="handleAdd(scope.row, 'edit')" size="small"
type="text">
巡查记录
</el-button>
<el-button @click="handleDel(scope.row)" v-if="agencyId == scope.row.agencyId" type="text"
size="small" class="">删除</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)"
layout="sizes, prev, pager, next, total" :total="total"></el-pagination>
</div>
</div>
</div>
<div>
<addForm v-if="dialogVisible" :dialogVisible="dialogVisible" :pageType="pageType" :disabled="disabled"
:detailId="detailId" :detailData="detailData" @handleClose="handleClose" @handleOk="handleOk"
@dialogOk="handleEditSuccess" />
</div>
</div>
</template>
<script>
import { requestPost } from '@/js/dai/request';
import nextTick from 'dai-js/tools/nextTick';
import { mapGetters } from 'vuex';
import addForm from './addForm.vue';
import axios from 'axios';
export default {
data() {
return {
dialogVisible: false,
importLoading: false,
disabled: false,
user: '',
agencyId: '',
formData: {
equipmentName: '',
equipmentCategoryCode: '',
principalName: '',
contactNum: '',
address: ''
},
pageType: 'list', // 列表list 新增add 处理dispose 详情info
gridList: [], //所属网格list--场所区域
placeTypeList: [], //场所类型
tableData: [],
resultArray: [{ value: '1', label: '合格' }, { value: '0', label: '不合格' }],
equipmentCategoryCodeArray: [],
pageNo: 1,
pageSize: window.localStorage.getItem('pageSize') || 20,
total: 1,
detailId: '',
detailData: {},
multipleSelection: [],
rowObj: {},
option: [
{}
]
};
},
components: { addForm },
created() { },
computed: {
maxTableHeight() {
return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeigh : this.clientHeight - 410;
},
...mapGetters(['clientHeight', 'iframeHeight'])
},
watch: {},
mounted() {
this.user = this.$store.state.user;
this.agencyId = this.user.agencyId;
this.loadGrid();
this.loadplaceType();
this.loadCategory();
this.getTableData();
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = [];
val.forEach(element => {
this.multipleSelection.push(element.icEventId);
});
},
handleSearch(val) {
console.log(this.formData);
this.pageNo = 1;
this.getTableData();
},
async loadGrid() {
const url = '/gov/org/customergrid/gridoption';
let params = {
agencyId: this.agencyId,
purpose: 'query'
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.gridList = data;
} else {
this.$message.error(msg);
}
},
//场所类型
async loadplaceType() {
const url = '/gov/org/coverage/dict-select-list/enterprise_patrol';
let params = {
// agencyId: this.agencyId,
// purpose: 'query'
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.placeTypeList = data;
} else {
this.$message.error(msg);
}
},
//设备类型
async loadCategory() {
const url = '/sys/dict/data/dictlist';
let params = {
dictType: 'safety_equipment_category'
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.equipmentCategoryCodeArray = data;
} else {
this.$message.error(msg);
}
},
async handleImport() {
// 导入
},
async handleExport() {
// 导出
const url = '/actual/base/monitoringEquipment/export';
const { pageSize, pageNo, formData } = this;
axios({
url: window.SITE_CONFIG['apiURL'] + url,
method: 'post',
data: {
pageSize,
pageNo,
...formData
},
responseType: 'blob'
})
.then(res => {
let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
console.log('filename', fileName);
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
var url = window.URL.createObjectURL(blob);
var aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = url;
aLink.setAttribute('download', fileName);
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
})
.catch(err => {
console.log('获取导出情失败', err);
return this.$message.error('网络错误');
});
},
handleAdd(row, type) {
if (row.id) {
this.detailId = row.id;
}
this.pageType = type;
if (type == 'view') {
this.disabled = true;
} else {
this.disabled = false;
}
this.dialogVisible = true;
},
handleClose() {
this.dialogVisible = false;
this.pageType = 'list';
this.detailId = '';
this.getTableData();
},
handleOk() {
this.pageType = 'list';
this.detailId = '';
this.pageNo = 1;
this.getTableData();
},
handleEditSuccess() {
this.handleClose();
this.getTableData();
},
async handleDel(rowData) {
let message = '确认删除?';
this.$confirm(message, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.del(rowData.id);
})
.catch(err => { });
},
async del(id) {
const url = `/actual/base/monitoringEquipment/delete`;
let idsArr = [id];
const { data, code, msg } = await requestPost(url, idsArr);
if (code === 0) {
this.$message.success('删除成功！');
this.getTableData();
} else {
this.$message.error('操作失败！');
}
},
async getTableData() {
const url = '/actual/base/monitoringEquipment/page';
// const url = 'http://yapi.elinkservice.cn/mock/330/actual/base/enterprise/list';
const { pageSize, pageNo, formData } = this;
const { data, code, msg } = await requestPost(url, {
pageSize,
pageNo,
...formData
});
if (code === 0) {
this.total = data.total || 0;
this.tableData = data.list
? data.list.map(item => {
return item;
})
: [];
} else {
this.$message.error(msg);
}
},
handleSizeChange(val) {
this.pageSize = val;
window.localStorage.setItem('pageSize', val);
this.getTableData();
},
handleCurrentChange(val) {
this.pageNo = val;
this.getTableData();
},
resetSearch() {
this.formData = {
equipmentName: '',
equipmentCategoryCode: '',
principalName: '',
contactNum: '',
address: ''
};
this.pageNo = 1;
this.getTableData();
},
async handleExportModule() {
let url = '/actual/base/monitoringEquipment/downloadTemplate';
let params = {};
await this.$http({
method: 'POST',
url,
responseType: 'blob',
data: params
})
.then(res => {
// this.download(res.data, title + '.xls')
if (res.headers['content-disposition']) {
let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
console.log('filename', fileName);
let blob = new Blob([res.data], {
type: 'application/vnd.ms-excel'
});
var url = window.URL.createObjectURL(blob);
var aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = url;
aLink.setAttribute('download', fileName);
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
} else this.$message.error('下载失败');
})
.catch(err => {
console.log('err', err);
return this.$message.error('网络错误');
});
},
handleExcelSuccess(res, file) {
if (res.code === 0 && res.msg === 'success') {
console.log('resss---ppp', res);
} else {
this.$message.error(res.msg);
}
},
handleProgress(event, file, fileList) {
console.log('percentage', file.percentage);
},
beforeExcelUpload(file) {
console.log('file', file);
const isType = file.type === 'application/vnd.ms-excel';
const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const fileType = isType || isTypeComputer;
const isLt1M = file.size / 1024 / 1024 < 10;
if (!fileType) {
this.$message.error('上传文件只能是xls/xlsx格式！');
}
if (!isLt1M) {
this.$message.error('上传文件大小不能超过 10MB!');
}
return fileType && isLt1M;
},
async uploadHttpRequest(file) {
this.importLoading = true;
this.importBtnTitle = '正在上传中...';
this.$message({
showClose: true,
dangerouslyUseHTMLString: true,
message: "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度",
duration: 3000
});
let than = this;
document.getElementById('clickA').addEventListener('click', function () {
than.$router.replace('/main/importRecord-index');
});
const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
formData.append('file', file.file); //添加文件对象
formData.append('code', ''); //添加文件对象
await this.$http
.post('/actual/base/monitoringEquipment/import', formData)
.then(res => {
console.log('res-up', res);
if (res.data.code == 0 && res.data.msg == 'success') {
console.log(res.data.data);
const data = res.data.data;
this.dataList = [
...Object.keys(data.option.exist).map(k => {
return {
index: k,
srcField: data.option.exist[k],
exist: true,
field: data.option.exist[k]
};
}),
...Object.keys(data.option.notExist).map(k => {
return {
index: k,
srcField: data.option.notExist[k],
exist: false,
field: ''
};
})
];
this.importOption = data.option;
this.importCode = data.code;
this.fileData = file;
} else this.$message.error(res.data.msg);
})
.catch(err => {
console.log('失败', err);
file.onError(); //上传失败的文件会从文件列表中删除
// this.$message.error('导入失败')
});
this.importLoading = false;
this.importBtnTitle = '导入';
this.$refs.upload.clearFiles();
}
}
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/modules/management/list-main.scss';
.m-search {
.u-item-width-normal {
width: 200px;
}
}
</style>

0
src/views/modules/resourceManagement/enterprise/patrolRecord.vue
View File

Write Preview
Loading…
Cancel
Save