eta_front/src/views/datasheet_manage/components/batchSetDia.vue

<template>
    <div class="batch-set-dialog">
        <el-dialog :visible.sync="isOpenDialog" :close-on-click-modal="false" :modal-append-to-body="false"
            :title="$t('OnlineExcelPage.batch_settings')" @close="cancelHandle" custom-class="dialog" center
            width="560px" v-dialogDrag>
            <div class="dialog-main">
                <selectTarget ref="selectRef" @select="handleSelectTarget" :selectStyleType="3">
                </selectTarget>
                <div class="dialog-main-content">
                    <div class="content-list" v-if="searchList.length">
                        <div class="content-list-item flex-align" v-sortMove="index"
                            @dragstart="setDraggingIndex(index)" @dragend="clearDraggingIndex"
                            v-for="(item, index) in searchList" :key="index">
                            <div class="content-list-item-left flex-align">
                                <img style="margin-right: 8px;" class="img-icon"
                                    src="~@/assets/img/cus_sheet/icon-move.png" alt="">
                                {{ currentLang === 'en' ? item.EdbNameEn : item.EdbName }}
                            </div>
                            <img class="img-icon" @click="deleteHandle(index)"
                                src="~@/assets/img/cus_sheet/icon-delete.png" alt="">
                        </div>
                    </div>
                    <tableNoData v-else :text="$t('OnlineExcelPage.no_found_search')" />
                </div>
            </div>

            <div class="dia-bot">
                <el-button type="primary" plain @click="cancelHandle">{{
                    $t("ETable.Btn.cancel_btn")
                }}</el-button>
                <el-button type="primary" style="margin-right: 20px" @click="saveHandle">{{ $t("ETable.Btn.save_btn")
                    }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import sortMove from '@/utils/sortMove';
import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
export default {
    components: { selectTarget },
    directives: {
        sortMove
    },
    watch: {
        searchList: {
            handler(newval) {

            }
        }
    },
    computed: {

    },
    data() {
        return {
            isOpenDialog: false,
            searchList: [],
            draggingIndex: null,
            firstId: ''
        };
    },
    computed: {
        currentLang() {
            return this.$store.state.lang
        }
    },
    methods: {
        handleDrop({ draggedIndex, droppedIndex }) {
            const draggedItem = this.searchList[draggedIndex];
            this.searchList.splice(draggedIndex, 1);
            this.searchList.splice(droppedIndex, 0, draggedItem);
            this.$message({
                message: this.$t("OnlineExcelPage.move_successful"),
                type: 'success'
            });
        },
        setDraggingIndex(index) {
            this.draggingIndex = index;
        },
        clearDraggingIndex() {
            this.draggingIndex = null;
        },
        // 删除选中
        deleteHandle(index) {
            this.searchList.splice(index, 1)
        },
        // 保存
        async saveHandle() {
            this.cancelHandle()
            this.$emit('moreSetSave', this.searchList, this.firstId)
        },
        // 选中
        handleSelectTarget(item) {
            // console.log(item)
            if (item) {
                this.searchList.push(item)
            }
        },
        // 打开弹框
        openDialog(array) {
            // console.log(array)
            if (array.length) {
                this.firstId = array[0].EdbInfoId
            }
            this.searchList = JSON.parse(JSON.stringify(array))
            this.isOpenDialog = true;
        },
        // 关闭弹框
        cancelHandle() {
            this.$refs.selectRef.search_txt = ''
            this.isOpenDialog = false;
        },
    },
};
</script>
<style lang="scss" scoped>
.batch-set-dialog {
    .dialog-main {
        .dialog-main-content {
            .content-list {

                .content-list-item {
                    padding: 13px 0;
                    border-bottom: 1px solid #C8CDD9;
                    justify-content: space-between;

                    .content-list-item-left {
                        font-family: PingFang SC;
                        font-size: 14px;
                        font-weight: 400;
                    }
                }
            }
        }
    }

    .img-icon {
        width: 16px;
        height: 16px;
    }

    .dia-bot {
        margin: 52px 0 30px;
        display: flex;
        justify-content: center;
    }

    .flex-align {
        display: flex;
        align-items: center;
    }
}
</style>