整合前端
This commit is contained in:
砂糖
237
ruoyi-ui/src/views/hrm/leaveBalance/index.vue
Normal file
237
ruoyi-ui/src/views/hrm/leaveBalance/index.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="hrm-page">
|
||||
<el-card class="metal-panel" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<div class="header-left">
|
||||
<span>请假余额维护</span>
|
||||
<div class="filters">
|
||||
<el-select
|
||||
v-model="query.empId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="选择员工"
|
||||
size="mini"
|
||||
style="width: 200px"
|
||||
@change="fetchList"
|
||||
>
|
||||
<el-option
|
||||
v-for="emp in employees"
|
||||
:key="emp.empId"
|
||||
:label="`${emp.empName || emp.empNo || emp.empId}`"
|
||||
:value="emp.empId"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="query.leaveType"
|
||||
clearable
|
||||
placeholder="假期类型"
|
||||
size="mini"
|
||||
style="width: 160px"
|
||||
@change="fetchList"
|
||||
>
|
||||
<el-option label="年假" value="annual" />
|
||||
<el-option label="事假" value="personal" />
|
||||
<el-option label="病假" value="sick" />
|
||||
<el-option label="调休" value="lieu" />
|
||||
<el-option label="其他" value="other" />
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" icon="el-icon-search" @click="fetchList">查询</el-button>
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions-inline">
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" @click="openDialog()">新增/调整</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading="loading" stripe height="620">
|
||||
<el-table-column label="员工" prop="empId" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
{{ renderEmp(scope.row.empId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="假期类型" prop="leaveType" min-width="120" />
|
||||
<el-table-column label="余额(小时)" prop="balanceHours" min-width="120" />
|
||||
<el-table-column label="失效日期" prop="expireDate" min-width="140">
|
||||
<template slot-scope="scope">{{ formatDate(scope.row.expireDate, 'date') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="remark" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="openDialog(scope.row)">编辑</el-button>
|
||||
<el-button size="mini" type="text" @click="delRow(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
title="调整请假余额"
|
||||
:visible.sync="dialogVisible"
|
||||
width="480px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form :model="form" label-width="100px" size="small">
|
||||
<el-form-item label="员工" required>
|
||||
<el-select
|
||||
v-model="form.empId"
|
||||
filterable
|
||||
placeholder="选择员工"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="emp in employees"
|
||||
:key="emp.empId"
|
||||
:label="`${emp.empName || emp.empNo || emp.empId}`"
|
||||
:value="emp.empId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="假期类型" required>
|
||||
<el-select v-model="form.leaveType" placeholder="假期类型" style="width: 100%">
|
||||
<el-option label="年假" value="annual" />
|
||||
<el-option label="事假" value="personal" />
|
||||
<el-option label="病假" value="sick" />
|
||||
<el-option label="调休" value="lieu" />
|
||||
<el-option label="其他" value="other" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="余额(小时)" required>
|
||||
<el-input-number v-model="form.balanceHours" :min="0" :step="0.5" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="失效日期">
|
||||
<el-date-picker v-model="form.expireDate" type="date" placeholder="可选" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listLeaveBalance, addLeaveBalance, updateLeaveBalance, delLeaveBalance, allEmployee } from '@/api/hrm'
|
||||
|
||||
export default {
|
||||
name: 'HrmLeaveBalance',
|
||||
data() {
|
||||
return {
|
||||
query: { empId: undefined, leaveType: undefined, pageNum: 1, pageSize: 50 },
|
||||
list: [],
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
submitting: false,
|
||||
form: {},
|
||||
employees: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadEmployees()
|
||||
this.fetchList()
|
||||
},
|
||||
methods: {
|
||||
formatDate(val, mode = 'datetime') {
|
||||
if (!val) return ''
|
||||
const d = new Date(val)
|
||||
const p = n => (n < 10 ? `0${n}` : n)
|
||||
if (mode === 'date') return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`
|
||||
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
|
||||
},
|
||||
renderEmp(empId) {
|
||||
const emp = this.employees.find(e => e.empId === empId)
|
||||
return emp ? `${emp.empName || emp.empNo || emp.empId}` : empId
|
||||
},
|
||||
loadEmployees() {
|
||||
allEmployee().then(res => {
|
||||
this.employees = res || []
|
||||
})
|
||||
},
|
||||
fetchList() {
|
||||
this.loading = true
|
||||
listLeaveBalance(this.query)
|
||||
.then(res => {
|
||||
this.list = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
resetQuery() {
|
||||
this.query = { empId: undefined, leaveType: undefined, pageNum: 1, pageSize: 50 }
|
||||
this.fetchList()
|
||||
},
|
||||
openDialog(row) {
|
||||
this.dialogVisible = true
|
||||
this.form = row ? { ...row } : { balanceHours: 0 }
|
||||
},
|
||||
submit() {
|
||||
if (!this.form.empId || !this.form.leaveType) {
|
||||
this.$message.error('请选择员工和假期类型')
|
||||
return
|
||||
}
|
||||
if (this.form.balanceHours == null) {
|
||||
this.$message.error('请填写余额')
|
||||
return
|
||||
}
|
||||
this.submitting = true
|
||||
const api = this.form.balId ? updateLeaveBalance : addLeaveBalance
|
||||
api(this.form)
|
||||
.then(() => {
|
||||
this.$message.success('已保存')
|
||||
this.dialogVisible = false
|
||||
this.fetchList()
|
||||
})
|
||||
.finally(() => {
|
||||
this.submitting = false
|
||||
})
|
||||
},
|
||||
delRow(row) {
|
||||
this.$confirm('确认删除该假期余额记录吗？', '提示', { type: 'warning' }).then(() => {
|
||||
delLeaveBalance(row.balId).then(() => {
|
||||
this.$message.success('已删除')
|
||||
this.fetchList()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hrm-page {
|
||||
padding: 16px 20px 32px;
|
||||
background: #f8f9fb;
|
||||
}
|
||||
.metal-panel {
|
||||
border: 1px solid #d7d9df;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.actions-inline {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user