@gonsin/gview 1.0.1

package/src/assets/scss/common.scss

@@ -0,0 +1,338 @@
+* {
+    box-sizing: border-box;
+}
+
+.top-title {
+    font-size: 20px;
+    color: #555;
+    font-weight: 700;
+    margin-bottom: 20px;
+    display: inline-block;
+}
+
+.mar-top-5 {
+    margin-top: 5px;
+}
+
+.mar-top-10 {
+    margin-top: 10px
+}
+
+.mar-top-20 {
+    margin-top: 20px;
+}
+
+.mar-bot-0 {
+    margin-bottom: 0;
+}
+
+.mar-bot-8 {
+    margin-bottom: 8px;
+}
+
+.mar-bot-10 {
+    margin-bottom: 10px;
+}
+
+.mar-bot-16 {
+    margin-bottom: 16px;
+}
+
+.mar-bot-20 {
+    margin-bottom: 20px;
+}
+
+.mar-bot-24 {
+    margin-bottom: 24px;
+}
+
+.mar-bot-30 {
+    margin-bottom: 30px;
+}
+
+.mar-bot-62 {
+    margin-bottom: 62px;
+}
+
+.mar-ver-24 {
+    margin: 0 24px;
+}
+
+.mar-hor-20 {
+    margin: 20px 0;
+}
+
+.mar-left-12 {
+    margin-left: 12px
+}
+
+.mar-left-14 {
+    margin-left: 14px;
+}
+
+.mar-left-20 {
+    margin-left: 20px;
+}
+
+.mar-left-30 {
+    margin-left: 30px;
+}
+
+.mar-right-10 {
+    margin-right: 10px;
+}
+
+.mar-rig-6 {
+    margin-right: 6px;
+}
+
+.mar-rig-10 {
+    margin-right: 10px;
+}
+
+.mar-rig-14 {
+    margin-right: 14px;
+}
+
+.mar-right-16 {
+    margin-right: 16px;
+}
+
+.mar-rig-16 {
+    margin-right: 16px;
+}
+
+.mar-rig-18 {
+    margin-right: 18px;
+}
+
+.mar-rig-20 {
+    margin-right: 20px;
+}
+
+.mar-rig-23 {
+    margin-right: 23px;
+}
+
+.mar-rig-24 {
+    margin-right: 24px;
+}
+
+.mar-rig-30 {
+    margin-right: 30px;
+}
+
+.mar-rig-40 {
+    margin-right: 40px;
+}
+
+.mar-left-32 {
+    margin-left: 32px;
+}
+
+/* padding */
+.pad-left-10 {
+    padding-left: 10px
+}
+
+.pad-ver-20 {
+    padding: 0 20px;
+}
+
+.pad-30 {
+    padding: 30px;
+}
+
+/* color  */
+.primary-text {
+    color: #1989FA
+}
+
+.danger-text {
+    color: #FF6160
+}
+
+.success-text {
+    color: #26CA83
+}
+
+.warning-text {
+    color: #E6A23C;
+}
+
+.info-text {
+    color: #909399;
+}
+
+.primary-bg {
+    background-color: #1989FA
+}
+
+.danger-bg {
+    background-color: #FF6160
+}
+
+.success-bg {
+    background-color: #26CA83
+}
+
+.f-color-e4c {
+    color: #101E4C;
+}
+
+.f-black {
+    color: #000;
+}
+
+.f-color-3 {
+    color: #333;
+}
+
+.f-color-9 {
+    color: #999
+}
+
+.f-color-e {
+    color: #EEE;
+}
+
+.f-color-606 {
+    color: #606266;
+}
+
+/* font */
+.f-size-14 {
+    font-size: 14px;
+}
+
+.f-size-16 {
+    font-size: 16px;
+}
+
+.f-size-18 {
+    font-size: 18px;
+}
+
+.f-size-20 {
+    font-size: 20px;
+}
+
+.f-weight {
+    font-weight: bold;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.align-items-center {
+    display: flex;
+    align-items: center;
+}
+
+.flex-nowrap {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.flex-ver-start {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.flex-ver-end {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.flex-col-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-ver-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.wid-80 {
+    width: 80%;
+}
+
+/** 多行文本下文字溢出显示  **/
+.mutiple-row-of {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.single-row-nowrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+/** 苹果字体 **/
+.pingSC-regu {
+    font-family: "PingFangSCRegular";
+    font-size: 14px;
+}
+
+.pingSC-Heavy {
+    font-family: "PingFangHeavy";
+    font-size: 14px;
+}
+
+// 导入按钮样式
+.imp_btn {
+    height: 28px;
+    padding: 5px 15px;
+    font-size: 12px;
+    border-radius: 3px;
+    margin: 0 10px;
+    cursor: pointer;
+    box-sizing: border-box;
+    display: inline-block;
+    color: #fff;
+    background-color: #409eff;
+    border-color: #409eff;
+    transition: all 0.3s;
+}
+
+.imp_btn:hover {
+    background-color: #66b1ff;
+    transition: all 0.3s;
+}
+
+.custom-disabled-btn {
+    background-color: #eee !important;
+    border: #eee !important;
+    color: #ccc !important;
+}
+
+.round {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}

package/src/assets/scss/themeColor.scss

@@ -0,0 +1,35 @@
+$header-color:#3e99f6;   // 目前的主题色，后期处理换肤问题
+$font-weight-color:#606266; //加粗字体颜色设置
+$font-color:#555555;    // menu导航栏字体设置
+$primary-btn-color:#3e99f6;
+$delete-btn-color:#F56C6C;
+$warnign-btn-color:#E6A23C;
+
+/***********   主题色     **********/
+
+/* 浅绿色 */
+$green-color:#2F9688;
+$green-hover-color:#30A89D;     
+/* 青色 */
+$cyan-color:#55A66C;
+$cyan-hover-color:#64b17a;      // 鼠标hover时，按钮背景色
+/* 橘黄色*/
+$orange-color:#FF5722;
+$orange-hover-color:#fa7c63;
+/* 咖啡色 */
+$coffee-color:#795548;
+$coffee-hover-color:#7a6258;
+/* 浅灰色 */
+$grey-color:#989898;
+$grey-hover-color:#cac6c6;
+/* 海洋蓝*/
+// $ocean-color:#064e96;
+// $ocean-hover-color:#0f579e;
+/* 天空蓝*/
+$skyblue-color:	#064DC3;
+$skyblue-hover-color:#336ac4;
+/* 棕红色 */
+$brownish-red-color:#963B4F;
+/* 紫色*/
+$purple-color:#EE82EE;
+$purple-hover-color:#ee9cee

package/src/components/MyDialog.vue

@@ -0,0 +1,251 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-04-22 15:51:20
+ * @LastEditTime: 2022-11-22 16:36:03
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \client\src\components\MyDialog.vue
+-->
+
+<template>
+    <div class="my_dialog">
+        <el-dialog
+            :title="data.title"
+            :visible.sync="show"
+            width="60%"
+            :before-close="hideDialog"
+        >
+            <!-- 自定义自动生成表单 -->
+            <!-- <myForm 
+                    v-if="dialogType == 'form'"
+                    :queryProps="data.props" 
+                    :formData="data.boards" 
+                    :viewName="data.viewName" 
+                    :selectData="dialogData" 
+                    @confirmDialog="confirm" 
+                    @closeDialog="hideDialog">
+            </myForm>
+            <myTable
+                v-if="dialogType == 'table'"
+                :data="data.boards[0]"
+                :list="dialogTableData"
+                :propsPagination="props"
+                >
+            </myTable> -->
+            <templatess 
+                        v-if="showForm"
+                        :viewName="data.viewName" 
+                        :board="board"
+                        :queryProps="queryProps"
+                        @closeDialog="hideDialog"
+                        @refreshPage="refreshPage"
+                        >
+            </templatess>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import myForm from "./MyForm.vue";
+import myTable from "./MyTable.vue";
+
+import * as api from '../api'
+
+export default {
+    name: "myDialog",
+    props: {
+        dialogViewData:{
+            type:Object
+        },
+        dialogFormData:{
+            type:Object
+        }
+    },
+    components: {
+        myForm,
+        myTable,
+        templatess: () => import('../components/Templatess.vue')
+    },
+    data() {
+        return {
+            data: {},
+            board: {},
+            queryProps: {},
+
+            dialogType: '',
+            dialogData: {},
+            dialogTableData: [],
+            showForm:false,
+            show: true,
+            props: {
+                count: 10,
+                page: 0,
+                totalCount:0,
+                pageCount:0,
+            },
+        };
+    },
+    mounted(){
+        this.getView()
+    },
+    methods: {
+        refreshPage(){
+            this.$emit("refreshPage");
+        },
+        //获取数据
+        getView(){
+            let model = {};
+            if(this.$route.query.props){
+                model = JSON.parse(this.$route.query.props);
+            }
+            model.viewName = this.dialogViewData.view;
+            api.getOneView(model).then((res) => {
+                if(res.data.state == 200){
+                    this.data = res.data.data;
+                    if (this.data.boards[0].boardType === 'form') {
+                        this.dialogType = 'form';
+                    } else {
+                        this.dialogType = 'table'
+                    }
+                    let arr = this.data.boards;
+                    arr.forEach(element => {
+                        if (element.data != null) {
+                            this.getViewData(element.data.dataId, this.data.props)
+                        } else if (element.tableData != null){
+                            this.getViewData(element.tableData.dataId, this.data.props)
+                        }
+                    });
+                    // console.log('this.data', this.data);
+                    this.board = this.data.boards[0]
+
+                    if (this.dialogFormData && this.data.props.length != 0) {
+                        this.data.props.forEach(element => {
+                            this.queryProps[element] = this.dialogFormData[element]
+                        })
+                    }
+                    
+                    this.showForm = true;
+                } else{
+                    this.$message({
+                        type: "error",
+                        message: res.data.message,
+                    });
+                }
+            });
+        },
+         //获取下拉的数据
+        getViewData(dataId, queryList) {
+            let model = {};
+            if(this.$route.query.props){
+                model = JSON.parse(this.$route.query.props);
+            }
+
+            if (this.data.boards[0].boardType === 'table') {
+                model.count  = this.props.count;
+                model.page = this.props.page
+
+                let query = {
+                    viewName: this.data.viewName,
+                    dataId: dataId,
+                    props: model
+                }
+                // console.log('query', query);
+                // if(queryList.length !=0){
+                //     console.log('queryList', queryList);
+                //     queryList.forEach(element=>{
+                //         query.props[element] = this.dialogFormData[element];
+                //     })
+                // }
+                // Object.assign(query, model);
+                api
+                    .getViewData(query)
+                    .then((res) => {
+                        if (res.data.state == 200) {
+                            let list = res.data.data.data;
+
+                            this.props.totalCount = res.data.data.totalCount;
+                            this.props.pageCount = res.data.data.pageCount;
+                            this.props.page = res.data.data.page;
+                            this.props.count = res.data.data.count;
+
+                            if (list.length != 0) {
+                                this.dialogTableData = list
+                            }
+                        } else {
+                            this.$message({
+                                type: "error",
+                                message: res.data.message,
+                            });
+                        }
+                    });
+            } else {
+                let query = {
+                    viewName: this.data.viewName,
+                    dataId: dataId,
+                    props: model
+                }
+                // console.log('query', query);
+                if(queryList.length !=0){
+                    queryList.forEach(element=>{
+                        query.props[element] = this.dialogFormData[element];
+                    })
+                }
+                // Object.assign(query, model);
+                api
+                    .getViewData(query)
+                    .then((res) => {
+                        if (res.data.state == 200) {
+                            this.dialogData = res.data.data;
+                        } else {
+                            this.$message({
+                                type: "error",
+                                message: res.data.message,
+                            });
+                        }
+                    });
+            }
+            
+            
+        },
+        hideDialog(){
+            this.$emit('hideDialog')
+        },
+        confirm(params,id){
+            if(this.data.props.length !=0 && this.data.props != null){
+                for(let i in this.data.props){
+                    params[this.data.props[i]] = this.dialogFormData[this.data.props[i]]
+                }
+            }
+            let model = {};
+            if(this.$route.query.props){
+                model = JSON.parse(this.$route.query.props);
+            }
+            Object.assign(params,model);
+            let confirmModel = {
+                buttonId: id,
+                props: params,
+                viewName:this.data.viewName
+            }
+            Object.assign(confirmModel,model);
+            api.confirm(confirmModel).then((res) => {
+                if(res.data.state == 200){
+                    this.hideDialog();
+                    this.$message({
+                        type: "success",
+                        message: "操作成功",
+                    });
+                    this.$emit('refresh');
+                }else{
+                    // console.log('提交失败')
+                    this.$message({
+                            type: "error",
+                            message: res.data.message,
+                        });
+                }
+            });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>