@gonsin/gview 1.0.1 → 1.0.2

package/src/components/MyPageHeader.vue

@@ -1,344 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2022-04-22 15:51:20
- * @LastEditTime: 2022-11-22 16:56:33
- * @LastEditors: lrm lrm@gonsin.cn
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: \client\src\components\MyPageHeader.vue
--->
-
-<template>
-    <header class="wrapper_header header">
-        <div class="logo-title">
-            <!-- <span>{{ roomsName }}</span> -->
-            GView
-        </div>
-        <div id="icon" @click="collapseHandler">
-            <img
-                src="../.././public/imgs/menu.png"
-                alt
-                :class="Collapse ? 'img_rotate' : 'img_no_rotate'"
-            />
-        </div>
-        <div class="right">
-            <!-- <el-dropdown trigger="click">
-                <img
-                    src="../assets/images/svg/color.svg"
-                    width="20"
-                    height="20"
-                    alt=""
-                    style="margin-right: 15px"
-                />
-                <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item
-                        v-for="(item, index) in themeList"
-                        :key="index"
-                        @click.native="handlePicker(item)"
-                        >{{ item.name }}</el-dropdown-item
-                    >
-                </el-dropdown-menu>
-            </el-dropdown> -->
-            <!-- <el-badge class="item">
-                <i
-                    class="el-icon-message"
-                    @click="$router.push({ path: '/showEmail' })"
-                ></i>
-            </el-badge> -->
-            <i id="user_icon" class="el-icon-user" @click="handelUser"></i>
-            <!-- vue过渡动画 -->
-            <transition name="slide-fade">
-                <ul class="user_ul" v-show="isShow === true">
-                    <!-- <li @click="handleUserInfo">
-                        <i class="el-icon-user"></i>
-                        <span>用户信息</span>
-                    </li> -->
-                    <!-- <li @click="handleShare">
-                        <i class="el-icon-share"></i>
-                        <span>分享链接</span>
-                    </li> -->
-                    <!-- <li
-                        @click="handleCopySystem"
-                        v-if="user.admin"
-                        v-loading.fullscreen.lock="fullscreenLoading"
-                    >
-                        <i class="el-icon-user"></i>
-                        <span>备份系统</span>
-                    </li> -->
-                    <li @click="handleLogout">
-                        <i class="el-icon-unlock"></i>
-                        <span>退出登录</span>
-                    </li>
-                </ul>
-            </transition>
-        </div>
-    </header>
-</template>
-
-<script>
-import { mapState } from "vuex";
-import { setLogin,closeWebsocket } from "../websocket/test";
-export default {
-    props: {},
-    components: {},
-    computed: {
-        ...mapState({
-            Collapse: (state) => state.isCollapse,
-            // unreadMessagesTotal: (state) => state.unreadMessageTotal,
-            // roomsName: (state) => state.globalSystem.title,
-        }),
-    },
-    data() {
-        return {
-            fullscreenLoading: false, //全局loading
-            isShow: false,
-            // logoutURL: "/api/logout", // 登出
-            currentColor: localStorage.getItem("currentColor")
-                ? localStorage.getItem("currentColor")
-                : "defaultTheme",
-            themeList: [
-                {
-                    label: "defaultTheme",
-                    name: "默认",
-                },
-                {
-                    label: "greenTheme",
-                    name: "绿色",
-                },
-                {
-                    label: "cyanTheme",
-                    name: "青色",
-                },
-                {
-                    label: "orangeTheme",
-                    name: "橙色",
-                },
-                {
-                    label: "coffeeTheme",
-                    name: "咖啡",
-                },
-                {
-                    label: "greyTheme",
-                    name: "浅灰色",
-                },
-                {
-                    label: "skyblueTheme",
-                    name: "天蓝色",
-                },
-                {
-                    label: "brownishTheme",
-                    name: "酒红色",
-                },
-                {
-                    label: "purpleTheme",
-                    name: "紫色",
-                },
-            ],
-            user: JSON.parse(sessionStorage.getItem("user")),
-        };
-    },
-    mounted() {
-    
-    },
-    methods: {
-        handleUserInfo() {},
-        // fullscreenLoading() {},
-        handleLogout() {
-                this.$confirm("您是否要退出登录?", "提示", {
-                    confirmButtonText: "确定",
-                    cancelButtonText: "取消",
-                    type: "warning",
-                }).then(() => {
-                        this.$message({
-                            type: "success",
-                            message: "退出登录",
-                        });
-                        sessionStorage.removeItem("user");
-                        sessionStorage.removeItem("roomsInfo")
-                        setLogin(false)
-                        closeWebsocket()
-                        this.$router.push({
-                            path: "/login",
-                        });
-                    // this.getRequest(this.$url.logoutUrl).then(() => {
-                    //     this.$message({
-                    //         type: "success",
-                    //         message: "退出登录",
-                    //     });
-                    //     sessionStorage.removeItem("user");
-                    //     sessionStorage.removeItem("roomsInfo")
-
-                    //     this.$router.push({
-                    //         path: "/login",
-                    //     });
-                    //     // this.$store.state.websocket.close();
-                    // });
-                });
-        },
-        collapseHandler() {
-            this.$store.commit("Collapse");
-            
-        },
-        handelUser() {
-            this.isShow = !this.isShow;
-        },
-        /**
-         * @description: 颜色选择
-         * @param {type}
-         * @return:
-         */
-        handlePicker(item) {
-            localStorage.setItem("currentColor", item.label);
-            location.reload();
-        },
-        handleCopySystem() {},
-    },
-};
-</script>
-<style lang="scss" scoped>
-.wrapper_header {
-    width: 100%;
-    // height: 60px;
-    height: 60px;
-    background-color: #3e99f6;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
-    .logo-title {
-        width: 200px;
-        font-family: "微软雅黑";
-        font-size: 24px;
-        line-height: 60px;
-        color: #fff;
-        text-align: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    #icon {
-        width: 20px;
-        height: 20px;
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 200px;
-        cursor: pointer;
-
-        img {
-            width: 100%;
-        }
-
-        .img_rotate {
-            transform: rotate(90deg);
-            transition: all 0.3s;
-        }
-
-        .img_no_rotate {
-            transform: rotate(0);
-            transition: all 0.3s;
-        }
-    }
-
-    .right {
-        position: absolute;
-        top: 50%;
-        right: 30px;
-        transform: translateY(-50%);
-        height: 60px;
-        display: flex;
-        align-items: center;
-
-        i {
-            font-size: 20px;
-            color: #fff;
-            cursor: pointer;
-        }
-
-        #user_icon {
-            margin-left: 15px;
-            transition: all 0.3s;
-            position: relative;
-        }
-
-        .user_ul {
-            position: absolute;
-            width: 250px;
-            text-align: left;
-            background-color: #fff;
-            top: 30px;
-            right: -10px;
-            padding: 10px 15px;
-            box-sizing: border-box;
-            border-radius: 3px;
-            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-            li {
-                display: block;
-                width: 100%;
-                height: 40px;
-
-                i,
-                span {
-                    line-height: 40px;
-                    font-size: 14px;
-                    color: #7a878e;
-                }
-
-                span {
-                    margin-left: 15px;
-                    font-size: 12px;
-                }
-            }
-
-            li:hover {
-                background-color: rgba(0, 0, 0, 0.05);
-                transition: all 0.3s;
-                cursor: pointer;
-            }
-        }
-
-        #user_icon:hover {
-            transition: all 0.3s;
-            color: #ccc;
-        }
-    }
-}
-</style>
-
-<style lang="scss">
-/** 拷贝的字体图标 */
-// @font-face {
-//     font-family: "iconfont"; /* project id 1978833 */
-//     src: url("//at.alicdn.com/t/font_1978833_h88nwlpvtfr.eot");
-//     src: url("//at.alicdn.com/t/font_1978833_h88nwlpvtfr.eot?#iefix")
-//             format("embedded-opentype"),
-//         url("//at.alicdn.com/t/font_1978833_h88nwlpvtfr.woff2") format("woff2"),
-//         url("//at.alicdn.com/t/font_1978833_h88nwlpvtfr.woff") format("woff"),
-//         url("//at.alicdn.com/t/font_1978833_h88nwlpvtfr.ttf") format("truetype"),
-//         url("//at.alicdn.com/t/font_1978833_h88nwlpvtfr.svg#iconfont")
-//             format("svg");
-// }
-.iconfont {
-    margin-right: 10px;
-    font-family: "iconfont" !important;
-    line-height: 60px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: 0.2px;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.slide-fade-enter-active {
-    transition: all 0.3s ease;
-}
-
-.slide-fade-leave-active {
-    transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.slide-fade-enter,
-.slide-fade-leave-to {
-    transform: translateX(10px);
-    opacity: 0;
-}
-</style>

package/src/components/MyTab.vue

@@ -1,69 +0,0 @@
-<!--
- * @Author: lrm lrm@gonsin.cn
- * @Date: 2022-11-02 09:37:58
- * @LastEditors: lrm lrm@gonsin.cn
- * @LastEditTime: 2022-11-07 17:30:27
- * @FilePath: \client\src\components\MyTab.vue
- * @Description: 
- * 
- * Copyright (c) 2022 by lrm lrm@gonsin.cn, All Rights Reserved. 
--->
-<template>
-  <div class="my_tab" ref="my_tab">
-    <el-tabs v-model="currentTabTitle" type="border-card" @tab-click="handleClick">
-      <el-tab-pane v-for="tab in tabs" 
-                  :key="tab.title"
-                  :label="tab.title" 
-                  :name="tab.title"
-                  class="my_tab_item"
-                  :lazy="true"
-                  >
-                    <templatess
-                      :viewName="tab.title"
-                      :board="tab.board"
-                    ></templatess>
-                  </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "myTab",
-  components: {
-    templatess: () => import('../components/Templatess.vue')
-  },
-  props: {
-    tabs: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      currentTabTitle: this.tabs[0].title,
-      formData: {}, // 表单数据
-      dataList: [], // 表格数据
-    }
-  },
-  methods: {
-    handleClick(tab, event) {
-      // console.log(tab);
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.my_tab {
-  flex: 1;
-  position: relative;
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  .my_tab_item {
-    height: 100%;
-  }
-}
-</style>

package/src/components/MyTable.vue

@@ -1,244 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2022-04-22 11:44:31
- * @LastEditTime: 2022-11-28 15:13:40
- * @LastEditors: lrm lrm@gonsin.cn
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: \client\src\components\MyTable.vue
--->
-<template>
-    <div class="my_table" ref="my_table">
-        <div class="heads" ref="heads">
-            <el-table
-                :data="list"
-                style="width: 100%"
-                :height="tableHeight"
-                v-if="show"
-                ref="multipleTable"
-                @selection-change="handleSelectionChange"
-            >
-                <el-table-column type="selection" width="55"> </el-table-column>
-                <el-table-column
-                    v-for="(column, idx) in data.columns"
-                    :key="column.idx"
-                    :index="idx"
-                    :prop="column.keyName"
-                    :label="column.name"
-                >
-                    <template slot-scope="scope">
-                        <div v-if="column.columnType == 'DATE'">
-                            {{ returnDateValue(column, scope.row[column.keyName]) }}
-                        </div>
-                        <div v-else-if="column.columnType == 'BUTTONS'">
-                            <el-button
-                                type="text"
-                                v-for="(btns, indexss) in column.buttons"
-                                v-if="handleShowIf(scope.row, btns.showIf)"
-                                :key="indexss"
-                                @click="btnReturn(scope.row, btns)"
-                                >{{ btns.name }}</el-button
-                            >
-                        </div>
-                        <div v-else-if="column.columnType == 'IMAGE'">
-                            <el-image 
-                                    style="width: 80px; height: 80px" 
-                                    :src="imageReturn(column, scope.row)" 
-                                    :preview-src-list="[imageReturn(column, scope.row)]"
-                            />
-                        </div>
-                        <div v-else-if="column.columnType == 'QR_CODE'">
-                            <vue-qr :text="returnValue(column, scope.row)" :size="80" :margin="5" />
-                        </div>
-                        <div v-else-if="column.columnType == 'TEXT' || column.columnType == 'ENUMS'">
-                            {{ returnValue(column, scope.row) }}
-                        </div>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-
-        <div class="bottom" v-if="list.length !=0">
-            <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page="pagination.page+1"
-                :page-sizes="[10, 20, 30, 50]"
-                :page-size="pagination.count"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="pagination.totalCount"
-            >
-            </el-pagination>
-        </div>
-    </div>
-</template>
-
-<script>
-import moment from 'moment';
-import Mustache from 'mustache'
-import { vFun } from '../utils/common'
-import VueQr from 'vue-qr'
-
-
-export default {
-    name: "myTable",
-    props: {
-        data: {
-            type: Object,
-        },
-        list: {
-            type: Array,
-        },
-        propsPagination: {
-            type: Object,
-        },
-    },
-    components: { VueQr },
-    watch: {
-        propsPagination: {
-            handler: function (newModel, oldModel) {
-                // console.log('newModel',newModel)
-                // console.log(parseInt(newModel.page)+1)
-                this.pagination = newModel;
-            //    this.pagination.page = parseInt(newModel.page)+1;
-            //    this.pagination.totalCount = parseInt(newModel.totalCount);
-            //    this.pagination.count = parseInt(newModel.count);
-            //    this.pagination.page = parseInt(this.pagination.page)+1;
-            },
-            deep: true,
-        },
-    },
-    data() {
-        return {
-            tableHeight: "400",
-            show: false,
-            currentPage4: 1,
-            sum: 1,
-            pagination:{
-                page:0,
-                totalCount:0,
-                count:0,
-            },
-            item: {
-            }
-        };
-    },
-    mounted() {
-        // this.$nextTick(()=>{
-        //     console.log( parseInt(window
-        //     .getComputedStyle(this.$refs.heads)
-        //     .height.replace("px", ""))-50)
-        //     // this.tableHeight = 825;
-        //     this.tableHeight = parseInt(window
-        //     .getComputedStyle(this.$refs.heads)
-        //     .height.replace("px", "")-50);
-        // this.show = true;
-        // })
-        //  console.log( parseInt(window
-        //     .getComputedStyle(this.$refs.heads)
-        //     .height.replace("px", "")))
-        // this.tableHeight = 893;
-        // this.tableHeight = parseInt(
-        //     window.getComputedStyle(this.$refs.heads).height.replace("px", "") -
-        //         50
-        // );
-        this.show = true;
-    },
-    methods: {
-         //返回列表的日期
-        returnDateValue(column, target){
-            return moment(target).format(column.format)
-        },
-        //返回列表的值
-        returnValue(column, row) {
-            if (column.enums == null || column.enums == '') {
-                if (column.value != "") {
-                    let result = Mustache.render(column.value, { item: row })
-                    return result
-                } else if (column.value == "") {
-                    return row[column.keyName]
-                }
-            } else if (column.enums != null) {
-                let arr = column.enums;
-                let targetArr = arr.filter((element) => {
-                    if (element.value == row[column.keyName].toString()) {
-                        return element;
-                    }
-                });
-                if (targetArr.length != 0) {
-                    return targetArr[0].text;
-                } else {
-                    return row[column.keyName];
-                }
-            }
-        },
-        imageReturn(column, row) {
-            if (column.columnType == 'QR_CODE') {
-                let result = Mustache.render(column.value, { item: row })
-                return result
-            } else {
-                return row[column.keyName]
-            }
-        },
-        //返回列表的操作
-        btnReturn(row, action) {
-            this.$emit("returnAction", row, action);
-        },
-        //返回有变化的选项
-        handleSelectionChange(e) {
-            this.$emit("returnSelect", e);
-        },
-        //列表的分页的每页数量
-        handleSizeChange(val) {
-            console.log(`每页 ${val} 条`);
-            let model = this.pagination;
-            model.count = val;
-            model.page = 0;
-            this.$emit("returnProps", model);
-        },
-        //列表分页的当前页面
-        handleCurrentChange(val) {
-            console.log(`当前页: ${val}`);
-            let model = this.pagination;
-            model.page = parseInt(val) - 1;
-            this.$emit("returnProps", model);
-        },
-        handleShowIf(row, showIf) {
-            const v = vFun
-            if (showIf != null && showIf != "1") {
-                let result, evalResult
-                try {
-                    result = Mustache.render(showIf, { item: row })
-                    evalResult = eval(result)
-                } catch (e) {
-                    console.warn(e);
-                }
-                // return true
-                return eval(evalResult)
-            } else {
-                return true
-            }
-        }
-    },
-};
-</script>
-<style lang="scss" scoped>
-.my_table {
-    flex: 1;
-    position: relative;
-    margin-bottom: 50px;
-    // display: flex;
-    // flex-direction: column;
-    .heads {
-        height: 100%;
-    }
-    .bottom {
-        height: 32px;
-        position: fixed;
-        bottom: 9px;
-        right: 30px;
-        width: 100%;
-        // background:#ffffff;
-        text-align: right;
-    }
-}
-</style>