epmet-work-pc/src/views/modules/base/smartExcel/cpts/export-process-two.vue

<template>
        <div class="diy-wr">
            <div class="left">
                <el-tabs v-model.trim="leftActive" tab-position="left" class="scroll-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">
                            <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">
                    <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: 50px;
    .scroll-h{
            height: 450px;
            overflow-y: scroll;
        }
    .left {
        width: 30%;
        height: 100%;

        .check-boxwr {
            overflow: auto;
            margin-left: 10px;
        }
    }

    .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>