租户列表美化

src/views/course/userCourse/public.vue

@@ -601,9 +601,9 @@ export default {
     });
 
 
-    getSelectableRange().then(e => {
-      this.startTimeRange = e.data;
-    })
+    // getSelectableRange().then(e => {
+    //   this.startTimeRange = e.data;
+    // })
     // this.getTreeselect();
     this.getDicts("sys_spec_show").then(response => {
       this.specShowOptions = response.data;

src/views/saas/tenant/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container tenant-page">
     <div class="page-card search-card" v-show="showSearch">
       <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="search-form">
-      <el-form-item label="租户编码" prop="tenantCode">
+      <el-form-item label="租户编码" prop="tenantCode" class="query-item">
         <el-input
           v-model="queryParams.tenantCode"
           placeholder="请输入租户编码"
@@ -11,7 +11,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="租户名称" prop="tenantName">
+      <el-form-item label="租户名称" prop="tenantName" class="query-item">
         <el-input
           v-model="queryParams.tenantName"
           placeholder="请输入租户名称"
@@ -20,7 +20,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态：" prop="status">
+      <el-form-item label="状态：" prop="status" class="query-item">
         <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
           <el-option
             v-for="dict in statusOptions"
@@ -31,9 +31,9 @@
         </el-select>
       </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-form-item class="query-item query-actions">
+        <el-button type="primary" icon="el-icon-search" size="mini" class="query-btn" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" class="query-btn" @click="resetQuery">重置</el-button>
       </el-form-item>
       </el-form>
     </div>
@@ -42,6 +42,7 @@
       <el-row :gutter="10" class="mb8 toolbar-row">
       <el-col :span="1.5">
         <el-button
+          class="toolbar-btn"
           type="primary"
           plain
           icon="el-icon-plus"
@@ -52,6 +53,7 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
+          class="toolbar-btn"
           type="success"
           plain
           icon="el-icon-edit"
@@ -63,6 +65,7 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
+          class="toolbar-btn"
           type="danger"
           plain
           icon="el-icon-delete"
@@ -74,6 +77,7 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
+          class="toolbar-btn"
           type="warning"
           plain
           icon="el-icon-download"
@@ -168,7 +172,7 @@
         <el-form-item label="租户名称" prop="tenantName">
           <el-input v-model="form.tenantName" placeholder="请输入租户名称" />
         </el-form-item>
-        <!-- <el-form-item label="状态：" prop="status">
+        <el-form-item label="状态：" prop="status" class="form-item-full">
           <el-radio-group v-model="form.status">
             <el-radio
               v-for="dict in statusOptions"
@@ -176,7 +180,7 @@
               :label="parseInt(dict.dictValue)"
             >{{dict.dictLabel}}</el-radio>
           </el-radio-group>
-        </el-form-item> -->
+        </el-form-item>
         <el-form-item label="租户有效期" prop="expireTime" label-width="100px">
           <el-date-picker clearable size="small"
                           v-model="form.expireTime"
@@ -661,13 +665,39 @@ export default {
 }
 
 .search-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 0;
   margin-bottom: 4px;
 }
 
+.query-item {
+  margin-bottom: 10px;
+}
+
+.query-actions {
+  margin-left: 4px;
+}
+
+.query-btn {
+  border-radius: 8px;
+}
+
+.toolbar-btn {
+  border-radius: 8px;
+  min-width: 66px;
+}
+
 .table-card {
   padding: 14px 14px 12px;
 }
 
+.tenant-table {
+  border-radius: 10px;
+  overflow: hidden;
+}
+
 .table-action-group {
   display: flex;
   flex-wrap: wrap;
@@ -693,6 +723,10 @@ export default {
   width: calc(50% - 10px);
 }
 
+.tenant-data-form .form-item-full {
+  width: 100%;
+}
+
 .tenant-data-form .el-radio-group {
   width: 100%;
   min-height: 34px;