@gonsin/gview 1.0.1-alpha.0

package/src/components/MyFormSwitch.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-29 16:16:26
+ * @LastEditTime: 2022-11-19 15:11:27
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyFormSwitch.vue
+-->
+<!--
+ * @Author: your name
+ * @Date: 2022-04-28 15:10:38
+ * @LastEditTime: 2022-04-28 15:21:02
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \gview\src\components\MyFormCheckBox copy.vue
+-->
+
+<template>
+    <div class="my_switch">
+        <el-switch
+        v-model="childData"
+        active-color="#13ce66"
+        inactive-color="#ff4949"
+        @change="forceUpdate"
+        ></el-switch>
+        <!-- @change="forceUpdate" -->
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value:{
+            type:Boolean,
+            default:false,
+        },
+    },
+    watch:{
+        value(){
+            this.childData = this.value
+        }
+    },
+    data() {
+        return {
+            childData:this.value,
+            
+        };
+    },
+    computed: {
+        
+    },
+    methods: {
+        forceUpdate(e) {
+            this.$emit('update:value', e)
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/src/components/MyFormTag.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: lrm lrm@gonsin.cn
+ * @Date: 2022-10-25 15:17:48
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @LastEditTime: 2022-11-25 09:52:33
+ * @FilePath: \client\src\components\MyFormTag.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2022 by lrm lrm@gonsin.cn, All Rights Reserved. 
+-->
+\<!--
+ * @Author: your name
+ * @Date: 2022-04-28 09:31:37
+ * @LastEditTime: 2022-11-24 14:30:50
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyFormTag.vue
+-->
+
+<template>
+    <div class="my_tag">
+        <el-tag>{{
+            returnLabel(target)
+        }}</el-tag>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        form:{
+            type:Object
+        },
+        value:{
+           type:String
+        },
+        target:{
+            type:Object
+        },
+        size:{
+           type:String,
+           default:'medium',
+        },
+    },
+    components: {
+    },
+    data() {
+        return {
+          
+        };
+    },
+    mounted(){
+       
+    },
+    methods: {
+       returnLabel(item){
+           if(typeof this.form[item.keyName] =='undefined')
+            { return ' ';}
+           else{
+               return this.form[item.keyName]
+           }
+       }
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/src/components/MyFormTree.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-29 16:16:08
+ * @LastEditTime: 2022-11-19 10:03:11
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyFormTree.vue
+-->
+<template>
+    <div class="my_tree">
+        <el-tree
+            ref="tree"
+            :data="data"
+            :props="defaultProps"
+            :show-checkbox="isShowCheckBox"
+            node-key="value"
+            :default-checked-keys="defaultData"
+            @check-change="handleCheckChange"
+        ></el-tree>
+    </div>
+</template>
+
+<script>
+import * as api from '../api'
+
+export default {
+    props: {
+        value:{
+            type:String | Array
+        },
+        target:{
+            type:Object
+        },
+        targetViewName:{
+            type:String
+        },
+        size:{
+            type:String,
+            default:'medium',
+        },
+        isShowCheckBox:{
+            type:Boolean,
+            default:false,
+        }
+    },
+    components: {},
+    data() {
+        return {
+            childData:"",
+            data: [],
+            defaultData:[],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+        };
+    },
+    watch:{
+        value(){
+            // this.childData = this.value
+        },
+    },
+    mounted() {
+        this.getSelect(this.target);
+    },
+    methods: {
+        // 监听选中的数据变化返回到上一层
+        handleCheckChange(e, current){
+            // console.log('当前选中的值', this.$refs.tree.getCheckedKeys());
+            this.childData = this.$refs.tree.getCheckedKeys()
+            this.$emit("update:value", this.childData)
+        },
+        // 根据请求的数据重新设置新的数据
+        setData(list, model) {
+            let arrModel = [];
+            // 处理从服务器获取的数据
+            list.forEach(element => {
+                //判断数组是否为空，如果为空直接插入进去
+                if(arrModel.length==0){
+                    arrModel.push({
+                        label:element[model.treeData.titleName],
+                        value:element[model.treeData.valueName],
+                        children:[],  
+                    })
+                }else{
+                    // 数组已经有数据
+                    // 判断已有的数据中是否存在相同的parentKey
+                    let filterArr = arrModel.filter((item)=>{
+                        return item.value == element[model.treeData.parentKeyName]
+                    })
+                    if(filterArr.length !=0){
+                        filterArr[0].children.push({
+                            label:element[model.treeData.titleName],
+                            value:element[model.treeData.valueName],
+                            children:[],  
+                        })
+                    }else{
+                        arrModel.push({
+                            label:element[model.treeData.titleName],
+                            value:element[model.treeData.valueName],
+                            children:[],  
+                        })
+                    }
+                }  
+            });
+            this.data = arrModel;
+
+            if (this.value == '') {
+                this.defaultData = []
+            } else {
+                this.childData = this.value
+                this.defaultData = this.value
+            }
+            
+        },
+         //获取下拉的数据
+        getSelect(item) {
+            api
+                .getViewData({
+                    viewName: this.targetViewName,
+                    dataId:item.treeData.dataId,
+                })
+                .then((res) => {
+                    if (res.data.state == 200) {
+                        let list = res.data.data;
+                        if (list != null && list.length != 0) {
+                            this.setData(list, item)
+                        }
+                    } else {
+                    }
+                });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/src/components/MyFormUploads.vue

@@ -0,0 +1,91 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-28 15:38:13
+ * @LastEditTime: 2022-11-17 15:25:47
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyFormUploads.vue
+-->
+<!--
+ * @Author: your name
+ * @Date: 2022-04-28 15:10:38
+ * @LastEditTime: 2022-04-28 15:21:02
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \gview\src\components\MyFormCheckBox copy.vue
+-->
+
+<template>
+    <div class="my_upload">
+        <el-upload
+            class="upload-demo"
+            drag
+            action="http://192.168.2.192:8088/restapi/s09/gview/active/upload_file"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            :size="size"
+            :accept="target.accept"
+            multiple>
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+        </el-upload>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value:{
+            type:String
+        },
+        targetViewName:{
+            type:String
+        },
+        target:{
+            type:Object
+        },
+        size:{
+            type:String,
+            default:'medium',
+        },
+    },
+    watch:{
+        
+    },
+    components: {
+    },
+    data() {
+        return {
+            
+        };
+    },
+    mounted(){
+
+    },
+    methods: {
+        handleSuccess(res) {
+            if(res.state == 200 ){
+                this.$emit('update:value', res.data[0])
+            } else {
+                this.$message({
+                type: "error",
+                message: "上传出错",
+            });
+            }
+        },
+        handleError(e) {
+            // console.log("handleError");
+            this.$message({
+                type: "error",
+                message: "上传失败",
+            });
+        },
+        forceUpdate(e) {
+            this.$emit('update:value',e) 
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/src/components/MyHeader.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="my_header">
+        <div class="header_btns" v-if="data.buttons">
+            <div
+                class="btns"
+                v-for="(item, index) in data.buttons"
+                :key="index"
+            >
+                <el-upload
+                    v-if="item.action == 'UPLOAD_FILE'"
+                    class="upload-demo"
+                    action="http://192.168.2.192:8088/restapi/s09/gview/active/upload_file"
+                    :on-success="handleSuccess"
+                    :on-error="handleError"
+                    :show-file-list="false"
+                    multiple
+                    :limit="9"
+                    size="mini"
+                >
+                    <el-button type="primary" size="mini" @click="setUpLoadData(item)">{{
+                        item.name
+                    }}</el-button>
+                </el-upload>
+                <el-button
+                    v-if="item.action != 'UPLOAD_FILE'"
+                    type="primary"
+                    :icon="item.icon != '' ? item.icon : ''"
+                    size="mini"
+                    @click="clickDom(item)"
+                    >{{ item.name }}</el-button
+                >
+            </div>
+        </div>
+        <div class="header_search" v-if="data.searchBar">
+            <div
+                class="filter_template"
+                v-for="(item, index) in data.searchBar.filters"
+                :key="index"
+            >
+                <div
+                    class="item"
+                    v-if="
+                        item.itemType == 'text_input' && item.simpleListData == null
+                    "
+                >
+                    <myFormInput :value.sync="filter[item.keyName]" :targetViewName="viewName" :size="'mini'" :icon="'el-icon-search'" :placeholders="item.placeholder" :isSearch="data.searchBar?true:false"  @changeSearch="searchValue"></myFormInput>
+                </div>
+                <div
+                    class="item"
+                    v-if="
+                        item.itemType == 'text_input' && item.simpleListData != null
+                    "
+                >
+                    <myFormAutocomplete :value.sync="filter[item.keyName]" :target="item" :targetViewName="viewName" :size="'mini'" :isSpecial="true" :isSearch="data.searchBar?true:false"  @changeSearch="searchValue"></myFormAutocomplete>
+                </div>
+                <div class="item" v-if="item.itemType == 'selector'">
+                    <myFormSelect :value.sync="filter[item.keyName]" :target="item" :targetViewName="viewName" :size="'mini'" :isSearch="data.searchBar?true:false"  @changeSearch="searchValue"></myFormSelect>
+                </div>
+                <div class="item" v-if="item.itemType == 'time_selector'">
+                    <myFormSelectTime :value.sync="filter[item.keyName]" :target="item" :targetViewName="viewName" :size="'mini'" :isSearch="data.searchBar?true:false"  @changeSearch="searchValue"></myFormSelectTime>
+                </div>
+                <div class="item" v-if="item.itemType == 'date_selector'">
+                    <myFormSelectDate :value.sync="filter[item.keyName]" :target="item" :targetViewName="viewName" :size="'mini'" :isSearch="data.searchBar?true:false"  @changeSearch="searchValue"></myFormSelectDate>
+                </div>
+                <div class="item" v-if="item.itemType == 'date_time_selector'">
+                    <myFormSelectDateTime :value.sync="filter[item.keyName]" :target="item" :targetViewName="viewName" :size="'mini'" :isSearch="data.searchBar?true:false"  @changeSearch="searchValue"></myFormSelectDateTime>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import myFormInput from "./MyFormInput.vue";
+import myFormSelect from "./MyFormSelect.vue";
+import myFormAutocomplete from "./MyFormAutocomplete.vue";
+import myFormSelectTime from "./MyFormSelectTime.vue";
+import myFormSelectDate from "./MyFormSelectDate.vue";
+import myFormSelectDateTime from "./MyFormSelectDateTime.vue";
+export default {
+    props: {
+        data: {
+            type: Object,
+        },
+        viewName:{
+            type:String
+        }
+    },
+    components: {
+        myFormSelect,
+        myFormInput,
+        myFormAutocomplete,
+        myFormSelectTime,
+        myFormSelectDate,
+        myFormSelectDateTime
+    },
+    data() {
+        return {
+            //筛选所提交的内容
+            filter: {},
+            timeout: null,
+            restaurants: [],
+            upLoadData:{}
+        };
+    },
+    watch:{
+        filter: {
+            handler: function (newModel, oldModel) {
+                console.log('newModel')
+                // this.$emit('searchAction',newModel)
+            },
+            deep: true,
+        },
+    },
+    mounted() {
+        //循环列表输出筛选的字段添加到data里面进行绑定
+        if (this.data.searchBar !== null)  {
+            let list = this.data.searchBar.filters;
+            if (list.length != 0) {
+                list.forEach((element) => {
+                    this.filter[element.keyName] = "";
+                });
+            }
+        }
+    },
+    methods: {
+        setUpLoadData(item){
+            this.upLoadData = item;
+        },
+        handleSuccess(e) {
+            console.log("handlePreview");
+            this.$emit('returnFileUrl',e,this.upLoadData);
+        },
+        handleError(e) {
+            console.log("handleError");
+            this.$message({
+                type: "error",
+                message: "上传失败",
+            });
+        },
+        //点击按钮的操作
+        clickDom(item) {
+            this.$emit("clickAction", item);
+        },
+        searchValue(e){
+            // console.log(e);
+            this.$emit('searchAction',this.filter)
+        }
+    },
+};
+</script>
+<style lang="scss" scoped>
+.my_header {
+    overflow: hidden;
+    display: flex;
+    margin: 20px 0;
+    .header_btns {
+        flex: 1;
+        text-align: left;
+        .btns {
+            display: inline-block;
+            margin-right: 10px;
+        }
+    }
+    .header_search {
+        overflow: hidden;
+        .filter_template {
+            float: left;
+            margin-right: 10px;
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+}
+</style>

package/src/components/MyMenus.vue

@@ -0,0 +1,150 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-22 15:51:20
+ * @LastEditTime: 2022-11-22 10:26:18
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyMenus.vue
+-->
+
+<template>
+    <el-menu
+        v-loading="menuLoading"
+        :default-active="$router.path"
+        class="menu"
+        background-color="#FFFFFF"
+        text-color="#555555"
+        active-text-color="#3E99F6"
+        collapse-transition
+        :collapse="Collapse"
+    >
+        <template v-for="(item, idx) in menuList">
+            <template v-if="item.children.length === 0">
+                <el-menu-item
+                    :key="item.name"
+                    v-show="!Collapse && permissionFilter(item.name)" 
+                    :index="String(idx)"
+                    @click="clickHandler({ path: '/' + item.url })"
+                >
+                    <i :class="item.icon"></i>
+                    <span>{{ item.title }}</span>
+                </el-menu-item>
+            </template>
+            <template v-if="item.children.length > 0">
+                <!-- v-show="permissionFilter(item.name)" -->
+                <el-submenu
+                    :key="item.name"
+                    :index="String(idx)"
+                    v-show="permissionFilter(item.name)"
+                >
+                    <template slot="title">
+                        <i :class="item.icon"></i>
+                        <span
+                            class="submenu-title"
+                            style="font-weight: 700; font-size: 14px"
+                            >{{ item.title }}</span
+                        >
+                    </template>
+
+                    <template>
+                        <el-menu-item
+                            v-for="(childItem, childIdx) in item.children"
+                            :key="childIdx"
+                            :index="idx + '-' + childIdx"
+                            v-show="permissionFilter(childItem.name)"
+                            @click="clickHandler({ path: '/' + childItem.url })"
+                            >{{ childItem.title }}</el-menu-item
+                        >
+                    </template>
+                </el-submenu>
+            </template>
+        </template>
+    </el-menu>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { permissionFilter } from "../utils/permission";
+export default {
+    props: {
+        menuList:{
+            type:Array,
+            default:[],
+        }
+    },
+    components: {},
+    data() {
+        return {
+            menuLoading:false,
+            sessionId: sessionStorage.getItem("sessionId"),
+            // defImage:require('../../public/imgs/antOutline-border.png'),
+        };
+    },
+    mounted() {
+        
+    },
+    computed: {
+        ...mapState({
+            Collapse: (state) => state.isCollapse,
+            // floorList: (state) => state.floorList,
+            // departmentList: (state) => state.departmentList,
+        }),
+    },
+    methods: {
+        clickHandler(e){
+            if (this.$route.fullPath != e.path) { // 解决重复点击菜单路由报错的问题
+                this.$router.push({
+                    path: e.path
+                });
+            }
+        },
+        permissionFilter
+    },
+};
+</script>
+<style lang="scss" scoped>
+.el-menu{
+    border-right: none !important;
+    text-align: left;
+    margin:0;
+}
+.el-menu-item.is-active {
+    background-color: #ecf4ff !important;
+    color: #fff;
+    span {
+        color: #619fde !important;
+    }
+}
+.el-submenu {
+    ::v-deep .el-submenu__title:hover {
+        background-color: #ecf4ff !important;
+        span {
+            color: #619fde !important;
+        }
+    }
+}
+
+.el-menu-item:hover {
+    background-color: #ecf4ff !important;
+    color: #619fde !important;
+    span {
+        color: #619fde !important;
+    }
+}
+
+.el-scrollbar_wrap {
+    overflow-x: hidden;
+}
+el-menu {
+    el-menu-item {
+        height: 60px;
+    }
+}
+.menu:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+}
+// /deep/ .submenu-title{
+//     font-family: 'PingFangBold';
+// }
+</style>