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