├── .gitignore
├── .npmignore
├── README.md
├── build
    ├── config.js
    └── webpack.common.js
├── dist
    └── json-schema-editor.min.js
├── docs
    ├── css
    │   ├── app.478317e2.css
    │   └── chunk-vendors.c470e980.css
    ├── favicon.ico
    ├── fonts
    │   ├── element-icons.535877f5.woff
    │   └── element-icons.732389de.ttf
    ├── index.html
    └── js
    │   ├── app.51aae14f.js
    │   ├── app.51aae14f.js.map
    │   ├── chunk-vendors.d43c2cc5.js
    │   └── chunk-vendors.d43c2cc5.js.map
├── example
    ├── .eslintignore
    ├── README.md
    ├── babel.config.js
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   └── HelloWorld.vue
    │   └── main.js
    └── yarn.lock
├── json-schema-editor.png
├── package.json
├── src
    ├── MockSelect
    │   └── index.vue
    ├── Schema
    │   ├── DropPlus.vue
    │   ├── SchemaArray.vue
    │   ├── SchemaItem.vue
    │   ├── SchemaObject.vue
    │   └── index.vue
    ├── common.js
    ├── dialog
    │   ├── ArrayDialog.vue
    │   ├── BasicDialog.vue
    │   ├── BooleanDialog.vue
    │   ├── NumberDialog.vue
    │   ├── ObjectDialog.vue
    │   ├── RawDialog.vue
    │   ├── StringDialog.vue
    │   └── index.js
    ├── event.js
    ├── index.js
    ├── json-editor
    │   ├── index.js
    │   └── src
    │   │   └── json-editor.vue
    ├── json-schema-editor.vue
    ├── jsonschema.scss
    └── utils.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | # local env files
 5 | .env.local
 6 | .env.*.local
 7 | 
 8 | # Log files
 9 | lerna-debug.log*
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | # local env files
 5 | .env.local
 6 | .env.*.local
 7 | docs/*
 8 | # Log files
 9 | lerna-debug.log*
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-json-schema-editor-visual
 2 | 
 3 | [![](https://img.shields.io/npm/v/vue-json-schema-editor-visual.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-schema-editor-visual)
 4 | 
 5 | A json-schema editor of high efficient and easy-to-use, base on Vue & Element UI.
 6 | 
 7 | 一个高效易用的基于 Vue + Element UI 的 json-schema 编辑器。 模仿 Yapi React 版本 [json-schema-editor-visual](https://github.com/YMFE/json-schema-editor-visual) 实现
 8 | 
 9 | ![](./json-schema-editor.png)
10 | 
11 | ## Usage
12 | 
13 | ```js
14 | import JsonSchemaEditor from 'vue-json-schema-editor-visual';
15 | 
16 | Vue.use(JsonSchemaEditor);
17 | ```
18 | 
19 | 在线 Demo
20 | 
21 | - [Sinokit json-schema-editor](http://blog.giscafer.com/sinokit/#/./components/jsonschema-editor)
22 | - [CodeSandbox Demo](https://codesandbox.io/s/practical-pond-jpteu?file=/src/App.vue)
23 | 
24 | ## API
25 | 
26 | ### Attributes
27 | 
28 | |         参数         | 说明                                  |   类型    | 默认值  |
29 | | :------------------: | ------------------------------------- | :-------: | :-----: |
30 | |       `schema`       | json schema 对象                      | `Object`  |    -    |
31 | |      `show-raw`      | 是否显示 RAW 弹窗，可查看 json schema | `Boolean` | `false` |
32 | |      `is-mock`       | 是否支持 mock （WIP）                 | `Boolean` | `false` |
33 | | `show-default-value` | 是否展示默认值输入框                  | `Boolean` | `false` |
34 | 
35 | ### Events
36 | 
37 | |    事件名称     | 说明                        |       回调参数        |
38 | | :-------------: | --------------------------- | :-------------------: |
39 | | `schema-change` | schema 发生变化时的回调函数 | 新的 json schema 对象 |
40 | 
41 | ## Related
42 | 
43 | - [json-schema-editor-vue](https://github.com/zyqwst/json-schema-editor-vue) vue + ant-design-vue
44 | 
45 | 其他 json editor
46 | 
47 | - [jsoneditor](https://github.com/josdejong/jsoneditor)
48 | - [json-editor/json-editor](https://github.com/json-editor/json-editor)
49 | - [jinkin1995/vue-json-edit](https://github.com/jinkin1995/vue-json-edit)
50 | 
51 | ## License
52 | 
53 | MIT
54 | 


--------------------------------------------------------------------------------
/build/config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var nodeExternals = require('webpack-node-externals');
 3 | 
 4 | externals = [
 5 |   Object.assign({
 6 |     vue: 'vue',
 7 |   }),
 8 |   nodeExternals(),
 9 | ];
10 | 
11 | exports.externals = externals;
12 | 
13 | exports.alias = {
14 |   main: path.resolve(__dirname, '../src'),
15 | };
16 | 
17 | exports.vue = {
18 |   root: 'Vue',
19 |   commonjs: 'vue',
20 |   commonjs2: 'vue',
21 |   amd: 'vue',
22 | };
23 | 
24 | exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js/;
25 | 


--------------------------------------------------------------------------------
/build/webpack.common.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | 
 5 | const config = require('./config');
 6 | 
 7 | module.exports = {
 8 |   mode: 'production',
 9 |   entry: {
10 |     app: ['./src/index.js'],
11 |   },
12 |   output: {
13 |     path: path.resolve(__dirname, '../dist'),
14 |     publicPath: '../dist/',
15 |     filename: 'json-schema-editor.min.js',
16 |     library: 'JsonSchemaEditor',
17 |     libraryTarget: 'umd',
18 |     umdNamedDefine: true,
19 |   },
20 |   resolve: {
21 |     extensions: ['.js', '.vue', '.json'],
22 |     alias: config.alias,
23 |     modules: ['node_modules'],
24 |   },
25 |   externals: {
26 |     vue: config.vue,
27 |   },
28 |   performance: {
29 |     hints: false,
30 |   },
31 |   stats: {
32 |     children: false,
33 |   },
34 |   optimization: {
35 |     minimize: true,
36 |   },
37 | 
38 |   module: {
39 |     rules: [
40 |       {
41 |         test: /\.(jsx?|babel|es6)$/,
42 |         include: process.cwd(),
43 |         exclude: config.jsexclude,
44 |         loader: 'babel-loader',
45 |       },
46 |       {
47 |         test: /\.vue$/,
48 |         loader: 'vue-loader',
49 |         options: {
50 |           compilerOptions: {
51 |             preserveWhitespace: false,
52 |           },
53 |         },
54 |       },
55 |       {
56 |         test: /\.css$/,
57 |         use: [
58 |           {
59 |             loader: 'style-loader', // 将 JS 字符串生成为 style 节点
60 |           },
61 |           {
62 |             loader: 'css-loader',
63 |             options: {
64 |               import: true,
65 |             },
66 |           },
67 |         ],
68 |       },
69 |       {
70 |         test: /\.scss$/,
71 |         loaders: ['style-loader', 'css-loader', 'sass-loader'],
72 |       },
73 |       {
74 |         test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
75 |         loader: 'url-loader',
76 |         query: {
77 |           limit: 10000,
78 |           name: path.posix.join('static', '[name].[hash:7].[ext]'),
79 |         },
80 |       },
81 |     ],
82 |   },
83 |   plugins: [new ProgressBarPlugin(), new VueLoaderPlugin()],
84 | };
85 | 


--------------------------------------------------------------------------------
/docs/css/app.478317e2.css:
--------------------------------------------------------------------------------
1 | #app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:100px}


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giscafer/vue-json-schema-editor-visual/72c7dd1b359ee8104844de17e73b00ba563c0b4d/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/fonts/element-icons.535877f5.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giscafer/vue-json-schema-editor-visual/72c7dd1b359ee8104844de17e73b00ba563c0b4d/docs/fonts/element-icons.535877f5.woff


--------------------------------------------------------------------------------
/docs/fonts/element-icons.732389de.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giscafer/vue-json-schema-editor-visual/72c7dd1b359ee8104844de17e73b00ba563c0b4d/docs/fonts/element-icons.732389de.ttf


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1" />
 7 |     <link rel="icon" href="/favicon.ico" />
 8 |     <base href="./" />
 9 |     <title>vue-demo</title>
10 |     <link href="./css/app.478317e2.css" rel="preload" as="style" />
11 |     <link href="./css/chunk-vendors.c470e980.css" rel="preload" as="style" />
12 |     <link href="./js/app.51aae14f.js" rel="preload" as="script" />
13 |     <link href="./js/chunk-vendors.d43c2cc5.js" rel="preload" as="script" />
14 |     <link href="./css/chunk-vendors.c470e980.css" rel="stylesheet" />
15 |     <link href="./css/app.478317e2.css" rel="stylesheet" />
16 |   </head>
17 |   <body>
18 |     <a
19 |       href="https://github.com/giscafer/vue-json-schema-editor-visual"
20 |       style="position: absolute; right: 0; top: 0;"
21 |       ><img
22 |         loading="lazy"
23 |         width="149"
24 |         height="149"
25 |         src="https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png?resize=149%2C149"
26 |         class="attachment-full size-full"
27 |         alt="Fork me on GitHub"
28 |         data-recalc-dims="1"/></a
29 |     ><noscript
30 |       ><strong
31 |         >We're sorry but vue-demo doesn't work properly without JavaScript
32 |         enabled. Please enable it to continue.</strong
33 |       ></noscript
34 |     >
35 |     <div id="app"></div>
36 |     <script src="./js/chunk-vendors.d43c2cc5.js"></script>
37 |     <script src="./js/app.51aae14f.js"></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/example/.eslintignore:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | **/*/*.min.js
4 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # vue-json-schema-editor-visual-demo
 2 | 
 3 | ## Project setup
 4 | 
 5 | ```
 6 | npm install
 7 | ```
 8 | 
 9 | ### Compiles and hot-reloads for development
10 | 
11 | ```
12 | npm run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | 
17 | ```
18 | npm run build
19 | ```
20 | 
21 | ### Lints and fixes files
22 | 
23 | ```
24 | npm run lint
25 | ```
26 | 
27 | ### Customize configuration
28 | 
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@sinokit/components": "^0.1.23",
12 |     "core-js": "^3.6.5",
13 |     "element-ui": "^2.15.1",
14 |     "vue": "^2.6.11"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-service": "~4.5.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giscafer/vue-json-schema-editor-visual/72c7dd1b359ee8104844de17e73b00ba563c0b4d/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <a
12 |       href="https://github.com/giscafer/vue-json-schema-editor-visual"
13 |       style="position: absolute; right: 0; top: 0;"
14 |       ><img
15 |         loading="lazy"
16 |         width="149"
17 |         height="149"
18 |         src="https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png?resize=149%2C149"
19 |         class="attachment-full size-full"
20 |         alt="Fork me on GitHub"
21 |         data-recalc-dims="1"
22 |     /></a>
23 |     <noscript>
24 |       <strong
25 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
26 |         properly without JavaScript enabled. Please enable it to
27 |         continue.</strong
28 |       >
29 |     </noscript>
30 |     <div id="app"></div>
31 |     <!-- built files will be auto injected -->
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/example/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>vue-json-schema-editor-visual example</h1>
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 | 
 6 |     <div style="margin-top: 120px">
 7 |       更多 demo 见：
 8 |       <a
 9 |         href="http://blog.giscafer.com/sinokit/#/./components/jsonschema-editor"
10 |         target="_blank"
11 |         rel="noopener noreferrer"
12 |         >JSON Schema 编辑器</a
13 |       >
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import HelloWorld from './components/HelloWorld.vue'
20 | 
21 | export default {
22 |   name: 'App',
23 |   components: {
24 |     HelloWorld,
25 |   },
26 | }
27 | </script>
28 | 
29 | <style>
30 | #app {
31 |   font-family: Avenir, Helvetica, Arial, sans-serif;
32 |   -webkit-font-smoothing: antialiased;
33 |   -moz-osx-font-smoothing: grayscale;
34 |   text-align: center;
35 |   color: #2c3e50;
36 |   margin-top: 100px;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/example/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giscafer/vue-json-schema-editor-visual/72c7dd1b359ee8104844de17e73b00ba563c0b4d/example/src/assets/logo.png


--------------------------------------------------------------------------------
/example/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 |   <div>
  4 |     <el-row>
  5 |       <el-col :span="6">
  6 |         <el-button size="mini" type="primary" @click="handleToggleSchema"
  7 |           >改变Schema</el-button
  8 |         >
  9 |         <el-button size="mini" type="info" @click="handlePageParams"
 10 |           >Toggle 分页参数</el-button
 11 |         >
 12 |       </el-col>
 13 |       <el-col :span="18">
 14 |         <s-json-schema-editor
 15 |           :key="schemaKey"
 16 |           :schema="schema"
 17 |           :show-default-value="true"
 18 |           :is-mock="false"
 19 |           @schema-change="onSchemaChange"
 20 |         />
 21 |       </el-col>
 22 |     </el-row>
 23 |   </div>
 24 | </template>
 25 | <script>
 26 | // demo解释器无法兼容 import
 27 | // import { warningToast, deepClone } from '@sinokit/utils';
 28 | export default {
 29 |   data() {
 30 |     return {
 31 |       schemaKey: '1222',
 32 |       // schema 对象
 33 |       schema: {},
 34 |       schema2: {
 35 |         type: 'object',
 36 |         title: 'title',
 37 |         properties: {
 38 |           field_1: {
 39 |             type: 'string',
 40 |           },
 41 |         },
 42 |       },
 43 |       schema3: {
 44 |         type: 'object',
 45 |         title: 'title',
 46 |         properties: {
 47 |           field_1: {
 48 |             type: 'string',
 49 |           },
 50 |           field_2: {
 51 |             type: 'object',
 52 |             properties: {
 53 |               field_3: {
 54 |                 type: 'object',
 55 |                 properties: {
 56 |                   field_4: {
 57 |                     type: 'array',
 58 |                     items: {
 59 |                       type: 'object',
 60 |                       properties: {
 61 |                         field_1fca9: {
 62 |                           type: 'string',
 63 |                         },
 64 |                         field_21b59: {
 65 |                           type: 'string',
 66 |                         },
 67 |                       },
 68 |                     },
 69 |                   },
 70 |                 },
 71 |                 required: ['field_4'],
 72 |               },
 73 |             },
 74 |             required: ['field_3'],
 75 |           },
 76 |         },
 77 |         required: ['field_1', 'field_2'],
 78 |       },
 79 |     }
 80 |   },
 81 |   created() {},
 82 |   mounted() {
 83 |     this.schema = this.schema3
 84 |     this.schemaKey = Date.now()
 85 |   },
 86 |   methods: {
 87 |     handleToggleSchema() {
 88 |       if (JSON.stringify(this.schema) === JSON.stringify(this.schema2)) {
 89 |         this.schema = Object.assign({}, this.schema3)
 90 |       } else {
 91 |         this.schema = this.schema2
 92 |         this.schema = Object.assign({}, this.schema2)
 93 |       }
 94 |       this.schemaKey = Date.now()
 95 |     },
 96 |     /**
 97 |      * 分页参数添加&删除
 98 |      */
 99 |     handlePageParams() {
100 |       if (this.schema.type !== 'object') {
101 |         /*  return warningToast(
102 |             '当前 Schema 不是对象类型，不能添加分页属性',
103 |             2000
104 |           ); */
105 |       }
106 |       const cloneSchema = this.schema
107 |       // const cloneSchema = deepClone(this.schema);
108 |       if (cloneSchema.properties.page) {
109 |         delete cloneSchema.properties.page
110 |         delete cloneSchema.properties.size
111 |         this.$nextTick(() => {
112 |           this.schema = cloneSchema
113 |           this.schemaKey = Date.now() + ''
114 |         })
115 |         return
116 |       }
117 |       const pageInfo = {
118 |         page: {
119 |           type: 'number',
120 |           default: 1,
121 |           description: '第几页',
122 |         },
123 |         size: {
124 |           type: 'number',
125 |           default: 10,
126 |           description: '每页记录数量',
127 |         },
128 |       }
129 |       Object.assign(cloneSchema.properties, pageInfo)
130 |       this.schema = cloneSchema
131 |       this.schemaKey = Date.now() + ''
132 |     },
133 |     onSchemaChange(v) {
134 |       this.schemaJsonString = JSON.stringify(v, null, 2)
135 |     },
136 |   },
137 | }
138 | </script>


--------------------------------------------------------------------------------
/example/src/main.js:
--------------------------------------------------------------------------------
 1 | import ElementUI from 'element-ui';
 2 | import 'element-ui/lib/theme-chalk/index.css';
 3 | import Vue from 'vue';
 4 | import JsonSchemaEditor from '../../dist/json-schema-editor.min.js';
 5 | import App from './App.vue';
 6 | 
 7 | Vue.use(ElementUI, { size: 'small' });
 8 | Vue.use(JsonSchemaEditor);
 9 | 
10 | Vue.config.productionTip = false;
11 | 
12 | new Vue({
13 |   render: (h) => h(App),
14 | }).$mount('#app');
15 | 


--------------------------------------------------------------------------------
/json-schema-editor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/giscafer/vue-json-schema-editor-visual/72c7dd1b359ee8104844de17e73b00ba563c0b4d/json-schema-editor.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-json-schema-editor-visual",
 3 |   "version": "0.2.6",
 4 |   "description": "A json-schema editor of high efficient and easy-to-use, base on Vue.",
 5 |   "keywords": [
 6 |     "json-schema"
 7 |   ],
 8 |   "author": "giscafer <giscafer@outlook.com>",
 9 |   "homepage": "https://github.com/giscafer/vue-json-schema-editor-visual",
10 |   "license": "MIT",
11 |   "main": "dist/json-schema-editor.min.js",
12 |   "unpkg": "dist/json-schema-editor.min.js",
13 |   "directories": {
14 |     "dist": "dist",
15 |     "src": "src",
16 |     "test": "__tests__"
17 |   },
18 |   "files": [
19 |     "dist",
20 |     "src"
21 |   ],
22 |   "publishConfig": {
23 |     "access": "public",
24 |     "registry": "https://registry.npmjs.org/"
25 |   },
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "https://github.com/giscafer/vue-json-schema-editor-visual.git"
29 |   },
30 |   "scripts": {
31 |     "clean": "rimraf dist",
32 |     "build": "npm run clean && webpack --config build/webpack.common.js --optimize-max-chunks 1",
33 |     "lint": "eslint  lib/**/* build/**/* --quiet",
34 |     "test": "echo \"Error: run tests from root\" && exit 1"
35 |   },
36 |   "dependencies": {
37 |     "codemirror": "^5.58.1",
38 |     "element-ui": "2.13.2",
39 |     "json-schema-faker": "^0.5.0-rcv.24",
40 |     "lodash": "^4.17.19",
41 |     "mockjs": "^1.1.0",
42 |     "vue": "^2.6.11",
43 |     "json-templater": "^1.2.0",
44 |     "jsonlint": "^1.6.3"
45 |   },
46 |   "devDependencies": {
47 |     "@babel/core": "^7.11.6",
48 |     "babel": "^6.23.0",
49 |     "babel-loader": "^8.1.0",
50 |     "css-loader": "^4.1.0",
51 |     "node-sass": "^4.14.1",
52 |     "progress-bar-webpack-plugin": "^2.1.0",
53 |     "sass-loader": "^9.0.2",
54 |     "script-loader": "^0.7.2",
55 |     "style-loader": "^1.2.1",
56 |     "terser-webpack-plugin": "^3.0.8",
57 |     "uppercamelcase": "^3.0.0",
58 |     "url-loader": "^4.1.0",
59 |     "vue-loader": "^15.9.3",
60 |     "vue-template-compiler": "^2.6.12",
61 |     "webpack": "^4.44.0",
62 |     "webpack-cli": "^3.3.12",
63 |     "webpack-node-externals": "^2.5.0"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/MockSelect/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-autocomplete
 4 |       v-model="mockValue"
 5 |       class="certain-category-search"
 6 |       :fetch-suggestions="querySearchAsync"
 7 |       placeholder="mock"
 8 |       :value="schema.mock ? schema.mock.mock : ''"
 9 |       :disabled="schema.type === 'object' || schema.type === 'array'"
10 |       @change="handleChange"
11 |     >
12 |       <el-button slot="append" icon="el-icon-edit" @click="showEdit"></el-button>
13 |     </el-autocomplete>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: 'MockSelect',
20 |   props: {
21 |     schema: {
22 |       type: Object,
23 |       default: () => {}
24 |     },
25 |     mock: {
26 |       type: Array,
27 |       default: () => []
28 |     }
29 |   },
30 |   data() {
31 |     return {
32 |       mockValue: ''
33 |     }
34 |   },
35 |   created() {},
36 |   mounted() {},
37 |   methods: {
38 |     showEdit() {
39 |       this.$emit('showEdit')
40 |     },
41 |     handleChange(e) {
42 |       this.$emit('change', e)
43 |     },
44 |     querySearchAsync(queryString, cb) {
45 |       const arr = this.mock || []
46 |       const results = queryString
47 |         ? arr.filter(this.createStateFilter(queryString))
48 |         : arr
49 | 
50 |       cb(results)
51 |     },
52 |     createStateFilter(queryString) {
53 |       return state => {
54 |         return (
55 |           state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
56 |         )
57 |       }
58 |     }
59 |   }
60 | }
61 | </script>
62 | 
63 | <style lang="scss" scoped>
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/Schema/DropPlus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-tooltip placement="top" content="添加兄弟/子节点">
 3 |     <el-dropdown trigger="click">
 4 |       <i class="el-icon-plus plus"></i>
 5 |       <el-dropdown-menu slot="dropdown">
 6 |         <el-dropdown-item>
 7 |           <span @click="addFieldAction({type:'add-field',isChild:false})">兄弟节点</span>
 8 |         </el-dropdown-item>
 9 |         <el-dropdown-item>
10 |           <span @click="addFieldAction({type:'add-field',isChild:true})">子节点</span>
11 |         </el-dropdown-item>
12 |       </el-dropdown-menu>
13 |     </el-dropdown>
14 |   </el-tooltip>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: 'DropPlus',
20 |   components: {},
21 |   props: {
22 |     prefix: {
23 |       type: Array,
24 |       default: () => []
25 |     },
26 |     name: {
27 |       type: String,
28 |       default: ''
29 |     }
30 |   },
31 |   data() {
32 |     return {}
33 |   },
34 |   created() {},
35 |   mounted() {},
36 |   methods: {
37 |     addFieldAction(...args) {
38 |       this.$emit('add-field', ...args)
39 |     }
40 |   }
41 | }
42 | </script>
43 | 
44 | <style lang="scss" scoped>
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/Schema/SchemaArray.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="array-type">
  3 |     <el-row type="flex" align="middle">
  4 |       <el-col
  5 |         :span="8"
  6 |         class="col-item name-item col-item-name"
  7 |         :style="tagPaddingLeftStyle"
  8 |       >
  9 |         <el-row type="flex" justify="space-around" align="middle">
 10 |           <el-col :span="2" class="down-style-col">
 11 |             <span
 12 |               v-if="items.type === 'object'"
 13 |               class="down-style"
 14 |               @click="handleClickIcon"
 15 |             >
 16 |               <i v-if="!showIcon" class="el-icon-caret-bottom icon-object"></i>
 17 |               <i v-else class="el-icon-caret-right icon-object"></i>
 18 |             </span>
 19 |           </el-col>
 20 |           <el-col :span="20">
 21 |             <el-input disabled value="Items" size="small" />
 22 |           </el-col>
 23 |           <el-col :span="2" style="text-align: center">
 24 |             <el-tooltip placement="top" content="全选">
 25 |               <el-checkbox disabled />
 26 |             </el-tooltip>
 27 |           </el-col>
 28 |         </el-row>
 29 |       </el-col>
 30 | 
 31 |       <el-col :span="3" class="col-item col-item-type">
 32 |         <el-select
 33 |           :value="items.type"
 34 |           size="small"
 35 |           class="type-select-style"
 36 |           @change="handleChangeType"
 37 |         >
 38 |           <el-option
 39 |             v-for="item in schemaTypes"
 40 |             :key="item"
 41 |             :value="item"
 42 |             :label="item"
 43 |           ></el-option>
 44 |         </el-select>
 45 |       </el-col>
 46 | 
 47 |       <el-col v-if="isMock" :span="3" class="col-item col-item-mock">
 48 |         <MockSelect
 49 |           :schema="items"
 50 |           @showEdit="handleAction({ eventType: 'mock-edit' })"
 51 |           @change="handleChangeMock"
 52 |         />
 53 |       </el-col>
 54 | 
 55 |       <el-col
 56 |         v-if="showTitle"
 57 |         :span="isMock ? 4 : 5"
 58 |         class="col-item col-item-mock"
 59 |       >
 60 |         <el-input v-model="items.title" placeholder="标题" size="small">
 61 |           <i
 62 |             slot="append"
 63 |             class="el-icon-edit"
 64 |             @click="handleAction({ eventType: 'show-edit', field: 'title' })"
 65 |           ></i>
 66 |         </el-input>
 67 |       </el-col>
 68 |       <el-col
 69 |         v-if="!showTitle && showDefaultValue"
 70 |         :span="isMock ? 4 : 5"
 71 |         class="col-item col-item-mock"
 72 |       >
 73 |         <el-input v-model="items.default" placeholder="默认值" size="small">
 74 |           <i
 75 |             slot="append"
 76 |             class="el-icon-edit"
 77 |             @click="handleAction({ eventType: 'show-edit', field: 'default' })"
 78 |           ></i>
 79 |         </el-input>
 80 |       </el-col>
 81 | 
 82 |       <el-col :span="isMock ? 4 : 5" class="col-item col-item-desc">
 83 |         <el-input v-model="items.description" placeholder="备注" size="small">
 84 |           <i
 85 |             slot="append"
 86 |             class="el-icon-edit"
 87 |             @click="
 88 |               handleAction({ eventType: 'show-edit', field: 'description' })
 89 |             "
 90 |           ></i>
 91 |         </el-input>
 92 |       </el-col>
 93 |       <el-col :span="isMock ? 2 : 3" class="col-item col-item-setting">
 94 |         <span
 95 |           class="adv-set"
 96 |           @click="
 97 |             handleAction({ eventType: 'setting', schemaType: items.type })
 98 |           "
 99 |         >
100 |           <el-tooltip placement="top" content="高级设置">
101 |             <i class="el-icon-setting"></i>
102 |           </el-tooltip>
103 |         </span>
104 | 
105 |         <span
106 |           v-if="items.type === 'object'"
107 |           @click="handleAction({ eventType: 'add-field', isChild: true })"
108 |         >
109 |           <el-tooltip placement="top" content="添加子节点">
110 |             <i class="el-icon-plus plus"></i>
111 |           </el-tooltip>
112 |         </span>
113 |       </el-col>
114 |     </el-row>
115 | 
116 |     <div class="option-formStyle">
117 |       <template v-if="items.type === 'array'">
118 |         <SchemaArray
119 |           :prefix="prefixArray"
120 |           :data="items"
121 |           :is-mock="isMock"
122 |           :show-title="showTitle"
123 |           :show-default-value="showDefaultValue"
124 |           :editor-id="editorId"
125 |         />
126 |       </template>
127 |       <template v-if="items.type === 'object' && !showIcon">
128 |         <SchemaObject
129 |           :prefix="nameArray"
130 |           :data="items"
131 |           :is-mock="isMock"
132 |           :show-title="showTitle"
133 |           :show-default-value="showDefaultValue"
134 |           :editor-id="editorId"
135 |         />
136 |       </template>
137 |     </div>
138 |   </div>
139 | </template>
140 | <script>
141 | import isUndefined from 'lodash/isUndefined'
142 | import MockSelect from '../MockSelect'
143 | import SchemaObject from './SchemaObject'
144 | import { SCHEMA_TYPE } from '../utils'
145 | export default {
146 |   name: 'SchemaArray',
147 |   components: { MockSelect, SchemaObject },
148 |   props: {
149 |     isMock: {
150 |       type: Boolean,
151 |       default: false,
152 |     },
153 |     showTitle: {
154 |       type: Boolean,
155 |       default: false,
156 |     },
157 |     showDefaultValue: { type: Boolean, default: false },
158 |     editorId: {
159 |       type: String,
160 |       default: 'editor_id',
161 |     },
162 |     name: {
163 |       type: String,
164 |       default: '',
165 |     },
166 |     prefix: {
167 |       type: Array,
168 |       default: () => [],
169 |     },
170 |     data: {
171 |       type: Object,
172 |       default: () => {},
173 |     },
174 |     action: {
175 |       type: Function,
176 |       default: () => () => {},
177 |     },
178 |   },
179 |   data() {
180 |     return {
181 |       tagPaddingLeftStyle: {},
182 |       schemaTypes: SCHEMA_TYPE,
183 |       items: this.data.items,
184 |       showIcon: false,
185 |     }
186 |   },
187 | 
188 |   computed: {
189 |     nameArray() {
190 |       return [].concat(this.prefixArray, 'properties')
191 |     },
192 |     prefixArray() {
193 |       return [].concat(this.prefix, 'items')
194 |     },
195 |   },
196 |   beforeMount() {
197 |     const length = this.prefix.filter((name) => name !== 'properties').length
198 |     this.tagPaddingLeftStyle = {
199 |       paddingLeft: `${20 * (length + 1)}px`,
200 |     }
201 |   },
202 |   methods: {
203 |     isUndefined() {
204 |       return isUndefined
205 |     },
206 |     handleClickIcon() {
207 |       this.showIcon = !this.showIcon
208 |     },
209 |     handleAction(opts) {
210 |       const { prefix, name } = this
211 |       this.$jsEditorEvent.emit(`schema-update-${this.editorId}`, {
212 |         prefix,
213 |         name: name || 'items',
214 |         ...opts,
215 |       })
216 |     },
217 |     handleChangeMock() {},
218 |     handleChangeType(value) {
219 |       console.log(value)
220 |       this.handleAction({ eventType: 'schema-type', value })
221 |     },
222 |   },
223 | }
224 | </script>
225 | 


--------------------------------------------------------------------------------
/src/Schema/SchemaItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-row type="flex" align="middle">
  4 |       <el-col
  5 |         :span="8"
  6 |         class="col-item name-item col-item-name"
  7 |         :style="tagPaddingLeftStyle"
  8 |       >
  9 |         <el-row type="flex" justify="space-around" align="middle">
 10 |           <el-col :span="2" class="down-style-col">
 11 |             <span
 12 |               v-if="value.type === 'object'"
 13 |               class="down-style"
 14 |               @click="handleClickIcon"
 15 |             >
 16 |               <i v-if="showIcon" class="el-icon-caret-bottom icon-object"></i>
 17 |               <i v-if="!showIcon" class="el-icon-caret-right icon-object"></i>
 18 |             </span>
 19 |           </el-col>
 20 |           <el-col :span="20" class="el-input--small">
 21 |             <input
 22 |               size="small"
 23 |               class="el-input el-input__inner"
 24 |               :class="{ 'is-disabled': value.disabled }"
 25 |               :value="name"
 26 |               :disabled="value.disabled"
 27 |               @change="handleNameChange"
 28 |             />
 29 |           </el-col>
 30 |           <el-col :span="2" style="text-align: center">
 31 |             <el-tooltip placement="top" content="是否必须">
 32 |               <el-checkbox
 33 |                 :checked="
 34 |                   (data.required && data.required.indexOf(name) != -1) || false
 35 |                 "
 36 |                 @change="handleEnableRequire"
 37 |               ></el-checkbox>
 38 |             </el-tooltip>
 39 |           </el-col>
 40 |         </el-row>
 41 |       </el-col>
 42 | 
 43 |       <el-col :span="3" class="col-item col-item-type">
 44 |         <el-select
 45 |           size="small"
 46 |           :value="value.type"
 47 |           :disabled="value.disabled && !value.canChangeType"
 48 |           class="type-select-style"
 49 |           @change="handleChangeType"
 50 |         >
 51 |           <el-option
 52 |             v-for="item in schemaTypes"
 53 |             :key="item"
 54 |             :value="item"
 55 |             :label="item"
 56 |           ></el-option>
 57 |         </el-select>
 58 |       </el-col>
 59 | 
 60 |       <el-col v-if="isMock" :span="3" class="col-item col-item-mock">
 61 |         <MockSelect
 62 |           :schema="value"
 63 |           @showEdit="handleAction({ eventType: 'mock-edit' })"
 64 |           @change="handleChangeMock"
 65 |         />
 66 |       </el-col>
 67 | 
 68 |       <el-col
 69 |         v-if="showTitle"
 70 |         :span="isMock ? 4 : 5"
 71 |         class="col-item col-item-mock"
 72 |       >
 73 |         <el-input
 74 |           v-model="value.title"
 75 |           :disabled="value.disabled"
 76 |           size="small"
 77 |           placeholder="标题"
 78 |         >
 79 |           <i
 80 |             slot="append"
 81 |             class="el-icon-edit"
 82 |             @click="handleAction({ eventType: 'show-edit', field: 'title' })"
 83 |           ></i>
 84 |         </el-input>
 85 |       </el-col>
 86 |       <!-- 默认值输入框 -->
 87 |       <el-col
 88 |         v-if="!showTitle && showDefaultValue"
 89 |         :span="isMock ? 4 : 5"
 90 |         class="col-item col-item-mock"
 91 |       >
 92 |         <el-input
 93 |           v-model.trim="value.default"
 94 |           placeholder="默认值"
 95 |           size="small"
 96 |           :disabled="
 97 |             value.type === 'object' || value.type === 'array' || value.disabled
 98 |           "
 99 |         >
100 |           <i
101 |             slot="append"
102 |             class="el-icon-edit"
103 |             @click="handleAction({ eventType: 'show-edit', field: 'default' })"
104 |           ></i>
105 |         </el-input>
106 |       </el-col>
107 | 
108 |       <el-col :span="isMock ? 4 : 5" class="col-item col-item-desc">
109 |         <el-input
110 |           v-model="value.description"
111 |           :disabled="value.disabled"
112 |           size="small"
113 |           placeholder="备注"
114 |         >
115 |           <i
116 |             slot="append"
117 |             class="el-icon-edit"
118 |             @click="
119 |               handleAction({ eventType: 'show-edit', field: 'description' })
120 |             "
121 |           ></i>
122 |         </el-input>
123 |       </el-col>
124 | 
125 |       <el-col :span="isMock ? 2 : 3" class="col-item col-item-setting">
126 |         <span
127 |           class="adv-set"
128 |           @click="
129 |             handleAction({ eventType: 'setting', schemaType: value.type })
130 |           "
131 |         >
132 |           <el-tooltip placement="top" content="高级设置">
133 |             <i class="el-icon-setting"></i>
134 |           </el-tooltip>
135 |         </span>
136 |         <span
137 |           class="delete-item"
138 |           :class="{ hidden: value.disabled }"
139 |           @click="handleAction({ eventType: 'delete-field' })"
140 |         >
141 |           <i class="el-icon-close close"></i>
142 |         </span>
143 |         <DropPlus
144 |           v-if="value.type === 'object'"
145 |           :prefix="prefix"
146 |           :name="name"
147 |           @add-field="handleAction"
148 |         />
149 |         <span
150 |           v-if="value.type !== 'object'"
151 |           @click="handleAction({ eventType: 'add-field', isChild: false })"
152 |         >
153 |           <el-tooltip placement="top" content="添加兄弟节点">
154 |             <i class="el-icon-plus plus"></i>
155 |           </el-tooltip>
156 |         </span>
157 |       </el-col>
158 |     </el-row>
159 |     <div class="option-formStyle">
160 |       <!-- {mapping(prefixArray, value, showEdit, showAdv)} -->
161 |       <template v-if="value.type === 'array'">
162 |         <schema-array
163 |           :prefix="prefixArray"
164 |           :data="value"
165 |           :is-mock="isMock"
166 |           :show-title="showTitle"
167 |           :show-default-value="showDefaultValue"
168 |           :editor-id="editorId"
169 |         />
170 |       </template>
171 |       <template v-if="value.type === 'object' && showIcon">
172 |         <schema-object
173 |           :prefix="nameArray"
174 |           :data="value"
175 |           :is-mock="isMock"
176 |           :show-title="showTitle"
177 |           :show-default-value="showDefaultValue"
178 |           :editor-id="editorId"
179 |         />
180 |       </template>
181 |     </div>
182 |   </div>
183 | </template>
184 | <script>
185 | import isUndefined from 'lodash/isUndefined'
186 | import MockSelect from '../MockSelect'
187 | import DropPlus from './DropPlus'
188 | import SchemaObject from './SchemaObject'
189 | import SchemaArray from './SchemaArray'
190 | import { SCHEMA_TYPE } from '../utils'
191 | export default {
192 |   name: 'SchemaItem',
193 |   components: {
194 |     MockSelect,
195 |     DropPlus,
196 |     'schema-array': SchemaArray,
197 |     'schema-object': SchemaObject,
198 |   },
199 |   props: {
200 |     isMock: {
201 |       type: Boolean,
202 |       default: true,
203 |     },
204 |     showTitle: {
205 |       type: Boolean,
206 |       default: false,
207 |     },
208 |     showDefaultValue: { type: Boolean, default: false },
209 |     editorId: {
210 |       type: String,
211 |       default: 'editor_id',
212 |     },
213 |     name: {
214 |       type: String,
215 |       default: '',
216 |     },
217 |     prefix: {
218 |       type: Array,
219 |       default: () => [],
220 |     },
221 |     data: {
222 |       type: Object,
223 |       default: () => {},
224 |     },
225 |   },
226 |   data() {
227 |     return {
228 |       showIcon: true,
229 |       tagPaddingLeftStyle: {},
230 |       schemaTypes: SCHEMA_TYPE,
231 |       value: this.data.properties[this.name],
232 |     }
233 |   },
234 | 
235 |   computed: {
236 |     nameArray() {
237 |       const prefixArray = [].concat(this.prefix, this.name)
238 |       return [].concat(prefixArray, 'properties')
239 |     },
240 |     prefixArray() {
241 |       return [].concat(this.prefix, this.name)
242 |       // return [].concat(this.prefix, 'items')
243 |     },
244 |   },
245 |   beforeMount() {
246 |     const length = this.prefix.filter((name) => name !== 'properties').length
247 |     this.tagPaddingLeftStyle = {
248 |       paddingLeft: `${20 * (length + 1)}px`,
249 |     }
250 |   },
251 |   methods: {
252 |     isUndefined() {
253 |       return isUndefined
254 |     },
255 |     handleClickIcon() {
256 |       this.showIcon = !this.showIcon
257 |     },
258 | 
259 |     handleAction(options) {
260 |       const { prefix, name } = this
261 |       this.$jsEditorEvent.emit(`schema-update-${this.editorId}`, {
262 |         eventType: 'add-field',
263 |         prefix,
264 |         name,
265 |         ...options,
266 |       })
267 |     },
268 | 
269 |     handleNameChange(e) {
270 |       this.handleAction({
271 |         eventType: 'update-field-name',
272 |         value: e.target.value,
273 |       })
274 |     },
275 |     handleEnableRequire(e) {
276 |       const { prefix, name } = this
277 |       this.$jsEditorEvent.emit(`schema-update-${this.editorId}`, {
278 |         eventType: 'toggle-required',
279 |         prefix,
280 |         name,
281 |         required: e,
282 |       })
283 |     },
284 |     handleChangeMock() {},
285 |     handleChangeType(value) {
286 |       this.handleAction({ eventType: 'schema-type', value })
287 |     },
288 |   },
289 | }
290 | </script>
291 | 


--------------------------------------------------------------------------------
/src/Schema/SchemaObject.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="object-style">
 3 |     <schema-item
 4 |       v-for="(name,index) in propertyKeys"
 5 |       :key="index"
 6 |       :data="data"
 7 |       :name="name"
 8 |       :prefix="prefix"
 9 |       :is-mock="isMock"
10 |       :show-title="showTitle"
11 |       :show-default-value="showDefaultValue"
12 |       :editor-id="editorId"
13 |     ></schema-item>
14 |   </div>
15 | </template>
16 | <script>
17 | export default {
18 |   name: 'SchemaObject',
19 |   components: { 'schema-item': () => import('./SchemaItem.vue') },
20 |   props: {
21 |     prefix: {
22 |       type: Array,
23 |       default: () => []
24 |     },
25 |     data: {
26 |       type: Object,
27 |       default: () => {}
28 |     },
29 |     isMock: { type: Boolean, default: false },
30 |     showTitle: {
31 |       type: Boolean,
32 |       default: false
33 |     },
34 |     showDefaultValue: { type: Boolean, default: false },
35 |     editorId: {
36 |       type: String,
37 |       default: 'editor_id'
38 |     }
39 |   },
40 |   data() {
41 |     return {
42 |       tagPaddingLeftStyle: {},
43 |       items: this.data.items
44 |     }
45 |   },
46 | 
47 |   computed: {
48 |     propertyKeys() {
49 |       return Object.keys(this.data.properties)
50 |     }
51 |   },
52 |   methods: {}
53 | }
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/Schema/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="schema-content" v-bind="$attrs">
 3 |     <template v-if="data.type==='array'">
 4 |       <schema-array
 5 |         :prefix="name"
 6 |         :data="data"
 7 |         :is-mock="isMock"
 8 |         :show-title="showTitle"
 9 |         :show-default-value="showDefaultValue"
10 |         :editor-id="editorId"
11 |       />
12 |     </template>
13 |     <template v-if="data.type==='object'">
14 |       <schema-object
15 |         :prefix="nameArray"
16 |         :data="data"
17 |         :is-mock="isMock"
18 |         :show-title="showTitle"
19 |         :show-default-value="showDefaultValue"
20 |         :editor-id="editorId"
21 |       />
22 |     </template>
23 |   </div>
24 | </template>
25 | <script>
26 | import SchemaObject from './SchemaObject'
27 | import SchemaArray from './SchemaArray'
28 | export default {
29 |   name: 'SchemaJson',
30 |   components: {
31 |     'schema-array': SchemaArray,
32 |     'schema-object': SchemaObject
33 |   },
34 |   inheritAttrs: false,
35 |   props: {
36 |     data: {
37 |       type: Object,
38 |       default: () => {
39 |         return []
40 |       }
41 |     },
42 |     isMock: { type: Boolean, default: false },
43 |     showTitle: {
44 |       type: Boolean,
45 |       default: false
46 |     },
47 |     showDefaultValue: { type: Boolean, default: false },
48 |     editorId: {
49 |       type: String,
50 |       default: 'editor_id'
51 |     }
52 |   },
53 |   data() {
54 |     return {
55 |       name: []
56 |     }
57 |   },
58 |   computed: {
59 |     nameArray() {
60 |       return [].concat(this.name, 'properties')
61 |     }
62 |   },
63 |   methods: {}
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/common.js:
--------------------------------------------------------------------------------
 1 | const Mock = require('mockjs');
 2 | const jsf = require('json-schema-faker');
 3 | 
 4 | jsf.extend('mock', function() {
 5 |   return {
 6 |     mock: function(xx) {
 7 |       return Mock.mock(xx);
 8 |     }
 9 |   };
10 | });
11 | 
12 | const defaultOptions = {
13 |   failOnInvalidTypes: false,
14 |   failOnInvalidFormat: false,
15 |   alwaysFakeOptionals: true,
16 |   useDefaultValue: true
17 | };
18 | 
19 | export const schemaToJson = (schema, options = {}) => {
20 |   Object.assign(options, defaultOptions);
21 | 
22 |   jsf.option(options);
23 |   let result;
24 |   try {
25 |     result = jsf.generate(schema);
26 |   } catch (err) {
27 |     result = err.message;
28 |   }
29 |   jsf.option(defaultOptions);
30 |   return result;
31 | };
32 | 


--------------------------------------------------------------------------------
/src/dialog/ArrayDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     title="基础设置（数组字段）"
 4 |     width="700px"
 5 |     v-bind="$attrs"
 6 |     v-on="$listeners"
 7 |     @open="onOpen"
 8 |     @close="onClose"
 9 |   >
10 |     <el-row :gutter="15">
11 |       <el-form ref="elForm" :model="formData" size="small" label-width="100px">
12 |         <el-col :span="12">
13 |           <el-form-item label="最小元素个数" prop="minItems">
14 |             <el-input-number
15 |               v-model="formData.minItems"
16 |               placeholder="请输入"
17 |               :min="0"
18 |               :step="1"
19 |             ></el-input-number>
20 |           </el-form-item>
21 |         </el-col>
22 |         <el-col :span="12">
23 |           <el-form-item label="最大元素个数" prop="maxItems">
24 |             <el-input-number
25 |               v-model="formData.maxItems"
26 |               placeholder="请输入"
27 |               :max="100000"
28 |               :step="1"
29 |             ></el-input-number>
30 |           </el-form-item>
31 |         </el-col>
32 |       </el-form>
33 |     </el-row>
34 |     <div slot="footer">
35 |       <el-button @click="close">取消</el-button>
36 |       <el-button type="primary" @click="handleConfirm">确定</el-button>
37 |     </div>
38 |   </el-dialog>
39 | </template>
40 | 
41 | <script>
42 | import { getValidFormVal } from '../utils'
43 | export default {
44 |   name: 'ArrayDialog',
45 |   inheritAttrs: false,
46 |   props: { initData: { type: Object, default: () => ({}) } },
47 | 
48 |   data() {
49 |     return {
50 |       formData: {
51 |         minItems: undefined,
52 |         maxItems: undefined,
53 |       },
54 |     }
55 |   },
56 |   created() {},
57 |   methods: {
58 |     onOpen() {
59 |       const { minItems, maxItems } = this.initData
60 |       Object.assign(this.formData, { minItems, maxItems })
61 |     },
62 |     onClose() {
63 |       this.$refs['elForm'].resetFields()
64 |     },
65 |     close() {
66 |       this.$emit('update:visible', false)
67 |     },
68 |     handleConfirm() {
69 |       this.$refs['elForm'].validate((valid) => {
70 |         if (!valid) return
71 |         const newData = getValidFormVal(this.formData)
72 |         this.$jsEditorEvent.emit(`schema-update-${this.initData.editorId}`, {
73 |           eventType: 'save-setting',
74 |           ...this.initData, // 之前的参数
75 |           newData, // 设置数据
76 |         })
77 |         this.close()
78 |       })
79 |     },
80 |   },
81 | }
82 | </script>
83 | 


--------------------------------------------------------------------------------
/src/dialog/BasicDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-dialog :title="initData.title" :visible.sync="visible" width="30%">
 4 |       <el-input
 5 |         v-model="data"
 6 |         type="textarea"
 7 |         :rows="3"
 8 |         placeholder="请输入内容"
 9 |         style="margin-bottom: 15px"
10 |       ></el-input>
11 |       <span slot="footer" class="dialog-footer">
12 |         <el-button @click="close">取 消</el-button>
13 |         <el-button type="primary" @click="handleOk">确 定</el-button>
14 |       </span>
15 |     </el-dialog>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'BasicDialog',
22 |   props: {
23 |     visible: { type: Boolean, default: false },
24 |     initData: {
25 |       type: Object,
26 |       default: () => ({
27 |         title: '提示',
28 |         value: '',
29 |       }),
30 |     },
31 |   },
32 |   data() {
33 |     return {
34 |       dialogVisible: false,
35 |       data: '',
36 |     }
37 |   },
38 | 
39 |   watch: {
40 |     initData: {
41 |       handler() {
42 |         this.data = this.initData.value
43 |       },
44 |       deep: true,
45 |     },
46 |   },
47 |   created() {},
48 |   methods: {
49 |     close() {
50 |       this.$emit('update:visible', false)
51 |     },
52 |     handleOk() {
53 |       this.initData.value = this.data
54 |       this.$jsEditorEvent.emit(`schema-update-${this.initData.editorId}`, {
55 |         eventType: 'save-showedit',
56 |         ...this.initData,
57 |       })
58 |       this.close()
59 |     },
60 |   },
61 | }
62 | </script>
63 | 
64 | <style lang="scss" scoped>
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/dialog/BooleanDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     title="基础设置（布尔型字段）"
 4 |     width="600px"
 5 |     v-bind="$attrs"
 6 |     v-on="$listeners"
 7 |     @open="onOpen"
 8 |     @close="onClose"
 9 |   >
10 |     <el-form ref="elForm" :model="formData" size="small" label-width="100px">
11 |       <el-form-item label="默认值：" prop="default">
12 |         <el-select
13 |           v-model="formData.default"
14 |           placeholder="请下拉选择"
15 |           clearable
16 |           :style="{ width: '60%' }"
17 |         >
18 |           <el-option
19 |             v-for="(item, index) in defaultOptions"
20 |             :key="index"
21 |             :label="item.label"
22 |             :value="item.value"
23 |             :disabled="item.disabled"
24 |           ></el-option>
25 |         </el-select>
26 |       </el-form-item>
27 |     </el-form>
28 |     <div slot="footer">
29 |       <el-button @click="close">取消</el-button>
30 |       <el-button type="primary" @click="handleConfirm">确定</el-button>
31 |     </div>
32 |   </el-dialog>
33 | </template>
34 | <script>
35 | import { getValidFormVal } from '../utils'
36 | export default {
37 |   name: 'BooleanDialog',
38 |   inheritAttrs: false,
39 |   props: { initData: { type: Object, default: () => ({}) } },
40 | 
41 |   data() {
42 |     return {
43 |       formData: {
44 |         default: undefined,
45 |       },
46 |       defaultOptions: [
47 |         {
48 |           label: 'true',
49 |           value: true,
50 |         },
51 |         {
52 |           label: 'false',
53 |           value: false,
54 |         },
55 |       ],
56 |     }
57 |   },
58 |   created() {},
59 |   methods: {
60 |     onOpen() {
61 |       Object.assign(this.formData, { default: this.initData.default })
62 |     },
63 |     onClose() {
64 |       this.$refs['elForm'].resetFields()
65 |     },
66 |     close() {
67 |       this.$emit('update:visible', false)
68 |     },
69 |     handleConfirm() {
70 |       this.$refs['elForm'].validate((valid) => {
71 |         if (!valid) return
72 |         const newData = getValidFormVal(this.formData)
73 |         this.$jsEditorEvent.emit(`schema-update-${this.initData.editorId}`, {
74 |           eventType: 'save-setting',
75 |           ...this.initData, // 之前的参数
76 |           newData, // 设置数据
77 |         })
78 |         this.close()
79 |       })
80 |     },
81 |   },
82 | }
83 | </script>
84 | 


--------------------------------------------------------------------------------
/src/dialog/NumberDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-dialog
  4 |       title="基础设置（数值型）"
  5 |       width="700px"
  6 |       v-bind="$attrs"
  7 |       v-on="$listeners"
  8 |       @open="onOpen"
  9 |       @close="onClose"
 10 |     >
 11 |       <el-row :gutter="15">
 12 |         <el-form
 13 |           ref="elForm"
 14 |           :model="formData"
 15 |           :rules="rules"
 16 |           size="small"
 17 |           label-width="100px"
 18 |         >
 19 |           <el-col :span="24">
 20 |             <el-form-item label="默认值：" prop="default">
 21 |               <el-input
 22 |                 v-model="formData.default"
 23 |                 type="number"
 24 |                 placeholder="请输入默认值"
 25 |                 :maxlength="15"
 26 |                 clearable
 27 |                 :style="{ width: '100%' }"
 28 |               ></el-input>
 29 |             </el-form-item>
 30 |           </el-col>
 31 |           <el-col :span="12">
 32 |             <el-form-item label="最小值：" prop="minLength">
 33 |               <el-input-number
 34 |                 v-model="formData.minLength"
 35 |                 style="width: 160px"
 36 |                 placeholder="请输入"
 37 |                 :min="-9007199254740992"
 38 |                 :step="1"
 39 |               ></el-input-number>
 40 |             </el-form-item>
 41 |           </el-col>
 42 |           <el-col :span="12">
 43 |             <el-form-item label="最大值:" prop="maxLength">
 44 |               <el-input-number
 45 |                 v-model="formData.maxLength"
 46 |                 style="width: 160px"
 47 |                 placeholder="请输入"
 48 |                 :step="1"
 49 |                 :max="9007199254740992"
 50 |               ></el-input-number>
 51 |             </el-form-item>
 52 |           </el-col>
 53 |           <el-col :span="24">
 54 |             <el-row>
 55 |               <el-col :span="3">
 56 |                 <div style="line-height: 80px; text-align: right">
 57 |                   <label for>枚举</label>
 58 |                   <el-checkbox v-model="enableEnum">:</el-checkbox>
 59 |                 </div>
 60 |               </el-col>
 61 |               <el-col :span="21" style="padding-left: 18px">
 62 |                 <el-form-item label-width="0" prop="enum">
 63 |                   <el-input
 64 |                     v-model="formData.enum"
 65 |                     type="textarea"
 66 |                     placeholder="请输入枚举，一行一个"
 67 |                     :maxlength="120"
 68 |                     :disabled="!enableEnum"
 69 |                     :autosize="{ minRows: 4, maxRows: 4 }"
 70 |                     :style="{ width: '100%' }"
 71 |                   ></el-input>
 72 |                 </el-form-item>
 73 |               </el-col>
 74 |             </el-row>
 75 |           </el-col>
 76 |           <el-col v-if="enableEnum" :span="24">
 77 |             <el-form-item label="枚举描述：" prop="enumDesc">
 78 |               <el-input
 79 |                 v-model="formData.enumDesc"
 80 |                 type="textarea"
 81 |                 placeholder="请输入枚举描述"
 82 |                 :maxlength="100"
 83 |                 :autosize="{ minRows: 4, maxRows: 4 }"
 84 |                 :style="{ width: '100%' }"
 85 |               ></el-input>
 86 |             </el-form-item>
 87 |           </el-col>
 88 |         </el-form>
 89 |       </el-row>
 90 |       <div slot="footer">
 91 |         <el-button @click="close">取消</el-button>
 92 |         <el-button type="primary" @click="handleConfirm">确定</el-button>
 93 |       </div>
 94 |     </el-dialog>
 95 |   </div>
 96 | </template>
 97 | <script>
 98 | import compact from 'lodash/compact'
 99 | import { getValidFormVal } from '../utils'
100 | export default {
101 |   name: 'NumberDialog',
102 |   inheritAttrs: false,
103 |   props: { initData: { type: Object, default: () => ({}) } },
104 |   data() {
105 |     return {
106 |       enableEnum: false,
107 |       formData: {
108 |         default: undefined,
109 |         minLength: undefined,
110 |         maxLength: undefined,
111 |         enum: undefined,
112 |         enumDesc: undefined,
113 |       },
114 |       rules: {
115 |         default: [],
116 |         minLength: [],
117 |         maxLength: [],
118 |         innerScope: [],
119 |         enum: [],
120 |         enumDesc: [],
121 |       },
122 |     }
123 |   },
124 |   methods: {
125 |     onOpen() {
126 |       const { minLength, maxLength, enumDesc } = this.initData
127 |       let enumValue = this.initData.enum
128 |       if (enumValue) {
129 |         try {
130 |           enumValue = enumValue.join('\n')
131 |           this.enableEnum = true
132 |         } catch (e) {
133 |           this.$message({ text: '枚举数据格式不对，将丢失', type: 'warning' })
134 |           enumValue = ''
135 |         }
136 |       }
137 |       Object.assign(
138 |         this.formData,
139 |         { minLength, maxLength, enumDesc },
140 |         { default: this.initData.default, enum: enumValue }
141 |       )
142 |     },
143 |     onClose() {
144 |       this.$refs['elForm'].resetFields()
145 |     },
146 |     close() {
147 |       this.$emit('update:visible', false)
148 |     },
149 |     handleConfirm() {
150 |       this.$refs['elForm'].validate((valid) => {
151 |         if (!valid) return
152 |         const newData = getValidFormVal(this.formData)
153 |         if (newData.enum) {
154 |           newData.enum = compact(newData.enum.split('\n'))
155 |         }
156 |         if (newData.default) {
157 |           newData.default = Number(newData.default)
158 |         }
159 |         this.$jsEditorEvent.emit(`schema-update-${this.initData.editorId}`, {
160 |           eventType: 'save-setting',
161 |           ...this.initData, // 之前的参数
162 |           newData, // 设置数据
163 |         })
164 |         this.close()
165 |       })
166 |     },
167 |   },
168 | }
169 | </script>
170 | 


--------------------------------------------------------------------------------
/src/dialog/ObjectDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     title="基础设置（对象字段）"
 4 |     width="600px"
 5 |     v-bind="$attrs"
 6 |     v-on="$listeners"
 7 |     @open="onOpen"
 8 |     @close="onClose"
 9 |   >
10 |     <el-form ref="elForm" :model="formData" size="small" label-width="100px">
11 |       <el-form-item label-width="0" prop="notEmpty" style="text-align: center">
12 |         <el-radio-group v-model="formData.notEmpty" size="medium">
13 |           <el-radio
14 |             v-for="(item, index) in notEmptyOptions"
15 |             :key="index"
16 |             :label="item.value"
17 |             :disabled="item.disabled"
18 |             >{{ item.label }}</el-radio
19 |           >
20 |         </el-radio-group>
21 |       </el-form-item>
22 |     </el-form>
23 |     <div slot="footer">
24 |       <el-button @click="close">取消</el-button>
25 |       <el-button type="primary" @click="handleConfirm">确定</el-button>
26 |     </div>
27 |   </el-dialog>
28 | </template>
29 | <script>
30 | import { getValidFormVal } from '../utils'
31 | export default {
32 |   name: 'ObjectDialog',
33 |   inheritAttrs: false,
34 |   props: { initData: { type: Object, default: () => ({}) } },
35 | 
36 |   data() {
37 |     return {
38 |       formData: {
39 |         notEmpty: false,
40 |       },
41 |       notEmptyOptions: [
42 |         {
43 |           label: '可为空',
44 |           value: false,
45 |         },
46 |         {
47 |           label: '不允许为空',
48 |           value: true,
49 |         },
50 |       ],
51 |     }
52 |   },
53 |   created() {},
54 |   methods: {
55 |     onOpen() {
56 |       Object.assign(this.formData, { notEmpty: this.initData.notEmpty })
57 |     },
58 |     onClose() {
59 |       this.$refs['elForm'].resetFields()
60 |     },
61 |     close() {
62 |       this.$emit('update:visible', false)
63 |     },
64 |     handleConfirm() {
65 |       this.$refs['elForm'].validate((valid) => {
66 |         if (!valid) return
67 |         const newData = getValidFormVal(this.formData)
68 |         this.$jsEditorEvent.emit(`schema-update-${this.initData.editorId}`, {
69 |           eventType: 'save-setting',
70 |           ...this.initData, // 之前的参数
71 |           newData, // 设置数据
72 |         })
73 |         this.close()
74 |       })
75 |     },
76 |   },
77 | }
78 | </script>
79 | 


--------------------------------------------------------------------------------
/src/dialog/RawDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-dialog
 4 |       title="RAW源码查看"
 5 |       width="700px"
 6 |       v-bind="$attrs"
 7 |       v-on="$listeners"
 8 |       @open="onOpen"
 9 |       @close="onClose"
10 |     >
11 |       <div class="sourcecode">
12 |         <s-json-editor :value="schema"></s-json-editor>
13 |       </div>
14 |       <span slot="footer" class="dialog-footer">
15 |         <el-button @click="close">关 闭</el-button>
16 |       </span>
17 |     </el-dialog>
18 |   </div>
19 | </template>
20 | <script>
21 | import SJsonEditor from '../json-editor'
22 | export default {
23 |   name: 'RawDialog',
24 |   components: { SJsonEditor },
25 |   inheritAttrs: false,
26 |   props: {
27 |     schema: { type: Object, default: () => ({}) },
28 |   },
29 |   data() {
30 |     return {}
31 |   },
32 |   created() {},
33 |   methods: {
34 |     onOpen() {},
35 |     onClose() {},
36 |     close() {
37 |       this.$emit('update:visible', false)
38 |     },
39 |   },
40 | }
41 | </script>
42 | <style lang="scss" scoped>
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/dialog/StringDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-dialog
  4 |       title="基础设置（字符串）"
  5 |       width="700px"
  6 |       v-bind="$attrs"
  7 |       v-on="$listeners"
  8 |       @open="onOpen"
  9 |       @close="onClose"
 10 |     >
 11 |       <el-row :gutter="15">
 12 |         <el-form
 13 |           ref="elForm"
 14 |           :model="formData"
 15 |           :rules="rules"
 16 |           size="small"
 17 |           label-width="100px"
 18 |         >
 19 |           <el-col :span="24">
 20 |             <el-form-item label="默认值：" prop="default">
 21 |               <el-input
 22 |                 v-model="formData.default"
 23 |                 placeholder="请输入默认值"
 24 |                 :maxlength="200"
 25 |                 clearable
 26 |                 :style="{ width: '100%' }"
 27 |               ></el-input>
 28 |             </el-form-item>
 29 |           </el-col>
 30 |           <el-col :span="12">
 31 |             <el-form-item label="最小长度：" prop="minLength">
 32 |               <el-input-number
 33 |                 v-model="formData.minLength"
 34 |                 style="width: 160px"
 35 |                 placeholder="请输入"
 36 |                 :step="2"
 37 |               ></el-input-number>
 38 |             </el-form-item>
 39 |           </el-col>
 40 |           <el-col :span="12">
 41 |             <el-form-item label="最大长度:" prop="maxLength">
 42 |               <el-input-number
 43 |                 v-model="formData.maxLength"
 44 |                 style="width: 160px"
 45 |                 placeholder="请输入"
 46 |                 :step="2"
 47 |               ></el-input-number>
 48 |             </el-form-item>
 49 |           </el-col>
 50 |           <el-col :span="24">
 51 |             <el-row>
 52 |               <el-col :span="3">
 53 |                 <div style="line-height: 80px; text-align: right">
 54 |                   <label for>枚举</label>
 55 |                   <el-checkbox v-model="enableEnum">:</el-checkbox>
 56 |                 </div>
 57 |               </el-col>
 58 |               <el-col :span="21" style="padding-left: 18px">
 59 |                 <el-form-item label-width="0" prop="enum">
 60 |                   <el-input
 61 |                     v-model="formData.enum"
 62 |                     type="textarea"
 63 |                     placeholder="请输入枚举，一行一个"
 64 |                     :maxlength="120"
 65 |                     :disabled="!enableEnum"
 66 |                     :autosize="{ minRows: 4, maxRows: 4 }"
 67 |                     :style="{ width: '100%' }"
 68 |                   ></el-input>
 69 |                 </el-form-item>
 70 |               </el-col>
 71 |             </el-row>
 72 |           </el-col>
 73 |           <el-col v-if="enableEnum" :span="24">
 74 |             <el-form-item label="枚举描述：" prop="enumDesc">
 75 |               <el-input
 76 |                 v-model="formData.enumDesc"
 77 |                 type="textarea"
 78 |                 placeholder="请输入枚举描述"
 79 |                 :maxlength="100"
 80 |                 :autosize="{ minRows: 4, maxRows: 4 }"
 81 |                 :style="{ width: '100%' }"
 82 |               ></el-input>
 83 |             </el-form-item>
 84 |           </el-col>
 85 |         </el-form>
 86 |       </el-row>
 87 |       <div slot="footer">
 88 |         <el-button @click="close">取消</el-button>
 89 |         <el-button type="primary" @click="handleConfirm">确定</el-button>
 90 |       </div>
 91 |     </el-dialog>
 92 |   </div>
 93 | </template>
 94 | <script>
 95 | import compact from 'lodash/compact'
 96 | import { getValidFormVal } from '../utils'
 97 | export default {
 98 |   name: 'StringDialog',
 99 |   inheritAttrs: false,
100 |   props: { initData: { type: Object, default: () => ({}) } },
101 |   data() {
102 |     return {
103 |       enableEnum: false,
104 |       formData: {
105 |         default: undefined,
106 |         minLength: undefined,
107 |         maxLength: undefined,
108 |         enum: undefined,
109 |         enumDesc: undefined,
110 |       },
111 |       rules: {
112 |         default: [],
113 |         minLength: [],
114 |         maxLength: [],
115 |         innerScope: [],
116 |         enum: [],
117 |         enumDesc: [],
118 |       },
119 |     }
120 |   },
121 |   methods: {
122 |     onOpen() {
123 |       const { minLength, maxLength, enumDesc } = this.initData
124 |       let enumValue = this.initData.enum
125 |       if (enumValue) {
126 |         try {
127 |           enumValue = enumValue.join('\n')
128 |           this.enableEnum = true
129 |         } catch (e) {
130 |           this.$message({ text: '枚举数据格式不对，将丢失', type: 'warning' })
131 |           enumValue = ''
132 |         }
133 |       }
134 |       Object.assign(
135 |         this.formData,
136 |         { minLength, maxLength, enumDesc },
137 |         { default: this.initData.default, enum: enumValue }
138 |       )
139 |     },
140 |     onClose() {
141 |       this.$refs['elForm'].resetFields()
142 |     },
143 |     close() {
144 |       this.$emit('update:visible', false)
145 |     },
146 |     handleConfirm() {
147 |       this.$refs['elForm'].validate((valid) => {
148 |         if (!valid) return
149 |         const newData = getValidFormVal(this.formData)
150 |         if (newData.enum) {
151 |           newData.enum = compact(newData.enum.split('\n'))
152 |         }
153 |         this.$jsEditorEvent.emit(`schema-update-${this.initData.editorId}`, {
154 |           eventType: 'save-setting',
155 |           ...this.initData, // 之前的参数
156 |           newData, // 设置数据
157 |         })
158 |         this.close()
159 |       })
160 |     },
161 |   },
162 | }
163 | </script>
164 | 


--------------------------------------------------------------------------------
/src/dialog/index.js:
--------------------------------------------------------------------------------
 1 | import BasicDialog from './BasicDialog';
 2 | import StringDialog from './StringDialog';
 3 | import NumberDialog from './NumberDialog';
 4 | import ArrayDialog from './ArrayDialog';
 5 | import BooleanDialog from './BooleanDialog';
 6 | import ObjectDialog from './ObjectDialog';
 7 | import RawDialog from './RawDialog';
 8 | 
 9 | export {
10 |   BasicDialog,
11 |   StringDialog,
12 |   NumberDialog,
13 |   ArrayDialog,
14 |   BooleanDialog,
15 |   ObjectDialog,
16 |   RawDialog
17 | };
18 | 


--------------------------------------------------------------------------------
/src/event.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author: giscafer ,https://github.com/giscafer
 3 |  * @date: 2020-05-21 17:21:29
 4 |  * @description: 用一个Vue实例封装事件常用的方法并赋值给全局的变量，以便在任何一个组件都可调用这些方法来实现全局事件管理
 5 |  *
 6 |  * 使用如下：
 7 |  * mounted(){
 8 |     this.$jsEditorEvent.on('change_value',id);
 9 |     this.$jsEditorEvent.emit('change_value',1);
10 |     ...
11 |   }
12 |  */
13 | 
14 | import Vue from 'vue';
15 | 
16 | const eventHub = new Vue({
17 |   methods: {
18 |     on(...args) {
19 |       this.$on.apply(this, args);
20 |     },
21 |     emit(...args) {
22 |       this.$emit.apply(this, args);
23 |     },
24 |     off(...args) {
25 |       this.$off.apply(this, args);
26 |     },
27 |     once(...args) {
28 |       this.$once.apply(this, args);
29 |     },
30 |   },
31 | });
32 | 
33 | /* const CustomEventPlugin = V =>
34 |   Object.defineProperty(V.prototype, '$event', {
35 |     value: eventHub,
36 |     writable: true
37 |   }); */
38 | 
39 | const CustomEventPlugin = {
40 |   install: function(V) {
41 |     Object.defineProperty(V.prototype, '$jsEditorEvent', {
42 |       value: eventHub,
43 |       writable: true,
44 |     });
45 |   },
46 | };
47 | 
48 | export default CustomEventPlugin;
49 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import JsonSchemaEditor from './json-schema-editor.vue';
 2 | import CustomEventPlugin from './event';
 3 | 
 4 | const install = function(Vue) {
 5 |   Vue.use(CustomEventPlugin);
 6 | 
 7 |   Vue.component(JsonSchemaEditor.name, JsonSchemaEditor);
 8 | };
 9 | 
10 | JsonSchemaEditor.install = install;
11 | 
12 | /* istanbul ignore if */
13 | if (typeof window !== 'undefined' && window.Vue) {
14 |   install(window.Vue);
15 | }
16 | 
17 | export default JsonSchemaEditor;
18 | 


--------------------------------------------------------------------------------
/src/json-editor/index.js:
--------------------------------------------------------------------------------
1 | import JsonEditor from './src/json-editor';
2 | 
3 | /* istanbul ignore next */
4 | JsonEditor.install = function(Vue) {
5 |   Vue.component(JsonEditor.name, JsonEditor);
6 | };
7 | 
8 | export default JsonEditor;
9 | 


--------------------------------------------------------------------------------
/src/json-editor/src/json-editor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="json-editor">
 3 |     <textarea ref="textarea" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import CodeMirror from 'codemirror'
 9 | import 'codemirror/addon/lint/lint.css'
10 | import 'codemirror/lib/codemirror.css'
11 | import 'codemirror/theme/idea.css'
12 | import 'codemirror/theme/rubyblue.css'
13 | require('script-loader!jsonlint')
14 | import 'codemirror/mode/javascript/javascript'
15 | import 'codemirror/addon/lint/lint'
16 | import 'codemirror/addon/lint/json-lint'
17 | 
18 | export default {
19 |   name: 'SJsonEditor',
20 |   props: {
21 |     value: {
22 |       type: Object,
23 |       default: () => ({}),
24 |     },
25 |     readonly: {
26 |       type: Boolean,
27 |       default: true,
28 |     },
29 |     theme: {
30 |       type: String,
31 |       default: 'idea',
32 |     },
33 |   },
34 |   data() {
35 |     return {
36 |       jsonEditor: false,
37 |     }
38 |   },
39 |   watch: {
40 |     value(value) {
41 |       const editorValue = this.jsonEditor.getValue()
42 |       if (value !== editorValue) {
43 |         this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
44 |       }
45 |     },
46 |     theme() {
47 |       this.jsonEditor.setOption({
48 |         theme: this.theme,
49 |       })
50 |     },
51 |   },
52 |   mounted() {
53 |     this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
54 |       lineNumbers: true,
55 |       mode: 'application/json',
56 |       gutters: ['CodeMirror-lint-markers'],
57 |       theme: this.theme || 'idea',
58 |       readonly: this.readonly ? 'nocursor' : false,
59 |       lint: true,
60 |     })
61 |     this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
62 |     this.jsonEditor.on('change', (cm) => {
63 |       this.$emit('changed', cm.getValue())
64 |       this.$emit('input', cm.getValue())
65 |     })
66 |   },
67 |   methods: {
68 |     getValue() {
69 |       return this.jsonEditor.getValue()
70 |     },
71 |   },
72 | }
73 | </script>
74 | 
75 | <style scoped>
76 | .json-editor {
77 |   height: 100%;
78 |   position: relative;
79 | }
80 | .json-editor >>> .CodeMirror {
81 |   height: auto;
82 |   min-height: 300px;
83 | }
84 | .json-editor >>> .CodeMirror-scroll {
85 |   min-height: 300px;
86 | }
87 | .json-editor >>> .cm-s-rubyblue span.cm-string {
88 |   color: #f08047;
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/json-schema-editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-button
  4 |       v-if="showRaw"
  5 |       type="primary"
  6 |       size="mini"
  7 |       style="margin-bottom: 10px"
  8 |       @click="handleReqBodyRaw"
  9 |       >RAW查看</el-button
 10 |     >
 11 |     <div class="json-schema-vue-editor">
 12 |       <el-row type="flex" align="middle">
 13 |         <el-col :span="8" class="col-item name-item col-item-name">
 14 |           <el-row type="flex" justify="space-around" align="middle">
 15 |             <el-col :span="2" class="down-style-col">
 16 |               <span
 17 |                 v-if="schemaData.type === 'object'"
 18 |                 class="down-style"
 19 |                 @click="handleClickIcon"
 20 |               >
 21 |                 <i v-if="show" class="el-icon-caret-bottom icon-object"></i>
 22 |                 <i v-if="!show" class="el-icon-caret-right icon-object"></i>
 23 |               </span>
 24 |             </el-col>
 25 |             <el-col :span="20">
 26 |               <el-input disabled value="root" size="small" />
 27 |             </el-col>
 28 |             <el-col :span="2" style="text-align: center">
 29 |               <el-tooltip placement="top" content="全选">
 30 |                 <el-checkbox
 31 |                   :checked="checked"
 32 |                   :disabled="disabled"
 33 |                   @change="changeCheckBox"
 34 |                 />
 35 |               </el-tooltip>
 36 |             </el-col>
 37 |           </el-row>
 38 |         </el-col>
 39 |         <el-col :span="3" class="col-item col-item-type">
 40 |           <el-select
 41 |             :value="schemaData.type"
 42 |             :disabled="schemaData.disabled && !schemaData.canChangeType"
 43 |             class="type-select-style"
 44 |             size="small"
 45 |             @change="handleChangeType2($event)"
 46 |           >
 47 |             <el-option
 48 |               v-for="item in schemaTypes"
 49 |               :key="item"
 50 |               :value="item"
 51 |               :label="item"
 52 |             ></el-option>
 53 |           </el-select>
 54 |         </el-col>
 55 |         <el-col v-if="isMock" :span="3" class="col-item col-item-mock">
 56 |           <MockSelect
 57 |             :schema="schemaData"
 58 |             @showEdit="handleShowEdit"
 59 |             @change="handleChangeMock"
 60 |           />
 61 |         </el-col>
 62 |         <el-col
 63 |           v-if="showTitle"
 64 |           :span="isMock ? 4 : 5"
 65 |           class="col-item col-item-mock"
 66 |         >
 67 |           <el-input
 68 |             v-model="schemaData.title"
 69 |             placeholder="标题"
 70 |             :disabled="schemaData.disabled"
 71 |             size="small"
 72 |           >
 73 |             <i
 74 |               slot="append"
 75 |               class="el-icon-edit"
 76 |               @click="
 77 |                 handleSchemaUpdateEvent({
 78 |                   eventType: 'show-edit',
 79 |                   field: 'title',
 80 |                   prefix: ['properties'],
 81 |                   isRoot: true,
 82 |                 })
 83 |               "
 84 |             ></i>
 85 |           </el-input>
 86 |         </el-col>
 87 |         <el-col
 88 |           v-if="!showTitle && showDefaultValue"
 89 |           :span="isMock ? 4 : 5"
 90 |           class="col-item col-item-mock"
 91 |         >
 92 |           <el-input
 93 |             v-model="schemaData.default"
 94 |             placeholder="默认值"
 95 |             size="small"
 96 |             :disabled="
 97 |               schemaData.type === 'object' ||
 98 |               schemaData.type === 'array' ||
 99 |               schemaData.disabled
100 |             "
101 |           >
102 |             <i
103 |               slot="append"
104 |               class="el-icon-edit"
105 |               @click="
106 |                 handleSchemaUpdateEvent({
107 |                   eventType: 'show-edit',
108 |                   field: 'default',
109 |                   prefix: ['properties'],
110 |                   isRoot: true,
111 |                 })
112 |               "
113 |             ></i>
114 |           </el-input>
115 |         </el-col>
116 | 
117 |         <el-col :span="isMock ? 4 : 5" class="col-item col-item-desc">
118 |           <el-input
119 |             v-model="schemaData.description"
120 |             placeholder="备注"
121 |             size="small"
122 |             :disabled="schemaData.disabled"
123 |           >
124 |             <i
125 |               slot="append"
126 |               class="el-icon-edit"
127 |               @click="
128 |                 handleSchemaUpdateEvent({
129 |                   eventType: 'show-edit',
130 |                   field: 'description',
131 |                   prefix: ['properties'],
132 |                   isRoot: true,
133 |                 })
134 |               "
135 |             ></i>
136 |           </el-input>
137 |         </el-col>
138 |         <el-col :span="2" class="col-item col-item-setting">
139 |           <span
140 |             class="adv-set"
141 |             @click="
142 |               handleSchemaUpdateEvent({
143 |                 eventType: 'setting',
144 |                 schemaType: schemaData.type,
145 |                 prefix: ['properties'],
146 |                 isRoot: true,
147 |               })
148 |             "
149 |           >
150 |             <el-tooltip placement="top" content="高级设置">
151 |               <i class="el-icon-setting"></i>
152 |             </el-tooltip>
153 |           </span>
154 | 
155 |           <span
156 |             v-if="schemaData.type === 'object'"
157 |             @click="
158 |               handleSchemaUpdateEvent({
159 |                 eventType: 'add-field',
160 |                 isChild: false,
161 |                 prefix: ['properties'],
162 |               })
163 |             "
164 |           >
165 |             <el-tooltip placement="top" content="添加子节点">
166 |               <i class="el-icon-plus plus"></i>
167 |             </el-tooltip>
168 |           </span>
169 |         </el-col>
170 |       </el-row>
171 |       <schema-json
172 |         v-if="show"
173 |         :data="schemaData"
174 |         :is-mock="isMock"
175 |         :show-title="showTitle"
176 |         :show-default-value="showDefaultValue"
177 |         :editor-id="editorId"
178 |       />
179 |       <!-- RAW弹窗 -->
180 |       <RawDialog
181 |         v-if="showRaw"
182 |         :visible.sync="rawDialogVisible"
183 |         :schema="schemaData"
184 |       />
185 |       <!-- 高级设置弹窗 -->
186 |       <BasicDialog
187 |         :visible.sync="basicDialogVisible"
188 |         :init-data="basicModalData"
189 |       />
190 |       <StringDialog
191 |         :visible.sync="settingDialogVisible.string"
192 |         :init-data="settingModalData"
193 |       />
194 |       <NumberDialog
195 |         :visible.sync="settingDialogVisible.number"
196 |         :init-data="settingModalData"
197 |       />
198 |       <NumberDialog
199 |         :visible.sync="settingDialogVisible.integer"
200 |         :init-data="settingModalData"
201 |       />
202 |       <ArrayDialog
203 |         :visible.sync="settingDialogVisible.array"
204 |         :init-data="settingModalData"
205 |       />
206 |       <BooleanDialog
207 |         :visible.sync="settingDialogVisible.boolean"
208 |         :init-data="settingModalData"
209 |       />
210 |       <ObjectDialog
211 |         :visible.sync="settingDialogVisible.object"
212 |         :init-data="settingModalData"
213 |       />
214 |     </div>
215 |   </div>
216 | </template>
217 | <script>
218 | import set from 'lodash/set'
219 | import get from 'lodash/get'
220 | import unset from 'lodash/unset'
221 | import cloneDeep from 'lodash/cloneDeep'
222 | import SchemaJson from './Schema'
223 | import MockSelect from './MockSelect'
224 | import './jsonschema.scss'
225 | import {
226 |   BasicDialog,
227 |   StringDialog,
228 |   NumberDialog,
229 |   ArrayDialog,
230 |   BooleanDialog,
231 |   ObjectDialog,
232 |   RawDialog,
233 | } from './dialog'
234 | import {
235 |   SCHEMA_TYPE,
236 |   log,
237 |   JSONPATH_JOIN_CHAR,
238 |   defaultSchema,
239 |   uuid,
240 |   defaultInitSchemaData,
241 |   handleSchemaRequired,
242 |   cloneObject,
243 |   deleteData,
244 | } from './utils'
245 | export default {
246 |   name: 'SJsonSchemaEditor',
247 |   components: {
248 |     MockSelect,
249 |     SchemaJson,
250 |     BasicDialog,
251 |     StringDialog,
252 |     NumberDialog,
253 |     ArrayDialog,
254 |     BooleanDialog,
255 |     ObjectDialog,
256 |     RawDialog,
257 |   },
258 |   props: {
259 |     schema: { type: Object, default: () => {} },
260 |     isMock: { type: Boolean, default: false },
261 |     showTitle: { type: Boolean, default: false },
262 |     showDefaultValue: { type: Boolean, default: false },
263 |     showRaw: { type: Boolean, default: false },
264 |   },
265 |   data() {
266 |     const visibleObj = {}
267 |     SCHEMA_TYPE.map((type) => {
268 |       visibleObj[type] = false
269 |     })
270 |     const initSchema = this.schema || defaultInitSchemaData
271 |     return {
272 |       editorId: uuid(),
273 |       checked: false,
274 |       disabled: false,
275 |       show: true,
276 |       schemaTypes: SCHEMA_TYPE,
277 |       schemaData: initSchema,
278 |       rawDialogVisible: false,
279 |       basicDialogVisible: false,
280 |       basicModalData: { title: '', value: '' },
281 |       settingDialogVisible: visibleObj,
282 |       settingModalData: {},
283 |     }
284 |   },
285 |   watch: {
286 |     schemaData: {
287 |       handler(newVal) {
288 |         log(this, 'watch', newVal)
289 |       },
290 |       deep: true,
291 |     },
292 |   },
293 |   mounted() {
294 |     log(this, this.schemaData)
295 |     this.$jsEditorEvent.on(
296 |       `schema-update-${this.editorId}`,
297 |       this.handleSchemaUpdateEvent
298 |     )
299 |   },
300 |   beforeDestroy() {
301 |     this.$jsEditorEvent.off(
302 |       `schema-update-${this.editorId}`,
303 |       this.handleSchemaUpdateEvent
304 |     )
305 |   },
306 |   methods: {
307 |     handleSchemaUpdateEvent(options) {
308 |       const { eventType, ...opts } = options
309 |       switch (eventType) {
310 |         case 'add-field':
311 |           this.addFieldAction(opts)
312 |           break
313 |         case 'delete-field':
314 |           this.deleteFieldAction(opts)
315 |           break
316 |         case 'update-field-name':
317 |           this.updateFieldNameAction(opts)
318 |           break
319 |         case 'schema-type':
320 |           this.handleChangeType(opts)
321 |           break
322 |         case 'show-edit':
323 |           this.handleShowEdit(opts)
324 |           break
325 |         case 'save-showedit':
326 |           this.handleSaveShowEdit(opts)
327 |           break
328 |         case 'setting':
329 |           this.handleSettingAction(opts)
330 |           break
331 |         case 'save-setting':
332 |           this.handleSaveSetting(opts)
333 |           break
334 |         case 'toggle-required':
335 |           this.enableRequireAction(opts)
336 |           break
337 |         default:
338 |           break
339 |       }
340 |     },
341 |     handleClickIcon() {
342 |       this.show = !this.show
343 |     },
344 |     changeCheckBox(e) {
345 |       this.requireAllAction({ required: e, value: this.schemaData })
346 |     },
347 |     requireAllAction(opts) {
348 |       const { value, required } = opts
349 |       const cloneSchema = cloneObject(value)
350 |       handleSchemaRequired(cloneSchema, required)
351 |       this.forceUpdate(cloneSchema)
352 |       this.handleEmitChange(cloneSchema)
353 |     },
354 |     enableRequireAction(opts) {
355 |       const { prefix, name, required } = opts
356 |       const prefixCopy = cloneDeep(prefix)
357 |       prefixCopy.pop()
358 |       const parentKeys = [...prefixCopy]
359 |       const parentPrefix = parentKeys.join(JSONPATH_JOIN_CHAR)
360 |       const cloneSchema = cloneDeep(this.schemaData)
361 |       let parentData = null
362 |       if (!parentPrefix) {
363 |         // 一级属性
364 |         parentData = cloneSchema
365 |       } else {
366 |         parentData = get(cloneSchema, parentPrefix)
367 |       }
368 |       const requiredData = [].concat(parentData.required || [])
369 |       const index = requiredData.indexOf(name)
370 |       // 取消必填
371 |       if (!required && index >= 0) {
372 |         requiredData.splice(index, 1)
373 |         parentKeys.push('required')
374 |         if (requiredData.length === 0) {
375 |           deleteData(cloneSchema, parentKeys)
376 |         } else {
377 |           set(cloneSchema, parentKeys, requiredData)
378 |         }
379 |       } else if (required && index === -1) {
380 |         // 必填
381 |         requiredData.push(name)
382 |         parentKeys.push('required')
383 |         set(cloneSchema, parentKeys, requiredData)
384 |       }
385 |       this.forceUpdate(cloneSchema)
386 |       this.handleEmitChange(cloneSchema)
387 |     },
388 |     /**
389 |      * 处理新增字段
390 |      * @param isChild 新增子节点
391 |      * @param action 字段和路径
392 |      */
393 |     addFieldAction(opts) {
394 |       log(this, opts)
395 |       const { isChild, name, prefix } = opts
396 |       let parentPrefix = ''
397 |       let requirePrefix = []
398 |       if (isChild) {
399 |         const tempArr = [].concat(prefix, name)
400 |         parentPrefix = tempArr.concat('properties').join(JSONPATH_JOIN_CHAR)
401 |         requirePrefix = [...tempArr]
402 |       } else {
403 |         parentPrefix = prefix.join(JSONPATH_JOIN_CHAR)
404 |         const tempPrefix = [].concat(prefix)
405 |         tempPrefix.pop()
406 |         requirePrefix = tempPrefix
407 |       }
408 |       log('addFieldAction>>>', parentPrefix, '\n\t')
409 |       let newPropertiesData = {}
410 |       const ranName = 'field_' + uuid()
411 |       const propertiesData = get(this.schemaData, parentPrefix)
412 |       newPropertiesData = Object.assign({}, propertiesData)
413 |       newPropertiesData[ranName] = cloneDeep(defaultSchema.string)
414 |       const cloneSchema = cloneDeep(this.schemaData)
415 |       set(cloneSchema, parentPrefix, newPropertiesData)
416 | 
417 |       // add required
418 |       let pRequiredData = null
419 |       if (!requirePrefix.length) {
420 |         // 一级属性
421 |         pRequiredData = cloneSchema
422 |       } else {
423 |         pRequiredData = get(cloneSchema, requirePrefix)
424 |       }
425 |       const requiredData = [].concat(pRequiredData.required || [])
426 |       requiredData.push(ranName)
427 |       requirePrefix.push('required')
428 |       set(cloneSchema, requirePrefix, requiredData)
429 |       // update schema
430 |       this.schemaData = cloneSchema
431 |       this.forceUpdate(cloneSchema)
432 |       this.handleEmitChange(cloneSchema)
433 |     },
434 | 
435 |     // 删除字段
436 |     deleteFieldAction(opts) {
437 |       const { name, prefix } = opts
438 |       const curFieldPath = [].concat(prefix, name).join(JSONPATH_JOIN_CHAR)
439 |       // console.log(curFieldPath)
440 |       const cloneSchema = cloneDeep(this.schemaData)
441 |       unset(cloneSchema, curFieldPath)
442 |       this.schemaData = cloneSchema
443 |       this.forceUpdate()
444 |       this.handleEmitChange(cloneSchema)
445 |     },
446 | 
447 |     // 更新字段名称
448 |     updateFieldNameAction(opts) {
449 |       log(this, opts)
450 |       const { value, name, prefix } = opts
451 |       let requirePrefix = []
452 |       const prefixCopy = cloneDeep(prefix)
453 |       prefixCopy.pop()
454 |       requirePrefix = prefixCopy // 上级 required路径
455 |       const parentPrefix = prefix.join(JSONPATH_JOIN_CHAR)
456 |       const curFieldPath = prefix.concat(name).join(JSONPATH_JOIN_CHAR)
457 |       const cloneSchema = cloneDeep(this.schemaData)
458 |       const propertiesData = get(cloneSchema, curFieldPath) // 原来的值
459 |       unset(cloneSchema, curFieldPath) // 移除
460 | 
461 |       set(cloneSchema, `${parentPrefix}.${value}`, propertiesData) // 添加
462 | 
463 |       // update required name
464 |       let pRequiredData = null
465 |       if (!requirePrefix.length) {
466 |         // 一级属性
467 |         pRequiredData = cloneSchema
468 |       } else {
469 |         pRequiredData = get(cloneSchema, requirePrefix)
470 |       }
471 |       let requiredData = [].concat(pRequiredData.required || [])
472 |       requiredData = requiredData.map((item) => {
473 |         if (item === name) return value
474 |         return item
475 |       })
476 |       requirePrefix.push('required')
477 |       set(cloneSchema, requirePrefix, requiredData)
478 | 
479 |       this.schemaData = cloneSchema
480 |       this.forceUpdate()
481 |       this.handleEmitChange(cloneSchema)
482 |     },
483 |     // root
484 |     handleChangeType2(value) {
485 |       this.schemaData.type = value
486 |       const parentDataItem = this.schemaData.description
487 |         ? { description: this.schemaData.description }
488 |         : {}
489 |       const newParentDataItem = defaultSchema[value]
490 |       const newParentData = Object.assign({}, newParentDataItem, parentDataItem)
491 |       this.schemaData = newParentData
492 |       this.handleEmitChange(this.schemaData)
493 |     },
494 |     // schema 类型变化
495 |     handleChangeType(opts) {
496 |       log(this, opts, 2)
497 |       const { value, name, prefix } = opts
498 |       const parentPrefix = [].concat(prefix, name)
499 |       const cloneSchema = cloneDeep(this.schemaData)
500 |       const parentData = get(cloneSchema, parentPrefix)
501 |       const newParentDataItem = defaultSchema[value] // 重置当前 schema 为默认值
502 |       // 保留备注信息
503 |       const parentDataItem = parentData.description
504 |         ? { description: parentData.description }
505 |         : {}
506 | 
507 |       const newParentData = Object.assign({}, newParentDataItem, parentDataItem)
508 |       set(cloneSchema, parentPrefix, newParentData)
509 |       this.schemaData = cloneSchema
510 |       this.forceUpdate()
511 |       this.handleEmitChange(cloneSchema)
512 |     },
513 |     // title & description 编辑
514 |     handleShowEdit(opts) {
515 |       const { field, name, prefix, isRoot } = opts
516 |       log(this, 'handleShowEdit', name, prefix)
517 | 
518 |       let parentData
519 |       if (isRoot) {
520 |         parentData = this.schemaData
521 |       } else {
522 |         const parentPrefix = [].concat(prefix, name)
523 |         parentData = get(this.schemaData, parentPrefix)
524 |       }
525 |       // disable 的时候，return事件处理
526 |       if (
527 |         (field === 'default' && parentData.type === 'array') ||
528 |         parentData.type === 'object'
529 |       ) {
530 |         return
531 |       }
532 | 
533 |       this.basicDialogVisible = true
534 | 
535 |       Object.assign(this.basicModalData, {
536 |         title:
537 |           field === 'title' ? '标题' : field === 'default' ? '默认值' : '描述',
538 |         value: parentData[field],
539 |         editorId: this.editorId,
540 |         ...opts,
541 |       })
542 |     },
543 |     handleSaveShowEdit(opts) {
544 |       const { value, field, name, prefix, isRoot } = opts
545 |       // console.log(field, value)
546 |       let parentPrefix
547 |       const cloneSchema = cloneDeep(this.schemaData)
548 |       if (isRoot) {
549 |         cloneSchema[field] = value
550 |       } else {
551 |         parentPrefix = [].concat(prefix, name, field)
552 |         set(cloneSchema, parentPrefix, value)
553 |       }
554 | 
555 |       this.schemaData = cloneSchema
556 |       this.forceUpdate()
557 |       this.handleEmitChange(cloneSchema)
558 |     },
559 |     // 高级设置
560 |     handleSettingAction(opts) {
561 |       const { schemaType, name, prefix, isRoot } = opts
562 |       // console.log(schemaType)
563 |       this.settingDialogVisible[schemaType] = true
564 | 
565 |       let parentData
566 |       if (isRoot) {
567 |         parentData = this.schemaData
568 |       } else {
569 |         const parentPrefix = [].concat(prefix, name)
570 |         parentData = get(this.schemaData, parentPrefix)
571 |       }
572 | 
573 |       this.settingModalData = {
574 |         schemaType,
575 |         name,
576 |         isRoot,
577 |         prefix,
578 |         editorId: this.editorId,
579 |         ...parentData,
580 |       }
581 |     },
582 |     // 高级设置更新 schema
583 |     handleSaveSetting(opts) {
584 |       const { name, prefix, newData, isRoot } = opts
585 |       const cloneSchema = cloneDeep(this.schemaData)
586 |       console.log(isRoot)
587 |       if (isRoot) {
588 |         Object.assign(cloneSchema, { ...newData })
589 |       } else {
590 |         const parentPrefix = [].concat(prefix, name)
591 |         const oldData = get(cloneSchema, parentPrefix)
592 |         set(cloneSchema, parentPrefix, { ...oldData, ...newData })
593 |       }
594 |       this.schemaData = cloneSchema
595 |       this.forceUpdate()
596 |       this.handleEmitChange(cloneSchema)
597 |     },
598 |     handleChangeMock() {},
599 |     handleReqBodyRaw() {
600 |       this.rawDialogVisible = true
601 |       this.forceUpdate()
602 |     },
603 |     // 解决嵌套对象属性无法刷新页面问题
604 |     forceUpdate(data) {
605 |       const temp = data || this.schemaData
606 |       this.schemaData = {}
607 |       this.$nextTick(() => {
608 |         this.schemaData = temp
609 |       })
610 |     },
611 |     handleEmitChange(schema) {
612 |       // console.log(schema)
613 |       this.$emit('schema-change', schema)
614 |       this.$emit('update:schema', schema)
615 |     },
616 |   },
617 | }
618 | </script>
619 | 


--------------------------------------------------------------------------------
/src/jsonschema.scss:
--------------------------------------------------------------------------------
  1 | .json-schema-vue-editor {
  2 |   cursor: pointer;
  3 |   .el-input--medium {
  4 |     height: 36px;
  5 |   }
  6 |   .el-input.is-disabled {
  7 |     background-color: #f5f7fa;
  8 |     border-color: #dfe4ed;
  9 |     color: #c0c4cc;
 10 |     cursor: not-allowed;
 11 |   }
 12 |   .hidden {
 13 |     display: none;
 14 |   }
 15 | }
 16 | .json-schema-vue-editor .option-formStyle {
 17 |   /* padding-left: 25px; */
 18 |   padding-top: 8px;
 19 | }
 20 | 
 21 | .json-schema-vue-editor .required-icon {
 22 |   font-size: 1em;
 23 |   color: red;
 24 |   font-weight: bold;
 25 |   padding-left: 5px;
 26 | }
 27 | 
 28 | .json-schema-vue-editor .object-style {
 29 |   /* border-left: 2px dotted gray; */
 30 |   /* padding-left: 8px; */
 31 |   padding-top: 6px;
 32 |   /* margin-left: 20px; */
 33 |   margin-top: 8px;
 34 | }
 35 | 
 36 | .json-schema-vue-editor .col-item-type {
 37 |   text-align: center;
 38 | }
 39 | 
 40 | .json-schema-vue-editor .down-style {
 41 |   cursor: pointer;
 42 | }
 43 | 
 44 | .json-schema-vue-editor .col-item-desc {
 45 |   text-align: center;
 46 | }
 47 | 
 48 | .json-schema-vue-editor .col-item-mock {
 49 |   text-align: center;
 50 |   padding-right: 6px;
 51 | }
 52 | 
 53 | .json-schema-vue-editor .col-item-setting {
 54 |   padding-left: 6px;
 55 |   cursor: pointer;
 56 | }
 57 | 
 58 | .json-schema-vue-editor .plus {
 59 |   color: #2395f1;
 60 | }
 61 | 
 62 | .json-schema-vue-editor .close {
 63 |   color: #ff561b;
 64 | }
 65 | 
 66 | .json-schema-vue-editor .array-type {
 67 |   margin-top: 8px;
 68 | }
 69 | 
 70 | .json-schema-vue-editor .delete-item {
 71 |   padding-right: 8px;
 72 | }
 73 | 
 74 | .json-schema-vue-editor .object-style .name-item .ant-input-group-addon {
 75 |   background-color: unset;
 76 |   border: unset;
 77 | }
 78 | 
 79 | .json-schema-vue-editor
 80 |   .object-style
 81 |   .name-item
 82 |   .ant-input-group
 83 |   > .ant-input:first-child,
 84 | .ant-input-group-addon:first-child {
 85 |   border-bottom-right-radius: 4px;
 86 |   border-top-right-radius: 4px;
 87 | }
 88 | 
 89 | .json-schema-vue-editor .icon-object {
 90 |   color: #0d1b3ea6;
 91 |   font-weight: 400;
 92 |   font-size: 12px;
 93 | }
 94 | 
 95 | .json-schema-vue-editor .down-style-col {
 96 |   width: 10px;
 97 | }
 98 | 
 99 | .json-schema-vue-editor .wrapper {
100 |   padding-left: 8px;
101 | }
102 | 
103 | /* .schema-content {
104 |   margin-left: 20px;
105 | } */
106 | 
107 | .json-schema-vue-editor .adv-set {
108 |   padding-right: 8px;
109 |   color: #00a854;
110 | }
111 | 
112 | .json-schema-vue-editor .type-select-style {
113 |   width: 90%;
114 | }
115 | 
116 | .json-schema-vue-editor-import-modal .ant-tabs-nav .ant-tabs-tab {
117 |   height: auto;
118 | }
119 | 
120 | .json-schema-vue-editor-adv-modal .other-row {
121 |   margin-bottom: 16px;
122 | }
123 | 
124 | .json-schema-vue-editor-adv-modal .other-label {
125 |   text-align: right;
126 |   padding-right: 8px;
127 | }
128 | 
129 | .json-schema-vue-editor-adv-modal .default-setting {
130 |   font-size: 16px;
131 |   font-weight: 400;
132 |   margin-bottom: 16px;
133 |   border-left: 3px solid #2395f1;
134 |   padding-left: 8px;
135 | }
136 | 
137 | .json-schema-vue-editor-adv-modal .ant-modal-body {
138 |   min-height: 400px;
139 | }
140 | 
141 | .json-schema-vue-editor-adv-modal .ant-modal-body .ace_editor {
142 |   min-height: 350px;
143 | }
144 | 
145 | .json-schema-vue-editor-adv-modal-select .format-items-title {
146 |   color: #999;
147 |   position: absolute;
148 |   right: 16px;
149 | }
150 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | 
  3 | export const JSONPATH_JOIN_CHAR = '.';
  4 | export const lang = 'zh_CN';
  5 | export const format = [
  6 |   { name: 'date-time' },
  7 |   { name: 'date' },
  8 |   { name: 'email' },
  9 |   { name: 'hostname' },
 10 |   { name: 'ipv4' },
 11 |   { name: 'ipv6' },
 12 |   { name: 'uri' }
 13 | ];
 14 | export const SCHEMA_TYPE = [
 15 |   'string',
 16 |   'number',
 17 |   'array',
 18 |   'object',
 19 |   'boolean',
 20 |   'integer'
 21 | ];
 22 | export const defaultInitSchemaData = {
 23 |   type: 'object',
 24 |   title: 'title',
 25 |   properties: {}
 26 | };
 27 | export const defaultSchema = {
 28 |   string: {
 29 |     type: 'string'
 30 |   },
 31 |   number: {
 32 |     type: 'number'
 33 |   },
 34 |   array: {
 35 |     type: 'array',
 36 |     items: {
 37 |       type: 'string'
 38 |     }
 39 |   },
 40 |   object: {
 41 |     type: 'object',
 42 |     properties: {}
 43 |   },
 44 |   boolean: {
 45 |     type: 'boolean'
 46 |   },
 47 |   integer: {
 48 |     type: 'integer'
 49 |   }
 50 | };
 51 | 
 52 | // 防抖函数，减少高频触发的函数执行的频率
 53 | // 请在 constructor 里使用:
 54 | 
 55 | // this.func = debounce(this.func, 400);
 56 | export const debounce = (func, wait) => {
 57 |   let timeout;
 58 |   return function() {
 59 |     clearTimeout(timeout);
 60 |     timeout = setTimeout(func, wait);
 61 |   };
 62 | };
 63 | 
 64 | export const getData = (state, keys) => {
 65 |   let curState = state;
 66 |   for (let i = 0; i < keys.length; i++) {
 67 |     curState = curState[keys[i]];
 68 |   }
 69 |   return curState;
 70 | };
 71 | 
 72 | export const setData = function(state, keys, value) {
 73 |   let curState = state;
 74 |   for (let i = 0; i < keys.length - 1; i++) {
 75 |     curState = curState[keys[i]];
 76 |   }
 77 |   curState[keys[keys.length - 1]] = value;
 78 | };
 79 | 
 80 | export const deleteData = function(state, keys) {
 81 |   let curState = state;
 82 |   for (let i = 0; i < keys.length - 1; i++) {
 83 |     curState = curState[keys[i]];
 84 |   }
 85 | 
 86 |   delete curState[keys[keys.length - 1]];
 87 | };
 88 | 
 89 | export const getParentKeys = function(keys) {
 90 |   if (keys.length === 1) return [];
 91 |   const arr = [].concat(keys);
 92 |   arr.splice(keys.length - 1, 1);
 93 |   return arr;
 94 | };
 95 | 
 96 | export const clearSomeFields = function(keys, data) {
 97 |   const newData = Object.assign({}, data);
 98 |   keys.forEach(key => {
 99 |     delete newData[key];
100 |   });
101 |   return newData;
102 | };
103 | 
104 | function getFieldstitle(data) {
105 |   const requiredtitle = [];
106 |   Object.keys(data).map(title => {
107 |     requiredtitle.push(title);
108 |   });
109 | 
110 |   return requiredtitle;
111 | }
112 | 
113 | export function handleSchemaRequired(schema, checked) {
114 |   if (schema.type === 'object') {
115 |     const requiredtitle = getFieldstitle(schema.properties);
116 | 
117 |     // schema.required = checked ? [].concat(requiredtitle) : [];
118 |     if (checked) {
119 |       schema.required = [].concat(requiredtitle);
120 |     } else {
121 |       delete schema.required;
122 |     }
123 | 
124 |     handleObject(schema.properties, checked);
125 |   } else if (schema.type === 'array') {
126 |     handleSchemaRequired(schema.items, checked);
127 |   } else {
128 |     return schema;
129 |   }
130 | }
131 | 
132 | function handleObject(properties, checked) {
133 |   for (var key in properties) {
134 |     if (properties[key].type === 'array' || properties[key].type === 'object') {
135 |       handleSchemaRequired(properties[key], checked);
136 |     }
137 |   }
138 | }
139 | 
140 | export function cloneObject(obj) {
141 |   if (typeof obj === 'object') {
142 |     if (Array.isArray(obj)) {
143 |       var newArr = [];
144 |       obj.forEach(function(item, index) {
145 |         newArr[index] = cloneObject(item);
146 |       });
147 |       return newArr;
148 |     } else {
149 |       var newObj = {};
150 |       for (var key in obj) {
151 |         newObj[key] = cloneObject(obj[key]);
152 |       }
153 |       return newObj;
154 |     }
155 |   } else {
156 |     return obj;
157 |   }
158 | }
159 | 
160 | export const uuid = () => {
161 |   return Math.random()
162 |     .toString(16)
163 |     .substr(2, 5);
164 | };
165 | 
166 | export const log = (...args) => {
167 |   if (process && process.env && process.env.NODE_ENV !== 'production') {
168 |     if (
169 |       args[0] &&
170 |       args[0] instanceof Vue &&
171 |       args[0].$vnode['componentOptions']
172 |     ) {
173 |       console.log(
174 |         `component[${args[0].$vnode['componentOptions']['tag']}]:`,
175 |         ...args.slice(1)
176 |       );
177 |     } else {
178 |       console.log(`LOG>>>`, ...args);
179 |     }
180 |   }
181 | };
182 | 
183 | /**
184 |  * val值不为空字符，null，undefined
185 |  */
186 | export const isNotNil = val => {
187 |   const arr = [undefined, null, ''];
188 |   return !arr.includes(val);
189 | };
190 | 
191 | /**
192 |  * form表单值校验是否为空，有值为空则返回true，值都正确则返回false
193 |  */
194 | export const isFormValid = obj => {
195 |   if (typeof obj !== 'object') return true;
196 |   const keys = Object.keys(obj);
197 |   return keys.some(key => {
198 |     return !isNotNil(obj[key]);
199 |   });
200 | };
201 | /**
202 |  * 只返回有值得属性新对象
203 |  * @param {Object} formData 表单对象
204 |  */
205 | export const getValidFormVal = formData => {
206 |   const obj = {};
207 |   const keys = Object.keys(formData);
208 |   keys.forEach(key => {
209 |     if (isNotNil(formData[key])) {
210 |       obj[key] = formData[key];
211 |     }
212 |   });
213 | 
214 |   return obj;
215 | };
216 | 


--------------------------------------------------------------------------------