dai
3 years ago
7 changed files with 771 additions and 64 deletions
@ -0,0 +1,78 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-checkbox |
||||
|
:indeterminate="isIndeterminate" |
||||
|
v-model="checkAll" |
||||
|
@change="handleCheckAllChange">全选</el-checkbox> |
||||
|
<div style="margin: 15px 0;"></div> |
||||
|
<el-checkbox-group v-model="checkedList" @change="handleChange"> |
||||
|
<div v-for="n in boxList" :key="n.itemId" class="mb10"> |
||||
|
<el-checkbox :label="n.itemId">{{n.label}}</el-checkbox> |
||||
|
</div> |
||||
|
</el-checkbox-group> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'checkBox', |
||||
|
model: { |
||||
|
prop: 'value', |
||||
|
event: 'change' |
||||
|
}, |
||||
|
props: { |
||||
|
value: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
boxList: [], |
||||
|
checkAll: false, |
||||
|
checkedList: [], |
||||
|
isIndeterminate: false, |
||||
|
pid: '', |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.boxList = this.list.filter(item => item.itemType != 'inputRange') |
||||
|
console.log('cehck-bo----', this.list) |
||||
|
this.pid = this.list[0].itemGroupId |
||||
|
}, |
||||
|
methods: { |
||||
|
handleCheckAllChange(val) { |
||||
|
|
||||
|
this.checkedList = val ? this.boxList.map(item => item.itemId) : []; |
||||
|
this.isIndeterminate = false; |
||||
|
|
||||
|
this.$emit('change', { list: this.filterArr(this.checkedList), pid: this.pid }) |
||||
|
}, |
||||
|
handleChange(value) { |
||||
|
let checkedCount = value.length; |
||||
|
this.checkAll = checkedCount === this.list.length; |
||||
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.boxList.length; |
||||
|
this.$emit('change', { list: this.filterArr(this.checkedList), pid: this.pid }) |
||||
|
}, |
||||
|
filterArr(arr) { |
||||
|
let list = [] |
||||
|
arr.forEach(item => { |
||||
|
this.boxList.forEach(n => { |
||||
|
if (item === n.itemId) list.push(n) |
||||
|
}) |
||||
|
}) |
||||
|
return list |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.mb10 { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<div class="right-wr scroll-h" :id="'wrItems' + id"> |
||||
|
<div v-for="(n, i) in list" :key="n.itemId" class="right-item"> |
||||
|
<div class="item-label">{{ n.label }}</div> |
||||
|
<div class="item-btn"> |
||||
|
<el-tag type="danger" class="mr10" @click="handleDelItem(n, i)"> |
||||
|
<i class="el-icon-delete"></i> |
||||
|
</el-tag> |
||||
|
<el-tag type="primary"> |
||||
|
<i class="el-icon-rank"></i> |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Sortable from 'sortablejs' |
||||
|
export default { |
||||
|
name: 'DragItems', |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
id: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dragList: [] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
// this.dragSort() |
||||
|
}, |
||||
|
watch: { |
||||
|
list: { |
||||
|
handler(val) { |
||||
|
this.dragList = val.filter(item => item.itemType != 'inputRange') |
||||
|
}, |
||||
|
deep: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleDelItem(item, i) { |
||||
|
this.$emit('del', { item, index: i}) |
||||
|
}, |
||||
|
dragSort () { |
||||
|
const el = document.getElementById(`wrItems${this.id}`) |
||||
|
this.sortTable = Sortable.create(el, { |
||||
|
group: 'right-item', |
||||
|
ghostClass: 'sortable-ghost', // Class name for the drop placeholder, |
||||
|
chosenClass: 'sortable-choose', |
||||
|
animation: 500, |
||||
|
delay: 0, |
||||
|
onEnd: evt => { |
||||
|
console.log('evt----', evt) |
||||
|
const targetRow = this.list.splice(evt.oldIndex, 1)[0] |
||||
|
this.list.splice(evt.newIndex, 0, targetRow) |
||||
|
this.$emit('drag', this.list) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.right-wr { |
||||
|
max-height: calc(80vh - 270px); |
||||
|
overflow: auto; |
||||
|
.right-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
cursor: pointer; |
||||
|
padding: 10px 30px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.sortable-choose { |
||||
|
background: #eee; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.mb10 { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,463 @@ |
|||||
|
<template> |
||||
|
<div v-if="list.length > 0" class="diy-container"> |
||||
|
<el-tabs v-model="activeName"> |
||||
|
<el-tab-pane label="自定义模板" name="first"> |
||||
|
<div class="diy-wr"> |
||||
|
<div class="left"> |
||||
|
<el-tabs tab-position="left" class="left-h"> |
||||
|
<el-tab-pane v-for="item in list" :key="item.id" :label="item.label"> |
||||
|
<div class="pd10 dialog-h-content scroll-h"> |
||||
|
<checkBox v-if="item.queryItemList" :ref="'checkbox' + item.id" |
||||
|
:list="item.queryItemList" @change="handleChangeBox" /> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
|
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="right-header"> |
||||
|
<div class="title">导出信息</div> |
||||
|
<el-button plain @click="handlePreview('')">预览</el-button> |
||||
|
</div> |
||||
|
<div> |
||||
|
<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" :list="item.queryItemList" :id="item.id" |
||||
|
@del="handleDelItem" |
||||
|
@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" |
||||
|
height="calc(80vh - 140px)" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
type="index" |
||||
|
label="序号" |
||||
|
align="center" |
||||
|
width="50"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="模板名称" |
||||
|
align="center" |
||||
|
min-width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="createdBy" |
||||
|
align="center" |
||||
|
label="创建者" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
prop="createdTime" |
||||
|
label="创建时间" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="操作" |
||||
|
width="160"> |
||||
|
<template slot-scope="scope"> |
||||
|
<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" size="small" class="div-table-button--detail" |
||||
|
@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> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<div v-if="activeName == 'first'" class="diy-footer"> |
||||
|
<div class="left"> |
||||
|
<div class="flex-div"> |
||||
|
<div>模板名称：</div> |
||||
|
<el-input v-model="form.name" class="wd200 mr10" /> |
||||
|
<el-checkbox v-model="form.isSaveTemp">保存为常用模板</el-checkbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-button class="diy-button--delete" :loading="exportLoading" @click="handleExport">导出</el-button> |
||||
|
</div> |
||||
|
<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" |
||||
|
> |
||||
|
<div style="padding: 20px;"> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
height="calc(80vh - 140px)" |
||||
|
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" |
||||
|
:label="n.label" |
||||
|
:key="i" |
||||
|
align="center" |
||||
|
min-width="120"> |
||||
|
|
||||
|
</el-table-column> |
||||
|
</el-table-column> |
||||
|
|
||||
|
</el-table> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import checkBox from '../../components/checkBox.vue' |
||||
|
import dragItem from '../../components/dragItem.vue' |
||||
|
import Sortable from 'sortablejs' |
||||
|
export default { |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
search: { |
||||
|
type: Object, |
||||
|
default: () => {} |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
checkBox, |
||||
|
dragItem |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
exportLoading: false, |
||||
|
activeCollapse: ['1'], |
||||
|
activeName: 'first', |
||||
|
info: {}, |
||||
|
rightList: [], |
||||
|
form: { |
||||
|
isSaveTemp: false, |
||||
|
name: '', |
||||
|
itemList: [] |
||||
|
}, |
||||
|
tableData: [], |
||||
|
previewList: [], |
||||
|
diyDialog: false, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.list.forEach(item => { |
||||
|
this.$set(this.info, item.id, []) |
||||
|
}) |
||||
|
console.log('infodiy----', this.list) |
||||
|
this.getTemplateList() |
||||
|
}, |
||||
|
watch: { |
||||
|
rightList: { |
||||
|
handler(val) { |
||||
|
if (val.length > 0) this.dragSort() |
||||
|
|
||||
|
}, |
||||
|
deep: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleChangeBox({list, pid}) { |
||||
|
console.log('ccccc----', list) |
||||
|
// if (list.length == 0) return |
||||
|
let obj = {} |
||||
|
this.list.forEach(item =>{ |
||||
|
if (item.id == pid) obj = { ...item, queryItemList: [...list] } |
||||
|
}) |
||||
|
const groups = this.rightList.map(item => item.id) |
||||
|
if (groups.includes(pid)) { |
||||
|
this.rightList.forEach((item, i) => { |
||||
|
if (item.id == pid ) { |
||||
|
item.queryItemList = [...list] |
||||
|
if (list.length == 0) this.rightList.splice(i, 1) |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.rightList.push(obj) |
||||
|
|
||||
|
this.$nextTick(() => { |
||||
|
console.log('itemttt------', this.$refs[`drag${pid}`]) |
||||
|
this.$refs[`drag${pid}`][0].dragSort() |
||||
|
}) |
||||
|
} |
||||
|
this.activeCollapse = [...this.activeCollapse, pid] |
||||
|
}, |
||||
|
handleDelItem(val) { |
||||
|
const { item, index } = val |
||||
|
console.log('item------', item, this.$refs[`checkbox${item.itemGroupId}`]) |
||||
|
const checkList = this.$refs[`checkbox${item.itemGroupId}`][0].checkedList |
||||
|
checkList.forEach((n, i) => { |
||||
|
if (n == item.itemId) this.$refs[`checkbox${item.itemGroupId}`][0].checkedList.splice(i, 1) |
||||
|
}) |
||||
|
this.rightList.forEach((n, i) => { |
||||
|
if (n.id === item.itemGroupId) { |
||||
|
n.queryItemList.splice(index, 1) |
||||
|
if (n.queryItemList.length === 0) this.rightList.splice(i, 1) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
dragSort() { |
||||
|
const el = document.getElementById('collapsWr') |
||||
|
this.sortTable = Sortable.create(el, { |
||||
|
group: 'el-collapse-item', |
||||
|
ghostClass: 'sortable-ghost', // Class name for the drop placeholder, |
||||
|
animation: 500, |
||||
|
delay: 0, |
||||
|
onEnd: evt => { |
||||
|
console.log('evt----', evt) |
||||
|
const targetRow = this.rightList.splice(evt.oldIndex, 1)[0] |
||||
|
this.rightList.splice(evt.newIndex, 0, targetRow) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
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() { |
||||
|
this.previewList = [] |
||||
|
this.diyDialog = false |
||||
|
}, |
||||
|
handleDeltemplate(id) { |
||||
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.delTemplate(id) |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已取消删除' |
||||
|
}); |
||||
|
}) |
||||
|
}, |
||||
|
handlePreview(id) { |
||||
|
if (id) this.getPreview(id) |
||||
|
else { |
||||
|
if (this.rightList.length == 0) return this.$message.error('请选择导出信息') |
||||
|
this.previewList = this.rightList.map(item => { |
||||
|
return { |
||||
|
label: item.label, |
||||
|
children: item.queryItemList |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
this.diyDialog = true |
||||
|
}, |
||||
|
handleExport() { |
||||
|
if (this.rightList.length === 0) return this.$message.error('请选择导出信息') |
||||
|
if (this.form.isSaveTemp && !this.form.name) return this.$message.error('请输入模板名称') |
||||
|
this.exportLoading = true |
||||
|
this.exportTemplate() |
||||
|
|
||||
|
}, |
||||
|
handleExportTemplate(id) { |
||||
|
this.exportTemplate(id) |
||||
|
}, |
||||
|
async exportTemplate(id) { |
||||
|
let url = "/epmetuser/icresiuser/exportExcelCustom" |
||||
|
|
||||
|
let params = { |
||||
|
templateId: id || '', |
||||
|
searchForm: {...this.search}, |
||||
|
exportConfig: { |
||||
|
...this.form, |
||||
|
formCode: 'resi_base_info', |
||||
|
itemList: this.rightList.map(item => { |
||||
|
return { |
||||
|
itemId: item.id, |
||||
|
label: item.label, |
||||
|
tableName: item.queryItemList[0].tableName, |
||||
|
children: item.queryItemList, |
||||
|
supportAdd: item.supportAdd |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
await this.$http({ |
||||
|
method: 'POST', |
||||
|
url, |
||||
|
responseType: 'blob', |
||||
|
data: params |
||||
|
}) |
||||
|
.then(res => { |
||||
|
console.log('res----dddd', res) |
||||
|
// this.download(res.data, title + '.xls') |
||||
|
this.getTemplateList() |
||||
|
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对象 |
||||
|
this.$message.success('导出成功') |
||||
|
this.$emit('close') |
||||
|
} else this.$message.error('下载失败') |
||||
|
this.exportLoading = false |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.log('err', err) |
||||
|
this.exportLoading = false |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
async getTemplateList () { |
||||
|
let params = { |
||||
|
formCode: 'resi_base_info' |
||||
|
} |
||||
|
await this.$http |
||||
|
.post('/oper/customize/icExportTemplate/templateList', params) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.tableData = res.data |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
async getPreview (id) { |
||||
|
let params = { |
||||
|
id: id || '' |
||||
|
} |
||||
|
await this.$http |
||||
|
.post('/oper/customize/icExportTemplate/templateDetail', params) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.previewList = res.data |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
async delTemplate(id) { |
||||
|
let params = [id] |
||||
|
await this.$http |
||||
|
.post('/oper/customize/icExportTemplate/delete', params) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}); |
||||
|
this.getTemplateList() |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.diy-container { |
||||
|
padding: 20px 20px 0 20px; |
||||
|
} |
||||
|
.diy-wr { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: calc(80vh - 120px); |
||||
|
.left { |
||||
|
width: 49%; |
||||
|
} |
||||
|
.right { |
||||
|
flex-shrink: 0; |
||||
|
width: 50%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
margin-left: 20px; |
||||
|
padding: 0 20px; |
||||
|
border-left: 1px solid #eee; |
||||
|
.right-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 10px; |
||||
|
// border-bottom: 1px solid #eee; |
||||
|
.title { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.diy-footer { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.left-h { |
||||
|
|
||||
|
::v-deep .el-tabs__header.is-left, |
||||
|
::v-deep .el-tabs__nav-wrap.is-left::after { |
||||
|
height: calc(80vh - 120px); |
||||
|
} |
||||
|
} |
||||
|
.flex-div { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
// #collapsWr { |
||||
|
// .col-h { |
||||
|
// ::v-deep .el-collapse-item__wrap { |
||||
|
// max-height: calc(80vh - 220px); |
||||
|
// // overflow: auto; |
||||
|
// } |
||||
|
|
||||
|
// } |
||||
|
// } |
||||
|
.mb10 { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.pd10 { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.mr10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.wd200 { |
||||
|
width: 200px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue