From 40e82df11a49432f329858a84e2a1f23351a155d Mon Sep 17 00:00:00 2001 From: zhangyu Date: Fri, 3 Jul 2020 17:28:02 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-347=20feat=EF=BC=9A=E5=A2=9E=E5=8A=A0link?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/page/config/system.vue | 189 +++++++++++++++++- 1 file changed, 186 insertions(+), 3 deletions(-) diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue index f145a35b4..aaace5660 100644 --- a/nezha-fronted/src/components/page/config/system.vue +++ b/nezha-fronted/src/components/page/config/system.vue @@ -162,6 +162,61 @@ + +
+
+ +
名称
+
URL
+
操作
+
+ +
+ + + + + + + + + + Add + + +
+ + +
+ + + + + + + + + + Update + Cancel + + +
+
{{item.name}}
+
{{item.url}}
+
Delete
+
+
+ +
+
@@ -202,9 +257,11 @@ import {host} from '../../common/js/validate' import {uSize} from '../../common/js/validate' import bus from '../../../libs/bus'; + import draggable from 'vuedraggable' export default { name: "system", + components:{draggable}, data(){ return { basic:{ @@ -323,6 +380,13 @@ type:[], password:'', }, + linkTemp:{ + name:'',url:'' + }, + link:[], + linkRules:[ + + ], resetRules:{ type:[{required:true,message:this.$t('validate.required'),trigger:'blur'},], password:[{required:true,message:this.$t('validate.required'),trigger:'blur'},], @@ -341,14 +405,14 @@ value:'sysconfig', }, ], - activeTab:'basic' + activeTab:'link' } }, methods:{ selectTab:function(tab){ this.querySetInfo(tab.name) }, - querySetInfo:function(type){ + querySetInfo:function(type){ // 切换tab if(!type){ console.error('type is required') return @@ -356,6 +420,15 @@ if(type == 'reset'){ return ; } + if(type == 'link'){ + // this.$get('link').then(response=>{ + // console.log(response) + // }); + // console.log(response); + this.link=[{id:1,name:'000',url:'222',isEdit:false}, + {id:2,name:'111',url:'https://www.baidu.com/s?wd=element&rsv_spt=1&rsv_iqid=0xbccc5b9a000f76e6&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ts_3&oq=%25E5%25A4%259A%25E8%25A1%258C%25E6%2596%2587%25E6%259C%25AC%25E7%259C%2581%25E7%2595%25A5%25E5%258F%25B7&rsv_btype=t&inputT=2473&rsv_t=fec3hB0PE04MDkxGHiV1k81e5C4DwS5dhZn7UD92ZSZqxpJC65PdHK%2BctV3yOy7QMxq2&rsv_pq=b35cdd7a0005aae6&rsv_sug3=73&rsv_sug1=58&rsv_sug7=100&rsv_sug2=0&prefixsug=ele&rsp=3&rsv_sug4=2473',isEdit:false},] + return + } this.$get('sysConfig?type='+type).then(response=>{ if(response.code == 200){ let sets=response.data[type]; @@ -472,9 +545,38 @@ } }); }, + // link 移动 + change: function (evt) { + // console.log(evt) + }, + //start ,end ,add,update, sort, remove 得到的都差不多 + start: function (evt) { + // console.log(evt) + }, + end: function (evt) { + console.log(evt); + console.log(this.link); + evt.item //可以知道拖动的本身 + evt.to // 可以知道拖动的目标列表 + evt.from // 可以知道之前的列表 + evt.oldIndex // 可以知道拖动前的位置 + evt.newIndex // 可以知道拖动后的位置 + }, + move: function (evt, originalEvent) { + // console.log(evt) + // console.log(originalEvent) //鼠标位置 + }, + // link add + // link edit + linkEdit(item){ + let index=this.link.findIndex((item1)=>item.id==item1.id); + this.$set(this.link,index,{...this.link[index],isEdit:true}); + }, + // link update + // link del }, mounted() { - this.querySetInfo('basic') + this.querySetInfo('basic'); } } @@ -487,6 +589,71 @@ width: 61.8% !important; position: relative; } + .linkBox{ + position: relative; + width: 800px; + } + + .linkTitle{ + display: flex; + align-items:center; + border-bottom: 2px solid #dfe1e6; + color: #6b778c; + font-size: 12px; + height: 24px; + line-height: 24px; + font-weight: 600; + } + .handle{ + cursor: move !important; + padding:0 5px; + line-height: 34px; + } + .linkBtn{ + height: 28px; + line-height: 0px; + font-size: 12px; + } + .linkTitleHandle{ + padding: 0 13px; + } + .linkContent{ + display: flex; + padding: 5px 0px; + border-bottom: 1px solid #dfe1e6; + font-size: 13px; + line-height: 34px; + } + .linkFormContent{ + display: flex; + line-height: 34px; + } + .linkTitleName{ + width: 100px; + margin-right: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 31px; + } + .linkTitleUrl{ + width: 460px; + margin-right: 12px; + height: 31px; + } + .linkTitleUrlContent{ + display: inline-block; + width: 430px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 31px; + } + .linkTitleUrl .nz-icon-edit{ + font-size: 12px; + float: right; + cursor: pointer; + }