monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 34f2af16d6520e0888c461abb46dcfdf57a8cf55 1 parent 8cc19678

结构优化

Inline Side-by-side
Showing 31 changed files with 171 additions and 1281 deletions
1 -@import "../icon/iconfont.css";  
2 -@import "../css/assets.css";  
3 -  
4 -  
5 -.el-loading-spinner .icon-mj{  
6 - width: 70px;  
7 - height: 70px;  
8 - background: url(../../../start/layui/css/modules/layer/default/loading-mj.png) no-repeat center;  
9 - background-size: 70px 70px;  
10 - animation: sk-chase-dot 2.0s infinite ease-in-out both;  
11 - opacity: 0.65;  
12 - display: block;  
13 - margin-left: calc((100% - 70px)/2);  
14 -}  
15 -  
16 -@keyframes sk-chase-dot {  
17 - 80%, 100% {  
18 - transform: rotate(360deg)  
19 - }  
20 -} 1 +@import "../css/base.css";
  1 +@import "../icon/iconfont.css";
  2 +@import "../css/assets.css";
  3 +@import "../css/components.css";
  4 +
  5 +/*最外层样式*/
  6 +.container{
  7 + background: white;
  8 + background-color: #CCCCCC;
  9 + padding: 3px 3px;
  10 +}
  11 +
  12 +/*
  13 +共通弹框配置样式
  14 +custom-class="config-dialog"
  15 +*/
  16 +.config-dialog .el-dialog__header{
  17 + text-align: left!important;
  18 +}
  19 +
  20 +.config-dialog .el-dialog__body{
  21 + padding: 5px 10px!important;
  22 + padding-bottom: 20px!important;
  23 + min-height: 500px;
  24 +}
  25 +
  26 +
  27 +/*加载图标*/
  28 +.el-loading-spinner .icon-mj{
  29 + width: 70px;
  30 + height: 70px;
  31 + background: url(../../../start/layui/css/modules/layer/default/loading-mj.png) no-repeat center;
  32 + background-size: 70px 70px;
  33 + animation: sk-chase-dot 2.0s infinite ease-in-out both;
  34 + opacity: 0.65;
  35 + display: block;
  36 + margin-left: calc((100% - 70px)/2);
  37 +}
  38 +
  39 +@keyframes sk-chase-dot {
  40 + 80%, 100% {
  41 + transform: rotate(360deg)
  42 + }
  43 +}
  1 +.tree-container{
  2 + background-color: white;
  3 + padding: 0px 0px;
  4 + border-radius: 3px;
  5 + text-align: left;
  6 + height: 100%;
  7 +}
1 export default { 1 export default {
2 template: '', 2 template: '',
3 - name: 'restypetree', 3 + name: 'res-type-tree-input',
4 props: { 4 props: {
5 // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组 5 // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
6 echoObj: {}, 6 echoObj: {},
@@ -41,7 +41,7 @@ export default { @@ -41,7 +41,7 @@ export default {
41 type: Boolean, 41 type: Boolean,
42 default: true 42 default: true
43 }, 43 },
44 - 44 +
45 }, 45 },
46 data() { 46 data() {
47 return { 47 return {
@@ -114,9 +114,6 @@ export default { @@ -114,9 +114,6 @@ export default {
114 }, 114 },
115 watch: {}, 115 watch: {},
116 mounted() { 116 mounted() {
117 -  
118 - },  
119 - created() {  
120 console.log(111111111111); 117 console.log(111111111111);
121 let that = this; 118 let that = this;
122 //加载资源列表 119 //加载资源列表
@@ -128,6 +125,9 @@ export default { @@ -128,6 +125,9 @@ export default {
128 console.log("getTree:",that.list); 125 console.log("getTree:",that.list);
129 } 126 }
130 }) 127 })
131 - 128 + },
  129 + created() {
  130 +
  131 +
132 } 132 }
133 } 133 }
1 -<div>  
2 - <el-select @visible-change="selectClose" v-model="modelValueLabel" :filter-method="selectFilterMethod"  
3 - style="min-width: 120px;" :size="size" placeholder="资源类型" :filterable="isFilter" clearable  
4 - :collapse-tags="true" @change="selectChangeMethod">  
5 - <el-option :value="modelValue" style="height: auto;padding: 0;">  
6 - <el-tree ref="resTypeTree" :data="list" :check-on-click-node="true" :default-expand-all="isDefaultAll"  
7 - :expand-on-click-node="true" :filter-node-method="filterNode" :check-strictly="false"  
8 - :empty-text="emptyText" :show-checkbox="isMultiple" node-key="id" :show-checkbox="checkbox"  
9 - @check-change="handleCheckChange" node-key="id" :props="defaultProps">  
10 - </el-tree>  
11 - </el-option>  
12 - </el-select> 1 +<div class="tree-container" :style="{'height':height+'px','max-height':height+'px','overflow':'hidden','padding':'0px'}">
  2 + <div class="filter-view">
  3 + <el-input v-model="filterText" size="samll" placeholder="请输入关键字" />
  4 + </div>
  5 + <div :style="{'height':height+'px','max-height':(height - 54)+'px','overflow':'auto','padding':'0px'}">
  6 + <el-tree ref="tree" style="padding:6px;" :props="props" :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
  7 + <template #default="{ node, data }">
  8 + <div class="tree-node">
  9 + <div class="tree-node-label">{{ node.label }}</div>
  10 + <div class="tree-node-tools">
  11 + <a @click="append(data)">
  12 + <i class="el-icon-plus"></i>
  13 + </a>
  14 + <a @click="remove(node, data)">
  15 + <i class="el-icon-delete"></i>
  16 + </a>
  17 + </div>
  18 + </div>
  19 + </template>
  20 + </el-tree>
  21 + </div>
13 </div> 22 </div>
  1 +/**
  2 + * 未完成
  3 + */
1 export default { 4 export default {
2 - template: '',  
3 - name: 'restypetree',  
4 - props: {  
5 - // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组  
6 - echoObj: {},  
7 - // 是否开启搜索  
8 - isFilter: {  
9 - default: true  
10 - },  
11 - // 尺寸  
12 - size: {  
13 - default: ''  
14 - },  
15 - placeholderText: {  
16 - default: '资源类型'  
17 - },  
18 - isTag: {  
19 - default: true  
20 - },  
21 - isDefaultAll: {  
22 - default: true  
23 - },  
24 - // 点击节点是否展开  
25 - expandClickNode: {  
26 - default: false  
27 - },  
28 - // 字段key，用于取出数据中的名字  
29 - fieldName: {  
30 - default: 'title'  
31 - },  
32 - emptyText: {  
33 - default: '无匹配项'  
34 - },  
35 - // 字段key， 数据中的id  
36 - fieldId: {  
37 - default: ''  
38 - },  
39 - // 配置是否可多选  
40 - isMultiple: {  
41 - type: Boolean,  
42 - default: true  
43 - },  
44 -  
45 - },  
46 - data() {  
47 - return {  
48 - defaultProps: {  
49 - children: 'children',  
50 - label: 'title'  
51 - },  
52 - list:[],  
53 - // 实际选中值  
54 - modelValue: [],  
55 - // 下拉框绑定值(选中值名字)  
56 - modelValueLabel: []  
57 - }  
58 - },  
59 - methods: {  
60 - selectClose(bool) {  
61 - if (bool) {  
62 - this.selectFilterMethod('')  
63 - }  
64 - },  
65 - selectFilterMethod(val) {  
66 - // 下拉框调用tree树筛选  
67 - this.$refs.resTypeTree.filter(val)  
68 - },  
69 - selectChangeMethod(e) {  
70 - var arrNew = []  
71 - var dataLength = this.modelValue.length  
72 - var eLength = e.length  
73 - for (var i = 0; i < dataLength; i++) {  
74 - for (var j = 0; j < eLength; j++) {  
75 - if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {  
76 - arrNew.push(this.modelValue[i])  
77 - }  
78 - }  
79 - }  
80 - // 设置勾选的值  
81 - this.$refs.resTypeTree.setCheckedNodes(arrNew)  
82 - },  
83 - filterNode(value, data) {  
84 - if (!value) return true 5 + name: 'restypetree',
  6 + template: '',
  7 + components: {},
  8 + data() {
  9 + return {
  10 + props : {
  11 + label:'title',
  12 + children:'children'
  13 + }
  14 + }
  15 + },
  16 + setup() {
  17 + let height = Vue.ref(window.innerHeight - 130);
  18 + const filterText = Vue.ref('');
  19 + const {proxy} = Vue.getCurrentInstance();
  20 + const treeData = Vue.ref([]);
85 21
86 - return data[this.fieldName].indexOf(value) !== -1  
87 - },  
88 - handleCheckChange(data, checked, indeterminate) {  
89 - let that = this; 22 + // 添加树节点
  23 + let append = (data) => {
  24 + treeNodeData.value = data;
  25 + const newChild = {
  26 + id: 1111,
  27 + title: 'testtest',
  28 + children: []
  29 + }
  30 + if (!data.children) {
  31 + data.children = []
  32 + }
  33 + data.children.push(newChild)
  34 + this.dataSource = [...this.dataSource]
  35 + }
90 36
91 - var selectArr = [];  
92 - selectArr.push(data);  
93 - // data[that.defaultProps.children].forEach(function (v) {  
94 - // selectArr.push(data);  
95 - // }); 37 + // 删除树节点
  38 + let remove = (node, data) => {
  39 + const parent = node.parent
  40 + const children = parent.data.children || parent.data
  41 + const index = children.findIndex((d) => d.id === data.id)
  42 + children.splice(index, 1)
  43 + this.dataSource = [...this.dataSource]
  44 + }
96 45
97 - if (checked) {  
98 - // 已选中  
99 - that.modelValue = that.modelValue.concat(selectArr)  
100 - } else {  
101 - that.modelValue.forEach(function(v, i) {  
102 - selectArr.forEach(function(v1) {  
103 - if (v.id == v1.id) {  
104 - that.modelValue.splice(i, 1);  
105 - }  
106 - })  
107 - })  
108 - }  
109 - that.modelValueLabel = that.modelValue.map(function(v) {  
110 - return v[that.defaultProps.label];  
111 - });  
112 - that.$emit('callback', this.modelValue)  
113 - }  
114 - },  
115 - watch: {},  
116 - mounted() {  
117 -  
118 - },  
119 - created() {  
120 - console.log(111111111111);  
121 - let that = this;  
122 - //加载资源列表  
123 - const { proxy } = Vue.getCurrentInstance()  
124 - // 加载列表  
125 - proxy.$http.get("/api-web/home/resType/getTree?typeParentFlag=1", {}, function(res) {  
126 - if (res && res.data) {  
127 - that.list = res.data;  
128 - console.log("getTree:",that.list);  
129 - }  
130 - })  
131 -  
132 - } 46 + // 筛选
  47 + let filterNode = (value) => {
  48 + if (!value) return true
  49 +
  50 + let arr = data.filter(function (v) {
  51 + if (v.label.indexOf(value) != -1) {
  52 + return v;
  53 + }
  54 + })
  55 + console.log(arr);
  56 + return arr;
  57 + }
  58 + // 监听编辑状态
  59 + Vue.watch(() => filterText.value, (newValue, oldVlaue) => {
  60 + proxy.$refs.tree.filter(newValue)
  61 + });
  62 +
  63 + // 挂载完
  64 + Vue.onMounted(() => {
  65 + })
  66 +
  67 +
  68 + return {
  69 + height,
  70 + treeData,
  71 + append,
  72 + remove,
  73 + filterText,
  74 + filterNode,
  75 + }
  76 + }
133 } 77 }
@@ -7,26 +7,28 @@ Promise.all([ @@ -7,26 +7,28 @@ Promise.all([
7 import('./script/global.js' + ver), 7 import('./script/global.js' + ver),
8 import('./script/http.js' + ver), 8 import('./script/http.js' + ver),
9 ]).then((res) => { 9 ]).then((res) => {
10 - 10 +
11 // 创建vue3的实例 11 // 创建vue3的实例
12 const app = Vue.createApp(res[2].default) 12 const app = Vue.createApp(res[2].default)
13 .use(res[0].default) // 挂载vuex 13 .use(res[0].default) // 挂载vuex
14 .use(res[1].default) // 挂载路由 14 .use(res[1].default) // 挂载路由
15 -  
16 -  
17 - 15 +
18 .use(ElementPlus, { 16 .use(ElementPlus, {
19 locale: ElementPlus.lang.zhCn 17 locale: ElementPlus.lang.zhCn
20 }) 18 })
21 .use(ElementPlus) // 加载ElementPlus 19 .use(ElementPlus) // 加载ElementPlus
22 .use(vant) // 加载vant 20 .use(vant) // 加载vant
23 .use(vant.Lazyload) // 加载vant 21 .use(vant.Lazyload) // 加载vant
24 - 22 +
25 // 全局注册公共组件 23 // 全局注册公共组件
26 - .component('res-type-tree', Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')))  
27 - .component('machine-room',Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')));  
28 -  
29 - 24 +
  25 + // 下拉列表资源树
  26 + .component('res-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputrestypetree/index')))
  27 + // 机房下拉
  28 + .component('machine-room',Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')))
  29 + // 资源类型树
  30 + .component('res-type-tree-view',Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')));
  31 +
30 app.config.globalProperties.$global = res[3].default 32 app.config.globalProperties.$global = res[3].default
31 app.config.globalProperties.$http = res[4].default 33 app.config.globalProperties.$http = res[4].default
32 app.mount('#app'); // 挂载Vue的app实例 34 app.mount('#app'); // 挂载Vue的app实例
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 </el-input> 5 </el-input>
6 </el-form-item> 6 </el-form-item>
7 <el-form-item label="" :disabled="initFlga"> 7 <el-form-item label="" :disabled="initFlga">
8 - <res-type-tree multiple clearable collapseTags @callback="getResType" /> 8 + <res-type-tree-input multiple clearable collapseTags @callback="getResType" />
9 </el-form-item> 9 </el-form-item>
10 10
11 <el-form-item label=""> 11 <el-form-item label="">
1 -@import "../icon/iconfont.css";  
2 -@import "../css/assets.css"; 1 +@import "../css/base.css";
3 2
4 /*资源配置*/ 3 /*资源配置*/
5 @import "../css/res.css"; 4 @import "../css/res.css";
6 -@import "../css/operationMaintenance.css";  
7 -/*最外层样式*/  
8 -.container{  
9 - background: white;  
10 - background-color: #CCCCCC;  
11 - padding: 3px 3px;  
12 -}  
13 -  
14 -/*  
15 -共通弹框配置样式  
16 -custom-class="config-dialog"  
17 -*/  
18 -.config-dialog .el-dialog__header{  
19 - text-align: left!important;  
20 -}  
21 -  
22 -.config-dialog .el-dialog__body{  
23 - padding: 5px 10px!important;  
24 - padding-bottom: 20px!important;  
25 - min-height: 500px;  
26 -}  
27 -  
28 5
29 -  
30 -/*加载图标*/  
31 -.el-loading-spinner .icon-mj{  
32 - width: 70px;  
33 - height: 70px;  
34 - background: url(../../../start/layui/css/modules/layer/default/loading-mj.png) no-repeat center;  
35 - background-size: 70px 70px;  
36 - animation: sk-chase-dot 2.0s infinite ease-in-out both;  
37 - opacity: 0.65;  
38 - display: block;  
39 - margin-left: calc((100% - 70px)/2);  
40 -}  
41 -  
42 -@keyframes sk-chase-dot {  
43 - 80%, 100% {  
44 - transform: rotate(360deg)  
45 - }  
46 -} 6 +/*乙方运维*/
  7 +@import "../css/operationMaintenance.css";
1 -/* 属性配置 -- start */  
2 -.assets-configmanager {  
3 - padding: 6px 3px;  
4 - background: white;  
5 -}  
6 -  
7 -.assets-configmanager .config-tools {  
8 - text-align: left;  
9 - margin-left: 2%;  
10 - margin-bottom: 6px;  
11 -}  
12 -  
13 -.assets-configmanager .tbl-header-class {  
14 - color: #1E9FFF;  
15 - font-weight: bold;  
16 -}  
17 -  
18 -.assets-configmanager .tbl-header-class th {  
19 - background: #EBF5F9 !important;  
20 - text-align: center;  
21 -}  
22 -  
23 -.assets-configmanager .tbl-header-class th .cell {  
24 - text-align: center !important;  
25 -}  
26 -  
27 -.assets-configmanager .el-table__row td{  
28 - padding: 2px 0px;!important;  
29 - text-align: center;  
30 -}  
31 -  
32 -.config-view {  
33 - display: flex;  
34 - flex-wrap: wrap;  
35 - width: 96%;  
36 - margin: 0 2% 0 2%;  
37 -}  
38 -  
39 -.assets-configmanager .config-header-title {  
40 - width: 40%;  
41 - height: 40px;  
42 - line-height: 40px;  
43 - color: rgb(30, 159, 255);  
44 - text-align: center;  
45 - font-weight: bold;  
46 - background-color: #D0DDEC;  
47 - border: solid 1px #efefef;  
48 -}  
49 -  
50 -.assets-configmanager .config-header-content {  
51 - width: 60%;  
52 - height: 40px;  
53 - line-height: 40px;  
54 - color: rgb(30, 159, 255);  
55 - text-align: center;  
56 - font-weight: bold;  
57 - background-color: #D0DDEC;  
58 - border: solid 1px #efefef;  
59 -}  
60 -  
61 -.assets-configmanager .config-content-title {  
62 - width: 40%;  
63 - background-color: rgb(241, 246, 249);  
64 - height: 40px;  
65 - line-height: 40px;  
66 - border: solid 1px #efefef;  
67 -}  
68 -  
69 -.assets-configmanager .config-content-content {  
70 - width: 60%;  
71 - height: 40px;  
72 - line-height: 40px;  
73 - border: solid 1px #efefef;  
74 -}  
75 -  
76 -/*.assets-configmanager .config-content-content::hover {*/  
77 -/*background-color: rgb(249, 249, 249);*/  
78 -/*}*/  
79 -  
80 -  
81 -/* 属性配置 -- end */  
1 -<el-select @change="changeOption" v-model="machineroom" :multiple="false" collapse-tags clearable filterable  
2 - :placeholder="placeholderText">  
3 - <el-option v-for="item in options" :key="item.machineRoomId" :label="item.machineRoomName"  
4 - :value="item.machineRoomCode" >  
5 - </el-option>  
6 -</el-select>  
1 -export default {  
2 - template: '',  
3 - name: 'machineroom',  
4 - props: {  
5 - placeholderText: {  
6 - default: '所属机房'  
7 - },  
8 - },  
9 - data() {  
10 - return {  
11 - loadding:true,  
12 - machineroom: '',  
13 - options: [],  
14 -  
15 - }  
16 - },  
17 - methods: {  
18 - changeOption(e) {  
19 - this.$emit('callback', this.machineroom)  
20 - }  
21 - },  
22 - watch: {},  
23 - mounted() {  
24 - let that = this;  
25 - const { proxy } = Vue.getCurrentInstance()  
26 - // 加载列表  
27 - proxy.$http.get("/api-web/manage/machineroom/page", {}, function(res) {  
28 - if (res && res.data) {  
29 - that.options = res.data;  
30 - that.loadding = false;  
31 - }  
32 - })  
33 -  
34 - },  
35 - created() {}  
36 -}  
37 -  
1 -<div>  
2 - <!-- 展示文本 -->  
3 - <div v-if="!isEdit" style="max-height: 40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">  
4 - <el-tooltip placement="top" effect="light">  
5 - <template #content>{{detail.propValueText == undefined ? '' : detail.propValueText}}</template>  
6 - <span > {{detail.propValueText == undefined ? '' : detail.propValueText}}</span>  
7 - </el-tooltip>  
8 - </div>  
9 - <div v-else style="padding: 0px 2px;margin-top: -2px;display: flex">  
10 - <div :style="{width: detail.propertyEditInfo.tips && detail.propertyEditInfo.tips != '' ? 'calc(100% - 20px)' :'100%'}">  
11 - <div v-if="detail.propertyEditInfo.propertyType == 'LIST'">  
12 - <!-- 展示下拉选项 -->  
13 - <el-select :placeholder="detail.propName" size="small" style="width: 100%"  
14 - @change="changeProperty(detail.propKey)" v-model="detail.propValue" :multiple="false"  
15 - collapse-tags clearable filterable placeholder="请选择">  
16 - <el-option v-if="detail.propertyEditInfo.object != undefined"  
17 - v-for="(item,index) in detail.propertyEditInfo.object" :key="index"  
18 - :label="item[detail.propertyEditInfo.text]"  
19 - :value="item[detail.propertyEditInfo.value]">  
20 - </el-option>  
21 - </el-select>  
22 - </div>  
23 - <div v-else-if="detail.propertyEditInfo.propertyType == 'INPUT'" style="width: 100%">  
24 - <el-input @blur="changeProperty(detail.propKey)" size="small" :placeholder="detail.propName"  
25 - prefix-icon="el-icon-edit" v-model="detail.propValue">  
26 - </el-input>  
27 - </div>  
28 - </div>  
29 - <div style="line-height: 40px;margin: 0 0px;width: 20px;"  
30 - v-if="detail.propertyEditInfo.tips && detail.propertyEditInfo.tips != ''">  
31 - <el-tooltip placement="top">  
32 - <template #content>{{detail.propertyEditInfo.tips}}</template>  
33 - <i class="el-icon-warning-outline"></i>  
34 - </el-tooltip>  
35 - </div>  
36 -  
37 - </div>  
38 -</div>  
1 -export default {  
2 - name: 'propertyedit',  
3 - template: '',  
4 - props: {  
5 - // 属性配置信息  
6 - detail: Object,  
7 - // 操作类型 true 编辑 false undefined 预览,默认预览  
8 - operates: false  
9 - },  
10 -  
11 - setup(props, {attrs, slots, emit}) {  
12 -  
13 - const isEdit = Vue.ref(false);  
14 - const oldVal = Vue.ref('');  
15 -  
16 - if(props.detail){  
17 - oldVal.value = props.detail.propValue == undefined ? '' : props.detail.propValue;  
18 - }  
19 -  
20 - let changeProperty = (key) => {  
21 - let detail = props.detail;  
22 - detail.propValueText = detail[detail.propertyEditInfo.text];  
23 - emit('callback', key, detail.propValue,oldVal.value,detail.propValueText)  
24 - }  
25 -  
26 - // 监听编辑状态  
27 - Vue.watch(() => props.operates, (newValue, oldVlaue) => {  
28 -  
29 - if (newValue && newValue == true) {  
30 - // 编辑  
31 - isEdit.value = true;  
32 - } else {  
33 - isEdit.value = false;  
34 - props.detail.propValue = oldVal.value;  
35 - }  
36 - });  
37 -  
38 - return {  
39 - isEdit,  
40 - oldVal,  
41 - changeProperty  
42 - };  
43 - },  
44 -}  
1 -<div>  
2 - <br>  
3 - 这是 组件测试<br>  
4 - 父组件传递参数：{{str}}<br>  
5 - setup 获取参数：{{str1}}<br>  
6 -  
7 - <van-field  
8 - v-model="fieldValue"  
9 - is-link  
10 - readonly  
11 - label="地区"  
12 - placeholder="请选择所在地区"  
13 - @click="show = true"  
14 - />  
15 - <van-popup v-model:show="show" round position="bottom">  
16 - <van-cascader  
17 - v-model="cascaderValue"  
18 - title="请选择所在地区"  
19 - :options="options"  
20 - @close="show = false"  
21 - @finish="onFinish"  
22 - />  
23 - </van-popup>  
24 -</div>  
1 -export default {  
2 - name: 'component-test',  
3 - template: '',  
4 - props: {  
5 - str: String  
6 -  
7 - },  
8 - setup(props) {  
9 - // 在setup里面获取参数值  
10 - let str1 = Vue.ref(props.str)  
11 - str1.value += '--内部改一下。'  
12 -  
13 - return {  
14 - str1,  
15 - placeholderText:'所属机房'  
16 - }  
17 - },  
18 - setup() {  
19 - const show = Vue.ref(false);  
20 - const fieldValue = Vue.ref('');  
21 - const cascaderValue = Vue.ref('');  
22 - // 选项列表，children 代表子选项，支持多级嵌套  
23 - const options = [  
24 - {  
25 - text: '浙江省',  
26 - value: '330000',  
27 - children: [{ text: '杭州市', value: '330100' }],  
28 - },  
29 - {  
30 - text: '江苏省',  
31 - value: '320000',  
32 - children: [{ text: '南京市', value: '320100' }],  
33 - },  
34 - ];  
35 - // 全部选项选择完毕后，会触发 finish 事件  
36 - const onFinish = ({ selectedOptions }) => {  
37 - show.value = false;  
38 - fieldValue.value = selectedOptions.map((option) => option.text).join('/');  
39 - };  
40 -  
41 - return {  
42 - show,  
43 - options,  
44 - onFinish,  
45 - fieldValue,  
46 - cascaderValue,  
47 - };  
48 - },  
49 -}  
1 -<div class="assets-configmanager">  
2 - <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left;padding-left: 6px;">  
3 - <el-form-item label="" >  
4 - <el-input :disabled="initFlag" placeholder="输入关键字" v-model="pageInfo.keyWords" prefix-icon="el-icon-search">  
5 - </el-input>  
6 - </el-form-item>  
7 - <el-form-item label="" :disabled="initFlga">  
8 - <res-type-tree multiple clearable collapseTags @callback="getResType" />  
9 - </el-form-item>  
10 -  
11 - <el-form-item label="">  
12 - <machine-room @callback="getMachineRoom"></machine-room>  
13 - </el-form-item>  
14 -  
15 - <el-form-item>  
16 - <el-button :disabled="initFlag" type="primary" @click="onBtnSearch()">查询</el-button>  
17 - </el-form-item>  
18 - </el-form>  
19 - <!-- <div style="text-align: right" v-if="loadHead">  
20 - <el-popover placement="bottom" trigger="click">  
21 - <template #reference>  
22 - <el-button icon="el-icon-set-up" plain hairline size="small"></el-button>  
23 - </template>  
24 - <div slot="content" style="width: 100px;">  
25 - <div style="display: flex;flex-direction: column">  
26 - {{checkList}}  
27 - <el-checkbox-group v-model="checkList">  
28 - <el-checkbox :label="item.propName" borderv-for="item in columns"  
29 - style="margin: 3px;width: 100px;"></el-checkbox>  
30 - </el-checkbox-group>  
31 - </div>  
32 - </div>  
33 - </el-popover>  
34 - </div> -->  
35 - <el-table :max-height="height" v-loading="loading" :data="tableList" border style="width: 100%;" header-row-class-name="tbl-header-class"  
36 - :empty-text="emptyText" :stripe="true">  
37 - <el-table-column fixed type="index" v-if="columns.length > 0" :index="(index) => {return index + 1}" label="序号" width="60" align="center"> </el-table-column>  
38 - <el-table-column v-for="item in columns" :prop="item.propKey" :label="item.propName"  
39 - :width="widths[item.propKey] ? widths[item.propKey] : '120'">  
40 - <template #default="scope" v-if="item.propKey =='resName'">  
41 - <el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.resName}}</el-link>  
42 - </template>  
43 - </el-table-column>  
44 - </el-table>  
45 - <div style="text-align: center">  
46 - <el-pagination @size-change="handleSizeChange"  
47 - @prev-click="prePage"  
48 - @next-click="nextPage"  
49 - @current-change="handleCurrentChange"  
50 - :current-page="pageInfo.page" :page-sizes="[50,100, 150, 200]" :page-size="pageInfo.limit"  
51 - layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" />  
52 - </div>  
53 -  
54 -  
55 - <el-dialog top="2vh" :title="row.title" v-model="centerDialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>  
56 - <el-tabs v-model="activeName" @tab-click="handleClick">  
57 - <el-tab-pane label="基本信息" name="jbxx">  
58 - <div class="config-tools">  
59 - <el-button-group>  
60 - <el-button size="mini" icon="el-icon-edit-outline" @click="editConfig('jbxx')"></el-button>  
61 - <el-button size="mini" v-if="edits['jbxx'] && edits['jbxx'] === true" icon="el-icon-check" @click="saveConfig('jbxx')"></el-button>  
62 - <el-button size="mini" v-if="edits['jbxx'] && edits['jbxx'] === true" icon="el-icon-close" @click="cancelConfig('jbxx')"></el-button>  
63 - </el-button-group>  
64 - </div>  
65 -  
66 - <div class="config-view">  
67 - <div style="display: flex;flex-direction: row;width: 100%;">  
68 - <div class="config-header-title">属性</div>  
69 - <div class="config-header-content">内容</div>  
70 - <div class="config-header-title">属性</div>  
71 - <div class="config-header-content">内容</div>  
72 - </div>  
73 - <div v-if="row.detail.jbxx != undefined" v-for="(item,index) in row.detail.jbxx"  
74 - style="display: flex;flex-direction: row;width: 50%;">  
75 - <div class="config-content-title">  
76 - {{item.propName}} &nbsp;  
77 - <i v-if="editKey[item.propKey] && editKey[item.propKey].edit === true" class="el-icon-edit" style="color: #409eff;" />  
78 - </div>  
79 - <div class="config-content-content">  
80 - <property-edit :detail="item" @callback="callback"  
81 - :operates="edits['jbxx']"></property-edit>  
82 - </div>  
83 - </div>  
84 - </div>  
85 - </el-tab-pane>  
86 - <el-tab-pane v-if="row.detail.name != undefined" v-for="(item,index) in row.detail.name"  
87 - :label="item.propName" :name="item.parentPropKey">  
88 - <div class="config-tools">  
89 - <el-button-group>  
90 - <el-button size="mini" @click="addTabDetail(item.parentPropKey)" icon="el-icon-plus"></el-button>  
91 - <el-button size="mini" @click="editConfig(item.parentPropKey)" icon="el-icon-edit-outline"></el-button>  
92 - <el-button size="mini" @click="saveTabConfig(item.parentPropKey)" v-if="edits[item.parentPropKey] && edits[item.parentPropKey] === true" icon="el-icon-check"></el-button>  
93 - <el-button size="mini" @click="cancelConfig(item.parentPropKey)" v-if="tabDelete[item.parentPropKey] && tabDelete[item.parentPropKey] === true" icon="el-icon-close"></el-button>  
94 - </el-button-group>  
95 - </div>  
96 - <div class="config-view">  
97 - <div style="display: flex;flex-direction: row;width: 100%;">  
98 - <div class="config-header-title"  
99 - v-if="row[item.parentPropKey] != undefined && row[item.parentPropKey].name != undefined "  
100 - :style="'width:calc(' + 1/row[item.parentPropKey].name.length*100 +'% - ' + 40/row[item.parentPropKey].name.length + 'px)'"  
101 - v-for="(propName,index) in row[item.parentPropKey].name" >  
102 - {{propName}}  
103 - </div>  
104 - <div class="config-header-title" style="width: 40px">操作</div>  
105 - </div>  
106 - <div style="display: flex;flex-direction: row;width: 100%;"  
107 - v-if="row[item.parentPropKey] != undefined && row[item.parentPropKey].data != undefined "  
108 - v-for="(propList,index) in row[item.parentPropKey].data">  
109 - <div class="config-content-content"  
110 - :style="'width:calc(' + 1/row[item.parentPropKey].name.length*100 +'% - ' + 40/row[item.parentPropKey].name.length + 'px)'"  
111 - v-for="(propInfo,index2) in propList">  
112 - <property-edit :detail="propInfo" @callback="callback"  
113 - :operates="edits[item.parentPropKey]"></property-edit>  
114 - <!--<div v-if="index2 == (propList.length -1) && propInfo.addItem && propInfo.addItem == 1"  
115 - style="position: absolute;width: 20px;right: 15px;" >  
116 - <el-button size="mini" circle icon="el-icon-delete" @click="deleConfigItem(propList,index,item.parentPropKey)"></el-button>  
117 - </div>-->  
118 - </div>  
119 - <div class="config-content-content" style="width: 40px;">  
120 - <el-button size="mini" type="text" icon="el-icon-delete"  
121 - v-if="propList[0] && propList[0].addItem && propList[0].addItem == 1"  
122 - @click="deleConfigItem(propList,index,item.parentPropKey)"></el-button>  
123 - </div>  
124 - </div>  
125 - </div>  
126 - </el-tab-pane>  
127 -  
128 - </el-tabs>  
129 - </el-dialog>  
130 -</div>  
1 -export default {  
2 - name: 'configmanager',  
3 - template: '',  
4 - components: {  
5 - 'property-edit': Vue.defineAsyncComponent(  
6 - () => myImport('components/page/assets/propertyedit/index')  
7 - ),  
8 - },  
9 - setup() {  
10 -  
11 - const { proxy } = Vue.getCurrentInstance()  
12 -  
13 - let columns = Vue.ref([]);  
14 - let tableList = Vue.ref([]);  
15 - let emptyText = Vue.ref('数据加载中...');  
16 - let resTypeArr = Vue.ref([]);  
17 - let machineRoom = Vue.ref('');  
18 - let centerDialogVisible = Vue.ref(false);  
19 - let loadHead = Vue.ref(false);  
20 - let initFlag = Vue.ref(false);  
21 -  
22 - let height = Vue.ref(window.innerHeight - 130);  
23 -  
24 -  
25 - // 分页信息  
26 - const pageInfo = Vue.reactive({  
27 - total: 0,  
28 - limit: 50,  
29 - page: 1,  
30 - keyWords:''  
31 - })  
32 - // 编辑信息  
33 - const row = Vue.ref({})  
34 - let tabDelete = Vue.ref({});  
35 -  
36 - // 属性列表属性宽度  
37 - let widths = Vue.ref({  
38 - resName: '350',  
39 - admin: "150",  
40 - ip: "120",  
41 - maintenanceBegin: "180",  
42 - maintenanceEnd: "180",  
43 - resourceSN: "200",  
44 - cabinetPosition: "120",  
45 - parentResName:'300',  
46 - ULocation: "200"  
47 - });  
48 -  
49 - // 筛选列选中的 TODO  
50 - let checkList = Vue.ref({})  
51 - // 活跃页签  
52 - let activeName = Vue.ref('jbxx');  
53 - let edits = Vue.ref({})  
54 - let editKey = Vue.ref({})  
55 -  
56 -  
57 -  
58 - // 搜索  
59 - let onSearch = () => {  
60 - if(initFlag.value){  
61 - return;  
62 - }  
63 - initFlag.value = true;  
64 - // // 加载列表  
65 - // proxy.$http.get("/api-web/home/getUserProperties", {  
66 - // resTypes: resTypeArr.value  
67 - // }, function (res) {  
68 - // if (res && res.data) {  
69 - // columns.value = res.data;  
70 - // emptyText.value = '数据加载中...'  
71 - // loadHead.value = true;  
72 - // }  
73 - // });  
74 - //  
75 - // // 加载数据  
76 - // var params = {  
77 - // page: pageInfo.page,  
78 - // limit: pageInfo.limit,  
79 - // resName: pageInfo.keyWords,  
80 - // sortKey: '',  
81 - // resType: resTypeArr.value.join(','),  
82 - // resPositon: machineRoom.value,  
83 - // addr: '',  
84 - // maintenanceTimeEnd: '',  
85 - // maintenanceTimeStart: '',  
86 - // resCategory: 'assets'  
87 - // };  
88 - // proxy.$http.get("/api-web/home/assets/page/all", params, function (res) {  
89 - // if (res && res.data) {  
90 - // tableList.value = res.data;  
91 - // emptyText.value = "加载完成";  
92 - // pageInfo.total = res.count;  
93 - // } else {  
94 - // emptyText.value = "暂无数据";  
95 - // }  
96 - // initFlag.value = false;  
97 - // })  
98 - // 加载数据  
99 - var params = {  
100 - page: pageInfo.page,  
101 - limit: pageInfo.limit,  
102 - resName: pageInfo.keyWords,  
103 - sortKey: '',  
104 - resType: resTypeArr.value.join(','),  
105 - resPositon: machineRoom.value,  
106 - addr: '',  
107 - maintenanceTimeEnd: '',  
108 - maintenanceTimeStart: '',  
109 - resCategory: 'assets'  
110 - };  
111 - proxy.$http.get("/api-web/assets/configmanager/list", params, function (res) {  
112 - if (res && res.data) {  
113 - columns.value = res.map.header;  
114 - tableList.value = res.data;  
115 - emptyText.value = "加载完成";  
116 - pageInfo.total = res.count;  
117 - } else {  
118 - emptyText.value = "暂无数据";  
119 - tableList.value = [];  
120 - proxy.$global.showMsg('暂无数据！');  
121 - }  
122 - initFlag.value = false;  
123 - },function (){  
124 - proxy.$global.showMsg('没有查询到记录！');  
125 - initFlag.value = false;  
126 - });  
127 - }  
128 -  
129 - // 点击按钮搜索  
130 - let onBtnSearch = () =>{  
131 - pageInfo.page = 1;  
132 - onSearch();  
133 - }  
134 -  
135 - let getResType = (arr) => {  
136 - console.log(arr);  
137 - var types = arr.map(function (v) {  
138 - return v.id;  
139 - });  
140 - resTypeArr.value = types;  
141 -  
142 - onSearch();  
143 - }  
144 -  
145 - let getMachineRoom = (code) => {  
146 - console.log(code);  
147 - machineRoom.value = code;  
148 -  
149 - onSearch();  
150 - }  
151 -  
152 - // 每页展示多少条  
153 - let handleSizeChange = (val) => {  
154 - console.log(`每页 ${val} 条`)  
155 - pageInfo.limit = val;  
156 - onSearch();  
157 - }  
158 -  
159 - // 切换页码  
160 - let handleCurrentChange = (val) => {  
161 - console.log(`当前页: ${val}`)  
162 - pageInfo.page = val;  
163 - onSearch();  
164 - }  
165 -  
166 - // 切换页码  
167 - let prePage = (val) => {  
168 - console.log(`当前页: ${val}`)  
169 - pageInfo.page = val - 1;  
170 - onSearch();  
171 - }  
172 -  
173 - // 切换页码  
174 - let nextPage = (val) => {  
175 - console.log(`当前页: ${val}`)  
176 - pageInfo.page = val + 1;  
177 - onSearch();  
178 - }  
179 -  
180 - // 打开详情页配置  
181 - let openDetailPage = (rowDetail) => {  
182 -  
183 - edits.value['jbxx'] = false;  
184 -  
185 - if(row.value.detail && row.value.detail.name){  
186 - row.value.detail.name.forEach(function (v) {  
187 - edits.value[v] = false;  
188 - })  
189 - }  
190 -  
191 - let resId = rowDetail.resId;  
192 -  
193 - // 默认基本信息  
194 - activeName.value = 'jbxx';  
195 - row.value['title'] = rowDetail.resName + '_' + rowDetail.ip;  
196 - row.value['resId'] = resId;  
197 -  
198 - let id = encodeURIComponent(resId);  
199 -  
200 - // 获取配置信息  
201 - proxy.$http.get(`/api-web/assets/configmanager/resource/assets?resId=${id}`, {}, function (res) {  
202 - if (res && res.map) {  
203 - row.value['detail'] = res.map;  
204 -  
205 - // 清空其他页签得数据  
206 - if(res.map.name){  
207 - res.map.name.forEach(function(tab) {  
208 - delete row.value[tab.parentPropKey];  
209 - })  
210 - }  
211 - centerDialogVisible.value = true;  
212 - }  
213 - })  
214 - }  
215 -  
216 - // 加载其他页签数据  
217 - let handleClick = (tab, event) => {  
218 - let tabName = tab.props.name;  
219 - let resId = row.value['resId'];  
220 -  
221 - // 已加载  
222 - if (row.value[tabName]) {  
223 - return;  
224 - }  
225 - let id = encodeURIComponent(resId);  
226 - // 查询其他页签信息  
227 - proxy.$http.get(`/api-web/assets/configmanager/tab/detail?resId=${id}&parentKey=${tabName}`, {}, function (  
228 - res) {  
229 - if (res && res.map) {  
230 - edits.value[tabName] = false;  
231 - row.value[tabName] = res.map;  
232 - }  
233 - })  
234 - }  
235 -  
236 - // 二维表格添加  
237 - let addTabDetail = (tabName) => {  
238 - tabDelete.value[tabName] = true;  
239 - // // 设置取消状态  
240 - // tabDelete.value[tabName] = false;  
241 - // 设置编辑状态  
242 - edits.value[tabName] = false;  
243 - let val = row.value[tabName];  
244 - if(val && val.map && val.data){  
245 - let rowData = val.map;  
246 -  
247 - let keys = Object.keys(rowData);  
248 - let propGroup = (new Date()).getTime();  
249 -  
250 - let arr = [];  
251 - keys.forEach(function (k) {  
252 - var newProp = Object.create({});  
253 - Object.assign(newProp,rowData[k]);  
254 - newProp.propGroup = propGroup;  
255 - newProp.addItem = 1;  
256 - arr.push(newProp);  
257 - });  
258 -  
259 - val.data.push(arr);  
260 - }  
261 -  
262 - console.log(val);  
263 - }  
264 -  
265 - // 点击编辑按钮  
266 - let editConfig = (tabName) => {  
267 - edits.value[tabName] = true;  
268 - }  
269 -  
270 - // 点击取消  
271 - let cancelConfig = (tabName) => {  
272 - edits.value[tabName] = false;  
273 -  
274 - // 还原数据  
275 - let detail = row.value.detail[tabName];  
276 - if(detail){  
277 - // 基本信息  
278 - detail.forEach(function (v) {  
279 - var e = editKey.value[v.propKey];  
280 - if(e){  
281 - detail.propValue = e.oldValue;  
282 - detail.propValueText = e.propValueText;  
283 - e.edit = false;  
284 - }  
285 - })  
286 - }  
287 - // 二维列表信息  
288 - detail = row.value[tabName];  
289 - if(detail && detail.data){  
290 - tabDelete.value[tabName] = false;  
291 - let newArr = [];  
292 - detail.data.forEach(function (v,i) {  
293 - let addItem = detail.data[i][0].addItem;  
294 - if(addItem && addItem == 1){  
295 - //detail.data.splice(i, 1);  
296 - } else {  
297 - if(v && v.length > 0){  
298 - v.forEach(function(configItem){  
299 - var e = editKey.value[configItem.propKey];  
300 - if(e){  
301 - configItem.propValue = e.oldValue;  
302 - configItem.propValueText = e.propValueText;  
303 - e.edit = false;  
304 - }  
305 - })  
306 -  
307 - newArr.push(v);  
308 - }  
309 - }  
310 - });  
311 - detail.data = newArr;  
312 - }  
313 - }  
314 -  
315 - // 点击保存  
316 - let saveConfig = (tabName) => {  
317 - let resId = row.value['resId'];  
318 - let arr = [];  
319 - let detail = row.value.detail[tabName];  
320 - if(detail){  
321 - detail.forEach(function (v) {  
322 - arr.push({  
323 - resId:resId,  
324 - key:v.propKey,  
325 - val:v.propValue,  
326 - type:v.propType,  
327 - parentKey:v.parentPropKey,  
328 - parentGroup:v.propGroup,  
329 - sort:v.sort  
330 - })  
331 - });  
332 - proxy.$http.post(`/api-web/assets/configmanager/saveConfig`, arr, function (res) {  
333 - proxy.$global.showMsg('保存成功！');  
334 - editKey.value = {};  
335 - centerDialogVisible.value = false;  
336 - onSearch();  
337 - })  
338 - }  
339 - }  
340 -  
341 - // 保存二维属性  
342 - let saveTabConfig = (tabName) => {  
343 - let resId = row.value['resId'];  
344 - let arr = [];  
345 - let detail = row.value[tabName];  
346 - if(detail && detail.data){  
347 - detail.data.forEach(function (v) {  
348 - if(v && v.length > 0){  
349 - v.forEach(function(configItem){  
350 - arr.push({  
351 - resId:resId,  
352 - key:configItem.propKey,  
353 - val:configItem.propValue,  
354 - type:configItem.propType,  
355 - parentKey:configItem.parentPropKey,  
356 - parentGroup:configItem.propGroup,  
357 - sort:configItem.sort  
358 - })  
359 - })  
360 - }  
361 -  
362 - });  
363 - proxy.$http.post(`/api-web/assets/configmanager/saveConfig`, arr, function (res) {  
364 - proxy.$global.showMsg('保存成功！');  
365 - editKey.value = {};  
366 - centerDialogVisible.value = false;  
367 - onSearch();  
368 - })  
369 - }  
370 - }  
371 -  
372 - // 二维删除新增得选项  
373 - let deleConfigItem = (list,index,tabName) =>{  
374 - let detail = row.value[tabName];  
375 - if(detail && detail.data){  
376 - detail.data.splice(index,1);  
377 - }  
378 - }  
379 -  
380 - let callback = ( key, propValue,oldValue,propValueText) => {  
381 - let resId = row.value['resId'];  
382 - console.log("回调", resId, key, propValue,oldValue)  
383 - if(propValue == null || propValue == '' || propValue == oldValue){  
384 - return;  
385 - }  
386 -  
387 - editKey.value[key] = {  
388 - edit:true,  
389 - val:propValue,  
390 - oldValue: oldValue,  
391 - propValueText:propValueText == undefined ? oldValue : propValueText  
392 - };  
393 - }  
394 -  
395 - // 挂载完  
396 - Vue.onMounted(() => {  
397 - onSearch();  
398 - console.log('onMounted');  
399 - })  
400 -  
401 - return {  
402 - loadHead,  
403 - columns,  
404 - tableList,  
405 - pageInfo,  
406 - emptyText,  
407 - resTypeArr,  
408 - machineRoom,  
409 - widths,  
410 - onSearch,  
411 - getResType,  
412 - getMachineRoom,  
413 - openDetailPage,  
414 - centerDialogVisible,  
415 - row,  
416 - checkList,  
417 - activeName,  
418 - handleClick,  
419 - edits,  
420 - editConfig,  
421 - cancelConfig,  
422 - saveConfig,  
423 - callback,  
424 - editKey,  
425 - addTabDetail,  
426 - deleConfigItem,  
427 - saveTabConfig,  
428 - tabDelete,  
429 - handleSizeChange,  
430 - initFlag,  
431 - handleCurrentChange,  
432 - height,  
433 - onBtnSearch  
434 - }  
435 - }  
436 -}  
@@ -8,7 +8,10 @@ export default { @@ -8,7 +8,10 @@ export default {
8 }, 8 },
9 data() { 9 data() {
10 return { 10 return {
11 - 11 + props : {
  12 + label:'title',
  13 + children:'children'
  14 + }
12 } 15 }
13 }, 16 },
14 setup() { 17 setup() {
@@ -28,10 +31,9 @@ export default { @@ -28,10 +31,9 @@ export default {
28 dialogVisible.value = true; 31 dialogVisible.value = true;
29 } 32 }
30 33
31 -  
32 // 获取左侧树结构 34 // 获取左侧树结构
33 let loadTree = () => { 35 let loadTree = () => {
34 - proxy.$http.get("/api-web/home/resType/getTree?notExist=machineroom&table=resources&exist=HOST_MINICOMPUTER_SERVER", {}, function (res) { 36 + proxy.$http.get("/api-web/res/list/tree", {}, function (res) {
35 if (res && res.data) { 37 if (res && res.data) {
36 treeData.value = res.data 38 treeData.value = res.data
37 } 39 }
@@ -40,7 +42,7 @@ export default { @@ -40,7 +42,7 @@ export default {
40 42
41 // 挂载完 43 // 挂载完
42 Vue.onMounted(() => { 44 Vue.onMounted(() => {
43 - 45 + loadTree();
44 console.log('onMounted'); 46 console.log('onMounted');
45 }) 47 })
46 48
1 -<div>  
2 - <el-form :inline="true" :model="formInline" class="demo-form-inline">  
3 - <el-form-item label="">  
4 - <el-input placeholder="输入关键字" prefix-icon="el-icon-search" v-model="input2">  
5 - </el-input>  
6 - </el-form-item>  
7 -  
8 - <el-form-item label="">  
9 - <res-type-list multiple clearable collapseTags @callback="getResType" />  
10 - </el-form-item>  
11 -  
12 - <el-form-item label="">  
13 - <machine-room @callback="getMachineRoom"></machine-room>  
14 - </el-form-item>  
15 -  
16 - <el-form-item>  
17 - <el-button type="primary" @click="onSubmit">查询</el-button>  
18 - </el-form-item>  
19 - </el-form>  
20 - <el-table :data="tableData" style="width: 100%">  
21 - <el-table-column v-for="item in columns" :prop="item.propKey" :label="item.propName">  
22 - </el-table-column>  
23 - </el-table>  
24 -</div>  
1 -export default {  
2 - name: 'About',  
3 - template: '',  
4 - setup () {  
5 - const value = Vue.ref('数据绑定的演示')  
6 -  
7 - return {  
8 - value  
9 - }  
10 - }  
11 - }  
12 -  
1 -<div>  
2 - 演示一下组件里面使用组件的方式<br>  
3 - <test :str="value"></test>  
4 -  
5 -</div>  
1 -export default {  
2 - name: 'template',  
3 - template: ``,  
4 - components: {  
5 - test: Vue.defineAsyncComponent(  
6 - () => myImport('components/test/test')  
7 - )  
8 - },  
9 - setup () {  
10 - const value = Vue.ref('传入组件的参数')  
11 - return {  
12 - value  
13 - }  
14 - }  
15 - }  
16 -  
1 -<div class="assets-configmanager">  
2 - https://echarts.apache.org/examples/zh/index.html  
3 - <div id="main" style="width: 600px;height:400px;"></div>  
4 -</div>  
1 -export default {  
2 - name: 'testEcharts',  
3 - template: '',  
4 - setup() {  
5 -  
6 - const {  
7 - proxy  
8 - } = Vue.getCurrentInstance()  
9 -  
10 - let init = () => {  
11 - // 基于准备好的dom，初始化echarts实例  
12 - var myChart = echarts.init(document.getElementById('main'));  
13 -  
14 - // 指定图表的配置项和数据  
15 - var option = {  
16 - title: {  
17 - text: 'ECharts 入门示例'  
18 - },  
19 - tooltip: {},  
20 - legend: {  
21 - data: ['销量']  
22 - },  
23 - xAxis: {  
24 - data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  
25 - },  
26 - yAxis: {},  
27 - series: [{  
28 - name: '销量',  
29 - type: 'bar',  
30 - data: [5, 20, 36, 10, 10, 20]  
31 - }]  
32 - };  
33 -  
34 - // 使用刚指定的配置项和数据显示图表。  
35 - myChart.setOption(option);  
36 - }  
37 -  
38 - // 挂载完  
39 - Vue.onMounted(() => {  
40 - init();  
41 - console.log('onMounted');  
42 - })  
43 -  
44 - return {  
45 -  
46 - }  
47 - }  
48 -}  
1 -const { ref, reactive } = Vue  
2 -  
3 -const testManage = () => {  
4 - const hello = ref('你好，世界')  
5 - const clickMe = () => {  
6 - hello.value = '好的，收到，现在时间：' + new Date()  
7 - }  
8 -  
9 - return {  
10 - hello,  
11 - clickMe  
12 - }  
13 -}  
14 -  
15 -// vue3的对象  
16 -export default {  
17 - template: `  
18 - <h2>我是 {{value.name}}</h2>  
19 - <div>  
20 - 老规矩：{{hello}}<br>  
21 - <el-button type="primary" @click="clickMe">快点我</el-button><br>  
22 - <br>  
23 - 这里是一种CND的开发方式<br>  
24 - vue全家桶和UI库用 CND方式 加载。<br>  
25 - js代码用 import 方式加载。<br>  
26 - 目录结构参考了vue-cli建立的项目。<br>  
27 - 支持组件、路由、状态管理等功能。<br>  
28 - 不用webpack、npm等，建立网站就可以用。<br><br>  
29 - 状态计数：{{$store.state.count}}  
30 - </div>  
31 - `,  
32 - setup() {  
33 - // 使用外面的定义，分解setup内部的代码  
34 - const { hello, clickMe } = testManage()  
35 -  
36 - const value = reactive({  
37 - name: 'jyk'  
38 - })  
39 -  
40 -  
41 - return {  
42 - value,  
43 - hello,  
44 - clickMe  
45 - }  
46 - }  
47 -}  
1 -<div>  
2 - 这里演示一下 vuex 的一些操作：<br>  
3 -  
4 - ref的count ：{{refCount}} <br>  
5 - 计算属性的Count ：{{comCount}} <br>  
6 - 只读对象 ：{{readonlyObject}} <br>  
7 -  
8 -</div>  
1 -  
2 -  
3 - // 获取状态  
4 - const indirectManage = () => {  
5 - const store = Vuex.useStore()  
6 -  
7 - // 用toRef获取 count，有相应性，可以直接修改state  
8 - const refCount = Vue.toRef(store.state, 'count')  
9 - // 计算属性获取count，有相应性，不可以直接修改state  
10 - const comCount = Vue.computed(() => store.state.count + 10)  
11 - // 只读的对象，有响应性，浅层不可以修改，但是深层还是可以修改。  
12 - const readonlyObject = Vue.readonly(store.state.myObject)  
13 -  
14 - console.log('refCount：', refCount)  
15 - console.log('comCount：', comCount)  
16 - console.log('readonlyObject：', readonlyObject)  
17 - console.log('================')  
18 -  
19 - // 定时修改 count 看响应性  
20 - setTimeout(() => {  
21 - // store.commit('setCount')  
22 - // refCount.value += 200 // 会直接改vuex的state  
23 - }, 2000)  
24 -  
25 - return {  
26 - refCount,  
27 - comCount,  
28 - readonlyObject  
29 - }  
30 - }  
31 -  
32 -  
33 -export default {  
34 - name: 'vuex_store',  
35 - template: '',  
36 - components: {  
37 - },  
38 - setup () {  
39 - const value = Vue.ref('状态管理的演示')  
40 -  
41 - // 获取状态  
42 - const { refCount, comCount, readonlyObject } = indirectManage()  
43 -  
44 - return {  
45 - value,  
46 - refCount, comCount, readonlyObject  
47 - }  
48 - }  
49 - }  
50 -