gz-att-web/src/views/setting/rules/index.vue

580 lines
21 KiB
Vue
Raw Normal View History

2024-10-10 14:05:31 +08:00
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="groupName">
<el-input
v-model="queryParams.groupName"
placeholder="请输入名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="部门名称" prop="orgName">
<el-input
v-model="queryParams.orgName"
placeholder="请输入部门名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
2024-10-18 10:41:05 +08:00
v-hasPermi="['att:group:add']"
2024-10-10 14:05:31 +08:00
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
2024-10-18 10:41:05 +08:00
2024-10-10 14:05:31 +08:00
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
2024-10-14 11:19:01 +08:00
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="序号" align="center" width="80" type="index">
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
2024-10-10 14:05:31 +08:00
<el-table-column label="名称" align="center" prop="groupName" />
<el-table-column label="考勤时间" align="center" prop="attDay" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>每周</span>
<span v-if="scope.row.attDay.split(',')[0]==1"></span>
<span v-if="scope.row.attDay.split(',')[1]==1"></span>
<span v-if="scope.row.attDay.split(',')[2]==1"></span>
<span v-if="scope.row.attDay.split(',')[3]==1"></span>
<span v-if="scope.row.attDay.split(',')[4]==1"></span>
<span v-if="scope.row.attDay.split(',')[5]==1"></span>
<span v-if="scope.row.attDay.split(',')[6]==1"></span>
</template>
</el-table-column>
<el-table-column label="上班时间" align="center" prop="toWorkTime" :show-overflow-tooltip="true" />
<el-table-column label="下班时间" align="center" prop="offWorkTime" :show-overflow-tooltip="true" />
<!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column> -->
2024-10-16 15:09:57 +08:00
<el-table-column label="操作" align="center">
2024-10-10 14:05:31 +08:00
<template slot-scope="scope">
<el-button
size="mini"
2024-10-16 15:09:57 +08:00
type="primary"
2024-10-18 10:41:05 +08:00
v-hasPermi="['att:group:edit']"
2024-10-10 14:05:31 +08:00
@click="handleUpdate(scope.row)"
>编辑</el-button>
<el-button
size="mini"
2024-10-16 15:09:57 +08:00
type="danger"
2024-10-18 10:41:05 +08:00
v-hasPermi="['att:group:remove']"
2024-10-10 14:05:31 +08:00
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改参数配置对话框 -->
2024-10-10 18:23:28 +08:00
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
2024-10-10 14:05:31 +08:00
<el-row>
<el-col :span="12">
2024-10-10 18:23:28 +08:00
<el-form-item label="考勤组名称:" prop="groupName">
2024-10-10 14:05:31 +08:00
<el-input v-model="form.groupName" placeholder="请输入考勤组名称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
2024-10-10 18:23:28 +08:00
<el-form-item label="参与考勤人员:" prop="checkList">
2024-10-22 18:50:14 +08:00
<treeselect v-model="form.checkList" :multiple="true" :flat="false" :options="personOptions" :normalizer="normalizer" placeholder="选择部门和人员" @input="handleSelect"/>
2024-10-10 14:05:31 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
2024-10-10 18:23:28 +08:00
<el-form-item label="考勤类型:" prop="attType">
2024-10-10 14:05:31 +08:00
<el-radio-group v-model="form.attType" @change="changeRadio">
<el-radio
v-for="dict in typeList"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
2024-10-10 18:23:28 +08:00
<el-form-item label="考勤时间:" prop="attDays">
2024-10-10 14:05:31 +08:00
<el-checkbox-group v-model="form.attDays">
<el-checkbox v-for="item in attDayList" :key="item.id"
:label="item.id">{{item.label}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
2024-10-10 18:23:28 +08:00
<el-row v-if="form.attType==1">
2024-10-10 14:05:31 +08:00
<el-col :span="12">
2024-10-10 18:23:28 +08:00
<el-form-item label="上班时间:" prop="toWorkTime">
2024-10-10 14:05:31 +08:00
<el-time-select
v-model="form.toWorkTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '23:59'
}"
placeholder="选择时间">
</el-time-select>
</el-form-item>
</el-col>
<el-col :span="12">
2024-10-10 18:23:28 +08:00
<el-form-item label="下班时间:" prop="offWorkTime">
2024-10-10 14:05:31 +08:00
<el-time-select
v-model="form.offWorkTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '23:59'
}"
placeholder="选择时间">
</el-time-select>
</el-form-item>
</el-col>
</el-row>
2024-10-10 18:23:28 +08:00
<el-row v-if="form.attType==1">
<el-col :span="10">
<el-form-item label="迟到、早退设置:" prop="lateMinute">
迟到<el-input v-model.number="form.lateMinute" maxlength="4" style="width: 100px;"/>分钟不计迟到,
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" label-width="0" prop="leaveMinute">
早退<el-input v-model.number="form.leaveMinute" maxlength="4" style="width: 100px;"/>分钟不计早退
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.attType==1">
<el-col :span="10">
<el-form-item label="旷工设置:" prop="absenteeismLateMinute">
迟到<el-input v-model.number="form.absenteeismLateMinute" maxlength="4" style="width: 100px;"/>分钟即为旷工,
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" label-width="0" prop="absenteeismLeaveMinute">
早退<el-input v-model.number="form.absenteeismLeaveMinute" maxlength="4" style="width: 100px;"/>分钟即为旷工
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.attType==1">
2024-10-10 14:05:31 +08:00
<el-col :span="24">
2024-10-10 18:23:28 +08:00
<el-form-item label="出入异常设置:" prop="entryAbnormalMinute">
<el-input v-model.number="form.entryAbnormalMinute" maxlength="4" style="width: 100px;"/>分钟内连续打卡进出即为出入异常
2024-10-10 14:05:31 +08:00
</el-form-item>
</el-col>
</el-row>
2024-10-10 18:23:28 +08:00
<el-row v-if="form.attType==2">
<el-col :span="8">
<el-form-item label="每天打卡:" prop="todayClockNum">
<el-input v-model.number="form.todayClockNum" maxlength="1" style="width: 100px;" @input="clockNum"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="应出勤时长:" prop="attendanceDuration">
<el-input v-model.number="form.attendanceDuration" maxlength="4" style="width: 100px;"/>分钟
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.todayClockNum==2">
2024-10-10 14:05:31 +08:00
<el-col :span="24">
2024-10-10 18:23:28 +08:00
<el-form-item label="实际出勤不满足:" prop="absenteeismLateMinute">
<el-input v-model.number="form.absenteeismLateMinute" maxlength="4" style="width: 100px;"/>分钟记录为早退 <span>早退时长=应出勤时长-实际出勤时长</span>
2024-10-10 14:05:31 +08:00
</el-form-item>
</el-col>
</el-row>
2024-10-10 18:23:28 +08:00
<el-row v-if="form.todayClockNum==2">
2024-10-10 14:05:31 +08:00
<el-col :span="24">
2024-10-10 18:23:28 +08:00
<el-form-item label="实际出勤不满足:" prop="absenteeismLeaveMinute">
<el-input v-model.number="form.absenteeismLeaveMinute" maxlength="4" style="width: 100px;"/>分钟记录为旷工 <span>旷工时长=应出勤时长-实际出勤时长</span>
2024-10-10 14:05:31 +08:00
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listAttGroup,getAttGroup,delAttGroup,addAttGroup,updateAttGroup,selectOrgList } from "@/api/setting/rules";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "rules",
dicts: ['sys_normal_disable'],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
userList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
groupName: undefined,
orgName: undefined
},
2024-10-22 18:50:14 +08:00
allCheckList:[],
2024-10-10 14:05:31 +08:00
personOptions:[],
2024-10-10 18:23:28 +08:00
typeList:[{value:'1',label:'固定班制'},{value:'2',label:'自由工时'}],
2024-10-10 14:05:31 +08:00
attDayList:[{id:0,label:'周一'},{id:1,label:'周二'},{id:2,label:'周三'},{id:3,label:'周四'},{id:4,label:'周五'},{id:5,label:'周六'},{id:6,label:'周日'}],
// 表单参数
form: {},
// 表单校验
rules: {
groupName: [
{ required: true, message: "名称不能为空", trigger: "blur" }
],
attDays: [
{ required: true, message: "考勤时间不能为空", trigger: "blur" }
],
2024-10-10 18:23:28 +08:00
checkList: [
2024-10-16 18:54:28 +08:00
{ required: true, message: "考勤人员不能为空", trigger: "change" }
2024-10-10 18:23:28 +08:00
],
2024-10-10 14:05:31 +08:00
toWorkTime: [
{ required: true, message: "上班时间不能为空", trigger: "blur" }
],
offWorkTime: [
{ required: true, message: "下班时间不能为空", trigger: "blur" }
2024-10-10 18:23:28 +08:00
],
lateMinute: [
{ required: true, message: "时间不能为空", trigger: "blur" },
{ type: 'number', message: '必须为数字值', trigger: 'change' },
],
leaveMinute: [
{ required: true, message: "时间不能为空", trigger: "blur" },
{ type: 'number', message: '必须为数字值', trigger: 'change' },
],
absenteeismLateMinute: [
{ required: true, message: "时间不能为空", trigger: "blur" },
{ type: 'number', message: '必须为数字值', trigger: 'change' },
],
absenteeismLeaveMinute: [
{ required: true, message: "时间不能为空", trigger: "blur" },
{ type: 'number', message: '必须为数字值', trigger: 'change' },
],
entryAbnormalMinute: [
{ required: true, message: "出入异常时间不能为空", trigger: "blur" },
{ type: 'number', message: '必须为数字值', trigger: 'change' },
],
todayClockNum: [
{ required: true, message: "每天打卡次数不能为空", trigger: "change" },
{
pattern: /^[1|2]\d{0}$/,
message: "每天打卡次数必须为 1 或 2",
trigger: "change"
}
],
attendanceDuration: [
{ required: true, message: "应出勤时长不能为空", trigger: "blur" },
{ type: 'number', message: '必须为数字值', trigger: 'change' },
2024-10-10 14:05:31 +08:00
]
}
};
},
created() {
2024-10-10 14:05:31 +08:00
this.getList();
},
methods: {
selectOrgList() {
2024-10-10 14:05:31 +08:00
selectOrgList().then(res => {
console.log(res)
this.personOptions=this.changeData(res.data);
// // this.personOptions = this.handleTree(response.data, "id");
// console.log(this.personOptions)
}
);
},
//数据操作
changeData(data) { // 存在子集就不让禁止,父级让禁止
data.map(item => {
2024-10-22 18:50:14 +08:00
// if(item.children.length == 0&&item.disabled&&!item.isChecked){
// item.isDisabled = true
// }else{
// item.isDisabled = false
// }
if (item.disabled) {
if (item.isChecked) {
item.isDisabled = false
}else{
item.isDisabled = true
}
} else if (!item.disabled){
2024-10-10 14:05:31 +08:00
item.isDisabled = false
}
item.children && item.children.length > 0 && this.changeData(item.children);
})
return data;
},
handleSelect(value, instanceId) {
console.log('Selected:', value);
2024-10-22 18:50:14 +08:00
// value.forEach(item=>{
// if(item.indexOf("|")<0){
// console.log(item)
// this.checkChild(item)
// }
// })
2024-10-10 14:05:31 +08:00
},
2024-10-22 18:50:14 +08:00
2024-10-10 14:05:31 +08:00
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.name,
// isDisabled: node.disabled,
2024-10-10 14:05:31 +08:00
children: node.children
};
},
changeRadio(v){
console.log(v)
if(v==1){
2024-10-10 18:23:28 +08:00
this.form.attDays = [0,1,2,3,4];
this.form.toWorkTime="08:30:00";
this.form.offWorkTime="17:30:00";
this.form.lateMinute= undefined;//迟到分钟
this.form.leaveMinute= undefined;//早退分钟
this.form.todayClockNum=undefined;
2024-10-10 18:23:28 +08:00
this.form.absenteeismLateMinute= undefined;//旷工迟到分钟
this.form.absenteeismLeaveMinute= undefined;//旷工早退分钟
this.form.entryAbnormalMinute= undefined;//出入异常时间
}
if(v==2){
2024-10-10 18:23:28 +08:00
this.form.attDays = [0,1,2,3,4,5,6];
this.form.todayClockNum=1;
this.form.attendanceDuration=360;
this.form.absenteeismLateMinute= undefined;//旷工迟到分钟
this.form.absenteeismLeaveMinute= undefined;//旷工早退分钟
}
},
clockNum(v){
if(v==1){
}
if(v==2){
}
2024-10-10 14:05:31 +08:00
},
/** 查询列表 */
getList() {
this.loading = true;
listAttGroup(this.queryParams).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
groupName: undefined,
2024-10-10 18:23:28 +08:00
attType: "1",
2024-10-10 14:05:31 +08:00
checkList: [],
attDays: [0,1,2,3,4],
attDay: undefined,
toWorkTime:"08:30:00",
offWorkTime:"17:30:00",
lateMinute: undefined,//迟到分钟
leaveMinute: undefined,//早退分钟
absenteeismLateMinute: undefined,//旷工迟到分钟
absenteeismLeaveMinute: undefined,//旷工早退分钟
entryAbnormalMinute: undefined,//出入异常时间
todayClockNum: undefined,
attendanceDuration: undefined,
2024-10-10 14:05:31 +08:00
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.selectOrgList();
2024-10-10 14:05:31 +08:00
this.reset();
this.open = true;
this.title = "新增";
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.groupId)
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const groupId = row.groupId
2024-10-10 14:05:31 +08:00
getAttGroup(groupId).then(response => {
this.form = response.data;
let arr=[]
this.form.attDay.split(",").forEach((item,index)=>{
if(item=='1'){
arr.push(index)
}
})
this.$set(this.form,"attDays",arr)
this.personOptions = this.changeData(this.form.treeList);
this.form.checkList=[]
this.setCheck(this.form.treeList)
// console.log(this.form)
2024-10-10 14:05:31 +08:00
this.open = true;
this.title = "编辑";
});
},
setCheck(data) { // 存在子集就不让禁止,父级让禁止
data.map(item => {
if (item.isChecked) {
this.form.checkList.push(item.id)
}
item.children && item.children.length > 0 && this.setCheck(item.children);
})
},
2024-10-10 14:05:31 +08:00
/** 提交按钮 */
submitForm: function() {
console.log(this.form)
this.$refs["form"].validate(valid => {
if (valid) {
let arr=[0,0,0,0,0,0,0]
this.form.attDays.forEach(item=>{arr[item]=1})
this.form.attDay=arr.join(",")
2024-10-10 18:23:28 +08:00
let arr2 = []
this.form.checkList.forEach(item=>{
let obj={
orgId:item.split('|')[1],
userId:item.split('|')[0]
}
arr2.push(obj)
})
this.form.checkOrgList=arr2;
2024-10-10 14:05:31 +08:00
console.log(this.form)
2024-10-10 18:23:28 +08:00
if (this.form.groupId != undefined) {
this.form.checkOrgList.forEach(item=>{
item.groupId=this.form.groupId
})
2024-10-10 18:23:28 +08:00
updateAttGroup(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addAttGroup(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
2024-10-10 14:05:31 +08:00
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const groupIds = row.groupId || this.ids;
2024-10-22 15:34:01 +08:00
this.$modal.confirm('是否确认删除该数据项?').then(function() {
2024-10-10 14:05:31 +08:00
return delAttGroup(groupIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
2024-10-18 10:41:05 +08:00
// this.download('system/dict/type/export', {
// ...this.queryParams
// }, `type_${new Date().getTime()}.xlsx`)
2024-10-10 14:05:31 +08:00
},
}
};
2024-10-22 18:50:14 +08:00
</script>
<style lang="scss" scoped>
::v-deep .vue-treeselect__value-container{
overflow-y: auto!important;
max-height: 120px!important;
}
</style>