hzd/salaryAccountingBackend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

组别样式修改

Browse Source
This commit is contained in:
1147680382@qq.com
2025-05-26 09:39:23 +08:00
parent 0ee4dd28b2
commit da9119b7e7
1 changed files with 65 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/groupManagement/index.vue
+65 -183
View File
@@ -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>
@@ -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;
}