ap-dev 1.2.13 → 1.2.14

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.14",
   "description": "===== ap-dev =====",
   "author": "xiexinbin",
   "email": "876818817@qq.com",