更新样式

src/views/effect/SynDatabase.vue

@@ -4,25 +4,25 @@
       <!-- <span>同步数据库操作</span> -->
       <el-form ref="databaseFromRef" :rules="rules" :model="databaseFrom" label-width="90px">
         <el-form-item label="环 境:" prop="namespace">
-          <el-select v-model="databaseFrom.namespace" placeholder="请选择环境" style="width:280px">
+          <el-select v-model="databaseFrom.namespace" placeholder="请选择环境" style="width:300px" filterable clearable>
             <el-option v-for="item in namespaceList" :key="item.key" :label="item.desc" :value="item.key">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="库 名:" prop="dataBaseName">
-          <el-select v-model="databaseFrom.dataBaseName" placeholder="请选择环境" style="width:280px" @change="selectChange" clearable>
+          <el-select v-model="databaseFrom.dataBaseName" placeholder="请选择环境" style="width:300px" @change="selectChange" filterable clearable>
             <el-option v-for="item in dataBaseList" :key="item" :label="item" :value="item">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="表 名:">
-          <el-select v-model="databaseFrom.tableName" placeholder="请选择环境" style="width:280px">
+          <el-select v-model="databaseFrom.tableName" placeholder="请选择环境" style="width:300px" filterable clearable>
             <el-option v-for="item in tableList" :key="item" :label="item" :value="item">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="synBtn" style="margin-left:80px">开始同步</el-button>
+          <el-button type="primary" @click="synBtn" style="margin-left:230px">开始同步</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -64,6 +64,7 @@ export default {
         ]
       },
       loadingOptions: {
+        // customClass: 'create-isLoading',
         text: '数据同步中，请耐心等待',
         lock: true,
         spinner: 'el-icon-loading',
@@ -85,7 +86,6 @@ export default {
     // 获取数据库列表
     getDataBaseList() {
       getDataBaseList().then((resp) => {
-        // console.log('返回值信息', resp)
         this.dataBaseList = resp.data.data
       })
     },
@@ -101,23 +101,21 @@ export default {
       this.paramsFrom.namespace = this.databaseFrom.namespace
       this.paramsFrom.dbName = this.databaseFrom.dataBaseName
       this.paramsFrom.tableName = this.databaseFrom.tableName
-
-      // this.paramsFrom.namespace = 'fe'
-      // this.paramsFrom.dbName = 'msg'
-      // this.paramsFrom.tableName = 'all'
-      // console.log('参数信息', this.paramsFrom)
       this.$refs.databaseFromRef.validate((valid) => {
         if (!valid) {
           return false
         } else {
           const Lloading = this.$loading.service(this.loadingOptions)
           synDataBase(this.paramsFrom).then((resp) => {
-            if (resp.data.data.code === '0000') {
+            if (resp.data.code === '0000') {
               Lloading.close()
               this.$message.success('数据同步成功！')
+              this.databaseFrom.namespace = ''
+              this.databaseFrom.dataBaseName = ''
+              this.databaseFrom.tableName = ''
             } else {
               Lloading.close()
-              this.$message.error(resp.data.data.msg)
+              this.$message.error(resp.data.msg)
             }
           })
         }
@@ -126,10 +124,26 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+.create-isLoading {
+  .el-loading-spinner {
+    top: 50%;
+    left: 50%;
+    margin-left: -55px;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 20px;
+    border-radius: 4px;
+    width: auto;
+    text-align: center;
+    position: absolute;
 
+    i {
+      color: #eee;
+    }
 
-
-
-
-
-
+    .el-loading-text {
+      color: #eee;
+    }
+  }
+}
+</style>