<template>
|
<div>
|
<h5 class="font-weight-bold pt-2 mt-2 pl30">
|
<router-link to="/">
|
<i class="ion ion-ios-arrow-dropleft f20 pr5 text-dark"></i>
|
<span class="text-muted font-weight-light">考勤管理 /</span>
|
</router-link>考勤规则
|
</h5>
|
<div class="bg-white ml20 mr20">
|
<b-card class="mt20" style="height:75vh;overflow:auto;">
|
<!-- <h4 class="font-weight-bold py-2 mb-2 mt30 ml30">
|
<router-link to="/">
|
<span class="text-muted font-weight-light">考勤管理 /</span>
|
</router-link>
|
考勤报表
|
</h4>-->
|
<div class="text-center">
|
<el-form
|
ref="formDate"
|
:model="formDate"
|
:rules="rulers"
|
class="myForm"
|
label-width="80px"
|
style="width:600px;margin:10px auto;background:#fff;text-align:left"
|
>
|
<div class="py-2 px-3">
|
<el-checkbox v-model="formDate.enable" :xl="1" :sm="4">
|
<span style="font-size:15px;font-weight:900;">启用考勤规则</span>
|
</el-checkbox>
|
</div>
|
<el-form-item class="mt20">
|
<a :xl="1" :sm="4">打卡记录时间</a>
|
<br>
|
<TimePicker
|
is-range
|
v-model="formDate.punchTime"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
placeholder="选择时间范围"
|
:picker-options="{selectableRange: '00:00:00 - 23:00:00'}"
|
value-format="HH:mm"
|
format="HH:mm"
|
:clearable="false"
|
></TimePicker>
|
</el-form-item>
|
<div>
|
<hr class="border-light" style="margin-top:40px;width:75%">
|
</div>
|
|
<el-form-item prop="inTimeMin">
|
<a>上班时间</a>
|
<br>
|
<TimePicker
|
class="timeSelect"
|
v-model="formDate.inTime"
|
:picker-options="{selectableRange: '00:00:00 - 23:59:00'}"
|
value-format="HH:mm"
|
format="HH:mm"
|
:clearable="false"
|
></TimePicker>上班
|
<el-input
|
:xl="2"
|
v-model.number="formDate.inTimeMin"
|
:clearable="false"
|
style="width:60px"
|
></el-input>多少分钟后记为迟到
|
</el-form-item>
|
|
<el-form-item prop="outTimeMin">
|
<a>下班时间</a>
|
<br>
|
<TimePicker
|
class="timeSelect"
|
v-model="formDate.outTime"
|
:picker-options="{selectableRange: '00:00:00 - 23:59:00'}"
|
value-format="HH:mm"
|
format="HH:mm"
|
:clearable="false"
|
></TimePicker>下班
|
<el-input v-model.number="formDate.outTimeMin" :clearable="false" style="width:60px"></el-input>多少分钟前记为早退
|
</el-form-item>
|
<el-form-item size="mini">
|
通知方式：
|
<el-checkbox style="margin-left:5px" v-model="formDate.isNoticeApp">App</el-checkbox>
|
</el-form-item>
|
<el-form-item>
|
考勤设备：
|
<!-- <div>
|
<span
|
class="px-2"
|
v-for="(iteam,index) in deviceList"
|
:key="index"
|
>{{iteam?iteam.name:''}}</span>
|
</div>
|
<div class="flex-box">
|
<b-button
|
variant="primary"
|
class
|
size="sm"
|
@click="$refs.OrgTreeModel.showModel()"
|
>{{deviceList.length>0?'编辑摄像机':'选择摄像机'}}</b-button>
|
</div>-->
|
<select-org-tree
|
ref="tree"
|
:data="treeData"
|
:isOpenAll="false"
|
:highlightCurrent="false"
|
:showCheckbox="true"
|
:condition="{key:'type',value:'4'}"
|
:defaultIds="deviceIds"
|
@hide-change="selectTree"
|
/>
|
</el-form-item>
|
<el-form-item style="text-align:center;margin-top:50px" label-width="0px">
|
<ladda-btn
|
:loading="saveLoading"
|
@click.native="saveRuler"
|
data-style="slide-down"
|
class="btn btn-primary border-radius-25"
|
>保存设置</ladda-btn>
|
<b-btn
|
class="border-radius-25"
|
variant="default"
|
@click="$router.push({path:'/'})"
|
>取消设置</b-btn>
|
</el-form-item>
|
</el-form>
|
<org-tree-model
|
:treeData="treeData"
|
ref="OrgTreeModel"
|
:item="currentItem"
|
@submit="selectTree"
|
:isShowFooter="false"
|
/>
|
</div>
|
<el-row :xs="4"></el-row>
|
</b-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapActions, mapState } from 'vuex'
|
import OrgTreeModel from './component/OrgTreeModel'
|
import LaddaBtn from '@/vendor/libs/ladda/Ladda'
|
import {
|
getAttendanceRuler,
|
addAttendRuler,
|
updateRuler
|
} from '@/server/ruler.js'
|
import { addSet } from '@/server/models/Attend.js'
|
import {
|
Form,
|
FormItem,
|
TimePicker,
|
Input,
|
Checkbox,
|
Button,
|
Row,
|
Col
|
} from 'element-ui'
|
import selectOrgTree from '../Home/components/SelectOrgTree'
|
export default {
|
data() {
|
return {
|
formDate: {
|
id: '',
|
punchTime: [],
|
recordBegin: '',
|
recordEnd: '',
|
inTime: new Date(),
|
outTime: new Date(),
|
inTimeMin: '',
|
outTimeMin: '',
|
isNoticeApp: false,
|
enable: false
|
},
|
rulers: {
|
inTimeMin: [
|
{
|
required: true,
|
message: '迟到判断时间不能为空！',
|
trigger: 'blur'
|
},
|
{ type: 'number', message: '迟到判断时间必须为数字值' }
|
],
|
outTimeMin: [
|
{
|
required: true,
|
message: '早退判断时间不能为空！',
|
trigger: 'blur'
|
},
|
{ type: 'number', message: '早退判断时间必须为数字值' }
|
]
|
},
|
saveLoading: false,
|
isUse: false,
|
currentItem: {},
|
deviceList: [],
|
deviceIds: []
|
}
|
},
|
computed: {
|
...mapState({ treeData: 'dictDevicTree' })
|
},
|
methods: {
|
...mapActions(['_initDevicDict']),
|
async saveSet(evt) {
|
evt.preventDefault()
|
this.$refs['formDate'].validate(valid => {
|
if (valid) {
|
let json = this.formDate
|
json.authorizationSystem = ',' + json.authorizationSystem + ','
|
this.saveLoading = true
|
|
if (this.$route.query.id && this.$route.query.id !== '') {
|
json.id = this.$route.query.id
|
this.updateSet(json)
|
} else {
|
// 添加
|
this.addSet(json)
|
}
|
} else {
|
console.log('aa')
|
this.$toast({
|
type: 'error',
|
message: '保存失败！'
|
})
|
return false
|
}
|
})
|
},
|
async addSet(json) {
|
let res = await addSet(json)
|
this.saveLoading = false
|
if (res && res.success) {
|
if (res.data) {
|
this.$toast({
|
type: res.data.success ? 'success' : 'warning',
|
message: res.data.message ? res.data.message : '操作失败'
|
})
|
}
|
this.$router.push({ path: '/' })
|
} else if (res) {
|
this.$toast({
|
type: 'error',
|
message: res.msg ? res.msg : '操作失败'
|
})
|
}
|
},
|
cancelSet() {
|
// console.log('cancel!')
|
},
|
async queryRuler() {
|
let result = await getAttendanceRuler()
|
console.log(result, '考勤规则')
|
// 年月日的拼接字符串
|
// let t = this.$moment(new Date()).format('YYYY-MM-DD').toString()
|
if (result && result.data) {
|
this.formDate.inTimeMin = result.data.inTimeMin
|
this.formDate.punchTime = [
|
result.data.recordBegin,
|
result.data.recordEnd
|
]
|
this.formDate.id = result.data.id
|
this.formDate.inTime = result.data.inTime
|
this.formDate.outTime = result.data.outTime
|
this.formDate.outTimeMin = result.data.outTimeMin
|
this.formDate.isNoticeApp = result.data.isNoticeApp === 1
|
this.formDate.enable = result.data.enable === 1
|
|
this.deviceIds = result.data.deviceIds.split(',')
|
setTimeout(() => {
|
this.$refs.tree.initVal(this.deviceIds, this.treeData)
|
}, 500)
|
} else if (result && result.message) {
|
this.$toast({
|
message: result.message ? result.message : '报错了',
|
type: 'error'
|
})
|
}
|
},
|
async addAttendRuler(json) {
|
let res
|
if (this.formDate.id !== null && this.formDate.id !== '') {
|
res = await updateRuler(json)
|
} else {
|
res = await addAttendRuler(json)
|
}
|
this.saveLoading = false
|
console.log(res, 'res')
|
this.$toast({
|
type: res.code === 200 ? 'success' : 'error',
|
message: res.msg ? res.msg : '操作失败'
|
})
|
if (res && res.code === 200) {
|
this.$router.push({ path: '/' })
|
}
|
this.queryRuler()
|
},
|
saveRuler(evt) {
|
evt.preventDefault()
|
if (this.formDate.isNoticeApp === true) {
|
this.formDate.isNoticeApp = 1
|
} else {
|
this.formDate.isNoticeApp = 0
|
}
|
if (this.formDate.enable === true) {
|
this.formDate.enable = 1
|
} else {
|
this.formDate.enable = 0
|
}
|
if (this.formDate.punchTime.length > 0) {
|
this.formDate.recordBegin = this.formDate.punchTime[0]
|
this.formDate.recordEnd = this.formDate.punchTime[1]
|
} else {
|
this.formDate.recordBegin = ''
|
this.formDate.recordEnd = ''
|
}
|
|
let json = {
|
// orgId: this.userInfo.orgId,
|
deviceIds: this.deviceIds.join(','),
|
...this.formDate
|
}
|
this.$refs['formDate'].validate(valid => {
|
if (valid) {
|
this.addAttendRuler(json)
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '保存失败'
|
})
|
return false
|
}
|
})
|
},
|
selectTree({ list, ids }) {
|
console.log(list, ids, 'list, ids')
|
this.deviceIds = ids
|
this.deviceList = list
|
}
|
},
|
components: {
|
elForm: Form,
|
elFormItem: FormItem,
|
TimePicker,
|
elInput: Input,
|
elCheckbox: Checkbox,
|
elButton: Button,
|
LaddaBtn,
|
elRow: Row,
|
elCol: Col,
|
orgTreeModel: OrgTreeModel,
|
selectOrgTree
|
},
|
created() {
|
/* 发送设备树查询请求 */
|
this.$store.dispatch('_initDevicDict')
|
this.queryRuler()
|
}
|
}
|
</script>
|
<style scope>
|
.border-light {
|
border-color: #c3c3c3 !important;
|
}
|
.el-date-editor .el-range-separator {
|
padding: 0 5px;
|
line-height: 32px;
|
width: 10%;
|
color: #36bdea;
|
font-weight: 700;
|
}
|
.myForm .el-form-item.is-success .el-input__inner {
|
border-color: #dcdfe6;
|
}
|
.timeSelect .el-input__inner {
|
width: 85%;
|
}
|
</style>
|
