Bladeren bron

优化页面列表和搜索的样式

ZGC4846 2 dagen geleden
bovenliggende
commit
cf651ad4c8

+ 148 - 11
src/styles/hr-list-standard.scss

@@ -51,23 +51,118 @@ $hr-list-pages: (
     justify-content: flex-end;
   }
 
-  /* 去掉 gutter 左侧额外缩进,让搜索区和表格左侧对齐 */
-  #{$root} .ele-form-search > .el-row {
+  /* 搜索区:与岗位管理一致,字段靠左、间距 5px、查询跟在后面,左边与表格外框对齐 */
+  #{$root} .ele-form-search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
+    padding: 0;
+    margin: 0 0 8px;
+  }
+
+  #{$root} .ele-form-search .el-row {
+    display: contents !important;
+  }
+
+  #{$root} .ele-form-search .el-col {
+    float: none !important;
+    flex: 0 0 auto !important;
+    flex-shrink: 0 !important;
+    width: auto !important;
+    max-width: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  #{$root} .ele-form-search .el-form-item {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: 32px;
+    margin: 0 !important;
+  }
+
+  #{$root} .ele-form-search .el-form-item__label {
+    float: none;
+    width: auto !important;
+    flex: 0 0 auto;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 8px 0 0;
+    white-space: nowrap;
+  }
+
+  #{$root} .ele-form-search .el-form-item__label:not(:empty)::after {
+    content: ':';
+  }
+
+  #{$root} .ele-form-search .el-form-item__content {
+    flex: 0 0 auto;
+    width: auto;
     margin-left: 0 !important;
-    margin-right: 0 !important;
+    height: 32px;
+    line-height: 32px;
+  }
+
+  #{$root} .ele-form-search .el-form-item:not(.status-item):not(.name-item) .el-select,
+  #{$root} .ele-form-search .el-form-item:not(.status-item):not(.name-item) .el-cascader,
+  #{$root} .ele-form-search .el-form-item:not(.status-item):not(.name-item) .el-input:not(.el-range-editor) {
+    width: 220px !important;
+  }
+
+  #{$root} .ele-form-search .el-date-editor--daterange,
+  #{$root} .ele-form-search .el-date-editor--datetimerange,
+  #{$root} .ele-form-search .el-range-editor {
+    width: 360px !important;
+    min-width: 360px;
+    flex-shrink: 0;
+    box-sizing: border-box;
   }
 
-  #{$root} .ele-form-search > .el-row > .el-col {
-    padding-left: 0;
-    padding-right: 15px;
+  #{$root} .ele-form-search .el-input__inner {
+    height: 32px;
+    line-height: 32px;
   }
 
-  #{$root} .ele-form-search > .el-row > .el-col:last-child {
-    padding-right: 0;
+  #{$root} .ele-form-search .el-range-editor.el-input__inner {
+    height: 32px;
+    line-height: 30px;
+  }
+
+  #{$root} .ele-form-actions {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5px;
+    height: 32px;
+    margin: 0 !important;
+    padding: 0;
+  }
+
+  #{$root} .ele-form-actions .el-button + .el-button {
+    margin-left: 0;
   }
 
   #{$root} .ele-form-actions .el-button,
-  #{$root} .filter-actions .el-button,
+  #{$root} .filter-actions .el-button {
+    height: 32px;
+    padding: 0 12px;
+    font-size: 12px;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin: 0;
+
+    > span,
+    > i,
+    [class*="el-icon-"] {
+      line-height: 1;
+    }
+  }
+
   #{$root} .ele-table-tool .el-button,
   #{$root} .table-toolbar-actions .el-button,
   #{$root} .table-actions .el-button,
@@ -110,7 +205,49 @@ $hr-list-pages: (
     justify-content: center;
   }
 
-  #{$root} .el-table .el-link + .el-link {
-    margin-left: 12px;
+  #{$root} .el-table .el-link + .el-link,
+  #{$root} .el-table .el-link + .el-dropdown,
+  #{$root} .el-table .el-link + .ele-action,
+  #{$root} .el-table .el-dropdown + .el-link,
+  #{$root} .el-table .ele-action + .el-link {
+    margin-left: 0;
   }
+
+  #{$root} .el-table td .el-link {
+    margin-right: 12px;
+  }
+
+  #{$root} .el-table td .el-link:last-child {
+    margin-right: 0;
+  }
+
+  /* 操作列换行后与首行左对齐,避免相邻 margin-left 把第二行顶进去 */
+  #{$root} .table-row-actions,
+  #{$root} .el-table td .action-cell,
+  #{$root} .el-table td .row-actions,
+  #{$root} .el-table td .table-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 12px;
+    row-gap: 4px;
+  }
+
+  #{$root} .table-row-actions .el-link,
+  #{$root} .table-row-actions .ele-action,
+  #{$root} .table-row-actions .el-dropdown,
+  #{$root} .el-table td .action-cell .el-link,
+  #{$root} .el-table td .row-actions .el-link,
+  #{$root} .el-table td .table-actions .el-link {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.ele-body.regularization-page .ele-form-search .name-item.el-form-item .el-input:not(.el-range-editor) {
+  width: 172px !important;
+}
+
+.ele-body.regularization-page .ele-form-search .status-item.el-form-item .el-select {
+  width: 160px !important;
 }

+ 6 - 1
src/styles/index.scss

@@ -86,8 +86,13 @@ main[class*='-page'] > .workspace-card:last-of-type .el-table__empty-block {
 
 .el-table td.el-table__cell .action-cell,
 .el-table td.el-table__cell .row-actions,
-.el-table td.el-table__cell .table-actions {
+.el-table td.el-table__cell .table-actions,
+.el-table td.el-table__cell .table-row-actions {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   justify-content: flex-start;
+  column-gap: 12px;
+  row-gap: 4px;
   text-align: left;
 }

+ 1 - 1
src/styles/views/employeeArchive/index.scss

@@ -22,7 +22,7 @@
 .tone-red .metric-icon { color: #c94d61; background: #fcecef; }
 .filter-panel { position: relative; z-index: 3; margin-bottom: 18px; padding: 15px 17px; border: 1px solid #e0e7f1; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(40, 67, 106, .05); }
 .filter-grid { display: grid; grid-template-columns: minmax(210px, 1.4fr) 130px 110px minmax(260px, 1fr) auto auto; gap: 9px; }
-.hire-range { width: 100% !important; }
+.hire-range { width: 260px !important; }
 .archive-workspace { display: grid; grid-template-columns: 286px minmax(0, 1fr); align-items: stretch; gap: 18px; }
 .organization-panel {
   overflow: hidden;

+ 11 - 2
src/styles/views/offerNotify/index.scss

@@ -1,4 +1,13 @@
-.ele-form-actions ::v-deep .el-button,
+.ele-form-actions ::v-deep .el-button {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 12px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .offer-table ::v-deep .ele-table-tool .el-button {
   height: 28px;
   padding: 0 12px;
@@ -32,7 +41,7 @@
 }
 
 .offer-table ::v-deep .el-link + .el-link {
-  margin-left: 12px;
+  margin-left: 0;
 }
 
 .two-line strong,

+ 48 - 6
src/styles/views/positionManagement/index.scss

@@ -294,14 +294,56 @@
   overflow: visible;
   padding: 16px 16px 8px;
 }
-.table-panel .ele-form-search {
-  margin-bottom: 4px;
+.table-panel .position-filter-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  margin: 0 0 8px;
+}
+.table-panel .position-filter-form ::v-deep .el-form-item {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  height: 32px;
+}
+.table-panel .position-filter-form ::v-deep .el-form-item__label {
+  float: none;
+  width: auto !important;
+  flex: 0 0 auto;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 8px 0 0;
+}
+.table-panel .position-filter-form ::v-deep .el-form-item__content {
+  margin-left: 0 !important;
+  line-height: 32px;
+  height: 32px;
+  width: 220px;
+}
+.table-panel .position-filter-form ::v-deep .el-form-item__content .el-select,
+.table-panel .position-filter-form ::v-deep .el-form-item__content .el-input {
+  width: 100%;
+}
+.table-panel .position-filter-form ::v-deep .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+}
+.table-panel .position-filter-form ::v-deep .status-item .el-form-item__content {
+  width: 108px;
 }
 .table-panel .ele-form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-bottom: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+}
+.table-panel .ele-form-actions ::v-deep .el-button {
+  height: 32px;
+  margin: 0;
 }
 .table-toolbar {
   padding: 22px 24px 18px;

File diff suppressed because it is too large
+ 0 - 0
src/styles/views/regularizationHandling/index.scss


+ 82 - 83
src/views/hrManagement/employeeArchive/index.vue

@@ -1,89 +1,6 @@
 <template>
   <div class="ele-body" v-loading="loading">
     <el-card shadow="never" class="employee-archive-page">
-      <el-form
-        label-width="80px"
-        class="ele-form-search"
-        @keyup.enter.native="applyFilters"
-        @submit.native.prevent
-      >
-        <el-row :gutter="15">
-          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-            <el-form-item label="关键词">
-              <el-input
-                v-model.trim="filters.keyword"
-                clearable
-                placeholder="姓名 / 工号 / 手机号"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-            <el-form-item label="状态">
-              <el-select
-                v-model="filters.status"
-                clearable
-                placeholder="请选择"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in statusOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-            <el-form-item label="性别">
-              <el-select
-                v-model="filters.gender"
-                clearable
-                placeholder="请选择"
-                style="width: 100%"
-              >
-                <el-option label="男" value="男" />
-                <el-option label="女" value="女" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-            <el-form-item label="入职日期">
-              <el-date-picker
-                v-model="filters.hireRange"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                class="hire-range"
-                style="width: 100%"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-            <div class="ele-form-actions">
-              <el-button
-                type="primary"
-                icon="el-icon-search"
-                class="ele-btn-icon"
-                @click="applyFilters"
-              >
-                查询
-              </el-button>
-              <el-button
-                type="primary"
-                icon="el-icon-refresh"
-                class="ele-btn-icon"
-                @click="resetFilters"
-              >
-                重置
-              </el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-form>
-
       <section class="archive-workspace">
         <aside class="organization-panel" :class="{ collapsed: treeCollapsed }">
           <div class="panel-heading">
@@ -126,6 +43,88 @@
         </aside>
 
         <div class="table-panel">
+          <el-form
+            label-width="80px"
+            class="ele-form-search"
+            @keyup.enter.native="applyFilters"
+            @submit.native.prevent
+          >
+            <el-row :gutter="15">
+              <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+                <el-form-item label="关键词">
+                  <el-input
+                    v-model.trim="filters.keyword"
+                    clearable
+                    placeholder="姓名 / 工号 / 手机号"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+                <el-form-item label="状态">
+                  <el-select
+                    v-model="filters.status"
+                    clearable
+                    placeholder="请选择"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in statusOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+                <el-form-item label="性别">
+                  <el-select
+                    v-model="filters.gender"
+                    clearable
+                    placeholder="请选择"
+                    style="width: 100%"
+                  >
+                    <el-option label="男" value="男" />
+                    <el-option label="女" value="女" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+                <el-form-item label="入职日期">
+                  <el-date-picker
+                    v-model="filters.hireRange"
+                    type="daterange"
+                    value-format="yyyy-MM-dd"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    class="hire-range"
+                    style="width: 100%"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+                <div class="ele-form-actions">
+                  <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    class="ele-btn-icon"
+                    @click="applyFilters"
+                  >
+                    查询
+                  </el-button>
+                  <el-button
+                    type="primary"
+                    icon="el-icon-refresh"
+                    class="ele-btn-icon"
+                    @click="resetFilters"
+                  >
+                    重置
+                  </el-button>
+                </div>
+              </el-col>
+            </el-row>
+          </el-form>
           <ele-pro-table
             ref="table"
             row-key="id"

+ 0 - 2
src/views/hrManagement/qualificationCertificate/components/user-search.vue

@@ -46,9 +46,7 @@
       <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
         <el-form-item label="有效期">
           <el-date-picker
-            style="width: 100%"
             type="daterange"
-            class="ele-fluid"
             end-placeholder="结束日期"
             start-placeholder="开始日期"
             v-model.trim="where.time"

+ 4 - 3
src/views/hrManagement/regularizationHandling/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ele-body" v-loading="loading">
+  <div class="ele-body regularization-page" v-loading="loading">
     <el-card shadow="never">
       <el-form
         label-width="80px"
@@ -9,11 +9,12 @@
       >
         <el-row :gutter="15">
           <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-            <el-form-item label="姓名">
+            <el-form-item label="姓名" class="name-item">
               <el-input
                 v-model.trim="filters.keyword"
                 clearable
                 placeholder="请输入"
+                style="width: 172px"
               />
             </el-form-item>
           </el-col>
@@ -65,7 +66,7 @@
             </el-form-item>
           </el-col>
           <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-            <el-form-item label="办理状态">
+            <el-form-item label="办理状态" class="status-item">
               <el-select
                 v-model="activeStatus"
                 placeholder="请选择"

+ 34 - 56
src/views/position/positionManagement/index.vue

@@ -67,46 +67,34 @@
 
       <main class="table-panel">
         <el-form
-          label-width="70px"
-          class="ele-form-search"
+          label-width="56px"
+          class="ele-form-search position-filter-form"
           @submit.native.prevent
         >
-          <el-row :gutter="15">
-            <el-col :lg="6" :md="12">
-              <el-form-item label="关键词">
-                <el-input v-model="keyword" clearable placeholder="编码、名称、部门或技能" />
-              </el-form-item>
-            </el-col>
-            <el-col :lg="6" :md="12">
-              <el-form-item label="机构">
-                <el-select v-model="legalFilter" clearable placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item in legalEntities" :key="item.id" :label="item.name" :value="item.id" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :lg="6" :md="12">
-              <el-form-item label="部门">
-                <el-select v-model="deptFilter" clearable filterable placeholder="请选择" style="width: 100%">
-                  <el-option v-for="item in filterDepartments" :key="item.id" :label="item.name" :value="item.id" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :lg="6" :md="12">
-              <el-form-item label="状态">
-                <el-select v-model="statusFilter" clearable placeholder="请选择" style="width: 100%">
-                  <el-option label="启用" :value="1" />
-                  <el-option label="停用" :value="2" />
-                  <el-option label="待撤销" :value="3" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <div class="ele-form-actions">
-                <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="applyPositionFilters">查询</el-button>
-                <el-button type="primary" icon="el-icon-refresh" class="ele-btn-icon" @click="resetPositionFilters">重置</el-button>
-              </div>
-            </el-col>
-          </el-row>
+          <el-form-item label="关键词">
+            <el-input v-model="keyword" clearable placeholder="编码、名称、部门或技能" />
+          </el-form-item>
+          <el-form-item label="机构">
+            <el-select v-model="legalFilter" clearable placeholder="请选择">
+              <el-option v-for="item in legalEntities" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="部门">
+            <el-select v-model="deptFilter" clearable filterable placeholder="请选择">
+              <el-option v-for="item in filterDepartments" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" class="status-item">
+            <el-select v-model="statusFilter" clearable placeholder="请选择">
+              <el-option label="启用" :value="1" />
+              <el-option label="停用" :value="2" />
+              <el-option label="待撤销" :value="3" />
+            </el-select>
+          </el-form-item>
+          <div class="ele-form-actions">
+            <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="applyPositionFilters">查询</el-button>
+            <el-button type="primary" icon="el-icon-refresh" class="ele-btn-icon" @click="resetPositionFilters">重置</el-button>
+          </div>
         </el-form>
 
         <ele-pro-table ref="table" row-key="id" :columns="columns" :datasource="filteredPositions" :need-page="true"
@@ -142,29 +130,20 @@
           <template v-slot:salary="{ row }">
             <span class="salary-range">{{ money(row.salaryMin) }} - {{ money(row.salaryMax) }}</span>
           </template>
-          <template v-slot:skills="{ row }">
-            <div class="skill-tags">
-              <el-tag v-for="skill in row.skills.slice(0, 2)" :key="skill.name" size="mini" :type="skill.matchRate >= 80
-                  ? 'success'
-                  : skill.matchRate >= 60
-                    ? 'warning'
-                    : 'danger'
-                ">
-                {{ skill.name }} {{ skill.matchRate }}%
-              </el-tag>
-            </div>
-          </template>
           <template v-slot:status="{ row }">
             <el-tag size="mini" :type="statusTagType(row.status)">{{ statusName(row.status) }}</el-tag>
           </template>
           <template v-slot:action="{ row }">
-            <div @click.stop>
+            <div class="table-row-actions" @click.stop>
               <el-link type="primary" :underline="false" icon="el-icon-view" @click="selectPosition(row)">详情</el-link>
               <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row)">编辑</el-link>
               <el-link type="primary" :underline="false" icon="el-icon-time" @click="openPositionHistory(row)">变更历史</el-link>
-              <el-link type="primary" :underline="false" @click="togglePositionStatus(row)">{{
-                Number(row.status) === 1 ? "停用" : "启用"
-              }}</el-link>
+              <el-link
+                type="primary"
+                :underline="false"
+                :icon="Number(row.status) === 1 ? 'el-icon-video-pause' : 'el-icon-video-play'"
+                @click="togglePositionStatus(row)"
+              >{{ Number(row.status) === 1 ? "停用" : "启用" }}</el-link>
               <el-link
                 type="danger"
                 :underline="false"
@@ -447,8 +426,7 @@ export default {
         },
         { label: "编制占用", minWidth: 145, slot: "staffing" },
         { label: "薪资区间", minWidth: 160, slot: "salary" },
-        { label: "技能达标", minWidth: 210, slot: "skills" },
-        { prop: "updatedAt", label: "最近变更", width: 120, align: "center" },
+        { prop: "updatedAt", label: "修改时间", width: 120, align: "center" },
         {
           prop: "status",
           label: "状态",

Some files were not shown because too many files changed in this diff