5 changed files with 243 additions and 113 deletions
@ -0,0 +1,203 @@ |
|||||
|
<template> |
||||
|
<div class="diy-wr"> |
||||
|
<div class="left"> |
||||
|
<el-tabs v-model.trim="leftActive" tab-position="left" class="left-h" @tab-click="handleTabsClick"> |
||||
|
<el-tab-pane v-for="item in leftList" :key="item.id" :label="item.label" :name="item.id"> |
||||
|
<div class="pd10 check-boxwr scroll-h"> |
||||
|
<checkBox v-if="item.queryItemList.length > 0" :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> |
||||
|
</div> |
||||
|
<div class="h80 scroll-h"> |
||||
|
<el-collapse v-model.trim="activeCollapse" id="collapsWrs"> |
||||
|
<el-collapse-item v-for="item in rightList" :key="item.id" :title="item.label" :name="item.id" |
||||
|
class="col-h"> |
||||
|
<dragItem :ref="'drags' + item.id" :list="item.queryItemList" :id="item.id" |
||||
|
@del="handleDelItem" @drag="handleDrag($event, item)"></dragItem> |
||||
|
</el-collapse-item> |
||||
|
</el-collapse> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import checkBox from '@/views/components/checkBox.vue' |
||||
|
import Sortable from 'sortablejs' |
||||
|
import nextTick from 'dai-js/tools/nextTick' |
||||
|
import dragItem from '@/views/components/dragItem.vue' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
leftActive: '', |
||||
|
leftList: [], |
||||
|
rightList: [], |
||||
|
activeCollapse: ['1'], |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getLeftList() |
||||
|
}, |
||||
|
methods: { |
||||
|
async getLeftList() { |
||||
|
const url = "/oper/customize/icformitemgroup/list"; |
||||
|
let params = { |
||||
|
formCode: "resident_base_info,community_info", |
||||
|
display: 1 |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
data.forEach((item) => { |
||||
|
((id) => { |
||||
|
item.queryItemList = []; |
||||
|
})(item.id); |
||||
|
}); |
||||
|
this.leftList = [...data]; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
handleTabsClick(val) { |
||||
|
console.log('tabs-----', val) |
||||
|
this.leftList.forEach(async item => { |
||||
|
if (item.id == val.name) { |
||||
|
if (item.queryItemList.length == 0) item.queryItemList = await this.getExportChildList(item.id) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async handleChangeBox({ list, pid }) { |
||||
|
console.log(list,pid); |
||||
|
// if (list.length == 0) return |
||||
|
let obj = {} |
||||
|
this.leftList.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) |
||||
|
await nextTick(2000) |
||||
|
this.$nextTick(() => { |
||||
|
console.log('itemttt------', this.$refs[`drag${pid}`]) |
||||
|
this.$refs[`drags${pid}`][0].dragSort() |
||||
|
}) |
||||
|
} |
||||
|
this.activeCollapse = [...this.activeCollapse, pid] |
||||
|
}, |
||||
|
handleDelItem(val) { |
||||
|
const { item, index } = val |
||||
|
console.log('item------', item, this.$refs[`checkbox${item.itemGroupId}`]) |
||||
|
let checkList = this.$refs[`checkbox${item.itemGroupId}`][0].checkedList |
||||
|
checkList.forEach((n, i) => { |
||||
|
if (n == item.itemId) { |
||||
|
checkList.splice(i, 1) |
||||
|
this.$refs[`checkbox${item.itemGroupId}`][0].handleChange(checkList) |
||||
|
} |
||||
|
}) |
||||
|
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) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleDrag(val, item) { |
||||
|
console.log('drag-----', val) |
||||
|
console.log('drag-----', item) |
||||
|
this.rightList.forEach((n, i) => { |
||||
|
if (item.id == n.id) n.queryItemList = [...val] |
||||
|
}) |
||||
|
}, |
||||
|
async getExportChildList(groupId) { |
||||
|
const url = `/oper/customize/icformitem/getItemList/${groupId}` |
||||
|
let params = {} |
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
return data |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
dragSort() { |
||||
|
const el = document.getElementById('collapsWrs') |
||||
|
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) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
components: { checkBox,dragItem }, |
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
rightList: { |
||||
|
handler(val) { |
||||
|
if (val.length > 0) this.dragSort() |
||||
|
}, |
||||
|
deep: true |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.diy-wr { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
.left { |
||||
|
width: 30%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.check-boxwr { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.left-h{ |
||||
|
height: 450px; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue