eta_front/src/views/chartFrame_manage/frameEditor.vue

<template>
    <!-- 添加编辑框架 -->
    <div class="frame-editor-wrap">
        <div class="option-wrap">
            <el-input style="width:240px;" placeholder="请输入框架名称" v-model.trim="frameDetail.FrameworkName"></el-input>
            <el-button type="primary" style="margin-left:auto;" @click="handleEditNode({})"
                v-if="permissionBtn.isShowBtn('chartFramePermission','chartframe_my_editNode')">添加节点</el-button>
            <el-button type="primary" style="margin-left:20px;" @click="saveFrame"
                v-if="permissionBtn.isShowBtn('chartFramePermission','chartframe_my_saveFrame')">保存</el-button>
        </div>
        <div class="editor-wrap">
            <!-- 沙盘图组件 -->
            <FrameContainer ref="container"
                :FrameworkContent="frameDetail.FrameworkContent"
                @editNode="handleEditNode"
                @framePic="getFramePic"
            />
        </div>
        <!-- 添加/编辑节点弹窗 -->
        <el-dialog
            :title="modifyNode.nodeId?'编辑节点':'添加节点'"
            :visible.sync="isModifyNodeDialogShow"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            @close="isModifyNodeDialogShow=false"
            width="589px"
            v-dialogDrag
            center
        >
            <div class="dialog-container">
                <el-form
                    ref="refForm"
                    :model="modifyNode"
                    :rules="rules"
                >
                    <el-form-item label="节点名称" prop="nodeName">
                        <el-input v-model.trim="modifyNode.nodeName" placeholder="请输入节点名称" style="width:217px;"></el-input>
                    </el-form-item>
                    <el-form-item label="节点链接" prop="nodeLink">
                        <el-select v-model="modifyNode.nodeLink" value-key="MyChartClassifyId" placeholder="请选择节点链接" style="width:217px;">
                            <el-option v-for="item in myList" 
                                :key="item.MyChartClassifyId"
                                :label="item.MyChartClassifyName"
                                :value="item">
                                <span style="float:left;">{{item.MyChartClassifyName}}</span>
                                <span style="float:right;color: #8492a6; font-size: 13px"
                                @click="goToList(item)"><img src="~@/assets/img/chart_m/check.png"></span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="dialog-footer">
                <el-button @click="isModifyNodeDialogShow=false">取消</el-button>
                <el-button type="primary" @click="editNode">确定</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import FrameContainer from './components/frameContainer.vue';
import { mychartInterface,chartFrameInterface,dataBaseInterface } from '@/api/api.js';
export default {
    components: { FrameContainer },
    data() {
        return {
            frameId:this.$route.query.frameId||0,
            frameDetail:{
                FrameworkName:'',
                FrameworkContent:'',
            },
            lockLoding:null,
            modifyNode: {},//正在编辑的节点
            isModifyNodeDialogShow: false,//编辑节点弹窗
            rules: {
                nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
                nodeLink: [{ required: true, message: "请选择节点链接", trigger: "blur" }]
            },
            myList:[],//我的图库列表
        };
    },
    methods: {
        //获取正在编辑的节点,弹出弹窗
        handleEditNode(node = {}) {
            this.$refs.refForm && this.$refs.refForm.resetFields();
            this.modifyNode = _.cloneDeep(node);
            this.isModifyNodeDialogShow = true;
        },
        //编辑节点,更改子组件节点信息,隐藏弹窗
        async editNode() {
            await this.$refs.refForm.validate();
            if(!this.$refs.container) return
            this.$refs.container.editNode(this.modifyNode)
            this.$message.success(`${this.modifyNode.nodeId ? '编辑' : '添加'}节点成功`);
            this.isModifyNodeDialogShow = false;
        },
        //跳转至my eta
        goToList(item) {
            window.open(`/mychart?frameId=${item.MyChartClassifyId}`);
        },
        //保存框架:内容验证->生成缩略图->获取节点信息,内容信息->编辑/添加框架
        async saveFrame(){
            if(!this.frameDetail.FrameworkName.length){
                return this.$message.warning("请输入框架名称")
            }
            if(!this.$refs.container.graph.toJSON().cells.length){
                return this.$message.warning('请绘制画布内容');
            }

            this.lockLoding = this.$loading({
                lock: true,
                text: '保存中...',
                target: '.frame-editor-wrap',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.8)'
            });

            //获取框架内容图片
            const svgData = this.$refs.container.getContentPic()
            if(svgData){
                const params = new FormData();
                params.append('Img',svgData)
                const { Data,Ret } = await dataBaseInterface.uploadImgSvg(params);
                if(Ret !== 200) return;
                if(!Data){
                    return this.$message.warning("上传图片失败")
                }
                this.frameDetail.FrameworkImg = Data.ResourceUrl||''
            }
            //获取框架节点和内容
            this.frameDetail.Nodes = this.$refs.container.getContentNodes()
            this.frameDetail.FrameworkContent = JSON.stringify(this.$refs.container.graph.toJSON())
            if(this.frameId){
                //edit
                chartFrameInterface.editFrame({...this.frameDetail,...{ChartFrameworkId:Number(this.frameId)}}).then(res=>{
                    this.lockLoding.close();
                    if(res.Ret!==200) return 
                    this.$message.success("编辑成功")
                })
            }else{
                //add 
                chartFrameInterface.addFrame(this.frameDetail).then(res=>{
                    this.lockLoding.close();
                    if(res.Ret!==200) return 
                    this.frameId = res.Data?res.Data.ChartFrameworkId:0
                    this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
                    this.$message.success("新增成功")
                    //切换至编辑页
                    this.$router.replace({path:'/editframe',query:{frameId:this.frameId}})
                })
            }
        },
        getMyList(){
            mychartInterface.classifyList().then((res)=>{
                if(res.Ret!==200) return
                if(!res.Data) return 
                this.myList = res.Data.List||[]
            })
        },
        async getFrameDetail(){
            if(this.frameId){
                const res = await chartFrameInterface.getFrameDetail({ChartFrameworkId:Number(this.frameId)})
                if(res.Ret!==200) return 
                this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
            }
            //获取到框架内容后再加载graph
            this.$nextTick(()=>{
                this.$refs.container.init()
            })
            
        },
    },
    mounted(){
        this.getMyList()
        this.getFrameDetail()
    }
};
</script>

<style scoped lang="scss">
.frame-editor-wrap{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    *{box-sizing: border-box;}
    .option-wrap{
        background-color:#fff;
        padding:20px;
        display: flex;
        justify-content: space-between;
    }
    .editor-wrap{
        margin-top: 15px;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        overflow: hidden;
        .frame-wrap{
            flex:1;
            background-color: #F2F6FA;
        }
    }
    .el-dialog{
        .dialog-container{
           .el-form{
               .el-form-item{
                   display: flex;
                   justify-content: center;
               }
           }
        }
        .dialog-footer{
            text-align: center;
            padding-bottom:25px;
        }
    }
}
</style>