ap-dev 1.1.0 → 1.1.4

package/dev/ApiPanel/tabs/ApiApAsideTree.vue

@@ -0,0 +1,303 @@
+<template>
+    <div style="height: 100%">
+        <api-tittle-1>左侧树组件</api-tittle-1>
+        <api-tittle-2>一、使用方法</api-tittle-2>
+        <api-code>{{ js1 }}</api-code>
+        <api-tittle-2>1、组件插槽说明:</api-tittle-2>
+        <api-code>{{ js2 }}</api-code>
+        <api-tittle-2>2、组件option参数说明:</api-tittle-2>
+        <div style="height: 1500px;width: 90%">
+            <api-table :data="methodData" :columns="methodCols" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2 } from './../components'
+
+export default {
+    name: 'ApiApAsideTree',
+    components: {
+        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+    },
+    data() {
+        const methodCols = [
+            { label: '名称', prop: 'name', width: '180px' },
+            { label: '类型', prop: 'type', width: '100px' },
+            { label: '默认值', prop: 'default', width: '80px' },
+            { label: '描述', prop: 'memo', minWidth: '100px' },
+            { label: '示例代码', prop: 'code', minWidth: '100px' }]
+        const methodData = [
+            {
+                name: 'title',
+                type: '字符串',
+                default: '列表',
+                memo: `列表的标题`,
+                code: `<div class="api-code">title: "分组列表"</div>`
+            },{
+                name: 'dialogTitle',
+                type: '字符串',
+                default: '表单',
+                memo: `dialog的标题<br>
+                            <span class="api-memo">注：标题会自动加"添加"或"编辑"文字前缀</span>`,
+                code: `<div class="api-code">dialogTitle: "分组",</div>`
+            },{
+                name: 'showCheckbox',
+                type: '布尔',
+                default: 'false',
+                memo: `显示checkbox选择框<br>
+                            <span class="api-memo">注：支持多选时要配置</span>`,
+                code: `<div class="api-code">showCheckbox: true,</div>`
+            },{
+                name: 'toolbarBtn',
+                type: '数组',
+                default: '[]',
+                memo: `工具类的icon：包括"add", "edit", "del", "sort"。可自定义<br>
+                            <span class="api-memo">注：标题会自动加"添加"或"编辑"文字前缀</span>`,
+                code: `<div class="api-code">toolbarBtn: ["add", "edit", "del", "sort",
+                    {
+                        icon: "el-icon-top", onClick: () => {
+                            // 定义icon和onClick即可
+                            console.log("自定义的icon");
+                        }
+                    }]</div>`
+            },{
+                name: 'onClick',
+                type: '方法',
+                default: '[]',
+                memo: `点击节点回调方法`,
+                code: `<div class="api-code">onClick: (data, node, comp) => {
+                            console.log("点击节点的方法")
+                }</div>`
+            },{
+                name: 'onCheck',
+                type: '方法',
+                default: '[]',
+                memo: `点击选择框回调<br>
+                            <span class="api-memo">注：标题会自动加"添加"或"编辑"文字前缀</span>`,
+                code: `<div class="api-code">onCheck: (data, node, comp, halfCheckedKeys, checkedKeys) => {
+                    // 多选值
+                },</div>`
+            },{
+                name: 'loadOptions',
+                type: '对象',
+                default: '',
+                memo: `数据加载参数<br>
+                            <span class="api-memo">注：对象内容见示例。</span>`,
+                code: `<div class="api-code">loadOptions: {
+                    url: "/xxx",// 数据请求路径
+                    data: () => {
+                        // 数据请求参数
+                        return {}
+                    },
+                    success: (response) => {
+                         console.log("数据请求成功回调")
+                    },
+                    error() {
+                            console.log("数据请求失败回调")
+                    },
+                    // 树值映射：默认如下
+                    treeKey: {
+                        idKey: "fdId",           // id
+                        parentKey: "fdParentId", // 父id
+                        sortKey: "fdSort",       // 排序
+                        childrenKey: "children", // 子节点参数
+                        label: "fdName"           // 显示参数
+                    },
+                },</div>`
+            },{
+                name: 'editOptions',
+                type: '对象',
+                default: '',
+                memo: `编辑表单参数<br>
+                            <span class="api-memo">注：标题会自动加"添加"或"编辑"文字前缀</span>`,
+                code: `editOptions: {
+                    url: "/xxx",// 数据请求路径
+                    data: (node) => {
+                        // 数据请求参数
+                        return {
+                            fdId: node.fdId
+                        }
+                    },
+                },`
+            },{
+                name: 'insertUrl',
+                type: '字符串',
+                default: '',
+                memo: `数据插入路径`,
+                code: `insertUrl: "/apm/xxx",`
+            },{
+                name: 'insertData',
+                type: '方法',
+                default: '',
+                memo: `数据插入参数`,
+                code: `insertData: () => {
+                    return this.dialogForm
+                },`
+            },{
+                name: 'deleteUrl',
+                type: '字符串',
+                default: '',
+                memo: `数据删除路径`,
+                code: `deleteUrl: "/apm/xxx",`
+            },{
+                name: 'deleteData',
+                type: '方法',
+                default: '',
+                memo: `数据删除参数`,
+                code: `deleteData: () => {
+                    return this.dialogForm
+                },`
+            },{
+                name: 'updateSortUrl',
+                type: '字符串',
+                default: '',
+                memo: `单个排序更新`,
+                code: `updateSortUrl: "/apm/xxx",`
+            },{
+                name: 'updateSortListUrl',
+                type: '字符串',
+                default: '',
+                memo: `一键排序更加`,
+                code: `updateSortListUrl: "/apm/xxx",`
+            },{
+                name: 'sortByTree',
+                type: '布尔',
+                default: 'true',
+                memo: `一键排序方式：true按树顺序 false按树节点顺序`,
+                code: `sortByTree: false,`
+            },{
+                name: 'resetForm',
+                type: '方法',
+                default: '',
+                memo: `重置表单<br>
+                            <span class="api-memo">注：打开添加dialog需要重置表单</span>`,
+                code: `resetForm: () => {
+                    this.dialogForm = {
+                        fdId: '',
+                        fdParentId: '',
+                        fdName: '',
+                        fdCode: '',
+                        fdIsGroup: 0,
+                        fdType: 0,
+                        fdSort: 0
+                    };
+                }`
+            },{
+                name: 'afterOpenAddDialog',
+                type: '方法',
+                default: '',
+                memo: `打开添加dialog后回调<br>
+                            <span class="api-memo">注：可用于设定表单的初始默认值</span>`,
+                code: `afterOpenAddDialog: (node) => {
+                    // 打开dialog后设定默认值
+                    this.dialogForm.fdParentId = node.fdId;
+                },`
+            }
+        ]
+        const js1 = `1、组件定义
+<ap-aside-tree :options.sync="treeOptions">
+    <el-form slot="form" ref="dialogForm"
+             :inline="true"
+             :model="dialogForm" :rules="dialogFormRules" label-width="80px">
+        <el-form-item label="名称" prop="fdName">
+            <el-input v-model="dialogForm.fdName"></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="fdSort">
+            <el-input-number v-model="dialogForm.fdSort" controls-position="right"></el-input-number>
+        </el-form-item>
+    </el-form>
+    <span slot="tree" slot-scope="scope">
+        {{ scope.data.fdName }}
+    </span>
+</ap-aside-tree>
+2、treeOptions参数定义
+methods: {
+    getTreeOption() {
+        let treeOptions = {
+            title: "分组列表",
+            toolbarBtn: ["add", "edit", "del", "sort",
+                {
+                    icon: "el-icon-top", onClick: () => {
+                        console.log("自定义icon");
+                    }
+                }],
+            dialogTitle: "分组",
+            onClick: (data, node, comp) => {},
+            loadOptions: {
+                url: "/apm/xxxx",
+                data: {},
+                success: (response) => {},
+                error() {},
+                treeKey: {
+                    idKey: "fdId",
+                    parentKey: "fdParentId",
+                    childrenKey: "children",
+                    label: "fdName"
+                },
+            },
+            editOptions: {
+                url: "/apm/xxxx",
+                data: (node) => {
+                    console.log(node);
+                    return {}
+                },
+                success: (response) => {},
+                error() {
+                },
+            },
+
+            insertUrl: "/apm/xxx",
+            insertData: () => {
+                return this.dialogForm
+            },
+            updateUrl: "/apm/xxx",
+            updateData: () => {
+                return this.dialogForm
+            },
+            deleteUrl: "/apm/xxx",
+            deleteData: (node) => {
+                return {
+                    fdId: node.fdId
+                }
+            },
+            updateSortUrl: '/apm/xxx',
+            updateSortListUrl: '/apm/xxx',
+            resetForm: () => {
+                this.dialogForm = {
+                    fdId: '',
+                    fdParentId: '',
+                    fdName: '',
+                    fdSort: 0
+                };
+            },
+            afterOpenAddDialog: (node) => {
+                this.dialogForm.fdParentId = node.fdId;
+            },
+        };
+
+        return treeOptions;
+    }
+}`
+        const js2 = `// ApAsideTree有两个插槽
+1、dialog插槽：
+格式：<el-form slot="form" ...>...</el-form>
+注意：[slot="form"]必填
+
+2、树节点插槽：
+格式：<span slot="tree" slot-scope="scope">{{ scope.data.fdName }}</span>
+注意：[slot="tree" slot-scope="scope"]必填，使用scope.data可以获取节点的数据。
+`
+        return {
+            methodData,
+            methodCols,
+            js1,
+            js2
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+</style>

package/dev/ApiPanel/tabs/ApiBaseLayout.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <api-tittle-1>页面布局：</api-tittle-1>
+    <api-content>
+      该布局组件为element自带布局组件的增强版本。所有页面的基础布局需要使用该布局方式。
+    </api-content>
+    <api-tittle-2>一、通用布局容器</api-tittle-2>
+    <api-tittle-2>1.1 外层容器 &lt;ap-container&gt;</api-tittle-2>
+    <api-content>
+      当子元素中包含 &lt;ap-header&gt; 或 &lt;ap-footer&gt; 时，全部子元素会垂直上下排列，否则会水平左右排列。
+    </api-content>
+    <api-tittle-2>1.2 顶栏容器 &lt;ap-header&gt;</api-tittle-2>
+    <api-content>
+      高度默认auto，可自定义高度：
+      <api-code>&lt;ap-header height="400px"/&gt;</api-code>
+      <api-code>&lt;ap-header height="50%"/&gt;</api-code>
+      1.2.1 顶栏表单式样：覆盖表单默认式样
+      <api-code>&lt;ap-header&gt;<br>
+        &lt;el-form class="layout-header-form"&gt;<br>
+        &lt;el-form-item class="layout-header-form-item"&gt;&lt;el-form-item&gt;<br>
+        &lt;el-form&gt;<br>
+        &lt;ap-header&gt;
+      </api-code>
+    </api-content>
+    <api-tittle-2>1.3 侧边容器 &lt;ap-aside&gt;</api-tittle-2>
+    <api-content>
+      宽度默认300px，可自定义高度：
+      <api-code>&lt;ap-aside width="500px"/&gt; <br>&lt;ap-aside width="50%"/&gt;</api-code>
+      注：&lt;ap-aside&gt;子元素默认使用flex布局、垂直排列。<br>
+      1.3.1 侧边容器常用布局方式<br>
+      <api-code>
+        &lt;ap-aside&gt;<br>
+        &lt;div class="layout-aside-header"&gt;<br>
+        &lt;div class="layout-aside-header-title"&gt; 标题 &lt;/div&gt;<br>
+        &lt;div class="layout-aside-header-icon"&gt; icon图表&lt;/div&gt;<br>
+        &lt;/div&gt;<br>
+        &lt;div class="layout-aside-content"&gt;主要内容&lt;/div&gt;<br>
+        &lt;/ap-aside&gt;</api-code>
+    </api-content>
+    <api-tittle-2>1.4 主要区域容器 &lt;ap-main&gt;</api-tittle-2>
+    <api-content>
+      主要区域容器
+    </api-content>
+    <api-tittle-2>1.5 底栏容器 &lt;ap-footer&gt;</api-tittle-2>
+    <api-content>
+      高度默认60px，可自定义高度：
+      <api-code>&lt;ap-footer height="400px"/&gt;</api-code>
+      <api-code>&lt;ap-footer height="50%"/&gt;</api-code>
+    </api-content>
+    <api-content>
+      <br>
+      <b>注意：</b>
+      <br>1. 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。
+      <br>2. &lt;ap-container&gt; 的子元素只能是后四者，后四者的父元素也只能是 &lt;ap-container&gt;
+      <br>3. 除了&lt;ap-container&gt; ，其他四个均支持margin参数。参数固定四位，每一位表示是否有margin。
+      <br>如：<span class="api-code">margin="0111"</span>从左到右，分别表示：margin-top:0px、margin-right:10px、margin-bottom:10px、margin-left:10px
+    </api-content>
+
+    <api-tittle-2>二、常用布局</api-tittle-2>
+    <api-tittle-2>2.1 单个布局</api-tittle-2>
+    <div class="layout-ctn">
+      <div class="layout-box" style="width: 100%;height: 100%;">
+        页面内容
+      </div>
+    </div>
+    <api-content>
+      <api-code>{{ js1 }}</api-code>
+    </api-content>
+    <api-tittle-2>2.2 上下布局</api-tittle-2>
+    <div class="layout-ctn">
+      <div class="layout-box" style="width: 100%;height: 30px;">
+        header内容
+      </div>
+      <div class="layout-box" style="width: 100%;height: 65px;margin-top: 5px">
+        main内容
+      </div>
+    </div>
+    <api-content>
+      <api-code>{{ js2 }}</api-code>
+    </api-content>
+    <api-tittle-2>2.3 左右布局:</api-tittle-2>
+    <div class="layout-ctn">
+      <div class="layout-box" style="width: 50px;height: 100%;float: left">
+        左侧内容
+      </div>
+      <div class="layout-box" style="width: 145px;height: 100%;margin-left: 5px">
+        main内容
+      </div>
+    </div>
+    <api-content>
+      <api-code>{{ js3 }}</api-code>
+    </api-content>
+    <api-tittle-2>2.4 左右布局</api-tittle-2>
+    <div class="layout-ctn">
+      <div class="layout-box" style="width: 50px;height: 100%;float: left">
+        左侧内容
+      </div>
+      <div class="layout-box" style="width: 145px;height: 25px;margin-left: 5px">
+        header内容
+      </div>
+      <div class="layout-box" style="width: 145px;height: 70px;margin-left: 5px; margin-top: 5px">
+        main内容
+      </div>
+    </div>
+    <api-content>
+      <api-code>{{ js4 }}</api-code>
+    </api-content>
+
+    <api-tittle-2>2.5 上下主从布局</api-tittle-2>
+    <div class="layout-ctn">
+      <div class="layout-box" style="width: 100%;height: 20px;">
+        header内容
+      </div>
+      <div class="layout-box" style="width: 100%;height: 35px;margin-top: 5px">
+        main：主内容
+      </div>
+      <div class="layout-box" style="width: 100%;height: 35px;margin-top: 5px">
+        main：明细内容
+      </div>
+    </div>
+    <api-content>
+      <api-code>{{ js5 }}</api-code>
+    </api-content>
+    <api-tittle-2>2.6 左右主从布局</api-tittle-2>
+    <div class="layout-ctn">
+      <div class="layout-box" style="width: 100%;height: 25px;">
+        header内容
+      </div>
+      <div class="layout-box" style="width: 95px;height: 70px;float: left;margin-top: 5px;">
+        main：主内容
+      </div>
+      <div class="layout-box" style="width: 100px;height: 70px;margin-left: 5px;margin-top: 5px;">
+        main：明细内容
+      </div>
+    </div>
+    <api-content>
+      <api-code>{{ js6 }}</api-code>
+    </api-content>
+  </div>
+</template>
+
+<script>
+import { ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2 } from './../components'
+
+export default {
+  name: 'ApiLayout',
+  components: {
+    ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+  },
+  data() {
+    const js1 = `<template>
+    <ap-container>
+        <ap-main margin="1111">
+            main内容...
+        </ap-main>
+    </ap-container>
+</template>`
+    const js2 = `<template>
+    <ap-container>
+        <ap-header margin="1111">header内容</ap-header>
+        <ap-main margin="0111">main内容</ap-main>
+    </ap-container>
+</template>`
+    const js3 = `<template>
+    <ap-container>
+        <ap-aside margin="1111">左侧内容...</ap-aside>
+        <ap-main margin="1110">main内容...</ap-main>
+    </ap-container>
+</template>`
+    const js4 = `<template>
+    <ap-container>
+        <ap-aside margin="1111">左侧内容...</ap-aside>
+        <ap-container>
+            <ap-header margin="1110">header内容...</ap-header>
+            <ap-main margin="0110">main内容...</ap-main>
+        </ap-container>
+    </ap-container>
+</template>`
+    const js5 = `<template>
+    <ap-container>
+        <ap-header margin="1111">header内容...</ap-header>
+        <ap-container>
+            <ap-header height="50%" margin="0111">主内容...</ap-header>
+            <ap-main margin="0111">明细内容...</ap-main>
+        </ap-container>
+    </ap-container>
+</template>
+或：主内容和明细内容等分时
+<template>
+    <ap-container>
+        <ap-header margin="1111">header内容...</ap-header>
+        <ap-container>
+            <ap-main margin="0111">主内容...</ap-main>
+            <ap-main margin="0111">明细内容...</ap-main>
+        </ap-container>
+    </ap-container>
+</template>`
+    const js6 = `<template>
+    <ap-container>
+        <ap-header margin="1111">header内容...</ap-header>
+        <ap-container>
+            <ap-aside width="40%" margin="0111">主内容...</ap-aside>
+            <ap-main margin="0110">明细内容...</ap-main>
+        </ap-container>
+    </ap-container>
+</template>
+或：主内容和明细内容等分时
+<template>
+    <ap-container>
+        <ap-header margin="1111">header内容...</ap-header>
+        <ap-container>
+            <ap-main margin="0111">主内容...</ap-main>
+            <ap-main margin="0110">明细内容...</ap-main>
+        </ap-container>
+    </ap-container>
+</template>`
+
+    return { js1, js2, js3, js4, js5, js6 }
+  }
+}
+</script>
+
+<style scoped>
+    .layout-ctn {
+        width: 212px;
+        height: 112px;
+        border: 1px dashed #9E9E9E;
+        padding: 5px;
+        background-color: #e2e7ef;
+    }
+
+    .layout-box {
+        float: left;
+        font-size: 12px;
+        padding: 5px;
+        background-color: white;
+    }
+</style>