Pre Merge pull request !369 from 张崧/yudao_master_my

src/components/Icon/src/Icon.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   // icon color
   color: propTypes.string,
   // icon size
-  size: propTypes.number.def(16),
+  size: propTypes.number.def(14),
   // icon svg class
   svgClass: propTypes.string.def('')
 })

src/components/TableRightToolbar/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <!-- 刷新table -->
+    <el-tooltip effect="dark" content="刷新" placement="top">
+      <el-button circle @click="handleRefresh()"><Icon icon="ep:refresh" /></el-button>
+    </el-tooltip>
+
+    <!-- 显示/隐藏搜索内容 -->
+    <el-tooltip
+      effect="dark"
+      :content="showSearchContent ? '隐藏搜索' : '显示搜索'"
+      placement="top"
+    >
+      <el-button circle @click="handleShowSearch"><Icon icon="ep:search" /></el-button>
+    </el-tooltip>
+
+    <!-- 插槽 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'TableRightToolbar' })
+
+const props = defineProps({
+  /**
+   * 是否显示搜索内容
+   */
+  showSearchContent: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否需要显示/隐藏按钮
+   */
+  search: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emits = defineEmits(['update:showSearch', 'refreshTable'])
+
+// 显示/隐藏搜索内容
+const handleShowSearch = () => {
+  emits('update:showSearchContent', !props.showSearchContent)
+}
+
+// 刷新table
+const handleRefresh = () => {
+  emits('refreshTable')
+}
+</script>

src/views/system/user/index.vue

@@ -12,12 +12,13 @@
     </el-col>
     <el-col :span="20" :xs="24">
       <!-- 搜索 -->
-      <ContentWrap>
+      <ContentWrap v-show="showSearchContent">
         <el-form
           class="-mb-15px"
           :model="queryParams"
           ref="queryFormRef"
           :inline="true"
+          @submit.prevent
           label-width="68px"
         >
           <el-form-item label="用户名称" prop="username">
@@ -26,7 +27,7 @@
               placeholder="请输入用户名称"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-200px"
             />
           </el-form-item>
           <el-form-item label="手机号码" prop="mobile">
@@ -35,67 +36,85 @@
               placeholder="请输入手机号码"
               clearable
               @keyup.enter="handleQuery"
-              class="!w-240px"
+              class="!w-200px"
             />
           </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select
-              v-model="queryParams.status"
-              placeholder="用户状态"
-              clearable
-              class="!w-240px"
-            >
-              <el-option
-                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+          <span v-show="showSearchOther">
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                class="!w-200px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间" prop="createTime">
+              <el-date-picker
+                v-model="queryParams.createTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="datetimerange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="!w-200px"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间" prop="createTime">
-            <el-date-picker
-              v-model="queryParams.createTime"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              type="datetimerange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              class="!w-240px"
-            />
-          </el-form-item>
+            </el-form-item>
+          </span>
           <el-form-item>
-            <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-            <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
-            <el-button
-              type="primary"
-              plain
-              @click="openForm('create')"
-              v-hasPermi="['system:user:create']"
+            <el-button type="primary" @click="handleQuery"
+              ><Icon icon="ep:search" class="mr-5px" />搜索</el-button
             >
-              <Icon icon="ep:plus" /> 新增
-            </el-button>
-            <el-button
-              type="warning"
-              plain
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-            >
-              <Icon icon="ep:upload" /> 导入
-            </el-button>
-            <el-button
-              type="success"
-              plain
-              @click="handleExport"
-              :loading="exportLoading"
-              v-hasPermi="['system:user:export']"
-            >
-              <Icon icon="ep:download" />导出
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
+            <el-button @click="showSearchOther = !showSearchOther">
+              <Icon icon="ep:caret-bottom" v-if="!showSearchOther" />
+              <Icon icon="ep:caret-top" v-else />
             </el-button>
           </el-form-item>
         </el-form>
       </ContentWrap>
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list">
+      <ContentWrap style="margin-top: -5px">
+        <!-- 操作按钮栏 -->
+        <div class="mb-10px" style="margin-top: -10px">
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['system:user:create']">
+            <Icon icon="ep:folder-add" class="mr-5px" /> 新增
+          </el-button>
+          <el-button
+            type="primary"
+            plain
+            @click="handleExport"
+            :loading="exportLoading"
+            v-hasPermi="['system:user:export']"
+          >
+            <Icon icon="ep:upload-filled" class="mr-5px" />导出
+          </el-button>
+          <el-button type="primary" plain @click="handleImport" v-hasPermi="['system:user:import']">
+            <Icon icon="ep:download" class="mr-5px" /> 导入
+          </el-button>
+          <!-- 操作按钮右侧工具 -->
+          <TableRightToolbar
+            v-model:showSearchContent="showSearchContent"
+            @refresh-table="getList"
+            class="ml-10px mr-10px"
+            style="float: right"
+          />
+        </div>
+        <el-table
+          border
+          :header-cell-style="{
+            textAlign: 'center',
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          :max-height="tableHeight"
+          v-loading="loading"
+          :data="list"
+        >
           <el-table-column label="用户编号" align="center" key="id" prop="id" />
           <el-table-column
             label="用户名称"
@@ -117,7 +136,7 @@
             :show-overflow-tooltip="true"
           />
           <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
-          <el-table-column label="状态" key="status">
+          <el-table-column label="状态" key="status" align="center">
             <template #default="scope">
               <el-switch
                 v-model="scope.row.status"
@@ -143,7 +162,7 @@
                   @click="openForm('update', scope.row.id)"
                   v-hasPermi="['system:user:update']"
                 >
-                  <Icon icon="ep:edit" />修改
+                  <Icon icon="ep:edit-pen" class="mr-2px" />修改
                 </el-button>
                 <el-dropdown
                   @command="(command) => handleCommand(command, scope.row)"
@@ -152,6 +171,7 @@
                     'system:user:update-password',
                     'system:permission:assign-user-role'
                   ]"
+                  class="ml-5px"
                 >
                   <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
                   <template #dropdown>
@@ -228,6 +248,9 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+const showSearchContent = ref(true) // 是否显示搜索内容
+const showSearchOther = ref(false) // 是否显示其余搜索内容
+const tableHeight = ref(500) // 表格高度
 
 /** 查询列表 */
 const getList = async () => {
@@ -355,8 +378,41 @@ const handleRole = (row: UserApi.UserVO) => {
   assignRoleFormRef.value.open(row)
 }
 
+// table自适应高度 todo 临时方案实现自适应高度，需要优化
+window.onresize = onWindowResize
+function onWindowResize() {
+  const windowHeight = document.documentElement.clientHeight || document.bodyclientHeight
+  // 100是根据页面情况调整的大小
+  const searchContentHeight = showSearchContent.value ? queryFormRef.value.$el.offsetHeight + 100 : 0
+  tableHeight.value = windowHeight - 250 - searchContentHeight
+}
+watch(
+  () => showSearchContent.value,
+  () => {
+    nextTick(() => {
+      onWindowResize()
+    })
+  }
+)
+watch(
+  () => showSearchOther.value,
+  () => {
+    nextTick(() => {
+      onWindowResize()
+    })
+  }
+)
+
 /** 初始化 */
 onMounted(() => {
   getList()
+  onWindowResize()
 })
 </script>
+
+<style scoped>
+/* 修改搜索表单项右侧边距 */
+.el-form .el-form-item {
+  margin-right: 20px;
+}
+</style>