ap-dev 1.2.13 → 1.2.15

package/dev/ConfigPanel/DevMyConfig.vue

@@ -4,37 +4,66 @@
             <el-form
                 ref="configFormRef"
                 label-position="left"
-                label-width="120px"
+                label-width="200px"
                 :model="configForm"
                 :inline-message="true">
                 <el-form-item label="数据库" prop="fdSourceId">
                     <el-select v-model="configForm.fdSourceId" placeholder="请选择数据库" filterable>
-                        <el-option v-for="item in dbSourceList"
-                                   :key="item.fdId"
-                                   :label="item.fdName"
-                                   :value="item.fdId"/>
+                        <el-option v-for="item in dbSourceList" :key="item.fdId" :label="item.fdName" :value="item.fdId"/>
                     </el-select>
                 </el-form-item>
 
-                <el-form-item label="后端访问地址" prop="fdJavaHref">
-                    <el-input v-model="configForm.fdJavaHref" placeholder="http://本地ip:端口/项目名" class="item-width"/>
-                    <span class="item-msg">示例：http://172.22.0.147:8191/fa</span>
+                <el-form-item label="后端访问地址(请求代码生成)" prop="fdJavaHref">
+                    <el-select v-model="configForm.fdJavaHref" class="item-width">
+                        <template v-for="item in configHistoryList">
+                            <el-option v-if="item.fdType == 1" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
+                        </template>
+                    </el-select>
+                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(1)" />
                 </el-form-item>
-                <el-form-item label="后端项目路径" prop="fdJavaPath">
-                    <el-input v-model="configForm.fdJavaPath" placeholder="后端项目的根路径(后端代码生成位置)" class="item-width"/>
-                    <span class="item-msg">示例：E:\xxx\xxx\fa</span>
+                <el-form-item label="后端项目路径(生成文件)" prop="fdJavaPath">
+                    <el-select v-model="configForm.fdJavaPath" class="item-width">
+                        <template v-for="item in configHistoryList">
+                            <el-option v-if="item.fdType == 2" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
+                        </template>
+                    </el-select>
+                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(2)" />
                 </el-form-item>
-                <el-form-item label="前端访问地址" prop="fdVueHref">
-                    <el-input v-model="configForm.fdVueHref" placeholder="http://本地ip:端口/#/" class="item-width"/>
-                    <span class="item-msg">示例：http://172.22.0.252:9527/#/</span>
+                <el-form-item label="前端访问地址(预览)" prop="fdVueHref">
+                    <el-select v-model="configForm.fdVueHref" class="item-width">
+                        <template v-for="item in configHistoryList">
+                            <el-option v-if="item.fdType == 3" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
+                        </template>
+                    </el-select>
+                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(3)" />
                 </el-form-item>
-                <el-form-item label="前端项目路径" prop="fdVuePath">
-                    <el-input v-model="configForm.fdVuePath" placeholder="前端项目的根路径(前端代码生成位置)" class="item-width"/>
-                    <span class="item-msg">示例：E:\xxx\xxx\ap</span>
+                <el-form-item label="前端项目路径(生成文件)" prop="fdVuePath">
+                    <el-select v-model="configForm.fdVuePath" class="item-width">
+                        <template v-for="item in configHistoryList">
+                            <el-option v-if="item.fdType == 4" :key="item.fdValue" :label="item.fdValue" :value="item.fdValue"></el-option>
+                        </template>
+                    </el-select>
+                    <i class="el-icon-edit-outline edit-icon" @click="showHisTable(4)" />
                 </el-form-item>
             </el-form>
             <el-button type="primary" @click="saveConfigForm">保 存</el-button>
         </ap-main>
+
+        <el-dialog
+            :title="dialogTitle"
+            :visible.sync="dialogVisible"
+            :close-on-click-modal="false"
+            @close="dialogCloseEvent"
+            width="50%">
+            <div style="color: red;font-weight: bold;margin-bottom: 5px" v-html="msg">
+            </div>
+            <div style="height: 300px;width: 100%">
+                <ap-table ref="tDevUserConfigHistoryRef" :options.sync="tDevUserConfigHistoryOpt"></ap-table>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+            </span>
+        </el-dialog>
     </ap-container>
 </template>
 
@@ -45,11 +74,43 @@ export default {
     created() {
         this.initDbSource();
         this.initConfig();
+        this.initConfigHistory();
     },
     data() {
+        let columns = [
+            {
+                prop: 'fdValue',
+                label: '值',
+                type: 'input'
+            },
+        ];
+        let tableOpt = {
+            title: "用户配置信息",
+            columns: columns,
+            editPk: "fdId", //默认fdId
+            deletePk: "fdId", // 默认fdId
+            dataUrl: "/apd/TDevUserConfigHistory/getTDevUserConfigHistoryGridList",
+            saveUrl: "/apd/TDevUserConfigHistory/saveTDevUserConfigHistoryGridData",
+            deleteUrl: "/apd/TDevUserConfigHistory/deleteTDevUserConfigHistoryGridData",
+            toolbarBtn: ["add", "edit", "del", "cancel", "refresh", "save"],
+            addDefaultObj: () => {
+                return { fdType: this.editType}
+            },
+            params: () => {
+                return {
+                    fdType: this.editType
+                }
+            }
+        };
         return {
             dbSourceList: [],
+            configHistoryList: [],
             configForm: {},
+            editType: "",
+            dialogVisible: false,
+            msg: "",
+            dialogTitle: "配置",
+            tDevUserConfigHistoryOpt: tableOpt,
         }
     },
     methods: {
@@ -70,6 +131,43 @@ export default {
                 this.configForm = response.data;
             })
         },
+        initConfigHistory() {
+            this.$request({
+                url: '/apd/TDevUserConfigHistory/getTDevUserConfigHistoryList',
+                method: 'post',
+                data: {}
+            }).then(response => {
+                this.configHistoryList = response.data;
+            })
+        },
+        showHisTable(type) {
+            this.dialogVisible = true;
+            this.editType = type;
+            switch (type) {
+                case 1:
+                    this.msg = "配置说明： http://本地ip:端口/项目名   →   http://172.22.0.123:8191/pm";
+                    this.dialogTitle = "后端访问地址(请求代码生成)";
+                    break;
+                case 2:
+                    this.msg = '配置说明： 后端项目本地根路径   →   E:\\xxx\\xxx\\pm';
+                    this.dialogTitle = "后端项目路径(生成文件)";
+                    break;
+                case 3:
+                    this.msg = '配置说明： http://本地ip:端口/#/   →   http://172.22.0.123:9527/#/';
+                    this.dialogTitle = "前端访问地址(预览)";
+                    break;
+                case 4:
+                    this.msg = '配置说明： 前端项目本地根路径   →   E:\\xxx\\xxx\\ap';
+                    this.dialogTitle = "前端项目路径(生成文件)";
+                    break;
+            }
+            this.$nextTick(() => {
+                this.$refs.tDevUserConfigHistoryRef.refresh();
+            })
+        },
+        dialogCloseEvent() {
+            this.initConfigHistory()
+        },
         saveConfigForm() {
             let param = this.configForm;
             this.$request({
@@ -99,4 +197,9 @@ export default {
     color: #9e9e9e;
     margin-left: 10px;
 }
+.edit-icon {
+    font-size: 19px;
+    margin-left: 10px;
+    color: #1682e6;
+}
 </style>

package/ops/ApiPanel/components/ApiCode.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="api-code">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ApiCode'
+}
+</script>
+
+

package/ops/ApiPanel/components/ApiContent.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ApiContent'
+}
+</script>
+
+<style scoped>
+    .api-content {
+
+    }
+</style>

package/ops/ApiPanel/components/ApiTable.vue

@@ -0,0 +1,40 @@
+<template>
+  <div style="height: 100%">
+    <el-table :data="data" border class="api-table-class" :span-method="spanMethod" height="100%">
+      <template v-for="col in columns">
+        <el-table-column :prop="col.prop" :label="col.label" :width="col.width" :min-width="col.minWidth" class-name="api-table-cell">
+          <template slot-scope="scope">
+            <div v-html="scope.row[scope.column.property]" />
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ApiTable',
+  props: ['data', 'columns', 'spanMethod'],
+  methods: {
+    formatCol(row, column, cellValue, index) {
+      return cellValue
+    }
+  }
+}
+</script>
+
+<style scoped>
+    .api-table-class {
+        width: 100%
+    }
+
+    .api-table-class /deep/ th, .api-table-class /deep/ td {
+        padding: 2px;
+    }
+
+    /*模式式样覆盖：垂直居上*/
+    .el-table /deep/ .api-table-cell {
+        vertical-align: top
+    }
+</style>

package/ops/ApiPanel/components/ApiTittle1.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h2>
+      <slot />
+    </h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ApiTittle1'
+}
+</script>
+
+<style scoped>
+</style>

package/ops/ApiPanel/components/ApiTittle2.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h3>
+      <slot />
+    </h3>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ApiTittle2'
+}
+</script>
+
+<style scoped>
+</style>

package/ops/ApiPanel/components/index.js

@@ -0,0 +1,5 @@
+export { default as ApiCode } from './ApiCode'
+export { default as ApiTittle1 } from './ApiTittle1'
+export { default as ApiTittle2 } from './ApiTittle2'
+export { default as ApiContent } from './ApiContent'
+export { default as ApiTable } from './ApiTable'

package/ops/ApiPanel/index.vue

@@ -0,0 +1,265 @@
+<template>
+    <ap-container>
+        <ap-aside margin="1111" style="width: 235px">
+            <ap-aside-tree :options.sync="treeOptions">
+                <span slot="tree" slot-scope="scope">
+                    <span style="font-size: 12px;">{{ scope.data.fdName }}</span>
+                </span>
+            </ap-aside-tree>
+        </ap-aside>
+        <ap-split-panel/>
+        <ap-main margin="1110" v-loading="loading">
+            <div v-if="showCustom">
+                <component :is="customComponent" />
+            </div>
+            <ap-doc v-if="showDoc" v-model="doc"></ap-doc>
+            <el-tabs v-if="showTabs" v-model="tabActiveName" tabPosition="left" class="api-tabs sap-dev-api" @tab-click="clickTabEvent">
+                <template v-for="(item,index) in tabs">
+                    <el-tab-pane :label="item.fdName" :name="getTabName(item)" :id="item.fdId" class="api-tab">
+                        <el-tabs v-if="showTopTabs" v-model="toptabActiveName" type="card" @tab-click="clickTopTabEvent">
+                            <template v-for="(item2,index2) in topTabs">
+                                <el-tab-pane :label="item2.fdName" :name="getTabName(item2)">
+                                    <ap-doc v-if="!showTopTabsCustom" v-model="doc"></ap-doc>
+                                    <component v-else :is="customComponent" />
+                                </el-tab-pane>
+                            </template>
+                        </el-tabs>
+
+                        <div v-else>
+                            <ap-doc v-if="!showTabsCustom" v-model="doc"></ap-doc>
+                            <component v-else :is="customComponent" />
+                        </div>
+                    </el-tab-pane>
+                </template>
+            </el-tabs>
+        </ap-main>
+    </ap-container>
+</template>
+
+<script>
+// 批量导入modules下的组件
+const allComponents = require.context('./modules', false, /\.vue$/)
+const apiComponents = {}
+allComponents.keys().forEach(fileName => {
+    const comp = allComponents(fileName)
+    apiComponents[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
+})
+
+export default {
+    name: 'ApiPanel',
+    components: apiComponents,
+    data() {
+        return {
+            // ----- 左侧树 -----
+            treeOptions: this.getTreeOption(),
+            selectedDocTypeId: "",
+            // ----- 右侧 -----
+            loading: false,
+            customComponent: "",
+            showCustom: false,
+            showDoc: false,
+            showTabs: false,
+            showTabsCustom: false,
+            showTopTabs: false,
+            showTopTabsCustom: false,
+            tabActiveName: "",
+            tabs: [],
+            doc: "",
+            currentComponent: 'ApiLog',
+            // ----- 右上侧 -----
+            toptabActiveName: null,
+            topTabs: [], // 左侧顶部
+        }
+    },
+    methods: {
+        // 左侧树：配置
+        getTreeOption() {
+            let treeOptions = {
+                showTitle: false,
+                onClick: (data, node, comp) => {
+                    this.scrollTop();
+                    this.selectedDocTypeId = data.fdId;
+                    this.hideContentFn();
+                    // 自定义组件
+                    let customComponent = data.fdCustom;
+                    if(customComponent != null && customComponent != ""){
+                        this.customComponent = customComponent;
+                        this.showCustomFn();
+
+                        return;
+                    }
+                    // 单页
+                    if (data.fdType == 2 || data.fdLayout == "one") {
+                        this.showDocFn();
+                        this.getDocText();
+                        return;
+                    }
+                    // 左侧
+                    this.getDocGroup();
+                },
+                loadOptions: {
+                    url: "/apd/ops/OpsDoc/getOpsDocApiList",
+                    treeKey: {
+                        idKey: "fdId",
+                        parentKey: "fdParentId",
+                        childrenKey: "children",
+                        label: "fdName"
+                    },
+                    success: (response) => {
+                    },
+                },
+                afterOpenAddDialog: (node) => {
+                },
+            };
+            return treeOptions;
+        },
+        getDocGroup() {
+            this.loading = true;
+            this.showTabsFn();
+            this.$request({
+                url: '/apd/ops/OpsDoc/getDocGroup',
+                method: 'post',
+                data: {
+                    id: this.selectedDocTypeId
+                }
+            }).then(response => {
+                this.tabs = response.data
+            }).finally(() => {
+                this.loading = false;
+            })
+        },
+        getDocText() {
+            this.loading = true;
+            this.$request({
+                url: '/apd/ops/OpsDoc/getDocText',
+                method: 'post',
+                data: {
+                    id: this.selectedDocTypeId
+                }
+            }).then(response => {
+                this.doc = response.data
+            }).finally(() => {
+                this.loading = false;
+            })
+        },
+        getTabName(obj){
+            // 分组
+            if (obj.fdType == 1) {
+                return '%%' + obj.fdId;
+            }
+            // 自定义组件
+            if( obj.fdCustom != null && obj.fdCustom != '' && obj.fdCustom != undefined ) {
+                return '##' + obj.fdCustom;
+            } else {
+                // 文档Id
+                return obj.fdId;
+            }
+        },
+        clickTabEvent(tab) {
+            this.scrollTop();
+            let name = tab._props.name;
+            // 左上菜单
+            if (name.startsWith('%%')) {
+                this.$request({
+                    url: '/apd/ops/OpsDoc/getDocGroup',
+                    method: 'post',
+                    data: {
+                        id: name.substring(2, name.length)
+                    }
+                }).then(response => {
+                    this.topTabs = response.data
+                })
+                this.showTopTabsFn();
+                return;
+            }
+            // 自定义组件
+            if (name.startsWith('##')) {
+                this.showTabsCustom = true;
+                this.showTopTabs = false;
+                this.customComponent = name.substring(2, name.length);
+                return;
+            }
+
+            // 文档
+            this.showTabsCustom = false;
+            this.showTopTabs = false;
+            this.selectedDocTypeId = name;
+            this.getDocText();
+
+        },
+        clickTopTabEvent(tab) {
+            this.scrollTop();
+            let name = tab._props.name;
+            // 自定义组件
+            if (name.startsWith('##')) {
+                this.showTopTabsCustom = true;
+                this.customComponent = name.substring(2, name.length);
+                return;
+            }
+            // 文档
+            this.showTopTabsCustom = false;
+            this.selectedDocTypeId = name;
+            this.getDocText();
+        },
+        hideContentFn() {
+            this.showDoc = false;
+            this.showTabs = false;
+            this.showTopTabs = false;
+            this.doc = "";
+            this.tabActiveName = "";
+        },
+        showCustomFn() {
+            this.showCustom = true;
+            this.showDoc = false;
+            this.showTabs = false;
+            this.showTopTabs = false;
+        },
+        showDocFn() {
+            this.showCustom = false;
+            this.showDoc = true;
+            this.showTabs = false;
+            this.showTopTabs = false;
+        },
+        showTabsFn() {
+            this.showCustom = false;
+            this.showDoc = false;
+            this.showTabs = true;
+            this.showTopTabs = false;
+        },
+        showTopTabsFn() {
+            this.showCustom = false;
+            this.showDoc = false;
+            this.showTabs = true;
+            this.showTopTabs = true;
+        },
+        scrollTop(){
+            // 回到顶部
+            let ctn = document.getElementsByClassName('el-tabs__content')
+            if (ctn != null && ctn.length <1) {
+                return;
+            }
+            ctn[0].scrollTop = 0;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.api-tabs {
+    display: flex;
+    height: 100%;
+}
+
+.api-tabs /deep/ .el-tabs__content {
+    flex: 1;
+    overflow: scroll;
+}
+
+.api-tabs /deep/ .el-tabs__item{
+    padding: 0 15px 0 15px;
+}
+
+.api-tabs /deep/ .el-tabs__item {
+    text-align: left;
+}
+</style>

package/ops/ApiPanel/modules/ApiDefault.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>ABAP · 开发文档</h3>
+
+    请选择需要查看的API！
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ApiDefault'
+}
+</script>
+
+<style scoped>
+
+</style>

package/ops/ApiPanel/modules/ApiLog.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <api-tittle1><i class="el-icon-guide"/> 2022-11-22 <span class="log-version">1.0.0</span></api-tittle1>
+        <h4>SAP ABAP开发平台1.0</h4>
+        1、ABAP开发平台1.0正式发布<br>
+        <div class="ap-split-line"/>
+
+        <api-tittle1><i class="el-icon-guide"/> 2022-11-01 <span class="log-version">0.0.1</span></api-tittle1>
+        <h4>SAP ABAP开发平台</h4>
+        1、开发平台初始化构建<br>
+        <div class="ap-split-line"/>
+
+    </div>
+</template>
+
+<script>
+import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
+
+export default {
+    name: 'ApiLog',
+    components: {
+        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+    }
+}
+</script>
+
+<style scoped>
+.log-version {
+    margin-left: 30px;
+}
+</style>