@gonsin/gview 1.0.1-alpha.0

package/src/components/MyPageHeader.vue

@@ -0,0 +1,344 @@
+<!--
+ * @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

@@ -0,0 +1,69 @@
+<!--
+ * @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

@@ -0,0 +1,245 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-22 11:44:31
+ * @LastEditTime: 2022-12-01 10:21:12
+ * @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'">
+                            {{ returnValue(column, scope.row) }}
+                            <!-- <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>