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

<template>
    <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>
</template>

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

    export default {
        name: "edit-dialog",
        components: {searchTree},
        props: {
            sysNum: Number,//设备总数
            attrCards: Array,
            // getmajorId: String,
            InfoLocal: Array,
            GraphElementId:String
        },
        computed: {
            // 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: 'sbjbm',
                        key: 'sbjbm',
                        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:'#'
            }
        },
        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;
                setTimeout(() => {
                    this.visible = false;
                    this.loading = false;
                    const lists = [];
                    let arr = [];
                    arr = JSON.parse(JSON.stringify(this.arrList))
                    arr.map(item => {
                        if (item.wzjc) {
                            lists.push({id: item.location || item.assetnum, name: item.wzjc || item.sbjc, type: 'Zone'})
                        }
                        if (item.sbjc) {
                            lists.push({
                                id: item.location || item.assetnum,
                                name: item.wzjc || item.sbjc,
                                type: 'Image'
                            })
                        }
                    })
                    console.log(lists);
                    bus.$emit('changeAttachObjectIds', lists)
                    bus.$emit('updateAttachMsg', lists)
                }, 1000);
            },
            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.wzjc) {
                        lists.push({id: item.location || item.assetnum, name: item.wzjc || item.sbjc, type: 'Zone'})
                    }
                    if (item.sbjc) {
                        lists.push({id: item.location || item.assetnum, name: item.wzjc || item.sbjc, type: 'Image'})
                    }

                })
                console.log(lists);
                bus.$emit('changeAttachObjectIds', lists)
            },
            onSearch(value) {
                this.queryGlsmsasset()
            },
            // ChangeCheckbox(val) {
            //     console.log(val)
            // },
            //图例搜索--推荐
            tuijian(){
                this.treeData = [];
                this.spinning = true
                graphElementQuery({
                    "Filters": "id="+this.GraphElementId,
                    "Projection": [
                        "infoLocal"
                    ]
                }).then(res=>{
                    this.spinning = false;
                    let data = res.Content[0].InfoLocal;
                    (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=>{
                        let 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);
                let 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 {
                    paramData = {classstructureid: this.classstructureid, gname: this.floorId};
                    paramDataLocal = {locfl: this.locfl, gname: this.floorId};
                }

                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';
                                        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';
                                        if (item.children) {
                                            recursion(item.children);
                                        }
                                    })
                                })(data)

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

            }
        },
        created() {
            this.floorId = getUrlMsg().FloorID;
            //如果有专业就带过来
            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));
                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>