ap-dev 1.2.11 → 1.2.13

package/dev/ConfigPanel/DevCptBase.vue

@@ -0,0 +1,210 @@
+<template>
+    <ap-container>
+        <ap-header margin="1111">
+            <el-form ref="tDevCptBaseSearchForm" :model="tDevCptBaseSearchForm" :rules="tDevCptBaseSearchFormRules"
+                     :inline="true" class="layout-header-form">
+                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
+                    <el-input v-model="tDevCptBaseSearchForm.likeStr" placeholder="名称"></el-input>
+                </el-form-item>
+            </el-form>
+            <el-button type="primary" @click="searchEvent">查询</el-button>
+        </ap-header>
+        <ap-main margin="0111">
+            <ap-table ref="tDevCptBaseRef" :options.sync="tDevCptBaseOpt"></ap-table>
+        </ap-main>
+
+        <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.isVisible" @close="resetTDevCptBaseForm"
+                   width="700px">
+            <el-form ref="tDevCptBaseFormRef" :model="tDevCptBaseForm" v-loading="dialogInfo.formIsLoading"
+                     label-width="80px" :inline="true">
+
+                <el-form-item label='名称' prop='fdName'>
+                    <el-input v-model='tDevCptBaseForm.fdName'></el-input>
+                </el-form-item>
+                <br>
+                <el-form-item label='左侧空间' prop='fdLeftSpace'>
+                    <el-input v-model='tDevCptBaseForm.fdLeftSpace'></el-input>
+                </el-form-item>
+                <el-form-item label='排序' prop='fdSort'>
+                    <el-input v-model='tDevCptBaseForm.fdSort'></el-input>
+                </el-form-item>
+                <el-form-item label='模板' prop='fdTemplate'>
+                    <el-input type="textarea" v-model='tDevCptBaseForm.fdTemplate' style="width: 500px" :rows="10"></el-input>
+                </el-form-item>
+            </el-form>
+
+            <span slot="footer">
+                <el-button @click="dialogInfo.isVisible = false">取 消</el-button>
+                <el-button type="primary" @click="saveTDevCptBaseForm"
+                           :loading="dialogInfo.saveBtnIsLoading">确 定</el-button>
+            </span>
+        </el-dialog>
+    </ap-container>
+</template>
+
+<script>
+export default {
+    name: 'TDevCptBase',
+    data() {
+        let columns = [
+            {
+                prop: 'fdName',
+                label: '名称',
+                type: 'input',
+                width: '120'
+            }, {
+                prop: 'fdLeftSpace',
+                label: '向右偏移',
+                type: 'input',
+                help: '模板整体向右偏移空格数',
+                width: '100'
+            }, {
+                prop: 'fdSort',
+                label: '排序',
+                type: 'input',
+                width: '100'
+            }, {
+                prop: 'fdTemplate',
+                label: '模板',
+                type: 'input',
+                html: (value, row) =>{
+                    console.log(value);
+                    value = value.replaceAll("<", "&lt;")
+                    let html = `<div class="api-code" style="line-height: 14px;">${value}</div>`;
+                    return html;
+                },
+                help: `1、参数格式：\${xxxx}<br> xxx只能是字母，默认空格连接<br>
+2、数组参数格式：\${xxxx#abc}<br>使用#连接，abc为自定义连接符。使用\\n表示换行<br>
+3、行以参数开头，则前缀空格会被自动清空。可使用组件模板控制前置空格。`
+            }
+        ];
+        let toolbarBtn = [
+            {type: "add", onClick: this.openAddDialog},
+            {type: "edit", onClick: this.openEditDialog},
+            "del", "refresh", "save"
+        ];
+        let tableOpt = {
+            title: "组件基础模板",
+            columns: columns,
+            dataUrl: "/apd/TDevCptBase/getTDevCptBaseGridList",
+            deletePk: "fdId", // 默认fdId
+            deleteUrl: "/apd/TDevCptBase/deleteTDevCptBaseGridData",
+            toolbarBtn: toolbarBtn,
+            initData: true, // 默认false
+            params: () => {
+                return {
+                    likeStr: this.tDevCptBaseSearchForm.likeStr
+                }
+            }
+        };
+
+        let tDevCptBaseForm = {
+            fdName: '',
+            fdLeftSpace: '',
+            fdTemplate: '',
+            fdSort: '',
+        };;
+        return {
+            tDevCptBaseOpt: tableOpt,
+            tDevCptBaseForm: tDevCptBaseForm,
+            tDevCptBaseFormRules: {
+            },
+            dialogInfo: {
+                title: "",
+                isAdd: false,
+                isVisible: false,
+                saveBtnIsLoading: false,
+                formIsLoading: false
+            },
+            tDevCptBaseSearchForm: {
+                likeStr: ""
+            },
+            tDevCptBaseSearchFormRules: {
+                // TODO 自定义rules
+                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
+            }
+        }
+    },
+    methods: {
+        // 打开添加dialog
+        openAddDialog() {
+            this.dialogInfo.isAdd = true;
+            this.dialogInfo.title = "添加数据";
+            this.dialogInfo.isVisible = true;
+        },
+        // 打开编辑dialog
+        openEditDialog() {
+            let selectedRows = this.$refs.tDevCptBaseRef.getSelection();
+            if (selectedRows.length < 1) {
+                this.$message.error("请选择需要编辑的行！");
+                return;
+            }
+            if (selectedRows.length > 1) {
+                this.$message.error("只能选择单行数据进行编辑！");
+                return;
+            }
+
+            this.dialogInfo.isAdd = false;
+            this.dialogInfo.title = "编辑数据";
+            this.dialogInfo.isVisible = true;
+            this.dialogInfo.formIsLoading = true;
+            // 获取单条数据
+            this.$request({
+                url: '/apd/TDevCptBase/getTDevCptBaseByFdId',
+                method: 'post',
+                data: {
+                    fdId: selectedRows[0].fdId
+                }
+            }).then(response => {
+                this.tDevCptBaseForm = response.data;
+            }).finally(() => {
+                this.dialogInfo.formIsLoading = false;
+            })
+        },
+        // 重置表单
+        resetTDevCptBaseForm() {
+            this.$refs.tDevCptBaseFormRef.resetFields();
+        },
+        // dialog表单保存
+        saveTDevCptBaseForm() {
+            // 表单rules认证
+            this.$refs.tDevCptBaseFormRef.validate((valid) => {
+                if (!valid) {
+                    this.$message.error('数据校验错误！');
+                    return false;
+                }
+                this.dialogInfo.saveBtnIsLoading = true;
+
+                let fnName = this.dialogInfo.isAdd ? "insertTDevCptBase" : "updateTDevCptBase";
+                // 添加数据
+                this.$request({
+                    url: '/apd/TDevCptBase/' + fnName,
+                    method: 'post',
+                    data: this.tDevCptBaseForm
+                }).then(response => {
+                    this.$message.success(`保存成功！`)
+                    this.dialogInfo.isVisible = false;
+                    // 刷新表格
+                    this.$refs.tDevCptBaseRef.refresh();
+                }).finally(() => {
+                    this.dialogInfo.saveBtnIsLoading = false;
+                })
+            });
+        },
+        // 查询
+        searchEvent() {
+            // 表单rules认证
+            this.$refs.tDevCptBaseSearchForm.validate((valid) => {
+                if (!valid) {
+                    this.$message.error('搜索条件格式不正确！');
+                    return false;
+                }
+                this.$refs.tDevCptBaseRef.refresh();
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/dev/ConfigPanel/index.vue

@@ -1,16 +1,22 @@
 <template>
-    <el-tabs tab-position="left" class="db-design" style="height: 100%;">
-        <el-tab-pane label="我的配置" style="height: 100%;">
-            <dev-my-config/>
+    <el-tabs v-model="activeTab" @tab-click="handleClick" tab-position="left" class="config-tab" style="height: 100%;">
+        <el-tab-pane label="我的配置" name="status1" style="height: 100%;">
+            <dev-my-config v-if="status1"/>
         </el-tab-pane>
-        <el-tab-pane label="数据源管理" style="height: 100%;">
-            <dev-db-source/>
+        <el-tab-pane label="数据源管理" name="status2" style="height: 100%;">
+            <dev-db-source v-if="status2"/>
         </el-tab-pane>
-        <el-tab-pane label="数据源授权" style="height: 100%;">
-            <dev-db-user-source/>
+        <el-tab-pane label="数据源授权" name="status3" style="height: 100%;">
+            <dev-db-user-source v-if="status3"/>
         </el-tab-pane>
-        <el-tab-pane label="文档历史表" style="height: 100%;">
-            <dev-doc-history/>
+        <el-tab-pane label="文档历史表" name="status4" style="height: 100%;">
+            <dev-doc-history v-if="status4"/>
+        </el-tab-pane>
+        <el-tab-pane label="组件基础模板" name="status5" style="height: 100%;">
+            <dev-cpt-base v-if="status5"/>
+        </el-tab-pane>
+        <el-tab-pane label="组件配置" name="status6" style="height: 100%;">
+            <dev-cpt v-if="status6"/>
         </el-tab-pane>
     </el-tabs>
 </template>
@@ -20,6 +26,8 @@
     import DevDbSource from './DevDbSource'
     import DevDbUserSource from './DevDbUserSource'
     import DevDocHistory from './DevDocHistory'
+    import DevCpt from './DevCpt'
+    import DevCptBase from './DevCptBase'
 
     export default {
         name: 'ConfigPanel',
@@ -27,17 +35,38 @@
             DevMyConfig,
             DevDbSource,
             DevDbUserSource,
-            DevDocHistory
+            DevDocHistory,
+            DevCpt,
+            DevCptBase,
+        },
+        data() {
+            return {
+                activeTab: 'status1',
+                status1: true,
+                status2: false,
+                status3: false,
+                status4: false,
+                status5: false,
+                status6: false,
+                status7: false,
+                status8: false,
+            }
+        },
+        methods: {
+            handleClick(tab, event) {
+                this[tab.name] = true;
+                console.log(tab.name);
+            },
         }
     }
 </script>
 
 <style scoped>
-    .db-design /deep/ .el-tabs__header.is-left {
+    .config-tab /deep/ .el-tabs__header.is-left {
         margin-right: 0px !important;
     }
 
-    .db-design /deep/ .el-tabs__content {
+    .config-tab /deep/ .el-tabs__content {
         height: 100% !important;
     }
 </style>

package/dev/base/VueRender.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="renderCtn" ref="renderCtn" class="render-ctn">
+    <div :id="ctnId" :ref="ctnId" class="render-ctn">
         <span style="color: #9e9e9e;">暂无内容</span>
     </div>
 </template>
@@ -16,8 +16,12 @@ export default {
         }
     },
     data() {
-
+        let id  =  parseInt(Math.random() * 10000000);
+        let ctnId = "renderCtn" + id;
+        let appId = "appId" + id;
         return {
+            appId: appId,
+            ctnId: ctnId,
             component: null,
             html: '',
             js: '',
@@ -34,11 +38,15 @@ export default {
             deep: true
         }
     },
+    mounted() {
+        this.removeRender();
+        this.renderCode();
+    },
     methods: {
         // 移除渲染内容
         removeRender() {
             // 移除元素
-            let children = document.getElementById("renderCtn").children;
+            let children = document.getElementById(this.ctnId).children;
             if (children == null) {
                 return;
             }
@@ -59,7 +67,7 @@ export default {
                 parseStrToFunc.template = this.html;
                 const Component = Vue.extend(parseStrToFunc);
                 this.component = new Component().$mount();
-                this.$refs.renderCtn.appendChild(this.component.$el);
+                this.$refs[this.ctnId].appendChild(this.component.$el);
             }
         },
         // 解析代码
@@ -77,8 +85,7 @@ export default {
             let code = this.options;
             const script = this.getSource(code, 'script').replace(/export default/, 'return ');
             const style = this.getSource(code, 'style');
-            const template = '<div id="app">' + this.getSource(code, 'template') + '</div>';
-
+            const template = `<div id="${this.appId}">${this.getSource(code, 'template')}</div>`;
             this.js = script;
             this.css = style;
             this.html = template;

package/dev/dev/index.vue

@@ -11,7 +11,8 @@
 </template>
 
 <script>
-import ComponentsPanel from './../ComponentsPanel'
+// import ComponentsPanel from './../ComponentsPanel'
+import ComponentsPanel from '@/components/ComponentsPanel'
 import CustomPanel from './../CustomPanel'
 import BackgroundPanel from './../BackgroundPanel'
 import OperatePanel from './../OperatePanel'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ap-dev",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "description": "===== ap-dev =====",
   "author": "xiexinbin",
   "email": "876818817@qq.com",