|
|
@ -1,144 +1,186 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div v-if="list.length > 0" |
|
|
<div v-if="list.length > 0" class="diy-container"> |
|
|
class="diy-container"> |
|
|
|
|
|
<el-tabs v-model="activeName"> |
|
|
<el-tabs v-model="activeName"> |
|
|
<el-tab-pane label="自定义模板" |
|
|
<el-tab-pane label="自定义模板" name="first"> |
|
|
name="first"> |
|
|
|
|
|
<div class="diy-wr"> |
|
|
<div class="diy-wr"> |
|
|
<div class="left"> |
|
|
<div class="left"> |
|
|
<el-tabs v-model="leftActive" |
|
|
<el-tabs |
|
|
|
|
|
v-model="leftActive" |
|
|
tab-position="left" |
|
|
tab-position="left" |
|
|
class="left-h" |
|
|
class="left-h" |
|
|
@tab-click="handleTabsClick"> |
|
|
@tab-click="handleTabsClick" |
|
|
<el-tab-pane v-for="item in leftList" |
|
|
> |
|
|
|
|
|
<el-tab-pane |
|
|
|
|
|
v-for="item in leftList" |
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:name="item.id"> |
|
|
:name="item.id" |
|
|
|
|
|
> |
|
|
<div class="pd10 check-boxwr scroll-h"> |
|
|
<div class="pd10 check-boxwr scroll-h"> |
|
|
<checkBox v-if="item.queryItemList.length > 0" |
|
|
<checkBox |
|
|
|
|
|
v-if="item.queryItemList.length > 0" |
|
|
:ref="'checkbox' + item.id" |
|
|
:ref="'checkbox' + item.id" |
|
|
:list="item.queryItemList" |
|
|
:list="item.queryItemList" |
|
|
@change="handleChangeBox" /> |
|
|
@change="handleChangeBox" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
|
|
|
|
|
|
</el-tabs> |
|
|
</el-tabs> |
|
|
</div> |
|
|
</div> |
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<div class="right-header"> |
|
|
<div class="right-header"> |
|
|
<div class="title">导出信息</div> |
|
|
<div class="title">导出信息</div> |
|
|
<el-button plain |
|
|
<el-button plain @click="handlePreview('')" |
|
|
@click="handlePreview('')">预览</el-button> |
|
|
>预览</el-button |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h80 scroll-h"> |
|
|
<div class="h80 scroll-h"> |
|
|
<el-collapse v-model="activeCollapse" |
|
|
<el-collapse |
|
|
id="collapsWr"> |
|
|
v-model="activeCollapse" |
|
|
<el-collapse-item v-for="item in rightList" |
|
|
id="collapsWr" |
|
|
|
|
|
> |
|
|
|
|
|
<el-collapse-item |
|
|
|
|
|
v-for="item in rightList" |
|
|
:key="item.id" |
|
|
:key="item.id" |
|
|
:title="item.label" |
|
|
:title="item.label" |
|
|
:name="item.id" |
|
|
:name="item.id" |
|
|
class="col-h"> |
|
|
class="col-h" |
|
|
<dragItem :ref="'drag' + item.id" |
|
|
> |
|
|
|
|
|
<dragItem |
|
|
|
|
|
:ref="'drag' + item.id" |
|
|
:list="item.queryItemList" |
|
|
:list="item.queryItemList" |
|
|
:id="item.id" |
|
|
:id="item.id" |
|
|
@del="handleDelItem" |
|
|
@del="handleDelItem" |
|
|
@drag="handleDrag($event, item)"></dragItem> |
|
|
@drag="handleDrag($event, item)" |
|
|
|
|
|
></dragItem> |
|
|
</el-collapse-item> |
|
|
</el-collapse-item> |
|
|
</el-collapse> |
|
|
</el-collapse> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
<el-tab-pane label="模板列表" |
|
|
<el-tab-pane label="模板列表" name="second"> |
|
|
name="second"> |
|
|
<el-table |
|
|
<el-table :data="tableData" |
|
|
:data="tableData" |
|
|
height="calc(80vh - 140px)" |
|
|
height="calc(80vh - 140px)" |
|
|
style="width: 100%"> |
|
|
style="width: 100%" |
|
|
<el-table-column type="index" |
|
|
> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
type="index" |
|
|
label="序号" |
|
|
label="序号" |
|
|
align="center" |
|
|
align="center" |
|
|
width="50"> |
|
|
width="50" |
|
|
|
|
|
> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column prop="name" |
|
|
<el-table-column |
|
|
|
|
|
prop="name" |
|
|
label="模板名称" |
|
|
label="模板名称" |
|
|
align="center" |
|
|
align="center" |
|
|
min-width="180"> |
|
|
min-width="180" |
|
|
|
|
|
> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column prop="createdBy" |
|
|
<el-table-column |
|
|
|
|
|
prop="createdBy" |
|
|
align="center" |
|
|
align="center" |
|
|
label="创建者" |
|
|
label="创建者" |
|
|
width="180"> |
|
|
width="180" |
|
|
|
|
|
> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column align="center" |
|
|
<el-table-column |
|
|
|
|
|
align="center" |
|
|
prop="createdTime" |
|
|
prop="createdTime" |
|
|
label="创建时间" |
|
|
label="创建时间" |
|
|
width="180"> |
|
|
width="180" |
|
|
|
|
|
> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column align="center" |
|
|
<el-table-column align="center" label="操作" width="160"> |
|
|
label="操作" |
|
|
|
|
|
width="160"> |
|
|
|
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<el-button v-if="scope.row.isSelf" |
|
|
<el-button |
|
|
|
|
|
v-if="scope.row.isSelf" |
|
|
type="text" |
|
|
type="text" |
|
|
size="small" |
|
|
size="small" |
|
|
class="div-table-button--delete" |
|
|
class="div-table-button--delete" |
|
|
@click="handleDeltemplate(scope.row.id)">删除</el-button> |
|
|
@click="handleDeltemplate(scope.row.id)" |
|
|
<el-button type="text" |
|
|
>删除</el-button |
|
|
|
|
|
> |
|
|
|
|
|
<el-button |
|
|
|
|
|
type="text" |
|
|
size="small" |
|
|
size="small" |
|
|
class="div-table-button--detail" |
|
|
class="div-table-button--detail" |
|
|
@click="handlePreview(scope.row.id)">预览</el-button> |
|
|
@click="handlePreview(scope.row.id)" |
|
|
<el-button type="text" |
|
|
>预览</el-button |
|
|
|
|
|
> |
|
|
|
|
|
<el-button |
|
|
|
|
|
type="text" |
|
|
size="small" |
|
|
size="small" |
|
|
class="div-table-button--edit" |
|
|
class="div-table-button--edit" |
|
|
@click="handleExportTemplate(scope.row.id)">导出</el-button> |
|
|
@click="handleExportTemplate(scope.row.id)" |
|
|
|
|
|
>导出</el-button |
|
|
|
|
|
> |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
</el-tab-pane> |
|
|
</el-tab-pane> |
|
|
</el-tabs> |
|
|
</el-tabs> |
|
|
<div v-if="activeName == 'first'" |
|
|
<div v-if="activeName == 'first'" class="diy-footer"> |
|
|
class="diy-footer"> |
|
|
|
|
|
<div class="left"> |
|
|
<div class="left"> |
|
|
<div class="flex-div"> |
|
|
<div class="flex-div"> |
|
|
<div>模板名称：</div> |
|
|
<div>模板名称：</div> |
|
|
<el-input v-model="form.name" |
|
|
<el-input |
|
|
|
|
|
v-model="form.name" |
|
|
maxlength="20" |
|
|
maxlength="20" |
|
|
class="wd200 mr10" /> |
|
|
class="wd200 mr10" |
|
|
|
|
|
/> |
|
|
<div>自定义表头：</div> |
|
|
<div>自定义表头：</div> |
|
|
<el-input v-model="form.title" maxlength="20" class="wd200 mr10" /> |
|
|
<el-input |
|
|
<el-checkbox v-model="form.isSaveTemp">保存为常用模板</el-checkbox> |
|
|
v-model="form.title" |
|
|
|
|
|
maxlength="20" |
|
|
|
|
|
class="wd200 mr10" |
|
|
|
|
|
/> |
|
|
|
|
|
<el-checkbox v-model="form.isSaveTemp" |
|
|
|
|
|
>保存为常用模板</el-checkbox |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<el-button class="diy-button--delete" |
|
|
<el-button |
|
|
|
|
|
class="diy-button--delete" |
|
|
:loading="exportLoading" |
|
|
:loading="exportLoading" |
|
|
@click="handleExport">导出</el-button> |
|
|
@click="handleExport" |
|
|
|
|
|
>导出</el-button |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<el-dialog :visible.sync="diyDialog" |
|
|
<el-dialog |
|
|
|
|
|
:visible.sync="diyDialog" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-press-escape="false" |
|
|
:close-on-press-escape="false" |
|
|
width="1150px" |
|
|
width="1150px" |
|
|
append-to-body |
|
|
append-to-body |
|
|
top="5vh" |
|
|
top="5vh" |
|
|
class="dialog-h" |
|
|
class="dialog-h" |
|
|
@close="handleClose"> |
|
|
@close="handleClose" |
|
|
<div style="padding: 20px;"> |
|
|
> |
|
|
<el-table :data="tableData" |
|
|
<div style="padding: 20px"> |
|
|
|
|
|
<el-table |
|
|
|
|
|
:data="tableData" |
|
|
height="calc(80vh - 140px)" |
|
|
height="calc(80vh - 140px)" |
|
|
style="width: 100%"> |
|
|
style="width: 100%" |
|
|
<el-table-column v-for="(item, index) in previewList" |
|
|
> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
v-for="(item, index) in previewList" |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:key="index" |
|
|
:key="index" |
|
|
align="center" |
|
|
align="center" |
|
|
min-width="120"> |
|
|
min-width="120" |
|
|
<el-table-column v-for="(n, i) in item.children" |
|
|
> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
v-for="(n, i) in item.children" |
|
|
:label="n.label" |
|
|
:label="n.label" |
|
|
:key="i" |
|
|
:key="i" |
|
|
align="center" |
|
|
align="center" |
|
|
min-width="120"> |
|
|
min-width="120" |
|
|
|
|
|
> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
@ -146,61 +188,63 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import checkBox from '../../../components/checkBox.vue' |
|
|
import checkBox from "../../../components/checkBox.vue"; |
|
|
import dragItem from '../../../components/dragItem.vue' |
|
|
import dragItem from "../../../components/dragItem.vue"; |
|
|
import Sortable from 'sortablejs' |
|
|
import Sortable from "sortablejs"; |
|
|
import { requestPost } from "@/js/dai/request" |
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
props: { |
|
|
props: { |
|
|
list: { |
|
|
list: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
default: () => [] |
|
|
default: () => [], |
|
|
}, |
|
|
}, |
|
|
search: { |
|
|
search: { |
|
|
type: Object, |
|
|
type: Object, |
|
|
default: () => { } |
|
|
default: () => {}, |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
components: { |
|
|
components: { |
|
|
checkBox, |
|
|
checkBox, |
|
|
dragItem |
|
|
dragItem, |
|
|
}, |
|
|
}, |
|
|
data () { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
exportLoading: false, |
|
|
exportLoading: false, |
|
|
activeCollapse: ['1'], |
|
|
activeCollapse: ["1"], |
|
|
activeName: 'first', |
|
|
activeName: "first", |
|
|
leftActive: '', |
|
|
leftActive: "", |
|
|
info: {}, |
|
|
info: {}, |
|
|
rightList: [], |
|
|
rightList: [], |
|
|
leftList: [], |
|
|
leftList: [], |
|
|
form: { |
|
|
form: { |
|
|
isSaveTemp: false, |
|
|
isSaveTemp: false, |
|
|
name: '', |
|
|
name: "", |
|
|
itemList: [] |
|
|
itemList: [], |
|
|
}, |
|
|
}, |
|
|
tableData: [], |
|
|
tableData: [], |
|
|
previewList: [], |
|
|
previewList: [], |
|
|
diyDialog: false, |
|
|
diyDialog: false, |
|
|
} |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
async created () { |
|
|
async created() { |
|
|
this.list.forEach(item => { |
|
|
this.list.forEach((item) => { |
|
|
this.$set(this.info, item.id, []) |
|
|
this.$set(this.info, item.id, []); |
|
|
}) |
|
|
}); |
|
|
this.leftActive = this.list[0].id |
|
|
this.leftActive = this.list[0].id; |
|
|
this.leftList = [...this.list] |
|
|
this.leftList = [...this.list]; |
|
|
this.leftList[0].queryItemList = await this.getExportChildList(this.leftList[0].id) |
|
|
this.leftList[0].queryItemList = await this.getExportChildList( |
|
|
console.log('infodiy----', this.leftList) |
|
|
this.leftList[0].id |
|
|
this.getTemplateList() |
|
|
); |
|
|
|
|
|
console.log("infodiy----", this.leftList); |
|
|
|
|
|
this.getTemplateList(); |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
rightList: { |
|
|
rightList: { |
|
|
handler (val) { |
|
|
handler(val) { |
|
|
if (val.length > 0) this.dragSort() |
|
|
if (val.length > 0) this.dragSort(); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
deep: true |
|
|
deep: true, |
|
|
}, |
|
|
}, |
|
|
// list: { |
|
|
// list: { |
|
|
// handler(val) { |
|
|
// handler(val) { |
|
|
@ -214,227 +258,241 @@ export default { |
|
|
// }, |
|
|
// }, |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
handleChangeBox ({ list, pid }) { |
|
|
handleChangeBox({ list, pid }) { |
|
|
console.log('ccccc----', list) |
|
|
console.log("ccccc----", list); |
|
|
// if (list.length == 0) return |
|
|
// if (list.length == 0) return |
|
|
let obj = {} |
|
|
let obj = {}; |
|
|
this.leftList.forEach(item => { |
|
|
this.leftList.forEach((item) => { |
|
|
if (item.id == pid) obj = { ...item, queryItemList: [...list] } |
|
|
if (item.id == pid) obj = { ...item, queryItemList: [...list] }; |
|
|
}) |
|
|
}); |
|
|
const groups = this.rightList.map(item => item.id) |
|
|
const groups = this.rightList.map((item) => item.id); |
|
|
if (groups.includes(pid)) { |
|
|
if (groups.includes(pid)) { |
|
|
this.rightList.forEach((item, i) => { |
|
|
this.rightList.forEach((item, i) => { |
|
|
if (item.id == pid) { |
|
|
if (item.id == pid) { |
|
|
item.queryItemList = [...list] |
|
|
item.queryItemList = [...list]; |
|
|
if (list.length == 0) this.rightList.splice(i, 1) |
|
|
if (list.length == 0) this.rightList.splice(i, 1); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
this.rightList.push(obj) |
|
|
this.rightList.push(obj); |
|
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
console.log('itemttt------', this.$refs[`drag${pid}`]) |
|
|
console.log("itemttt------", this.$refs[`drag${pid}`]); |
|
|
this.$refs[`drag${pid}`][0].dragSort() |
|
|
this.$refs[`drag${pid}`][0].dragSort(); |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
this.activeCollapse = [...this.activeCollapse, pid] |
|
|
this.activeCollapse = [...this.activeCollapse, pid]; |
|
|
}, |
|
|
}, |
|
|
handleTabsClick (val) { |
|
|
handleTabsClick(val) { |
|
|
console.log('tabs-----', val) |
|
|
console.log("tabs-----", val); |
|
|
this.leftList.forEach(async item => { |
|
|
this.leftList.forEach(async (item) => { |
|
|
if (item.id == val.name) { |
|
|
if (item.id == val.name) { |
|
|
if (item.queryItemList.length == 0) item.queryItemList = await this.getExportChildList(item.id) |
|
|
if (item.queryItemList.length == 0) |
|
|
|
|
|
item.queryItemList = await this.getExportChildList( |
|
|
|
|
|
item.id |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
handleDelItem (val) { |
|
|
handleDelItem(val) { |
|
|
const { item, index } = val |
|
|
const { item, index } = val; |
|
|
console.log('item------', item, this.$refs[`checkbox${item.itemGroupId}`]) |
|
|
console.log( |
|
|
let checkList = this.$refs[`checkbox${item.itemGroupId}`][0].checkedList |
|
|
"item------", |
|
|
|
|
|
item, |
|
|
|
|
|
this.$refs[`checkbox${item.itemGroupId}`] |
|
|
|
|
|
); |
|
|
|
|
|
let checkList = |
|
|
|
|
|
this.$refs[`checkbox${item.itemGroupId}`][0].checkedList; |
|
|
checkList.forEach((n, i) => { |
|
|
checkList.forEach((n, i) => { |
|
|
if (n == item.itemId) { |
|
|
if (n == item.itemId) { |
|
|
checkList.splice(i, 1) |
|
|
checkList.splice(i, 1); |
|
|
this.$refs[`checkbox${item.itemGroupId}`][0].handleChange(checkList) |
|
|
this.$refs[`checkbox${item.itemGroupId}`][0].handleChange( |
|
|
|
|
|
checkList |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
this.rightList.forEach((n, i) => { |
|
|
this.rightList.forEach((n, i) => { |
|
|
if (n.id === item.itemGroupId) { |
|
|
if (n.id === item.itemGroupId) { |
|
|
n.queryItemList.splice(index, 1) |
|
|
n.queryItemList.splice(index, 1); |
|
|
if (n.queryItemList.length === 0) this.rightList.splice(i, 1) |
|
|
if (n.queryItemList.length === 0) |
|
|
|
|
|
this.rightList.splice(i, 1); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
dragSort () { |
|
|
dragSort() { |
|
|
const el = document.getElementById('collapsWr') |
|
|
const el = document.getElementById("collapsWr"); |
|
|
this.sortTable = Sortable.create(el, { |
|
|
this.sortTable = Sortable.create(el, { |
|
|
group: 'el-collapse-item', |
|
|
group: "el-collapse-item", |
|
|
ghostClass: 'sortable-ghost', // Class name for the drop placeholder, |
|
|
ghostClass: "sortable-ghost", // Class name for the drop placeholder, |
|
|
animation: 500, |
|
|
animation: 500, |
|
|
delay: 0, |
|
|
delay: 0, |
|
|
onEnd: evt => { |
|
|
onEnd: (evt) => { |
|
|
console.log('evt----', evt) |
|
|
console.log("evt----", evt); |
|
|
const targetRow = this.rightList.splice(evt.oldIndex, 1)[0] |
|
|
const targetRow = this.rightList.splice(evt.oldIndex, 1)[0]; |
|
|
this.rightList.splice(evt.newIndex, 0, targetRow) |
|
|
this.rightList.splice(evt.newIndex, 0, targetRow); |
|
|
} |
|
|
}, |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
handleDrag (val, item) { |
|
|
handleDrag(val, item) { |
|
|
console.log('drag-----', val) |
|
|
console.log("drag-----", val); |
|
|
console.log('drag-----', item) |
|
|
console.log("drag-----", item); |
|
|
this.rightList.forEach((n, i) => { |
|
|
this.rightList.forEach((n, i) => { |
|
|
if (item.id == n.id) n.queryItemList = [...val] |
|
|
if (item.id == n.id) n.queryItemList = [...val]; |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
handleClose () { |
|
|
handleClose() { |
|
|
this.previewList = [] |
|
|
this.previewList = []; |
|
|
this.diyDialog = false |
|
|
this.diyDialog = false; |
|
|
}, |
|
|
}, |
|
|
handleDeltemplate (id) { |
|
|
|
|
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { |
|
|
handleDeltemplate(id) { |
|
|
confirmButtonText: '确定', |
|
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { |
|
|
cancelButtonText: '取消', |
|
|
confirmButtonText: "确定", |
|
|
type: 'warning' |
|
|
cancelButtonText: "取消", |
|
|
}).then(() => { |
|
|
type: "warning", |
|
|
this.delTemplate(id) |
|
|
}) |
|
|
}).catch(() => { |
|
|
.then(() => { |
|
|
|
|
|
this.delTemplate(id); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(() => { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
type: 'info', |
|
|
type: "info", |
|
|
message: '已取消删除' |
|
|
message: "已取消删除", |
|
|
|
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}) |
|
|
|
|
|
}, |
|
|
}, |
|
|
handlePreview (id) { |
|
|
handlePreview(id) { |
|
|
if (id) this.getPreview(id) |
|
|
if (id) this.getPreview(id); |
|
|
else { |
|
|
else { |
|
|
if (this.rightList.length == 0) return this.$message.error('请选择导出信息') |
|
|
if (this.rightList.length == 0) |
|
|
this.previewList = this.rightList.map(item => { |
|
|
return this.$message.error("请选择导出信息"); |
|
|
|
|
|
this.previewList = this.rightList.map((item) => { |
|
|
return { |
|
|
return { |
|
|
label: item.label, |
|
|
label: item.label, |
|
|
children: item.queryItemList |
|
|
children: item.queryItemList, |
|
|
} |
|
|
}; |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
this.diyDialog = true |
|
|
this.diyDialog = true; |
|
|
}, |
|
|
}, |
|
|
handleExport () { |
|
|
handleExport() { |
|
|
if (this.rightList.length === 0) return this.$message.error('请选择导出信息') |
|
|
if (this.rightList.length === 0) |
|
|
if (this.form.isSaveTemp && !this.form.name) return this.$message.error('请输入模板名称') |
|
|
return this.$message.error("请选择导出信息"); |
|
|
this.exportLoading = true |
|
|
if (this.form.isSaveTemp && !this.form.name) |
|
|
this.exportTemplate() |
|
|
return this.$message.error("请输入模板名称"); |
|
|
|
|
|
this.exportLoading = true; |
|
|
|
|
|
this.exportTemplate(); |
|
|
}, |
|
|
}, |
|
|
handleExportTemplate (id) { |
|
|
handleExportTemplate(id) { |
|
|
this.exportTemplate(id) |
|
|
this.exportTemplate(id); |
|
|
}, |
|
|
}, |
|
|
async exportTemplate (id) { |
|
|
async exportTemplate(id) { |
|
|
let url = "/actual/base/communityHouse/exportExcelCustom" |
|
|
let url = "/actual/base/communityHouse/exportExcelCustom"; |
|
|
|
|
|
|
|
|
|
|
|
// return console.log(this.search); |
|
|
|
|
|
|
|
|
let params = { |
|
|
let params = { |
|
|
templateId: id || '', |
|
|
templateId: id || "", |
|
|
searchForm: { ...this.search }, |
|
|
searchForm: { ...this.search }, |
|
|
exportConfig: { |
|
|
exportConfig: { |
|
|
...this.form, |
|
|
...this.form, |
|
|
formCode: 'community_info', |
|
|
formCode: "community_info", |
|
|
itemList: this.rightList.map(item => { |
|
|
itemList: this.rightList.map((item) => { |
|
|
return { |
|
|
return { |
|
|
itemId: item.id, |
|
|
itemId: item.id, |
|
|
label: item.label, |
|
|
label: item.label, |
|
|
tableName: item.queryItemList[0].tableName, |
|
|
tableName: item.queryItemList[0].tableName, |
|
|
children: item.queryItemList, |
|
|
children: item.queryItemList, |
|
|
supportAdd: item.supportAdd |
|
|
supportAdd: item.supportAdd, |
|
|
} |
|
|
}; |
|
|
}) |
|
|
}), |
|
|
} |
|
|
}, |
|
|
} |
|
|
}; |
|
|
await this.$http({ |
|
|
await this.$http({ |
|
|
method: 'POST', |
|
|
method: "POST", |
|
|
url, |
|
|
url, |
|
|
responseType: 'blob', |
|
|
responseType: "blob", |
|
|
data: params |
|
|
data: params, |
|
|
}) |
|
|
}) |
|
|
.then(res => { |
|
|
.then((res) => { |
|
|
console.log('res----dddd', res) |
|
|
console.log("res----dddd", res); |
|
|
// this.download(res.data, title + '.xls') |
|
|
// this.download(res.data, title + '.xls') |
|
|
// this.getTemplateList() |
|
|
// this.getTemplateList() |
|
|
|
|
|
|
|
|
this.exportLoading = false |
|
|
this.exportLoading = false; |
|
|
// if (res.data.code && res.data.code == 9999) { |
|
|
// if (res.data.code && res.data.code == 9999) { |
|
|
// return this.$message.error(res.data.msg) |
|
|
// return this.$message.error(res.data.msg) |
|
|
// } |
|
|
// } |
|
|
this.formatData(res) |
|
|
this.formatData(res); |
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
.catch(err => { |
|
|
|
|
|
console.log('err', err) |
|
|
|
|
|
this.exportLoading = false |
|
|
|
|
|
return this.$message.error('网络错误') |
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
.catch((err) => { |
|
|
|
|
|
console.log("err", err); |
|
|
|
|
|
this.exportLoading = false; |
|
|
|
|
|
return this.$message.error("网络错误"); |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
async getTemplateList () { |
|
|
async getTemplateList() { |
|
|
let params = { |
|
|
let params = { |
|
|
formCode: 'community_info' |
|
|
formCode: "community_info", |
|
|
} |
|
|
}; |
|
|
await this.$http |
|
|
await this.$http |
|
|
.post('/oper/customize/icExportTemplate/templateList', params) |
|
|
.post("/oper/customize/icExportTemplate/templateList", params) |
|
|
.then(({ data: res }) => { |
|
|
.then(({ data: res }) => { |
|
|
if (res.code !== 0) { |
|
|
if (res.code !== 0) { |
|
|
return this.$message.error(res.msg) |
|
|
return this.$message.error(res.msg); |
|
|
} else { |
|
|
} else { |
|
|
this.tableData = res.data |
|
|
this.tableData = res.data; |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
.catch(() => { |
|
|
.catch(() => { |
|
|
return this.$message.error('网络错误') |
|
|
return this.$message.error("网络错误"); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
async getPreview (id) { |
|
|
async getPreview(id) { |
|
|
let params = { |
|
|
let params = { |
|
|
id: id || '' |
|
|
id: id || "", |
|
|
} |
|
|
}; |
|
|
await this.$http |
|
|
await this.$http |
|
|
.post('/oper/customize/icExportTemplate/templateDetail', params) |
|
|
.post("/oper/customize/icExportTemplate/templateDetail", params) |
|
|
.then(({ data: res }) => { |
|
|
.then(({ data: res }) => { |
|
|
if (res.code !== 0) { |
|
|
if (res.code !== 0) { |
|
|
return this.$message.error(res.msg) |
|
|
return this.$message.error(res.msg); |
|
|
} else { |
|
|
} else { |
|
|
this.previewList = res.data |
|
|
this.previewList = res.data; |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
.catch(() => { |
|
|
.catch(() => { |
|
|
return this.$message.error('网络错误') |
|
|
return this.$message.error("网络错误"); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
async delTemplate (id) { |
|
|
async delTemplate(id) { |
|
|
let params = [id] |
|
|
let params = [id]; |
|
|
await this.$http |
|
|
await this.$http |
|
|
.post('/oper/customize/icExportTemplate/delete', params) |
|
|
.post("/oper/customize/icExportTemplate/delete", params) |
|
|
.then(({ data: res }) => { |
|
|
.then(({ data: res }) => { |
|
|
if (res.code !== 0) { |
|
|
if (res.code !== 0) { |
|
|
return this.$message.error(res.msg) |
|
|
return this.$message.error(res.msg); |
|
|
} else { |
|
|
} else { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
type: 'success', |
|
|
type: "success", |
|
|
message: '删除成功!' |
|
|
message: "删除成功!", |
|
|
}); |
|
|
}); |
|
|
this.getTemplateList() |
|
|
this.getTemplateList(); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
.catch(() => { |
|
|
.catch(() => { |
|
|
return this.$message.error('网络错误') |
|
|
return this.$message.error("网络错误"); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
async getExportChildList (groupId) { |
|
|
async getExportChildList(groupId) { |
|
|
const url = `/oper/customize/icformitem/getItemList/${groupId}` |
|
|
const url = `/oper/customize/icformitem/getItemList/${groupId}`; |
|
|
let params = {} |
|
|
let params = {}; |
|
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
if (code === 0) { |
|
|
if (code === 0) { |
|
|
|
|
|
return data; |
|
|
return data |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.$message.error(msg) |
|
|
this.$message.error(msg); |
|
|
} |
|
|
} |
|
|
// if (code === 0) { |
|
|
// if (code === 0) { |
|
|
// let dataTemp = [] |
|
|
// let dataTemp = [] |
|
|
@ -707,42 +765,49 @@ export default { |
|
|
// this.$message.error(msg) |
|
|
// this.$message.error(msg) |
|
|
// } |
|
|
// } |
|
|
}, |
|
|
}, |
|
|
formatData (res) { |
|
|
formatData(res) { |
|
|
const fileReader = new FileReader() |
|
|
const fileReader = new FileReader(); |
|
|
fileReader.onloadend = () => { |
|
|
fileReader.onloadend = () => { |
|
|
try { |
|
|
try { |
|
|
const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败 |
|
|
const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败 |
|
|
// 后台信息 |
|
|
// 后台信息 |
|
|
console.log('jsonData---1', jsonData) |
|
|
console.log("jsonData---1", jsonData); |
|
|
return this.$message.error(jsonData.msg) |
|
|
return this.$message.error(jsonData.msg); |
|
|
} catch (err) { // 解析成对象失败，说明是正常的文件流 |
|
|
} catch (err) { |
|
|
|
|
|
// 解析成对象失败，说明是正常的文件流 |
|
|
// 下载文件 |
|
|
// 下载文件 |
|
|
console.log('errr-----', err, this) |
|
|
console.log("errr-----", err, this); |
|
|
this.downloadFile(res) |
|
|
this.downloadFile(res); |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
fileReader.readAsText(res.data) |
|
|
}; |
|
|
|
|
|
fileReader.readAsText(res.data); |
|
|
}, |
|
|
}, |
|
|
downloadFile (res) { |
|
|
downloadFile(res) { |
|
|
if (res.headers["content-disposition"]) { |
|
|
if (res.headers["content-disposition"]) { |
|
|
let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]) |
|
|
let fileName = window.decodeURI( |
|
|
console.log('filename', fileName) |
|
|
res.headers["content-disposition"] |
|
|
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) |
|
|
.split(";")[1] |
|
|
var url = window.URL.createObjectURL(blob) |
|
|
.split("=")[1] |
|
|
var aLink = document.createElement('a') |
|
|
); |
|
|
aLink.style.display = 'none' |
|
|
console.log("filename", fileName); |
|
|
aLink.href = url |
|
|
let blob = new Blob([res.data], { |
|
|
aLink.setAttribute('download', fileName) |
|
|
type: "application/vnd.ms-excel", |
|
|
document.body.appendChild(aLink) |
|
|
}); |
|
|
aLink.click() |
|
|
var url = window.URL.createObjectURL(blob); |
|
|
document.body.removeChild(aLink) //下载完成移除元素 |
|
|
var aLink = document.createElement("a"); |
|
|
window.URL.revokeObjectURL(url) //释放掉blob对象 |
|
|
aLink.style.display = "none"; |
|
|
this.$message.success('导出成功') |
|
|
aLink.href = url; |
|
|
this.$emit('close') |
|
|
aLink.setAttribute("download", fileName); |
|
|
} else this.$message.error('下载失败') |
|
|
document.body.appendChild(aLink); |
|
|
} |
|
|
aLink.click(); |
|
|
} |
|
|
document.body.removeChild(aLink); //下载完成移除元素 |
|
|
} |
|
|
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|
|
|
|
|
this.$message.success("导出成功"); |
|
|
|
|
|
this.$emit("close"); |
|
|
|
|
|
} else this.$message.error("下载失败"); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
|
dai
3 years ago