ap-dev 1.2.13 → 1.2.15

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>

package/ops/OpsDoc/index.vue

@@ -0,0 +1,246 @@
+<template>
+    <ap-container>
+        <ap-aside margin="1111">
+            <ap-aside-tree ref="docTypeTree" :options.sync="treeOptions">
+                <el-form slot="form" ref="tOpsDocType" :inline="true" label-width="100px"
+                         :model="tOpsDocTypeForm" :rules="tOpsDocTypeRules">
+                    <el-form-item label="父类别">
+                        <el-select v-model="tOpsDocTypeForm.fdParentId" filterable placeholder="请选择父节点">
+                            <el-option label="无" value=""/>
+                            <el-option
+                                v-for="item in typeList"
+                                :key="item.fdId"
+                                :label="item.fdName"
+                                :value="item.fdId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label='名称' prop='fdName'>
+                        <el-input v-model='tOpsDocTypeForm.fdName'></el-input>
+                    </el-form-item>
+                    <el-form-item label='类型' prop='fdType'>
+                        <el-select v-model="tOpsDocTypeForm.fdType" filterable placeholder="请选择类型">
+                            <el-option key="1" label="分组" :value=1></el-option>
+                            <el-option key="2" label="文档" :value=2></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label='布局' prop='fdLayout'>
+                        <el-select v-model="tOpsDocTypeForm.fdLayout" filterable placeholder="请选择布局">
+                            <el-option key="one" label="单页" value="one"></el-option>
+                            <el-option key="left" label="左侧(二级)" value="left"></el-option>
+                            <el-option key="lefttop" label="左上(三级)" value="lefttop"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label='自定义组件' prop='fdCustom' placeholder="请输入自定义组件名">
+                        <el-input v-model='tOpsDocTypeForm.fdCustom'></el-input>
+                    </el-form-item>
+                    <el-form-item label='排序' prop='fdSort'>
+                        <el-input v-model='tOpsDocTypeForm.fdSort'></el-input>
+                    </el-form-item>
+                </el-form>
+                <span slot="tree" slot-scope="scope">
+                    <span v-if="scope.data.fdType == 1" style="color: #1890ff;font-size: 13px;">{{ scope.data.fdName }}</span>
+                    <span v-else style="font-size: 12px;">{{ scope.data.fdName }}</span>
+                </span>
+            </ap-aside-tree>
+        </ap-aside>
+        <ap-split-panel></ap-split-panel>
+        <ap-container>
+            <ap-main margin="1110">
+                <ap-rich-editor ref="richEditorRef" :options.sync="richEditorOptions" v-loading="loading"/>
+            </ap-main>
+        </ap-container>
+    </ap-container>
+</template>
+
+<script>
+
+import ApRichEditor from 'ap-plugin/ApRichEditor'
+
+
+export default {
+    name: 'OpsDoc',
+    components: {
+        ApRichEditor
+    },
+    data() {
+        return {
+            // ----- 左侧树 -----
+            treeOptions: this.getTreeOption(),
+            typeList: [],
+            tOpsDocTypeForm: {},
+            tOpsDocTypeRules: {},
+            selectedDocTypeId: "",
+            // ----- 右侧 -----
+            loading: false,
+            isFirstClick: true, // 第一次点击不校验是否修改
+            oldEditorValue: "",
+            richEditorOptions: {
+                toolbar: `undo redo formatpainter removeformat
+                | forecolor backcolor permanentpen bold italic underline strikethrough
+                | fontfamily fontsize blocks
+                | alignleft aligncenter alignright alignjustify lineheight
+                | outdent indent
+                | numlist bullist checklist
+                | table image apvideo pageembed link
+                | codesample apcode
+                | searchreplace code preview fullscreen save`,
+                save: (value)=> {
+                    this.saveDocText(value)
+                }
+            },
+        }
+    },
+    activated() {
+        this.getDocText();
+    },
+    methods: {
+        // 左侧树：配置
+        getTreeOption() {
+            let treeOptions = {
+                title: "运维文档",
+                toolbarBtn: [{
+                    icon: "el-icon-copy",
+                    onClick: () => {
+                        this.copyNode();
+                    }
+                }, "add", "edit", "del", "sort", ],
+                dialogTitle: "运维文档",
+                sortByTree: true,
+                sortByDrag: true,
+                onClick: (data, node, comp) => {
+                    // 检查未保存
+                    if (!this.isFirstClick && this.oldEditorValue != this.$refs.richEditorRef.getContent()) {
+                        this.$confirm('当前操作会丢失未保存内容，确认要切换文档?', '提示', {
+                            confirmButtonText: '切换',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            this.selectedDocTypeId = data.fdId;
+                            this.getDocText();
+                        })
+                    } else {
+                        this.selectedDocTypeId = data.fdId;
+                        this.getDocText();
+                        this.isFirstClick = false;
+                    }
+                },
+                loadOptions: {
+                    url: "/apd/ops/OpsDoc/getTOpsDocTypeList",
+                    treeKey: {
+                        idKey: "fdId",
+                        parentKey: "fdParentId",
+                        childrenKey: "children",
+                        label: "fdName"
+                    },
+                    success: (response) => {
+                        this.getDocType();
+                    },
+                },
+                editOptions: {
+                    url: "/apd/ops/OpsDoc/getTOpsDocTypeByFdId",
+                    data: (node) => {
+                        return {
+                            fdId: node.fdId
+                        }
+                    },
+                    success: (response) => {
+                        this.tOpsDocTypeForm= response.data;
+                    },
+                    error() {},
+                },
+                insertUrl: "/apd/ops/OpsDoc/insertTOpsDocType",
+                insertData: () => {
+                    return this.tOpsDocTypeForm
+                },
+                updateUrl: "/apd/ops/OpsDoc/updateTOpsDocType",
+                updateData: () => {
+                    return this.tOpsDocTypeForm
+                },
+                deleteUrl: "/apd/ops/OpsDoc/deleteTOpsDocTypeByFdId",
+                deleteData: (node) => {
+                    return {
+                        fdId: node.fdId
+                    }
+                },
+                updateSortUrl: '/apd/ops/OpsDoc/updateTOpsDocTypeSort',
+                updateSortListUrl: '/apd/ops/OpsDoc/updateTOpsDocTypeSortList',
+                resetForm: () => {
+                    this.tOpsDocTypeForm = {
+                        fdId: '',
+                        fdParentId: '',
+                        fdName: '',
+                        fdType: '',
+                        fdLayout: '',
+                        fdSort: '',
+                    };
+                },
+                afterOpenAddDialog: (node) => {
+                    this.tOpsDocTypeForm.fdParentId = this.selectedDocTypeId;
+                },
+            };
+
+            return treeOptions;
+        },
+        copyNode(){
+            if (this.selectedDocTypeId == null || this.selectedDocTypeId == '') {
+                this.$message.error("请选择需要复制的节点");
+                return
+            }
+            this.$request({
+                url: '/apd/ops/OpsDoc/copyDoc',
+                method: 'post',
+                data: {
+                    id: this.selectedDocTypeId
+                }
+            }).then(response => {
+                this.$message.success("复制成功");
+                this.$refs.docTypeTree.reLoadTreeData();
+            })
+        },
+        getDocType() {
+            this.$request({
+                url: '/apd/ops/OpsDoc/getDocTypeList',
+                method: 'post',
+                data: {}
+            }).then(response => {
+                this.typeList = response.data
+            })
+        },
+        getDocText() {
+            this.loading = true;
+            this.$request({
+                url: '/apd/ops/OpsDoc/getDocText',
+                method: 'post',
+                data: {
+                    id: this.selectedDocTypeId
+                }
+            }).then(response => {
+                this.$refs.richEditorRef.setContent(response.data);
+                this.oldEditorValue = response.data
+            }).finally(() => {
+                this.loading = false;
+            })
+        },
+        saveDocText(value) {
+            this.loading = true;
+            this.$request({
+                url: '/apd/ops/OpsDoc/saveDocText',
+                method: 'post',
+                data: {
+                    typeId: this.selectedDocTypeId,
+                    text: value
+                }
+            }).then(response => {
+                this.$message.success("保存成功");
+                this.oldEditorValue = this.$refs.richEditorRef.getContent();
+            }).finally(() => {
+                this.loading = false;
+            })
+        },
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/ops/ops/index.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="flex flex-pack-center flex-direction-column"
+         style="height: 100%;background-color: #E9ECF1;">
+        <div class="dev-header flex flex-pack-justify flex-align-center">
+            <operate-panel/>
+        </div>
+        <keep-alive>
+            <component :is="currentDesignPanel" class="flex-1 dev-main"/>
+        </keep-alive>
+    </div>
+</template>
+
+<script>
+import OperatePanel from './../OperatePanel'
+import ApiPanel from './../ApiPanel'
+import ConfigPanel from './../ConfigPanel'
+import OpsDoc from './../OpsDoc'
+import opsStore from './opsStore'
+
+export default {
+    name: 'Ops',
+    components: {
+        OperatePanel,
+        ApiPanel,
+        ConfigPanel,
+        OpsDoc,
+    },
+    store: opsStore,
+    data() {
+        return {
+            ctnLoading: true
+        }
+    },
+    created() {
+    },
+    computed: {
+        // store数据修改，itemObj对应修改
+        currentComps() {
+            return this.$store.state.currentComps
+        },
+        currentDesignPanel() {
+            return this.$store.state.tempData.currentDesignPanel
+        }
+    },
+    methods: {
+    }
+}
+</script>
+
+
+<style scoped>
+.dev-header {
+    height: 40px;
+    background-color: #3D76D3;
+    color: white;
+}
+
+.dev-main {
+    overflow: auto;
+}
+</style>

package/ops/ops/opsStore.js

@@ -0,0 +1,27 @@
+import Vuex from 'vuex'
+
+const apDevStore = new Vuex.Store({
+  state: {
+    tempData: {
+      copyItem: {},
+      currentDesignPanel: 'api-panel'
+    }
+  },
+  strict: true,
+  getters: {
+  },
+  mutations: {
+    // 更新当前设计的页面
+    updateCurrentDesignPanel(state, param) {
+      state.tempData.currentDesignPanel = param
+    }
+
+
+  }
+
+})
+
+
+
+
+export default apDevStore

package/package.json

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