refactor:idc添加表单抽取

nezha-fronted/src/components/common/dcConfig.vue

@@ -0,0 +1,220 @@
+<template>
+  <el-popover :placement="placement" :title="title"   width="400" @hide="hidePop"  ref="popBox" v-model="popBox.show">
+    <!-- begin--顶部按钮-->
+    <div class="">
+      <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+        <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+      <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+        <span v-if="!popBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
+        <span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
+      </button>
+
+      <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
+        <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+    <el-form class="right-box-form" :model="idc" label-position="left" label-width="120px"  :rules="rules" ref="idcForm">
+      <el-form-item :label="$t('asset.createAssetTab.dcName')" prop="name">
+        <el-input type="text"  placeholder="" v-model="idc.name" size="small" maxlength="64"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.location')" prop="location">
+        <el-input type="text"  placeholder="" v-model="idc.location" size="small"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.principal')" prop="principal">
+        <el-select v-model="idc.principal" clearable >
+          <el-option v-for="item in principals" :key="item.id" :label="item.username" :value="item.userId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('asset.createAssetTab.tel')" prop="tel">
+        <el-input type="text"  placeholder="" v-model="idc.tel" size="small"></el-input>
+      </el-form-item>
+    </el-form>
+    <span :class="buttonClass" @click.prevent="" slot="reference">
+      <slot name="optionZone"  >
+        <i class="el-icon-plus"></i>
+      </slot>
+    </span>
+  </el-popover>
+</template>
+
+<script>
+    export default {
+      name: "dcConfig",
+      props:{
+        postIdc:{type:Object},
+        placement:{type:String},
+        buttonClass:{type:String}
+      },
+      created() {
+        this.init();
+      },
+      data(){
+        let checkPhone=(rule, value, callback) => {
+          if(!value || value == ''){
+            callback()
+          }
+          const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
+          setTimeout(() => {
+            if (!Number.isInteger(+value)) {
+              callback(new Error(this.$t('validate.tel')))
+            } else {
+              if (phoneReg.test(value)) {
+                callback()
+              } else {
+                callback(new Error(this.$t('validate.tel')))
+              }
+            }
+          }, 100)
+        }
+
+        return {
+          title:"",
+          rules:{
+            name:[
+              {required:true,message:this.$t('validate.required'),trigger:'blur'}
+            ],
+            location:[
+            ],
+            principal:[
+            ],
+            tel:[
+              { validator: checkPhone, trigger: 'blur'}
+            ]
+          },
+          idc:{},
+          principals:[],
+          popBox:{isEdit:false,show:false}
+        }
+      },
+      methods:{
+        init:function(){
+          let temp=this;
+          temp.getUserData();
+        },
+        resetData:function(){
+          let temp=this;
+          temp.idc={
+            name:"",
+            location: "",
+            principal: null,
+            tel:""
+          }
+        },
+        openBox:function(){
+          console.log("show")
+          this.popBox.show=true;
+        },
+        getUserData() {
+          let temp=this;
+          temp.$get('sys/user/list').then(response => {
+            if (response.code === 200) {
+              temp.principals = response.data.list
+            }
+          })
+        },
+        save:function(){
+          let temp=this;
+          temp.$refs.idcForm.validate((valide)=>{
+            if(valide){
+              const h = temp.$createElement;
+              if(!temp.idc.id){
+                console.log("save")
+                temp.$post('idc', temp.idc).then(response => {
+                  if (response.code === 200) {
+                    temp.$notify({
+                      message: h('i', {style: 'color: teal'}, temp.$t("tip.saveSuccess")),
+                      duration: 2000
+                    });
+                    temp.$emit("after");
+                    temp.esc();
+                  } else {
+                    temp.$notify({
+                      message: h('i', {style: 'color: teal'}, response.msg),
+                      duration: 2000
+                    });
+                  }
+                })
+              }else{
+                console.log("edit")
+                this.$put('idc', temp.idc).then(response => {
+                  if (response.code === 200) {
+                    temp.$notify({
+                      message: h('i', {style: 'color: teal'}, temp.$t("tip.saveSuccess")),
+                      duration: 2000
+                    });
+                    temp.$emit("after");
+                    temp.esc();
+                  } else {
+                    temp.$notify({
+                      message: h('i', {style: 'color: teal'}, response.msg),
+                      duration: 2000
+                    });
+                  }
+                })
+              }
+
+            }else{
+              return false;
+            }
+          });
+        },
+        esc:function(){
+          this.popBox.show=false;
+        },
+        del:function(){
+          let temp=this;
+          temp.$confirm(temp.$t("tip.confirmDelete"), {
+            confirmButtonText: temp.$t("tip.yes"),
+            cancelButtonText: temp.$t("tip.no"),
+            type: 'warning'
+          }).then(() => {
+            temp.$delete("idc?ids=" + temp.idc.id).then(response => {
+              if (response.code === 200) {
+                temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.deleteSuccess")});
+                temp.$emit("after");
+                temp.esc();
+              } else {
+                this.$message.error(response.msg);
+              }
+            });
+          });
+
+        },
+        hidePop:function(){//隐藏事件触发方法
+          if(this.postIdc&&this.postIdc.id){
+            this.idc=this.postIdc
+          }else{
+            this.resetData();
+          }
+          this.clearValidate();
+        },
+        clearValidate:function(){
+          this.$refs.idcForm.clearValidate();
+        }
+      },
+      watch:{
+        postIdc: {
+          immediate: true,
+          handler(n, o) {
+            if (n && n.id) {
+              this.title = this.$t('asset.createAssetTab.editIdcTab.title') + "  ID：" + n.id;
+              this.popBox.isEdit=true;
+              this.idc=n;
+
+            } else {
+              this.title = this.$t('asset.createAssetTab.AddIdcTab.title');
+              this.popBox.isEdit=false;
+              this.resetData();
+              console.log("reset")
+            }
+          }
+        },
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/common/language/en.js

@@ -42,6 +42,7 @@ const en = {
     required: 'Required',
     number: 'Must be a number',
     email:'E-mail is invalide',
+    tel:'Phone number is invalide',
     config: {
       account: {
 

nezha-fronted/src/components/page/config/promServer.vue

@@ -76,19 +76,8 @@
               </button>
               <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
             </div>
-            <el-table
-                  :data="tableData"
-                  border
-                  height="calc(100% - 65px)"
-                  style="width: 100%;">
-                <el-table-column
-                  :resizable="false"
-                  v-for="(item, index) in tableTitle"
-                  v-if="item.show"
-                  :width="item.width"
-                  :key="`col-${index}`"
-                  :label="item.label"
-                >
+            <el-table :data="tableData" border height="calc(100% - 65px)" style="width: 100%;">
+                <el-table-column :resizable="false" v-for="(item, index) in tableTitle" v-if="item.show" :width="item.width" :key="`col-${index}`" :label="item.label">
                     <template slot-scope="scope" :column="item">
                         <span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span>
                         <span v-else-if="item.prop == 'type'">
@@ -135,78 +124,25 @@
 
                 <!-- begin--表单-->
               <el-scrollbar class="right-box-form-box">
-                <el-form class="right-box-form" :model="promServer" label-position="top" :rules="rules" ref="promServerForm">
+                <el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules" ref="promServerForm">
                   <!--DC start-->
                   <el-form-item label="DC"  prop="idc.name">
                     <div class="right-box-form-content">
                     <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
                       <el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name" :value="item">
                         <span class="config-dropdown-label-txt">{{item.name}}</span>
-                        <el-popover placement="left" v-model="item[item.name]">
-                          <div class="pop-window-assetType-content">
-                            <div class="right-box-top-btns">
-                              <div class="right-box-top-btn right-box-top-btn-full" @click="item[item.name] = false">
-                                <div class="right-box-btn-icon"><i class="el-icon-close"></i></div>
-                                <span>{{$t('overall.esc')}}</span>
-                              </div>
-                            </div>
-                            <div class="pop-window">
-                              <span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.editIdcTab.title')}}</span>
-                              <el-input v-model="popIdcData.name"/>
-                              <el-input v-model="popIdcData.location"/>
-                              <el-select v-model="popIdcData.principal" clearable>
-                                <el-option v-for="item in idcUserData" :key="item.key" :label="item.username" :value="item.userId"></el-option>
-                              </el-select>
-                              <el-input v-model="popIdcData.tel"/>
-                            </div>
-                          </div>
-                          <div class="right-box-bottom-btns">
-                            <div class="right-box-bottom-btn right-box-bottom-btn-cancel" @click.stop="item[item.name]= false">{{$t('overall.cancel')}}
-                            </div>
-                            <div class="right-box-bottom-btn right-box-bottom-btn-50" @click="editData('idc', item.id, popIdcData)">{{$t('overall.save')}}</div>
-                          </div>
-                          <span class="config-dropdown-btn" slot="reference" @click.stop="getSingleIDCData(item.id,'edit')"><i class="el-icon-edit-outline"></i></span>
-                        </el-popover>
+                        <idc-config-box :post-idc="item" placement="left" @after="getIdcData" :button-class="'config-dropdown-btn'">
+                          <template v-slot:optionZone>
+                            <i class="el-icon-edit-outline"></i>
+                          </template>
+                        </idc-config-box>
                         <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
                       </el-option>
                     </el-select>
 
 
                     <div class="right-box-row-btn" v-if="rightBox.isEdit">
-                      <el-popover placement="left" v-model="visible">
-                        <div class="pop-window-assetType-content">
-                          <div class="right-box-top-btns">
-                            <div class="right-box-top-btn right-box-top-btn-full" @click="visible = false">
-                              <div class="right-box-btn-icon"><i class="el-icon-close"></i></div>
-                              <span>{{$t('overall.esc')}}</span>
-                            </div>
-                          </div>
-                          <div class="pop-window">
-                            <span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.AddIdcTab.title')}}</span>
-                            <div style="padding-top: 10px;padding-left: 20px">
-                              <div>
-                                <label style="font-size: 12px">DN name</label>
-                                <input class='sidebar-pop-input' v-model="addIdcData.name"/>
-                              </div>
-                              <div style="padding-top: 40px">
-                                <label style="font-size: 12px">Loaction</label>
-                                <input class='sidebar-pop-input' v-model="addIdcData.location"/>
-                              </div>
-                              <div style="padding-top: 40px">
-                                <label style="font-size: 12px;padding-right: 20px">负责人</label>
-                                <select class='sidebar-pop-input-select' style="margin-left:-40px " v-model="addIdcData.principal" clearable>
-                                  <option v-for="item in idcUserData" :key="item.key" :label="item.username" :value="item.userId"></option>
-                                </select>
-                              </div>
-                              <div style="padding-top: 40px">
-                                <label style="font-size: 12px">Tel</label>
-                                <input class='sidebar-pop-input' v-model="addIdcData.tel"/>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <span slot="reference" @click.prevent=''><i class="el-icon-plus"></i></span>
-                      </el-popover>
+                      <idc-config-box placement="left" @after="getIdcData"></idc-config-box>
                     </div>
                     <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
                     </div>
@@ -243,7 +179,6 @@ export default {
   name: "prom",
   data() {
     return {
-      visible:false,
       rightBox: { //弹出框相关
         show: false,
         isEdit: false, //false查看，true编辑

nezha-fronted/src/main.js

@@ -24,6 +24,7 @@ import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endp
 import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
 import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
 import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
+import dcConfigBox from "./components/common/dcConfig"; //idc配置弹框组件
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -34,6 +35,7 @@ Vue.component("add-endpoint-box", addEndpointBox);
 Vue.component("assetAddUnit", assetAddUnit);
 Vue.component("assetEditUnit", assetEditUnit);
 Vue.component("alert-config-box", alertConfigBox);
+Vue.component("idc-config-box", dcConfigBox);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;