租户配置页面美化

src/views/saas/tenant/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+  <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-input
           v-model="queryParams.tenantCode"
@@ -20,7 +21,7 @@
         />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态：1-启用，0-禁用" clearable size="small">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
           <el-option
             v-for="dict in statusOptions"
             :key="dict.dictValue"
@@ -34,9 +35,11 @@
         <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-form>
+    </div>
 
-    <el-row :gutter="10" class="mb8">
+    <div class="page-card toolbar-card">
+      <el-row :gutter="10" class="mb8 toolbar-row">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -81,80 +84,87 @@
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table border 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="id" />
-      <el-table-column label="租户编码" align="center" prop="tenantCode" />
-      <el-table-column label="租户名称" align="center" prop="tenantName" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="statusOptions" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="租户有效期" align="center" prop="expireTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
+      </el-row>
+    </div>
+
+    <div class="page-card table-card">
+      <el-table border stripe highlight-current-row v-loading="loading" :data="tenantList" @selection-change="handleSelectionChange" class="tenant-table">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="租户唯一ID" align="center" prop="id" />
+        <el-table-column label="租户编码" align="center" prop="tenantCode" />
+        <el-table-column label="租户名称" align="center" prop="tenantName" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <dict-tag :options="statusOptions" :value="scope.row.status"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="租户有效期" align="center" prop="expireTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
 <!--      <el-table-column label="数据库连接地址" align="center" prop="dbUrl" />-->
 <!--      <el-table-column label="数据库帐号" align="center" prop="dbAccount" />-->
 <!--      <el-table-column label="数据库密码" align="center" prop="dbPwd" />-->
-      <el-table-column label="联系电话" align="center" prop="contactPhone" />
-      <el-table-column label="联系人" align="center" prop="contactName" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['tenant:tenant:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['tenant:tenant:remove']"
-          >删除</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleMenuChange(scope.row,'sys')"
-            v-hasPermi="['tenant:tenant:edit']"
-          >修改后台菜单权限</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleComMenuChange(scope.row,'com')"
-            v-hasPermi="['tenant:tenant:edit']"
-          >修改销售菜单权限</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <el-table-column label="联系电话" align="center" prop="contactPhone" />
+        <el-table-column label="联系人" align="center" prop="contactName" />
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+        <el-table-column label="更新时间" align="center" prop="updateTime" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <div class="table-action-group">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['tenant:tenant:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['tenant:tenant:remove']"
+              >删除</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleMenuChange(scope.row,'sys')"
+                v-hasPermi="['tenant:tenant:edit']"
+              >后台菜单权限</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleComMenuChange(scope.row,'com')"
+                v-hasPermi="['tenant:tenant:edit']"
+              >销售菜单权限</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改租户基础信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body class="tenant-dialog">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="tenant-data-form">
         <el-form-item label="租户编码" prop="tenantCode">
           <el-input v-model="form.tenantCode" placeholder="请输入租户编码" />
         </el-form-item>
         <el-form-item label="租户名称" prop="tenantName">
           <el-input v-model="form.tenantName" placeholder="请输入租户名称" />
         </el-form-item>
-        <el-form-item label="状态：" v-if="isAdd">
+        <!-- <el-form-item label="状态：" prop="status">
           <el-radio-group v-model="form.status">
             <el-radio
               v-for="dict in statusOptions"
@@ -162,7 +172,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"
@@ -174,7 +184,7 @@
 <!--        <el-form-item label="数据库连接地址" prop="dbUrl">-->
 <!--          <el-input v-model="form.dbUrl" placeholder="请输入数据库连接地址" />-->
 <!--        </el-form-item>-->
-        <el-form-item label="数据库ip地址" prop="dbIp" label-width="100px">
+        <el-form-item label="数据库IP" prop="dbIp" label-width="100px">
           <el-input v-model="form.dbIp" placeholder="请输入数据库ip地址" />
         </el-form-item>
         <el-form-item label="数据库端口" prop="dbPort" label-width="100px">
@@ -203,7 +213,7 @@
     </el-dialog>
 
     <!-- 修改菜单权限 -->
-    <el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body class="tenant-dialog">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="菜单权限">
           <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
@@ -296,11 +306,32 @@ export default {
           { required: true, message: "租户名称不能为空", trigger: "blur" }
         ],
         status: [
-          { required: true, message: "状态：1-启用，0-禁用不能为空", trigger: "blur" }
+          { required: true, message: "状态不能为空", trigger: "change" }
+        ],
+        expireTime: [
+          { required: true, message: "租户有效期不能为空", trigger: "change" }
+        ],
+        dbIp: [
+          { required: true, message: "数据库ip地址不能为空", trigger: "blur" }
+        ],
+        dbPort: [
+          { required: true, message: "数据库端口不能为空", trigger: "blur" }
+        ],
+        dbName: [
+          { required: true, message: "数据库名称不能为空", trigger: "blur" }
         ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        dbAccount: [
+          { required: true, message: "数据库帐号不能为空", trigger: "blur" }
         ],
+        dbPwd: [
+          { required: true, message: "数据库密码不能为空", trigger: "blur" }
+        ],
+        contactPhone: [
+          { required: true, message: "联系电话不能为空", trigger: "blur" }
+        ],
+        contactName: [
+          { required: true, message: "联系人不能为空", trigger: "blur" }
+        ]
       },
       menuExpand: false,
       menuNodeAll: false,
@@ -343,6 +374,9 @@ export default {
         tenantName: null,
         status: 0,
         expireTime: null,
+        dbIp: null,
+        dbPort: null,
+        dbName: null,
         dbUrl: null,
         dbAccount: null,
         dbPwd: null,
@@ -592,3 +626,124 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.tenant-page {
+  background: #f5f7fb;
+  min-height: calc(100vh - 84px);
+  padding: 16px;
+}
+
+.page-card {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(25, 57, 99, 0.08);
+  padding: 16px 16px 8px;
+  margin-bottom: 14px;
+}
+
+.search-card {
+  border: 1px solid #eef2f8;
+}
+
+.toolbar-card {
+  padding: 12px 16px 4px;
+}
+
+.toolbar-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.search-form ::v-deep .el-form-item {
+  margin-bottom: 12px;
+}
+
+.table-card {
+  padding: 14px 14px 12px;
+}
+
+.tenant-table ::v-deep .el-table__header th {
+  background: linear-gradient(180deg, #f7faff, #f3f8ff);
+  color: #2f3f5c;
+  font-weight: 600;
+  height: 44px;
+}
+
+.tenant-table ::v-deep .el-table__body tr:hover > td {
+  background: #f7fbff !important;
+}
+
+.tenant-table ::v-deep .el-table__body td {
+  padding: 10px 0;
+}
+
+.tenant-table ::v-deep .el-table__body tr.current-row > td {
+  background: #eef6ff !important;
+}
+
+.table-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px 8px;
+}
+
+.table-action-group ::v-deep .el-button--text {
+  background: #f5f8ff;
+  border: 1px solid #e7eefb;
+  border-radius: 999px;
+  padding: 4px 10px;
+  line-height: 1.2;
+}
+
+.tenant-dialog ::v-deep .el-dialog {
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.tenant-dialog ::v-deep .el-dialog__header {
+  background: linear-gradient(90deg, #f5f9ff, #ffffff);
+  border-bottom: 1px solid #edf1f7;
+}
+
+.tenant-dialog ::v-deep .el-dialog__body {
+  padding: 20px 24px 12px;
+}
+
+.tenant-data-form {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.tenant-data-form ::v-deep .el-form-item {
+  width: calc(50% - 10px);
+}
+
+.tenant-data-form ::v-deep .el-input__inner,
+.tenant-data-form ::v-deep .el-date-editor.el-input,
+.tenant-data-form ::v-deep .el-date-editor.el-input__inner {
+  width: 100%;
+}
+
+.tenant-data-form ::v-deep .el-radio-group {
+  width: 100%;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+}
+
+.dialog-footer ::v-deep .el-button {
+  min-width: 84px;
+  border-radius: 8px;
+}
+
+.tree-border {
+  border-radius: 8px;
+  border-color: #e6edf7;
+  padding: 8px;
+  background: #fbfdff;
+}
+</style>