sasp-admin 0.2.57

package/src/views/event/eventManager/vueEventDiy.vue

@@ -0,0 +1,1184 @@
+<!--事件管理 - 自定义 -->
+<template>
+    <el-container class="top_contain">
+        <!--查询条件 -->
+        <el-header style="height: auto;">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" :model="crud.searchForm" class="demo-form-inline" @keyup.enter.native="crud.doSearch()" size="small">
+                    <el-form-item label="事件名称" prop="eventName">
+                        <el-input v-model="crud.searchForm.eventName"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="规则类型" prop="eventType">
+                        <el-select v-model="crud.searchForm.eventType" placeholder="请选择">
+                            <el-option v-for="(value,key) in eventTypeObj" :key="key"
+                                       :label="value"
+                                       :value="key">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" @click="crud.doSearch(searchFunc,null)" size="small">查询
+                        </el-button>
+                        <el-button icon="el-icon-close" @click="crud.resetSearch(searchFunc)" size="small">清空</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-header>
+
+        <!--查询体 列表展示-->
+        <el-main id="tableMain" style="height: 100%;">
+            <el-container style="height: 100%;" class="table-list-container">
+                <el-header style="height: auto;" size="small">
+                    <!--新增-->
+                    <el-button  type="primary" size="small" round icon="el-icon-circle-plus" @click="addEvent()" >新增</el-button>
+                    <!--删除-->
+                    <el-button  type="danger" size="small" round icon="el-icon-delete"  @click="removeEvent()" >删除</el-button>
+                    <!--导入-->
+                    <!--<el-popover style="margin-left: 10px;margin-right: 10px;" v-model="importVisible"-->
+                                <!--placement="bottom" width="200" trigger="click">-->
+                        <!--<el-upload-->
+                                <!--class="upload-demo"-->
+                                <!--ref="impFileRef"-->
+                                <!--:auto-upload="false"-->
+                                <!--:file-list="fileList"-->
+                                <!--:action="api.plFlowDefine.impFlowData"-->
+                                <!--:limit="1"-->
+                                <!--accept=".rldmp"-->
+                                <!--:on-exceed="limitFile"-->
+                                <!--:on-change="changeFile"-->
+                                <!--:before-upload="beforeUpload"-->
+                                <!--:http-request="uploadFileMethod">-->
+                            <!--<el-button slot="trigger" size="small" type="primary">选取导入文件</el-button>-->
+                            <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="beginImp">-->
+                                <!--导入-->
+                            <!--</el-button>-->
+                        <!--</el-upload>-->
+                        <!--<el-button type="warning" size="small" round slot="reference" icon="el-icon-bottom-left">导入-->
+                        <!--</el-button>-->
+                    <!--</el-popover>-->
+
+                    <!--&lt;!&ndash;导出&ndash;&gt;-->
+                    <!--<el-button type="warning" size="small" round  @click="exportEvent()">导出</el-button>-->
+                    <!--模版下载-->
+                    <el-button type="success" size="small" round @click="templateDownload()">模版下载</el-button>
+                    <!--<a href="/static/eventTemplate/muban.rar" download="事件模板.rar">文件下载</a>-->
+                </el-header>
+                <!--列表-->
+                <el-main style="height: 100%;" ref="tableMain">
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef" stripe border height="100%" style="width: 100%;">
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+                        <el-table-column label="事件名称" prop="eventName" align="center"></el-table-column>
+                        <el-table-column label="规则类型" prop="eventType" align="center" width="200">
+                            <template slot-scope="scope">
+                                {{eventTypeObj[scope.row.eventType]}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="规则来源" prop="dataSource" align="center" width="200">
+                            <template slot-scope="scope">
+                                {{dataSourceObj[scope.row.dataSource]}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="排序" prop="eventOrder" align="center" width="160">
+                        </el-table-column>
+                        <el-table-column label="版本号" prop="version" align="center" width="160">
+                        </el-table-column>
+                        <el-table-column label="是否启用" prop="eventUse" align="center" width="180">
+                            <template slot-scope="scope">
+                                <el-switch
+                                           v-model="scope.row.eventUse"
+                                           active-color="#00A854"
+                                           active-value="1"
+                                           inactive-color="#CCCCCC"
+                                           inactive-value="0"
+                                           @change="switchChange(scope.row)">
+                                </el-switch>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="180">
+                            <template slot-scope="scope">
+                                <el-button size="small" icon="el-icon-zoom-in" type="primary" @click="editEvent(scope.row)">
+                                    编辑
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+            </el-container>
+        </el-main>
+
+        <!--底部分页-->
+        <el-footer>
+            <el-pagination
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page="crud.page"
+                    :total="crud.dataStore.total"
+                    @size-change="crud.sizeChange(searchFunc)"
+                    @current-change="crud.currentPage(searchFunc)"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+
+        <!--规则编辑-->
+        <el-dialog  :close-on-click-modal=false :title="eventTitle" top="10vh" height="80%" width="80%" lock-scroll
+                    :visible.sync="editEventDialog">
+            <el-form :model="eventObj" label-width="120px" style="width: 100%;" ref="eventFormRef">
+                <div v-if="eventObj.id && eventObj.dataSource == '2'">
+                    <el-form-item label="事件名称" prop="eventName" :rules="plValidate('required')">
+                        <el-input v-model="eventObj.eventName"></el-input>
+                    </el-form-item>
+                </div>
+                <div v-else>
+                    <el-form-item label="事件名称" prop="eventKey" :rules="eventKeyValidate">
+                        <el-select v-model="eventObj.eventKey" placeholder="请选择"  style="width: 100%" @change="changeRuleSet()">
+                            <el-option-group
+                                    v-for="group in options"
+                                    :key="group.name"
+                                    :label="group.name">
+                                <el-option
+                                        v-for="item in group.options"
+                                        :key="item.id"
+                                        :label="item.name"
+                                        :value="item.id">
+                                </el-option>
+                            </el-option-group>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="唯一标识" prop="eventOrder" >
+                            <el-input v-model="eventObj.eventKey" disabled></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="规则类型" prop="eventType" >
+                            <el-select v-model="eventObj.eventType" placeholder="请选择"  style="width: 100%" disabled>
+                                <el-option v-for="(value,key) in eventTypeObj"
+                                           :key="key"
+                                           :label="value"
+                                           :value="key">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="事件顺序" prop="eventOrder" :rules="plValidate('numberInt')">
+                            <el-input v-model="eventObj.eventOrder"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div style="text-align: center">
+                    <!--<el-button type="primary" @click="preViewEvent()">预览</el-button>-->
+                </div>
+                <div v-if="editEventDialog && previewConfigObj.config">
+                    <div class="event-rule-config-class">
+                        <div style="font-weight: bold;margin-bottom: 5px">配置效果预览</div>
+                        <el-card class="box-card">
+                            <el-form ref="eventRuleConfigForm"
+                                     :model="configObj" label-width="80px"
+                                     :validate-on-rule-change="false" size="small"
+                                     style="width: 100%;height: 270px;padding:5px;box-sizing: border-box;overflow-y: auto">
+                                <div>
+                                    <component
+                                            v-if="editEventDialog && previewConfigObj.config"
+                                            :is="previewConfigObj.config"
+                                            :config-data="configObj"
+                                            :data-type-arr="dataTypeArr"
+                                            :data-tree-obj="dataTreeObj"
+                                            ref="configCompRef">
+                                    </component>
+                                </div>
+                            </el-form>
+                            <!--列格式化-->
+                        </el-card>
+                    </div>
+                    <!--加载 配置效果 end -->
+                    <!--加载渲染效果 start-->
+                    <div class="event-rule-render-class" v-if="eventObj.eventType == 'list' && previewConfigObj.render">
+                        <div style="font-weight: bold;margin-bottom: 5px">渲染效果预览</div>
+                        <el-card>
+                            <!--列表视图-->
+                            <component
+                                    :is="previewConfigObj.render"
+                                    :data-type-arr="dataTypeArr"
+                                    :data-tree-obj="dataTreeObj"
+                                    :data-tree-arr="dataTreeArr"
+                                    ref="configRenderCompRef">
+                            </component>
+                        </el-card>
+                    </div>
+                </div>
+            </el-form>
+            <div slot="footer" class="dialog-footer" align="center" >
+                <el-button type="primary" @click="saveEvent()" size="small" icon="el-icon-success">确 定</el-button>
+                <el-button @click="editEventDialog = false" size="small" icon="el-icon-error">取 消</el-button>
+            </div>
+        </el-dialog>
+
+
+    </el-container>
+</template>
+
+<script>
+    import {AesCrypto} from 'sasp-base'
+    import {saveAs} from "file-saver";
+
+    export default {
+        name: "vue-event-diy",
+        props:{
+            eventTypeObj:{type:Object,default: () => {return {};}},//当前表达已配置的控件信息
+            eventTypeControlObj:{type:Object,default:() =>{return {};}},
+            dataTreeObj:{type:Object,default:() =>{return {};}}, //数据字典树组件
+            dataTypeArr:{type:Array,default:() =>{return [];}}, //数据字典arr
+            dataTreeArr:{type:Array,default:() =>{return [];}}, //数据字典arr
+        },
+        data(){
+            //事件唯一标志验证
+            let eventKeyValidate =(rule,value,callback) => {
+                if(!value){
+                    callback();
+                }
+                this.axios.post(this.api.eventRule.find,{dataSource:"1",eventKey:value}).then(res =>{
+                    if((res.data ||[]).length == 0  || (this.operate == 'update' && this.oldEventKey == value)){
+                        callback();
+                    }else{
+                        return callback(new Error('该自定义事件规则已经存在！'));
+                    }
+                });
+            };
+            return{
+                crud: new this.CrudUtil({
+                    vue: this,
+                    url:this.api.eventRule.url,
+                    entityName: "notice",
+                    searchUrl:this.api.eventRule.findByVersion,
+                    searchForm: {eventSource:"2"}, //查询自定义事件规则
+                    noClearSearchColumns: ["eventSource"],
+                    initNoSearch:true,
+                }),
+                operate: 'add', //默认添加操作
+                oldEventKey: '', //原事件唯一标识
+                oldEventType: '', //原事件类型
+                //表单视图唯一性
+                eventKeyValidate:[
+                    {required: true, message: '该输入项为必输项'},{validator:eventKeyValidate,trigger:'change'}
+                ],
+
+                eventTitle:'新增事件规则',//事件规则标题
+                editEventDialog:false,//
+                dataSourceObj:{
+                    "1":"内部",
+                    "2":"导入"
+                },
+                eventObj:{
+
+                }, //事件规则对象
+                typeObj:{
+                    "tableView": "表单规则",
+                    "list": "列表规则",
+                    "flow":"流程规则"
+                },
+                options:[], //
+                prviewShow:true, //预览开关
+
+                configObj:{}, //表单or 流程预览用到的对象
+                importVisible:false, //导入 popor
+
+                previewConfigObj:{
+                    config: null,
+                    render:null,
+                }, //组件预览对象
+
+                fileList:[],//文件列表
+                loading:false, //导入
+            }
+        },
+        mounted(){
+            this.initEventOptions();
+        },
+        created(){
+            this.init();
+        },
+        methods:{
+            init(){
+                this.crud.search(this.searchFunc);
+            },
+            searchFunc(){
+                (this.crud.dataStore.records || []).forEach(item =>{
+                    if(item.dataSource == '1'){ //内部
+                       if(this.EVENT_PLUGIN["preActiveEvenObj"]["inner-"+item.eventKey]){ //内部
+                           this.$set(item,'version',this.EVENT_PLUGIN["preActiveEvenObj"]["inner-"+item.eventKey]['config']['version'] || "1.0");
+                           this.$set(item,'eventName',this.EVENT_PLUGIN["preActiveEvenObj"]["inner-"+item.eventKey]['config']['eventName']);
+                           this.$set(item,'eventType',this.EVENT_PLUGIN["preActiveEvenObj"]["inner-"+item.eventKey]['eventType']);
+                       }
+                    }
+                });
+            },
+            /**
+             * 初始化事件规则下拉框
+             */
+            initEventOptions(){
+                this.options = [];
+                let optionTypeObj  = {};
+                Object.keys(this.eventTypeControlObj).forEach(type =>{
+                    Object.keys(this.EVENT_PLUGIN.preActiveEvenObj).forEach(key =>{ //加载预注册中的事件
+                        if(this.EVENT_PLUGIN["preActiveEvenObj"][key]){
+                            let eventType = this.EVENT_PLUGIN["preActiveEvenObj"][key]["config"]["eventType"];
+                            if(eventType == type){
+                                if(!optionTypeObj[eventType]){
+                                    this.$set(optionTypeObj,eventType,[]); //初始化数组
+                                }
+                                //判断是否存在
+                                let arr = optionTypeObj[eventType].filter(item =>{
+                                    return 'inner-' + item.id == key;
+                                });
+                                if(arr.length == 0){
+                                    optionTypeObj[eventType].push(this.EVENT_PLUGIN["preActiveEvenObj"][key]);
+                                }
+                            }
+
+                        }
+                    });
+                });
+
+                Object.keys(optionTypeObj).forEach(eventType =>{
+                    let param = {
+                        name : this.typeObj[eventType],
+                        options:optionTypeObj[eventType]
+                    }
+                    this.options.push(param);
+                });
+                //读取系统已经导入的自定义事件规则
+            },
+
+            /**
+             * 新增事件规则
+             */
+            addEvent(){
+                this.operate = "add";
+                this.eventTitle = "新增事件规则";
+                this.eventObj = {};
+                //获取当前最大排序
+                //获取maxOrder
+                this.axios.post(this.api.eventRule.getMaxOrder).then(res =>{
+                    let order  = res.data? (res.data + 1):1;
+                    this.$set(this.eventObj,'eventOrder',order);
+                });
+                this.previewConfigObj = {
+                    config:null,
+                    render:null
+                }
+                this.editEventDialog = true;
+                this.$nextTick(() => {
+                    this.$refs.eventFormRef.clearValidate();
+                });
+            },
+
+            /**
+             * 删除事件规则
+             */
+            removeEvent(){
+                let selection = this.$refs[this.crud.tableRef].selection;
+                if((selection || []).length == 0){
+                    this.$message({
+                        type: 'warning',
+                        message: "请选择需要删除的事件！"
+                    });
+                    return;
+                }
+                let eventIdArr  = [];
+                let importEventIdArr = []; //通过导入的id
+                let removeEventKeyArr = []; //已经注册的eventKey
+                selection.forEach(item =>{
+                    eventIdArr.push(item.id);
+                    if(item.dataSource){
+                        importEventIdArr.push(item.id);
+                        removeEventKeyArr.push(item);
+                    }
+                });
+                this.$confirm('事件删除后已经引用的事件将失效且被引用的规则配置将会同步删除，确定继续？', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    this.axios.post(this.api.eventRule.delete,{'ids':eventIdArr.join(",")}).then(res =>{
+                        if(res.data && res.data.operateSuccess){
+                            this.$message.success("删除成功！");
+                            //如果是 内部引入删除 install 如果是 外部导入 删除 预注册 和 导入
+                            removeEventKeyArr.forEach(delItem =>{
+                                if (delItem.dataSource == '1'){ //内部
+                                    this.EVENT_PLUGIN.uninstallEventRule("inner-"+delItem.eventKey);
+                                    this.EVENT_PLUGIN.uninstallAllEventRule("inner-"+delItem.eventKey);
+                                }else if(delItem.dataSource == '2'){ //外部导入
+                                    this.EVENT_PLUGIN.unPreActiveEventRule("outside-"+delItem.eventKey); //卸载
+                                    this.EVENT_PLUGIN.uninstallEventRule("outside-"+delItem.eventKey);
+                                    this.EVENT_PLUGIN.uninstallAllEventRule("outside-"+delItem.eventKey);
+                                }
+                            });
+                            //重新加载事件规则下拉
+                            this.initEventOptions();
+                            this.crud.search(this.searchFunc);
+                        }
+                    });
+                });
+            },
+
+            /**
+             * 执行事件规则导入
+             */
+            beginImp(){
+                if (this.fileList.length == 0) {
+                    this.$message.error("请选择需要导入的规则文件！");
+                    return;
+                }
+                this.$confirm('是否确定导入规则？', '确认信息', {
+                    distinguishCancelAndClose: true,
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消'
+                }).then(() => {
+                    this.$refs.impFileRef.submit();
+                    this.importVisible = false;
+                });
+
+            },
+
+            /**
+             * 规则导出
+             */
+           async exportEvent(){
+                let selection = this.$refs[this.crud.tableRef].selection;
+                if((selection || []).length == 0){
+                    this.$message({
+                        type: 'warning',
+                        message: "请选择需要导出的规则！"
+                    });
+                    return;
+                }
+                let innerEventKeyArr = []; //内部来源eventKeyl
+
+                let exportArr = []; //导出文件arr
+                selection.forEach(item =>{
+                    //判断是否为内部引入还是外部
+                    //如果时外部则需要先查询相关的配置
+                    if(item.dataSource == '1'){//自定义类型
+                        innerEventKeyArr.push(item.eventKey);
+                    }else if(item.dataSource == '2'){ //外部导入直接读取
+                        exportArr.push({
+                            version:item.version, //版本号
+                            eventKey:item.eventKey, //唯一标志
+                            eventType:item.eventType, //事件类型
+                            eventName:item.eventName,
+                            config: item.eventConfigurationStr,
+                            render: item.eventRenderStr,
+                        })
+                    }
+                });
+                if(innerEventKeyArr.length > 0){
+                    //获取配置模板配置
+                    //获取渲染模板配置
+                    innerEventKeyArr.forEach(eventKey =>{
+                        let eventPre = "inner-";
+                        if(this.EVENT_PLUGIN.preActiveEvenObj[eventPre+eventKey]){
+                            let config = this.EVENT_PLUGIN.preActiveEvenObj[eventPre+eventKey]['config'];
+                            let version = ""; //默认版本号
+                            let render = this.EVENT_PLUGIN.preActiveEvenObj[eventPre+eventKey]['render'];
+                            let eventName = config.eventName;
+                            let eventType = config.eventType;
+                            let configCompStr = "";
+                            let renderCompStr = "";
+                            if(config){
+                                version = config["version"] || "1.0";
+                                delete config["_Ctor"];
+                                configCompStr = this.conversionToStr(config);
+                            }
+                            if(render){
+                                delete render["_Ctor"];
+                                renderCompStr = this.conversionToStr(render);
+                            }
+                            exportArr.push({
+                                version:version, //版本号
+                                eventKey:eventKey, //唯一标志
+                                eventType:eventType, //事件类型
+                                eventName:eventName,
+                                config: configCompStr,
+                                render: renderCompStr
+                            })
+                        }
+                    });
+                }
+               //前台数据加密
+               let ecCrypyStr = AesCrypto.Encrypt(JSON.stringify(exportArr));
+               let str = new Blob([ecCrypyStr],{type: 'text/plain;charset=utf-8'});
+               let fileName = "事件规则" + this.DATE_UTIL.getCurrentDateTime();
+               saveAs(str,fileName+`.rldmp`);
+            },
+
+            /**
+             * 模版下载
+             */
+            templateDownload(){
+                let link = document.createElement('a');
+                link.setAttribute('href', this.api.eventRule.downloadTemplate);
+                link.click();
+                link = null;
+            },
+
+            /**
+             * 切换事件启用状态
+             */
+            switchChange(row){
+                row.eventUse = row.eventUse && row.eventUse == '1' ? '0' : '1';
+                //弹出提示框
+                let title = "";
+                if(row.eventUse == '1'){
+                    title = "事件关闭时已经使用的事件将失效，是否继续？";
+                }else {
+                    title = "确定开启事件规则？";
+                }
+                this.$confirm(title, '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                   //执行修改操作
+                    let eventUse = row.eventUse == '1' ? '0' : '1';
+                    this.axios.post(this.api.eventRule.update,{'id':row.id,'eventUse':eventUse}).then(res =>{
+                        if(res.data && res.data.operateSuccess){
+                            //重置请求方法
+                            this.$message.success("修改成功！");
+                        }else{
+                            this.$message.error("修改失败！");
+                        }
+                        let compObj = {};
+                        let eventKeyPre = row.dataSource == '1'? 'inner-':'outside-'; //内部和外部导入
+                        let sysComp = this.EVENT_PLUGIN.allEventObj[eventKeyPre+row.eventKey];
+                        //执行注册or卸载组件
+                        if(sysComp){
+                            if(eventUse == '1'){ //启用
+                                compObj = {
+                                    id : row['eventKey'],
+                                    name : row['eventName'],
+                                    eventType: row["eventType"],
+                                    eventSource:'2',
+                                    dataSource:row.dataSource,
+                                    config: sysComp['config'],
+                                    render:sysComp['render']?sysComp['render'] : null, // 渲染组件
+                                }
+                                this.EVENT_PLUGIN.installEventRule(compObj);//注册
+                            }else { //卸载
+                                if (row.dataSource == '1'){ //内部
+                                    this.EVENT_PLUGIN.uninstallEventRule("inner-"+row.eventKey);
+                                }else if(row.dataSource == '2'){ //外部导入
+                                    this.EVENT_PLUGIN.uninstallEventRule("outside-"+row.eventKey);
+                                }
+                            }
+                        }
+                        this.crud.search(this.searchFunc);
+                    });
+                }).catch(() => {
+
+                });
+
+            },
+
+            /**
+             * 编辑事件
+             * @param row
+             */
+            editEvent(row){
+                this.operate = "update";
+                this.oldEventKey = row.eventKey;
+                let eventPre= "";
+                if(row.dataSource == '1'){ //内部
+                    eventPre = "inner-";
+                }else if(row.dataSource == '2'){ //外部引用
+                    eventPre = "outside-";
+                }
+                this.oldEventType = row.eventType;
+                this.eventTitle = "'" +row.eventName+"'" + "编辑";
+                this.eventObj = JSON.parse(JSON.stringify(row));
+
+                this.previewConfigObj = {
+                    config:null,
+                    render:null
+                }
+                if(this.eventObj.eventKey){
+                    if(this.eventObj.dataSource == '1'){
+                        this.$set(this.eventObj,'eventType',this.EVENT_PLUGIN["allEventObj"][eventPre+this.eventObj.eventKey]["config"]["eventType"]);
+                        this.$set(this.eventObj,'eventName',this.EVENT_PLUGIN["allEventObj"][eventPre+this.eventObj.eventKey]["eventName"]);
+                    }
+                    this.previewConfigObj.config = this.EVENT_PLUGIN["allEventObj"][eventPre + this.eventObj.eventKey]['config'];
+                    this.previewConfigObj.render = this.EVENT_PLUGIN["allEventObj"][eventPre + this.eventObj.eventKey]['render'];
+                }
+                this.configObj = {};
+                this.$nextTick(()=>{
+                    if(this.$refs['configRenderCompRef']){
+                        this.$refs['configRenderCompRef'].preview();
+                        this.$refs['configRenderCompRef'].initData();
+                        this.$refs['configRenderCompRef'].$forceUpdate();
+                    }
+                    this.$refs.eventFormRef.clearValidate();
+                });
+                this.editEventDialog = true;
+            },
+
+            /**
+             * 保存事件规则
+             */
+            saveEvent(){
+                //执行事件规则保存，查询当前事件是否已经存在
+                this.$refs.eventFormRef.validate(valid =>{
+                    //执行自定义事件规则保存
+                    if(!valid){
+                        return;
+                    }
+                    let params = {};
+                    Object.keys(this.eventObj).forEach(key =>{
+                        params[key] = this.eventObj[key];
+                    });
+                    if(!params["version"]){
+                        params["version"] = "1.0";
+                    }
+                    if(!params["dataSource"]){ //如果不存在则为内部
+                        params["dataSource"] = "1";
+                    }
+                    if(!params["eventUse"]){
+                        params["eventUse"] = "1";
+                    }
+                    params["eventSource"] = "2";
+                    let url = this.api.eventRule.add;
+                    if(this.operate == 'update'){
+                        url = this.api.eventRule.update;
+                    }
+                    this.axios.post(url,params).then(res =>{
+                        let type = "error";
+                        if(res.data.operateSuccess){
+                            type = "success";
+                            this.editEventDialog = false;
+                            this.crud.search(this.searchFunc);
+                        }
+                        this.$message({
+                            type: type,
+                            message: res.data.operateMessage
+                        });
+                        //将组件注册到 EVENT_PLUGUN
+                        let comp = {
+                            id : params['eventKey'],
+                            name : params.eventKey['eventName'],
+                            eventType: params['eventType'],
+                            eventSource:params['eventSource'],
+                            dataSource:params['dataSource'],
+                            config: this.previewConfigObj.config,
+                            render: this.previewConfigObj.render || null, // 渲染组件
+                        };
+                        this.EVENT_PLUGIN.installEventRule(comp); //注册到全局
+                        this.initEventOptions();
+                    });
+                });
+            },
+
+            /**
+             * 切换事件规则下拉框
+             */
+            changeRuleSet(){
+                this.previewConfigObj = {
+                    config:null,
+                    render:null
+                }
+                if(this.eventObj.eventKey){
+                    let eventPre = "inner-";
+                    this.$set(this.eventObj,'eventType',this.EVENT_PLUGIN["preActiveEvenObj"][eventPre+this.eventObj.eventKey]["eventType"]);
+                    this.$set(this.eventObj,'eventName',this.EVENT_PLUGIN["preActiveEvenObj"][eventPre+this.eventObj.eventKey]["name"]);
+                    this.$set(this.eventObj,'version',this.EVENT_PLUGIN["preActiveEvenObj"][eventPre+this.eventObj.eventKey]['config']['version'] || '1.0');
+                    this.previewConfigObj.config = this.EVENT_PLUGIN["preActiveEvenObj"][eventPre+this.eventObj.eventKey]['config'];
+                    this.previewConfigObj.render = this.EVENT_PLUGIN["preActiveEvenObj"][eventPre+this.eventObj.eventKey]['render'];
+                }
+                this.$nextTick(()=>{
+                    if(this.$refs['configRenderCompRef']){
+                        this.$refs['configRenderCompRef'].preview();
+                        this.$refs['configRenderCompRef'].initData();
+                        this.$refs['configRenderCompRef'].$forceUpdate();
+                    }
+                });
+            },
+            /**
+             * 预览事件规则
+             */
+            preViewEvent(){
+                this.prviewShow = true;
+            },
+
+            /**
+             * 将组件转换为string字符串
+             * @param comp 传入组件对象
+             */
+            conversionToStr(componentTemp) {
+                let obj = {};
+                dealComponent(componentTemp, obj);
+                let result = {};
+                result["comp"] = componentTemp;
+                result["method"] = obj;
+                return JSON.stringify(result);
+
+                function dealComponent(methodComponent,result){
+                    Object.keys(methodComponent).forEach(key => {
+                        if(Array.isArray(methodComponent[key])){
+                            result[key] = methodComponent[key].slice(0);
+                            result[key].forEach((item,index) => {
+                                if(typeof item === "function"){
+                                    result[key][index] = item.toString();
+                                }
+                            })
+                        }
+                        if(typeof methodComponent[key] === "function"){
+                            result[key] = methodComponent[key].toString();
+                        }
+                        if(typeof methodComponent[key] === "object" && !Array.isArray(methodComponent[key])){
+                            if(methodComponent[key]["beforeCreate"] && methodComponent[key]["beforeDestroy"]){ // 继承的组件
+                                result[key] = {};
+                                dealComponent(methodComponent[key],result[key]);
+                            }else{
+                                Object.keys(methodComponent[key]).forEach(temKey => {
+                                    if(typeof methodComponent[key][temKey] === "function"){
+                                        if(!result[key]){
+                                            result[key] = {};
+                                        }
+                                        result[key][temKey] = methodComponent[key][temKey].toString();
+                                    }
+                                })
+                            }
+                        }
+                    })
+                }
+
+            },
+
+
+
+
+            /**
+             * 限制文件仅可上传一个并且多次上传覆盖的方法
+             */
+            limitFile(files) {
+                let file = files[0];
+                let fileSuffix = file.name.substring(file.name.lastIndexOf("."), file.name.length);
+                if (fileSuffix != '.rldmp') {
+                    this.$message.error('不支持' + fileSuffix + '文件类型！');
+                    this.$refs.impFileRef.clearFiles();
+                } else {
+                    let fileData = {
+                        name: file.name,
+                        percentage: 0,
+                        raw: file,
+                        size: file.size,
+                        status: 'ready',
+                        uid: file.uid
+                    };
+                    this.fileList = [fileData];
+                }
+            },
+
+            /**
+             * 导入选择文件类型过滤
+             * @param file
+             * @param fileList
+             */
+            changeFile(file, fileList) {
+                let fileSuffix = file.name.substring(file.name.lastIndexOf("."), file.name.length);
+                if (fileSuffix != '.rldmp') {
+                    this.$message.error('不支持' + fileSuffix + '文件类型！');
+                    this.$refs.impFileRef.clearFiles();
+                } else {
+                    this.fileList = fileList;
+                }
+            },
+
+            beforeUpload(file) {
+                let fileSuffix = file.name.substring(file.name.lastIndexOf("."), file.name.length);
+                if (fileSuffix != '.rldmp') {
+                    this.$message.error('不支持' + fileSuffix + '文件类型！');
+                    return false;
+                }
+                return true;
+            },
+            /**
+             * 上传方法
+             */
+            uploadFileMethod(item) {
+                let vm = this;
+                let formData = new FormData();
+                //解析file文件
+                formData.append("file", item.file);
+                //创建axios实例
+                vm.axios.defaults.headers = null;
+                const axiosInstance = vm.axios.create({
+                    baseURL: vm.uploadUrl,
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                        Authorization: (localStorage["Authorization" + (window.projectSuffix || "")] || ""),
+                    },
+                    transformRequest: [
+                        function (data) {
+                            return data;
+                        }
+                    ],
+                });
+
+                vm.loading = true;
+                //上传文件
+                axiosInstance.post(this.api.eventRule.importEventData, formData).then(res => {
+                    vm.axios.defaults.headers = {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                        common: {
+                            Authorization: (localStorage["Authorization" + (window.projectSuffix || "")] || "")
+                        }
+                    };
+                    if (res.data.operateSuccess) {
+                        this.$message({
+                            showClose: true,
+                            duration:0,
+                            type:'success',
+                            message: res.data.operateObj.impMessage||''
+                        });
+                        //根据 返回导出数据进行注册
+                        (res.data.operateObj.reultComp || []).forEach(item =>{
+                            //根据 oldDataSource 删除 事件规则注册信息
+                            let configStr = item.eventConfigurationStr; //配置文件字符串
+                            let renderStr = item.eventRenderStr; //渲染文件字符串
+                            let eventComp = {"id":item.eventKey,
+                                "name":item.eventName,
+                                "eventSource": item.eventSource,
+                                "eventType":item.eventType,
+                                "dataSource":item.dataSource,
+                                "config":null,
+                                "render":null};
+                            if(configStr){
+                                let configObj = JSON.parse(configStr);
+                                let tempComp = configObj["comp"];
+                                let method = configObj["method"];
+                                // 转化
+                                try {
+                                    this.recoverComponent(method);
+                                }catch (e) {
+                                    console.log(e);
+                                }
+                                this.assignLevel(tempComp,method);
+                                Object.assign(eventComp,{"config":tempComp});
+                            }
+                            if(renderStr){
+                                let renderObj = JSON.parse(renderStr);
+                                let tempComp = renderObj["comp"];
+                                let obj = renderObj["method"];
+                                this.recoverComponent(obj);
+                                this.assignLevel(tempComp,obj);
+                                Object.assign(eventComp,{"render":tempComp});
+                            }
+                            if(item.oldDataSource == '1'){ //内部
+                                this.EVENT_PLUGIN.unPreActiveEventRule("inner-"+item.eventKey); //卸载预加载
+                                this.EVENT_PLUGIN.uninstallEventRule("inner-"+item.eventKey);
+                            }else if (item.oldDataSource == '2'){ //外部引入
+                                this.EVENT_PLUGIN.unPreActiveEventRule("outside-"+item.eventKey); //卸载
+                                this.EVENT_PLUGIN.uninstallEventRule("outside-"+item.eventKey);
+                            }
+                            this.EVENT_PLUGIN.preActiveEventRule(eventComp);//预注册
+                            this.EVENT_PLUGIN.installEventRule(eventComp); //执行注册
+                        });
+                        //重新加载事件规则下拉
+                        this.initEventOptions();
+                        this.crud.search(this.searchFunc);
+                    } else {
+                        this.$message.error(res.data.operateMessage);
+                    }
+                    vm.loading = false;
+                }).catch(() => {
+                    vm.axios.defaults.headers = {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                        common: {
+                            Authorization: (localStorage["Authorization" + (window.projectSuffix || "")] || "")
+                        }
+                    };
+                });
+            },
+
+
+            /**
+             * 字符串和对象转换
+             * @param result
+             */
+            recoverComponent(result){
+                Object.keys(result).forEach(key => {
+                    if(Array.isArray(result[key])){
+                        if(key == "beforeCreate" || key == "beforeDestroy"){
+                            result[key] = [];
+                        }else{
+                            result[key].forEach((item,index) => {
+                                let name = item.name || "a";
+                                result[key][index] = new Function("let " + name + " = "+ item +";return " + name + ";")();
+                            })
+                        }
+                    }else if (typeof result[key]  === "object"){
+                        if(result[key]["beforeCreate"] && result[key]["beforeDestroy"]){
+                            this.recoverComponent(result[key]);
+                        }else{
+                            Object.keys(result[key]).forEach(temKey => {
+                                let name = result[key][temKey].name || temKey;
+                                if(Number(name) || Number(name) === 0){
+                                    name = "a";
+                                }
+                                result[key][temKey] = new Function("let " + name + " = " + result[key][temKey] +";return  " + name + ";")();
+                            })
+                        }
+                    }else{
+                        let name = result[key].name || key;
+                        result[key] = new Function("let " + name + " = " + result[key] +";return " + name + ";")();
+                    }
+                })
+            },
+
+            /**
+             * 多级对象复制方法
+             * @param target
+             * @param source
+             */
+            assignLevel(target,source){
+                let value = {};
+                Object.keys(target).forEach(key => {
+                    if(typeof target[key]  === "object" && target[key]["beforeCreate"] && target[key]["beforeDestroy"]){
+                        value[key] = target[key];
+                        this.assignLevel(value[key],source[key]);
+                        delete target[key];
+                    }
+                })
+                Object.assign(target,source,value);
+            },
+
+    }
+    }
+</script>
+
+<style scoped lang="scss">
+    // 滚动条的宽度
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
+        width: 6px; // 横向滚动条
+        height: 6px; // 纵向滚动条 必写
+    }
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        background-color: #a9a9a9;
+        border-radius: 3px;
+    }
+    /* 滚动槽 */
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+        background: #eee;
+    }
+
+    legend{
+        font-size: 14px;
+    }
+    .button_header{
+        position: absolute;
+        height: 60px!important;
+        text-align: center;
+        line-height: 60px;
+        bottom: 0;
+        border-top: 1px solid #f2f2f2;
+        background-color: white;
+        margin: auto;
+        width: 100%;
+        right: 0;
+        z-index: 99;
+    }
+    .control_box{
+        padding-right: 100px;
+        position: relative;
+    }
+    .control_box_zero{
+        padding-right: 0;
+        position: relative;
+    }
+    .operate_div{
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width: 100px;
+    }
+    .operate_div i{
+        /*margin-right: 20px;*/
+        cursor: pointer;
+        width: 30px;
+        height: 30px;
+        padding-top: 15px;
+        padding-left: 15px;
+        float: left;
+    }
+    .top_contain{
+        height: 100%;
+        /*border-radius:8px;*/
+        overflow-y: hidden;
+    }
+    .top_contain::-webkit-scrollbar{
+        width: 0;
+    }
+
+    .notice-info-dialog{
+        /deep/ {
+            //滚动条
+            ::-webkit-scrollbar {
+                width: 4px;
+            }
+            /* 滚动槽 */
+            ::-webkit-scrollbar-track {
+                background: #eee;
+            }
+            /* 滚动条滑块 */
+            ::-webkit-scrollbar-thumb {
+                background: #a9a9a9;
+            }
+        }
+    }
+    .event-rule-config-class{
+        margin-top: 10px;
+    }
+    .event-rule-render-class{
+        margin-top: 10px;
+    }
+</style>
+<style scoped>
+    .black .el-form-item__label{
+        color: black;
+    }
+    .green .el-form-item__label{
+        color: #27B5C3;
+    }
+    .settingClass{
+        width: 100%;
+        height: 40px;
+        position: relative;
+    }
+    .settingClass span{
+        position: absolute;
+        top:0;left:0;
+        right: 0;bottom: 0;
+        margin: auto;line-height: 40px;
+    }
+    .receiveObjNameLeft{
+        float: left;
+        width: 90%;
+    }
+    .receiveObjNameRight{
+        position: absolute;
+        float: right;
+        top: 16px !important;
+        width: auto !important;
+        margin-left: 6px;
+    }
+    .formTable{
+        margin: 20px auto;
+        width: 96%;
+        border-left: 1px solid #ddd;
+        border-top: 1px solid  #ddd;
+    }
+    .formTable .td-title{
+        width: 20%;
+        font-size: 13px;
+        font-weight: bold;
+        text-align: right;
+        font-family: "微软雅黑", serif;
+        border-color: #d8d7d7;
+    }
+
+    .formTable tr {
+        padding: 10px;
+    }
+
+    .formTable .td-con{
+        padding: 5px;
+    }
+
+    .formTable td{
+        border-right: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+        text-align: left;
+        vertical-align: middle;
+    }
+
+    /**自定义样式**/
+    .el-dialog-table-label .el-form-item__label{
+        width: 20%;
+        font-size: 13px;
+        font-weight: bold;
+        text-align: right;
+        font-family: "微软雅黑", serif;
+        border-color: #d8d7d7;
+        background-color: #EEE;
+        border-right: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .el-dialog-table-form {
+        border-top: 1px solid #cccccc;
+        border-left: 1px solid #cccccc;
+        border-right: 1px solid #cccccc;
+    }
+    .el-dialog-table-label{
+        margin-bottom: 0px;
+        /*border-right: 1px solid #ddd;*/
+        border-bottom: 1px solid #ddd;
+    }
+
+    .el-dialog-table-label .el-input__inner{
+        height: 30px;
+        line-height: 30px;
+
+    }
+    /deep/.el-dialog-table-label .el-form-item__content{
+        /*padding: 0 10px 0 10px;*/
+        padding: 10px;
+        background-color: white;
+    }
+
+    .el-form-item__error {
+        left: auto;
+        right: 10px;
+        top: 14px;
+    }
+    .receiveObjName .el-form-item__error{
+        left: auto;
+        right: 92px;
+        top: 14px;
+    }
+
+    .el-form-item__error {
+        padding: 1px 5px;
+        margin-left: -10px;
+    }
+
+    .dialog-tr-td{
+        width: 20%;
+        font-size: 13px;
+        font-weight: bold;
+        text-align: right;
+        font-family: "微软雅黑", serif;
+        border-right: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+    }
+
+
+    /deep/.el-form-item__error {
+        left: auto;
+        right: 16px;
+        top: 19px;
+    }
+    /deep/.receiveObjName .el-form-item__error {
+        left: auto;
+        right: 96px;
+        top: 21px;
+    }
+</style>