gy-webcode2 1.0.0

package/components/bar.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="wrapper_bar">
+        <el-scrollbar style="height:calc(100% - 17px);">
+            <div :style="`height:100%;padding:${top} ${right} ${bottom} ${left}`">
+                <slot></slot>
+            </div>
+        </el-scrollbar>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        left: {
+            default: "0"
+        },
+        right: {
+            default: "0"
+        },
+        top: {
+            default: "0"
+        },
+        bottom: {
+            default: "0"
+        }
+    },
+    created() {
+        // console.log(this.left)
+    }
+};
+</script>
+
+<style>
+.wrapper_bar .el-scrollbar__wrap {
+    overflow-x: auto;
+}
+</style>

package/components/breadcrumb.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="breadcrumb">
+        <div class="row1">
+            <div class="title ">
+                <span class="">{{headerName}}</span>
+                <span class="iconBox">
+                    <i class="el-icon-arrow-right"></i>
+                </span>
+                <span @click="menuClick"  :class="{myHover:breadcrumb_list.length,s1:breadcrumb_list.length == 0}" >
+                    {{$store.state.menu.menuActive.name}}
+                </span>
+                <template v-for="item,index in breadcrumb_list">
+                    <span class="iconBox">
+                        <i class="el-icon-arrow-right"></i>
+                    </span>
+                    <span :class="{hover2:index < breadcrumb_list.length -1,s1:index == breadcrumb_list.length -1}" @click="itemClick(item,index)">
+                        {{item.name}}
+                    </span>
+                     <!-- v-if="index < breadcrumb_list.length -1" -->
+                    <!-- <span v-else >
+                        {{item.name}}
+                    </span> -->
+                </template>
+            </div>
+            
+        </div>
+        <div class="pageHeader" v-if="pageHeaderShow">
+            <div class="name">
+                <span :class="{myHover:breadcrumb_list.length}" @click="backClick()">
+                    <template v-if="breadcrumb_list.length">
+                        <i  class="el-icon-arrow-left"></i>
+                        {{breadcrumb_list[breadcrumb_list.length -1].name}}
+                    </template>
+                    <template v-else>
+                        {{$store.state.menu.menuActive.name}}
+                    </template>
+                </span>
+            </div>
+            <div>
+                <slot name="other"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    // props:['name','showBack','goBack','pageHeaderShow'],
+    props:{
+        name:{
+            type:String,
+            default:""
+        },
+        pageHeaderShow:{
+            type:Boolean,
+            default:true,
+        },
+    },
+    computed:{
+        activePath() {
+            return this.$store.state.menu.activePath
+        },
+        headerName() {
+            const list = this.$store.state.menu.data[0] || [];
+            let isFind = list.list.find((item2,index2) => {
+                if(index2 == this.activePath && item2.ismy == 1){
+                    return true;
+                }
+            })
+            if(isFind){
+                return isFind.name
+            }
+            return ''
+        },
+        names(){
+            return this.name ? this.name.split(',') : []
+        },
+        breadcrumb_list(){
+            return  this.$store.state.menu.breadcrumb_list;
+        }
+        
+    },
+    created(){
+        let breadcrumb_list = this.$store.state.menu.breadcrumb_list;
+        if(this.names.length){
+            this.names.forEach(item => {
+                breadcrumb_list.push({
+                    name:item,
+                    click:this.backClick
+                })
+            })
+        }
+    },
+    methods:{
+        backClick(){
+            // if(this.showBack){
+                this.$emit('goBack');
+            // }
+        },
+        itemClick(data,index){
+            if(index < this.breadcrumb_list.length -1){
+                this.breadcrumb_list[index + 1].click()
+            }
+        },
+        menuClick(){
+            if(this.breadcrumb_list.length){
+                this.breadcrumb_list[0].click()
+            }
+        }
+    },
+    beforeDestroy(){
+        let breadcrumb_list = this.$store.state.menu.breadcrumb_list;
+        if(this.names.length){
+            this.names.forEach(item => {
+                let isFind = breadcrumb_list.findIndex(i => i.name == item)
+                if(isFind > -1){
+                    breadcrumb_list.splice(isFind,1)
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

package/components/javaEditor.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="pa" style="border:1px solid #ccc;left:0;right:0;top:0;bottom:0;">
+        <textarea ref="mycode" class="codesql" ></textarea>
+    </div>
+</template>
+
+<script>
+
+
+import CodeMirror from "codemirror/lib/codemirror";
+import "codemirror/addon/edit/matchbrackets";
+import "codemirror/mode/clike/clike";
+export default {
+    props:['code',"refresh",'autofocus'],
+    data(){
+        return {
+            // code: '//按Ctrl键进行代码提示',
+            editor:null,
+            editCode:"",
+        }
+    },
+    created(){
+        // console.log(this.code);
+    },
+    watch:{
+        code(val){
+            this.editor.setValue(this.code)
+        },
+        refresh(val){
+            if(val){
+                this.editor.refresh()
+            }
+        }
+    },
+    mounted(){
+        this.init();
+    },
+    methods:{
+        init(){
+            let mime = 'text/x-java'
+            let theme = 'ambiance'//设置主题，不设置的会使用默认主题
+            this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
+                mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
+                indentWithTabs: true,
+                smartIndent: true,
+                lineNumbers: true,
+                matchBrackets: true,
+                // theme: theme,
+                autofocus: this.autofocus,
+                extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
+                hintOptions: {//自定义提示选项
+                    tables: {
+                    users: ['name', 'score', 'birthDate'],
+                    countries: ['name', 'population', 'size']
+                    }
+                }
+            })
+            //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
+            // this.editor.on('cursorActivity', () =>{
+            //     this.$emit('update:code',this.editor.getValue())
+            // //   editor.showHint()
+            // })
+            this.editor.setSize('100%', '100%');  
+            if(this.code){
+                this.editor.setValue(this.code)
+
+            }
+        },
+        getNewCode(){
+           return this.editor.getValue(); 
+        },
+        getContent(){
+           return this.editor.getValue(); 
+        },
+        setValue(val){
+            this.editor.setValue(val)
+        },
+        getValue(){
+            return this.editor.getValue(); 
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import "~codemirror/theme/ambiance.css";
+@import "~codemirror/lib/codemirror.css";
+</style>
+

package/components/sqlEditor.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="pa" style="border:1px solid #ccc;left:0;right:0;top:0;bottom:0;">
+        <textarea ref="mycode" class="codesql" ></textarea>
+    </div>
+</template>
+
+<script>
+
+
+import CodeMirror from "codemirror/lib/codemirror";
+import "codemirror/addon/edit/matchbrackets";
+import "codemirror/addon/selection/active-line";
+import "codemirror/mode/sql/sql";
+import "codemirror/addon/hint/show-hint";
+import "codemirror/addon/hint/sql-hint";
+export default {
+    props:['code',"refresh" ,'autofocus'],
+    data(){
+        return {
+            // code: '//按Ctrl键进行代码提示',
+            editor:null,
+            editCode:"",
+        }
+    },
+    created(){
+        // this.editor.replaceSelection(val) //插入代码函数
+    },
+    watch:{
+        code(val){
+            this.editor.setValue(this.code)
+        },
+        refresh(val){
+            if(val){
+                this.editor.refresh()
+            }
+        }
+    },
+    mounted(){
+        this.init();
+    },
+    methods:{
+        init(){
+            let mime = 'text/x-sql'
+            let theme = 'ambiance'//设置主题，不设置的会使用默认主题
+            this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
+                mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
+                indentWithTabs: true,
+                smartIndent: true,
+                lineNumbers: true,
+                matchBrackets: true,
+                // theme: theme,
+                autofocus: this.autofocus,
+                extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
+                hintOptions: {//自定义提示选项
+                    tables: {
+                    users: ['name', 'score', 'birthDate'],
+                    countries: ['name', 'population', 'size']
+                    }
+                }
+            })
+            //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
+            // this.editor.on('cursorActivity', () =>{
+            //     this.$emit('update:code',this.editor.getValue())
+            // //   editor.showHint()
+            // })
+            this.editor.setSize('100%', '100%');  
+            if(this.code){
+                this.editor.setValue(this.code)
+
+            }
+        },
+        getNewCode(){
+           return this.editor.getValue(); 
+        },
+        getContent(){
+           return this.editor.getValue(); 
+        },
+        setValue(val){
+            this.editor.setValue(val)
+        },
+        getValue(){
+            return this.editor.getValue(); 
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import "~codemirror/theme/ambiance.css";
+@import "~codemirror/lib/codemirror.css";
+@import "~codemirror/addon/hint/show-hint.css";
+</style>
+