组别样式修改

src/views/groupManagement/index.vue

@@ -7,28 +7,20 @@
           <div class="card-header">
             <span class="title">组别管理</span>
             <div class="header-right">
-              <el-input
+              <el-input v-model="groupSearchKeyword" placeholder="请输入组别名称搜索" clearable @input="handleGroupSearch"
-                v-model="groupSearchKeyword"
+                style="width: 200px; margin-right: 8px;">
-                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
+        <el-table :data="groupList" style="width: 100%" @row-click="handleGroupSelect"
-          :data="groupList"
+          :row-class-name="tableRowClassName" height="calc(100vh - 280px)">
-          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 type="primary" link size="small" @click.stop="handleEdit(scope.row)">编辑</el-button>
-                >编辑</el-button
+              <el-button type="danger" link size="small" @click.stop="handleDelete(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
+              <el-input v-model="memberSearchKeyword" placeholder="请输入姓名搜索" clearable @input="handleMemberSearch"
-                v-model="memberSearchKeyword"
+                style="width: 200px; margin-right: 8px;">
-                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 
+              <el-table :data="groupUsers" style="width: 100%" height="calc(100vh - 280px)" border stripe>
-                :data="groupUsers" 
+                <el-table-column label="头像" align="center">
-                style="width: 100%" 
-                height="calc(100vh - 280px)"
-                border
-                stripe
-              >
-                <el-table-column label="头像" width="100" 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 prop="name" label="姓名" show-overflow-tooltip />
-                <el-table-column label="角色" align="center"  width="220" >
+                <el-table-column label="角色" align="center">
                   <template #default="scope">
-                    <el-select
+                    <el-select v-model="scope.row.role" placeholder="选择角色" size="small"
-                      v-model="scope.row.role"
+                      @change="(value) => handleRoleChange(scope.row, value)">
-                      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
+                    <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)">查看工资配置</el-button>
-                      type="primary"
+                    <el-button type="danger" link size="small" @click="handleRemoveUser(scope.row)">移除</el-button>
-                      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
+    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '添加组别' : '编辑组别'" width="500px">
-      v-model="dialogVisible"
+      <el-form :model="groupForm" :rules="groupRules" ref="groupFormRef" label-width="80px">
-      :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
+          <el-input v-model="groupForm.groupName" placeholder="请输入组别名称" />
-            v-model="groupForm.groupName"
-            placeholder="请输入组别名称"
-          />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -162,88 +109,37 @@
     </el-dialog>
 
     <!-- 工资配置对话框 -->
-    <el-dialog
+    <el-dialog v-model="salaryDialogVisible" title="工资配置" width="600px">
-      v-model="salaryDialogVisible"
+      <el-form :model="salaryForm" :rules="salaryRules" ref="salaryFormRef" label-width="140px">
-      title="工资配置"
-      width="600px"
-    >
-      <el-form 
-        :model="salaryForm" 
-        :rules="salaryRules"
-        ref="salaryFormRef"
-        label-width="140px"
-      >
         <el-form-item label="基本工资" prop="baseSalary" required>
-          <el-input-number
+          <el-input-number v-model="salaryForm.baseSalary" :min="0" :precision="2" :step="100" style="width: 200px" />
-            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
+          <el-input-number v-model="salaryForm.managerAllowance" :min="0" :precision="2" :step="100"
-            v-model="salaryForm.managerAllowance"
+            style="width: 200px" />
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
         </el-form-item>
         <el-form-item label="交通补贴" prop="transportationAllowance" required>
-          <el-input-number
+          <el-input-number v-model="salaryForm.transportationAllowance" :min="0" :precision="2" :step="100"
-            v-model="salaryForm.transportationAllowance"
+            style="width: 200px" />
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
         </el-form-item>
         <el-form-item label="其他补贴" prop="otherAllowance" required>
-          <el-input-number
+          <el-input-number v-model="salaryForm.otherAllowance" :min="0" :precision="2" :step="100"
-            v-model="salaryForm.otherAllowance"
+            style="width: 200px" />
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
         </el-form-item>
         <el-form-item label="工龄工资" prop="senioritySalary" required>
-          <el-input-number
+          <el-input-number v-model="salaryForm.senioritySalary" :min="0" :precision="2" :step="100"
-            v-model="salaryForm.senioritySalary"
+            style="width: 200px" />
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
         </el-form-item>
         <el-form-item label="年度绩效奖金" prop="annualPerformanceBonus" required>
-          <el-input-number
+          <el-input-number v-model="salaryForm.annualPerformanceBonus" :min="0" :precision="2" :step="100"
-            v-model="salaryForm.annualPerformanceBonus"
+            style="width: 200px" />
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
         </el-form-item>
         <el-form-item label="月度绩效奖金" prop="monthlyPerformanceBonus" required>
-          <el-input-number
+          <el-input-number v-model="salaryForm.monthlyPerformanceBonus" :min="0" :precision="2" :step="100"
-            v-model="salaryForm.monthlyPerformanceBonus"
+            style="width: 200px" />
-            :min="0"
-            :precision="2"
-            :step="100"
-            style="width: 200px"
-          />
         </el-form-item>
         <el-form-item label="其他奖金" prop="otherBonus" required>
-          <el-input-number
+          <el-input-number v-model="salaryForm.otherBonus" :min="0" :precision="2" :step="100" style="width: 200px" />
-            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
+    <el-dialog v-model="addUserDialogVisible" title="添加成员" width="800px">
-      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
+          <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch" style="width: 200px">
-            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
+      <el-table :data="nonGroupUsers" style="width: 100%" height="400px" border stripe>
-        :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
+            <el-button type="primary" link size="small" @click="handleAddToGroup(scope.row)">
-              type="primary"
+              <el-icon>
-              link
+                <Plus />
-              size="small"
+              </el-icon>
-              @click="handleAddToGroup(scope.row)"
-            >
-              <el-icon><Plus /></el-icon>
               添加
             </el-button>
           </template>
@@ -428,7 +309,7 @@ const handleGroupSearch = () => {
     groupList.value = originalGroupList.value;
     return;
   }
-  groupList.value = originalGroupList.value.filter(group => 
+  groupList.value = originalGroupList.value.filter(group =>
     group.groupName.toLowerCase().includes(groupSearchKeyword.value.toLowerCase())
   );
 };
@@ -458,7 +339,7 @@ const handleMemberSearch = () => {
     groupUsers.value = originalGroupUsers.value;
     return;
   }
-  groupUsers.value = originalGroupUsers.value.filter(user => 
+  groupUsers.value = originalGroupUsers.value.filter(user =>
     user.name.toLowerCase().includes(memberSearchKeyword.value.toLowerCase())
   );
 };
@@ -537,7 +418,7 @@ const handleDelete = (row) => {
 // 提交表单
 const handleSubmit = async () => {
   if (!groupFormRef.value) return;
-  
+
   await groupFormRef.value.validate(async (valid) => {
     if (valid) {
       try {
@@ -596,7 +477,7 @@ const handleViewSalary = async (user) => {
 // 提交工资配置
 const handleSalarySubmit = async () => {
   if (!salaryFormRef.value) return;
-  
+
   await salaryFormRef.value.validate(async (valid) => {
     if (valid) {
       try {
@@ -637,6 +518,7 @@ const tableRowClassName = ({ row }) => {
 // 打开添加成员对话框
 const handleAddUser = async () => {
   addUserDialogVisible.value = true;
+  searchKeyword.value = ""
   await fetchNonGroupUsers();
 };
 
@@ -688,7 +570,7 @@ const handleSearch = () => {
     fetchNonGroupUsers();
     return;
   }
-  nonGroupUsers.value = nonGroupUsers.value.filter(user => 
+  nonGroupUsers.value = nonGroupUsers.value.filter(user =>
     user.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
   );
 };
@@ -729,7 +611,7 @@ onMounted(() => {
 
     :deep(.el-table) {
       flex: 1;
-      
+
       .el-table__body-wrapper {
         height: 100%;
       }
@@ -776,7 +658,7 @@ onMounted(() => {
 
     :deep(.el-table) {
       flex: 1;
-      
+
       .el-table__body-wrapper {
         height: 100%;
       }
@@ -853,7 +735,7 @@ onMounted(() => {
   .el-button {
     padding: 4px 8px;
   }
-  
+
   .el-select {
     width: 120px;
   }
@@ -895,11 +777,11 @@ onMounted(() => {
 
 :deep(.el-input__wrapper) {
   box-shadow: 0 0 0 1px var(--el-border-color) inset;
-  
+
   &:hover {
     box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
   }
-  
+
   &.is-focus {
     box-shadow: 0 0 0 1px var(--el-color-primary) inset;
   }