优化部分列表

src/components/login.vue

@@ -9,7 +9,7 @@
           </Input>
         </FormItem>
         <FormItem prop="password">
-          <Input type="password" v-model="loginForm.password" placeholder="Password">
+          <Input type="password" v-model="loginForm.password" placeholder="Password" @keyup.enter.native='login'>
             <Icon type="ios-lock-outline" slot="prepend"></Icon>
           </Input>
         </FormItem>
@@ -27,14 +27,13 @@ import {login} from '../api/user.api'
 import localStorage from '../services/localStorage.service.js'
 export default {
   data () {
-    var that=this
-    const validateMenuClassifyId = (rule, value, callback) => {
-      if (this.status) {  
-        callback(new Error('用户名或密码错误'))
+    const validateMenuClassifyId = (rule, value, callback) => {
+      if (this.status) {
+        callback(new Error('用户名或密码错误'))
         this.status = false
-      } else {
-        callback()
-      }
+      } else {
+        callback()
+      }
     }
     return {
       loginForm: {
@@ -49,7 +48,7 @@ export default {
         ],
         password: [
           {required: true, message: '请输入密码', trigger: 'blur'},
-          { required: true,validator: validateMenuClassifyId , trigger: 'blur'}
+          { required: true, validator: validateMenuClassifyId, trigger: 'blur' }
         ]
       }
     }
@@ -60,11 +59,11 @@ export default {
         if (valid) {
           let data = btoa(`${this.loginForm.loginName}:${this.loginForm.password}`)
           login(data).then((data) => {
-            if(data.code === 400) {
+            if (data.code === 400) {
               this.error = data.body
               this.status = true
               this.$refs['loginForm'].validate()
-              return
+              return false
             } else {
               this.status = false
               localStorage.set('heimdallr-token', data.body['heimdallr-token'])

src/pages/mainconfiguration/mainconfiguration.vue

 <template>
   <div class="mainconfiguration">
    <div class="mainconfiguration_header">
-    <Select v-model="server" style="width:95%;margin-left:2%" @on-change="selectserver">
+     <span><span class="selectsertitle">请选择要配置的服务：</span>
+      <Select v-model="server" style="width:82%" @on-change="selectserver" @on-open-change="selectserverchange">
         <Option v-for="item in serviceList" :value="item" :key="item">{{ item }}</Option>
       </Select>
+     </span>
    </div>
    <div class="mainconfiguration_content">
      <div class="mainconfiguration_content_header">
@@ -12,12 +14,12 @@
       </div>
       <div class="content_header_list">
         <div class="header_list_left">
-          <p class="list_content" @click="authenticationlist('url_auth_list')">鉴权URL列表</p>
-          <p class="list_content" @click="foreignlist('url_white_list')">对外URL列表</p>
-          <p class="list_content" @click="internallylist('url_black_list')">对内URL列表</p>
-          <p class="list_content" @click="domainnameprefixlist('domain_prefix')">域名前缀列表</p>
-          <p class="list_content" @click="serviceAdministrator('service_owner')">服务管理员列表</p>
-          <p class="list_content" @click="testmo('test_mode')">测试模式</p>
+          <p class="list_content" @click="authenticationlist('url_auth_list')" :class="{'colorlistone':listonecolorauth}">鉴权URL列表</p>
+          <p class="list_content" @click="foreignlist('url_white_list')" :class="{'colorlistone':listonecolorfor}">对外URL列表</p>
+          <p class="list_content" @click="internallylist('url_black_list')" :class="{'colorlistone':listonecolorint}">对内URL列表</p>
+          <p class="list_content" @click="domainnameprefixlist('domain_prefix')" :class="{'colorlistone':listonecolordoma}">域名前缀列表</p>
+          <p class="list_content" @click="serviceAdministrator('service_owner')" :class="{'colorlistone':listonecolorserv}">服务管理员列表</p>
+          <p class="list_content" @click="testmo('test_mode')" :class="{'colorlistone':listonecolortest}">测试模式</p>
         </div>
         <div class="header_list_right">
           <div class="list_right_header">
@@ -26,7 +28,7 @@
             </div>
             <div class="list_right_content">
               <p class="right_content_btn">
-                <Button  type="primary" size = 'small' @click="configlist">发布</Button>
+                <Button  type="primary" size = 'small' @click="configlist" :class="{'colorlistcolor':colorupdata}">发布</Button>
               </p>
               <p>
                 <Button  type="primary" size = 'small' @click="rollback">回滚</Button>
@@ -36,7 +38,7 @@
           <div class="list_right_configure">
             <div class="configure_content" v-show="isShowList">
               <p class="configure_content_configure">
-                <span><Input v-model="singlebaraddition" placeholder="请输入配置项" style="width: 65%;margin-top:1%;float:left;margin-left:2%" /></span>
+                <span><Input v-model="singlebaraddition" placeholder="请输入配置项" style="width: 65%;margin-top:1%;float:left;margin-left:2%" @keyup.enter.native='oneadd'/></span>
                 <Button  type="primary" size = 'small' style="margin:1.2% 0 0 1%;float:left" @click="oneadd">单条添加</Button>
                 <span style="float:right;margin:1.2% 2% 0% 1%">
                   <Button  type="primary" size = 'small' @click="clear">清空</Button>
@@ -50,8 +52,8 @@
             <div class="configure_content_test" v-show="isShowList == false">
               <p class="test_content">
                 <span style="margin-left:20px">状态：
-                  <span class="test_conten_status" v-if="testmostatus == true">开启</span>
-                  <span class="test_conten_status" v-if="testmostatus == false">关闭</span>
+                  <span class="test_conten_status" v-if="testmostatus === true">开启</span>
+                  <span class="test_conten_status" v-if="testmostatus === false">关闭</span>
                 </span>
                 <span class="test_content_btn">
                   <Button type="primary" size = 'small' @click="updatetestclick">修改</Button>
@@ -86,7 +88,7 @@
     <Modal v-model="rollbackModal" :mask-closable = 'false' :footer-hide='true' width='695'>
       <div class="rollbackdiv">
         <span v-for="(item,index) in rollbacklist" :key="index">
-          <span class="rollbackspan" @click="selectlist(item.value,item.key)">{{item.key}}</span>
+          <span class="rollbackspan" @click="selectlist(item.value,item.key,index)" :class="{'colorlistback':index==clickIndex1}">{{item.key}}</span>
         </span>
         <div class="rollbackcontentlist">
           {{content}}
@@ -104,6 +106,13 @@
         <Button  type="primary" size='small' @click="confiredelate">确认</Button>
       </div>
     </Modal>
+    <Modal v-model="changeserverModal" :mask-closable = 'false' :footer-hide='true' width='300'>
+      <h3 class="delatediv">是否确认切换服务?</h3>
+      <div class="rollbackdivbtn">
+        <Button  type="primary" size='small' style="margin:0 20px" @click="changeserverModal = false">取消</Button>
+        <Button  type="primary" size='small' @click="confiechangeserver">确认</Button>
+      </div>
+    </Modal>
     <Modal v-model="updateconfigModal" :mask-closable = 'false' :footer-hide='true' width='400'>
       <h3 class="updatediv">修改</h3>
       <div class="updatedivclass">
@@ -138,6 +147,51 @@
         <Button  type="primary" size='small' @click="confireupdatenode">保存</Button>
       </div>
     </Modal>
+    <Modal v-model="ContrastModal" :mask-closable = 'false' :footer-hide='true' width='500'>
+      <h3 class="updatediv">是否确认发布？</h3>
+      <div class="updatetestclass">
+        <p>
+          <span>原配置：{{contrastlist}}</span>
+        </p>
+        <p>
+          <span>新配置：{{logDataorigen}}</span>
+        </p>
+      </div>
+      <div class="rollbackdivbtn">
+        <Button  type="primary" size='small' style="margin:0 20px" @click="ContrastModal = false">取消</Button>
+        <Button  type="primary" size='small' @click="confirfabu">保存</Button>
+      </div>
+    </Modal>
+    <Modal v-model="ContrasttestModal" :mask-closable = 'false' :footer-hide='true' width='500'>
+      <h3 class="updatediv">是否确认发布？</h3>
+      <div class="updatetestclass">
+        <p>
+          <span v-if="aftertestmostatuorigen">原配置：开启</span>
+          <span v-else>原配置：开启</span>
+        </p>
+        <p>
+          <span v-if="aftertestmostatus">新配置：开启</span>
+          <span v-else>新配置：开启</span>
+        </p>
+      </div>
+      <div class="rollbackdivbtn">
+        <Button  type="primary" size='small' style="margin:0 20px" @click="ContrasttestModal = false">取消</Button>
+        <Button  type="primary" size='small' @click="confirfabu">保存</Button>
+      </div>
+    </Modal>
+    <Modal v-model="ContrastnodeModal" :mask-closable = 'false' :footer-hide='true' width='500'>
+      <h3 class="updatediv">是否确认发布？</h3>
+      <div class="updatetestclass">
+        <p>
+          <span>原配置：{{afterupdataweight}}</span>
+          <span>新配置：{{newupdateweight}}</span>
+        </p>
+      </div>
+      <div class="rollbackdivbtn">
+        <Button  type="primary" size='small' style="margin:0 20px" @click="ContrastnodeModal = false">取消</Button>
+        <Button  type="primary" size='small' @click="confirnode">保存</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 <script>
@@ -148,15 +202,31 @@ export default {
       server: '',
       isShowList: true,
       alladdModal: false,
+      listonecolorauth: true,
+      listonecolorfor: false,
+      listonecolorint: false,
+      listonecolorserv: false,
+      listonecolordoma: false,
+      listonecolortest: false,
+      colorupdata: false,
+      ContrastModal: false,
+      testdiv: false,
+      contrastlist: [],
+      logDataorigen: [],
+      clickIndex1: 0,
       rollbackModal: false,
       delateModal: false,
       updateconfigModal: false,
       updatetestModal: false,
       updatenodeModal: false,
+      changeserverModal: false,
+      ContrasttestModal: false,
+      ContrastnodeModal: false,
+      aftertestmostatuorigen: false,
       opentest: false,
       closetest: false,
-      testmostatus: false,
-      aftertestmostatus: false,
+      testmostatus: 'false',
+      aftertestmostatus: 'false',
       nodeId: '',
       updateconfig: '',
       alladdcontent: '',
@@ -169,6 +239,7 @@ export default {
       currentweight: '',
       afterupdataweight: '',
       updateweight: '',
+      newupdateweight: '',
       key: 'url_auth_list',
       service_name: '',
       version: '',
@@ -179,6 +250,8 @@ export default {
       ruleInline: {},
       serviceList: [],
       singlebaraddition: '',
+      nodeupdataid: '',
+      nodeupdataweight: '',
       logData: [
       ],
       logCol: [
@@ -246,7 +319,7 @@ export default {
           key: 'weight',
           align: 'center',
           render: (h, params) => {
-            return h('div', params.row.Meta.weight || 100)
+            return h('div', (params.row.Meta && params.row.Meta.weight) || 100)
           }
         },
         {
@@ -275,7 +348,10 @@ export default {
                 size: 'small'
               },
               style: {
-                marginRight: '10px'
+                marginRight: '10px',
+                background: params.row.updatacolorclass === true ? 'yellow' : '',
+                color: params.row.updatacolorclass === true ? 'black' : '',
+                border: params.row.updatacolorclass === true ? '1px solid yellow' : ''
               },
               on: {
                 click: () => {
@@ -292,16 +368,23 @@ export default {
   },
   methods: {
     testmo (key) {
+      this.listonecolorauth = false
+      this.listonecolorfor = false
+      this.listonecolorint = false
+      this.listonecolorserv = false
+      this.listonecolordoma = false
+      this.listonecolortest = true
       this.isShowList = false
       this.key = key
+      this.testdiv = true
       this.getkeytext(key)
       let data = {
         key: key,
         service_name: this.server
       }
       getconfigurelist(data).then(data => {
-        // this.testmostatus = data.body
-        this.testmostatus = data.body == 'false' ? '关闭' : '开启'
+        this.testmostatus = data.body
+        this.aftertestmostatuorigen = data.body
         data.body == false ? this.closetest = true : this.opentest = false
       })
     },
@@ -316,9 +399,17 @@ export default {
     confireupdaterido () {
       this.updatetestModal = false
       this.testmostatus = this.aftertestmostatus
-      this.testmostatus = this.aftertestmostatus == 'true' ? '开启' : '关闭'
+      this.colorupdata = true
+      this.colorupdatacolor = true
+      // this.testmostatus = this.aftertestmostatus === 'true' ? '开启' : '关闭'
     },
     serviceAdministrator (key) {
+      this.listonecolorauth = false
+      this.listonecolorfor = false
+      this.listonecolorint = false
+      this.listonecolorserv = true
+      this.listonecolordoma = false
+      this.listonecolortest = false
       this.isShowList = true
       this.key = key
       this.logData = []
@@ -326,6 +417,12 @@ export default {
       this.getconfigurlist(key, this.server)
     },
     domainnameprefixlist (key) {
+      this.listonecolorauth = false
+      this.listonecolorfor = false
+      this.listonecolorint = false
+      this.listonecolorserv = false
+      this.listonecolordoma = true
+      this.listonecolortest = false
       this.isShowList = true
       this.key = key
       this.logData = []
@@ -333,6 +430,12 @@ export default {
       this.getconfigurlist(key, this.server)
     },
     internallylist (key) {
+      this.listonecolorauth = false
+      this.listonecolorfor = false
+      this.listonecolorint = true
+      this.listonecolorserv = false
+      this.listonecolordoma = false
+      this.listonecolortest = false
       this.isShowList = true
       this.key = key
       this.logData = []
@@ -340,6 +443,12 @@ export default {
       this.getconfigurlist(key, this.server)
     },
     foreignlist (key) {
+      this.listonecolorauth = false
+      this.listonecolorfor = true
+      this.listonecolorint = false
+      this.listonecolorserv = false
+      this.listonecolordoma = false
+      this.listonecolortest = false
       this.isShowList = true
       this.key = key
       this.logData = []
@@ -347,6 +456,12 @@ export default {
       this.getconfigurlist(key, this.server)
     },
     authenticationlist (key) {
+      this.listonecolorauth = true
+      this.listonecolorfor = false
+      this.listonecolorint = false
+      this.listonecolorserv = false
+      this.listonecolordoma = false
+      this.listonecolortest = false
       this.isShowList = true
       this.key = key
       this.logData = []
@@ -358,9 +473,12 @@ export default {
         this.$Message.error('请先输入要添加的内容')
         return
       }
+      this.contrastlist.push(this.singlebaraddition)
       this.logData.push({sort: this.singlebaraddition})
       this.logparamsarr.push(this.singlebaraddition)
       this.singlebaraddition = ''
+      this.colorupdata = true
+      this.colorupdatacolor = true
     },
     alladd () {
       this.alladdModal = true
@@ -378,8 +496,11 @@ export default {
       this.logparamsarr = arr
       arr.map(item => {
         this.logData.push({sort: item})
+        this.contrastlist.push(item)
       })
       this.alladdModal = false
+      this.colorupdata = true
+      this.colorupdatacolor = true
     },
     colsealladdmodal () {
       this.alladdModal = false
@@ -391,20 +512,33 @@ export default {
       this.logparamsarr = []
     },
     rollback () {
-      this.rollbackModal = true
       let data = {
         service_name: this.versionNumber,
         key: this.key
       }
       getVersionnumber(data).then(data => {
         this.rollbacklist = data.body
+        this.rollbacklist.map((item, index) => {
+          if (index === 0) {
+            item.listonecolorback = true
+          } else {
+            item.listonecolorback = false
+          }
+        })
         this.content = data.body.length == 0 ? '' : data.body[0].value
         this.version = data.body.length == 0 ? '' : data.body[0].key
+        if (this.rollbacklist.length === 0) {
+          this.$Message.error('暂无要回滚的内容')
+          return false
+        } else {
+          this.rollbackModal = true
+        }
       })
     },
-    selectlist (value, key) {
+    selectlist (value, key, index) {
       this.content = value
       this.version = key
+      this.clickIndex1 = index
     },
     confirerollback () {
       if (this.version == '') {
@@ -431,6 +565,9 @@ export default {
       this.logData = this.logData.filter(item => {
         return item.sort != this.delateconfigurecontent
       })
+      this.contrastlist.filter(item => {
+        return item != this.delateconfigurecontent
+      })
       this.delateModal = false
     },
     updateconfigclick (data) {
@@ -441,12 +578,14 @@ export default {
     confireupdate () {
       this.logData[this.updateconfigindex].sort = this.updateconfig
       this.updateconfigModal = false
+      this.colorupdata = true
+      this.colorupdatacolor = true
     },
     updatetestclick () {
       this.updatetestModal = true
     },
     updatenode (data) {
-      this.afterupdataweight = data.Meta.weight ? data.Meta.weight : 100
+      this.afterupdataweight = (data.Meta && data.Meta.weight) ? data.Meta.weight : 100
       this.updatenodeIndex = data._index
       this.updatenodeModal = true
     },
@@ -472,6 +611,7 @@ export default {
       }
       getconfigurelist(data).then(data => {
         data.body.map(item => {
+          this.contrastlist.push(item)
           this.logData.push({
             sort: item
           })
@@ -479,10 +619,17 @@ export default {
       })
     },
     configlist () {
-      if (this.logData.length == 0) {
-        this.$Message.error('请先添加要发布的内容')
-        return
+      this.logDataorigen = []
+      this.logData.map(item => {
+        this.logDataorigen.push(item.sort)
+      })
+      if (this.testdiv === true) {
+        this.ContrasttestModal = true
+      } else {
+        this.ContrastModal = true
       }
+    },
+    confirfabu () {
       let data = {
         key: this.key,
         service_name: this.server
@@ -491,6 +638,9 @@ export default {
       postconfigurelist(data, params).then(data => {
         if (data.code === 200) {
           this.$Message.success('发布成功')
+          this.colorupdata = false
+          this.colorupdatacolor = false
+          this.ContrastModal = false
         }
       })
     },
@@ -500,23 +650,44 @@ export default {
       this.getkeytext('url_auth_list')
       this.getconfigurlist('url_auth_list', this.server)
     },
+    selectserverchange () {
+      if (this.colorupdatacolor === true) {
+        this.changeserverModal = true
+      }
+    },
+    confiechangeserver () {
+      this.colorupdatacolor = false
+      this.changeserverModal = false
+    },
     getnodeList () {
       let data = {
         service_name: this.server
       }
       getnodelist(data).then(data => {
         this.nodeData = data.body
+        this.nodeData.map(item => {
+          item.updatacolorclass = false
+        })
       })
     },
     nodeconfigconfire (data) {
+      this.nodeupdataid = data.Id
+      this.nodeupdataweight = {weight: data.Meta.weight ? data.Meta.weight : 100}
+      this.ContrastnodeModal = true
+    },
+    confirnode () {
       let params = {
-        node_id: data.Id,
+        node_id: this.nodeupdataid,
         service_name: this.server
       }
-      let weight = {weight: data.Meta.weight ? data.Meta.weight : 100}
+      let weight = this.nodeupdataweight
       nodeconfig(params, weight).then(data => {
         if (data.code === 200) {
           this.$Message.success('发布成功')
+          this.colorupdatacolor = false
+          this.ContrastnodeModal = false
+          this.nodeData[this.updatenodeIndex].updatacolorclass = false
+          this.nodeData = this.nodeData.slice()
         } else {
           this.$Message.error(data.body)
         }
@@ -524,16 +695,24 @@ export default {
     },
     confireupdatenode () {
       this.nodeData[this.updatenodeIndex].Meta.weight = this.updateweight
+      this.nodeData[this.updatenodeIndex].updatacolorclass = true
+      this.newupdateweight = this.updateweight
       this.updatenodeModal = false
       this.nodeData = this.nodeData.slice()
       this.updateweight = ''
+      // this.colorupdata = true
+      this.colorupdatacolor = true
     }
   },
+  created () {
+  },
   async mounted () {
     await this.getserlist()
     this.getkeytext('url_auth_list')
     this.getconfigurlist('url_auth_list', this.server)
     this.getnodeList()
+  },
+  destroyed () {
   }
 }
 </script>
@@ -690,7 +869,8 @@ export default {
   margin-left: 50px
 }
 .test_conten_status{
-  margin-left: 10px
+  margin-left: 10px;
+  color: black
 }
 .alladdtitle{
   text-align: center
@@ -745,7 +925,24 @@ export default {
 .textExplain{
   margin-left: 10px;
   display: inline-block;
-  margin-top:5px
+  padding: 10px 0
+}
+.selectsertitle{
+  margin-left:1%
+}
+.colorlistone{
+  background: #515a6e;
+  color: white
+}
+.colorlistcolor{
+  background: yellow;
+  border: 1px solid yellow;
+  color: black
+}
+.colorlistback{
+  background: #515a6e;
+  color: white;
+  font-weight: 800
 }
 </style>
 <style >