10 changed files with 2071 additions and 1553 deletions
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,110 @@ |
|||
.m-detail-main { |
|||
padding: 20px 20px 0; |
|||
.title-small{ |
|||
position: relative; |
|||
&::after{ |
|||
content: ''; |
|||
width: 4px; |
|||
height: 16px; |
|||
background-color: #0056d6; |
|||
position: absolute; |
|||
left: -20px; |
|||
top: 0px; |
|||
} |
|||
} |
|||
} |
|||
.font_color_red{ |
|||
color: red; |
|||
} |
|||
.content_box{ |
|||
display: flex; |
|||
.left{ |
|||
width: 50%; |
|||
.rotate{ |
|||
animation: rotate 5s infinite linear; |
|||
} |
|||
.u-item-width-normal{ |
|||
width: 240px; |
|||
} |
|||
.text-center{ |
|||
width: calc( 100% - 20px); |
|||
height: 175px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.el-upload__text{ |
|||
color: #c5c9d1; |
|||
width: 100%; |
|||
} |
|||
/deep/ .el-upload { |
|||
width: 100%; |
|||
.el-upload-dragger{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.right{ |
|||
padding: 15px; |
|||
width: 50%; |
|||
background: #f5f7fa; |
|||
border-radius: 3px; |
|||
h4{ |
|||
margin-top: 0; |
|||
line-height: 19px; |
|||
} |
|||
.textBtn{ |
|||
padding: 0px; |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.steps { |
|||
width: 80%; |
|||
/deep/ .el-step__main { |
|||
position: absolute; |
|||
left: 24px; |
|||
top: -5px; |
|||
z-index: 10; |
|||
background: #fff; |
|||
width: 100px; |
|||
padding-left: 10px; |
|||
} |
|||
/deep/ .is-finish { |
|||
.el-step__icon { |
|||
background: #0056d6; |
|||
color: #fff; |
|||
} |
|||
} |
|||
/deep/ .is-process { |
|||
color: #000; |
|||
font-weight: 400; |
|||
.el-step__icon { |
|||
background: #cbcbcb; |
|||
color: #fff; |
|||
border-color: #cbcbcb; |
|||
} |
|||
} |
|||
/deep/ .is-wait { |
|||
color: #000; |
|||
.el-step__icon { |
|||
background: #cbcbcb; |
|||
color: #fff; |
|||
border-color: #cbcbcb; |
|||
} |
|||
} |
|||
/deep/ .el-step__description{ |
|||
width: 300px; |
|||
color: #cbcbcb; |
|||
} |
|||
|
|||
} |
|||
@keyframes rotate { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
to { |
|||
transform: rotate(-360deg); |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -1,513 +0,0 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div class="m-table"> |
|||
<div class="u-table-btn1"> |
|||
<el-dropdown size="small" |
|||
type="primary" |
|||
style="margin: 0 10px; height: 30px" |
|||
trigger="hover"> |
|||
<el-button type="primary" |
|||
size="small"> |
|||
表格导入<i class="el-icon-arrow-down el-icon--right"></i> |
|||
</el-button> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item v-for="(item, index) in resiClass" |
|||
:key="index" |
|||
@click.native="handleImportType(item.value)"> |
|||
{{ item.label }} |
|||
</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
<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"></el-upload> |
|||
<el-button class="diy-button--white" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
@click="handleExportModule()">下载模板</el-button> |
|||
</div> |
|||
<div v-if="dataList.length > 0"> |
|||
<el-table ref="ref_table" |
|||
:data="dataList" |
|||
border |
|||
:height="tableHeight" |
|||
class="m-table-item" |
|||
v-loading="dataListLoading" |
|||
style="width: 100%"> |
|||
<el-table-column label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="100"></el-table-column> |
|||
<el-table-column prop="userTableHeader" |
|||
header-align="center" |
|||
align="center" |
|||
label="表格信息" |
|||
min-width="100"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.userTableHeader || "--" }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="itemGroupId" |
|||
header-align="center" |
|||
align="center" |
|||
label="平台对应信息" |
|||
min-width="110"> |
|||
<template slot-scope="scope"> |
|||
<div> |
|||
<el-select class="item_width_sel" |
|||
v-model="scope.row.itemGroupId" |
|||
size="small" |
|||
placeholder="请选择"> |
|||
<el-option v-for="item in groupList" |
|||
@click.native="handleSelGroup(scope.$index, item, 'change')" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-select class="item_width_sel" |
|||
v-model="scope.row.itemId" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
placeholder="请选择"> |
|||
<el-option v-for="item in scope.row.itemList" |
|||
:key="item.itemId" |
|||
:label="item.label" |
|||
:value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div ref="divEditBtn" |
|||
class="m-edit-btn"> |
|||
<el-button type="primary" |
|||
size="small" |
|||
class="diy-button--blue" |
|||
@click="handleComfirm">保 存</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="m-hint" |
|||
v-else>请先导入表格</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
customerId: "", // 客户id，父组件传 |
|||
customerName: "", // 客户名称，父组件传 |
|||
|
|||
tableParams: { |
|||
customerId: "", |
|||
}, |
|||
search: "", |
|||
dataList: [], |
|||
dataListLoading: false, |
|||
total: 0, |
|||
pageSize:window.localStorage.getItem('pageSize') || 20, |
|||
pageNo: 0, |
|||
|
|||
formShow: false, |
|||
formData: {}, |
|||
|
|||
scopeList: [], |
|||
dataSyncConfigId: "", |
|||
importLoading: false, |
|||
|
|||
groupList: [], |
|||
sHeight: 100, |
|||
|
|||
importCode: "", |
|||
importOption: { exist: {}, notExist: {} }, |
|||
|
|||
fileData: null, |
|||
resiClass: [], |
|||
|
|||
importType: "", |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
tableHeight () { |
|||
const h = this.clientHeight - this.sHeight + this.iframeHeigh; |
|||
const _h = this.clientHeight - this.sHeight; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
|
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
components: {}, |
|||
created () { }, |
|||
watch: { |
|||
//监听dataList有数据才再让他给高度 解决报找不到dom节点错误 |
|||
"dataList.length": { |
|||
immediate: true, |
|||
handler (newVal) { |
|||
this.$nextTick(() => { |
|||
if (newVal > 0) { |
|||
this.sHeight = this.$refs.divEditBtn.offsetHeight + 300; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}, |
|||
async mounted () { |
|||
await this.loadPersonGroup(); |
|||
this.getResident(); |
|||
}, |
|||
methods: { |
|||
diaClose () { |
|||
this.formShow = false; |
|||
}, |
|||
handleDropdownClick (event) { |
|||
event.stopPropagation(); |
|||
}, |
|||
async loadPersonGroup () { |
|||
const url = "/oper/customize/icformitemgroup/list"; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = { |
|||
formCode: "resident_base_info", |
|||
policyFlag: "1", |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.groupList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//选择人员信息第一列下拉框 |
|||
async handleSelGroup (index, item, change) { |
|||
console.log(index, item, change); |
|||
const url = "/oper/customize/icformitem/getItemListV2"; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = { |
|||
// policyFlag: "1", |
|||
groupId: item.id, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
let oneData = this.dataList[index]; |
|||
if (change == "change") { |
|||
this.dataList[index].itemId = ""; |
|||
} |
|||
oneData.itemList = data; |
|||
this.$set(this.dataList, index, oneData); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 加载列表数据 |
|||
async loadData () { |
|||
this.dataListLoading = true; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/dataSyncConfig/list' |
|||
const url = "/epmetuser/dataSyncConfig/list"; |
|||
|
|||
this.tableParams = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.tableParams); |
|||
this.dataListLoading = false; |
|||
if (code === 0) { |
|||
this.total = data.total; |
|||
this.dataList = data.list; |
|||
this.dataList.forEach((element) => { |
|||
element.stateShow = element.switchStatus === "open" ? true : false; |
|||
}); |
|||
} else { |
|||
// this.$message.error(msg ) |
|||
} |
|||
}, |
|||
handleImportType (command) { |
|||
this.importType = command; |
|||
this.$refs["upload"].$children[0].$refs.input.click(); |
|||
}, |
|||
handleChangeScope (value) { |
|||
this.orgIdArray = value; |
|||
this.scopeList = []; |
|||
let selArray = this.$refs["myCascader"].getCheckedNodes(); |
|||
// console.log('selArray', selArray) |
|||
|
|||
selArray.forEach((element, index) => { |
|||
let obj = { |
|||
orgId: element.data.agencyId, |
|||
orgType: element.data.level, |
|||
orgIdPath: element.path.join(":"), |
|||
}; |
|||
this.scopeList.push(obj); |
|||
}); |
|||
|
|||
console.log("this.scopeList", this.scopeList); |
|||
}, |
|||
async getResident () { |
|||
try { |
|||
const { data } = await this.$http.post("sys/dict/data/dictlist", { |
|||
dictType: "resident_category_import", |
|||
}); |
|||
this.resiClass = data.data; |
|||
} catch (error) { |
|||
console.log(error, "获取居民类别字典"); |
|||
} |
|||
}, |
|||
async handleExportModule () { |
|||
let url = "/actual/base/residentBaseInfo/import/download-template"; |
|||
|
|||
let params = {}; |
|||
await this.$http({ |
|||
method: "POST", |
|||
url, |
|||
responseType: "blob", |
|||
data: params, |
|||
}) |
|||
.then((res) => { |
|||
const url = window.URL.createObjectURL(new Blob([res.data])); |
|||
const aLink = document.createElement("a"); |
|||
aLink.style.display = "none"; |
|||
aLink.href = url; |
|||
aLink.setAttribute("download", "人员导入模板.zip"); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); |
|||
window.URL.revokeObjectURL(url); |
|||
// // 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) { |
|||
console.log(res, file); |
|||
if (!res) return; |
|||
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); |
|||
console.log(this.importType); |
|||
|
|||
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!"); |
|||
} |
|||
|
|||
if (!this.importType) { |
|||
this.$message.error("请选择导入的类别"); |
|||
} |
|||
return fileType && isLt1M; |
|||
}, |
|||
async uploadHttpRequest (file) { |
|||
if (!this.importType) return; |
|||
this.importLoading = true; |
|||
this.importBtnTitle = "正在上传中..."; |
|||
const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加 |
|||
formData.append("file", file.file); //添加文件对象 |
|||
formData.append("fileMode", this.importType); //添加文件对象 |
|||
// http://127.0.0.1:4523/mock2/2515967/97869993 |
|||
await this.$http |
|||
.post("/actual/base/importExcelData/extractExcelHead", formData) |
|||
.then((res) => { |
|||
console.log("res-up", res); |
|||
if (res.data.code == 0) { |
|||
const { metaListData, fileCode, msg } = res.data.data; |
|||
this.afterSuccess(); |
|||
this.dataList = metaListData; |
|||
// 相等于在for循环中写filter过滤,这样写能够以 O(1) 的时间复杂度获取 itemGroupId 匹配的元素。 |
|||
let groupMap = new Map( |
|||
this.groupList.map((item) => [item.label, item]) |
|||
); |
|||
for (let i in this.dataList) { |
|||
this.handleSelGroup( |
|||
i, |
|||
groupMap.get(this.dataList[i].itemGroupId) |
|||
); |
|||
} |
|||
this.importCode = fileCode; |
|||
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(); |
|||
}, |
|||
|
|||
async handleComfirm () { |
|||
this.importLoading = true; |
|||
this.importBtnTitle = "正在上传中..."; |
|||
const { importOption, importCode, dataList } = this; |
|||
let obj = dataList.reduce((acc, item) => { |
|||
if (item.userTableHeader) { |
|||
acc[item.userTableHeader] = item.itemId; |
|||
} |
|||
return acc; |
|||
}, {}); |
|||
const formData = new FormData(); |
|||
formData.append("columnMateJson", JSON.stringify(obj)); |
|||
formData.append("fileCode", importCode); |
|||
await this.$http |
|||
.post("/actual/base/importExcelData/importResiHouseExcel", formData) |
|||
.then((res) => { |
|||
console.log("res-up", res); |
|||
if (res.data.code == 0 && res.data.msg == "success") { |
|||
// this.upload2(this.fileData, this.importCode); |
|||
this.afterSuccess(); |
|||
} else this.$message.error(res.data.msg); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("失败", err); |
|||
file.onError(); //上传失败的文件会从文件列表中删除 |
|||
// this.$message.error('导入失败') |
|||
}); |
|||
this.importLoading = false; |
|||
this.importBtnTitle = "导入"; |
|||
}, |
|||
|
|||
async upload2 (file, code) { |
|||
this.importLoading = true; |
|||
this.importBtnTitle = "正在上传中..."; |
|||
const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加 |
|||
formData.append("file", file.file); //添加文件对象 |
|||
formData.append("code", code); //添加文件对象 |
|||
await this.$http |
|||
.post("/actual/base/residentBaseInfo/importExcel", formData) |
|||
.then((res) => { |
|||
console.log("res-up", res); |
|||
if (res.data.code == 0 && res.data.msg == "success") { |
|||
this.afterSuccess(); |
|||
} 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(); |
|||
}, |
|||
|
|||
afterSuccess () { |
|||
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.push("/main/importRecord-index"); |
|||
}); |
|||
this.dataList = []; |
|||
this.importOption = {}; |
|||
this.importCode = ""; |
|||
this.fileData = null; |
|||
}, |
|||
|
|||
// 取消 |
|||
diaCancel () { |
|||
this.$emit("cancleBack"); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
.m-edit-btn { |
|||
display: flex; |
|||
margin-top: 20px; |
|||
margin-right: 16px; |
|||
justify-content: flex-end; |
|||
text-align: center; |
|||
} |
|||
|
|||
.item_width_sel { |
|||
width: 200px; |
|||
} |
|||
|
|||
.m-hint { |
|||
font-size: 50px; |
|||
line-height: 300px; |
|||
text-align: center; |
|||
color: #aaaaaa; |
|||
} |
|||
::v-deep .upload-btn { |
|||
.el-button { |
|||
padding: 7px 20px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,212 @@ |
|||
<template> |
|||
<div class=""> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<i class="el-icon-success" style="font-size: 50px; color: #1cc58c"></i> |
|||
<p>导入完成</p> |
|||
<el-button |
|||
style="margin-left: 10px" |
|||
size="small" |
|||
type="primary" |
|||
@click="handelClickBackList" |
|||
>返回任务列表</el-button |
|||
> |
|||
</div> |
|||
<div class="right"> |
|||
<h4> |
|||
<el-icon |
|||
class="el-icon-warning-outline" |
|||
style="color: #0056d6; font-size: 18px; font-weight: 600" |
|||
></el-icon> |
|||
操作说明 |
|||
</h4> |
|||
<p>1、可以到居民信息中查看本次导入的数据。</p> |
|||
<p>2、导入失效的数据,您可以下载失败文件修改后,重新创建任务导入。</p> |
|||
</div> |
|||
</div> |
|||
<h3 class="title-small">数据导入明细</h3> |
|||
<el-row type="flex" justify=""> |
|||
<el-col :span="24"> |
|||
<i class="el-icon-circle-check" style="color: #1cc58c; font-size: 15px;font-weight: 600;"></i> {{ this.importSuccessNum || "--" }}条数据已导入。<el-button |
|||
type="text" |
|||
@click="handelClickLook('success')" |
|||
>查看</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" justify=""> |
|||
<el-col :span="24"> |
|||
<i class="el-icon-circle-close" style="color: #ff5b5d;font-size: 15px;font-weight: 600;"></i> {{ this.importFailNum || "--" }}条问题数据导入失败。<el-button |
|||
type="text" |
|||
@click="handelClickLook('fail')" |
|||
>查看</el-button |
|||
> |
|||
<!-- --> |
|||
<i class="el-icon-download" style="margin-left: 16px;"></i> |
|||
<a |
|||
v-if="resultDescFile" |
|||
:href="this.resultDescFile" |
|||
target="_blank" |
|||
style="color: #ff4d4f; cursor: pointer" |
|||
>下载结果说明</a |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
<el-dialog |
|||
title="列表" |
|||
:visible.sync="showTable" |
|||
width="50%" |
|||
v-if="showTable" |
|||
> |
|||
<el-table |
|||
:data="tableData" |
|||
row-key="fileCode" |
|||
border |
|||
style="width: 100%; height: 500px; overflow-y: auto" |
|||
> |
|||
<el-table-column |
|||
v-for="item in tableHeader" |
|||
:key="item.columnName" |
|||
:prop="item.columnName" |
|||
:label="item.label" |
|||
:align="item.align" |
|||
show-overflow-tooltip |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ handleFilterSpan(scope.row, item) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="pageNo" |
|||
:page-size="pageSize" |
|||
:total="total" |
|||
layout=" prev, pager, next" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="showTable = false">取 消</el-button> |
|||
<el-button type="primary" @click="showTable = false">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
resident_category_import_list: [], |
|||
showTable: false, |
|||
tableHeader: [], |
|||
tableData: [], |
|||
importSuccessNum: null, |
|||
importFailNum: null, |
|||
importCategory:null, |
|||
pageNo:1, |
|||
pageSize:20, |
|||
total:0, |
|||
tableType:null |
|||
}; |
|||
}, |
|||
props: { |
|||
fileCode: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
fileCodeRow: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getTaskInfo(); |
|||
}, |
|||
methods: { |
|||
handleFilterSpan(row, item) { |
|||
let _val = ""; |
|||
if (item.options && item.options.length > 0) { |
|||
item.options.forEach((n) => { |
|||
if (n.value === row[item.columnName]) _val = n.label; |
|||
}); |
|||
} |
|||
return _val || row[item.columnName]; |
|||
}, |
|||
async handelClickLook(type) { |
|||
this.showTable = true; |
|||
this.tableType = type; |
|||
this.pageNo = 1; |
|||
this.getTable() |
|||
}, |
|||
async getTable(){ |
|||
let url = "/actual/base/excelDataShow/quaryExcelDataList"; |
|||
const {pageNo,pageSize,importCategory,tableType} = this; |
|||
let parm = { |
|||
taskId: this.taskId, |
|||
boolranFlag: tableType == "success" ? "1" : "0", |
|||
pageNo, |
|||
pageSize, |
|||
fileCategory:importCategory, |
|||
}; |
|||
let { data, code, msg } = await requestPost(url, parm); |
|||
if (code == 0) { |
|||
this.showTable = true; |
|||
this.tableHeader = Object.entries(data.columnsDict).map((item) => ({ |
|||
label: item[0], |
|||
columnName: item[1], |
|||
})); //属性名和属性值 |
|||
this.tableData = data.excelDataShowDTOList.list; |
|||
this.total = data.excelDataShowDTOList.total; |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
pageCurrentChangeHandle (val) { |
|||
this.pageNo = val |
|||
this.getTable() |
|||
}, |
|||
handelClickUpload() { |
|||
this.$emit("handelClickUpload"); |
|||
}, |
|||
handelClickBackList() { |
|||
this.$emit("handelClickBack"); |
|||
}, |
|||
async getTaskInfo() { |
|||
let url = "/actual/base/intelligentImportData/getTaskInfo"; |
|||
let parm = { |
|||
fileCode: this.fileCodeRow || this.fileCode, |
|||
}; |
|||
let { data, code, msg } = await requestPost(url, parm); |
|||
if (code == 0) { |
|||
this.taskId = data.taskId; |
|||
this.importFailNum = data.importFailNum.toString(); |
|||
this.importSuccessNum = data.importSuccessNum.toString(); |
|||
this.importCategory = data.importCategory; |
|||
this.resultDescFile = data.resultDescFile; |
|||
this.$emit("updateoperatorName", { |
|||
operatorName: data.operatorName, |
|||
createdTime: data.createdTime, |
|||
}); |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
@import "@/assets/scss/pages/smartImport.scss"; |
|||
.left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #838383; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,516 @@ |
|||
<template> |
|||
<div class="" v-loading="dataListLoading"> |
|||
<h3 class="title-small">基本信息</h3> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<el-form |
|||
:model="form" |
|||
:rules="rules" |
|||
ref="importForm" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item label="任务类型" prop="importCategory"> |
|||
<el-select |
|||
v-model="form.importCategory" |
|||
placeholder="请选择" |
|||
size="small" |
|||
class="u-item-width-normal" |
|||
clearable |
|||
@clear="handelClearCategory" |
|||
> |
|||
<el-option |
|||
v-for="item in resident_category_import_list" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
:key="item.value" |
|||
@click.native="handelClickCategory(item.label)" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="下载模板" prop="desc"> |
|||
<span> |
|||
<span v-if="categoryName">{{ |
|||
this.$store.state.user.agencyName + categoryName || "" |
|||
}}</span> |
|||
<span v-if="categoryName">导入模板.xlsx</span> |
|||
<span v-else>请先选择任务类型</span> |
|||
<el-button |
|||
type="text" |
|||
@click="handelClickDownModule" |
|||
v-if="categoryName" |
|||
>点击下载</el-button |
|||
></span |
|||
> |
|||
</el-form-item> |
|||
<el-form-item label="任务名称" prop="taskName"> |
|||
<el-input |
|||
v-model="form.taskName" |
|||
size="small" |
|||
class="u-item-width-normal" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="right"> |
|||
<h4> |
|||
<el-icon |
|||
class="el-icon-warning-outline" |
|||
style="color: #0056d6; font-size: 18px; font-weight: 600" |
|||
></el-icon> |
|||
操作说明 |
|||
</h4> |
|||
<p> |
|||
1、导入数据前请先确定您的网格组织已经维护完毕。<el-button |
|||
class="textBtn" |
|||
type="text" |
|||
@click="$router.push('/main/base-organization-organization')" |
|||
>查看</el-button |
|||
> |
|||
</p> |
|||
<p>2、导入房屋和居民信息前请先确保已经导入了完整的小区楼栋信息。</p> |
|||
<p> |
|||
3、您也可以<el-button |
|||
class="textBtn" |
|||
type="text" |
|||
@click="handleExportModuleAll" |
|||
>点击这里下载</el-button |
|||
>全部的导入模板文件 |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<h3 class="title-small">上传数据</h3> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<el-upload |
|||
:headers="$getElUploadHeaders()" |
|||
name="processFile" |
|||
action="uploadUlr" |
|||
:accept="'.xls,.xlsx'" |
|||
:limit="1" |
|||
drag |
|||
:before-upload="beforeExcelUpload" |
|||
:http-request="uploadHttpRequest" |
|||
class="text-center" |
|||
ref="upload" |
|||
> |
|||
<i class="el-icon-upload" style="font-size: 58px; color: #c5c9d1"></i> |
|||
<div class="el-upload__text" v-html="$t('upload.text')"></div> |
|||
</el-upload> |
|||
</div> |
|||
<div class="right"> |
|||
<p>4、上传按导入模板整理后的excel数据文件。</p> |
|||
<p>5、文件大小不超过50M。</p> |
|||
</div> |
|||
</div> |
|||
<el-row type="flex" style="margin-top: 15px"> |
|||
<el-col :span="12" align="center"> |
|||
<el-button |
|||
style="margin-left: 10px" |
|||
size="small" |
|||
class="diy-button--white" |
|||
plain |
|||
@click="handelClickBack" |
|||
>取消</el-button |
|||
> |
|||
<el-button |
|||
class="diy-button--add" |
|||
size="small" |
|||
type="primary" |
|||
@click="handelClickUpload" |
|||
> |
|||
开始导入</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
<el-dialog |
|||
title="确认上传表格数据匹配关系" |
|||
:visible.sync="dialogVisibleExtractExcelHead" |
|||
width="75%" |
|||
> |
|||
<div v-if="dataList.length > 0" style="height: 600px; overflow-y: scroll"> |
|||
<p style="margin-top: 0px;"> |
|||
说明：系统将会将您上传的表格列自动匹配到平台对应的数据列，匹配错误或没有匹配上的列（红色高亮）您还可以手动匹配 |
|||
</p> |
|||
<el-table |
|||
ref="ref_table" |
|||
:data="dataList" |
|||
border |
|||
class="m-table-item" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column |
|||
label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="100" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="userTableHeader" |
|||
header-align="center" |
|||
align="center" |
|||
label="上传表格列" |
|||
min-width="80" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
:class="[ |
|||
scope.row.itemGroupId && scope.row.itemGroupId != '' |
|||
? '' |
|||
: 'font_color_red', |
|||
]" |
|||
>{{ scope.row.userTableHeader || "--" }}</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
header-align="center" |
|||
align="center" |
|||
label="对应到" |
|||
min-width="50" |
|||
> |
|||
<template slot-scope="scope"><span v-if="scope.row.itemGroupId"> =></span> </template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="itemGroupId" |
|||
header-align="center" |
|||
align="center" |
|||
label="平台数据列" |
|||
min-width="110" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div> |
|||
<el-select |
|||
class="item_width_sel" |
|||
v-model="scope.row.itemGroupId" |
|||
size="small" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in groupList" |
|||
@click.native="handleSelGroup(scope.$index, item, 'change')" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.label" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-select |
|||
class="item_width_sel" |
|||
v-model="scope.row.itemId" |
|||
size="small" |
|||
style="margin-left: 10px" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in scope.row.itemList" |
|||
:key="item.itemId" |
|||
:label="item.label" |
|||
:value="item.label" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisibleExtractExcelHead = false" |
|||
>取 消</el-button |
|||
> |
|||
<el-button type="primary" @click="dialogVisibleExtractExcelHead = false" |
|||
>确 定</el-button |
|||
> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
form: { |
|||
importCategory: null, |
|||
taskName: null, |
|||
}, |
|||
rules: { |
|||
importCategory: [ |
|||
{ required: true, message: "请选择任务类型", trigger: "change" }, |
|||
], |
|||
taskName: [ |
|||
{ required: true, message: "请输入任务名称", trigger: "change" }, |
|||
], |
|||
}, |
|||
resident_category_import_list: [], |
|||
categoryName: "", |
|||
createdFileName: null, |
|||
createdFileUrl: null, |
|||
dialogVisibleExtractExcelHead: false, |
|||
dataListLoading: false, |
|||
dataList: [], |
|||
groupList: [], |
|||
fileCode: null, |
|||
}; |
|||
}, |
|||
props: {}, |
|||
async created() { |
|||
await this.getDictList(); |
|||
await this.loadPersonGroup(); |
|||
}, |
|||
methods: { |
|||
handelClearCategory() { |
|||
this.categoryName = null; |
|||
}, |
|||
async loadPersonGroup() { |
|||
const url = "/oper/customize/icformitemgroup/list"; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = { |
|||
formCode: "resident_base_info", |
|||
policyFlag: "1", |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.groupList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async handleSelGroup(index, item, change) { |
|||
const url = "/oper/customize/icformitem/getItemListV2"; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = { |
|||
// policyFlag: "1", |
|||
groupId: item.id, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
let oneData = this.dataList[index]; |
|||
if (change == "change") { |
|||
this.dataList[index].itemId = ""; |
|||
} |
|||
oneData.itemList = data; |
|||
this.$set(this.dataList, index, oneData); |
|||
console.log(this.dataList); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handelClickCategory(label) { |
|||
this.categoryName = label; |
|||
}, |
|||
|
|||
async checkExtractExcelHead() { |
|||
const url = "/actual/base/intelligentImportData/extractExcelHead"; |
|||
let params = { |
|||
originFileName: this.createdFileName, |
|||
originalFilePath: this.createdFileUrl, |
|||
importCategory: this.form.importCategory, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.dialogVisibleExtractExcelHead = true; |
|||
const { metaListData, fileCode, msg } = data; |
|||
this.dataList = metaListData; |
|||
this.fileCode = fileCode; |
|||
let groupMap = new Map( |
|||
this.groupList.map((item) => [item.label, item]) |
|||
); |
|||
for (let i in this.dataList) { |
|||
this.handleSelGroup(i, groupMap.get(this.dataList[i].itemGroupId)); |
|||
} |
|||
this.dataListLoading = false; |
|||
} else if (code >= 8000) { |
|||
this.$message.err(msg); |
|||
this.dataListLoading = false; |
|||
} |
|||
}, |
|||
async getDictList() { |
|||
const url = "/sys/dict/data/dictlist"; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
dictType: "resident_category_import", |
|||
}); |
|||
if (code === 0) { |
|||
this.resident_category_import_list = [...data]; |
|||
} else { |
|||
this.$message.err("字典错误"); |
|||
} |
|||
}, |
|||
|
|||
beforeExcelUpload(file) { |
|||
this.dataListLoading = true; |
|||
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 < 50; |
|||
if (!fileType) { |
|||
this.$message.error("上传文件只能是xls/xlsx格式！"); |
|||
} |
|||
|
|||
if (!isLt1M) { |
|||
this.$message.error("上传文件大小不能超过 10MB!"); |
|||
} |
|||
|
|||
if (!this.form.importCategory || !this.form.taskName) { |
|||
this.$message.error("请完善基本信息!"); |
|||
this.dataListLoading = false; |
|||
return false; |
|||
} |
|||
return fileType && isLt1M; |
|||
}, |
|||
async uploadHttpRequest(file) { |
|||
const formData = new FormData(); |
|||
formData.append("file", file.file); |
|||
await this.$http |
|||
.post("/actual/base/intelligentImportData/uploadFile", formData) |
|||
.then((res) => { |
|||
if (res.data.code == 0) { |
|||
const { fileName, url } = res.data.data; |
|||
this.createdFileName = fileName; |
|||
this.createdFileUrl = url; |
|||
this.checkExtractExcelHead(); |
|||
} else { |
|||
this.$message.error(res.data.msg); |
|||
this.dataListLoading = false; |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.log("失败", err); |
|||
file.onError(); //上传失败的文件会从文件列表中删除 |
|||
this.dataListLoading = false; |
|||
}); |
|||
this.$refs.upload.clearFiles(); |
|||
}, |
|||
// 下载全部模板 |
|||
async handleExportModuleAll() { |
|||
let url = "/actual/base/residentBaseInfo/import/download-template"; |
|||
|
|||
let params = {}; |
|||
await this.$http({ |
|||
method: "POST", |
|||
url, |
|||
responseType: "blob", |
|||
data: params, |
|||
}) |
|||
.then((res) => { |
|||
const url = window.URL.createObjectURL(new Blob([res.data])); |
|||
const aLink = document.createElement("a"); |
|||
aLink.style.display = "none"; |
|||
aLink.href = url; |
|||
aLink.setAttribute("download", "全部模板.zip"); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); |
|||
window.URL.revokeObjectURL(url); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err", err); |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
// 下载单个模板 |
|||
async handelClickDownModule() { |
|||
let url = "/actual/base/intelligentImportData/downloadImportModule"; |
|||
let params = { |
|||
importCategory: this.form.importCategory, |
|||
}; |
|||
await this.$http({ |
|||
method: "POST", |
|||
url, |
|||
responseType: "blob", |
|||
data: params, |
|||
}) |
|||
.then((res) => { |
|||
if (res.headers["content-disposition"]) { |
|||
// let fileName = window.decodeURI( |
|||
// res.headers["content-disposition"] |
|||
// .split(";")[1] |
|||
// .split("=")[1] |
|||
// ); |
|||
let fileName = `${ |
|||
this.$store.state.user.agencyName + this.categoryName |
|||
}导入模板`; |
|||
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); |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
handelClickUpload() { |
|||
this.$refs["importForm"].validate((valid) => { |
|||
if (valid) { |
|||
this.saveImportResiHouseExcel(); |
|||
} |
|||
}); |
|||
}, |
|||
async saveImportResiHouseExcel() { |
|||
const { fileCode, dataList } = this; |
|||
if (!fileCode) { |
|||
this.$message.error("请先上传文件"); |
|||
return; |
|||
} |
|||
let obj = dataList.reduce((acc, item) => { |
|||
if (item.userTableHeader) { |
|||
acc[item.userTableHeader] = item.itemId; |
|||
} |
|||
return acc; |
|||
}, {}); |
|||
const formData = new FormData(); |
|||
formData.append("columnMateJson", JSON.stringify(obj)); |
|||
formData.append("fileCode", fileCode); |
|||
formData.append("taskName", this.form.taskName); |
|||
await this.$http |
|||
.post( |
|||
"/actual/base/intelligentImportData/importResiHouseExcel", |
|||
formData |
|||
) |
|||
.then((res) => { |
|||
console.log("res-up", res); |
|||
if (res.data.code == 0 && res.data.msg == "success") { |
|||
this.$emit("handelClickUpload", fileCode); |
|||
} else this.$message.error(res.data.msg); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("失败", err); |
|||
file.onError(); |
|||
}); |
|||
}, |
|||
handelClickBack() { |
|||
this.$emit("handelClickBack"); |
|||
}, |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
@import "@/assets/scss/pages/smartImport.scss"; |
|||
</style> |
|||
|
|||
@ -0,0 +1,281 @@ |
|||
<template> |
|||
<div class=""> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<img class="rotate" src="@/assets/images/index/loading.png" alt="" /> |
|||
<p>请您耐心等待！如果您发现导入数据问题较多，可以取消导入</p> |
|||
<div> |
|||
<el-button |
|||
style="margin-left: 10px" |
|||
size="small" |
|||
type="primary" |
|||
@click="handelClickBackList" |
|||
>返回任务列表</el-button |
|||
> |
|||
<el-button |
|||
style="margin-left: 10px" |
|||
size="small" |
|||
class="diy-button--white" |
|||
plain |
|||
@click="handelClickBack" |
|||
>取消导入</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<h4> |
|||
<el-icon |
|||
class="el-icon-warning-outline" |
|||
style="color: #0056d6; font-size: 18px; font-weight: 600" |
|||
></el-icon> |
|||
操作说明 |
|||
</h4> |
|||
<p>1、导入数据多大，系统需要一定事件处理。</p> |
|||
<p> |
|||
2、导入过程中可查看导入明细，如果发现导入数据问题较多，可以取消本次导入，重新整理数据后，重新创建任务导入。 |
|||
</p> |
|||
<p>3、导入失败的数据，您可以下载失败文件，修改后重新创建任务导入</p> |
|||
</div> |
|||
</div> |
|||
<h3 class="title-small">数据导入明细</h3> |
|||
<el-row type="flex" justify=""> |
|||
<el-col :span="24"> |
|||
<i class="el-icon-circle-check" style="color: #1cc58c; font-size: 15px;font-weight: 600;"></i> {{ this.importSuccessNum || "--" }}条数据已导入。<el-button |
|||
type="text" |
|||
@click="handelClickLook('success')" |
|||
>查看</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" justify=""> |
|||
<el-col :span="24"> |
|||
<i class="el-icon-circle-close" style="color: #ff5b5d;font-size: 15px;font-weight: 600;"></i> {{ this.importFailNum || "--" }}条问题数据导入失败。<el-button |
|||
type="text" |
|||
@click="handelClickLook('fail')" |
|||
>查看</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
<el-dialog |
|||
title="列表" |
|||
:visible.sync="showTable" |
|||
width="50%" |
|||
v-if="showTable" |
|||
> |
|||
<el-table |
|||
:data="tableData" |
|||
row-key="fileCode" |
|||
border |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column |
|||
v-for="item in tableHeader" |
|||
:key="item.columnName" |
|||
:prop="item.columnName" |
|||
:label="item.label" |
|||
:align="item.align" |
|||
show-overflow-tooltip |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ handleFilterSpan(scope.row, item) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="pageNo" |
|||
:page-size="pageSize" |
|||
:total="total" |
|||
layout=" prev, pager, next" |
|||
@current-change="pageCurrentChangeHandle" |
|||
> |
|||
</el-pagination> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="showTable = false">取 消</el-button> |
|||
<el-button type="primary" @click="showTable = false" |
|||
>确 定</el-button |
|||
> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
rules: { |
|||
importCategory: [ |
|||
{ required: true, message: "请选择任务类型", trigger: "change" }, |
|||
], |
|||
taskName: [ |
|||
{ required: true, message: "请输入任务名称", trigger: "change" }, |
|||
], |
|||
}, |
|||
resident_category_import_list: [], |
|||
taskId: null, |
|||
timerId: null, |
|||
importSuccessNum: null, |
|||
importFailNum: null, |
|||
importCategory: null, |
|||
showTable: false, |
|||
tableHeader: [], |
|||
tableData:[], |
|||
pageNo:1, |
|||
pageSize:20, |
|||
total:0, |
|||
tableType:null, |
|||
}; |
|||
}, |
|||
props: { |
|||
fileCodeRow: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
fileCode:{ |
|||
type:String, |
|||
default:"" |
|||
} |
|||
}, |
|||
async created() { |
|||
await this.getTaskInfo(); |
|||
await this.startTimer(); |
|||
}, |
|||
methods: { |
|||
handleFilterSpan(row, item) { |
|||
let _val = ""; |
|||
if (item.options && item.options.length > 0) { |
|||
item.options.forEach((n) => { |
|||
if (n.value === row[item.columnName]) _val = n.label; |
|||
}); |
|||
} |
|||
return _val || row[item.columnName]; |
|||
}, |
|||
startTimer() { |
|||
if (!this.timerId) { |
|||
this.timerId = setInterval(this.getProcessRate, 500); |
|||
} |
|||
}, |
|||
// 停止定时器 |
|||
stopTimer() { |
|||
clearInterval(this.timerId); |
|||
this.timerId = null; |
|||
}, |
|||
async getProcessRate() { |
|||
let url = "/actual/base/intelligentImportData/processRate"; |
|||
let parm = { |
|||
fileCode: this.fileCodeRow|| this.fileCode, |
|||
}; |
|||
let res = await requestPost(url, parm); |
|||
if (res.code == 0) { |
|||
if (res.data === 100) { |
|||
this.stopTimer(); |
|||
this.$emit('successImport') |
|||
}else{ |
|||
this.$emit('updateProgress',res.data) |
|||
} |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTaskInfo() { |
|||
let url = "/actual/base/intelligentImportData/getTaskInfo"; |
|||
let parm = { |
|||
fileCode: this.fileCodeRow || this.fileCode, |
|||
}; |
|||
let { data, code, msg } = await requestPost(url, parm); |
|||
if (code == 0) { |
|||
this.taskId = data.taskId; |
|||
this.importFailNum = data.importFailNum.toString(); |
|||
this.importSuccessNum = data.importSuccessNum.toString(); |
|||
this.importCategory = data.importCategory; |
|||
this.$emit('updateoperatorName',{operatorName:data.operatorName,createdTime:data.createdTime}) |
|||
if (data.processStatus != "processing") { |
|||
this.stopTimer(); |
|||
} |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async handelClickLook(type) { |
|||
this.showTable = true; |
|||
this.tableType = type; |
|||
this.pageNo = 1; |
|||
this.getTable() |
|||
}, |
|||
async getTable(){ |
|||
let url = "/actual/base/excelDataShow/quaryExcelDataList"; |
|||
const {pageNo,pageSize,importCategory,tableType} = this; |
|||
let parm = { |
|||
taskId: this.taskId, |
|||
boolranFlag: tableType == "success" ? "1" : "0", |
|||
pageNo, |
|||
pageSize, |
|||
fileCategory:importCategory, |
|||
}; |
|||
let { data, code, msg } = await requestPost(url, parm); |
|||
if (code == 0) { |
|||
this.showTable = true; |
|||
this.tableHeader = Object.entries(data.columnsDict).map((item) => ({ |
|||
label: item[0], |
|||
columnName: item[1], |
|||
})); //属性名和属性值 |
|||
this.tableData = data.excelDataShowDTOList.list; |
|||
this.total = data.excelDataShowDTOList.total; |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async cancelTask() { |
|||
let url = "/actual/base/intelligentImportData/cancelTask"; |
|||
let parm = { |
|||
fileCode: this.fileCode, |
|||
taskId: this.taskId, |
|||
}; |
|||
let { data, code, msg } = await requestPost(url, parm); |
|||
if (code == 0) { |
|||
console.log(data); |
|||
this.$message.info("任务已取消"); |
|||
this.$emit("handelClickBack"); |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handelClickBack() { |
|||
this.$confirm(`您确定要取消本次数据导入任务吗`, { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "再想想", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.cancelTask(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
|
|||
handelClickBackList() { |
|||
this.$emit("handelClickBack"); |
|||
}, |
|||
}, |
|||
destroyed() { |
|||
this.stopTimer(); |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
@import "@/assets/scss/pages/smartImport.scss"; |
|||
.left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #838383; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,116 @@ |
|||
<template> |
|||
<div class="m-detail-main"> |
|||
<el-card> |
|||
<div class="steps"> |
|||
<el-steps :active="progress"> |
|||
<el-step |
|||
:class="[this.operatorName == null ? 'showNum' : '']" |
|||
title="创建任务" |
|||
:description="`${this.operatorName}(${this.createdTime})`" |
|||
></el-step> |
|||
<el-step |
|||
title="正在导入" |
|||
:class="[this.progress == 2 || this.progress == 3 ? '' : 'showNum']" |
|||
:description="`导入进度${ |
|||
this.progressNum ? this.progressNum : 100 |
|||
}%`" |
|||
></el-step> |
|||
<el-step title="导入完成"></el-step> |
|||
</el-steps> |
|||
</div> |
|||
<div style="margin-top: 37px"> |
|||
<created-task |
|||
v-if="progress == 1" |
|||
@handelClickUpload="handelClickUpload" |
|||
@handelClickBack="handelClickBack" |
|||
></created-task> |
|||
<execute-task |
|||
v-if="progress == 2" |
|||
@successImport="successImport" |
|||
@handelClickBack="handelClickBack" |
|||
@updateProgress="updateProgress" |
|||
:fileCode="fileCode" |
|||
:fileCodeRow="fileCodeRow" |
|||
@updateoperatorName="updateoperatorName" |
|||
></execute-task> |
|||
<complete-task |
|||
v-if="progress == 3" |
|||
@handelClickBack="handelClickBack" |
|||
:fileCodeRow="fileCodeRow" |
|||
@updateoperatorName="updateoperatorName" |
|||
:fileCode="fileCode" |
|||
></complete-task> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import createdTask from "./createdTask.vue"; |
|||
import executeTask from "./executeTask.vue"; |
|||
import completeTask from "./completeTask.vue"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
progress: 1, |
|||
fileCode: null, |
|||
progressNum: null, |
|||
createdTime: null, |
|||
operatorName: null, |
|||
}; |
|||
}, |
|||
props: { |
|||
fileCodeRow: { |
|||
type: String, |
|||
default: null, |
|||
}, |
|||
taskId: { |
|||
type: String, |
|||
default: null, |
|||
}, |
|||
processStatus: { |
|||
type: String, |
|||
default: null, |
|||
}, |
|||
}, |
|||
created() { |
|||
console.log(this.processStatus); |
|||
if (this.processStatus) { |
|||
this.progress = this.processStatus == "processing" ? 2 : 3; |
|||
} |
|||
}, |
|||
methods: { |
|||
handelClickUpload(fileCode) { |
|||
this.progress = 2; |
|||
this.fileCode = fileCode; |
|||
}, |
|||
handelClickBack() { |
|||
this.$emit("handleClose"); |
|||
}, |
|||
successImport() { |
|||
this.progress = 3; |
|||
this.progressNum = 100; |
|||
}, |
|||
updateProgress(num) { |
|||
this.progressNum = num; |
|||
}, |
|||
updateoperatorName({ operatorName, createdTime }) { |
|||
this.operatorName = operatorName; |
|||
this.createdTime = createdTime; |
|||
}, |
|||
}, |
|||
components: { createdTask, executeTask, completeTask }, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
@import "@/assets/scss/pages/smartImport.scss"; |
|||
.showNum { |
|||
/deep/.el-step__description { |
|||
display: none; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div v-show="pageType == 'list'"> |
|||
<div class="m-search"> |
|||
<el-form :inline="true" :model="formData" :label-width="'100px'"> |
|||
<el-form-item label="任务类型"> |
|||
<el-select v-model="formData.importCategory" placeholder="请输入" size="small" class="u-item-width-normal" clearable> |
|||
<el-option v-for="item in dicts.resident_category_import" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="状态"> |
|||
<el-select v-model="formData.processStatus" placeholder="请输入" size="small" class="u-item-width-normal" clearable> |
|||
<el-option v-for="item in dicts.import_status" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="任务名称"> |
|||
<el-input v-model="formData.taskName" placeholder="请输入" size="small" class="u-item-width-normal" |
|||
clearable></el-input> |
|||
</el-form-item> |
|||
<el-row type="flex"> |
|||
<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" is-plain class="diy-button--white el-button--default" size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<div class="div_btn"> |
|||
<el-button size="small" @click="handleAdd" type="primary" icon="el-icon-plus">新建导入任务</el-button> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" border v-loading="tableLoading" class="m-table-item" style="width: 100%" |
|||
:height="maxTableHeight"> |
|||
<el-table-column type="selection" fixed="left" align="center" width="50" /> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
|
|||
<el-table-column prop="taskName" align="center" label="任务名称" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="importCategory" align="center" width="100" label="任务类型" :show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
scope.row.importCategory |
|||
? scope.row.importCategory == "1" |
|||
? "导入房屋信息" |
|||
: scope.row.importCategory == "2" |
|||
? "导入居民信息" |
|||
: "--" |
|||
: "--" |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="processStatus" align="center" width="200" label="状态" :show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ binaryText(scope.row.processStatus) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="importSuccessNum" align="center" width="80" label="成功数目" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="importFailNum" align="center" width="80" label="失败数目" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="operatorName" align="center" width="100" label="操作人" :show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="completedTime" align="center" width="180" label="操作完成时间" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column fixed="right" label="操作" align="center" width="220"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleCloseImport(scope.row)" v-if="scope.row.importCategory === 'processing'" type="text" size="small">取消导入</el-button> |
|||
<!-- <el-button @click="handleCloseCheck(scope.row)" v-if="scope.row.importCategory === 'processing'" type="text" size="small">确认完成</el-button> --> |
|||
<el-button @click="handleDetail(scope.row)" type="text" size="small">查看</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 v-if="pageType == 'add'"> |
|||
<!-- :eventDetailData="eventDetailData" --> |
|||
<smart-import-info ref="eleEditForm" :pageType="pageType" |
|||
@handleClose="handleClose" @handleOk="handleOk" :fileCodeRow="fileCode" :taskId="taskId" :processStatus="processStatus"/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { genderList, binaryOptionList } from "@/js/columns/constants"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { mapGetters } from "vuex"; |
|||
import axios from "axios"; |
|||
import smartImportInfo from "./cpts/smartImportInfo"; |
|||
export default { |
|||
components: {smartImportInfo}, |
|||
|
|||
data() { |
|||
return { |
|||
tableLoading: false, |
|||
searchH: 170, |
|||
tableData: [], |
|||
genderList, |
|||
binaryOptionList, |
|||
formData: {}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
pageType: "list", // 列表list 新增add 详情detail |
|||
|
|||
dicts: { |
|||
import_status:[], |
|||
resident_category_import:[], |
|||
}, //字典对象 |
|||
|
|||
fileCode:null, |
|||
taskId:null, |
|||
processStatus:null, |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
const h = this.clientHeight - this.searchH - 330 + this.iframeHeight; |
|||
const _h = this.clientHeight - 330 - this.searchH; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
watch: {}, |
|||
async created() { |
|||
await this.getDicts(); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
// --------------------------------------字典------------------------------------------ |
|||
async getDicts() { |
|||
try { |
|||
const dictTypes = ["import_status", 'resident_category_import']; // 把所有dictType放在这个数组里 |
|||
const requests = dictTypes.map((dictType) => { |
|||
return this.$http.post("sys/dict/data/dictlist", { |
|||
dictType: dictType, |
|||
}); |
|||
}); |
|||
const results = await Promise.all(requests); |
|||
results.forEach((result, index) => { |
|||
if (result.data.code === 0) { |
|||
this.dicts[dictTypes[index]].push(...result.data.data); |
|||
} else { |
|||
console.log(`获取${dictTypes[index]}字典失败: ${result.msg}`); |
|||
} |
|||
}); |
|||
} catch (error) { |
|||
console.log("获取字典失败: ", error); |
|||
} |
|||
}, |
|||
binaryText(value) { |
|||
let text = ""; |
|||
let foundItem = this.dicts.import_status.filter( |
|||
(item) => item.value == value |
|||
)[0]; |
|||
text = foundItem ? foundItem.label : "--"; |
|||
return text; |
|||
}, |
|||
// ------------------------------------事件------------------------------------------ |
|||
// 搜索事件 |
|||
handleSearch(val) { |
|||
console.log(this.formData); |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
// 调出新增组件 |
|||
async handleAdd() { |
|||
this.pageType = "add"; |
|||
this.fileCode = null; |
|||
}, |
|||
// 查看详情触发事件 |
|||
async handleDetail(row) { |
|||
this.pageType = "add"; |
|||
const {taskId,fileCode,processStatus} = row; |
|||
this.taskId = taskId; |
|||
this.fileCode = fileCode; |
|||
this.processStatus = processStatus; |
|||
}, |
|||
|
|||
// 新增弹出框组件取消事件 |
|||
handleClose() { |
|||
this.pageType = "list"; |
|||
this.processStatus = null; |
|||
}, |
|||
// 新增弹出框组件确定事件 |
|||
handleOk(type) { |
|||
|
|||
}, |
|||
// 删除触发事件 |
|||
async handleDel(row) { |
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.cancelFuwu([row.categorizedResiId]); |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
}); |
|||
}, |
|||
// 删除处理 |
|||
async cancelFuwu(id) { |
|||
const url = "/actual/base/resiCategorized/disability/deleteBatch"; |
|||
const { data, code, msg } = await requestPost(url, id); |
|||
if (code === 0) { |
|||
this.$message.success("删除成功！"); |
|||
this.getTableData(); |
|||
} else { |
|||
this.$message.error("操作失败！"); |
|||
} |
|||
}, |
|||
// 获取列表 |
|||
async getTableData() { |
|||
this.tableLoading = true; |
|||
const url = "/commonservice/import-task/pageList"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
this.tableLoading = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list; |
|||
} 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 = {}; |
|||
|
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
}, |
|||
|
|||
props: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue