wanda-bm-guide/src/views/legendLibrary/addLegend.vue

<template>
    <div class='add-legend'>
        <el-dialog :title='title' :visible.sync='dialogVisible'>
            <!-- <add-list v-show='title=="" && GraphCategoryId' ref='searchList' :GraphCategoryId='GraphCategoryId' @mesg='mesg'></add-list> -->
            <add-form ref='add' :ruleForm='info' @addSuccess='addSuccess' @updateSuccess='updateSuccess' :title='title'></add-form>
            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogVisible = false,cancal()' size='small'>取 消</el-button>
                <el-button type='primary' @click='save' size='small'>确 定</el-button>
            </span>
        </el-dialog>
        <TransferSelectModal
            defaultExpandAll
            default-expand-all
            v-if='treeData.length'
            :modalShow='modalShow4'
            placeholder='搜索'
            :linkage='false'
            :lastStage='true'
            :data='treeData'
            @cancel='treeCancel'
            @confirm='treeConfirm'
        />
    </div>
</template>

<script>
import addForm from './addForm'
import addList from '../legendRules/addList'
import { groupByCategory, updateRelation } from '@/api/legendLibrary.js'

export default {
    data() {
        return {
            dialogVisible: false,
            info: {
                Name: '',
                Type: 'None',
                Unit: '',
                FillColor: '',
                Url: '',
                LineWidth: '',
                LineDash: '',
                InfoTypeId: [] //铺位可视化typeid
                // InfoLocal: [], //工程信息化位置与设备分类
                // InfoSystem: [] //工程信息化专业/系统
            },
            title: '',
            GraphCategoryId: 'DTXT',
            modalShow4: false,
            treeData: []
        }
    },
    components: { addForm, addList },
    methods: {
        open(row, title, GraphCategoryId) {
            this.title = title
            this.GraphCategoryId = GraphCategoryId
            console.log(title)
            if (GraphCategoryId) {
                groupByCategory({}).then(res => {
                    this.treeData = []
                    this.treeData = res.Data.map(i => this.getTree(i))
                })
                //treeSelect
                this.modalShow4 = true

                this.info = {
                    Name: '',
                    Type: 'None',
                    Unit: '',
                    FillColor: '',
                    Url: '',
                    InfoTypeId: [] //铺位可视化typeid
                    // InfoLocal: [], //工程信息化位置与设备分类
                    // InfoSystem: [] //工程信息化专业/系统
                }
            } else if (title == '添加图例库') {
                this.dialogVisible = true
                this.info = {
                    Name: '',
                    Type: 'None',
                    Unit: '',
                    FillColor: '',
                    Url: '',
                    InfoTypeId: [] //铺位可视化typeid
                    // InfoLocal: [], //工程信息化位置与设备分类
                    // InfoSystem: [] //工程信息化专业/系统
                }
            } else if (title == '修改图例库') {
                this.dialogVisible = true
                this.info = row
                // 图例库规则中的transform
            } else if (title == '' && this.$refs.searchList) {
                this.$refs.searchList.queryAll()
            }
        },
        getTree(data) {
            return {
                id: data.Id,
                name: data.Name,
                children: data.Children && data.Children.length > 0 ? data.Children.map(i => this.getTree(i)) : []
            }
        },
        cancal() {
            this.info = {
                Name: '',
                Type: 'None',
                Unit: '',
                FillColor: '',
                Url: '',
                InfoTypeId: [] //铺位可视化typeid
                // InfoLocal: [], //工程信息化位置与设备分类
                // InfoSystem: [] //工程信息化专业/系统
            }
        },
        mesg() {
            this.$emit('mesg')
        },
        updateSuccess() {
            this.$emit('updateSuccess')
        },
        addSuccess() {
            this.$emit('addSuccess')
            this.cancal()
        },
        save() {
            // FillColor,Color,Name
            if (this.info.Name == '') {
                this.$message.info('请填写图例名称')
                return false
            }
            //  else if (this.info.Type == 'Zone') {
            //     if (this.info.FillColor == '') {
            //         this.$message.info('请选择填充色以及透明度')
            //         return false
            //     }
            //     if (this.info.Color == '') {
            //         this.$message.info('请选择边框颜色')
            //         return false
            //     }
            // } else if (this.info.Type == 'Line') {
            //     if (this.info.Color == '') {
            //         this.$message.info('请选择边框颜色')
            //         return false
            //     }
            // }
            else {
                if (this.info.Type != 'Image' && this.info.Type != 'None') {
                    this.$refs.add.saveImg()
                } else {
                    if (this.title == '添加图例库') {
                        this.$refs.add.create()
                        this.$emit('addSuccess')
                    } else if (this.title == '修改图例库') {
                        this.$refs.add.update()
                        this.$emit('updateSuccess')
                    }
                }
                this.dialogVisible = false
                // if (!this.title || this.info.Type == 'None') {
                //     this.$refs.add.create()
                // }
            }
        },
        treeConfirm(ids, dataObj) {
            let postParams = {
                GraphCategoryId: this.GraphCategoryId.join(' '),
                GraphElementIds: ids
            }
            updateRelation({ postParams }).then(res => {
                if (res.Result == 'success') {
                    this.$message.success('添加成功！')
                    this.$emit('mesg')
                }
            })
        },
        treeCancel() {
            this.modalShow4 = false
        }
    }
}
</script>

<style lang='less' scoped>
.add-legend {
}
</style>
<style lang='less'>
.add-legend {
    .el-dialog {
        width: 840px;
        height: 509px;
    }
    .el-dialog__footer {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
}
</style>