ap-dev 1.2.13 → 1.2.14

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>

package/ops/ConfigPanel/OpsDocHistory.vue

@@ -0,0 +1,145 @@
+<template>
+    <ap-container>
+        <ap-header margin="1111">
+            <el-form ref="searchForm" :model="searchForm" :rules="searchFormRules"
+                     :inline="true" class="layout-header-form">
+                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
+                    <el-input v-model="searchForm.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="tDocHistoryRef" :options.sync="docHistoryOpt">
+                <template #operate="slotProps">
+                    <div class="ap-tag" @click="showDetail(slotProps.rowData.fdId)">文档预览</div>
+                </template>
+            </ap-table>
+        </ap-main>
+        <el-dialog
+            title="文档预览"
+            :visible.sync="showDialog" style="height: 100%">
+            <ap-doc v-model="docText" style="height: 400px;overflow: scroll;">
+
+            </ap-doc>
+        </el-dialog>
+    </ap-container>
+</template>
+
+<script>
+export default {
+    name: 'OpsDocHistory',
+    data() {
+        let columns = [
+            {
+                prop: 'fdTypeId',
+                label: '文档类型Id',
+                type: 'input',
+                width: '250px'
+            } , {
+                prop: 'fdName',
+                label: '文档名称',
+                type: 'input'
+            }, {
+                prop: 'fdDate',
+                label: '文档更新时间',
+                type: 'datePicker',
+                align:"center",
+                datePickerFormat: 'yyyy-MM-dd HH:mm',
+                width: '130px'
+            }, {
+                prop: 'fdBackupDate',
+                label: '备份时间',
+                type: 'datePicker',
+                datePickerFormat: 'yyyy-MM-dd HH:mm',
+                align:"center",
+                width: '130px'
+            } , {
+                prop: 'fdName',
+                label: '检查信息',
+                type: 'input',
+                html: (value, row) => {
+                    if (row.currentName == null) {
+                        return `<div class="ap-color-red">当前文档已删除</div>`;
+                    }
+                    if (row.currentName != row.fdName) {
+                        return `<div class="ap-color-red">最新文档名称：${row.currentName}</div>`;
+                    }
+                    return `<div class="ap-color-green">正常</div>`;
+                }
+            }, {
+                prop: 'operate',
+                label: '操作',
+                type: 'slot',
+                slot: "operate",
+                align:"center",
+                width: '120px',
+            }
+        ];
+        let tableOpt = {
+            title: "文档历史表",
+            columns: columns,
+            dataUrl: "/apd/ops/TOpsDocHistory/getTOpsDocHistoryGridList",
+            toolbarBtn: [{btnType: "primary", text: "备份文档", icon: "el-icon-transfer", onClick: this.backupDoc}, "refresh"],
+            initData: true, // 默认false
+            showSelection: false,
+            params: () => {
+                return {
+                    likeStr: this.searchForm.likeStr
+                }
+            }
+        };
+        return {
+            docHistoryOpt: tableOpt,
+            searchForm: {
+                likeStr: ""
+            },
+            searchFormRules: {
+                likeStr: [{min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}]
+            },
+            showDialog: false,
+            docText: ""
+        }
+    },
+    methods: {
+        // 查询
+        searchEvent() {
+            // 表单rules认证
+            this.$refs.searchForm.validate((valid) => {
+                if (!valid) {
+                    this.$message.error('搜索条件格式不正确！');
+                    return false;
+                }
+                this.$refs.tDocHistoryRef.refresh();
+            });
+        },
+        backupDoc() {
+            this.$message.warning("开始备份...");
+            this.$request({
+                url: "/apd/ops/TOpsDocHistory/backupOpsDoc",
+                method: 'post',
+                data: {}
+            }).then(response => {
+                this.$message.success(response.data);
+                this.$refs.tDocHistoryRef.refresh();
+            })
+        },
+        showDetail(id) {
+            this.showDialog = true;
+            this.docText = "...";
+            this.$request({
+                url: "/apd/ops/TOpsDocHistory/getTOpsDocHistoryByFdId",
+                method: 'post',
+                data: {
+                    fdId: id
+                }
+            }).then(response => {
+                this.docText = response.data.fdText;
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/ops/ConfigPanel/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <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%;">
+            <ops-doc-history v-if="status1"/>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script>
+    import OpsDocHistory from './OpsDocHistory'
+
+    export default {
+        name: 'ConfigPanel',
+        components: {
+            OpsDocHistory,
+        },
+        data() {
+            return {
+                activeTab: 'status1',
+                status1: true,
+                status2: false,
+            }
+        },
+        methods: {
+            handleClick(tab, event) {
+                this[tab.name] = true;
+                console.log(tab.name);
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .config-tab /deep/ .el-tabs__header.is-left {
+        margin-right: 0px !important;
+    }
+
+    .config-tab /deep/ .el-tabs__content {
+        height: 100% !important;
+    }
+</style>

package/ops/OperatePanel/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="flex flex-pack-justify flex-1 ap-dev-operate-panel">
+        <div class="flex">
+            <div class="ap-dev-tool-item dev-header-logo" @click="currentDesignPanel('api-panel', $event)">
+                OPS | 运维平台
+            </div>
+            <div class="ap-dev-tool-item flex flex-center"  @click="currentDesignPanel('ops-doc', $event)">
+                <div class="ap-dev-tool-item-icon1">
+                    <i class="el-icon-education" />
+                </div>
+                <div class="ap-dev-tool-item-text1">文档</div>
+            </div>
+        </div>
+        <div class="flex">
+            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('config-panel', $event)">
+                <div class="ap-dev-tool-item-icon">
+                    <i class="el-icon-setting"/>
+                </div>
+                <div class="ap-dev-tool-item-text">配置</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {addClass, removeClass} from 'ap-util/util/StyleUtil'
+import {setCurrentCompanyId} from "ap-util/util/LoginUserUtil";
+
+export default {
+    name: 'OperatePanel',
+    data() {
+        return {
+        }
+    },
+    computed: {
+        currentModel() {
+            return this.$store.state.tempData.currentModel
+        }
+    },
+    methods: {
+        currentDesignPanel(type, event) {
+            console.log(event);
+            let items = document.getElementsByClassName("ap-dev-tool-item-active");
+            for (let i = 0; i < items.length; i++) {
+                removeClass(items[i],"ap-dev-tool-item-active")
+            }
+            addClass( event.currentTarget,"ap-dev-tool-item-active");
+            this.$store.commit('updateCurrentDesignPanel', type);
+        },
+        clickEvent(item) {
+            this.currentModel = item.name;
+            this.$store.commit('updateCurrentModel', item.name);
+        },
+        showMenu(type){
+            return this.currentModel == type;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.dev-header-logo {
+    width: 315px;
+    height: 100%;
+    text-align: center;
+    background-color: #497fd5;
+    line-height: 40px;
+    font-size: 18px !important;
+}
+
+.ap-dev-operate-panel {
+    height: 100%;
+    padding: 0 10px 0 0;
+}
+
+.ap-dev-tool-item {
+    padding: 2px 14px;
+    font-size: 13px;
+    text-align: center;
+}
+
+.ap-dev-tool-item:hover {
+    background-color: #80A9EA;
+    cursor: pointer
+}
+
+.ap-dev-tool-item-active {
+    background-color: #6699ea;
+}
+
+.ap-dev-tool-item-text {
+    font-size: 10px;
+    margin-left: 3px;
+}
+
+.ap-dev-tool-item-icon {
+    font-size: 16px;
+}
+
+.ap-dev-tool-item-icon1 {
+    font-size: 18px;
+}
+
+.ap-dev-tool-item-text1 {
+    font-size: 15px;
+    margin-left: 3px;
+    color: white;
+}
+</style>