样式改造

src/App.vue

@@ -97,18 +97,18 @@
     color: #FFF;
 }
 .openText{
-  color:#67C23A
+  color:#67C23A !important;
 }
 .closeText{
-  color:#E6A23C
+  color:#E6A23C !important;
 }
 .plusText{
-  color:#23c6c8
+  color:#23c6c8 !important;
 }
 .editText{
-  color:#11A983
+  color:#11A983 !important;
 }
 .deleteText{
-  color:#fd0e0e
+  color:#fd0e0e !important;
 }
 </style>

src/views/customer/business.vue

@@ -1,67 +1,82 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="企业名称">
+            <el-input v-model="listQuery.companyName" placeholder="请输入企业名称" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="状态">
+            <el-select v-model="listQuery.status" clearable placeholder="请选择状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in statusList" :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="企业名称" v-model="listQuery.companyName">
-      </el-input>
-      <el-select v-model="listQuery.status" clearable placeholder="状态" class="filter-item" style="width: 200px;">
-          <el-option :key="item.type" v-for="item in statusList" :label="item.name" :value="item.type">
-          </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-      <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
-    </div>
-
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
-      highlight-current-row>
-
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="100px" label="企业编号" prop="customerCode">
-      </el-table-column>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-      <el-table-column align="center" min-width="100px" label="企业名称" prop="companyName">
-      </el-table-column>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownload">导出</el-button>
+      </el-col>
+    </el-row>
 
-      <el-table-column align="center" min-width="80px" label="联系人" prop="contactsName">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="80px" label="联系电话" prop="contactsPhone">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="50px" label="状态">
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="企业编号" prop="customerCode"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="企业名称" prop="companyName"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="联系人" prop="contactsName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="联系电话" prop="contactsPhone"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="状态">
           <template slot-scope="props">
             <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
             <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
           </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.status == 1" type="success" size="small"
-                        @click="changeState(scope.row.id, scope.row.status)">启用</el-button>
-          <el-button v-if="scope.row.status == 0" type="warning" size="small"
-                        @click="changeState(scope.row.id, scope.row.status)">停用</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.status == 1" type="text" icon="el-icon-success" class="openText" size="small" @click="changeState(scope.row.id, scope.row.status)">启用</el-button>
+            <el-button v-if="scope.row.status == 0" type="text" icon="el-icon-circle-close" class="closeText" size="small" @click="changeState(scope.row.id, scope.row.status)">停用</el-button>
+            <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="110px">
         <el-form-item label="企业编号" prop="customerCode">
           <el-input v-model="dataForm.customerCode" placeholder="请输入企业编号"></el-input>
@@ -72,13 +87,11 @@
         <el-form-item label="联系人" prop="contactsName">
           <el-input v-model="dataForm.contactsName" placeholder="请输入联系人"></el-input>
         </el-form-item>
-        <el-form-item label="联系电话" prop="contactsPhone" >
+        <el-form-item label="联系电话" prop="contactsPhone">
           <el-input v-model="dataForm.contactsPhone" placeholder="请输入联系电话" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
         </el-form-item>
          <el-form-item label="备注" prop="remarks">
-          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入"
-            v-model="dataForm.remarks">
-          </el-input>
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注" v-model="dataForm.remarks"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">

src/views/customer/distributor.vue

@@ -1,81 +1,93 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="公司名称">
+            <el-input v-model="listQuery.companyName" placeholder="请输入公司名称" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="分销商等级">
+            <el-select v-model="listQuery.companyLevel" filterable placeholder="请选择分销商等级" style="width: 100%" clearable>
+              <el-option :key="item.dictLabel" v-for="item in company_level" :label="item.dictLabel" :value="item.dictLabel">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="状态">
+            <el-select v-model="listQuery.status" clearable placeholder="请选择状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in statusList" :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="公司名称" v-model="listQuery.companyName">
-      </el-input>
-      <el-select class="filter-item" style="width: 200px" v-model="listQuery.companyLevel" filterable
-        placeholder="分销商等级">
-        <el-option :key="item.dictLabel" v-for="item in company_level" :label="item.dictLabel" :value="item.dictLabel">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.status" clearable placeholder="状态" class="filter-item" style="width: 200px;">
-        <el-option :key="item.type" v-for="item in statusList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-      <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
-    </div>
-
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
-      highlight-current-row>
-
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="100px" label="分销商编号" prop="customerCode">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="100px" label="公司名称" prop="companyName">
-      </el-table-column>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-      <el-table-column align="center" min-width="80px" label="分销商等级" prop="companyLevel">
-      </el-table-column>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownload">导出</el-button>
+      </el-col>
+    </el-row>
 
-      <el-table-column align="center" min-width="80px" label="合同开始时间" prop="contractStart">
-      </el-table-column>
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="分销商编号" prop="customerCode"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="公司名称" prop="companyName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="分销商等级" prop="companyLevel"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="合同开始时间" prop="contractStart"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="合同结束时间" prop="contractEnd"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="联系人" prop="contactsName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="联系电话" prop="contactsPhone"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="状态">
+          <template slot-scope="props">
+            <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
+            <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.status == 1" type="text" icon="el-icon-success" class="openText" size="small" @click="changeState(scope.row.id, scope.row.status)">启用</el-button>
+            <el-button v-if="scope.row.status == 0" type="text" icon="el-icon-circle-close" class="closeText" size="small" @click="changeState(scope.row.id, scope.row.status)">停用</el-button>
+            <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <el-table-column align="center" min-width="80px" label="合同结束时间" prop="contractEnd">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="80px" label="联系人" prop="contactsName">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="80px" label="联系电话" prop="contactsPhone">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="50px" label="状态">
-        <template slot-scope="props">
-          <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
-          <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.status == 1" type="success" size="small"
-            @click="changeState(scope.row.id, scope.row.status)">启用</el-button>
-          <el-button v-if="scope.row.status == 0" type="warning" size="small"
-            @click="changeState(scope.row.id, scope.row.status)">停用</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="110px">
         <el-form-item label="分销商编号" prop="customerCode">
           <el-input v-model="dataForm.customerCode" placeholder="请输入分销商编号"></el-input>
@@ -85,18 +97,15 @@
         </el-form-item>
         <el-form-item label="分销商等级" prop="companyLevel">
           <el-select v-model="dataForm.companyLevel" filterable placeholder="请选择分销商等级" style="width: 100%">
-            <el-option :key="item.dictLabel" v-for="item in company_level" :label="item.dictLabel"
-              :value="item.dictLabel">
+            <el-option :key="item.dictLabel" v-for="item in company_level" :label="item.dictLabel" :value="item.dictLabel">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="合同开始日期" prop="contractStart">
-          <el-date-picker style="width: 100%;" v-model="dataForm.contractStart" type="date" placeholder="选择合同开始日期"
-            value-format="yyyy-MM-dd" :picker-options="startDatePickerOptions"></el-date-picker>
+          <el-date-picker style="width: 100%;" v-model="dataForm.contractStart" type="date" placeholder="选择合同开始日期" value-format="yyyy-MM-dd" :picker-options="startDatePickerOptions"></el-date-picker>
         </el-form-item>
         <el-form-item label="合同结束日期" prop="contractEnd">
-          <el-date-picker style="width: 100%;" v-model="dataForm.contractEnd" type="date" placeholder="选择合同结束日期"
-            value-format="yyyy-MM-dd" :picker-options="endDatePickerOptions"></el-date-picker>
+          <el-date-picker style="width: 100%;" v-model="dataForm.contractEnd" type="date" placeholder="选择合同结束日期" value-format="yyyy-MM-dd" :picker-options="endDatePickerOptions"></el-date-picker>
         </el-form-item>
         <el-form-item label="联系人" prop="contactsName">
           <el-input v-model="dataForm.contactsName" placeholder="请输入联系人"></el-input>

src/views/customer/guest.vue

@@ -1,62 +1,80 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="散客编号">
+            <el-input v-model="listQuery.customerCode" placeholder="请输入散客编号" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="散客姓名">
+            <el-input v-model="listQuery.customerName" placeholder="请输入散客姓名" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="性别">
+            <el-select v-model="listQuery.sex" clearable placeholder="请选择性别" style="width: 100%">
+              <el-option :key="item.type" v-for="item in sexList" :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="散客编号" v-model="listQuery.customerCode">
-      </el-input>
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="散客姓名" v-model="listQuery.customerName">
-      </el-input>
-      <el-select v-model="listQuery.sex" clearable placeholder="性别" class="filter-item" style="width: 200px;">
-        <el-option :key="item.type" v-for="item in sexList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-      <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
-    </div>
-
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
-      highlight-current-row>
-
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="80px" label="散客编号" prop="customerCode">
-      </el-table-column>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-      <el-table-column align="center" min-width="100px" label="散客姓名" prop="customerName">
-      </el-table-column>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownload">导出</el-button>
+      </el-col>
+    </el-row>
 
-      <el-table-column align="center" min-width="80px" label="性别" prop="sexStr">
-      </el-table-column>
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="散客编号" prop="customerCode"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="散客姓名" prop="customerName"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="性别" prop="sexStr"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="联系方式" prop="customerPhone"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="备注" prop="remarks"></el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <el-table-column align="center" min-width="80px" label="联系方式" prop="customerPhone">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="150px" label="备注" prop="remarks">
-      </el-table-column>
-
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="110px">
         <el-form-item label="散客编号" prop="customerCode">
           <el-input v-model="dataForm.customerCode" placeholder="请输入散客编号"></el-input>
@@ -73,9 +91,7 @@
           <el-input v-model="dataForm.customerPhone" placeholder="请输入联系方式"></el-input>
         </el-form-item>
         <el-form-item label="备注" prop="remarks">
-          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注"
-            v-model="dataForm.remarks">
-          </el-input>
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注" v-model="dataForm.remarks"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">

src/views/customer/vip.vue

@@ -1,88 +1,110 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="会员姓名">
+            <el-input v-model="listQuery.customerName" placeholder="请输入会员姓名" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="性别">
+            <el-select v-model="listQuery.sex" clearable placeholder="请选择性别" style="width: 100%">
+              <el-option :key="item.type" v-for="item in sexList" :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="注册渠道">
+            <el-select v-model="listQuery.registerChannel" clearable filterable placeholder="请选择注册渠道" style="width: 100%">
+              <el-option :key="item.dictLabel" v-for="item in register_channel" :label="item.dictLabel" :value="item.dictLabel">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="会员等级">
+            <el-select v-model="listQuery.customerLevel" clearable filterable placeholder="请选择会员等级" style="width: 100%">
+              <el-option :key="item.id" v-for="item in customer_level" :label="item.level" :value="item.level">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="会员姓名" v-model="listQuery.customerName">
-      </el-input>
-      <el-select v-model="listQuery.sex" clearable placeholder="性别" class="filter-item" style="width: 200px;">
-        <el-option :key="item.type" v-for="item in sexList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-select class="filter-item" style="width: 200px" v-model="listQuery.registerChannel" clearable placeholder="注册渠道">
-        <el-option :key="item.dictLabel" v-for="item in register_channel" :label="item.dictLabel" :value="item.dictLabel">
-        </el-option>
-      </el-select>
-      <el-select class="filter-item" style="width: 200px" v-model="listQuery.customerLevel" clearable placeholder="会员等级">
-        <el-option :key="item.id" v-for="item in customer_level" :label="item.level" :value="item.level">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.status" clearable placeholder="状态" class="filter-item" style="width: 200px;">
-        <el-option :key="item.type" v-for="item in statusList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-      <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
-    </div>
-
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
-      highlight-current-row>
-
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="80px" label="会员编号" prop="customerCode">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="100px" label="会员姓名" prop="customerName">
-      </el-table-column>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="状态">
+            <el-select v-model="listQuery.status" clearable placeholder="请选择状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in statusList" :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-      <el-table-column align="center" min-width="80px" label="性别" prop="sexStr">
-      </el-table-column>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownload">导出</el-button>
+      </el-col>
+    </el-row>
 
-      <el-table-column align="center" min-width="80px" label="注册渠道" prop="registerChannel">
-      </el-table-column>
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="会员编号" prop="customerCode"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="会员姓名" prop="customerName"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="性别" prop="sexStr"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="注册渠道" prop="registerChannel"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="会员生日" prop="customerBirthday"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="会员等级" prop="customerLevel"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="状态">
+          <template slot-scope="props">
+            <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
+            <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.status == 1" type="text" icon="el-icon-success" class="openText" size="small" @click="changeState(scope.row.id, scope.row.status)">启用</el-button>
+            <el-button v-if="scope.row.status == 0" type="text" icon="el-icon-circle-close" class="closeText" size="small" @click="changeState(scope.row.id, scope.row.status)">停用</el-button>
+            <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <el-table-column align="center" min-width="80px" label="会员生日" prop="customerBirthday">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="80px" label="会员等级" prop="customerLevel">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="50px" label="状态">
-        <template slot-scope="props">
-          <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
-          <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column align="center" min-width="150px" label="备注" prop="remarks">
-      </el-table-column> -->
-
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.status == 1" type="success" size="small"
-            @click="changeState(scope.row.id, scope.row.status)">启用</el-button>
-          <el-button v-if="scope.row.status == 0" type="warning" size="small"
-            @click="changeState(scope.row.id, scope.row.status)">停用</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="110px">
         <el-form-item label="会员编号" prop="customerCode">
           <el-input v-model="dataForm.customerCode" placeholder="请输入会员编号"></el-input>
@@ -111,9 +133,7 @@
           <el-input v-model="dataForm.pointsBalance" placeholder="请输入积分余额" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
         </el-form-item>
         <el-form-item label="备注" prop="remarks">
-          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注"
-            v-model="dataForm.remarks">
-          </el-input>
+          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注" v-model="dataForm.remarks"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">

src/views/dictManage/dictDataList.vue

@@ -1,106 +1,120 @@
 <template>
-    <div class="app-container calendar-list-container">
+    <div class="app-container">
+        <!-- 查询表单区域 -->
+        <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="字典名称">
+                <el-select @change="changeDictType" v-model="listQuery.dictType" clearable filterable placeholder="请选择字典名称" style="width: 100%">
+                  <el-option :key="item.dictType" v-for="item in dictNameList" :label="item.dictName" :value="item.dictType">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="字典标签">
+                <el-input v-model="listQuery.dictLabel" placeholder="请输入字典标签" style="width: 100%" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="状态">
+                <el-select v-model="listQuery.status" clearable placeholder="请选择状态" style="width: 100%">
+                  <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
 
-        <!-- 查询和其他操作 -->
-        <div class="filter-container">
-            <el-select @change="changeDictType" v-model="listQuery.dictType" clearable placeholder="字典名称" class="filter-item" style="width: 200px">
-                <el-option :key="item.dictType" v-for="item in dictNameList" :label="item.dictName" :value="item.dictType">
-                </el-option>
-            </el-select>
-            <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典标签"
-                v-model="listQuery.dictLabel"></el-input>
-                <el-select v-model="listQuery.status" clearable placeholder="状态" class="filter-item" style="width: 200px">
-                <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-                </el-option>
-            </el-select>
-            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-            <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-            <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-form-item label="搜索">
+                <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="重置">
+                <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
 
-        </div>
+        <!-- 操作按钮区域 -->
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" icon="el-icon-delete" size="small" @click="delAll">批量删除</el-button>
+          </el-col>
+        </el-row>
 
-        <!-- 查询结果 -->
-        <el-table size="small" :data="list" v-loading="listLoading" @selection-change="handleSelectionChange"
-            element-loading-text="正在查询中。。。" border fit highlight-current-row>
-            <el-table-column type="selection" width="55px"> </el-table-column>
-            <el-table-column align="center" min-width="60px" label="字典编码" prop="dictCode">
-            </el-table-column>
-            <el-table-column align="center" min-width="100px" label="字典标签" prop="dictLabel">
-            </el-table-column>
-            <el-table-column align="center" min-width="60px" label="字典键值" prop="dictValue">
-            </el-table-column>
-            <el-table-column align="center" min-width="60px" label="字典排序" prop="dictSort">
-            </el-table-column>
-            <el-table-column align="center" min-width="100px" label="状态">
-            <template slot-scope="scope">
+        <!-- 表格区域 -->
+        <div class="border-card">
+          <el-table height="450" size="small" :data="list" v-loading="listLoading" @selection-change="handleSelectionChange" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+            <el-table-column type="selection" width="55px" align="center"></el-table-column>
+            <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+            <el-table-column align="center" min-width="60px" label="字典编码" prop="dictCode"></el-table-column>
+            <el-table-column align="center" min-width="100px" label="字典标签" prop="dictLabel"></el-table-column>
+            <el-table-column align="center" min-width="60px" label="字典键值" prop="dictValue"></el-table-column>
+            <el-table-column align="center" min-width="60px" label="字典排序" prop="dictSort"></el-table-column>
+            <el-table-column align="center" min-width="80px" label="状态">
+              <template slot-scope="scope">
                 <el-tag v-if="scope.row.status == '0'">正常</el-tag>
                 <el-tag v-else>停用</el-tag>
-            </template>
-        </el-table-column>
-        <el-table-column align="center" min-width="200px" label="备注" prop="remark">
-        </el-table-column>
-        <el-table-column align="center" min-width="100px" label="创建时间" prop="createTime">
-        </el-table-column>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" min-width="200px" label="备注" prop="remark"></el-table-column>
+            <el-table-column align="center" min-width="100px" label="创建时间" prop="createTime"></el-table-column>
             <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button type="primary" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
-
-                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-                </template>
+              <template slot-scope="scope">
+                <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
+                <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+              </template>
             </el-table-column>
-        </el-table>
+          </el-table>
 
-        <!-- 分页 -->
-        <div class="pagination-container">
+          <!-- 分页 -->
+          <div class="pagination-container">
             <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-                layout="total, sizes, prev, pager, next, jumper" :total="total">
+              :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+              layout="total, sizes, prev, pager, next, jumper" :total="total">
             </el-pagination>
+          </div>
         </div>
 
         <!-- 添加或修改对话框 -->
-        <el-dialog
-        :close-on-click-modal="false"
-        :title="textMap[dialogStatus]"
-        :visible.sync="dialogFormVisible"
-        width="40%"
-      >
-        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
-            <el-form-item  label="字典类型" prop="dictType">
-              <el-input disabled style="width: 300px" v-model="dataForm.dictType"></el-input>
+        <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
+          <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
+            <el-form-item label="字典类型" prop="dictType">
+              <el-input disabled v-model="dataForm.dictType" placeholder="字典类型"></el-input>
             </el-form-item>
-            <el-form-item  label="字典标签" prop="dictLabel">
-              <el-input style="width: 300px" v-model="dataForm.dictLabel"></el-input>
+            <el-form-item label="字典标签" prop="dictLabel">
+              <el-input v-model="dataForm.dictLabel" placeholder="请输入字典标签"></el-input>
             </el-form-item>
-            <el-form-item  label="字典键值" prop="dictValue">
-              <el-input style="width: 300px" v-model="dataForm.dictValue"></el-input>
+            <el-form-item label="字典键值" prop="dictValue">
+              <el-input v-model="dataForm.dictValue" placeholder="请输入字典键值"></el-input>
             </el-form-item>
             <el-form-item label="显示排序" prop="dictSort">
-                <el-input-number
-                  :precision="0"
-                  :step="1"
-                  v-model="dataForm.dictSort"
-                ></el-input-number>
-              </el-form-item>
-            <el-form-item  label="状态">
-                <el-radio-group v-model="dataForm.status">
-                    <el-radio :label="'0'">正常</el-radio>
-                    <el-radio :label="'1'">停用</el-radio>
-                </el-radio-group>
+              <el-input-number :precision="0" :step="1" v-model="dataForm.dictSort"></el-input-number>
             </el-form-item>
-            <el-form-item  label="备注">
-              <el-input type="textarea" :rows="2" style="width: 300px" v-model="dataForm.remark"></el-input>
+            <el-form-item label="状态">
+              <el-radio-group v-model="dataForm.status">
+                <el-radio :label="'0'">正常</el-radio>
+                <el-radio :label="'1'">停用</el-radio>
+              </el-radio-group>
             </el-form-item>
-            
-            
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="dialogFormVisible = false">取消</el-button>
-          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
-          <el-button v-else type="primary" @click="updateData">确定</el-button>
-        </div>
-      </el-dialog>
+            <el-form-item label="备注">
+              <el-input type="textarea" :rows="2" v-model="dataForm.remark" placeholder="请输入备注"></el-input>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="dialogFormVisible = false">取消</el-button>
+            <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
+            <el-button v-else type="primary" @click="updateData">确定</el-button>
+          </div>
+        </el-dialog>
 
     </div>
 </template>
@@ -385,5 +399,4 @@ export default {
 .ad-avatar {
     display: block;
 }
-</style>
-  
+</style>

src/views/dictManage/dictList.vue

@@ -1,101 +1,107 @@
 <template>
-    <div class="app-container calendar-list-container">
-  
-      <!-- 查询和其他操作 -->
-      <div class="filter-container">
-        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典名称" v-model="listQuery.dictName"></el-input>
-        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典类型" v-model="listQuery.dictType"></el-input>
-        <el-select v-model="listQuery.status" clearable placeholder="字典状态" class="filter-item" style="width: 200px">
-            <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-            </el-option>
-        </el-select>
-        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-        <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-        <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-      </div>
-  
-      <!-- 查询结果 -->
-      <el-table
-        size="small"
-        :data="list"
-        @selection-change="handleSelectionChange"
-        v-loading="listLoading"
-        element-loading-text="正在查询中。。。"
-        border
-        fit
-        highlight-current-row
-      >
-        <el-table-column type="selection" width="55px"> </el-table-column>
-        <el-table-column type="index" label="序号" header-align="center" align="center">
-        </el-table-column>
-  
-        <el-table-column align="center" min-width="100px" label="字典名称" prop="dictName">
-        </el-table-column>
-        <el-table-column align="center" min-width="150px" label="字典类型">
+    <div class="app-container">
+      <!-- 查询表单区域 -->
+      <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="字典名称">
+              <el-input v-model="listQuery.dictName" placeholder="请输入字典名称" style="width: 100%" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="字典类型">
+              <el-input v-model="listQuery.dictType" placeholder="请输入字典类型" style="width: 100%" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="状态">
+              <el-select v-model="listQuery.status" clearable placeholder="请选择状态" style="width: 100%">
+                <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="搜索">
+              <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="重置">
+              <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <!-- 操作按钮区域 -->
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" icon="el-icon-delete" size="small" @click="delAll">批量删除</el-button>
+        </el-col>
+      </el-row>
+
+      <!-- 表格区域 -->
+      <div class="border-card">
+        <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+          <el-table-column type="selection" width="55px" align="center"></el-table-column>
+          <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+          <el-table-column align="center" min-width="100px" label="字典名称" prop="dictName"></el-table-column>
+          <el-table-column align="center" min-width="150px" label="字典类型">
             <template slot-scope="scope">
-                <router-link :to="{name: 'dictDataList', params: { id: scope.row.dictType }}">
-                    <div style="color: #337ab7;cursor: pointer;">{{ scope.row.dictType }}</div>
-                </router-link>
+              <router-link :to="{name: 'dictDataList', params: { id: scope.row.dictType }}">
+                <div style="color: #337ab7;cursor: pointer;">{{ scope.row.dictType }}</div>
+              </router-link>
             </template>
-        </el-table-column>
-        <el-table-column align="center" min-width="100px" label="状态">
+          </el-table-column>
+          <el-table-column align="center" min-width="80px" label="状态">
             <template slot-scope="scope">
-                <el-tag v-if="scope.row.status === '1'">停用</el-tag>
-                <el-tag v-else>正常</el-tag>
+              <el-tag v-if="scope.row.status === '1'">停用</el-tag>
+              <el-tag v-else>正常</el-tag>
             </template>
-            
-        </el-table-column>
-        <el-table-column align="center" min-width="200px" label="备注" prop="remark">
-        </el-table-column>
-        <el-table-column align="center" min-width="150px" label="创建时间" prop="createTime">
-        </el-table-column>
-        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button
-              type="primary"
-              size="small"
-              @click="handleUpdate(scope.row, false)"
-              >编辑</el-button
-            >
-  
-            <el-button type="danger" size="small"  @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-      <!-- 分页 -->
-      <div class="pagination-container">
-        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
-          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
-        </el-pagination>
+          </el-table-column>
+          <el-table-column align="center" min-width="200px" label="备注" prop="remark"></el-table-column>
+          <el-table-column align="center" min-width="100px" label="创建时间" prop="createTime"></el-table-column>
+          <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
+              <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+            :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+          </el-pagination>
+        </div>
       </div>
-  
+
       <!-- 添加或修改对话框 -->
-      <el-dialog
-      :close-on-click-modal="false"
-        :title="textMap[dialogStatus]"
-        :visible.sync="dialogFormVisible"
-        width="40%"
-      >
-        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
-            <el-form-item  label="字典名称" prop="dictName">
-              <el-input style="width: 300px" v-model="dataForm.dictName"></el-input>
-            </el-form-item>
-            <el-form-item  label="字典类型" prop="dictType">
-              <el-input style="width: 300px" v-model="dataForm.dictType"></el-input>
-            </el-form-item>
-            <el-form-item  label="状态">
-                <el-radio-group v-model="dataForm.status">
-                    <el-radio :label="'0'">正常</el-radio>
-                    <el-radio :label="'1'">停用</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item  label="备注">
-              <el-input type="textarea" :rows="2" style="width: 300px" v-model="dataForm.remark"></el-input>
-            </el-form-item>
-            
-            
+      <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
+        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
+          <el-form-item label="字典名称" prop="dictName">
+            <el-input v-model="dataForm.dictName" placeholder="请输入字典名称"></el-input>
+          </el-form-item>
+          <el-form-item label="字典类型" prop="dictType">
+            <el-input v-model="dataForm.dictType" placeholder="请输入字典类型"></el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-radio-group v-model="dataForm.status">
+              <el-radio :label="'0'">正常</el-radio>
+              <el-radio :label="'1'">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input type="textarea" :rows="2" v-model="dataForm.remark" placeholder="请输入备注"></el-input>
+          </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取消</el-button>
@@ -103,25 +109,25 @@
           <el-button v-else type="primary" @click="updateData">确定</el-button>
         </div>
       </el-dialog>
-  
+
     </div>
-  </template>
-  
-  <style>
-    .demo-table-expand {
-      font-size: 0;
-    }
-    .demo-table-expand label {
-      width: 200px;
-      color: #99a9bf;
-    }
-    .demo-table-expand .el-form-item {
-      margin-right: 0;
-      margin-bottom: 0;
-    }
-  </style>
-  
-  <script>
+</template>
+
+<style>
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 200px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+</style>
+
+<script>
     import { list, createItem, updateItem, deleteitem } from "@/api/dictManage";
     import waves from "@/directive/waves"; // 水波纹指令
     import Tinymce from '@/components/Tinymce'
@@ -297,7 +303,7 @@
             this.getList()
           })
         }).catch(() => {
-  
+
         })
   
       },
@@ -341,28 +347,27 @@
         },
     }
   }
-  </script>
-  <style>
-    .ad-avatar-uploader .el-upload {
-      border: 1px dashed #d9d9d9;
-      border-radius: 6px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .ad-avatar-uploader .el-upload:hover {
-      border-color: #409EFF;
-    }
-    .ad-avatar-uploader-icon {
-      font-size: 28px;
-      color: #8c939d;
-      width: 178px;
-      height: 178px;
-      line-height: 178px;
-      text-align: center;
-    }
-    .ad-avatar {
-      display: block;
-    }
-  </style>
-  
+</script>
+<style>
+  .ad-avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .ad-avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .ad-avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .ad-avatar {
+    display: block;
+  }
+</style>

src/views/sys/admin.vue

@@ -1,69 +1,83 @@
 <template>
-  <div class="app-container calendar-list-container">
-
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户名称" v-model="listQuery.username">
-      </el-input>
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户昵称" v-model="listQuery.nickname">
-      </el-input>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-      <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
-    </div>
-
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <!--<el-table-column align="center" width="100px" label="用户ID" prop="id" sortable>
-      </el-table-column>-->
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-
-      <el-table-column align="center" min-width="100px" label="用户名称" prop="username">
-      </el-table-column>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="用户名称">
+            <el-input v-model="listQuery.username" placeholder="请输入用户名称" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="用户昵称">
+            <el-input v-model="listQuery.nickname" placeholder="请输入用户昵称" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-      <el-table-column align="center" min-width="100px" label="用户昵称" prop="nickname">
-      </el-table-column>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownload">导出</el-button>
+      </el-col>
+    </el-row>
 
-      <el-table-column align="center" min-width="100px" label="用户头像" prop="avatar">
-        <template slot-scope="scope">
-          <img class="user-avatar" :src="scope.row.avatar?scope.row.avatar:require('@/assets/avatar.gif')">
-        </template>
-      </el-table-column>
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="用户名称" prop="username"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="用户昵称" prop="nickname"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="用户头像" prop="avatar">
+          <template slot-scope="scope">
+            <img class="user-avatar" :src="scope.row.avatar?scope.row.avatar:require('@/assets/avatar.gif')">
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
+            <el-button type="text" icon="el-icon-user" class="plusText" size="small" @click="handleUpdate(scope.row, true)">角色</el-button>
+            <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row, true)">角色</el-button>
-          <el-button type="danger" size="small"  @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
-        :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
       <template v-if="!dialogFlag">
-        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
-          <!-- <el-form-item label="用户名称" prop="username">
-            <el-input v-if="dialogStatus=='create'" v-model="dataForm.username" auto-complete="off"></el-input>
-            <el-input v-else v-model="dataForm.username" disabled auto-complete="off"></el-input>
-          </el-form-item> -->
+        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="120px">
           <el-form-item label="用户" prop="username">
-                    <el-select :disabled="dialogStatus=='create'?false:true" v-model="dataForm.username" filterable clearable placeholder="请选择" style="width: 280px">
-                        <el-option :key="item.loginId" v-for="item in recipientsList" :label="item.deptName+'_'+item.userName+'_'+item.employeNo" :value="item.loginId">
-                        </el-option>
-                    </el-select>
+            <el-select :disabled="dialogStatus=='create'?false:true" v-model="dataForm.username" filterable clearable placeholder="请选择" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in recipientsList" :label="item.deptName+'_'+item.userName+'_'+item.employeNo" :value="item.loginId">
+              </el-option>
+            </el-select>
           </el-form-item>
           <el-form-item label="用户密码" prop="password">
-            <el-input type="password" v-model="dataForm.password"  auto-complete="off"></el-input>
+            <el-input type="password" v-model="dataForm.password" auto-complete="off"></el-input>
           </el-form-item>
           <el-form-item label="确认密码" prop="checkPassword">
             <el-input type="password" v-model="dataForm.checkPassword" auto-complete="off"></el-input>
@@ -71,15 +85,9 @@
           <el-form-item label="用户昵称" prop="nickname">
             <el-input v-model="dataForm.nickname"></el-input>
           </el-form-item>
-
-          <!--<el-form-item label="关联微信" prop="phone">
-            <el-tooltip class="item" effect="dark" content="输入手机号码" placement="top-start">
-              <el-input ref="phone" v-model="dataForm.phone" @blur="getWxUserId"></el-input>
-            </el-tooltip>
-          </el-form-item>-->
           <el-form-item label="关联微信用户" prop="userId">
             <el-select
-            style="width: 280px"
+              style="width: 100%"
               v-model="dataForm.userId"
               :filterable="selectfilterable"
               :remote="selectremote"
@@ -94,7 +102,6 @@
               </el-option>
             </el-select>
           </el-form-item>
-
           <el-form-item label="用户头像" prop="avatar">
             <el-input v-model="dataForm.avatar"></el-input>
             <el-upload action="#" list-type="picture" :show-file-list="false" :limit="1" :http-request="uploadAvatar">
@@ -104,9 +111,9 @@
         </el-form>
       </template>
       <template v-else>
-        <el-form status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
+        <el-form status-icon label-position="left" label-width="100px">
           <el-form-item label="用户角色">
-            <el-select v-model="role" multiple placeholder="请选择">
+            <el-select v-model="role" multiple placeholder="请选择" style="width: 100%">
               <el-option
                 v-for="item in roleList"
                 :key="item.id"
@@ -124,7 +131,7 @@
           <el-button v-else type="primary" @click="updateData">确定</el-button>
         </template>
         <template v-if="dialogFlag">
-          <el-button  type="primary" @click="updateUserRoles">确定</el-button>
+          <el-button type="primary" @click="updateUserRoles">确定</el-button>
         </template>
       </div>
     </el-dialog>
@@ -163,7 +170,6 @@
   }
 </style>
 
-
 <script>
 import { listAdmin, createAdmin, updateAdmin, deleteAdmin, getWxUserId, getUser} from '@/api/admin'
 import { selectUserByUserName } from "@/api/organize"
@@ -201,7 +207,6 @@ export default {
         callback(new Error('请输入密码'))
       } else {
         const reg = /([0-9]+[a-zA-Z]+|[a-zA-Z]+[0-9]+)[0-9a-zA-Z]*/;
-        //const reg = /^(?!\d+$)[\da-zA-Z]+$/;
         if (!reg.test(value)) {
           callback(new Error('请输入字母、数字组合'))
         }
@@ -467,7 +472,7 @@ export default {
           if(userId != 0) {
             this.dataForm.userId = userId
           } else {
-            this.$alert('无法查询该手机关联的微信用户Id,请重新输入', '提示', {
+            this.$alert('无法查询该手机关联的微信用户 Id，请重新输入', '提示', {
               type: 'warning',
               callback: action => {
                 this.dataForm.phone = undefined
@@ -482,4 +487,4 @@ export default {
     }
   }
 }
-</script>
+</script>

src/views/sys/dept.vue

@@ -1,75 +1,74 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
-      <el-form-item>
-        <el-input
-          v-model="queryParams.deptName"
-          placeholder="请输入部门名称"
-          clearable
-          style="width: 200px;"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-select v-model="queryParams.status" clearable placeholder="状态" class="filter-item" style="width: 200px;">
-                <el-option :key="item.value" v-for="item in statusList" :label="item.label" :value="item.value">
-                </el-option>
+    <!-- 查询表单区域 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="部门名称">
+            <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="状态">
+            <el-select v-model="queryParams.status" clearable placeholder="请选择状态" style="width: 100%">
+              <el-option :key="item.value" v-for="item in statusList" :label="item.label" :value="item.value">
+              </el-option>
             </el-select>
-      </el-form-item>
-      
-      <el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleQuery">查找</el-button>
-          <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-          <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
-          <el-button class="filter-item" type="info" icon="el-icon-sort" @click="toggleExpandAll">展开/折叠</el-button>
-        </el-form-item>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
-    <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="deptList"
-      row-key="deptId"
-      border
-      :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-      <el-table-column align="center" prop="deptName" label="部门名称" min-width="260"></el-table-column>
-      <el-table-column align="center" prop="orderNum" label="排序" min-width="100"></el-table-column>
-      <el-table-column align="center" min-width="80px" label="状态">
-                <template slot-scope="props">
-                    <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
-                    <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
-                </template>
-            </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" min-width="100">
-        <template slot-scope="scope">
-          <span>{{ scope.row.createTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" min-width="110px">
-        <template slot-scope="scope">
-            <el-button
-              size="small"
-              type="primary"
-              @click="handleUpdate(scope.row)"
-            >修改</el-button>
-            <el-button
-              size="small"
-              type="success"
-              @click="handleAdd(scope.row)"
-            >添加</el-button>
-            <el-button
-              v-if="!scope.row.children"
-              size="small"
-              type="danger"
-              @click="handleDelete(scope.row)"
-            >删除</el-button>
+
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleAdd">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" icon="el-icon-sort" size="small" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+    </el-row>
+
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="deptId" border :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table-column align="center" prop="deptName" label="部门名称" min-width="260"></el-table-column>
+        <el-table-column align="center" prop="orderNum" label="排序" min-width="100"></el-table-column>
+        <el-table-column align="center" min-width="80px" label="状态">
+          <template slot-scope="props">
+            <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
+            <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" min-width="100">
+          <template slot-scope="scope">
+            <span>{{ scope.row.createTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" min-width="200px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">修改</el-button>
+            <el-button type="text" icon="el-icon-plus" class="plusText" size="small" @click="handleAdd(scope.row)">添加</el-button>
+            <el-button v-if="!scope.row.children" type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
           </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+      </el-table>
+    </div>
 
     <!-- 添加或修改部门对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
@@ -111,11 +110,7 @@
           <el-col :span="12">
             <el-form-item label="部门状态">
               <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in statusList"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
+                <el-radio v-for="dict in statusList" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -331,4 +326,4 @@ export default {
     }
   }
 };
-</script>
+</script>

src/views/sys/role.vue

@@ -1,48 +1,66 @@
 <template>
-  <div class="app-container calendar-list-container">
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="角色名称">
+            <el-input v-model="listQuery.roleName" placeholder="请输入角色名称" style="width: 100%" clearable></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入角色名称" v-model="listQuery.roleName">
-      </el-input>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
-      <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-    </div>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <!--<el-table-column align="center" width="100px" label="角色ID" prop="id" sortable>
-      </el-table-column>-->
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="角色名称" prop="roleName">
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row, true)">权限</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="角色名称" prop="roleName"></el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
+            <el-button type="text" icon="el-icon-lock" class="plusText" size="small" @click="handleUpdate(scope.row, true)">权限</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
-        :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
+      <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px">
         <template v-if="!dialogMain">
           <el-form-item label="角色名称" prop="roleName">
-            <el-input v-model="dataForm.roleName"></el-input>
+            <el-input v-model="dataForm.roleName" placeholder="请输入角色名称"></el-input>
           </el-form-item>
         </template>
         <template v-else>
-          <el-form-item label="角色权限" prop="password">
+          <el-form-item label="角色权限">
             <el-tree
               :data="router"
               show-checkbox
@@ -68,7 +86,6 @@
 <script>
 import { asyncRouterMap } from '@/router'
 import { addRole, roleList, updateRoleName, getRoleMenu, updateRoleMenu } from '@/api/role'
-// import { listAdmin } from '@/api/admin'
 import waves from '@/directive/waves' // 水波纹指令
 
 export default {
@@ -264,5 +281,4 @@ export default {
     }
   }
 }
-</script>
-
+</script>