wanda-editer/src/components/edit/edit-dialog.vue

<template>
    <div>
        <a-modal v-model="visible" title="选择编辑" width="1200px" class="edit-dialog" @cancel="handleCancel">
            <template slot="footer">
                <a-button key="back" @click="handleCancel">
                    取消
                </a-button>
                <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                    确认
                </a-button>
            </template>
            <div class="dialog-content">
                <div class="left">
                    <div class="header">
                        <div class="select">
                            <a-select style="width: 316px;margin: 0 10px" :default-value="'#'" :value="majorId">
                                <a-select-option value="#"
                                                @click="handleChange('#')">
                                推荐
                                </a-select-option>
                                <a-select-opt-group>
                                    <span slot="label">位置区域</span>
                                    <a-select-option v-for="item in locationList" :value="item.id"
                                                    @click="handleChange(item)">
                                        {{item.name}}
                                </a-select-option>
                                <a-select-opt-group>
                                    <span slot="label">设备设施</span>
                                    <a-select-option v-for="item in majorList" :value="item.id" @click="handleChange(item)">
                                        {{item.name}}
                                    </a-select-option>
                                </a-select-opt-group>

                                </a-select-opt-group>
                            </a-select>
                            <!--            <Select style="margin: 0 10px"-->
                            <!--                    v-model="majorId"-->
                            <!--                    @change="handleMajor"-->
                            <!--                    :hideClear='true'-->
                            <!--                    :selectdata="majorList"-->
                            <!--                    :placeholder="'请选择'"-->
                            <!--                    class="search-select"-->
                            <!--                    width="236" isReadOnly-->
                            <!--            />-->
                        </div>
                        <div class="search">
                            <Select
                                    v-model="floorId"
                                    caption="所属楼层："
                                    @change="chageFloor"
                                    :hideClear='false'
                                    :selectdata="dataFloor"
                                    :placeholder="'请选择'"
                                    class="search-select"
                                    width="236"
                            />
                            <a-input-search placeholder="搜索位置名称" class="press-enter" @search="onSearch" v-model="keyword"/>

                        </div>
                    </div>
                    <div class="tree" >
                        <a-spin :spinning="spinning">
                        <a-input-search placeholder="请输入关键字" v-if="selectVal ||treeData.length" style="width: 315px;margin: 10px 10px;"  v-model="selectVal"  @search="onSearchTree" />
                    <div style="height: 385px;overflow-y: scroll;">
                        <Tree v-if="treeData.length" @change="getTreeId" :data="treeData"/>
                        <div v-else style="margin: 40px 70px;">暂无推荐数据</div>
                    </div>
                        </a-spin>
                    </div>
                    <div class="checkbox">
                        <a-table :pagination="false" :row-key='typeEdit=="Zone"?"location":"assetnum"'
                                :columns="typeEdit=='Image'?columnsSys:typeEdit=='Zone'?columnsLocal:objSys"
                                :data-source="tableData"
                                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect }"
                                :scroll="{ y: 340 }" :loading="loading"/>
                        <a-pagination v-if="total>0" v-model="page" :total="total" show-less-items
                                    style="margin-left: auto;" @change="handleTableChange"/>
                    </div>
                </div>
                <div class="right">
                    <div class="header">
                        <span class="select-number">已选择 <b>{{arrList.length}}</b>/{{sysNum}}</span>
                        <a-button type="link" class="link" @click="clearArrList" :disabled="arrList.length==0">清空</a-button>
                    </div>

                    <div class="list-box">
                        <p v-for="(item,index) in arrList" :key="index" class="list">{{item.sbjc||item.wzjc}}
                            <a-icon type="close" class="icon" @click="deleteItem(item,index)"/>
                        </p>
                    </div>

                </div>
            </div>
        </a-modal>

        <a-modal v-model="visibleBind" title="是否批量绑定图例" width="420px" class="edit-dialog" @cancel="handleClickCancel" centered>
            <template slot="footer">
                <a-checkbox @change="onChangeRemember" :checked="isRem" style="float: left;margin-top: 5px;">
                    记住操作，不再提醒
                </a-checkbox>
                <a-button key="back" @click="handleClickUntreated">
                    暂不处理
                </a-button>
                <a-button key="submit" type="primary" :loading="loading" @click="handleClickBind">
                    批量绑定
                </a-button>
            </template>
            <div>
                <p>{{`系统自动将其他平面图中的“${lengedName}”绑定相同台账，涉及以下平面图：`}}</p>

                <p>Bla bla ...</p>
                <p>Bla bla ...</p>
            </div>
        </a-modal>
    </div>
</template>

<script>
    import searchTree from "@/components/edit/search_tree";
    import {
        queryGlsmsasset,
        getQuerySmsxt,
        getPlazaFloor,
        getQuerySmsxtBy,
        queryWzfldl,
        queryWzflByDl,
        queryGlsmsLocation,
        graphElementOrderInfoLocal
    } from "@/api/editer";
    import bus from "@/bus";
    import {getUrlMsg} from '@/components/urlMsg.js';
    import { mapGetters } from 'vuex';

    export default {
        name: "edit-dialog",
        components: {searchTree},
        props: {
            sysNum: Number,//设备总数
            attrCards: Array,
            // getmajorId: String,
            InfoLocal: Array,
            GraphElementId:String,
            lengedName: String
        },
        computed: {
            ...mapGetters(["isRemember","rememberBtn"])
            // majorId() {
            //     return ''
            // }
        },
        data() {
            return {
                spinning:false,
                loading: false,
                visible: false,
                model: 'test1',
                searchName: '',
                floorId: "",//所属楼层
                dataFloor: [],
                plainOptions: ['福建三明万达-供电系统-6楼-工程信息化中的区域编码ND182472e83742', '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742'],
                majorList: [],
                locationList: [],
                checkedList: [],
                keyword: '',
                classstructureid: '',
                locfl: '',
                objSys: [
                    {
                        title: '对象名称',
                        dataIndex: 'sbjc',
                        key: 'sbjc',
                        width: '75%',
                        scopedSlots: {customRender: 'sbjc'},
                    },
                    {
                        title: '对象内码',
                        dataIndex: 'sbjbm',
                        key: 'sbjbm',
                        width: '25%',
                    },
                ],
                columnsSys: [
                    {
                        title: '设备名称',
                        dataIndex: 'sbjc',
                        key: 'sbjc',
                        width: '75%',
                        scopedSlots: {customRender: 'sbjc'},
                    },
                    {
                        title: '设备内码',
                        dataIndex: 'assetnum',
                        key: 'assetnum',
                        width: '25%',
                    },
                ],
                columnsLocal: [
                    {
                        title: '位置名称',
                        dataIndex: 'wzjc',
                        key: 'wzjc',
                        width: '75%',
                        scopedSlots: {customRender: 'wzjc'},
                    },
                    {
                        title: '位置内码',
                        dataIndex: 'location',
                        key: 'location',
                        width: '25%',
                    },
                ],
                tableData: [],
                loading: false,
                page: 1,
                size: 10,
                treeData: [],
                total: 0,
                selectedRowKeys: [],
                arrList: [],
                selectList: [],
                typeEdit: '',
                selectVal:'',
                sysId:'',
                majorId:'#',
                visibleBind: false, // 是否显示批量绑定弹窗
                isRem: false, // 是否记住操作

            }
        },
        watch: {
            floorId(val) {
                if (val == '') {
                    this.queryGlsmsasset();
                }
            },
            selectVal(val){
                if(val==''){
                    if(this.majorId=='#'){
                        this.tuijian();
                    } else if(this.sysId!=''){
                        this.getQuerySmsxtBy(this.sysId, this.typeEdit)
                    }
                    else{
                        this.getQuerySmsxtBy(this.majorId,'Image')
                    }

                }

            }
        },
        methods: {
            showModal() {
                this.visible = true;
            },
            handleOk(e) {
                // this.loading = true;
                // this.visible = false;
                // this.loading = false;
                const lists = [];
                let arr = [];
                arr = JSON.parse(JSON.stringify(this.arrList))
                arr.map(item => {
                    if (item.type=='Zone') {
                        lists.push({id: item.location, name: item.wzjc , type: 'Zone'})
                    }
                    if (item.type=='Image') {
                        lists.push({
                            id: item.assetnum,
                            name: item.sbjc,
                            type: 'Image'
                        })
                    }
                })
                bus.$emit('changeAttachObjectIds', lists, true)
                bus.$emit('updateAttachMsg', lists)
                if (this.isRem && this.rememberBtn == "bind") {
                    // 直接绑定接口
                } else if (!this.isRem) {
                    // 打开批量绑定弹窗并查询相关楼层
                    this.visibleBind = true;
                }
                // setTimeout(() => {
                //     this.visible = false;
                //     this.loading = false;
                //     const lists = [];
                //     let arr = [];
                //     arr = JSON.parse(JSON.stringify(this.arrList))
                //     console.log(arr);
                //     arr.map(item => {
                //         if (item.type=='Zone') {
                //             lists.push({id: item.location, name: item.wzjc , type: 'Zone'})
                //         }
                //         if (item.type=='Image') {
                //             lists.push({
                //                 id: item.assetnum,
                //                 name: item.sbjc,
                //                 type: 'Image'
                //             })
                //         }
                //     })
                //     console.log(lists);
                //     bus.$emit('changeAttachObjectIds', lists)
                //     bus.$emit('updateAttachMsg', lists)
                // }, 1000);
            },
            // 查询相关图并打开批量绑定弹窗
            getBindGraphs() {
                const data = {
                    "Data":{
                        "HasPub":[ ],
                        "NotPub":[
                            {
                                "Graphs":[
                                    {
                                        "BuildingId":"1",
                                        "CategoryId":"LCGN",
                                        "Floor":{
                                            "Code":"B1",
                                            "Gcode":"B1",
                                            "Gname":"b1",
                                            "Name":"地下1层",
                                            "Seq":-100
                                        },
                                        "FloorId":"b1",
                                        "Id":"3e3f48bf970a4a9b9d51cb32abe2747b",
                                        "IsPub":false,
                                        "ProjectId":"1000423"
                                    },
                                    {
                                        "BuildingId":"1",
                                        "CategoryId":"LCGN",
                                        "Floor":{
                                            "Code":"F5",
                                            "Gcode":"5F",
                                            "Gname":"f5",
                                            "Name":"第5层",
                                            "Seq":500
                                        },
                                        "FloorId":"f5",
                                        "Id":"49a886cb00df4d72ade2786d6536dc5a",
                                        "IsPub":false,
                                        "ProjectId":"1000423"
                                    }
                                ],
                                "Id":"LCGN",
                                "Name":"楼层功能"
                            },
                            {
                                "Graphs":[
                                    {
                                        "BuildingId":"1",
                                        "CategoryId":"XFXT",
                                        "Floor":{
                                            "Code":"F6",
                                            "Gcode":"6F",
                                            "Gname":"f6",
                                            "Name":"第6层",
                                            "Seq":600
                                        },
                                        "FloorId":"f6",
                                        "Id":"4ae0893d48a249339f53883ac2cd1b36",
                                        "IsPub":false,
                                        "ProjectId":"1000423"
                                    }
                                ],
                                "Id":"XFXT",
                                "Name":"消防系统"
                            }
                        ]
                    },
                    "Message":"",
                    "Result":"success"
                }

            },
            handleCancel(e) {
                this.visible = false;
                let arr = [];
                const lists = [];
                console.log(this.selectList);
                arr = JSON.parse(JSON.stringify(this.selectList))
                arr.map(item => {
                    if (item.type=='Zone') {
                        lists.push({id: item.location , name: item.wzjc , type: 'Zone'})
                    }
                    if (item.type=='Image') {
                        lists.push({id: item.assetnum, name: item.sbjc, type: 'Image'})
                    }

                })
                console.log(lists);
                bus.$emit('changeAttachObjectIds', lists, false)
            },
            // 关闭批量绑定弹窗
            handleClickCancel() {
                this.visibleBind = false;
                this.isRem = false;
                this.$store.commit("setIsRemember", this.isRem);
            },
            // 勾选记住选择复选框
            onChangeRemember(e) {
                this.isRem = e.target.checked;
                this.$store.commit("setIsRemember", this.isRem);
            },
            // 点击暂不处理按钮
            handleClickUntreated() {
                this.$store.commit("setRememberBtn", "untreated");
                this.visibleBind = false;
            },
            // 点击批量绑定按钮
            handleClickBind() {
                this.$store.commit("setRememberBtn", "bind");
                this.visibleBind = false;
            },
            onSearch(value) {
                this.queryGlsmsasset()
            },
            // ChangeCheckbox(val) {
            //     console.log(val)
            // },
            //图例搜索--推荐
            tuijian(){
                this.treeData = [];
                this.spinning = true
                graphElementOrderInfoLocal({
                    graphElementId:this.GraphElementId,
                }).then(res=>{
                    this.spinning = false;
                    const data = res.Data;
                    (function recursion(newObj) {
                        newObj.map(item => {
                            item.label = item.name;
                            item.checked = 'unchecked';
                            if (item.children) {
                                recursion(item.children);
                            }
                        })
                    })(data)
                    this.treeData = data;
                    this.treeData.length && this.treeData.map(item=>{
                        const index = item.name.indexOf('/');
                        item.name = item.name.slice(index+1);
                    })
                }).catch(()=>{
                    this.spinning = false;
                })
            },
            handleChange(val) {
                this.selectVal='';
                this.tableData = [];
                this.treeData = [];

                if(val=='#'){
                    this.majorId = '#';
                    this.tuijian();
                }else{
                    this.majorId = val.id;
                    this.typeEdit = val.type;
                    this.sysId = val.id;
                    this.getQuerySmsxtBy(val.id, val.type)
                }


            },
            // handleMajor(val) {
            //     this.tableData = [];
            //     this.getQuerySmsxtBy(val.id)
            // },
            chageFloor(data) {
                this.queryGlsmsasset();
            },
            pressEnter(e) {
                console.log(e)
            },
            //获取treeId --classstructureid
            onSearchTree(val){
                console.log(this.majorId);
                const arr = [];
                const reg = new RegExp(val, 'g');
                let flag= false;
                if(this.majorId=='#'){
                    this.treeData.map(item=>{
                        if(item.name.indexOf(val)!=-1){
                            item.name=item.name.replace(reg, `<span style="color:#F96600">${val}</span>`);
                            arr.push(item)
                        }
                    })
                }
             else if(this.typeEdit=='Zone'){
                  this.treeData.map((item)=>{
                      if(item.name.indexOf(val)!=-1){
                          item.name=item.name.replace(reg, `<span style="color:#F96600">${val}</span>`);
                          arr.push(item)
                      }
                  });

              }
               else if(this.typeEdit=='Image'){
                    console.log(this.treeData);
                    this.treeData.map(item=>{
                        if(item.name.indexOf(val)!=-1){
                            item.name=item.name.replace(reg, `<span style="color:#F96600">${val}</span>`);
                            arr.push(item)
                        }else{
                            item.children.map(item1=>{
                                if(item1.name.indexOf(val)!=-1){
                                    flag = true;
                                    item.open=true;
                                    item1.name=item1.name.replace(reg, `<span style="color:#F96600">${val}</span>`);
                                }
                            })
                            if(flag){
                                arr.push(item)
                            }
                        }

                    })

                }
                this.treeData = arr;
            },
            //获取树的数据
            getTreeId(id) {
                console.log(id);
                if(id.type){
                    if(id.type==2){
                        this.typeEdit = 'Image'
                    }
                    if(id.type==1){
                        this.typeEdit = 'Zone'
                    }
                }
                if (this.typeEdit == 'Image') {
                    this.classstructureid = id.id;
                } else if (this.typeEdit == 'Zone') {
                    this.locfl = id.id;
                }

                this.queryGlsmsasset();
            },
            //获取表格数据
            queryGlsmsasset() {
                if (!this.classstructureid && !this.locfl) {
                    return
                }
                const data = {
                    plazaId: getUrlMsg().projectId,//广场id 必填
                    page: this.page,//页数
                    size: this.size,//条数
                }
                if (this.keyword) {
                    data.keyword = this.typeEdit == 'Image' ? `${this.keyword}:sbjc` : `${this.keyword}:wzjc`
                }
                let paramData ;
                let paramDataLocal;
                if( this.floorId =='#'||this.floorId==''){
                    paramData = {classstructureid: this.classstructureid};
                    paramDataLocal = {locfl: this.locfl};
                }else {
                    let gcname = '';
                    // 取gcname
                    this.dataFloor.forEach(item=>{
                        console.log('xxxxxxxx',item,this.floorId)
                        if(item.gname == this.floorId){
                            gcname=item.gcname
                        }
                    })
                    paramData = {classstructureid: this.classstructureid, gname: gcname};
                    console.log('gcname',gcname)
                    paramDataLocal = {locfl: this.locfl, gname: gcname};
                }

                this.loading = true;
                if (this.typeEdit == 'Image') {
                    queryGlsmsasset(data, paramData).then(res => {
                        this.loading = false;
                        if (res.data.result == 'success') {
                            this.total = res.data.count;
                            if (res.data.data) {
                                const data = res.data.data;
                                data.map(item => {
                                    item.id = item.sbjbm
                                })
                                this.tableData = data;

                            } else if (res.data.count == 0) {
                                this.tableData = [];
                            }
                        } else {
                            this.$message.error('数据请求失败')
                        }
                    })
                } else if (this.typeEdit == 'Zone') {
                    queryGlsmsLocation(data, paramDataLocal).then(res => {
                        this.loading = false;
                        if (res.data.result == 'success') {
                            this.total = res.data.count;
                            if (res.data.data) {
                                this.tableData = res.data.data;
                            } else if (res.data.count == 0) {
                                this.tableData = [];
                            }
                        } else {
                            this.$message.error('数据请求失败')
                        }
                    })
                }

            },
            //分页切换点击
            handleTableChange(page, pageSize) {
                this.page = page;
                this.queryGlsmsasset();
            },
            onSelect(record, selected, selectedRows, nativeEvent) {
                if (!selected && this.arrList.length > 0) {
                    this.arrList.map((item, index) => {
                        if (this.typeEdit == 'Zone' && item.location == record.location) {
                            this.arrList.splice(index, 1);
                        } else if (this.typeEdit == 'Image' && item.assetnum == record.assetnum) {
                            this.arrList.splice(index, 1);
                        }
                    })
                }
            },
            // 中间表格勾选
            onSelectChange(selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys;
                if (this.selectedRowKeys.length > this.sysNum) {
                    this.selectedRowKeys.pop();
                    this.$message.error('不能超过设备数')
                    return false;
                }
                selectedRows.map(item => {
                    item.type = this.typeEdit;
                })

                console.log(selectedRows);
                this.arrList = [...this.arrList, ...selectedRows]
                console.log(this.arrList);
                const obj = {}
                // console.log(this.typeEdit);
                // if (this.typeEdit == 'Zone') {
                    this.arrList = this.arrList.reduce(function (item, next) {
                        obj[next.location||next.assetnum] ? ' ' : obj[next.location||next.assetnum] = true && item.push(next)

                        return item;

                    }, [])
                //     console.log(this.arrList);
                // } else {
                //     this.arrList = this.arrList.reduce(function (item, next) {
                //         obj[next.assetnum] ? ' ' : obj[next.assetnum] = true && item.push(next)
                //
                //         return item;
                //
                //     }, [])
                //     console.log(this.arrList);
                // }
                console.log(this.arrList);
            },
            //右侧删除
            deleteItem(item, index) {
                this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(item.location || item.assetnum), 1);
                this.arrList.splice(index, 1);
            },
            //右侧清空
            clearArrList() {
                this.selectedRowKeys = [];
                this.arrList = [];
            },
            //获取楼层
            getPlazaFloor() {
                const data = {
                    plazaId: getUrlMsg().projectId
                }
                getPlazaFloor(data).then(res => {
                    if (res.result == 'success') {
                        const data = res.data;
                        data.map(item => {
                            item.id = item.gname;
                            item.name = item.code;
                        })
                        this.dataFloor = data;
                        this.dataFloor.unshift({id:'#',name:'全部'})
                    }
                })
            },
            //获取设备大类和位置大类
            getQuerySmsxt() {
                queryWzfldl({}).then(res => {
                    if (res.result == 'success') {
                        if (res.data) {
                            const data = res.data;
                            data.map(item => {
                                item.id = item.dl;
                                item.name = item.dl;
                                item.type = 'Zone'
                            })
                            this.locationList = data;
                        }
                    }
                })
                // if (this.typeEdit=='Image'){
                getQuerySmsxt({}).then(res => {
                    if (res.result == 'success') {
                        if (res.data) {
                            const data = res.data;
                            data.map(item => {
                                item.id = item.code;
                                item.name = item.name;
                                item.type = 'Image';
                            })
                            this.majorList = data;
                        }
                    }
                })
                // }else if(this.typeEdit =='Zone'){


                // }

            },
            // 获取设备大类下的分类和位置大类下的分类
            getQuerySmsxtBy(smsxt, type) {

                if (type == 'Image') {
                    const data = {
                        smsxt: smsxt
                    }
                    this.spinning = true
                    getQuerySmsxtBy(data, {}).then(res => {
                        this.spinning = false;
                        if (res.result == 'success') {
                            if (res.data) {
                                const data = res.data;
                                (function recursion(newObj) {
                                    newObj.map(item => {
                                        item.name = item.gcxxhxtname || item.classqc;
                                        item.id = item.gcxxhxtnum || item.id;
                                        item.children = item.data;
                                        item.open = false;
                                        item.checked = 'unchecked';
                                        item.type='Image';
                                        if (item.children) {
                                            recursion(item.children);
                                        }
                                    })
                                })(data)

                                this.treeData = data;
                                // let that = this;
                                // if (this.treeData.length && this.InfoLocal.length) {
                                //     let arr = [];
                                //     let infoLocalId = this.InfoLocal[0].id;
                                //     this.treeData.map((item, index) => {
                                //         item.children.map((item1, index1) => {
                                //             if (infoLocalId==item1.id) {
                                //                 item.open = true;
                                //                 item1.checked = 'checked';
                                //               this.typeEdit = 'Image'
                                //               that.classstructureid = item1.id;
                                //               that.queryGlsmsasset();
                                //             }
                                //
                                //             return item1
                                //         })
                                //         return item
                                //     })
                                // }
                            }
                        } else {
                            this.$message.error('获取失败');
                        }
                    }).catch(()=>{
                        this.spinning = false;
                    })
                } else if (type == 'Zone') {
                    const data = {
                        dl: smsxt
                    }
                    this.spinning = true
                    queryWzflByDl(data, {}).then(res => {
                        this.spinning = false;
                        if (res.result == 'success') {
                            if (res.data) {
                                const data = res.data;
                                (function recursion(newObj) {
                                    newObj.map(item => {
                                        item.label = item.name;
                                        item.checked = 'unchecked';
                                        item.type='Zone';
                                        if (item.children) {
                                            recursion(item.children);
                                        }
                                    })
                                })(data)

                                this.treeData = data;
                            }
                        } else {
                            this.$message.error('获取失败');
                        }
                    }).catch(()=>{
                        this.spinning = false;
                    })
                }

            }
        },
        created() {
            // 取gcname
            this.floorId = getUrlMsg().FloorID;
            // 获取vuex的isRemember赋值给isRem
            this.isRem = this.isRemember;
            //如果有专业就带过来
            if (this.GraphElementId) {
              this.tuijian();
            }
            if (this.attrCards.length) {
                this.attrCards.map(item => {
                    this.selectedRowKeys.push(item.location || item.assetnum)
                })
                this.arrList = JSON.parse(JSON.stringify(this.attrCards));
                console.log(this.arrList);
                this.selectList = JSON.parse(JSON.stringify(this.attrCards));
            } else {
                this.selectedRowKeys = [];
            }
            this.getQuerySmsxt();

            this.getPlazaFloor();

        }
    }
</script>

<style scoped lang="less">
    .edit-dialog {
        .dialog-content {
            width: 1136px;
            height: 499px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: 1px solid rgba(239, 240, 241, 1);
            display: flex;
            /*overflow: auto;*/

            .left {
                width: 865px;
                border-right: 1px solid #EFF0F1;

                .header {
                    width: 865px;

                    .select {
                        width: 340px;
                        border-right: 1px solid #EFF0F1;
                        display: inline-block;
                    }

                    .search {
                        width: 524px;
                        display: inline-block;

                        .search-select {
                            margin-left: 10px;
                            position: relative;
                            top: -2px;
                        }

                        .press-enter {
                            margin-left: 10px;
                            width: 236px;
                        }
                    }


                }


                .tree {
                    width: 339px;
                    height: 441px;
                    border-right: 1px solid #EFF0F1;
                    display: inline-block;
                    float: left;
                    overflow-y: scroll;
                    overflow: overlay;

                }

                .checkbox {
                    /*margin-top: 17px;*/
                    /*margin-left: 13px;*/
                    width: 525px;
                    height: 441px;
                    display: inline-block;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    /deep/ .ant-table-selection-column {
                        .ant-table-header-column {
                            display: none;
                        }
                    }
                }
            }

            .right {
                flex-grow: 1;

                .list-box {
                    height: 440px;
                    overflow-y: scroll;

                    .list {
                        background: rgba(239, 240, 241, 1);
                        border-radius: 2px;
                        margin: 8px 12px;
                        position: relative;
                        padding: 5px;

                        .icon {
                            position: absolute;
                            bottom: 5px;
                            right: 5px;
                            cursor: pointer;
                        }
                    }
                }


                .select-number {
                    margin-left: 12px;

                }

                .link {
                    float: right;
                    line-height: 57px;
                }
            }

            .header {
                height: 57px;
                line-height: 57px;
                border-bottom: 1px solid #EFF0F1;
            }
        }

        /deep/ .ant-input-affix-wrapper .ant-input-suffix {
            /*left: 12px;*/
            /*padding-right: 12px;*/
        }

        /deep/ .ant-modal-footer {
            border: 0;
        }

        /deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
            margin: 0;
        }
    }
</style>