From c346c750180f460065736f0c736ce4122b0554c6 Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Tue, 7 Jul 2020 09:47:32 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-347=20feat=EF=BC=9A=E8=81=94=E8=B0=83?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E3=80=82style=EF=BC=9A=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=AF=B9=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=AF=BC=E8=88=AA=E4=B8=8B=E6=8B=89=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          |  18 +-
 .../src/components/page/config/system.vue     | 240 ++++++++++++++----
 2 files changed, 199 insertions(+), 59 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 27d11e4a9..36c9ef03d 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -13,9 +13,7 @@
         </template>
         <template v-for="(item, index) in $store.state.linkData">
           <el-menu-item :index="'0-' + index">
-            <div>
-              <span><a :href='item.url' class="nz-a" target="_blank" :title="item.url">{{item.name}}</a></span>
-            </div>
+              <span class="linkTitle"><a :href='item.url' class="nz-a" target="_blank" :title="item.url">{{item.name}}</a></span>
           </el-menu-item>
         </template>
       </el-submenu>
@@ -859,6 +857,20 @@
     float: right;
     border-bottom-right-radius: 8px;
   }
+  .linkTitle{
+    display: inline-block;
+    width: 100%;
+    font-size: 15px;
+    color: #444444;
+  }
+  .linkTitle:hover{
+    background-color: #eee;
+  }
+  .linkTitle>a{
+    display: inline-block;
+    width: 100%;
+    padding-left: 35px;
+  }
 </style>
 <style>
   .nz-submenu .menu-edit {
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index aaace5660..10e8fc236 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -162,18 +162,18 @@
             </el-form>
           </div>
         </el-tab-pane>
-        <el-tab-pane :label="'link'" name="link"><!--$t('config.system.reset.reset')-->
-          <div class="linkBox" v-scrollBar>
+        <el-tab-pane :label="$t('config.system.link.link')" name="link"><!--$t('config.system.reset.reset')-->
+          <div class="linkBox" >
             <div class="linkTitle">
               <span class="linkTitleHandle"></span>
-              <div class="linkTitleName">名称</div>
-              <div class="linkTitleUrl">URL</div>
-              <div class="linkTitleBtn">操作</div>
+              <div class="linkTitleName">{{$t('config.system.link.name')}}</div>
+              <div class="linkTitleUrl">{{$t('config.system.link.url')}}</div>
+              <div class="linkTitleBtn">{{$t('config.system.link.operation')}}</div>
             </div>
             <!--linkAdd-->
             <div class="linkContent linkAddBox">
               <span class="linkTitleHandle"></span>
-              <el-form :inline="true"  :model="linkTemp"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
+              <el-form :inline="true"  :model="linkTemp"  label-width="180px" size="small" ref="linkTempForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form">
                 <el-form-item  prop="name">
                   <el-input v-model="linkTemp.name"  class="linkName"/>
                 </el-form-item>
@@ -181,40 +181,50 @@
                   <el-input  v-model="linkTemp.url" class="linkUrl"/>
                 </el-form-item>
                 <el-form-item  prop="btn">
-                  <el-button class="linkBtn" >Add</el-button>
+                  <el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkAdd">Add</el-button>
                 </el-form-item>
               </el-form>
             </div>
             <!--linkEdit-->
-            <draggable v-model="link"
-                       :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
-                       @change="change"
-                       @start="start"
-                       @end="end"
-                       :move="move"
-                       handle=".handle"
-            >
-              <div v-for="(item,index) in link" class="linkContent">
-                <i class="nz-icon nz-icon-move handle"></i>
-                <el-form :inline="true"  :model="link[index]"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit">
-                <el-form-item  prop="name" class="linkName">
-                  <el-input v-model="item.name" width="140px" />
-                </el-form-item>
-                <el-form-item  prop="url" class="linkUrl">
-                  <el-input  v-model="item.url" width="460px" />
-                </el-form-item>
-                <el-form-item  prop="btn">
-                  <el-button class="linkBtn">Update</el-button>
-                  <el-button class="linkBtn">Cancel</el-button>
-                </el-form-item>
-              </el-form>
-                <div class="linkFormContent" v-else>
-                  <div class="linkTitleName">{{item.name}}</div>
-                  <div class="linkTitleUrl"><span class="linkTitleUrlContent">{{item.url}}</span><i class="nz-icon nz-icon-edit" @click="linkEdit(item)"></i></div>
-                  <div class="linkFormBtn"> <el-button class="linkBtn">Delete</el-button></div>
+            <div  class="scrollBox"
+                  v-scrollBar>
+              <draggable v-model="link"
+                         :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
+                         @change="change"
+                         @start="start"
+                         @end="end"
+                         :move="move"
+                         handle=".handle"
+              >
+                <div v-for="(item,index) in link" class="linkContent" :id="'linkDiv'+item.id">
+                  <i class="nz-icon nz-icon-sort4 handle"></i>
+                  <el-form :inline="true"  :model="link[index]" :ref="'linkForm'+item.id" label-width="180px" size="small" ref="resetForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit" >
+                  <el-form-item  prop="name" class="linkName">
+                    <el-input v-model="item.name" width="140px" />
+                  </el-form-item>
+                  <el-form-item  prop="url" class="linkUrl">
+                    <el-input  v-model="item.url" width="460px" />
+                  </el-form-item>
+                  <el-form-item  prop="btn">
+                    <el-button type="primary" class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-75" @click="linkUpdate(item)">Update</el-button>
+                    <el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkCancel(item)">Cancel</el-button>
+                  </el-form-item>
+                </el-form>
+                  <div class="linkFormContent" v-else>
+                    <div class="linkTitleName">{{item.name}}</div>
+                    <div class="linkTitleUrl">
+                      <span class="linkTitleUrlContent" @click="openUrl(item)">
+                        <!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">-->
+                        <span>{{item.url}}</span>
+                        <!--</el-tooltip>-->
+                      </span>
+                      <i class="nz-icon nz-icon-edit" @click="linkEdit(item)" v-if="item.buildIn=='0'"></i>
+                    </div>
+                    <div class="linkFormBtn"> <el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkDel(item)" v-if="item.buildIn=='0'">Delete</el-button></div>
+                  </div>
                 </div>
-              </div>
-            </draggable>
+              </draggable>
+            </div>
           </div>
         </el-tab-pane>
         <el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
@@ -384,9 +394,16 @@
               name:'',url:''
             },
             link:[],
-            linkRules:[
-
-            ],
+            linkReserved:[],
+            linkRules:{
+              name:[
+                { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+                { max: 64, message: this.$t('config.system.link.nameMaxLength'), trigger: 'blur' }
+                ],
+              url:[
+                { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+              ]
+            },
             resetRules:{
               type:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
               password:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
@@ -405,7 +422,7 @@
                 value:'sysconfig',
               },
             ],
-            activeTab:'link'
+            activeTab:'basic'
           }
         },
         methods:{
@@ -421,12 +438,7 @@
               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},]
+              this.getLinkData();
               return
             }
             this.$get('sysConfig?type='+type).then(response=>{
@@ -555,25 +567,117 @@
           },
           end: function (evt) {
             console.log(evt);
-            console.log(this.link);
-            evt.item //可以知道拖动的本身
-            evt.to    // 可以知道拖动的目标列表
-            evt.from  // 可以知道之前的列表
-            evt.oldIndex  // 可以知道拖动前的位置
-            evt.newIndex  // 可以知道拖动后的位置
+            console.log(this.link,this.linkReserved);
+            let length=this.link.length;
+            if(evt.newIndex==evt.oldIndex){ // 如果没有移动返回
+              return
+            }
+            let parmas={
+              id:this.link[evt.newIndex].id,
+              prev:0,
+              next:-1
+            }
+            if(evt.newIndex==length-1){
+              parmas.prev=this.link[evt.newIndex-1].id;
+            }else if(evt.newIndex==0){
+              parmas.next=this.link[evt.newIndex+1].id;
+            }else{
+              parmas.prev=this.link[evt.newIndex-1].id;
+              parmas.next=this.link[evt.newIndex+1].id;
+            }
+            console.log(parmas)
+            this.$put('/link/modify',parmas).then((response)=>{
+              console.log(response);
+              this.$store.commit('setLinkData',this.link);
+            })
           },
           move: function (evt, originalEvent) {
             // console.log(evt)
             // console.log(originalEvent) //鼠标位置
           },
+          getLinkData(){
+            this.linkTemp={name:'',url:''};
+            this.$refs['linkTempForm'].clearValidate();
+            this.$get('/link').then(response=>{
+              console.log(response);
+              this.link=response.data;
+              this.linkReserved=[...this.link];
+            });
+          },
           // link add
+          linkAdd(){
+            this.$refs['linkTempForm'].validate((valid) => {
+              if (valid) {
+                this.$post('/link',this.linkTemp).then(response=>{//新增link
+                  if(response.code == 200){
+                    this.linkTemp={name:'',url:''};
+                    this.linkAddCallBack();
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.addSuccess")});
+                  }else{
+                    this.$message.error(response.msg);
+                  }
+                })
+              } else {
+                return false;
+              }
+            });
+          },
+          linkAddCallBack(){
+            this.$get('/link').then(response=>{
+              this.link.push(response.data[response.data.length-1]);
+              this.linkReserved.push(response.data[response.data.length-1]);
+              this.$store.commit('setLinkData',this.link);
+            });
+          },
           // 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
+          linkUpdate(item){
+            console.log(this.$refs['linkForm'+item.id]);
+            this.$refs['linkForm'+item.id][0].validate((valid) => {
+              if (valid) {
+                this.$put('/link',item).then(response=>{
+                  if(response.code == 200){
+                    let index=this.link.findIndex((item1)=>item.id==item1.id);
+                    this.$set(this.link,index,{...this.link[index],isEdit:false});
+                    this.linkReserved=this.link;
+                    this.$store.commit('setLinkData',this.link);
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  }else{
+                    this.$message.error(response.msg);
+                  }
+                })
+              } else {
+                return false;
+              }
+            });
+          },
+          // link cancel
+          linkCancel(item){
+            let index=this.link.findIndex((item1)=>item.id==item1.id);
+            let indexReserved=this.linkReserved.findIndex((item1)=>item.id==item1.id);
+            this.$set(this.link,index,{...this.linkReserved[indexReserved],isEdit:false});
+          },
           // link del
+          linkDel(item){
+            this.$delete('/link?ids='+item.id).then((response)=>{
+              if(response.code == 200){
+                this.link=this.link.filter((item1)=>item.id!==item1.id);
+                this.linkReserved=this.linkReserved.filter((item1)=>item.id!==item1.id);
+                this.$store.commit('setLinkData',this.link);
+                this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              }else{
+                this.$message.error(response.msg);
+              }
+            });
+          },
+          //openUrl 跳转页面
+          openUrl(item){
+            window.open(item.url)
+          }
         },
         mounted() {
           this.querySetInfo('basic');
@@ -590,10 +694,14 @@
     position: relative;
   }
   .linkBox{
-    position: relative;
+    height: calc(100vh - 100px);
     width: 800px;
   }
-
+  .scrollBox{
+    position: relative;
+    height: calc(100vh - 200px);
+    margin-bottom: 20px;
+  }
   .linkTitle{
     display: flex;
     align-items:center;
@@ -617,13 +725,22 @@
   .linkTitleHandle{
     padding: 0 13px;
   }
-  .linkContent{
+  .linkAddBox{
     display: flex;
-    padding: 5px 0px;
+    padding: 10px 0px;
     border-bottom: 1px solid #dfe1e6;
     font-size: 13px;
     line-height: 34px;
   }
+  .linkContent{
+    display: flex;
+    padding: 10px 0px;
+    font-size: 13px;
+    line-height: 34px;
+  }
+  .linkContent:not(:last-child){
+    border-bottom: 1px solid #dfe1e6;
+  }
   .linkFormContent{
     display: flex;
     line-height: 34px;
@@ -637,7 +754,7 @@
     height: 31px;
   }
   .linkTitleUrl{
-    width: 460px;
+    width: 462px;
     margin-right: 12px;
     height: 31px;
   }
@@ -648,12 +765,23 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     height: 31px;
+    cursor: pointer;
+    outline: none;
+  }
+  .linkTitleUrlContent:hover{
+    text-decoration:underline;
   }
   .linkTitleUrl .nz-icon-edit{
     font-size: 12px;
     float: right;
     cursor: pointer;
   }
+  /deep/ .el-form-item--small .el-form-item__error{
+    padding-top: 0px;
+  }
+  .linkUrlTip{
+    width: 430px;
+  }
 </style>
 <style>
   .system-config-form .el-form-item__content{