@gonsin/gview 1.0.1

package/src/components/Templatess.vue

@@ -0,0 +1,630 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-24 14:47:43
+ * @LastEditTime: 2022-11-30 16:45:57
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\Templatess.vue
+-->
+<template>
+    <div class="templatess">
+        <myHeader
+            :data="board.header"
+            :viewName="viewName"
+            v-if="board.header"
+            @returnFileUrl="activeFile"
+            @clickAction="actionByHeader"
+            @searchAction="searchByHeader"
+        ></myHeader>
+        <myTable
+            v-if="board.boardType == 'table'"
+            :data="board"
+            :propsPagination="props"
+            @returnAction="retuenSubAction"
+            :list="dataList"
+            @returnSelect="newSelection"
+            @returnProps="reSetProps"
+        ></myTable>
+        <template v-if="board.boardType == 'form'">
+            <el-card shadow="never">
+                <myForm
+                    :viewName="viewName"
+                    :formData="[board]"
+                    :selectData="formData"
+                    @confirmForm="handleConfirmForm"
+                    @closeDialog="hideMyDialog"
+                ></myForm>
+            </el-card>
+        </template>
+        <myTab
+            v-if="board.boardType == 'tab'"
+            :tabs="board.tabs"
+        ></myTab>
+        <myDialog
+            v-if="dialogModel.isShowDialog"
+            :dialogViewData="dialogModel.viewData"
+            :dialogFormData="dialogModel.formData"
+            @hideDialog="handleCloseDialog"
+            @refresh="refreshThisPage"
+        ></myDialog>
+    </div>
+</template>
+
+<script>
+import myHeader from "../components/MyHeader.vue";
+import myTable from "../components/MyTable.vue";
+import myDialog from "../components/MyDialog.vue";
+import myTab from "../components/MyTab.vue";
+import myForm from '../components/MyForm.vue';
+import { onsendregisterWs } from "../websocket/test";
+import { mapActions } from "vuex";
+import * as api from '../api'
+
+import Mustache from 'mustache'
+
+export default {
+    name: "templatess",
+    props: {
+        board: {
+            type: Object,
+        },
+        queryProps: {
+            type: Object
+        },
+        viewName: {
+            type: String,
+        },
+        dialogFormData: {
+            type: Object
+        }
+    },
+    components: {
+        myTable,
+        myHeader,
+        myDialog,
+        myTab,
+        myForm
+    },
+    watch:{
+        viewName() {
+            this.getData();
+        },
+        '$store.state.isUpdate'(newVal,oldVal){
+			//对数据执行操作
+            if(newVal){
+                this.getData();
+            }
+		}
+    },
+    data() {
+        return {
+            showHeader: false,
+            dialogModel: {
+                isShowDialog: false,
+                viewData: null,
+                formData:null
+            },
+            headerProps:{},
+            props: {
+                count: 10,
+                page: 0,
+                totalCount:0,
+                pageCount:0,
+            },
+            formData: {},
+            dataList: [],
+            selection: [], //选中的数据,
+            item: {
+                startTime: 9999,
+                endTime: 6666
+            }
+        };
+    },
+    mounted() {
+        this.getData();
+
+        window.addEventListener('onmessageWS', (event) => {
+            let updatedDataId = event.detail.data.args.dataId
+            // let currentDataId
+            // if (this.board) {
+                // currentDataId = this.board?.tableData.dataId || this.board?.data.dataId 
+            // }
+            // if (currentDataId == updatedDataId) {
+                this.getData()
+            // }
+        })
+    },
+    methods: {
+        ...mapActions(["setUpdateFunction"]),
+         //顶部搜索的操作
+        searchByHeader(model){
+            this.headerProps = model;
+            this.$store.commit("SetisUpdate", true);
+        },
+        //刷新页面
+        refreshThisPage(){
+            this.$emit("refreshPage");
+        },
+        //最终上传文件的路径
+        activeFile(e,item) {
+            let arr = [];
+            arr.push(e.data[0]);
+            api
+                .activeFile({
+                    boardName: this.viewName,
+                    buttonId: item.buttonId,
+                    props: {},
+                    fileUrls: arr,
+                })
+                .then((res) => {
+                    if (res.data.state == 200) {
+                        this.$message({
+                            type: "success",
+                            message: "导入成功",
+                        });
+                    } else {
+                        this.$message({
+                            type: "error",
+                            message: "导入失败",
+                        });
+                    }
+                });
+        },
+        //选中的数据
+        newSelection(list) {
+            this.selection = list;
+        },
+        //特殊的数据
+        getSelects(item, callback) {
+            api
+                .getViewData({
+                    viewName: this.viewName,
+                    dataId: item.dataId,
+                })
+                .then((res) => {
+                    // console.log(res);
+                    if (res.data.state == 200) {
+                        if (res.data.data != null) {
+                            let list = res.data.data;
+                            if (list.length != 0) {
+                                let arr = [];
+                                list.forEach((item) => {
+                                    arr.push({
+                                        label: item,
+                                        value: item,
+                                    });
+                                });
+                                callback(arr);
+                            } else {
+                                callback([]);
+                            }
+                        } else {
+                            callback([]);
+                        }
+                    } else {
+                        callback([]);
+                    }
+                });
+        },
+        //获取下拉的数据
+        getSelect(item, callback) {
+            api
+                .getViewData({
+                    viewName: this.viewName,
+                    dataId: item.dataId,
+                })
+                .then((res) => {
+                    // console.log(res);
+                    if (res.data.state == 200) {
+                        onsendregisterWs(this.board.tableData.dataId)
+                        if (res.data.data != null) {
+                            let list = res.data.data;
+                            if (list.length != 0) {
+                                let arr = [];
+                                list.forEach((item) => {
+                                    arr.push({
+                                        label: item.name,
+                                        value: item.groupId,
+                                    });
+                                });
+                                callback(arr);
+                            } else {
+                                callback([]);
+                            }
+                        } else {
+                            callback([]);
+                        }
+                    } else {
+                        callback([]);
+                    }
+                });
+        },
+        //获取列表
+        getData (){
+            let that = this;
+            let model = {};
+            let boardType = this.board.boardType
+
+            if (boardType == 'table') {
+                if(that.$route.query.props){
+                    model = JSON.parse(this.$route.query.props);
+                    model.count  = that.props.count;
+                    model.page = that.props.page
+                }else{
+                    model.count  = that.props.count;
+                    model.page = that.props.page;
+                }
+                // let model = {
+                //         count: that.props.count,
+                //         page: that.props.page,
+                // }
+                if(JSON.stringify(that.headerProps) != "{}"){
+                    let newModel = {};
+                    // 非空对象,排除对象中空值
+                    for(let i in this.headerProps){
+                        if(this.headerProps[i] != '' && this.headerProps[i] != null){
+                            newModel[i] = this.headerProps[i]
+                        }
+                    }
+                    Object.assign(model,newModel);
+                }else{
+                    // 空对象
+                    Object.assign(model,this.headerProps);
+                }
+
+                if (this.queryProps) {
+                    Object.assign(model, this.queryProps)
+                }
+
+                api
+                    .getViewData({
+                        viewName: that.viewName,
+                        dataId: that.board.tableData.dataId,
+                        props: model,
+                    })
+                    .then((res) => {
+                        if (res.data.state == 200) {
+                            that.dataList = [];
+                            onsendregisterWs(that.board.tableData.dataId)
+                            // socket.registerMessage(this.board.tableData.dataId,'getData')
+                            // socket.methods.registerMessage(this.board.tableData.dataId,'getData')
+                            localStorage.setItem('dataId',that.board.tableData.dataId)
+                            that.$store.dispatch('setUpdateFunction',{dataId:that.board.tableData.dataId,name:'getData'});
+                            let list = res.data.data.data;
+                            that.props.totalCount = res.data.data.totalCount;
+                            that.props.pageCount = res.data.data.pageCount;
+                            that.props.page = res.data.data.page;
+                            that.props.count = res.data.data.count;
+
+                            if (list.length != 0) {
+                                that.dataList = list;
+                            }
+                            this.$store.commit('SetisUpdate',false)
+                        } else {
+                            that.$message({
+                                type: "error",
+                                message: res.data.message,
+                            });
+                        }
+                    });
+            } else if (boardType == 'form') {
+                if(that.$route.query.props){
+                    model = JSON.parse(this.$route.query.props);
+                }
+
+                if(JSON.stringify(that.headerProps) != "{}"){
+                    let newModel = {};
+                    // 非空对象,排除对象中空值
+                    for(let i in this.headerProps){
+                        if(this.headerProps[i] != '' && this.headerProps[i] != null){
+                            newModel[i] = this.headerProps[i]
+                        }
+                    }
+
+                    Object.assign(model, newModel);
+                }else{
+                    // 空对象
+                    Object.assign(model, this.headerProps);
+                }
+
+                if (this.queryProps) {
+                    Object.assign(model, this.queryProps)
+                }
+
+
+                if (this.board.data) {
+                    api
+                    .getViewData({
+                        viewName: that.viewName,
+                        dataId: this.board.data.dataId,
+                        props: model
+                    }).then((res) => {
+                        if (res.data.state == 200) {
+                            onsendregisterWs(that.board.data.dataId)
+                            localStorage.setItem('dataId',that.board.data.dataId)
+                            that.$store.dispatch('setUpdateFunction',{dataId:that.board.data.dataId,name:'getData'});
+                            that.formData = res.data.data
+                            // console.log('getViewData that.formData',that.formData)
+                            this.$store.commit('SetisUpdate',false)
+                        } else {
+                            that.$message({
+                                type: "error",
+                                message: res.data.message,
+                            });
+                        }
+                    })
+                }
+            }
+        },
+        //关闭dialog
+        hideMyDialog() {
+            this.$emit('closeDialog')
+        },
+        handleCloseDialog() {
+            this.dialogModel.isShowDialog = false;
+        },
+        //顶部按钮的操作
+        actionByHeader(item) {
+            if (item.action == "VIEW_BY_DIALOG") {
+                //打开dialog并自定义输出
+                this.dialogModel.viewData = item;
+                this.dialogModel.formData = {};
+                this.dialogModel.isShowDialog = true;
+            } else if (item.action == "BATCH") {
+                //批量操作
+                this.$confirm("此操作将" + item.name + ", 是否继续?", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                    .then(() => {
+                        if (this.selection.length == 0) {
+                            this.$message({
+                                type: "error",
+                                message: "请选择操作对象!",
+                            });
+                            return false;
+                        }
+                        this.batchAction(item, this.selection, (bool) => {
+                            if (bool) {
+                                this.$message({
+                                    type: "success",
+                                    message: "操作成功!",
+                                });
+                                this.refreshThisPage();
+                            } else {
+                                this.$message({
+                                    type: "error",
+                                    message: res.data.message,
+                                });
+                            }
+                        });
+                    })
+                    .catch(() => {
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
+                    });
+            } else if (item.action == "UPLOAD_FILE") {
+                //上传文件
+            } else if (item.action == "DOWNLOAD") {
+                //下载文件
+                // /restapi/s08/download?url=xx
+                const fileName = "下载";
+                const el = document.createElement("a");
+                el.style.display = "none";
+                el.setAttribute("target", "_blank");
+                fileName && el.setAttribut
+                e("download", fileName);
+                el.href = "http://192.168.2.192:8089" + item.downloadUrl;
+                console.log(el);
+                document.body.appendChild(el);
+                el.click();
+                document.body.removeChild(el);
+            }else if(item.action == 'LINK'){
+                window.open(item.link);
+            }
+        },
+        //批量操作
+        batchAction(item, list, callback) {
+            let arr = [];
+            let params = {}
+            list.forEach((item) =>
+                arr.push(item[this.board.tableData.keyName])
+            );
+            if(item.props.length !=0){
+                //循环生成需要传递的props
+                for(let i in item.props){
+                    // params[action.props[i].keyName] = row[action.props[i].keyName]
+                    if(item.props[i].valueName.indexOf('.') >-1){
+                    let arr =  item.props[i].valueName.split('.');
+                        params[item.props[i].keyName] = row[arr[1]]
+                    }
+                }
+            }
+            api
+                .batchAction({
+                    viewName: this.viewName,
+                    buttonId: item.buttonId,
+                    props: params,
+                    keys: arr,
+                })
+                .then((res) => {
+                    if (res.data.state == 200) {
+                        callback(true);
+                    } else {
+                        callback(false);
+                    }
+                });
+        },
+        //发送确认完的请求
+        sendConfirm(row, action) {
+            let params = {};
+            // console.log(row);
+            // console.log(action.props);
+
+            //判断action的props是否有东西可以传
+            if(action.props.length ==0){
+                params[this.board.tableData.keyName] =row[this.board.tableData.keyName];
+            }else{
+                //循环生成需要传递的props
+                for(let i in action.props){
+                    // params[action.props[i].keyName] = row[action.props[i].keyName]
+                    if(action.props[i].valueName.indexOf('.') >-1){
+                        let arr =  action.props[i].valueName.split('.');
+                        params[action.props[i].keyName] = row[arr[1]]
+                    }else{
+                        params[action.props[i].keyName] = row[action.props[i].valueName]
+                    }
+                }
+            }
+            
+
+            api
+                .confirm({
+                    buttonId: action.buttonId,
+                    props: params,
+                    viewName: this.viewName,
+                })
+                .then((res) => {
+                    if (res.data.state == 200) {
+                        this.$message({
+                            type: "success",
+                            message: "操作成功",
+                        });
+                        // this.refreshThisPage();
+                    } else {
+                        this.$message({
+                            type: "error",
+                            message: res.data.message,
+                        });
+                    }
+                });
+        },
+        //表单按钮操作
+        retuenSubAction(row, action) {
+            if (action.action == "CONFIRM") {
+                let message
+                if (action.confirmMessage != '') {
+                    message = Mustache.render(action.confirmMessage, { item: row });
+                } else {
+                    message = `是否确定${action.name}？`
+                }
+
+                this.$confirm(message, {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                    .then(() => {
+                        this.sendConfirm(row, action);
+                    })
+                    .catch(() => {
+                        this.$message({
+                            type: "info",
+                            message: `已取消${action.name}`,
+                        });
+                    });
+            } else if (action.action == "VIEW_BY_DIALOG") {
+                //打开dialog并自定义输出
+                this.dialogModel.viewData = action;
+                this.dialogModel.formData = row;
+                this.dialogModel.isShowDialog = true;
+            }else if(action.action = "view"){
+                //修改view部分，跳转到某个view
+                if(action.props.length!=0){
+                    let model = {};
+                    action.props.forEach(item=>{
+                        model[item.keyName] = row[item.keyName];
+                    })
+                    this.$router.push({
+                        path: '/view?viewName='+action.view+'&props='+JSON.stringify(model),
+                    });
+                }else{
+                    this.$router.push({
+                        path: '/view?viewName='+action.view,
+                    });
+                }
+
+            }else if(action.action = "link"){
+                //直接修改url跳转某个网页
+                window.open(action.link);
+            }else if(action.action = "upload_file"){
+                //上传文件
+            }else if(action.action = "download"){
+                //下载文件
+                const fileName = "下载";
+                const el = document.createElement("a");
+                el.style.display = "none";
+                el.setAttribute("target", "_blank");
+                fileName && el.setAttribute("download", fileName);
+                el.href = this.baseIP + item.downloadUrl;
+                console.log(el);
+                document.body.appendChild(el);
+                el.click();
+                document.body.removeChild(el);
+            }else if(action.action = "close_dialog"){
+                //关闭当前dialog（仅对view_by_dialog打开的窗口有效）
+            }else if(action.action = "confirm_and_close"){
+                //执行confirm操作并关闭当前dialog（仅对view_by_dialog打开的窗口有效）
+            }else if(action.action = "none"){
+                //什么都不做
+                return false;
+            }
+        },
+        //重置页数跟数量
+        reSetProps(model){
+            this.props = model;
+            this.getData();
+        },
+        // 表单的关闭按钮事件处理
+        handleCloseDialog() {
+            // this.$router.back()
+            this.dialogModel.isShowDialog = false;
+        },
+        // 表单的提交事件处理
+        handleConfirmForm(params, id) {
+            let model = {};
+            if(this.$route.query.props){
+                model = JSON.parse(this.$route.query.props);
+            }
+            if (this.queryProps != null) {
+                Object.assign(model, this.queryProps)
+            }
+            Object.assign(params, model);
+            let confirmModel = {
+                buttonId: id,
+                props: params,
+                viewName: this.$route.query.viewName
+            }
+
+            api.confirm(confirmModel).then((res) => {
+                if(res.data.state == 200){
+                    this.$message({
+                        type: "success",
+                        message: "操作成功",
+                    });
+                    this.hideMyDialog();
+                    // this.refreshThisPage();
+                }else{
+                    // console.log('提交失败')
+                    this.$message({
+                            type: "error",
+                            message: `${res.data.state} ${res.data.message}`,
+                        });
+                }
+            });
+        }
+    },
+};
+</script>
+<style lang="scss" scoped>
+.templatess {
+    // flex: 1;
+    height:100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+</style>

package/src/index.js

@@ -0,0 +1,23 @@
+import GView from './views/GView.vue'
+
+// import ElementUI from 'element-ui';
+// import 'element-ui/lib/theme-chalk/index.css';
+
+import store from './store'
+
+function install (app, options = {}) {
+  if (install.installed) return;
+  install.installed = true;
+  // app.use(ElementUI);
+  app.component("GView", GView);
+}
+
+GView.install = install
+GView.store = store
+
+// 判断是否是直接引入文件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default GView