{extend name="common/common2" /}
{block name="main"}
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<!--<div class="ibox-title">-->
<!--<h5>{$title}</h5>-->
<!--<div class="ibox-tools">-->
<!--<a class="toback" href="{:url('index')}">-->
<!--返回上一页-->
<!--</a>-->
<!--</div>-->
<!--</div>-->
<div class="ibox-content">
<div id="vueapp">
<div style="overflow: auto;padding: 15px 20px;">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" maxlength="50" show-word-limit placeholder="请输入" />
</el-form-item>
<el-form-item label="参与考勤人员" prop="selectUser">
<el-select
v-model="selectUser"
placeholder="请选择"
multiple
collapse-tags
filterable
>
<el-option
v-for="item in users"
:key="item.id"
:label="item.real_name"
:value="item.id">
</el-option>
<!-- <el-option-group-->
<!-- v-for="group in users"-->
<!-- :key="group.name"-->
<!-- :label="group.name"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in group.sub"-->
<!-- :key="item.USER_ID"-->
<!-- :label="item.REAL_NAME"-->
<!-- :value="item.USER_ID">-->
<!-- </el-option>-->
<!-- </el-option-group>-->
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-radio v-if="info" v-model="form.type" disabled label="1">
固定班制
</el-radio>
<el-radio v-if="info" v-model="form.type" disabled label="2">
排班制
</el-radio>
<el-radio v-if="!info" v-model="form.type" label="1">
固定班制
</el-radio>
<el-radio v-if="!info" v-model="form.type" label="2">
排班制
</el-radio>
</el-form-item>
<el-form-item v-if="Number(form.type) === 2" label="考勤班次">
<el-select
v-if="classload"
v-model="checkClass"
multiple
placeholder="请选择"
style="width:100%;"
@change="changePbClass"
>
<el-option
v-for="item in classes"
:key="item.id"
:label="item.name"
:value="item.id.toString()"
/>
</el-select>
</el-form-item>
<el-form-item v-if="Number(form.type) === 2 && checkClass.length" label="排班周期">
<table border="0" style="width:100%;">
<tr>
<th>周期名称</th>
<th>周期天数</th>
<th>操作</th>
</tr>
<tr v-for="item in [circle]">
<td>{{item.title}}</td>
<td>{{item.days}}</td>
<td>
<el-link type="primary" :underline="false" @click="setCircle()">
设置排班周期
</el-link>
</td>
</tr>
</table>
</el-form-item>
<el-form-item v-if="Number(form.type) === 1" label="工作日设置">
<table border="0" style="width:100%;text-align: center;">
<tr>
<th style="width:120px">工作日</th>
<th>班次时间段</th>
</tr>
<tr v-for="item in tableData">
<td>{{item.text}}</td>
<td>
<el-select v-if="classload" v-model="item.class_id" size="small" clearable placeholder="请选择" style="width:100%">
<el-option
v-for="item in classes"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</td>
</tr>
</table>
</el-form-item>
<el-form-item v-if="Number(form.type) === 1" label="特殊日期" >
<div>
<el-button size="small" @click="handleClass(1,null)">
添加
</el-button> <span> 必须打卡的日期</span>
</div>
<table v-if="signTable.length > 0" border="0" style="width:100%;">
<tr>
<th>日期</th>
<th>考勤时间</th>
<th>操作</th>
</tr>
<tr v-for="item in signTable" >
<td>{{item.day}}</td>
<td>
{{item.class_name}}
</td>
<td>
<el-link type="primary" :underline="false" @click="handleClass(1, item)">
编辑
</el-link>
<el-link type="danger" :underline="false" @click="delClass(1,item)">
删除
</el-link>
</td>
</tr>
</table>
<div>
<el-button size="small" @click="handleClass(2,null)">
添加
</el-button> <span> 不用打卡的日期</span>
</div>
<table v-if="unsignTable.length > 0" border="0" style="width:100%;">
<tr>
<th>日期</th>
<th>考勤时间</th>
<th>操作</th>
</tr>
<tr v-for="item in unsignTable">
<td>{{item.day}}</td>
<td>
休息
</td>
<td>
<el-link type="danger" :underline="false" @click="changeClass(item)">
删除
</el-link>
</td>
</tr>
</table>
</el-form-item>
<el-form-item label="考勤方式">
<el-checkbox-group v-model="checkWay">
<el-checkbox label="1" >
地点打卡
</el-checkbox>
<el-checkbox label="2">
考勤机打卡
</el-checkbox>
</el-checkbox-group>
<!-- <span class="text-danger">物业人员仅支持考勤机打卡</span>-->
</el-form-item>
<el-form-item label="考勤地点">
<el-select
v-if="addrload"
v-model="checkAddr"
multiple
collapse-tags
placeholder="请选择"
>
<el-option
v-for="item in addr"
:key="item.id"
:label="item.title"
:value="item.id.toString()"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="flag" @click="submitbtn('form')">
确定
</el-button>
</el-form-item>
</el-form>
</div>
<el-dialog
v-if="classVisible"
:title="title1"
:visible.sync="classVisible"
width="600px"
@close="handleCancelModal"
>
<el-form ref="classForm" :model="classForm" :rules="rules" label-position="right" label-width="120px">
<el-form-item label="日期">
<el-date-picker
v-model="classForm.day"
type="date"
placeholder="请选择日期"
:editable="false"
value-format="yyyy-MM-dd"
:clearable="true"
@change="changeDate(classForm.type,classForm.edit)"
/>
<div class="text-danger">
{{ errormsg }}
</div>
</el-form-item>
<el-form-item v-if="classForm.type === 1" label="考勤班次">
<el-select v-if="classload" v-model="classForm.class_id" clearable placeholder="请选择">
<el-option
v-for="item in classes"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- <span slot="footer" class="dialog-footer">-->
<el-button type="primary" style="margin-left: 200px" @click="handleClassForm('classForm')">确 定</el-button>
</span>
</el-form>
</el-dialog>
<el-dialog
v-if="circleVisible"
title="设置排班周期"
:visible.sync="circleVisible"
width="600px"
@close="handleCancelModal2"
>
<el-form v-if="circle" ref="circleForm" :model="circle" :rules="rules" label-position="right" label-width="120px">
<el-form-item label="周期名称">
<el-input v-model="circle.title" maxlength="10" show-word-limit placeholder="请输入名称" />
</el-form-item>
<el-form-item label="周期天数">
<el-input-number v-model="circle.days" :min="2" :max="31" :step="1" @change="changeDays" />
</el-form-item>
<el-form-item v-if="circle.class.length > 0" label="周期排班">
<div v-for="item in circle.class" :key="item.id">
<span>第{{ item.id }}天: </span>
<span v-if="selectClasses.length > 0">
<el-select v-model="item.class_id" size="small" clearable placeholder="请选择(不选即为休息)">
<el-option
v-for="item2 in selectClasses"
:key="item2.id"
:label="item2.name"
:value="item2.id"
/>
</el-select>
</span>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCancelModal2">取 消</el-button>
<el-button type="primary" @click="handleCircleForm('circleForm')">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</div>
</div>
</div>
{/block}
{block name="script"}
<script>
$(document).ready(function(){
formSetValue("type", {$info.type|default=1});
});
</script>
<script>
var users = <?=json_encode($users)?>;
var classes = <?=json_encode($classes)?>;
var addrs = <?=json_encode($addrs)?>;
var info = <?=json_encode($info)?>;
console.log(info);
new Vue({
el: '#vueapp',
data: function() {
return {
form : {
id: 0,
name: '',
type: '1',
},
rules : {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
],
},
selectUser: [],
users: users, // 所有用户
checkClass:[], // 选择的考勤班次
classload:true,
// info: null,
info: info?info:null,
flag: false,
tableData:[
{
week: 1, text: '周一', class_id: '', class_name: '',
},
{
week: 2, text: '周二', class_id: '', class_name: '',
},
{
week: 3, text: '周三', class_id: '', class_name: '',
},
{
week: 4, text: '周四', class_id: '', class_name: '',
},
{
week: 5, text: '周五', class_id: '', class_name: '',
},
{
week: 6, text: '周六', class_id: '', class_name: '',
},
{
week: 0, text: '周日', class_id: '', class_name: '',
},
],
signTable : [],
unsignTable : [],
circle : {
title: '',
days: 0,
class: [
{
id: 1,
class_id: '',
},
{
id: 2,
class_id: '',
},
],
},
checkWay:['1', '2'],
circleVisible:false,
selectClasses : [],
checkAddr:[],
addr:addrs,
addrload:true,
classes:classes,
title1: '必须打卡日期',
errormsg:'',
classForm:{
day: '',
class_id: '',
type: 1,
edit: 0,
},
oldday : '', // 编辑用
classVisible:false,
dataload:true,
}
},
watch: {
},
created(){
if(info){
this.form = {
id: info.id,
name: info.name,
type: info.type.toString(),
};
this.selectUser = info.userIds;
this.users = users; // 所有用户
this.checkClass = info.class_id?info.class_id.split(','):[]; // 选择的考勤班次
this.checkAddr = info.addr?info.addr.split(','):[];
this.addr = addrs;
this.classes = classes;
const content = JSON.parse(this.info.content);
const way = this.info.cate ? this.info.cate.split(',') : [];
this.checkWay = way ;
const classs = this.info.classId ? this.info.classId.split(',') : [];
classs.forEach((item) => {
this.checkClass.push(item.toString());
});
if (this.info.type === 1) {
this.tableData = content.week;
this.signTable = content.sign;
this.unsignTable = content.unsign;
} else {
this.circle = content.circle;
this.selectClasses = [];
this.classes.forEach((item) => {
if (this.checkClass.includes(item.id.toString())) {
this.selectClasses.push(item);
}
});
}
}
},
methods: {
changePbClass() {
this.selectClasses = [];
this.classes.forEach((item) => {
if (this.checkClass.includes(item.id.toString())) {
this.selectClasses.push(item);
}
});
this.circle = {
title: '',
days: 2,
class: [
{
id: 1,
class_id: '',
},
{
id: 2,
class_id: '',
},
],
};
},
handleClass(type, obj) {
this.oldday = '';
if (obj) {
this.classForm = {
day: obj.day,
class_id: obj.class_id,
type,
edit: 1,
};
this.oldday = obj.day;
} else {
this.classForm = {
day: '',
class_id: '',
type,
edit: 0,
};
}
if (type === 1) {
this.title1 = '必须打卡的日期';
} else {
this.title1 = '不用打卡的日期';
}
this.classVisible = true;
},
delClass(type,obj){
if (type === 1) {
this.signTable = this.signTable.filter(item => item.day !== obj.day);
} else {
this.unsignTable = this.unsignTable.filter(item => item.day !== obj.day);
}
},
changeClass(obj){
this.unsignTable = this.unsignTable.filter(item => item.day !== obj.day);
},
handleCancelModal() {
this.classVisible = false;
},
handleClassForm(formName) { // eslint-disable-line
console.log(formName, this.classForm);
if (this.errormsg) {
return false;
}
if (!this.classForm.day) {
this.$message.error('未选择日期');
return false;
} if (this.classForm.type === 1 && !this.classForm.class_id) {
this.$message.error('未选择班次');
return false;
}
if (this.classForm.type === 1) {
let ff = false;
this.signTable.forEach((item) => {
const info = item;
if (item.day === this.oldday && this.classForm.edit) { // 编辑
info.class_id = this.classForm.class_id;
info.day = this.classForm.day;
ff = true;
}
});
if (!ff) {
this.signTable.push({
day: this.classForm.day,
class_id: this.classForm.class_id,
class_name: '',
});
}
this.signTable.forEach((item) => {
const info = item;
this.classes.forEach((item2) => {
if (item2.id === info.class_id) {
info.class_name = item2.name;
}
});
});
const nsignTable = JSON.parse(JSON.stringify(this.signTable));
this.signTable = [];
this.signTable = JSON.parse(JSON.stringify(nsignTable));
} else {
this.unsignTable.push({
day: this.classForm.day,
});
const nunsignTable = JSON.parse(JSON.stringify(this.unsignTable));
this.unsignTable = [];
this.unsignTable = JSON.parse(JSON.stringify(nunsignTable));
}
console.log(this.signTable, this.unsignTable);
this.classVisible = false;
},
goBack() {
this.$router.go(-1);
},
changeDate(type, edit) {
this.errormsg = '';
if (this.classForm.day) {
if(edit === 1){ // eslint-disable-line
if (type === 1) {
this.unsignTable.forEach((item) => {
if (item.day === this.classForm.day) {
this.errormsg = '该日期已被指定为不需要打卡';
}
});
} else {
this.signTable.forEach((item) => {
if (item.day === this.classForm.day) {
this.errormsg = '该日期已被指定为必须打卡';
}
});
}
} else {
this.signTable.forEach((item) => {if (item.day === this.classForm.day) {
this.errormsg = '该日期已被指定为必须打卡';
}
});
this.unsignTable.forEach((item) => {
if (item.day === this.classForm.day) {
this.errormsg = '该日期已被指定为不需要打卡';
}
});
}
} else {
this.errormsg = '';
}
},
setCircle() {
console.log('sss',this.selectClasses,this.checkClass);
this.circleVisible = true;
},
handleCircleForm() {
this.circleVisible = false;
},
handleCancelModal2() {
this.circleVisible = false;
},
changeDays() {
console.log('circle', this.circle);
const newclass = [];
for(let i=1;i<=this.circle.days;i++){ // eslint-disable-line
newclass.push({
id: i,
class_id: '',
});
}
newclass.forEach((item) => {
const info = item;
this.circle.class.forEach((item2) => {
if (item.id === item2.id) {
info.class_id = item2.class_id;
}
});
});
this.circle.class = [];
this.circle.class = JSON.parse(JSON.stringify(newclass));
},
submitbtn(formName){
this.$refs[formName].validate((valid) => { // eslint-disable-line
if (valid) {
this.flag = true;
let content = {};
if (Number(this.form.type) === 1) {
content = {
week: this.tableData,
sign: this.signTable,
unsign: this.unsignTable,
};
} else {
content = {
circle: this.circle,
};
}
let param = {
id: this.form.id,
name: this.form.name,
type: this.form.type,
cate: this.checkWay ? this.checkWay.join(',') : '',
classId: this.checkClass.length > 0 ? this.checkClass.join(',') : '',
addr: this.checkAddr.length > 0 ? this.checkAddr.join(',') : '',
content: JSON.stringify(content),
users: this.selectUser.join(','),
};
let that = this;
$.ajax({
url: 'add',
type: 'POST',
data: param,
success: function(data){
if(data.code == '1'){
layer.msg('操作成功',{time:2000})
parent.layer.closeAll();
// window.location.href = "{:url('AttendanceGroup/index')}"
// parent.window.location.reload();
}else{
layer.msg('操作失败')
}
that.flag = false;
},
error: function (){
that.flag = false;
}
});
}
});
}
}
})
</script>
{/block}