sasp-admin 0.2.57

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

@@ -0,0 +1,108 @@
+<!--事件管理 主 -->
+<template>
+    <el-tabs accordion v-model="activeName" type="border-card" class="el-tabs-rel" style="height: 100%;">
+        <el-tab-pane name="first">
+            <span slot="label"><i class="el-icon-upload"></i>自定义</span>
+            <vue-event-diy :event-type-obj="eventTypeObj"
+                           :data-tree-obj="dataTreeObj"
+                           :data-type-arr="dataTypeArr"
+                           :data-tree-arr="dataTreeArr"
+                           :event-type-control-obj="eventTypeControlObj">
+            </vue-event-diy>
+        </el-tab-pane>
+
+        <el-tab-pane name="second">
+            <span slot="label"><i class="saspiconfont pl-icon-download"></i>系统</span>
+            <vue-event-sys :event-type-obj="eventTypeObj"
+                           :data-tree-obj="dataTreeObj"
+                           :data-type-arr="dataTypeArr"
+                           :data-tree-arr="dataTreeArr"
+                           :event-type-control-obj="eventTypeControlObj">
+            </vue-event-sys>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script>
+    import VueEventDiy from "./vueEventDiy";
+    import VueEventSys from "./vueEventSys";
+    export default {
+        name: "vue-event-main",
+        components: {VueEventSys, VueEventDiy},
+        data(){
+            return{
+                activeName: 'first',
+                eventTypeObj:{
+                    "tableView":"表单规则",
+                    "list":"列表规则",
+                    "flow":"流程规则"
+                },
+                eventTypeControlObj:{ //事件类型对应的控件类型
+                    "tableView":"tableViewEvents", //表单规则
+                    "list":"listColumnFormatters",  //列格式化
+                    "flow":"flowEvent", //流程
+                },
+
+                dataTypeArr:[], //数据字典
+                dataTreeObj:{}, //数据树形结构
+                dataTreeArr:[], //树形arr
+                defaultProps:{children: 'children', label: 'dataName'}, // 树组件的配置信息
+            }
+        },
+        created(){
+            this.getAllDataType();
+        },
+        methods:{
+            /**'
+             * 加载数据字典
+             */
+            getAllDataType(){
+                this.dataTreeArr = [];
+                this.axios.post(this.api.data.findAllTypeAndData).then(res => {
+                    if(res.data){
+                        let hasMap = {};
+                        let arr = [];
+                        let typeArr = [];
+                        res.data.forEach(item =>{
+                            let dataObj = JSON.parse(JSON.stringify(item));
+                            if(item.hasOwnProperty("typeId")) {
+                                dataObj.label = dataObj.dataName;
+                                if(hasMap.hasOwnProperty(item.typeId)){
+                                    arr = hasMap[item.typeId];
+                                }else{
+                                    arr = [];
+                                }
+                                arr.push(dataObj);
+                                hasMap[item.typeId]=arr;
+                            }else{
+                                let typeObj = {};
+                                typeObj.typeName = dataObj.dataName;
+                                typeObj.id = dataObj.id;
+                                typeArr.push(typeObj)
+                            }
+                        });
+                        this.dataTypeArr = typeArr;
+                        let paramSetting = {};
+                        paramSetting["id"] = "id";
+                        paramSetting["pId"] = "parentId";
+                        paramSetting["children"] = this.defaultProps["children"]; // 设置children可配置
+                        Object.keys(hasMap).forEach(key =>{
+                            this.dataTreeObj[key] = this.COMMON_FUNC.buildElTree(hasMap[key],paramSetting);
+                        });
+                        this.dataTypeArr.forEach(item => {
+                            let typeObj = {};
+                            typeObj.label = item.typeName;
+                            typeObj.value = item.id;
+                            typeObj.children = this.dataTreeObj[item.id] || [];
+                            this.dataTreeArr.push(typeObj);
+                        });
+                    }
+                });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,296 @@
+<template>
+    <el-container class="top_contain">
+        <el-header style="height: auto;">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" :model="searchForm" class="demo-form-inline" @keyup.enter.native="search()" size="small">
+                    <el-form-item label="事件名称" prop="eventName">
+                        <el-input v-model="searchForm.eventName" size="small" ></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="规则类型" prop="eventType">
+                        <el-select v-model="searchForm.eventType" placeholder="请选择" clearable>
+                            <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" size="small" @click="search">查询</el-button>
+                        <el-button icon="el-icon-close"  size="small" @click="clearSearh()">清空</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-main style="height: 100%;" ref="tableMain">
+                    <el-table
+                            :data="paginationData"
+                            border
+                            stripe  height="100%" style="width: 100%;">
+                        <el-table-column type="index"  label="序号" align="center" width="60">
+                        </el-table-column>
+                        <el-table-column
+                                prop="eventName"
+                                label="事件名称"
+                                align="center">
+                        </el-table-column>
+                        <el-table-column
+                                prop="eventType"
+                                label="规则类型"
+                                align="center"
+                                width="300">
+                            <template slot-scope="scope">
+                                {{eventTypeObj[scope.row.eventType]}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                                prop="eventOrder"
+                                label="排序"
+                                align="center" width="180">
+                        </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="showPreview(scope.row)">
+                                    预览
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+            </el-container>
+        </el-main>
+        <el-footer>
+            <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage"
+                    :page-sizes="[10, 30, 50, 100]"
+                    :page-size="pagesize"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total"
+                    style="margin:10px 0">
+            </el-pagination>
+        </el-footer>
+
+        <!--规则预览-->
+        <el-dialog  class="notice-info-dialog" :close-on-click-modal=false :title="eventTitle" top="15vh"  height="80%" width="80%" lock-scroll
+                    :visible.sync="previewEventDialog">
+            <!--加载配置效果 start-->
+            <div class="event-rule-config-class">
+                <div style="font-weight:bold;margin-top: 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: 300px;padding:5px;box-sizing: border-box;overflow-y: auto">
+                        <div v-if="eventRuleConfigObj.config">
+                            <component
+                                    v-if="previewEventDialog"
+                                    :is="eventRuleConfigObj.config"
+                                    :config-data="configObj"
+                                    :data-type-arr="dataTypeArr"
+                                    :data-tree-obj="dataTreeObj"
+                                    :data-tree-arr="dataTreeArr"
+                                    ref="configCompRef">
+                            </component>
+                        </div>
+                    </el-form>
+                </el-card>
+            </div>
+
+            <!--加载 配置效果 end -->
+            <!--加载渲染效果 start-->
+            <div class="event-rule-render-class"  v-if="previewEventDialog && eventRuleConfigObj.render">
+                <div style="font-weight:bold;">渲染效果预览</div>
+                <el-card>
+                    <component
+                            :is="eventRuleConfigObj.render"
+                            :data-type-arr="dataTypeArr"
+                            :data-tree-obj="dataTreeObj"
+                            ref="configRenderCompRef">
+                    </component>
+                </el-card>
+            </div>
+            <!--加载渲染效果  end-->
+            <div slot="footer" class="dialog-footer" align="center" >
+                <el-button @click="previewEventDialog = false" size="small" icon="el-icon-error">关 闭</el-button>
+            </div>
+        </el-dialog>
+    </el-container>
+</template>
+
+<script>
+    export default {
+        name: "vue-event-sys",
+        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() {
+            return {
+                tableData: [
+
+                ],
+                total: 0, //数组总数
+                currentPage: 1, //当前页
+                paginationData: [], //分页数组
+                pagesize: 10, //每页数据
+                searchForm:{
+                    eventName:'',
+                    eventType:'',
+                },
+                eventName: "",//搜索内容
+                stashList: [],
+
+
+                eventTitle:'',
+                configObj:{},
+                eventRuleConfigObj:{},
+                previewEventDialog:false,
+            }
+        },
+        created(){
+            this.getList();
+        },
+        mounted(){
+
+        },
+        watch: {
+
+        },
+        methods: {
+            getList(){
+                this.tableData = [];
+                //读取系统
+                let munber = 1;
+                let arr = [];
+                Object.keys(this.EVENT_PLUGIN["installEventObj"]|| {}).forEach(key => {
+                    if(key && key.startsWith("system-") && this.EVENT_PLUGIN["installEventObj"][key]){
+                        //获取自定义事件规则
+                        this.tableData.push({
+                            eventKey : key,
+                            eventName: this.EVENT_PLUGIN["installEventObj"][key].name,
+                            eventType: this.EVENT_PLUGIN["installEventObj"][key].eventType,
+                            eventOrder: munber
+                        })
+                        munber ++;
+                    }
+                });
+
+                //一般这里会有一个axios请求
+                this.handleCurrentChange(this.currentPage);
+                this.stashList = JSON.parse(JSON.stringify(this.tableData));  //暂存数组  当搜索为空时候  数组展示所有数据
+            },
+
+            /**
+             * 切换分页
+             */
+            handleSizeChange(val) {
+                this.pagesize = val;
+                this.tableList();
+            },
+            handleCurrentChange(val) {
+                this.currentPage = val;
+                this.tableList();
+            },
+            tableList() {
+                this.paginationData = []; //分页数组  tableData 所有的数据
+                for (let j = this.pagesize * (this.currentPage - 1);j < this.pagesize * this.currentPage; j++) {
+                    if (this.tableData[j]) {
+                        this.paginationData.push(this.tableData[j]);
+                    }
+                }
+                this.total = this.tableData.length;
+            },
+            search(){
+                if(this.searchForm.eventName || this.searchForm.eventType){
+                    if(this.searchForm.eventName){
+                        this.tableData = this.stashList.filter(item => {
+                            return item.eventName.includes(this.searchForm.eventName);
+                        })
+                    }
+                    if(this.searchForm.eventType){
+                        this.tableData = this.stashList.filter(item => {
+                            return item.eventType == this.searchForm.eventType;
+                        })
+                    }
+                }else{
+                    this.tableData = JSON.parse(JSON.stringify(this.stashList));
+                }
+                this.tableList()
+                this.$message({
+                    duration: 1000,
+                    type: "success",
+                    message: "查询成功"
+                });
+            },
+
+            //清空
+            clearSearh(){
+                this.$set(this.searchForm,'eventName','');
+                this.$set(this.searchForm,'eventType','');
+                this.currentPage = 1;
+                this.search();
+
+            },
+
+            /**
+             * 规则预览
+             * @param row
+             */
+            showPreview(row){
+                this.eventTitle = "'" +row.eventName +"'"+ " 预览";
+                this.configObj = {};
+                //加载系统
+                this.eventRuleConfigObj = JSON.parse(JSON.stringify(row));
+                if(this.EVENT_PLUGIN['installEventObj'][this.eventRuleConfigObj.eventKey]['config']){
+                    this.$set(this.eventRuleConfigObj,'config',this.EVENT_PLUGIN['installEventObj'][this.eventRuleConfigObj.eventKey]['config']);
+                }
+                if(this.EVENT_PLUGIN['installEventObj'][this.eventRuleConfigObj.eventKey]['render']){
+                    this.$set(this.eventRuleConfigObj,'render',this.EVENT_PLUGIN['installEventObj'][this.eventRuleConfigObj.eventKey]['render']);
+                }
+                this.$nextTick(()=>{
+                    if(this.$refs['configRenderCompRef']){
+                        this.$refs['configRenderCompRef'].preview();
+                        this.$refs['configRenderCompRef'].initData();
+                        this.$refs['configRenderCompRef'].$forceUpdate();
+                    }
+                });
+                this.previewEventDialog = true;
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .content{
+        padding: 24px 24px;
+        .el-input{
+            width: 400px;
+            margin: 20px;
+        }
+    }
+
+    .top_contain{
+        height: 100%;
+        /*border-radius:8px;*/
+        overflow-y: hidden;
+    }
+    .top_contain::-webkit-scrollbar{
+        width: 0;
+    }
+
+    .notice-info-dialog .el-dialog__body{
+        padding: 0 20px !important;
+    }
+    .event-rule-render-class{
+        margin-top: 10px;
+    }
+</style>

package/src/views/event/js/apiEvent.js

@@ -0,0 +1,22 @@
+let objResult = {
+    eventRule:{
+        url:JAVA_URL+"/eventproject/plEventRuleSetController",
+        find:JAVA_URL+"/eventproject/plEventRuleSetController/find",
+        add:JAVA_URL+"/eventproject/plEventRuleSetController/add",
+        update:JAVA_URL+"/eventproject/plEventRuleSetController/update",
+        delete:JAVA_URL+"/eventproject/plEventRuleSetController/delete",
+        findByVersion:JAVA_URL+"/eventproject/plEventRuleSetController/findByVersion",//事件规则根据版本分页查询
+        findPage:JAVA_URL+"/eventproject/plEventRuleSetController/findPage",
+        saveEvent:JAVA_URL+"/eventproject/plEventRuleSetController/saveEvent", //保存事件规则
+        getMaxOrder:JAVA_URL+"/eventproject/plEventRuleSetController/getMaxOrder", //获取最大版本事件规则
+        importEventData:JAVA_URL+"/eventproject/plEventRuleSetController/importEventData",//事件规则导入
+        downloadTemplate:JAVA_URL+"/eventproject/plEventRuleSetController/downloadTemplate", //事件规则模版下载
+    },
+
+    eventStorage:{ //事件存储表
+        url:JAVA_URL+"/eventproject/plEventRuleStorageController",
+        find:JAVA_URL+"/eventproject/plEventRuleStorageController/find",
+    }
+
+};
+export default objResult;