eta_front/src/views/dataSource_manage/components/SetTableCols.vue

<template>
    <el-dialog
      title="自定义列"
      :visible.sync="show"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :center="true"
      v-dialogDrag
      custom-class="dialogclass"
      width="550px"
      @close="handleClose"
    >
        <draggable
            v-model="list"
            class="list-wrap"
            animation="300"
            tag="div"
            handle=".drag"
        >
            <div class="list-item" v-for="item in list" :key="item.ColumnKey">
                <el-checkbox v-model="item.checked" :disabled="item.IsMust===1">
                    <span class="name" :style="{color:item.IsMust===1?'#C0C4CC':''}">{{item.ColumnName}}</span>
                </el-checkbox>
                <img class="drag" src="~@/assets/img/data_m/move_ico2.png" alt="">
            </div>
        </draggable>
        <div style="text-align:center;margin:30px 0">
            <el-button type="primary" plain @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSave">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import draggable from 'vuedraggable';
import {apiDataSource} from '@/api/modules/dataSource'
export default {
    components:{draggable},
    model:{
        prop:"show",
        event:'close'
    },
    props:{
        show:{
            type:Boolean,
            default:false
        },
        ColumnType:{//1数据源明细表，2数据源统计表，3删除指标列表，4指标信息变更表"
            type:Number,
            default:0
        }
    },
    watch: {
        show(n){
            if(n){
                this.getTableColOpts()
            }
        }  
    },
    data() {
        return {
            list:[]
        }
    },
    methods: {
        // 获取表格列配置项
        getTableColOpts(){
            apiDataSource.GLTableColOpts({ColumnType:this.ColumnType}).then(res=>{
                if(res.Ret===200){
                    const arr=res.Data.List||[]
                    this.list=arr.map(item=>{
                        return {
                            ...item,
                            checked:item.IsShow===1?true:false
                        }
                    })
                }
            })
        },

        handleSave(){
            const list=this.list.map(item=>{
                return {
                    Id:item.Id,
                    IsShow:item.checked?1:0
                }
            })
            apiDataSource.GLTableColEdit({
                list:list
            }).then(res=>{
                if(res.Ret===200){
                    this.$message.success('保存成功')
                    this.$emit('change')

                    this.handleClose()
                }
            })
        },

        handleClose(){
            this.$emit('close', false)
        }
    },
}
</script>

<style lang="scss" scoped>
.list-wrap{
    .list-item{
        padding: 10px 0;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: space-between;
        .name{
            font-size: 16px;
            color: #000;
        }
        .drag{
            cursor: move;
        }
    }
}
</style>