组别样式修改

2025-05-26 09:39:23 +08:00
parent 0ee4dd28b2
commit da9119b7e7
1 changed files with 65 additions and 183 deletions
@@ -7,28 +7,20 @@
          <div class="card-header">
            <span class="title">组别管理</span>
            <div class="header-right">
-              <el-input
-                v-model="groupSearchKeyword"
-                placeholder="请输入组别名称搜索"
-                clearable
-                @input="handleGroupSearch"
-                style="width: 200px; margin-right: 8px;"
-              >
+              <el-input v-model="groupSearchKeyword" placeholder="请输入组别名称搜索" clearable @input="handleGroupSearch"
+                style="width: 200px; margin-right: 8px;">
                <template #prefix>
-                  <el-icon><Search /></el-icon>
+                  <el-icon>
+                    <Search />
+                  </el-icon>
                </template>
              </el-input>
              <el-button type="primary" size="small" @click="handleAdd">添加组别</el-button>
            </div>
          </div>
        </template>
-        <el-table
-          :data="groupList"
-          style="width: 100%"
-          @row-click="handleGroupSelect"
-          :row-class-name="tableRowClassName"
-          height="calc(100vh - 280px)"
-        >
+        <el-table :data="groupList" style="width: 100%" @row-click="handleGroupSelect"
+          :row-class-name="tableRowClassName" height="calc(100vh - 280px)">
          <el-table-column prop="groupId" label="组别" width="100" align="center" />
          <el-table-column prop="groupName" label="组别名称" min-width="150" show-overflow-tooltip />
          <el-table-column prop="createTime" label="创建时间" width="180" align="center" show-overflow-tooltip>
@@ -38,16 +30,8 @@
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right" align="center">
            <template #default="scope">
-              <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)"
-                >编辑</el-button
-              >
-              <el-button
-                type="danger"
-                link
-                size="small"
-                @click.stop="handleDelete(scope.row)"
-                >删除</el-button
-              >
+              <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)">编辑</el-button>
+              <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -61,15 +45,12 @@
          <div class="card-header">
            <span class="title">{{ currentGroup.groupName }} - 成员管理</span>
            <div class="header-right">
-              <el-input
-                v-model="memberSearchKeyword"
-                placeholder="请输入姓名搜索"
-                clearable
-                @input="handleMemberSearch"
-                style="width: 200px; margin-right: 8px;"
-              >
+              <el-input v-model="memberSearchKeyword" placeholder="请输入姓名搜索" clearable @input="handleMemberSearch"
+                style="width: 200px; margin-right: 8px;">
                <template #prefix>
-                  <el-icon><Search /></el-icon>
+                  <el-icon>
+                    <Search />
+                  </el-icon>
                </template>
              </el-input>
              <el-button type="primary" size="small" @click="handleAddUser">添加成员</el-button>
@@ -80,27 +61,17 @@
          <div class="user-container">
            <!-- 组内人员列表 -->
            <div class="user-section">
-              <el-table 
-                :data="groupUsers" 
-                style="width: 100%" 
-                height="calc(100vh - 280px)"
-                border
-                stripe
-              >
-                <el-table-column label="头像" width="100" align="center">
+              <el-table :data="groupUsers" style="width: 100%" height="calc(100vh - 280px)" border stripe>
+                <el-table-column label="头像" align="center">
                  <template #default="scope">
                    <el-avatar :size="40" :src="scope.row.avatar" />
                  </template>
                </el-table-column>
-                <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip />
-                <el-table-column label="角色" align="center"  width="220" >
+                <el-table-column prop="name" label="姓名" show-overflow-tooltip />
+                <el-table-column label="角色" align="center">
                  <template #default="scope">
-                    <el-select
-                      v-model="scope.row.role"
-                      placeholder="选择角色"
-                      size="small"
-                      @change="(value) => handleRoleChange(scope.row, value)"
-                    >
+                    <el-select v-model="scope.row.role" placeholder="选择角色" size="small"
+                      @change="(value) => handleRoleChange(scope.row, value)">
                      <el-option label="普通员工" :value="0" />
                      <el-option label="部门主管" :value="1" />
                      <el-option label="综合部" :value="2" />
@@ -110,20 +81,8 @@
                </el-table-column>
                <el-table-column label="操作" width="220" fixed="right" align="center">
                  <template #default="scope">
-                    <el-button
-                      type="primary"
-                      link
-                      size="small"
-                      @click="handleViewSalary(scope.row)"
-                      >查看工资配置</el-button
-                    >
-                    <el-button
-                      type="danger"
-                      link
-                      size="small"
-                      @click="handleRemoveUser(scope.row)"
-                      >移除</el-button
-                    >
+                    <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)">查看工资配置</el-button>
+                    <el-button type="danger" link size="small" @click="handleRemoveUser(scope.row)">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
@@ -135,22 +94,10 @@
    </div>

    <!-- 添加/编辑组别对话框 -->
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogType === 'add' ? '添加组别' : '编辑组别'"
-      width="500px"
-    >
-      <el-form 
-        :model="groupForm" 
-        :rules="groupRules"
-        ref="groupFormRef"
-        label-width="80px"
-      >
+    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '添加组别' : '编辑组别'" width="500px">
+      <el-form :model="groupForm" :rules="groupRules" ref="groupFormRef" label-width="80px">
        <el-form-item label="组别名称" prop="groupName" required>
-          <el-input
-            v-model="groupForm.groupName"
-            placeholder="请输入组别名称"
-          />
+          <el-input v-model="groupForm.groupName" placeholder="请输入组别名称" />
        </el-form-item>
      </el-form>
      <template #footer>
@@ -162,88 +109,37 @@
    </el-dialog>

    <!-- 工资配置对话框 -->
-    <el-dialog
-      v-model="salaryDialogVisible"
-      title="工资配置"
-      width="600px"
-    >
-      <el-form 
-        :model="salaryForm" 
-        :rules="salaryRules"
-        ref="salaryFormRef"
-        label-width="140px"
-      >
+    <el-dialog v-model="salaryDialogVisible" title="工资配置" width="600px">
+      <el-form :model="salaryForm" :rules="salaryRules" ref="salaryFormRef" label-width="140px">
        <el-form-item label="基本工资" prop="baseSalary" required>
-          <el-input-number
-            v-model="salaryForm.baseSalary"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.baseSalary" :min="0" :precision="2" :step="100" style="width: 200px" />
        </el-form-item>
        <el-form-item label="总经理补贴" prop="managerAllowance" required>
-          <el-input-number
-            v-model="salaryForm.managerAllowance"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.managerAllowance" :min="0" :precision="2" :step="100"
+            style="width: 200px" />
        </el-form-item>
        <el-form-item label="交通补贴" prop="transportationAllowance" required>
-          <el-input-number
-            v-model="salaryForm.transportationAllowance"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.transportationAllowance" :min="0" :precision="2" :step="100"
+            style="width: 200px" />
        </el-form-item>
        <el-form-item label="其他补贴" prop="otherAllowance" required>
-          <el-input-number
-            v-model="salaryForm.otherAllowance"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.otherAllowance" :min="0" :precision="2" :step="100"
+            style="width: 200px" />
        </el-form-item>
        <el-form-item label="工龄工资" prop="senioritySalary" required>
-          <el-input-number
-            v-model="salaryForm.senioritySalary"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.senioritySalary" :min="0" :precision="2" :step="100"
+            style="width: 200px" />
        </el-form-item>
        <el-form-item label="年度绩效奖金" prop="annualPerformanceBonus" required>
-          <el-input-number
-            v-model="salaryForm.annualPerformanceBonus"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.annualPerformanceBonus" :min="0" :precision="2" :step="100"
+            style="width: 200px" />
        </el-form-item>
        <el-form-item label="月度绩效奖金" prop="monthlyPerformanceBonus" required>
-          <el-input-number
-            v-model="salaryForm.monthlyPerformanceBonus"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.monthlyPerformanceBonus" :min="0" :precision="2" :step="100"
+            style="width: 200px" />
        </el-form-item>
        <el-form-item label="其他奖金" prop="otherBonus" required>
-          <el-input-number
-            v-model="salaryForm.otherBonus"
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
+          <el-input-number v-model="salaryForm.otherBonus" :min="0" :precision="2" :step="100" style="width: 200px" />
        </el-form-item>
      </el-form>
      <template #footer>
@@ -255,39 +151,27 @@
    </el-dialog>

    <!-- 添加成员对话框 -->
-    <el-dialog
-      v-model="addUserDialogVisible"
-      title="添加成员"
-      width="800px"
-    >
+    <el-dialog v-model="addUserDialogVisible" title="添加成员" width="800px">
      <div class="dialog-header">
        <div class="left">
          <el-button type="primary" @click="handleSyncUsers">
-            <el-icon><Refresh /></el-icon>
+            <el-icon>
+              <Refresh />
+            </el-icon>
            同步钉钉成员
          </el-button>
        </div>
        <div class="right">
-          <el-input
-            v-model="searchKeyword"
-            placeholder="请输入姓名搜索"
-            clearable
-            @input="handleSearch"
-            style="width: 200px"
-          >
+          <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch" style="width: 200px">
            <template #prefix>
-              <el-icon><Search /></el-icon>
+              <el-icon>
+                <Search />
+              </el-icon>
            </template>
          </el-input>
        </div>
      </div>
-      <el-table
-        :data="nonGroupUsers"
-        style="width: 100%"
-        height="400px"
-        border
-        stripe
-      >
+      <el-table :data="nonGroupUsers" style="width: 100%" height="400px" border stripe>
        <el-table-column label="头像" width="80" align="center">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
@@ -296,13 +180,10 @@
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column label="操作" width="100" fixed="right" align="center">
          <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              size="small"
-              @click="handleAddToGroup(scope.row)"
-            >
-              <el-icon><Plus /></el-icon>
+            <el-button type="primary" link size="small" @click="handleAddToGroup(scope.row)">
+              <el-icon>
+                <Plus />
+              </el-icon>
              添加
            </el-button>
          </template>
@@ -637,6 +518,7 @@ const tableRowClassName = ({ row }) => {
 // 打开添加成员对话框
 const handleAddUser = async () => {
  addUserDialogVisible.value = true;
+  searchKeyword.value = ""
  await fetchNonGroupUsers();
 };