|
|
|
@ -1,28 +1,24 @@ |
|
|
|
<template> |
|
|
|
<div v-if="list.length > 0" class="diy-container"> |
|
|
|
<div v-if="list.length > 0" |
|
|
|
class="diy-container"> |
|
|
|
<el-tabs v-model="activeName"> |
|
|
|
<el-tab-pane label="自定义模板" name="first"> |
|
|
|
<el-tab-pane label="自定义模板" |
|
|
|
name="first"> |
|
|
|
<div class="diy-wr"> |
|
|
|
<div class="left"> |
|
|
|
<el-tabs |
|
|
|
v-model="leftActive" |
|
|
|
<el-tabs v-model="leftActive" |
|
|
|
tab-position="left" |
|
|
|
class="left-h" |
|
|
|
@tab-click="handleTabsClick" |
|
|
|
> |
|
|
|
<el-tab-pane |
|
|
|
v-for="item in leftList" |
|
|
|
@tab-click="handleTabsClick"> |
|
|
|
<el-tab-pane v-for="item in leftList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.label" |
|
|
|
:name="item.id" |
|
|
|
> |
|
|
|
:name="item.id"> |
|
|
|
<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" |
|
|
|
:list="item.queryItemList" |
|
|
|
@change="handleChangeBox" |
|
|
|
/> |
|
|
|
@change="handleChangeBox" /> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
@ -30,155 +26,116 @@ |
|
|
|
<div class="right"> |
|
|
|
<div class="right-header"> |
|
|
|
<div class="title">导出信息</div> |
|
|
|
<el-button plain @click="handlePreview('')" |
|
|
|
>预览</el-button |
|
|
|
> |
|
|
|
<el-button plain |
|
|
|
@click="handlePreview('')">预览</el-button> |
|
|
|
</div> |
|
|
|
<div class="h80 scroll-h"> |
|
|
|
<el-collapse |
|
|
|
v-model="activeCollapse" |
|
|
|
id="collapsWr" |
|
|
|
> |
|
|
|
<el-collapse-item |
|
|
|
v-for="item in rightList" |
|
|
|
<el-collapse v-model="activeCollapse" |
|
|
|
id="collapsWr"> |
|
|
|
<el-collapse-item v-for="item in rightList" |
|
|
|
:key="item.id" |
|
|
|
:title="item.label" |
|
|
|
:name="item.id" |
|
|
|
class="col-h" |
|
|
|
> |
|
|
|
<dragItem |
|
|
|
:ref="'drag' + item.id" |
|
|
|
class="col-h"> |
|
|
|
<dragItem :ref="'drag' + item.id" |
|
|
|
:list="item.queryItemList" |
|
|
|
:id="item.id" |
|
|
|
@del="handleDelItem" |
|
|
|
@drag="handleDrag($event, item)" |
|
|
|
></dragItem> |
|
|
|
@drag="handleDrag($event, item)"></dragItem> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="模板列表" name="second"> |
|
|
|
<el-table |
|
|
|
:data="tableData" |
|
|
|
<el-tab-pane label="模板列表" |
|
|
|
name="second"> |
|
|
|
<el-table :data="tableData" |
|
|
|
height="calc(80vh - 140px)" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
type="index" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column type="index" |
|
|
|
label="序号" |
|
|
|
align="center" |
|
|
|
width="50" |
|
|
|
> |
|
|
|
width="50"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="name" |
|
|
|
<el-table-column prop="name" |
|
|
|
label="模板名称" |
|
|
|
align="center" |
|
|
|
min-width="180" |
|
|
|
> |
|
|
|
min-width="180"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="createdBy" |
|
|
|
<el-table-column prop="createdBy" |
|
|
|
align="center" |
|
|
|
label="创建者" |
|
|
|
width="180" |
|
|
|
> |
|
|
|
width="180"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
align="center" |
|
|
|
<el-table-column align="center" |
|
|
|
prop="createdTime" |
|
|
|
label="创建时间" |
|
|
|
width="180" |
|
|
|
> |
|
|
|
width="180"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" label="操作" width="160"> |
|
|
|
<el-table-column align="center" |
|
|
|
label="操作" |
|
|
|
width="160"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
v-if="scope.row.isSelf" |
|
|
|
<el-button v-if="scope.row.isSelf" |
|
|
|
type="text" |
|
|
|
size="small" |
|
|
|
class="div-table-button--delete" |
|
|
|
@click="handleDeltemplate(scope.row.id)" |
|
|
|
>删除</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
type="text" |
|
|
|
@click="handleDeltemplate(scope.row.id)">删除</el-button> |
|
|
|
<el-button type="text" |
|
|
|
size="small" |
|
|
|
class="div-table-button--detail" |
|
|
|
@click="handlePreview(scope.row.id)" |
|
|
|
>预览</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
type="text" |
|
|
|
@click="handlePreview(scope.row.id)">预览</el-button> |
|
|
|
<el-button type="text" |
|
|
|
size="small" |
|
|
|
class="div-table-button--edit" |
|
|
|
@click="handleExportTemplate(scope.row.id)" |
|
|
|
>导出</el-button |
|
|
|
> |
|
|
|
@click="handleExportTemplate(scope.row.id)">导出</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
<div v-if="activeName == 'first'" class="diy-footer"> |
|
|
|
<div v-if="activeName == 'first'" |
|
|
|
class="diy-footer"> |
|
|
|
<div class="left"> |
|
|
|
<div class="flex-div"> |
|
|
|
<div>模板名称：</div> |
|
|
|
<el-input |
|
|
|
v-model="form.name" |
|
|
|
<el-input v-model="form.name" |
|
|
|
maxlength="20" |
|
|
|
class="wd200 mr10" |
|
|
|
/> |
|
|
|
class="wd200 mr10" /> |
|
|
|
<div>自定义表头：</div> |
|
|
|
<el-input |
|
|
|
v-model="form.title" |
|
|
|
<el-input v-model="form.title" |
|
|
|
maxlength="20" |
|
|
|
class="wd200 mr10" |
|
|
|
/> |
|
|
|
<el-checkbox v-model="form.isSaveTemp" |
|
|
|
>保存为常用模板</el-checkbox |
|
|
|
> |
|
|
|
class="wd200 mr10" /> |
|
|
|
<el-checkbox v-model="form.isSaveTemp">保存为常用模板</el-checkbox> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-button |
|
|
|
class="diy-button--delete" |
|
|
|
<el-button class="diy-button--delete" |
|
|
|
:loading="exportLoading" |
|
|
|
@click="handleExport" |
|
|
|
>导出</el-button |
|
|
|
> |
|
|
|
@click="handleExport">导出</el-button> |
|
|
|
</div> |
|
|
|
<el-dialog |
|
|
|
:visible.sync="diyDialog" |
|
|
|
<el-dialog :visible.sync="diyDialog" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:close-on-press-escape="false" |
|
|
|
width="1150px" |
|
|
|
append-to-body |
|
|
|
top="5vh" |
|
|
|
class="dialog-h" |
|
|
|
@close="handleClose" |
|
|
|
> |
|
|
|
@close="handleClose"> |
|
|
|
<div style="padding: 20px"> |
|
|
|
<el-table |
|
|
|
:data="tableData" |
|
|
|
<el-table :data="tableData" |
|
|
|
height="calc(80vh - 140px)" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
v-for="(item, index) in previewList" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column v-for="(item, index) in previewList" |
|
|
|
:label="item.label" |
|
|
|
:key="index" |
|
|
|
align="center" |
|
|
|
min-width="120" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
v-for="(n, i) in item.children" |
|
|
|
min-width="120"> |
|
|
|
<el-table-column v-for="(n, i) in item.children" |
|
|
|
:label="n.label" |
|
|
|
:key="i" |
|
|
|
align="center" |
|
|
|
min-width="120" |
|
|
|
> |
|
|
|
min-width="120"> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -201,14 +158,14 @@ export default { |
|
|
|
}, |
|
|
|
search: { |
|
|
|
type: Object, |
|
|
|
default: () => {}, |
|
|
|
default: () => { }, |
|
|
|
}, |
|
|
|
}, |
|
|
|
components: { |
|
|
|
checkBox, |
|
|
|
dragItem, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
exportLoading: false, |
|
|
|
activeCollapse: ["1"], |
|
|
|
@ -227,7 +184,7 @@ export default { |
|
|
|
diyDialog: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
async created() { |
|
|
|
async created () { |
|
|
|
this.list.forEach((item) => { |
|
|
|
this.$set(this.info, item.id, []); |
|
|
|
}); |
|
|
|
@ -241,7 +198,7 @@ export default { |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
rightList: { |
|
|
|
handler(val) { |
|
|
|
handler (val) { |
|
|
|
if (val.length > 0) this.dragSort(); |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
@ -258,7 +215,7 @@ export default { |
|
|
|
// }, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleChangeBox({ list, pid }) { |
|
|
|
handleChangeBox ({ list, pid }) { |
|
|
|
console.log("ccccc----", list); |
|
|
|
// if (list.length == 0) return |
|
|
|
let obj = {}; |
|
|
|
@ -283,7 +240,7 @@ export default { |
|
|
|
} |
|
|
|
this.activeCollapse = [...this.activeCollapse, pid]; |
|
|
|
}, |
|
|
|
handleTabsClick(val) { |
|
|
|
handleTabsClick (val) { |
|
|
|
console.log("tabs-----", val); |
|
|
|
this.leftList.forEach(async (item) => { |
|
|
|
if (item.id == val.name) { |
|
|
|
@ -294,7 +251,7 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleDelItem(val) { |
|
|
|
handleDelItem (val) { |
|
|
|
const { item, index } = val; |
|
|
|
console.log( |
|
|
|
"item------", |
|
|
|
@ -319,7 +276,7 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
dragSort() { |
|
|
|
dragSort () { |
|
|
|
const el = document.getElementById("collapsWr"); |
|
|
|
this.sortTable = Sortable.create(el, { |
|
|
|
group: "el-collapse-item", |
|
|
|
@ -333,19 +290,19 @@ export default { |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleDrag(val, item) { |
|
|
|
handleDrag (val, item) { |
|
|
|
console.log("drag-----", val); |
|
|
|
console.log("drag-----", item); |
|
|
|
this.rightList.forEach((n, i) => { |
|
|
|
if (item.id == n.id) n.queryItemList = [...val]; |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleClose() { |
|
|
|
handleClose () { |
|
|
|
this.previewList = []; |
|
|
|
this.diyDialog = false; |
|
|
|
}, |
|
|
|
|
|
|
|
handleDeltemplate(id) { |
|
|
|
handleDeltemplate (id) { |
|
|
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
@ -361,7 +318,7 @@ export default { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
handlePreview(id) { |
|
|
|
handlePreview (id) { |
|
|
|
if (id) this.getPreview(id); |
|
|
|
else { |
|
|
|
if (this.rightList.length == 0) |
|
|
|
@ -375,7 +332,7 @@ export default { |
|
|
|
} |
|
|
|
this.diyDialog = true; |
|
|
|
}, |
|
|
|
handleExport() { |
|
|
|
handleExport () { |
|
|
|
if (this.rightList.length === 0) |
|
|
|
return this.$message.error("请选择导出信息"); |
|
|
|
if (this.form.isSaveTemp && !this.form.name) |
|
|
|
@ -383,10 +340,10 @@ export default { |
|
|
|
this.exportLoading = true; |
|
|
|
this.exportTemplate(); |
|
|
|
}, |
|
|
|
handleExportTemplate(id) { |
|
|
|
handleExportTemplate (id) { |
|
|
|
this.exportTemplate(id); |
|
|
|
}, |
|
|
|
async exportTemplate(id) { |
|
|
|
async exportTemplate (id) { |
|
|
|
let url = "/actual/base/communityHouse/exportExcelCustom"; |
|
|
|
|
|
|
|
// return console.log(this.search); |
|
|
|
@ -431,7 +388,7 @@ export default { |
|
|
|
return this.$message.error("网络错误"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
async getTemplateList() { |
|
|
|
async getTemplateList () { |
|
|
|
let params = { |
|
|
|
formCode: "community_info", |
|
|
|
}; |
|
|
|
@ -448,7 +405,7 @@ export default { |
|
|
|
return this.$message.error("网络错误"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
async getPreview(id) { |
|
|
|
async getPreview (id) { |
|
|
|
let params = { |
|
|
|
id: id || "", |
|
|
|
}; |
|
|
|
@ -465,7 +422,7 @@ export default { |
|
|
|
return this.$message.error("网络错误"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
async delTemplate(id) { |
|
|
|
async delTemplate (id) { |
|
|
|
let params = [id]; |
|
|
|
await this.$http |
|
|
|
.post("/oper/customize/icExportTemplate/delete", params) |
|
|
|
@ -484,7 +441,7 @@ export default { |
|
|
|
return this.$message.error("网络错误"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
async getExportChildList(groupId) { |
|
|
|
async getExportChildList (groupId) { |
|
|
|
const url = `/oper/customize/icformitem/getItemList/${groupId}`; |
|
|
|
let params = {}; |
|
|
|
|
|
|
|
@ -765,7 +722,7 @@ export default { |
|
|
|
// this.$message.error(msg) |
|
|
|
// } |
|
|
|
}, |
|
|
|
formatData(res) { |
|
|
|
formatData (res) { |
|
|
|
const fileReader = new FileReader(); |
|
|
|
fileReader.onloadend = () => { |
|
|
|
try { |
|
|
|
@ -782,7 +739,7 @@ export default { |
|
|
|
}; |
|
|
|
fileReader.readAsText(res.data); |
|
|
|
}, |
|
|
|
downloadFile(res) { |
|
|
|
downloadFile (res) { |
|
|
|
if (res.headers["content-disposition"]) { |
|
|
|
let fileName = window.decodeURI( |
|
|
|
res.headers["content-disposition"] |
|
|
|
@ -854,7 +811,8 @@ export default { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 10px; |
|
|
|
margin-top: 20px; |
|
|
|
padding-bottom: 20px; |
|
|
|
} |
|
|
|
.left-h { |
|
|
|
height: 100%; |
|
|
|
|
jiangyuying
2 years ago