Commit d10e8154 d10e8154b95dd0b08946e4f0bf583907df50debb by zhanghao

commit

1 parent b03abf27
1 ## 2.2.14 2020-10-13
2
3 - Add Preview Mode
4
5 ## 2.2.14 2020-07-27
6
7 - Allow add specific style for float and integer numbers [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/51)
8
9
10 ## 2.2.13 2020-07-14
11
12 - Add timeformat props to support custom time format [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/48)
...\ No newline at end of file ...\ No newline at end of file
1 MIT License
2
3 Copyright (c) 2018 陈峰
4
5 Permission is hereby granted, free of charge, to any person obtaining a copy
6 of this software and associated documentation files (the "Software"), to deal
7 in the Software without restriction, including without limitation the rights
8 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 copies of the Software, and to permit persons to whom the Software is
10 furnished to do so, subject to the following conditions:
11
12 The above copyright notice and this permission notice shall be included in all
13 copies or substantial portions of the Software.
14
15 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 SOFTWARE.
1 # vue-json-viewer
2
3 [中文版](https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md)
4
5 Simple JSON viewer component, for Vue.js 2.
6
7 Support for incremental update components
8
9 [![Travis](https://img.shields.io/travis/chenfengjw163/vue-json-viewer/master.svg?style=flat-square)](https://travis-ci.org/chenfengjw163/vue-json-viewer)
10 [![npm](https://img.shields.io/npm/v/vue-json-viewer.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-viewer)
11 ![npm](https://img.shields.io/npm/dw/vue-json-viewer.svg?style=flat-square)
12
13 - [Installing](#installing)
14 - [Example](#example)
15 - [Options](#options)
16 - [Listeners](#listeners)
17 - [Slots](#slots)
18 - [Theming](#theming)
19
20 ## Installing
21 Using npm:
22 ```
23 $ npm install vue-json-viewer --save
24 ```
25
26 Using yarn:
27 ```
28 $ yarn add vue-json-viewer
29 ```
30
31 ## Example
32
33 ``` html
34 <json-viewer :value="jsonData"></json-viewer>
35
36 <hr />
37
38 <json-viewer
39 :value="jsonData"
40 :expand-depth=5
41 copyable
42 boxed
43 sort></json-viewer>
44 ```
45
46 ``` js
47 import Vue from 'vue'
48 import JsonViewer from 'vue-json-viewer'
49
50 // Import JsonViewer as a Vue.js plugin
51 Vue.use(JsonViewer)
52 // or
53 // components: {JsonViewer}
54
55
56 new Vue({
57 el: '#app',
58 data() {
59 return {
60 jsonData: {
61 total: 25,
62 limit: 10,
63 skip: 0,
64 links: {
65 previous: undefined,
66 next: function () {},
67 },
68 data: [
69 {
70 id: '5968fcad629fa84ab65a5247',
71 firstname: 'Ada',
72 lastname: 'Lovelace',
73 awards: null,
74 known: [
75 'mathematics',
76 'computing'
77 ],
78 position: {
79 lat: 44.563836,
80 lng: 6.495139
81 },
82 description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
83 chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
84 the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
85 and published the first algorithm intended to be carried out by such a machine.
86 As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
87 bornAt: '1815-12-10T00:00:00.000Z',
88 diedAt: '1852-11-27T00:00:00.000Z'
89 }, {
90 id: '5968fcad629fa84ab65a5246',
91 firstname: 'Grace',
92 lastname: 'Hopper',
93 awards: [
94 'Defense Distinguished Service Medal',
95 'Legion of Merit',
96 'Meritorious Service Medal',
97 'American Campaign Medal',
98 'World War II Victory Medal',
99 'National Defense Service Medal',
100 'Armed Forces Reserve Medal',
101 'Naval Reserve Medal',
102 'Presidential Medal of Freedom'
103 ],
104 known: null,
105 position: {
106 lat: 43.614624,
107 lng: 3.879995
108 },
109 description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
110 was an American computer scientist and United States Navy rear admiral.
111 One of the first programmers of the Harvard Mark I computer,
112 she was a pioneer of computer programming who invented one of the first compiler related tools.
113 She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
114 an early high-level programming language still in use today.`,
115 bornAt: '1815-12-10T00:00:00.000Z',
116 diedAt: '1852-11-27T00:00:00.000Z'
117 }
118 ]
119 }
120 }
121 }
122 })
123 ```
124 ### SSR
125 ``` js
126 import JsonViewer from 'vue-json-viewer/ssr'
127
128 // Import JsonViewer as a Vue.js plugin
129 Vue.use(JsonViewer)
130 // or
131 // components: {JsonViewer}
132 ```
133 and
134
135 ``` js
136 import 'vue-json-viewer/style.css'
137 ```
138
139
140 ### Preview
141 ![preview](./example/preview.png)
142
143
144 ## Options
145
146 | Property | Description | Default |
147 | ----------- |:------------- | ----------- |
148 | `value` | JSON data (can be used with `v-model`) | **Required** |
149 | `expand-depth` | Collapse blocs under this depth | `1` |
150 | `copyable` | Display the copy button, you can customize copy text just set `{copyText: 'copy', copiedText: 'copied', timeout: 2000}` or set `true` use default copytext | `false` |
151 | `sort` | Sort keys before displaying | `false` |
152 | `boxed` | Add a fancy "boxed" style to component | `false` |
153 | `theme` | Add a custom CSS class for theming purposes | `jv-light` |
154 | `expanded` | Default expand the view | `false` |
155 | `timeformat` | custom time format function | time => time.toLocaleString() |
156 | `preview-mode` | no expand mode | `false` |
157
158 ## Listeners
159
160 | Listener | Description | Value |
161 | ----------- |:------------- | ----------- |
162 | `copied` | Emits copyEvent after text copied | Clipboard success event |
163
164 ## Slots
165
166 | Name | Description | Scope |
167 | ----------- |:------------- | ----------- |
168 | `copy` | Custom content for copy button | `{copied: boolean}` |
169
170 ## Theming
171
172 To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps:
173 1. add `theme="my-awesome-json-theme"` to the JsonViewer component
174 2. copy-pasta and customize this SCSS template:
175
176 ``` scss
177 // values are default one from jv-light template
178 .my-awesome-json-theme {
179 background: #fff;
180 white-space: nowrap;
181 color: #525252;
182 font-size: 14px;
183 font-family: Consolas, Menlo, Courier, monospace;
184
185 .jv-ellipsis {
186 color: #999;
187 background-color: #eee;
188 display: inline-block;
189 line-height: 0.9;
190 font-size: 0.9em;
191 padding: 0px 4px 2px 4px;
192 border-radius: 3px;
193 vertical-align: 2px;
194 cursor: pointer;
195 user-select: none;
196 }
197 .jv-button { color: #49b3ff }
198 .jv-key { color: #111111 }
199 .jv-item {
200 &.jv-array { color: #111111 }
201 &.jv-boolean { color: #fc1e70 }
202 &.jv-function { color: #067bca }
203 &.jv-number { color: #fc1e70 }
204 &.jv-number-float { color: #fc1e70 }
205 &.jv-number-integer { color: #fc1e70 }
206 &.jv-object { color: #111111 }
207 &.jv-undefined { color: #e08331 }
208 &.jv-string {
209 color: #42b983;
210 word-break: break-word;
211 white-space: normal;
212 }
213 }
214 .jv-code {
215 .jv-toggle {
216 &:before {
217 padding: 0px 2px;
218 border-radius: 2px;
219 }
220 &:hover {
221 &:before {
222 background: #eee;
223 }
224 }
225 }
226 }
227 }
228 ```
1 {
2 "_from": "vue-json-viewer",
3 "_id": "vue-json-viewer@2.2.15",
4 "_inBundle": false,
5 "_integrity": "sha512-Trn4iyX9TUOmHSq9BAT+MXErl9jXwqP/72+HokqBXByHfHMKPEeKAvcv91oL4zR5xzL92O72W2J+aMBE7ly64w==",
6 "_location": "/vue-json-viewer",
7 "_phantomChildren": {},
8 "_requested": {
9 "type": "tag",
10 "registry": true,
11 "raw": "vue-json-viewer",
12 "name": "vue-json-viewer",
13 "escapedName": "vue-json-viewer",
14 "rawSpec": "",
15 "saveSpec": null,
16 "fetchSpec": "latest"
17 },
18 "_requiredBy": [
19 "#USER",
20 "/"
21 ],
22 "_resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.15.tgz",
23 "_shasum": "856bd50d23c84471b2445bfda3e746a018c33dd2",
24 "_spec": "vue-json-viewer",
25 "_where": "/Users/zhanghao/brcode/br-client",
26 "author": {
27 "name": "陈峰",
28 "email": "chenfengjw@hotmail.com"
29 },
30 "bugs": {
31 "url": "https://github.com/chenfengjw163/vue-json-viewer/issues"
32 },
33 "bundleDependencies": false,
34 "contributors": [
35 {
36 "name": "陈峰",
37 "email": "chenfengjw@hotmail.com"
38 },
39 {
40 "name": "Sacha Stafyniak",
41 "email": "sacha.stafyniak@gmail.com"
42 }
43 ],
44 "dependencies": {
45 "clipboard": "^2.0.4",
46 "vue": "^2.6.9"
47 },
48 "deprecated": false,
49 "description": "vuejs展示json的组件",
50 "devDependencies": {
51 "autoprefixer": "^7.1.5",
52 "babel-core": "^6.26.0",
53 "babel-eslint": "^8.0.1",
54 "babel-loader": "^7.1.2",
55 "babel-plugin-syntax-jsx": "^6.18.0",
56 "babel-plugin-transform-object-rest-spread": "^6.26.0",
57 "babel-plugin-transform-runtime": "^6.23.0",
58 "babel-plugin-transform-vue-jsx": "^3.7.0",
59 "babel-preset-es2015": "^6.24.1",
60 "babel-runtime": "^6.26.0",
61 "css-loader": "^3.0.0",
62 "eslint": "^6.0.1",
63 "eslint-plugin-vue": "^5.0.0-beta.3",
64 "file-loader": "^1.1.5",
65 "html-webpack-plugin": "^3.2.0",
66 "mini-css-extract-plugin": "^0.5.0",
67 "node-sass": "^4.12.0",
68 "optimize-css-assets-webpack-plugin": "^5.0.3",
69 "postcss-loader": "^3.0.0",
70 "sass-loader": "^7.1.0",
71 "style-loader": "^0.19.0",
72 "uglifyjs-webpack-plugin": "^2.1.2",
73 "url-loader": "^0.6.2",
74 "vue-loader": "^15.7.0",
75 "vue-style-loader": "^4.1.2",
76 "vue-template-compiler": "^2.6.9",
77 "webpack": "=4.29.6",
78 "webpack-bundle-analyzer": "^3.3.2",
79 "webpack-cli": "^3.3.11",
80 "webpack-dev-server": "^3.10.3",
81 "webpack-merge": "^4.1.0"
82 },
83 "directories": {
84 "lib": "./lib",
85 "example": "./example"
86 },
87 "files": [
88 "vue-json-viewer.js",
89 "ssr.js",
90 "style.css"
91 ],
92 "homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
93 "keywords": [
94 "vue",
95 "json"
96 ],
97 "license": "MIT",
98 "main": "vue-json-viewer.js",
99 "name": "vue-json-viewer",
100 "repository": {
101 "type": "git",
102 "url": "git+https://github.com/chenfengjw163/vue-json-viewer.git"
103 },
104 "scripts": {
105 "build": "npm run build:browser && npm run build:ssr",
106 "build:browser": "webpack --config ./build/webpack.config.js",
107 "build:ssr": "webpack --config ./build/webpack.ssr.config.js",
108 "example": "webpack-dev-server --config ./example/build/webpack.dev.conf.js"
109 },
110 "version": "2.2.15"
111 }
1 .jv-node{position:relative}.jv-node:after{content:","}.jv-node:last-of-type:after{content:""}.jv-node.toggle{margin-left:13px!important}.jv-node .jv-node{margin-left:25px}.jv-container{box-sizing:border-box;position:relative}.jv-container.boxed{border:1px solid #eee;border-radius:6px}.jv-container.boxed:hover{box-shadow:0 2px 7px rgba(0,0,0,.15);border-color:transparent;position:relative}.jv-container.jv-light{background:#fff;white-space:nowrap;color:#525252;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.jv-container.jv-light .jv-ellipsis{color:#999;background-color:#eee;display:inline-block;line-height:.9;font-size:.9em;padding:0 4px 2px;margin:0 4px;border-radius:3px;vertical-align:2px;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.jv-container.jv-light .jv-button{color:#49b3ff}.jv-container.jv-light .jv-key{color:#111;margin-right:4px}.jv-container.jv-light .jv-item.jv-array{color:#111}.jv-container.jv-light .jv-item.jv-boolean{color:#fc1e70}.jv-container.jv-light .jv-item.jv-function{color:#067bca}.jv-container.jv-light .jv-item.jv-number{color:#fc1e70}.jv-container.jv-light .jv-item.jv-object{color:#111}.jv-container.jv-light .jv-item.jv-undefined{color:#e08331}.jv-container.jv-light .jv-item.jv-string{color:#42b983;word-break:break-word;white-space:normal}.jv-container.jv-light .jv-code .jv-toggle:before{padding:0 2px;border-radius:2px}.jv-container.jv-light .jv-code .jv-toggle:hover:before{background:#eee}.jv-container .jv-code{overflow:hidden;padding:20px}.jv-container .jv-code.boxed{max-height:300px}.jv-container .jv-code.open{max-height:none!important;overflow:visible;overflow-x:auto;padding-bottom:45px}.jv-container .jv-toggle{background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjNjY2IiBkPSJNMCAwbDggOC04IDh6Ii8+PC9zdmc+);background-repeat:no-repeat;background-size:contain;background-position:50%;cursor:pointer;width:10px;height:10px;margin-right:2px;display:inline-block;-webkit-transition:-webkit-transform .1s;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s,-webkit-transform .1s}.jv-container .jv-toggle.open{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.jv-container .jv-more{position:absolute;z-index:1;bottom:0;left:0;right:0;height:40px;width:100%;text-align:center;cursor:pointer}.jv-container .jv-more .jv-toggle{position:relative;top:40%;z-index:2;color:#888;-webkit-transition:all .1s;transition:all .1s;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.jv-container .jv-more .jv-toggle.open{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.jv-container .jv-more:after{content:"";width:100%;height:100%;position:absolute;bottom:0;left:0;z-index:1;background:-webkit-linear-gradient(top,transparent 20%,hsla(0,0%,90.2%,.3));background:linear-gradient(180deg,transparent 20%,hsla(0,0%,90.2%,.3));-webkit-transition:all .1s;transition:all .1s}.jv-container .jv-more:hover .jv-toggle{top:50%;color:#111}.jv-container .jv-more:hover:after{background:-webkit-linear-gradient(top,transparent 20%,hsla(0,0%,90.2%,.3));background:linear-gradient(180deg,transparent 20%,hsla(0,0%,90.2%,.3))}.jv-container .jv-button{position:relative;cursor:pointer;display:inline-block;padding:5px;z-index:5}.jv-container .jv-button.copied{opacity:.4;cursor:default}.jv-container .jv-tooltip{position:absolute;right:15px;top:10px}.jv-container .j-icon{font-size:12px}
...\ No newline at end of file ...\ No newline at end of file
...@@ -10750,6 +10750,15 @@ ...@@ -10750,6 +10750,15 @@
10750 "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", 10750 "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
10751 "dev": true 10751 "dev": true
10752 }, 10752 },
10753 "vue-json-viewer": {
10754 "version": "2.2.15",
10755 "resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.15.tgz",
10756 "integrity": "sha512-Trn4iyX9TUOmHSq9BAT+MXErl9jXwqP/72+HokqBXByHfHMKPEeKAvcv91oL4zR5xzL92O72W2J+aMBE7ly64w==",
10757 "requires": {
10758 "clipboard": "^2.0.4",
10759 "vue": "^2.6.9"
10760 }
10761 },
10753 "vue-loader": { 10762 "vue-loader": {
10754 "version": "13.7.3", 10763 "version": "13.7.3",
10755 "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz", 10764 "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",
......
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 "qs": "^6.9.4", 15 "qs": "^6.9.4",
16 "vue": "^2.5.2", 16 "vue": "^2.5.2",
17 "vue-clipboard2": "^0.3.1", 17 "vue-clipboard2": "^0.3.1",
18 "vue-json-viewer": "^2.2.15",
18 "vue-router": "^3.0.1" 19 "vue-router": "^3.0.1"
19 }, 20 },
20 "devDependencies": { 21 "devDependencies": {
......
...@@ -8,6 +8,7 @@ import Element from 'element-ui'; ...@@ -8,6 +8,7 @@ import Element from 'element-ui';
8 import 'element-ui/lib/theme-chalk/index.css'; 8 import 'element-ui/lib/theme-chalk/index.css';
9 import qs from 'qs' 9 import qs from 'qs'
10 import vueClipboard from 'vue-clipboard2' 10 import vueClipboard from 'vue-clipboard2'
11 import JsonViewer from 'vue-json-viewer'
11 12
12 Vue.config.productionTip = false 13 Vue.config.productionTip = false
13 Vue.prototype.$http = axios 14 Vue.prototype.$http = axios
...@@ -17,6 +18,7 @@ axios.defaults.baseURL = 'http://192.168.8.113:9090' ...@@ -17,6 +18,7 @@ axios.defaults.baseURL = 'http://192.168.8.113:9090'
17 18
18 Vue.use(Element, { size: 'small', zIndex: 3000 }); 19 Vue.use(Element, { size: 'small', zIndex: 3000 });
19 Vue.use(vueClipboard); 20 Vue.use(vueClipboard);
21 Vue.use(JsonViewer)
20 22
21 router.beforeEach((to, from, next) => { 23 router.beforeEach((to, from, next) => {
22 if (to.meta.title) { 24 if (to.meta.title) {
......
1 <template xmlns:el-col="http://www.w3.org/1999/html">
2 <div>
3 <json-viewer
4 :value="jsonData"
5 :expand-depth=10
6 copyable></json-viewer>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 data() {
13 return {
14 method: this.$route.query.method,
15 biz_data: this.$route.query.biz_data,
16 phone: this.$route.query.phone,
17 path: this.$route.query.path,
18 type: this.$route.query.type,
19 jsonData: ''
20 }
21 },
22 mounted() {
23 this.activity()
24 },
25 methods: {
26 activity() {
27 const loading = this.$loading({
28 lock: true,
29 text: '加载中...',
30 spinner: 'el-icon-loading',
31 background: 'rgba(0, 0, 0, 0.7)'
32 });
33 let config = {
34 headers: {
35 'Content-Type': 'application/x-www-form-urlencoded'
36 }
37 }
38 this.$http.get('/tool/apiTest?'+this.$qs.stringify({
39 method: this.method,
40 biz_data: this.biz_data,
41 phone: this.phone,
42 path: this.path,
43 type: this.type
44 }),config).then((res)=>{
45 console.log(res.data)
46 this.jsonData=res.data
47 loading.close();
48 }).catch(error=>{
49 console.log(error);
50 loading.close();
51 this.$message({
52 showClose: true,
53 message: '服务器处理失败,请核对参数!',
54 type: 'error'
55 });
56 })
57 }
58 }
59 }
60 </script>
...@@ -170,24 +170,6 @@ ...@@ -170,24 +170,6 @@
170 </el-row> 170 </el-row>
171 <el-row style="margin-bottom: 15px;"> 171 <el-row style="margin-bottom: 15px;">
172 <el-col :span="8"> 172 <el-col :span="8">
173 <el-form ref="changeOrg" :model="changeOrg" label-width="0px">
174 <el-card class="darkred" shadow="always">
175 <div slot="header" class="clearfix">
176 <span>开通切换任意机构权限</span>
177 </div>
178 <div class="text item">
179 <el-form-item>
180 <el-input placeholder="请输入手机号" v-model="changeOrg.phone" clearable></el-input>
181 </el-form-item>
182 <div style="margin: 15px 0;"></div>
183 <el-form-item>
184 <el-button round @click="changeOrgSubmit">开通权限</el-button>
185 </el-form-item>
186 </div>
187 </el-card>
188 </el-form>
189 </el-col>
190 <el-col :span="8">
191 <el-form ref="queryPhoneCode" :model="queryPhoneCode" label-width="0px"> 173 <el-form ref="queryPhoneCode" :model="queryPhoneCode" label-width="0px">
192 <el-card class="darkred" shadow="always"> 174 <el-card class="darkred" shadow="always">
193 <div slot="header" class="clearfix"> 175 <div slot="header" class="clearfix">
...@@ -225,49 +207,44 @@ ...@@ -225,49 +207,44 @@
225 </el-dialog> 207 </el-dialog>
226 </el-col> 208 </el-col>
227 <el-col :span="8"> 209 <el-col :span="8">
228 <el-form ref="createCluesYoubaoe" :model="createCluesYoubaoe" label-width="0px"> 210 <el-form ref="apiTest" :model="apiTest" label-width="0px">
229 <el-card class="darkred" shadow="always"> 211 <el-card class="darkred" shadow="always">
230 <div slot="header" class="clearfix"> 212 <div slot="header" class="clearfix">
231 <span>生成线索-活动类型-有预约保额</span> 213 <span>接口访问测试</span>
232 </div> 214 </div>
233 <div class="text item"> 215 <div class="text item">
234 <el-form-item> 216 <el-form-item>
235 <el-input placeholder="代理人UID" v-model="createCluesYoubaoe.agentUid" clearable></el-input> 217 <el-select v-model="apiTest.path" placeholder="请选择接口服务">
218 <el-option
219 v-for="item in apiTestPathoptions"
220 :key="item.value"
221 :label="item.label"
222 :value="item.value">
223 </el-option>
224 </el-select>
236 </el-form-item> 225 </el-form-item>
237 <div style="margin: 15px 0;"></div>
238 <el-form-item> 226 <el-form-item>
239 <el-input placeholder="该代理人名下的健康坊用户UID" v-model="createCluesYoubaoe.customUid" clearable></el-input> 227 <el-input placeholder="请输入method" v-model="apiTest.method" clearable></el-input>
240 </el-form-item> 228 </el-form-item>
241 <el-form-item> 229 <el-form-item>
242 <el-input placeholder="正在进行中的活动ID" v-model="createCluesYoubaoe.actId" clearable></el-input> 230 <el-input placeholder="请输入biz_data" v-model="apiTest.biz_data" clearable></el-input>
243 </el-form-item> 231 </el-form-item>
244 <div style="margin: 15px 0;"></div>
245 <el-form-item> 232 <el-form-item>
246 <el-button round @click="createCluesYoubaoeSubmit">生成线索</el-button> 233 <el-input placeholder="请输入手机号,如果token已失效,请在app进行登录" v-model="apiTest.phone" clearable></el-input>
247 </el-form-item> 234 </el-form-item>
248 </div>
249 </el-card>
250 </el-form>
251 </el-col>
252 </el-row>
253 <el-row style="margin-bottom: 15px;">
254 <el-col :span="8">
255 <el-form ref="deleteClues" :model="deleteClues" label-width="0px">
256 <el-card class="darkred" shadow="always">
257 <div slot="header" class="clearfix">
258 <span>删除线索</span>
259 </div>
260 <div class="text item">
261 <el-form-item>
262 <el-input placeholder="代理人UID" v-model="deleteClues.agentUid" clearable></el-input>
263 </el-form-item>
264 <div style="margin: 15px 0;"></div>
265 <el-form-item> 235 <el-form-item>
266 <el-input placeholder="该代理人名下的健康坊用户UID" v-model="deleteClues.customUid" clearable></el-input> 236 <el-select v-model="apiTest.huanjing" placeholder="请选择执行环境">
237 <el-option
238 v-for="item in apiTestoptions"
239 :key="item.value"
240 :label="item.label"
241 :value="item.value">
242 </el-option>
243 </el-select>
267 </el-form-item> 244 </el-form-item>
268 <div style="margin: 15px 0;"></div> 245 <div style="margin: 15px 0;"></div>
269 <el-form-item> 246 <el-form-item>
270 <el-button round @click="onSubmit">删除线索</el-button> 247 <el-button round @click="apiTestSubmit">调用接口</el-button>
271 </el-form-item> 248 </el-form-item>
272 </div> 249 </div>
273 </el-card> 250 </el-card>
...@@ -320,6 +297,73 @@ ...@@ -320,6 +297,73 @@
320 </el-dialog> 297 </el-dialog>
321 </el-col> 298 </el-col>
322 </el-row> 299 </el-row>
300 <el-row style="margin-bottom: 15px;">
301 <el-col :span="8">
302 <el-form ref="changeOrg" :model="changeOrg" label-width="0px">
303 <el-card class="darkred" shadow="always">
304 <div slot="header" class="clearfix">
305 <span>开通切换任意机构权限</span>
306 </div>
307 <div class="text item">
308 <el-form-item>
309 <el-input placeholder="请输入手机号" v-model="changeOrg.phone" clearable></el-input>
310 </el-form-item>
311 <div style="margin: 15px 0;"></div>
312 <el-form-item>
313 <el-button round @click="changeOrgSubmit">开通权限</el-button>
314 </el-form-item>
315 </div>
316 </el-card>
317 </el-form>
318 </el-col>
319 <el-col :span="8">
320 <el-form ref="deleteClues" :model="deleteClues" label-width="0px">
321 <el-card class="darkred" shadow="always">
322 <div slot="header" class="clearfix">
323 <span>删除线索</span>
324 </div>
325 <div class="text item">
326 <el-form-item>
327 <el-input placeholder="代理人UID" v-model="deleteClues.agentUid" clearable></el-input>
328 </el-form-item>
329 <div style="margin: 15px 0;"></div>
330 <el-form-item>
331 <el-input placeholder="该代理人名下的健康坊用户UID" v-model="deleteClues.customUid" clearable></el-input>
332 </el-form-item>
333 <div style="margin: 15px 0;"></div>
334 <el-form-item>
335 <el-button round @click="onSubmit">删除线索</el-button>
336 </el-form-item>
337 </div>
338 </el-card>
339 </el-form>
340 </el-col>
341 <el-col :span="8">
342 <el-form ref="createCluesYoubaoe" :model="createCluesYoubaoe" label-width="0px">
343 <el-card class="darkred" shadow="always">
344 <div slot="header" class="clearfix">
345 <span>生成线索-活动类型-有预约保额</span>
346 </div>
347 <div class="text item">
348 <el-form-item>
349 <el-input placeholder="代理人UID" v-model="createCluesYoubaoe.agentUid" clearable></el-input>
350 </el-form-item>
351 <div style="margin: 15px 0;"></div>
352 <el-form-item>
353 <el-input placeholder="该代理人名下的健康坊用户UID" v-model="createCluesYoubaoe.customUid" clearable></el-input>
354 </el-form-item>
355 <el-form-item>
356 <el-input placeholder="正在进行中的活动ID" v-model="createCluesYoubaoe.actId" clearable></el-input>
357 </el-form-item>
358 <div style="margin: 15px 0;"></div>
359 <el-form-item>
360 <el-button round @click="createCluesYoubaoeSubmit">生成线索</el-button>
361 </el-form-item>
362 </div>
363 </el-card>
364 </el-form>
365 </el-col>
366 </el-row>
323 </div> 367 </div>
324 </template> 368 </template>
325 369
...@@ -487,7 +531,37 @@ ...@@ -487,7 +531,37 @@
487 myQueryUserInfo: '', 531 myQueryUserInfo: '',
488 changeOrg: { 532 changeOrg: {
489 phone: '' 533 phone: ''
490 } 534 },
535 apiTest: {
536 path: [],
537 method: '',
538 biz_data: '',
539 phone: '',
540 huanjing: []
541 },
542 apiTestoptions: [{
543 value: '0',
544 label: '测试环境'
545 }, {
546 value: '1',
547 label: '线上环境'
548 }],
549 apiTestPathoptions: [{
550 value: 'business',
551 label: 'business'
552 }, {
553 value: 'insurance',
554 label: 'insurance'
555 }, {
556 value: 'activity',
557 label: 'activity'
558 }, {
559 value: 'ucenter',
560 label: 'ucenter'
561 }, {
562 value: 'peripheral',
563 label: 'peripheral'
564 }]
491 // activityConfigRules: { 565 // activityConfigRules: {
492 // id: [ 566 // id: [
493 // { required: true, message: '请输入活动ID', trigger: 'blur' } 567 // { required: true, message: '请输入活动ID', trigger: 'blur' }
...@@ -815,7 +889,12 @@ ...@@ -815,7 +889,12 @@
815 type: 'error' 889 type: 'error'
816 }); 890 });
817 }) 891 })
818 } 892 },
893 apiTestSubmit() {
894 const {href} = this.$router.resolve({ name:'apiTest', query:
895 {method: this.apiTest.method, biz_data: this.apiTest.biz_data, phone: this.apiTest.phone, path: this.apiTest.path.toString(), type: this.apiTest.huanjing.toString()}})
896 window.open(href, '_blank')
897 },
819 } 898 }
820 } 899 }
821 </script> 900 </script>
......
...@@ -5,6 +5,7 @@ import tool from '@/page/tool' ...@@ -5,6 +5,7 @@ import tool from '@/page/tool'
5 import activityConfig from '@/page/activityConfig' 5 import activityConfig from '@/page/activityConfig'
6 import activityConfigRedis from '@/page/activityConfigRedis' 6 import activityConfigRedis from '@/page/activityConfigRedis'
7 import userInfo from '@/page/userInfo' 7 import userInfo from '@/page/userInfo'
8 import apiTest from '@/page/apiTest'
8 9
9 Vue.use(Router) 10 Vue.use(Router)
10 11
...@@ -56,6 +57,14 @@ export default new Router({ ...@@ -56,6 +57,14 @@ export default new Router({
56 } 57 }
57 } 58 }
58 ] 59 ]
60 },
61 {
62 path: '/apiTest',
63 component: apiTest,
64 name: 'apiTest',
65 meta: {
66 title: '测试工具平台'
67 }
59 } 68 }
60 ] 69 ]
61 }) 70 })
......