Commit 1879918f by 无尘

feat: 增加考勤

parent 3920a72f
......@@ -4,112 +4,291 @@
* @Author: 无尘
* @Date: 2019-10-21 14:27:29
* @LastEditors: 无尘
* @LastEditTime: 2019-12-11 10:19:50
* @LastEditTime: 2019-12-12 18:29:01
-->
<!--
<use-record
:detailShow="detailShow"
<create-work-class
:workClassShow="workClassShow"
@hideDetailDialog="hideDetailDialog">
</use-record>
</create-work-class>
import useRecord from '@/components/app/material/use-record.vue'
import createWorkClass from '@/components/app/dailyAttendance/create-work-class.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" title="记录" :visible.sync="customDialog" width="739px" :before-close="handleClose">
<el-dialog class="edit-dialog" :title="classesId ? '编辑班次' : '新建班次'" :visible.sync="customDialog" width="820px" :before-close="handleClose">
<div class="edit-dialog-body">
<div class="m-b-20 flex">
<el-input placeholder="请输入标题" prefix-icon="el-icon-search" v-model="conditionObj.searchInput" class="w-203" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"> </el-input>
<!-- <span class="p-l-10 l-h-32">{{ total }}条点赞记录</span> -->
<el-form label-width="114px" :model="formData" ref="ruleForm" :rules="rules">
<el-form-item label="班次名称:" prop="">
<limitInput :inputWidth="210" :inputValue.sync="formData.classifyName" :holder="'请输入分类名称'" :getByType="'word'" :maxLength="10"> </limitInput>
</el-form-item>
<el-form-item label="次数限制:" prop="">
<div class="times-set-wrap avatar-wrapm-b-20">
<el-radio-group v-model="formData.times" @change="changeTimes">
<el-radio-button label="1">1天1次上下班</el-radio-button>
<!-- <el-radio-button label="2">1天2次上下班</el-radio-button>
<el-radio-button label="3">1天3次上下班</el-radio-button> --> </el-radio-group
><el-checkbox class="m-l-20" v-model="formData.clockType">打卡时段设置</el-checkbox>
</div>
<el-table :data="tableData" style="width: 100%" height="332">
<el-table-column label="发布人" width="150" show-overflow-tooltip>
<div class="times-set-content m-b-20">
<ul v-if="!formData.clockType">
<li v-for="(item, index) in formData.classessTimesJson" :key="index + 'time'">
<span>{{ index + 1 }}</span>
<span class="font-12 color-606266">上班</span>
<el-time-picker :editable="false" class="w-106" v-model="item.startTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
<span class="font-12 color-606266">下班</span>
<el-time-picker :editable="false" class="w-106" v-model="item.endTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
</li>
</ul>
<div v-if="formData.clockType" class="m-t-10">
<el-table :data="formData.classessTimesJson" style="width: 100%">
<el-table-column prop="" label="" width="70">
<template slot-scope="scope">
{{ scope.row.userName || '--' }}
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="标题" show-overflow-tooltip>
<el-table-column prop="name" label="上下班时间" width="226">
<template slot-scope="scope">
{{ scope.row.phoneNumber || '--' }}
<div class="cell">
<span class="font-12 color-606266">上班</span>
<el-time-picker :editable="false" class="w-106" v-model="scope.row.startTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
<el-tag class="across-tag" type="danger">次日</el-tag>
</div>
<div class="cell m-t-20">
<span class="font-12 color-606266">下班</span>
<el-time-picker :editable="false" class="w-106" v-model="scope.row.endTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
<el-tag class="across-tag" type="danger">次日</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="发布时间" show-overflow-tooltip>
<el-table-column prop="address" label="打卡时间范围限制">
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
<div class="cell">
<el-time-picker :editable="false" class="w-106" v-model="scope.row.allowStartBeginTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
<span class="font-12 color-606266"></span>
<el-time-picker :editable="false" class="w-106" v-model="scope.row.allowStartEndTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
<span class="font-12 color-606266">可打上班卡</span>
</div>
<div class="cell m-t-20">
<el-time-picker :editable="false" class="w-106" v-model="scope.row.allowEndStartTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
<span class="font-12 color-606266"></span>
<el-time-picker :editable="false" class="w-106" v-model="scope.row.allowEndEndTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
<span class="font-12 color-606266">可打下班卡</span>
</div>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
</div>
<div v-if="formData.times == 1" class="rest-time-set">
<el-checkbox v-model="formData.relaxFlag">休息时间</el-checkbox>
<el-time-picker v-if="formData.relaxFlag" :editable="false" class="w-120" v-model="formData.relaxStartDate" format="HH:mm" value-format="HH:mm" placeholder="休息开始"> </el-time-picker><el-time-picker v-if="formData.relaxFlag" :editable="false" class="w-120 m-l-20" v-model="formData.relaxEndDate" format="HH:mm" value-format="HH:mm" placeholder="休息结束"> </el-time-picker>
</div>
</el-form-item>
<el-form-item label="个性化设置:" prop="">
<div class="m-b-10">
<el-checkbox v-model="formData.isAllowLate">允许迟到</el-checkbox>
<el-input-number v-if="formData.isAllowLate" class="w-90 m-l-20" v-model="formData.allowLateDate" controls-position="right" :min="1" :max="3600"></el-input-number>
</div>
<div class="m-b-10">
<el-checkbox v-model="formData.isMostLate">严重迟到</el-checkbox>
<el-input-number v-if="formData.isMostLate" class="w-90 m-l-20" v-model="formData.mostLateDate" controls-position="right" :min="1" :max="3600"></el-input-number>
</div>
<div class="m-b-10">
<el-checkbox v-model="formData.isMoreLate">旷工迟到</el-checkbox>
<el-input-number v-if="formData.isMoreLate" class="w-90 m-l-20" v-model="formData.moreLateDate" controls-position="right" :min="1" :max="3600"></el-input-number>
</div>
<div class="m-b-10">
<el-checkbox v-model="formData.lateRule" @change="handleChangeLate">晚走次日晚到</el-checkbox>
<span class="font-12 color-909399 p-l-10">仅支持固定班制内勤打卡</span>
</div>
<div v-if="formData.lateRule" class="late-rule-wrap border-box">
<ul>
<li v-for="(item, index) in formData.lateRuleJson" :key="index + 'late'">
<div class="late-rule-text">
<span class="font-14 color-909399 p-r-10">晚走规则{{ index + 1 }}</span
><el-button v-if="index != 0" type="text" @click.stop="deleteLateRule(index)">删除</el-button>
</div>
<div class="late-rule-body">
<span class="font-12 color-909399">第一天下班后晚走</span>
<el-input-number class="w-90" v-model="item.lateDate" controls-position="right" :step="0.5" :min="1" :max="10.0"></el-input-number>
<span class="font-12 color-909399">小时,第二天上班后晚到</span>
<el-input-number class="w-90" v-model="item.allowLateDate" controls-position="right" :step="0.5" :min="1" :max="maxLate"></el-input-number>
<span class="font-12 color-909399">小时</span>
<span class="font-12 color-909399">第一天00:30(次日)下班,第二天19:00上班不算迟到</span>
</div>
</li>
<li v-if="formData.lateRuleJson.length < 3" class="text-center cursor-pointer" @click.stop="addLateSet"><i class="el-icon-plus color-1890ff"></i><span class="color-1890ff font-14 p-l-10">新建晚走规则</span></li>
</ul>
</div>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click.stop="customCancel">取消</el-button>
<el-button type="primary" @click.stop="customConfirm('ruleForm')">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import limitInput from '@/components/limit-input.vue';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import { _debounce } from '@/common/js/public';
export default {
name: 'use-record',
name: 'create-work-class',
components: {
limitInput
},
props: {
detailShow: {
workClassShow: {
type: Boolean,
default: false
},
materialId: {
classesId: {
type: String,
default: ''
}
},
data() {
const checkTime = (rule, value, callback) => {
if (value === '') {
callback(new Error('请设置次数'));
} else if (this.formData.classessTimesJson.map(ele => ele.startTime).includes('') || this.formData.classessTimesJson.map(ele => ele.endTime).includes('')) {
callback(new Error('请完善次数限制'));
} else if (this.formData.clockType && (this.formData.classessTimesJson.map(ele => ele.allowStartBeginTime).includes('') || this.formData.classessTimesJson.map(ele => ele.allowStartEndTime).includes('') || this.formData.classessTimesJson.map(ele => ele.allowEndStartTime).includes('') || this.formData.classessTimesJson.map(ele => ele.allowEndEndTime).includes(''))) {
callback(new Error('请完善次数限制'));
} else {
callback();
}
};
return {
enterpriseId: JSON.parse(localStorage.getItem('userInfo')).enterpriseId,
customDialog: false, // 弹框显示
activeName: 'first',
tableData: [],
conditionObj: {
searchInput: '',
materialId: this.materialId
classesId: this.classesId
},
// 分页参数
currentPage: 1,
pageSize: 5,
total: 0
formData: {
classesId: '',
classesName: '', // 班次名称
times: '1', // 次数设置
classessTimesJson: [
{
startTime: '9:00',
endTime: '18:00',
allowStartBeginTime: '',
allowStartEndTime: '',
allowEndStartTime: '',
allowEndEndTime: ''
}
],
clockType: false, // 1/0 打开时间段设置
relaxFlag: '', // 休息时间
relaxStartDate: '',
relaxEndDate: '',
isAllowLate: false, // 允许迟到
isMostLate: false, // 严重迟到
isMoreLate: false, // 旷工迟到
allowLateDate: '', // 允许迟到 分
mostLateDate: '', // 严重迟到 分
moreLateDate: '', // 旷工迟到 分
lateRule: false, // 晚走次日晚到
lateRuleJson: []
},
rules: {
classesName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
times: [{ required: true, validator: checkTime, trigger: 'change' }]
},
// 动态计算晚到时间
maxLate: 10.0
};
},
methods: {
/**
* 输入
* 改变次数控制
*/
toInput: _debounce(function(e, value) {
changeTimes(e) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
console.log(e);
if (e == 1) {
that.formData.classessTimesJson.length >= 2 ? that.formData.classessTimesJson.splice(1, 2) : '';
}
if (e == 2) {
if (that.formData.classessTimesJson.length >= 2) {
that.formData.classessTimesJson.splice(2, 1);
} else {
const startTime = that.formData.classessTimesJson[0].endTime.split(':');
that.formData.classessTimesJson.push({
startTime: `${1 + Number(startTime[0]) < 24 ? 1 + Number(startTime[0]) : 1 + Number(startTime[0]) - 24}:${startTime[1]}`,
endTime: `${4 + Number(startTime[0]) < 24 ? 4 + Number(startTime[0]) : 4 + Number(startTime[0]) - 24}:${startTime[1]}`,
allowStartBeginTime: '',
allowStartEndTime: '',
allowEndStartTime: '',
allowEndEndTime: ''
});
}
}
if (e == 3) {
if (that.formData.classessTimesJson.length >= 2) {
const startTime = that.formData.classessTimesJson[1].endTime.split(':');
that.formData.classessTimesJson.push({
startTime: `${1 + Number(startTime[0]) < 24 ? 1 + Number(startTime[0]) : 1 + Number(startTime[0]) - 24}:${startTime[1]}`,
endTime: `${4 + Number(startTime[0]) < 24 ? 4 + Number(startTime[0]) : 4 + Number(startTime[0]) - 24}:${startTime[1]}`,
allowStartBeginTime: '',
allowStartEndTime: '',
allowEndStartTime: '',
allowEndEndTime: ''
});
} else {
const startTime = that.formData.classessTimesJson[0].endTime.split(':');
that.formData.classessTimesJson.push({
startTime: `${1 + Number(startTime[0]) < 24 ? 1 + Number(startTime[0]) : 1 + Number(startTime[0]) - 24}:${startTime[1]}`,
endTime: `${4 + Number(startTime[0]) < 24 ? 4 + Number(startTime[0]) : 4 + Number(startTime[0]) - 24}:${startTime[1]}`,
allowStartBeginTime: '',
allowStartEndTime: '',
allowEndStartTime: '',
allowEndEndTime: ''
});
}
}
},
/**
* 开启晚走规则
*/
handleChangeLate(e) {
const that = this;
that.currentPage = 1;
that.getTableList();
console.log(e);
if (e) {
that.formData.lateRuleJson.push({
lateDate: 2.5,
allowLateDate: 1
});
} else {
that.formData.lateRuleJson = [];
}
console.log(that.formData.lateRuleJson);
},
/**
* 分页---页码变化
* 添加晚走规则
*/
handleSizeChange(val) {
addLateSet() {
const that = this;
that.pageSize = val;
that.getTableList();
that.formData.lateRuleJson.push({
lateDate: Number(that.formData.lateRuleJson[that.formData.lateRuleJson.length - 1].lateDate) + 0.5,
allowLateDate: Number(that.formData.lateRuleJson[that.formData.lateRuleJson.length - 1].allowLateDate) + 0.5
});
},
/**
* 分页---当前页变化
* 删除晚走规则
*/
handleCurrentChange(val) {
deleteLateRule(index) {
const that = this;
that.currentPage = val;
that.getTableList();
that.formData.lateRuleJson.splice(index, 1);
},
/**
* 关闭
......@@ -127,6 +306,49 @@ export default {
const that = this;
that.hideDialog();
},
/**
* 提交
*/
customConfirm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.setData();
} else {
return false;
}
});
}, 300),
/**
* 提交数据
*/
setData(list) {
const that = this;
let para = {
classesId: that.conditionObj.classesId,
enterpriseId: that.enterpriseId
};
postRequest(that.conditionObj.classesId ? '/haoban-app-attence-web/classes-edit' : '/haoban-app-attence-web/classes-add', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (that.conditionObj.classesId) {
showMsg.showmsg('编辑成功', 'success');
} else {
showMsg.showmsg('新建成功', 'success');
}
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
hideDialog() {
const that = this;
......@@ -136,22 +358,17 @@ export default {
/**
* 获取列表数据
*/
getTableList(val) {
getData(val) {
const that = this;
let para = {
materialId: that.conditionObj.materialId,
imgTextTitle: that.conditionObj.searchInput || '', // 搜索字段
relatedType: 4,
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
brandId: that.activeBrand
classesId: that.conditionObj.classesId,
enterpriseId: that.enterpriseId
};
getRequest('/haoban-app-material-web/material-log', para)
getRequest('/haoban-app-attence-web/classes-detail', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
that.formData = resData.result;
return false;
}
errMsg.errorMsg(resData);
......@@ -165,16 +382,15 @@ export default {
}
},
watch: {
detailShow: function(newData, oldData) {
workClassShow: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
materialId: function(newData, oldData) {
classesId: function(newData, oldData) {
const that = this;
if (newData) {
that.conditionObj.materialId = newData;
that.currentPage = 1;
that.getTableList();
that.conditionObj.classesId = newData;
that.getData();
}
}
},
......@@ -182,11 +398,10 @@ export default {
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.detailShow;
if (that.materialId) {
that.conditionObj.materialId = that.materialId;
that.currentPage = 1;
that.getTableList();
that.customDialog = that.workClassShow;
if (that.classesId) {
that.conditionObj.classesId = that.classesId;
that.getData();
}
}
};
......@@ -197,12 +412,24 @@ export default {
background: #82c5ff;
}
.w-90 {
width: 90px;
}
.w-106 {
width: 106px;
}
.w-120 {
width: 120px;
}
.w-203 {
width: 203px;
}
.l-h-32 {
line-height: 32px;
}
.m-l-20 {
margin-left: 20px;
}
.table-head-pic {
width: 35px;
......@@ -264,7 +491,21 @@ export default {
color: #1890ff;
}
.el-form {
margin-top: 40px;
margin-top: 0px;
.late-rule-wrap {
width: 100%;
padding-left: 20px;
ul {
padding: 10px 17px;
background: rgba(247, 248, 250, 1);
}
}
.across-tag {
vertical-align: middle;
padding: 0 6px;
height: 20px;
line-height: 20px;
}
}
}
</style>
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2019-12-11 09:34:53
* @LastEditTime: 2019-12-11 10:43:18
-->
<template>
<div class="my-customer-wrap common-set-wrap">
......@@ -40,8 +40,8 @@ export default {
bgHeight: window.screen.availHeight - 380 + 'px',
appName: '考勤打卡',
appIcon: 'icon-ribao',
activeSelTab: '1',
activeTab: '1',
activeSelTab: '11',
activeTab: '11',
tabListData: [
{
tabId: '1',
......
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2019-12-11 10:31:28
* @LastEditTime: 2019-12-11 16:26:25
-->
<!--
......@@ -25,63 +25,39 @@
<div class="switch-wrap">
<div class="flex flex-space-between">
<div>
<el-input placeholder="请输入分组名称搜索" v-model="conditionObj.searchInput" class="w-264" style="width: 264px;" prefix-icon="el-icon-search" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"></el-input>
</div>
<div>
<span class="font-14 color-606266 p-r-10">最近一次同步时间:{{ syncDate | formatTimeStamp }}</span
><el-button type="primary" @click="toWorkGroupSet">新建考勤组</el-button>
<el-input placeholder="请输入考勤组名称" v-model="conditionObj.attenceGroupName" class="w-264" style="width: 264px;" prefix-icon="el-icon-search" @keyup.native="value => toInput(value, conditionObj.attenceGroupName)" clearable @clear="clearInput"></el-input>
</div>
<div><span class="font-14 color-606266 p-r-10">配置说明:考勤组管理,可以添加不同部门或分组的考勤</span><el-button type="primary" @click="toWorkGroupSet">新建考勤组</el-button></div>
</div>
</div>
</div>
<div>
<el-table class="select-table" ref="multipleTable" :data="groupListData" tooltip-effect="dark" :style="{ width: '100%' }">
<el-table-column label="分组名称" width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.groupName }}</template>
</el-table-column>
<el-table-column prop="" label="分类">
<template slot-scope="scope">{{ scope.row.memberTagGroupClassifyName }}</template>
</el-table-column>
<el-table-column prop="" label="是否实时" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.isRealTime == 1 ? '是' : '否' }}</template>
</el-table-column>
<el-table-column prop="" label="更新频率" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.updateType == 1 ? '每日' : scope.row.updateType == 2 ? '每周' : scope.row.updateType == 3 ? '每月' : '-' }} {{ scope.row.updateType == 1 ? '一次' : scope.row.updateType == 2 ? '周' + scope.row.updateDay : scope.row.updateType == 3 ? scope.row.updateDay + '号' : '-' }}
</template>
<el-table-column label="考勤组名称" width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.attenceGroupName }}</template>
</el-table-column>
<el-table-column prop="" label="状态" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.effectiveStatus == '1' ? '有效' : '失效' }}</template>
<el-table-column prop="" label="人数">
<template slot-scope="scope">{{ scope.row.personCount }}</template>
</el-table-column>
<el-table-column prop="" label="覆盖人数" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.memberCount || 0 }}</template
>
<el-table-column prop="" label="类型" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.attenceType == 1 ? '固定排班' : scope.row.attenceType == 2 ? '排班制' : '自由排班' }}</template>
</el-table-column>
<el-table-column prop="" label="到期时间" show-overflow-tooltip>
<el-table-column prop="" label="考勤时间" show-overflow-tooltip>
<template slot-scope="scope">
<div>{{ scope.row.effectiveDate | timeStampToYmd }}</div>
<div>{{ scope.row.effectiveDate | timeStampToHms }}</div>
{{ scope.row.attenceTimeDesc }}
</template>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<el-tooltip class="item" effect="dark" content="<前提:开启模板消息开关。仅支持专属导购对<我的顾客-会员分组>中的分组下会员发送模板消息>" placement="right">
<span style="cursor: pointer">模板消息设置<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<el-table-column prop="" label="最近更新时间" show-overflow-tooltip>
<template slot-scope="scope">
<el-switch v-model="scope.row.isSendTemplate" active-text="" inactive-text="" @change="toChangeTemp($event, scope.$index, scope.row)"> </el-switch>
<div>{{ scope.row.updateTime | timeStampToYmd }}</div>
<div>{{ scope.row.updateTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<el-tooltip class="item" effect="dark" content="仅可编辑能在好办展示的分组" placement="right">
<span style="cursor: pointer">操作<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="toEditGroup(scope.$index, scope.row)">编辑分组可见范围</el-button>
<el-button v-if="scope.row.attenceType == 2 || scope.row.personCount" type="text" size="small" @click="toEditWorkTime(scope.$index, scope.row)">编辑排班</el-button>
<el-button type="text" size="small" @click="toEditGroup(scope.$index, scope.row)">修改规则</el-button>
<el-button type="text" size="small" @click="toDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
......@@ -95,63 +71,26 @@
<div class="switch-wrap">
<div class="flex flex-space-between">
<div>
<el-input placeholder="请输入分组名称搜索" v-model="conditionObj.searchInput" class="w-264" style="width: 264px;" prefix-icon="el-icon-search" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"></el-input>
<el-input placeholder="请输入班次名称" v-model="conditionObj.classesName" class="w-264" style="width: 264px;" prefix-icon="el-icon-search" @keyup.native="value => toInput(value, conditionObj.classesName)" clearable @clear="clearInput"></el-input>
</div>
<div>
<span v-if="syncDate" class="font-14 color-606266 p-r-10">最近一次同步时间:{{ syncDate | formatTimeStamp }}</span
><el-button type="primary" @click="toSync">立即同步</el-button>
<el-button type="primary" @click="toWorkClassSet">新建班次</el-button>
</div>
</div>
</div>
</div>
<div>
<el-table class="select-table" ref="multipleTable" :data="groupListData" tooltip-effect="dark" :style="{ width: '100%' }">
<el-table-column label="分组名称" width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.groupName }}</template>
<el-table-column label="班次名称" width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.classesName }}</template>
</el-table-column>
<el-table-column prop="" label="分类">
<template slot-scope="scope">{{ scope.row.memberTagGroupClassifyName }}</template>
<el-table-column prop="" label="考勤时间">
<template slot-scope="scope">{{ scope.row.classesTimesJson }}</template>
</el-table-column>
<el-table-column prop="" label="是否实时" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.isRealTime == 1 ? '是' : '否' }}</template>
</el-table-column>
<el-table-column prop="" label="更新频率" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.updateType == 1 ? '每日' : scope.row.updateType == 2 ? '每周' : scope.row.updateType == 3 ? '每月' : '-' }} {{ scope.row.updateType == 1 ? '一次' : scope.row.updateType == 2 ? '周' + scope.row.updateDay : scope.row.updateType == 3 ? scope.row.updateDay + '号' : '-' }}
</template>
</el-table-column>
<el-table-column prop="" label="状态" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.effectiveStatus == '1' ? '有效' : '失效' }}</template>
</el-table-column>
<el-table-column prop="" label="覆盖人数" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.memberCount || 0 }}</template
>
</el-table-column>
<el-table-column prop="" label="到期时间" show-overflow-tooltip>
<el-table-column label="操作">
<template slot-scope="scope">
<div>{{ scope.row.effectiveDate | timeStampToYmd }}</div>
<div>{{ scope.row.effectiveDate | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<el-tooltip class="item" effect="dark" content="<前提:开启模板消息开关。仅支持专属导购对<我的顾客-会员分组>中的分组下会员发送模板消息>" placement="right">
<span style="cursor: pointer">模板消息设置<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<template slot-scope="scope">
<el-switch v-model="scope.row.isSendTemplate" active-text="" inactive-text="" @change="toChangeTemp($event, scope.$index, scope.row)"> </el-switch>
</template>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<el-tooltip class="item" effect="dark" content="仅可编辑能在好办展示的分组" placement="right">
<span style="cursor: pointer">操作<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<template slot-scope="scope">
<el-button type="text" size="small" @click="toEditGroup(scope.$index, scope.row)">编辑分组可见范围</el-button>
<el-button type="text" size="small" @click="toEditClass(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="toDel(scope.$index, scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
......@@ -161,16 +100,18 @@
</div>
</div>
</div>
<create-work-class :classesId="classesId" :workClassShow="workClassShow" @hideDetailDialog="hideDetailDialog"> </create-work-class>
</div>
</template>
<script>
import createWorkClass from '@/components/app/dailyAttendance/create-work-class.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default {
name: 'app-detail',
components: {},
components: { createWorkClass },
props: {
brandId: {
type: String,
......@@ -195,26 +136,22 @@ export default {
return {
projectName: '', // 当前项目名
activeName: 'first',
activeBrand: this.brandId,
activeGroup: this.activeGroupId, // 商户(品牌) groupId
topMenuData: [
{
id: '1',
name: '会员搜索设置'
}
],
activeId: '1',
overTimeSeeFlag: '',
// 会员分组设置
enterpriseId: JSON.parse(localStorage.getItem('userInfo')).enterpriseId,
// 搜索
conditionObj: {
searchInput: '',
classifyName: '',
effectiveStatus: ''
attenceGroupName: '',
classesName: ''
},
groupListData: [], // 列表数据
classifyList: [], // 会员分组
groupListData: [], // 考勤组列表数据
classifyList: [], // 班次列表数据
currentPage: 1,
pageSize: 20,
total: 0
total: 0,
// 新建班次
workClassShow: false,
classesId: ''
};
},
......@@ -225,15 +162,9 @@ export default {
*/
async handleTabClick(tab, event) {
const that = this;
if (tab.name == 'first') {
that.getCustomerSet(that.brandId);
}else if (tab.name == 'second') {
that.getShowSet(that.brandId);
}else {
await that.getGroupClassSet(that.brandId);
await that.getGroupClassify(that.brandId);
await that.getGroupList(that.brandId);
}
that.pageSize = 20;
that.currentPage = 1;
that.getTableList(that.brandId);
},
/**
* 新建考勤组
......@@ -243,37 +174,70 @@ export default {
that.$router.push(`/workGroupSet?appIcon=${that.$route.query.appIcon}`)
},
/**
* 编辑排班
*/
toEditWorkTime(index, row) {
const that = this;
that.$router.push(`/workTimeManage?appIcon=${that.$route.query.appIcon}&attenceGroupId=${row.attenceGroupId}`);
},
/**
* 编辑考勤组(即:规则)
*/
toEditGroup(index, row) {
const that = this;
that.$router.push(`/workTimeManage?appIcon=${that.$route.query.appIcon}&attenceGroupId=${row.attenceGroupId}`);
},
/**
* 新建班次
*/
toWorkGroupSet() {
toWorkClassSet() {
const that = this;
that.workClassShow = true;
},
/**
* 编辑班次
*/
toEditClass(index, row) {
const that = this;
that.workClassShow = true;
that.classesId = row.classesId;
},
/*
*
*/
hideDetailDialog() {
const that = this;
that.workClassShow = false;
that.classesId = '';
},
/**
* 删除
*/
toDel(index, item) {
const that = this;
that
.$confirm('是否要删除该素材?', '提示', {
.$confirm(`是否要删除该${that.activeName == 'first'? '考勤组': '班次'}?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postDel(item, index);
that.postDel(index, item);
})
.catch(() => {});
},
/**
* 删除
*/
postDel(item, index) {
postDel(index, item) {
const that = this;
let para = {
materialId: item.materialId
};
postRequest('/haoban-app-material-web/material-del', para)
let para = {};
if(that.activeName == 'first') {
para.attenceGroupId = item.attenceGroupId;
}else {
para.classesId = item.classesId;
}
postRequest(that.activeName == 'first'? '/haoban-app-attence-web/attence-del':'/haoban-app-attence-web/classes-del', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
......@@ -297,52 +261,27 @@ export default {
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getGroupList(that.brandId);
that.getTableList(that.brandId);
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getGroupList(that.brandId);
that.getTableList(that.brandId);
},
changeCondition() {
const that = this;
that.currentPage = 1;
that.getGroupList(that.brandId);
},
/**
* 获取会员分组分类
*/
getGroupClassify(brandId) {
const that = this;
let para = {
brandId: brandId
};
postRequest('/haoban-app-member-web/memberGroup/get-member-class-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.classifyList = resData.result.list || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
that.getTableList(that.brandId);
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getGroupList(that.brandId);
that.getTableList(that.brandId);
},
/**
......@@ -351,7 +290,7 @@ export default {
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getGroupList(that.brandId);
that.getTableList(that.brandId);
},
/**
......@@ -360,12 +299,14 @@ export default {
getTableList(brandId) {
const that = this;
let para = {
brandId: brandId,
memberGroupName: that.conditionObj.searchInput,
brandId: brandId || that.activeBrand,
enterpriseId: that.enterpriseId,
attenceGroupName: that.conditionObj.attenceGroupName,
classesName: that.conditionObj.classesName,
pageNum: that.currentPage,
pageSize: that.pageSize
};
postRequest('/haoban-app-member-web/memberGroup/member-tag-group-list', para)
postRequest(that.activeName == 'first'?'/haoban-app-attence-web/attence_list' :'/haoban-app-attence-web/classes-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
......@@ -394,7 +335,9 @@ export default {
watch: {
brandId: function(newData, oldData) {
const that = this;
if(!!newData) {
that.activeBrand = newData;
}
},
activeGroupId: function(newData, oldData) {
let that = this;
......@@ -404,33 +347,17 @@ export default {
},
tabType: function(newData, oldData) {
const that = this;
if (newData == 1) {
that.getShowSet(that.brandId);
that.topMenuData = [
{
id: '1',
name: '会员搜索设置'
}
]
that.activeId = 1;
}else {
that.topMenuData = [
{
id: '2',
name: '在线沟通设置'
}
]
that.activeId = '2';
}
}
},
mounted() {
const that = this;
that.$emit('showTab', '1');
that.$emit('showTab', '2');
if(that.brandId && that.brandId != 1) {
that.getCustomerSet(that.brandId);
that.activeBrand = that.brandId;
}
that.getTableList(that.brandId);
},
};
......
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-09-18 15:25:12
* @LastEditors: 无尘
* @LastEditTime: 2019-12-10 19:05:22
* @LastEditTime: 2019-12-12 18:06:07
-->
<!--
......@@ -274,7 +274,7 @@ export default {
const that = this;
that.materialPreviewData = {
materialTitle: row.titleName, // 标题
materialContent: '' // 发送内容
materialContent: row.mediaUrl // 发送内容
};
that.previewVisible = true;
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment