10 changed files with 850 additions and 513 deletions
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,103 @@ |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content_box{ |
|||
display: flex; |
|||
.left{ |
|||
width: 50%; |
|||
.rotate{ |
|||
animation: rotate 5s infinite linear; |
|||
} |
|||
.u-item-width-normal{ |
|||
width: 240px; |
|||
} |
|||
.text-center{ |
|||
border: 1px #c5c9d1 dashed ; |
|||
width: calc( 100% - 20px); |
|||
height: 175px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.el-upload__text{ |
|||
color: #c5c9d1; |
|||
} |
|||
} |
|||
} |
|||
.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); |
|||
} |
|||
} |
|||
|
|||
@ -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,70 @@ |
|||
<template> |
|||
<div class=""> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<i class="el-icon-success" style="font-size: 50px; color: #1cc58c;"></i> |
|||
<p>导入完成</p> |
|||
</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> |
|||
</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: [], |
|||
}; |
|||
}, |
|||
props: {}, |
|||
created() {}, |
|||
methods: { |
|||
handelClickUpload() { |
|||
this.$emit("handelClickUpload"); |
|||
}, |
|||
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"; |
|||
.left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #838383; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<div class=""> |
|||
<h3 class="title-small">基本信息</h3> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<el-form :model="form" :rules="rules" ref="importForm"> |
|||
<el-form-item label="任务类型" prop="importCategory"> |
|||
<el-select |
|||
v-model="form.importCategory" |
|||
placeholder="请选择" |
|||
size="small" |
|||
class="u-item-width-normal" |
|||
> |
|||
<el-option |
|||
v-for="item in resident_category_import_list" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
clearable |
|||
:key="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="下载模板" prop="desc"> |
|||
<span |
|||
>导入模板.xlsx <el-button type="text">点击下载</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" |
|||
></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" |
|||
>查看</el-button |
|||
> |
|||
</p> |
|||
<p>2、导入房屋和居民信息前请先确保已经导入了完整的小区楼栋信息。</p> |
|||
<p> |
|||
3、您也可以<el-button class="textBtn" type="text" |
|||
>点击这里下载</el-button |
|||
>全部的导入模板文件 |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<h3 class="title-small">上传数据</h3> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<el-upload |
|||
:headers="$getElUploadHeaders()" |
|||
name="processFile" |
|||
:action="url" |
|||
:show-file-list="false" |
|||
:on-progress="handleProgress" |
|||
:before-upload="beforeUploadHandle" |
|||
:on-success="successHandle" |
|||
:http-request="uploadHttpRequest" |
|||
class="text-center" |
|||
> |
|||
<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> |
|||
</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: [], |
|||
}; |
|||
}, |
|||
props: {}, |
|||
created() { |
|||
this.getDictList(); |
|||
}, |
|||
methods: { |
|||
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 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("字典错误"); |
|||
} |
|||
}, |
|||
handelClickUpload(){ |
|||
this.$emit('handelClickUpload') |
|||
}, |
|||
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,92 @@ |
|||
<template> |
|||
<div class=""> |
|||
<div class="content_box"> |
|||
<div class="left"> |
|||
<img class="rotate" src="@/assets/images/index/loading.png" alt="" /> |
|||
<p>请您耐心等待！如果您发现导入数据问题较多，可以取消导入</p> |
|||
<el-button |
|||
style="margin-left: 10px" |
|||
size="small" |
|||
class="diy-button--white" |
|||
plain |
|||
@click="handelClickBack" |
|||
>取消导入</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> |
|||
<p>3、导入失败的数据，您可以下载失败文件，修改后重新创建任务导入</p> |
|||
</div> |
|||
</div> |
|||
<h3 class="title-small">数据导入明细</h3> |
|||
</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: [], |
|||
}; |
|||
}, |
|||
props: {}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
|
|||
handelClickUpload() { |
|||
this.$emit("handelClickUpload"); |
|||
}, |
|||
handelClickBack() { |
|||
this.$confirm(`您确定要取消本次数据导入任务吗`, { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '再想想', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$emit("handelClickBack"); |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
}, |
|||
}, |
|||
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,51 @@ |
|||
<template> |
|||
<div class="m-detail-main"> |
|||
<el-card> |
|||
<div class="steps"> |
|||
<el-steps :active="progress" > |
|||
<!-- description="这是一段很长很长很长的描述性文字" --> |
|||
<el-step title="创建任务" ></el-step> |
|||
<el-step title="正在导入"></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"@handelClickBack="handelClickBack"></execute-task> |
|||
<complete-task v-if="progress == 3"@handelClickBack="handelClickBack"></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, |
|||
}; |
|||
}, |
|||
props: {}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
handelClickUpload(){ |
|||
this.progress = 2; |
|||
}, |
|||
handelClickBack(){ |
|||
this.$emit('handleClose'); |
|||
}, |
|||
}, |
|||
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"; |
|||
</style> |
|||
|
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<div class=""> |
|||
detail |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
|
|||
@ -0,0 +1,39 @@ |
|||
<template> |
|||
<div class=""> |
|||
<div v-if="pageType == 'add'"> |
|||
<smart-import-add @handleClose="handleClose" @handelClickCloseUpload="handelClickCloseUpload"></smart-import-add> |
|||
</div> |
|||
<div v-if="pageType == 'detail'"> |
|||
<smart-import-detail></smart-import-detail> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import smartImportAdd from "./smartImportAdd"; |
|||
import smartImportDetail from "./smartImportDetail"; |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
pageType: String, |
|||
default: "", |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleClose(){ |
|||
this.$emit("handleClose"); |
|||
}, |
|||
handelClickCloseUpload(){ |
|||
this.$emit("handelClickCloseUpload"); |
|||
}, |
|||
}, |
|||
components: {smartImportAdd,smartImportDetail}, |
|||
computed: {}, |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,276 @@ |
|||
<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="originFileName" 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="createdByName" 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 == 'detail' || pageType == 'add'"> |
|||
<!-- :eventDetailData="eventDetailData" --> |
|||
<smart-import-info ref="eleEditForm" :pageType="pageType" |
|||
@handleClose="handleClose" @handleOk="handleOk"/> |
|||
</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: "add", // 列表list 新增add 详情detail |
|||
|
|||
dicts: { |
|||
import_status:[], |
|||
resident_category_import:[], |
|||
|
|||
}, //字典对象 |
|||
}; |
|||
}, |
|||
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"; |
|||
}, |
|||
// 查看详情触发事件 |
|||
async handleDetail(row) { |
|||
this.pageType = "detail"; |
|||
}, |
|||
|
|||
// 新增弹出框组件取消事件 |
|||
handleClose() { |
|||
this.pageType = "list"; |
|||
|
|||
}, |
|||
// 新增弹出框组件确定事件 |
|||
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/page"; |
|||
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