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
<!DOCTYPE html>
<html lang="en">
<html lang="zh-cmn-Hans-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
......
......@@ -6,14 +6,14 @@
</template>
<script>
import setting from "./components/setting";
import layout from "./components/layout";
import Setting from "./components/Setting";
import Layout from "./components/Layout";
export default {
name: "app",
components: {
setting,
layout
Setting,
Layout
},
mounted() {
this.$inventory
......
import axios from "axios";
import axios from 'axios';
axios.interceptors.request.use(
config => {
(config) => {
config.data = JSON.stringify(config.data);
config.headers["Authorization"] =
"Basic c3VueXVtaW5nL3N1bnl1bWluZzoxMjM0NTY3OA==";
config.headers['Authorization'] =
'Basic c3VueXVtaW5nL3N1bnl1bWluZzoxMjM0NTY3OA==';
return config;
},
error => {
(error) => {
return Promise.reject(error);
}
);
......@@ -16,12 +16,12 @@ function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
params: params,
})
.then(response => {
.then((response) => {
resolve(response.data);
})
.catch(err => {
.catch((err) => {
reject(err);
});
});
......@@ -30,10 +30,10 @@ function get(url, params = {}) {
function post(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data, config).then(
response => {
(response) => {
resolve(response.data);
},
err => {
(err) => {
reject(err);
}
);
......@@ -43,18 +43,16 @@ function post(url, data = {}, config = {}) {
function put(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data, config).then(
response => {
(response) => {
resolve(response.data);
},
err => {
(err) => {
reject(err);
}
);
});
}
export {
get,
post,
put
}
\ No newline at end of file
let NAMESPACE = 'application/vnd.com.nsn.cumulocity.';
export { get, post, put, NAMESPACE };
......
import { get, post, put } from './basic';
import { get, post, put, NAMESPACE } from './basic';
let path = '/inventory/managedObjects';
let NAMESPACE = 'application/vnd.com.nsn.cumulocity.';
let config = {
headers: {
'Content-Type': `${NAMESPACE}managedObject+json`,
......
<template>
<a-modal
title="添加小部件"
centered
v-model="this.visible"
@ok="add"
@cancel="cancel"
:destroyOnClose="true"
:maskClosable="false"
:okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
>
<a-select
showSearch
placeholder="搜索小部件"
optionFilterProp="children"
style="width: 100%"
:filterOption="filterOption"
@change="handleChange"
>
<a-select-option v-for="item in list" :key="item" :value="item">{{item}}</a-select-option>
</a-select>
<component :is="configSelect"></component>
</a-modal>
</template>
<script>
export default {
props: {
visible: Boolean
},
data() {
return {
list: window.componentList,
selectItem: null,
configSelect: null
};
},
methods: {
filterOption(input, option) {
return (
option.componentOptions.children[0].text
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
);
},
handleChange: function(value) {
this.selectItem = value;
if (window.componentAll.indexOf(value + "Config") > -1) {
this.configSelect = value + "Config";
} else {
this.configSelect = value;
}
},
add: function() {
if (!this.isUpdate) {
this.$store.commit("layout/setUpdate", true);
}
this.$store.commit("layout/addLayout", this.selectItem);
this.selectItem = null;
this.configSelect = null;
this.$emit('closeAddGrid');
},
cancel: function() {
this.selectItem = null;
this.configSelect = null;
this.$emit('closeAddGrid');
}
}
};
</script>
......@@ -4,7 +4,7 @@
<a-button size="small" shape="circle" icon="close" @click="close()" v-if="isLock"></a-button>
<a-button size="small" shape="circle" icon="setting" v-if="isLock"></a-button>
</div>
<component :is="layout.name" :isConfig="isConfig"></component>
<component :is="layout.name"></component>
</div>
</template>
......@@ -21,19 +21,13 @@
<script>
import { mapState } from "vuex";
export default {
computed: mapState({
isLock: state => state.layout.isLock,
isUpdate: state => state.layout.isUpdate
}),
computed: {
...mapState("layout", ["isLock", "isUpdate"])
},
props: {
layout: Object,
index: Number
},
data() {
return {
isConfig: false
};
},
methods: {
close: function() {
if (!this.isUpdate) {
......
......@@ -24,7 +24,7 @@
:maxH="item.maxH"
:key="item.i"
>
<gridComponent :layout="item" :index="index"/>
<grid-component :layout="item" :index="index"/>
</grid-item>
</grid-layout>
</template>
......@@ -32,17 +32,13 @@
<script>
import { mapState } from "vuex";
import VueGridLayout from "vue-grid-layout";
import gridComponent from "./gridComponent";
import GridComponent from "./GridComponent";
export default {
computed: mapState({
layout: state => state.layout.layout,
isLock: state => state.layout.isLock,
isUpdate: state => state.layout.isUpdate
}),
computed: { ...mapState("layout", ["layout", "isLock", "isUpdate"]) },
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
gridComponent
GridComponent
},
methods: {
layoutUpdatedEvent: function(newLayout) {
......
<template>
<div class="setting">
<a-button size="small" shape="circle" icon="save" @click="save()" v-if="isLock&&isUpdate"></a-button>
<a-button size="small" shape="circle" icon="plus" @click="() => visible = true" v-if="isLock"></a-button>
<a-button
size="small"
shape="circle"
icon="plus"
@click="() => visible = true"
v-if="isLock"
></a-button>
<a-button size="small" shape="circle" :icon="isLock?'unlock':'lock'" @click="setLock()"></a-button>
<a-modal
title="添加小部件"
centered
v-model="visible"
@ok="add"
@cancel="cancel"
:destroyOnClose="true"
:maskClosable="false"
:okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
>
<a-select
showSearch
placeholder="搜索小部件"
optionFilterProp="children"
style="width: 100%"
:filterOption="filterOption"
@change="handleChange"
>
<a-select-option v-for="item in list" :key="item" :value="item">{{item}}</a-select-option>
</a-select>
<component :is="configSelect"></component>
</a-modal>
<add-grid :visible="visible" @closeAddGrid="setVisible()"/>
</div>
</template>
<script>
import { mapState } from "vuex";
import AddGrid from "./AddGrid";
export default {
computed: mapState({
isLock: state => state.layout.isLock,
isUpdate: state => state.layout.isUpdate,
dashboardId: state => state.layout.dashboardId,
layout: state => state.layout.layout
}),
computed: {
...mapState("layout", ["isLock", "isUpdate", "dashboardId", "layout"])
},
components: {
AddGrid
},
data() {
return {
visible: false,
list: window.componentList,
selectItem: null,
configSelect: null
visible: false
};
},
methods: {
......@@ -50,40 +33,15 @@ export default {
this.$store.commit("layout/setLock", !this.isLock);
this.$message.success(this.isLock ? "编辑已解锁" : "编辑已锁定");
},
filterOption(input, option) {
return (
option.componentOptions.children[0].text
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
);
},
handleChange: function(value) {
this.selectItem = value;
if (window.componentAll.indexOf(value + "Config") > -1) {
this.configSelect = value + "Config";
} else {
this.configSelect = value;
}
},
add: function() {
if (!this.isUpdate) {
this.$store.commit("layout/setUpdate", true);
}
this.$store.commit("layout/addLayout", this.selectItem);
this.visible = false;
this.selectItem = null;
this.configSelect = null;
},
cancel: function() {
this.selectItem = null;
this.configSelect = null;
},
save: function() {
this.$store.commit("layout/setUpdate", false);
this.$inventory.update({
id: this.dashboardId,
dashLayout: this.layout
});
},
setVisible: function() {
this.visible = false;
}
}
};
......
<template>
<div class="index0">
</div>
<div class="index0"></div>
</template>
<script>
export default {
name: "index0"
};
</script>
<style lang="less" scoped>
.index0 {
height: 100%;
......@@ -11,8 +16,4 @@
}
</style>
<script>
export default {
name: "index0"
};
</script>
......
......@@ -2,6 +2,12 @@
<div class="index1"></div>
</template>
<script>
export default {
name: "index1",
};
</script>
<style lang="less" scoped>
.index1 {
height: 100%;
......@@ -10,8 +16,4 @@
}
</style>
<script>
export default {
name: "index1",
};
</script>
......
......@@ -2,6 +2,12 @@
<div class="index2"></div>
</template>
<script>
export default {
name: "index2"
};
</script>
<style lang="less" scoped>
.index2 {
height: 100%;
......@@ -10,8 +16,3 @@
}
</style>
<script>
export default {
name: "index2"
};
</script>
......