绑定数据源tab切换及表单验证

ruoyi-ui/src/views/login.vue

@@ -21,7 +21,6 @@
           type="text"
           auto-complete="off"
           placeholder="账号"
-          
           class="inputt"
         />
       </el-row>
@@ -50,7 +49,6 @@
               placeholder="验证码"
               @keyup.enter.native="handleLogin"
               class="inputt"
-             
             >
             </el-input>
           </el-col>
@@ -66,19 +64,18 @@
         <!-- <div class="login-code">
           <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div> -->
-        <el-checkbox
-          v-model="loginForm.rememberMe"
-          class="aaa"
+        <el-checkbox v-model="loginForm.rememberMe" class="aaa"
           >在这个设备上记住我</el-checkbox
         >
       </el-row>
 
-
       <el-row>
-        <el-col class="logg"  :loading="loading"
+        <el-col
+          class="logg"
+          :loading="loading"
           @click.native.prevent="handleLogin"
-          
-          >登录</el-col>
+          >登录</el-col
+        >
       </el-row>
     </el-form>
 
@@ -266,26 +263,30 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
- ::v-deep.el-input--medium .el-input__inner {
-    height: 54px;
-    line-height: 54px;
+::v-deep.el-input--medium .el-input__inner {
+  height: 54px;
+  line-height: 54px;
 }
-.logg{
-  margin-top:42px ;
-  margin-left:196px ;
+.logg {
+  margin-top: 42px;
+  margin-left: 196px;
   width: 240px;
   height: 54px;
   line-height: 54px;
   text-align: center;
   opacity: 1;
   border-radius: 27px;
-  background: linear-gradient(135deg, rgba(79, 138, 255, 1) 0%, rgba(75, 94, 255, 1) 100%);
-  box-shadow: 0px 4px 16px  rgba(179, 192, 231, 1);
+  background: linear-gradient(
+    135deg,
+    rgba(79, 138, 255, 1) 0%,
+    rgba(75, 94, 255, 1) 100%
+  );
+  box-shadow: 0px 4px 16px rgba(179, 192, 231, 1);
   color: #fff;
   font-size: 20px;
   font-weight: 500;
 }
-.aaa{
+.aaa {
   width: 248px;
   height: 24px;
   font-size: 16px !important;
@@ -326,7 +327,7 @@ export default {
   text-align: left;
   vertical-align: top;
 }
-.el-input__inner{
+.el-input__inner {
   width: 522px;
   /* height: 54px  !important; */
 }
@@ -338,7 +339,7 @@ export default {
   border: 1px solid rgba(218, 224, 242, 1);
   margin-top: 2px;
 }
-.inputt input{
+.inputt input {
   width: 100%;
 }
 
@@ -376,25 +377,22 @@ export default {
 }
 
 .login-form {
-  margin-left: 677px;
-  margin-top:48px ;
+  margin-left: 44%;
+  margin-top: 48px;
   width: 621px;
   height: 624px;
   opacity: 1;
   border-radius: 39px;
   background: rgba(255, 255, 255, 1);
   float: left;
-
-
 }
 
-.login-code{
+.login-code {
   width: 40px;
   height: 54px;
   opacity: 1;
 }
 .el-col-18 {
-    width: 66%;
+  width: 66%;
 }
-
 </style>

ruoyi-ui/src/views/system/tenant/index.vue

@@ -1,34 +1,77 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="租户名称" prop="tenantName">
-        <el-input v-model="queryParams.tenantName" placeholder="请输入租户名称" clearable
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.tenantName"
+          placeholder="请输入租户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="租户编号" prop="tenantCode">
-        <el-input v-model="queryParams.tenantCode" placeholder="请输入租户编号" clearable
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.tenantCode"
+          placeholder="请输入租户编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="负责人" prop="owner">
-        <el-input v-model="queryParams.owner" placeholder="请输入负责人" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.owner"
+          placeholder="请输入负责人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="联系方式" prop="contactInfo">
-        <el-input v-model="queryParams.contactInfo" placeholder="请输入联系方式" clearable
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.contactInfo"
+          placeholder="请输入联系方式"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="地址" prop="address">
-        <el-input v-model="queryParams.address" placeholder="请输入地址" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.address"
+          placeholder="请输入地址"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['system:tenant:add']">新增
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:tenant:add']"
+          >新增
         </el-button>
       </el-col>
       <!-- <el-col :span="1.5">
@@ -43,29 +86,59 @@
         >修改</el-button>
       </el-col> -->
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-                   v-hasPermi="['system:tenant:remove']">删除
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:tenant:remove']"
+          >删除
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-                   v-hasPermi="['system:tenant:export']">导出
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:tenant:export']"
+          >导出
         </el-button>
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleTest">test
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleTest"
+          >test
         </el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="tenantList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="租户ID" align="center" prop="tenantId"/>
-      <el-table-column label="租户名称" align="center" prop="tenantName"/>
-      <el-table-column label="租户编号" align="center" prop="tenantCode"/>
-      <el-table-column label="负责人" align="center" prop="owner"/>
-      <el-table-column label="联系方式" align="center" prop="contactInfo"/>
-      <el-table-column label="地址" align="center" prop="address"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+    <el-table
+      v-loading="loading"
+      :data="tenantList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="租户ID" align="center" prop="tenantId" />
+      <el-table-column label="租户名称" align="center" prop="tenantName" />
+      <el-table-column label="租户编号" align="center" prop="tenantCode" />
+      <el-table-column label="负责人" align="center" prop="owner" />
+      <el-table-column label="联系方式" align="center" prop="contactInfo" />
+      <el-table-column label="地址" align="center" prop="address" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-dropdown>
             <el-button type="warning" plain size="small">
@@ -73,18 +146,33 @@
             </el-button>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                           v-hasPermi="['system:tenant:edit']">修改
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['system:tenant:edit']"
+                  >修改
                 </el-button>
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                           v-hasPermi="['system:tenant:remove']">删除
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['system:tenant:remove']"
+                  >删除
                 </el-button>
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="bindDatasource(scope.row)"
-                           v-show="scope.row.datasourceId == null">绑定数据源
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="bindDatasource(scope.row)"
+                  v-show="scope.row.datasourceId == null"
+                  >绑定数据源
                 </el-button>
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -93,26 +181,31 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
 
     <!-- 添加或修改租户信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="租户名称" prop="tenantName">
-          <el-input v-model="form.tenantName" placeholder="请输入租户名称"/>
+          <el-input v-model="form.tenantName" placeholder="请输入租户名称" />
         </el-form-item>
         <el-form-item label="租户编号" prop="tenantCode">
-          <el-input v-model="form.tenantCode" placeholder="请输入租户编号"/>
+          <el-input v-model="form.tenantCode" placeholder="请输入租户编号" />
         </el-form-item>
         <el-form-item label="负责人" prop="owner">
-          <el-input v-model="form.owner" placeholder="请输入负责人"/>
+          <el-input v-model="form.owner" placeholder="请输入负责人" />
         </el-form-item>
         <el-form-item label="联系方式" prop="contactInfo">
-          <el-input v-model="form.contactInfo" placeholder="请输入联系方式"/>
+          <el-input v-model="form.contactInfo" placeholder="请输入联系方式" />
         </el-form-item>
         <el-form-item label="地址" prop="address">
-          <el-input v-model="form.address" placeholder="请输入地址"/>
+          <el-input v-model="form.address" placeholder="请输入地址" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -122,28 +215,75 @@
     </el-dialog>
 
     <!-- 添加或修改数据源信息对话框 -->
-    <el-dialog :title="dataSourceTitle" :visible.sync="dataSourceOpen" width="500px" append-to-body>
-      <el-form ref="dataSourceForm" :model="dataSourceForm" label-width="90px">
-        <el-form-item label="数据源类型">
-          <el-select v-model="dataSourceForm.databaseType" placeholder="请选择数据源类型" @change="selecthandle">
-            <el-option v-for="item in dict.type.datasource_type" :key="item.value" :label="item.label"
-                       :value="item.value"></el-option>
+    <el-dialog
+      :title="dataSourceTitle"
+      :visible.sync="dataSourceOpen"
+      width="500px"
+      append-to-body
+    >
+      <el-radio-group
+        v-model="dataSourceType"
+        class="mb5"
+        @input="dataSourceTypeChange"
+      >
+        <el-radio-button :label="true">公网</el-radio-button>
+        <el-radio-button :label="false">内网</el-radio-button>
+      </el-radio-group>
+      <el-form
+        ref="dataSourceForm"
+        :model="dataSourceForm"
+        :rules="dataSourceFormRules"
+        label-width="100px"
+      >
+        <el-form-item label="数据源类型" prop="databaseType">
+          <el-select
+            v-model="dataSourceForm.databaseType"
+            placeholder="请选择数据源类型"
+            @change="selecthandle"
+          >
+            <el-option
+              v-for="item in dict.type.datasource_type"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="数据库名称">
-          <el-input v-model="dataSourceForm.databaseName" placeholder="请输入数据库名称"/>
+        <el-form-item label="数据库名称" prop="databaseName">
+          <el-input
+            v-model="dataSourceForm.databaseName"
+            placeholder="请输入数据库名称"
+          />
         </el-form-item>
-        <el-form-item label="数据库IP">
-          <el-input v-model="dataSourceForm.databaseIp" placeholder="请输数据库IP"/>
+        <!-- !dataSourceType -->
+        <el-form-item
+          label="数据库IP"
+          v-show="!dataSourceType"
+          prop="databaseIp"
+        >
+          <el-input
+            v-model="dataSourceForm.databaseIp"
+            placeholder="请输数据库IP"
+          />
         </el-form-item>
-        <el-form-item label="用户名">
-          <el-input v-model="dataSourceForm.username" placeholder="请输入用户名"/>
+        <el-form-item label="用户名" v-show="!dataSourceType" prop="username">
+          <el-input
+            v-model="dataSourceForm.username"
+            placeholder="请输入用户名"
+          />
         </el-form-item>
-        <el-form-item label="密码">
-          <el-input v-model="dataSourceForm.password" placeholder="请输入密码"/>
+        <el-form-item label="密码" v-show="!dataSourceType" prop="password">
+          <el-input
+            v-model="dataSourceForm.password"
+            placeholder="请输入密码"
+          />
         </el-form-item>
-        <el-form-item label="端口号">
-          <el-input v-model="dataSourceForm.portNumber" placeholder="请输入端口号"/>
+
+        <el-form-item label="端口号" v-show="!dataSourceType" prop="portNumber">
+          <el-input
+            v-model="dataSourceForm.portNumber"
+            placeholder="请输入端口号"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -163,11 +303,17 @@ import {
   updateTenant,
   bindDatasource,
 } from "@/api/system/tenant";
-import {getDataSourceInfo, insertDataSource} from "@/api/system/data";
+import { getDataSourceInfo, insertDataSource } from "@/api/system/data";
 
 export default {
   name: "Tenant",
-  dicts: ['datasource_type', 'sqlserver_connection_information', 'mysql_connection_information', 'dm_connection_information', 'orcale_connection_information'],
+  dicts: [
+    "datasource_type",
+    "sqlserver_connection_information",
+    "mysql_connection_information",
+    "dm_connection_information",
+    "orcale_connection_information",
+  ],
   data() {
     return {
       // 遮罩层
@@ -203,25 +349,58 @@ export default {
       // 表单校验
       rules: {
         tenantName: [
-          {required: true, message: "租户名称不能为空", trigger: "blur"},
+          { required: true, message: "租户名称不能为空", trigger: "blur" },
         ],
         tenantCode: [
-          {required: true, message: "租户编号不能为空", trigger: "blur"},
+          { required: true, message: "租户编号不能为空", trigger: "blur" },
         ],
       },
       //数据源表单参数
-      dataSourceForm: {},
+      dataSourceType: true, //true:公网  false:内网
+      dataSourceForm: {
+        databaseType: "",
+        databaseName: "",
+        databaseIp: "",
+        username: "",
+        password: "",
+        portNumber: "",
+      },
       dataSourceTitle: "",
       dataSourceOpen: false,
       fromTenantId: null,
+      dataSourceFormRules: {
+        databaseType: [
+          { required: true, message: "数据源类型不能为空", trigger: "change" },
+        ],
+        databaseName: [
+          { required: true, message: "数据库名不能为空", trigger: "blur" },
+        ],
+        databaseIp: [
+          { required: true, message: "数据库IP不能为空", trigger: "blur" },
+        ],
+        username: [
+          { required: true, message: "用户名不能为空", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "密码不能为空", trigger: "blur" },
+        ],
+        portNumber: [
+          { required: true, message: "端口号不能为空", trigger: "blur" },
+        ],
+      },
     };
   },
   created() {
     this.getList();
   },
   methods: {
-    handleOpe() {
+    // 数据源类型改变回调
+    dataSourceTypeChange(type) {
+      this.$nextTick(() => {
+        this.$refs.dataSourceForm.resetFields();
+      });
     },
+    handleOpe() {},
     /** 查询租户信息列表 */
     getList() {
       this.loading = true;
@@ -346,12 +525,11 @@ export default {
             //   this.getList();
             // });
           } else {
-
-            console.log(this.fromTenantId)
+            console.log(this.fromTenantId);
             let query = {
               tenantId: this.fromTenantId,
-              dataSource: this.dataSourceForm
-            }
+              dataSource: this.dataSourceForm,
+            };
             bindDatasource(query).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.dataSourceOpen = false;
@@ -373,8 +551,7 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {
-        });
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -392,18 +569,27 @@ export default {
     selecthandle(row) {
       console.log(row);
       let sql = {
-        sqlserver: 'sqlserver_connection_information',
-        mysql: 'mysql_connection_information',
-        dm: 'dm_connection_information',
-        oracle: 'oracle_connection_information'
-      }
-      let qar = {}
-      this.dict.type[sql[row]].forEach(item => {
+        sqlserver: "sqlserver_connection_information",
+        mysql: "mysql_connection_information",
+        dm: "dm_connection_information",
+        oracle: "oracle_connection_information",
+      };
+      let qar = {};
+      this.dict.type[sql[row]].forEach((item) => {
         qar[item.label] = item.value;
       });
-      getDataSourceInfo(qar).then(res => {
+      if (this.dataSourceType) {
+        let { databaseIp, password, portNumber, username } = qar;
+        Object.assign(this.dataSourceForm, {
+          databaseIp,
+          password,
+          portNumber,
+          username,
+        });
+      }
+      getDataSourceInfo(qar).then((res) => {
         console.log(res);
-      })
+      });
     },
     handleTest() {
       let formdata = {
@@ -412,12 +598,12 @@ export default {
         databaseIp: "127.0.0.1",
         username: "testname",
         password: "123123",
-        portNumber: "3306"
-      }
-      insertDataSource(formdata).then(res => {
+        portNumber: "3306",
+      };
+      insertDataSource(formdata).then((res) => {
         console.log(res);
-      })
-    }
+      });
+    },
   },
 };
 </script>