ui / vuedashboard

Go to a project
Toggle navigation
Toggle navigation pinning
孙玉明
91262a40 1 parent 6e7cc2ce

vuex简写

Inline Side-by-side
Showing 12 changed files with 139 additions and 120 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="en"> 2 +<html lang="zh-cmn-Hans-CN">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
......
...@@ -6,14 +6,14 @@ ...@@ -6,14 +6,14 @@
6 </template> 6 </template>
7 7
8 <script> 8 <script>
9 -import setting from "./components/setting"; 9 +import Setting from "./components/Setting";
10 -import layout from "./components/layout"; 10 +import Layout from "./components/Layout";
11 11
12 export default { 12 export default {
13 name: "app", 13 name: "app",
14 components: { 14 components: {
15 - setting, 15 + Setting,
16 - layout 16 + Layout
17 }, 17 },
18 mounted() { 18 mounted() {
19 this.$inventory 19 this.$inventory
......
1 -import axios from "axios"; 1 +import axios from 'axios';
2 2
3 axios.interceptors.request.use( 3 axios.interceptors.request.use(
4 - config => { 4 + (config) => {
5 config.data = JSON.stringify(config.data); 5 config.data = JSON.stringify(config.data);
6 - config.headers["Authorization"] = 6 + config.headers['Authorization'] =
7 - "Basic c3VueXVtaW5nL3N1bnl1bWluZzoxMjM0NTY3OA=="; 7 + 'Basic c3VueXVtaW5nL3N1bnl1bWluZzoxMjM0NTY3OA==';
8 return config; 8 return config;
9 }, 9 },
10 - error => { 10 + (error) => {
11 return Promise.reject(error); 11 return Promise.reject(error);
12 } 12 }
13 ); 13 );
...@@ -16,12 +16,12 @@ function get(url, params = {}) { ...@@ -16,12 +16,12 @@ function get(url, params = {}) {
16 return new Promise((resolve, reject) => { 16 return new Promise((resolve, reject) => {
17 axios 17 axios
18 .get(url, { 18 .get(url, {
19 - params: params 19 + params: params,
20 }) 20 })
21 - .then(response => { 21 + .then((response) => {
22 resolve(response.data); 22 resolve(response.data);
23 }) 23 })
24 - .catch(err => { 24 + .catch((err) => {
25 reject(err); 25 reject(err);
26 }); 26 });
27 }); 27 });
...@@ -30,10 +30,10 @@ function get(url, params = {}) { ...@@ -30,10 +30,10 @@ function get(url, params = {}) {
30 function post(url, data = {}, config = {}) { 30 function post(url, data = {}, config = {}) {
31 return new Promise((resolve, reject) => { 31 return new Promise((resolve, reject) => {
32 axios.post(url, data, config).then( 32 axios.post(url, data, config).then(
33 - response => { 33 + (response) => {
34 resolve(response.data); 34 resolve(response.data);
35 }, 35 },
36 - err => { 36 + (err) => {
37 reject(err); 37 reject(err);
38 } 38 }
39 ); 39 );
...@@ -43,18 +43,16 @@ function post(url, data = {}, config = {}) { ...@@ -43,18 +43,16 @@ function post(url, data = {}, config = {}) {
43 function put(url, data = {}, config = {}) { 43 function put(url, data = {}, config = {}) {
44 return new Promise((resolve, reject) => { 44 return new Promise((resolve, reject) => {
45 axios.put(url, data, config).then( 45 axios.put(url, data, config).then(
46 - response => { 46 + (response) => {
47 resolve(response.data); 47 resolve(response.data);
48 }, 48 },
49 - err => { 49 + (err) => {
50 reject(err); 50 reject(err);
51 } 51 }
52 ); 52 );
53 }); 53 });
54 } 54 }
55 55
56 -export {
57 - get,
58 - post,
59 - put
60 -}
...\ No newline at end of file ...\ No newline at end of file
56 +let NAMESPACE = 'application/vnd.com.nsn.cumulocity.';
57 +
58 +export { get, post, put, NAMESPACE };
......
1 -import { get, post, put } from './basic'; 1 +import { get, post, put, NAMESPACE } from './basic';
2 2
3 let path = '/inventory/managedObjects'; 3 let path = '/inventory/managedObjects';
4 -let NAMESPACE = 'application/vnd.com.nsn.cumulocity.';
5 let config = { 4 let config = {
6 headers: { 5 headers: {
7 'Content-Type': `${NAMESPACE}managedObject+json`, 6 'Content-Type': `${NAMESPACE}managedObject+json`,
......
1 +<template>
2 + <a-modal
3 + title="添加小部件"
4 + centered
5 + v-model="this.visible"
6 + @ok="add"
7 + @cancel="cancel"
8 + :destroyOnClose="true"
9 + :maskClosable="false"
10 + :okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
11 + >
12 + <a-select
13 + showSearch
14 + placeholder="搜索小部件"
15 + optionFilterProp="children"
16 + style="width: 100%"
17 + :filterOption="filterOption"
18 + @change="handleChange"
19 + >
20 + <a-select-option v-for="item in list" :key="item" :value="item">{{item}}</a-select-option>
21 + </a-select>
22 + <component :is="configSelect"></component>
23 + </a-modal>
24 +</template>
25 +
26 +<script>
27 +export default {
28 + props: {
29 + visible: Boolean
30 + },
31 + data() {
32 + return {
33 + list: window.componentList,
34 + selectItem: null,
35 + configSelect: null
36 + };
37 + },
38 + methods: {
39 + filterOption(input, option) {
40 + return (
41 + option.componentOptions.children[0].text
42 + .toLowerCase()
43 + .indexOf(input.toLowerCase()) >= 0
44 + );
45 + },
46 + handleChange: function(value) {
47 + this.selectItem = value;
48 + if (window.componentAll.indexOf(value + "Config") > -1) {
49 + this.configSelect = value + "Config";
50 + } else {
51 + this.configSelect = value;
52 + }
53 + },
54 + add: function() {
55 + if (!this.isUpdate) {
56 + this.$store.commit("layout/setUpdate", true);
57 + }
58 + this.$store.commit("layout/addLayout", this.selectItem);
59 + this.selectItem = null;
60 + this.configSelect = null;
61 + this.$emit('closeAddGrid');
62 + },
63 + cancel: function() {
64 + this.selectItem = null;
65 + this.configSelect = null;
66 + this.$emit('closeAddGrid');
67 + }
68 + }
69 +};
70 +</script>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <a-button size="small" shape="circle" icon="close" @click="close()" v-if="isLock"></a-button> 4 <a-button size="small" shape="circle" icon="close" @click="close()" v-if="isLock"></a-button>
5 <a-button size="small" shape="circle" icon="setting" v-if="isLock"></a-button> 5 <a-button size="small" shape="circle" icon="setting" v-if="isLock"></a-button>
6 </div> 6 </div>
7 - <component :is="layout.name" :isConfig="isConfig"></component> 7 + <component :is="layout.name"></component>
8 </div> 8 </div>
9 </template> 9 </template>
10 10
...@@ -21,19 +21,13 @@ ...@@ -21,19 +21,13 @@
21 <script> 21 <script>
22 import { mapState } from "vuex"; 22 import { mapState } from "vuex";
23 export default { 23 export default {
24 - computed: mapState({ 24 + computed: {
25 - isLock: state => state.layout.isLock, 25 + ...mapState("layout", ["isLock", "isUpdate"])
26 - isUpdate: state => state.layout.isUpdate 26 + },
27 - }),
28 props: { 27 props: {
29 layout: Object, 28 layout: Object,
30 index: Number 29 index: Number
31 }, 30 },
32 - data() {
33 - return {
34 - isConfig: false
35 - };
36 - },
37 methods: { 31 methods: {
38 close: function() { 32 close: function() {
39 if (!this.isUpdate) { 33 if (!this.isUpdate) {
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 :maxH="item.maxH" 24 :maxH="item.maxH"
25 :key="item.i" 25 :key="item.i"
26 > 26 >
27 - <gridComponent :layout="item" :index="index"/> 27 + <grid-component :layout="item" :index="index"/>
28 </grid-item> 28 </grid-item>
29 </grid-layout> 29 </grid-layout>
30 </template> 30 </template>
...@@ -32,17 +32,13 @@ ...@@ -32,17 +32,13 @@
32 <script> 32 <script>
33 import { mapState } from "vuex"; 33 import { mapState } from "vuex";
34 import VueGridLayout from "vue-grid-layout"; 34 import VueGridLayout from "vue-grid-layout";
35 -import gridComponent from "./gridComponent"; 35 +import GridComponent from "./GridComponent";
36 export default { 36 export default {
37 - computed: mapState({ 37 + computed: { ...mapState("layout", ["layout", "isLock", "isUpdate"]) },
38 - layout: state => state.layout.layout,
39 - isLock: state => state.layout.isLock,
40 - isUpdate: state => state.layout.isUpdate
41 - }),
42 components: { 38 components: {
43 GridLayout: VueGridLayout.GridLayout, 39 GridLayout: VueGridLayout.GridLayout,
44 GridItem: VueGridLayout.GridItem, 40 GridItem: VueGridLayout.GridItem,
45 - gridComponent 41 + GridComponent
46 }, 42 },
47 methods: { 43 methods: {
48 layoutUpdatedEvent: function(newLayout) { 44 layoutUpdatedEvent: function(newLayout) {
......
1 <template> 1 <template>
2 <div class="setting"> 2 <div class="setting">
3 <a-button size="small" shape="circle" icon="save" @click="save()" v-if="isLock&&isUpdate"></a-button> 3 <a-button size="small" shape="circle" icon="save" @click="save()" v-if="isLock&&isUpdate"></a-button>
4 - <a-button size="small" shape="circle" icon="plus" @click="() => visible = true" v-if="isLock"></a-button> 4 + <a-button
5 + size="small"
6 + shape="circle"
7 + icon="plus"
8 + @click="() => visible = true"
9 + v-if="isLock"
10 + ></a-button>
5 <a-button size="small" shape="circle" :icon="isLock?'unlock':'lock'" @click="setLock()"></a-button> 11 <a-button size="small" shape="circle" :icon="isLock?'unlock':'lock'" @click="setLock()"></a-button>
6 - <a-modal 12 + <add-grid :visible="visible" @closeAddGrid="setVisible()"/>
7 - title="添加小部件"
8 - centered
9 - v-model="visible"
10 - @ok="add"
11 - @cancel="cancel"
12 - :destroyOnClose="true"
13 - :maskClosable="false"
14 - :okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
15 - >
16 - <a-select
17 - showSearch
18 - placeholder="搜索小部件"
19 - optionFilterProp="children"
20 - style="width: 100%"
21 - :filterOption="filterOption"
22 - @change="handleChange"
23 - >
24 - <a-select-option v-for="item in list" :key="item" :value="item">{{item}}</a-select-option>
25 - </a-select>
26 - <component :is="configSelect"></component>
27 - </a-modal>
28 </div> 13 </div>
29 </template> 14 </template>
30 15
31 <script> 16 <script>
32 import { mapState } from "vuex"; 17 import { mapState } from "vuex";
18 +import AddGrid from "./AddGrid";
33 export default { 19 export default {
34 - computed: mapState({ 20 + computed: {
35 - isLock: state => state.layout.isLock, 21 + ...mapState("layout", ["isLock", "isUpdate", "dashboardId", "layout"])
36 - isUpdate: state => state.layout.isUpdate, 22 + },
37 - dashboardId: state => state.layout.dashboardId, 23 + components: {
38 - layout: state => state.layout.layout 24 + AddGrid
39 - }), 25 + },
40 data() { 26 data() {
41 return { 27 return {
42 - visible: false, 28 + visible: false
43 - list: window.componentList,
44 - selectItem: null,
45 - configSelect: null
46 }; 29 };
47 }, 30 },
48 methods: { 31 methods: {
...@@ -50,40 +33,15 @@ export default { ...@@ -50,40 +33,15 @@ export default {
50 this.$store.commit("layout/setLock", !this.isLock); 33 this.$store.commit("layout/setLock", !this.isLock);
51 this.$message.success(this.isLock ? "编辑已解锁" : "编辑已锁定"); 34 this.$message.success(this.isLock ? "编辑已解锁" : "编辑已锁定");
52 }, 35 },
53 - filterOption(input, option) {
54 - return (
55 - option.componentOptions.children[0].text
56 - .toLowerCase()
57 - .indexOf(input.toLowerCase()) >= 0
58 - );
59 - },
60 - handleChange: function(value) {
61 - this.selectItem = value;
62 - if (window.componentAll.indexOf(value + "Config") > -1) {
63 - this.configSelect = value + "Config";
64 - } else {
65 - this.configSelect = value;
66 - }
67 - },
68 - add: function() {
69 - if (!this.isUpdate) {
70 - this.$store.commit("layout/setUpdate", true);
71 - }
72 - this.$store.commit("layout/addLayout", this.selectItem);
73 - this.visible = false;
74 - this.selectItem = null;
75 - this.configSelect = null;
76 - },
77 - cancel: function() {
78 - this.selectItem = null;
79 - this.configSelect = null;
80 - },
81 save: function() { 36 save: function() {
82 this.$store.commit("layout/setUpdate", false); 37 this.$store.commit("layout/setUpdate", false);
83 this.$inventory.update({ 38 this.$inventory.update({
84 id: this.dashboardId, 39 id: this.dashboardId,
85 dashLayout: this.layout 40 dashLayout: this.layout
86 }); 41 });
42 + },
43 + setVisible: function() {
44 + this.visible = false;
87 } 45 }
88 } 46 }
89 }; 47 };
......
1 <template> 1 <template>
2 - <div class="index0"> 2 + <div class="index0"></div>
3 - </div>
4 </template> 3 </template>
5 4
5 +<script>
6 +export default {
7 + name: "index0"
8 +};
9 +</script>
10 +
6 <style lang="less" scoped> 11 <style lang="less" scoped>
7 .index0 { 12 .index0 {
8 height: 100%; 13 height: 100%;
...@@ -11,8 +16,4 @@ ...@@ -11,8 +16,4 @@
11 } 16 }
12 </style> 17 </style>
13 18
14 -<script> 19 +
15 -export default {
16 - name: "index0"
17 -};
18 -</script>
......
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
2 <div class="index1"></div> 2 <div class="index1"></div>
3 </template> 3 </template>
4 4
5 +<script>
6 +export default {
7 + name: "index1",
8 +};
9 +</script>
10 +
5 <style lang="less" scoped> 11 <style lang="less" scoped>
6 .index1 { 12 .index1 {
7 height: 100%; 13 height: 100%;
...@@ -10,8 +16,4 @@ ...@@ -10,8 +16,4 @@
10 } 16 }
11 </style> 17 </style>
12 18
13 -<script> 19 +
14 -export default {
15 - name: "index1",
16 -};
17 -</script>
......
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
2 <div class="index2"></div> 2 <div class="index2"></div>
3 </template> 3 </template>
4 4
5 +<script>
6 +export default {
7 + name: "index2"
8 +};
9 +</script>
10 +
5 <style lang="less" scoped> 11 <style lang="less" scoped>
6 .index2 { 12 .index2 {
7 height: 100%; 13 height: 100%;
...@@ -10,8 +16,3 @@ ...@@ -10,8 +16,3 @@
10 } 16 }
11 </style> 17 </style>
12 18
13 -<script>
14 -export default {
15 - name: "index2"
16 -};
17 -</script>
......