2023-11-23

src/pages/check/rule/add.vue

@@ -6,82 +6,39 @@
 					<Input v-model="formData.groupname" v-width="320"></Input>
 				</FormItem>
 				<FormItem label="打卡员工" required>
-					<template v-for="item in checkedStaff">
-						<Tag>{{item.name}}</Tag>
+					<template v-for="(item,ind) in checkedStaff">
+						<Badge class="right-tip">
+							<Tag>{{item.name}}(ID:{{item.id}})</Tag>
+							<template #count>
+								<Icon @click="checkedStaff.splice(ind,1)" size='20' type="ios-close-circle-outline" />
+							</template>
+						</Badge>
 					</template>
 					<Button type="primary" @click="chooseSatff">选择员工</Button>
 				</FormItem>
-				<!-- <FormItem label="打卡经度">
-					<Input v-model="formData.loc_infos[0].lng" v-width="320"></Input>
-					<span> （实际经度的1000000倍）</span>
-				</FormItem>
-				<FormItem label="打卡纬度">
-					<Input v-model="formData.loc_infos[0].lat" v-width="320"></Input>
-					<span> （实际纬度的1000000倍）</span>
-				</FormItem>
-				<FormItem label="打卡地名">
-					<Input v-model="formData.loc_infos[0].loc_title" v-width="320"></Input>
-					<span> （实际纬度的1000000倍）</span>
-				</FormItem>
-				<FormItem label="打卡详细地址">
-					<Input v-model="formData.loc_infos[0].loc_detail" v-width="320"></Input>
-					<span> （实际纬度的1000000倍）</span>
-				</FormItem>
-				<FormItem label="WiFi名称">
-					<Input v-model="formData.wifimac_infos[0].wifiname" v-width="320"></Input>
-					<span> </span>
-				</FormItem>
-				<FormItem label="无线路由器MAC地址">
-					<Input v-model="formData.wifimac_infos[0].wifimac" v-width="320"></Input>
-					<span> </span>
-				</FormItem> -->
 				<card class="day_box" v-for="(itemx,indexx) in formData.checkindate">
 					<FormItem label="工作日" required>
-						<TagSelect @on-change='changeWordkey' v-model="itemx.workdays" hide-check-all>
-							<TagSelectOption v-for="item in tageList" :name="item.value">
-								{{item.name}}</TagSelectOption>
+						<TagSelect @on-change='changeWordkey($event,itemx,indexx)' v-model="itemx.workdays"
+							hide-check-all>
+							<TagSelectOption v-for="(item,ind) in tageList" :name="ind">
+								{{item.name}}
+							</TagSelectOption>
 						</TagSelect>
 					</FormItem>
 					<card class="time_box" v-for="(item,index) in itemx.checkintime">
-						<!-- <FormItem label="时段id" required>
-							<Input v-width="320" placeholder="大于0，小于99999,且唯一" v-model="item.time_id"></Input>
-						</FormItem> -->
 						<FormItem label="上班时间" required>
 							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.work_sec" />
-						</FormItem>
-						<FormItem label="上班提醒时间" required>
-							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.remind_work_sec" />
-						</FormItem>
-						<div class="jgTip">
-							上班提醒时间不可晚于上班时间，且不可早于上班20分钟，只可以为准点、提前5分钟、提前10分钟、提前15分钟、提前20分钟</div>
-						<FormItem label="上班最早时间" required>
-							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.earliest_work_sec" />
+								v-model="item.work_sec" @on-change="changeWordSec($event,item)" />
 						</FormItem>
-						<FormItem label="上班最晚时间" required>
-							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.latest_work_sec" />
+						<FormItem label="上班打卡奖励" required>
+							<Input type="number" v-model="item.start_price" v-width="320"></Input>
 						</FormItem>
-
 						<FormItem label="下班时间" required>
 							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.off_work_sec" />
-						</FormItem>
-						<FormItem label="下班提醒时间" required>
-							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.remind_off_work_sec" />
-						</FormItem>
-						<div class="jgTip">
-							下班提醒时间不可早于下班时间，且不可晚于下班60分钟，只可以为准点、下班后10分钟、下班后20分钟、下班后30分钟、下班后60分钟</div>
-						<FormItem label="下班最早时间" required>
-							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.earliest_off_work_sec" />
+								v-model="item.off_work_sec" @on-change="changeWordSecEnd($event,item)" />
 						</FormItem>
-						<FormItem label="下班最晚时间" required>
-							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
-								v-model="item.latest_off_work_sec" />
+						<FormItem label="下班打卡奖励" required>
+							<Input type="number" v-model="item.end_price" v-width="320"></Input>
 						</FormItem>
 						<Button type="primary" style="margin-left: 20px;" @click="delNewDk(itemx.checkintime,index)"
 							v-if="itemx.checkintime.length>1">删除</Button>
@@ -90,13 +47,14 @@
 					<Button type="primary" style="margin-left: 20px;" @click="delNewDkTime(indexx)"
 						v-if="indexx>0">删除当前组</Button>
 				</card>
-				<Button type="primary" style="margin-top: 20px;" @click="addNewDkTime()">添加新打卡日期</Button>
+				<FormItem :label-width="0">
+						<Button type="primary" class="submission" @click="addNewDkTime()">添加新打卡日期</Button>
+						<Button type="primary" class="submission" @click="save" :disabled="disabled">创建返回</Button>
+						<Button type="primary" class="submission" @click="save('add')" :disabled="disabled">继续创建</Button>
+				</FormItem>
+
 			</Form>
-			<div style="width: 500px; display: flex;justify-content: center;">
-				<Button type="primary" class="submission" @click="save" :disabled="disabled"
-					v-if="!formData.id">立即创建</Button>
-				<Button type="primary" class="submission" @click="save" :disabled="disabled" v-else>立即修改</Button>
-			</div>
+
 		</Card>
 		<Modal v-model="modals" title="员工列表" footerHide class="paymentFooter" scrollable width="900"
 			@on-cancel="cancel">
@@ -110,7 +68,6 @@
 	import {
 		addCheckRule
 	} from '@/api/check';
-	import Setting from "@/setting";
 	import staffList from '@/components/staffList'
 	export default {
 		name: "storeCouponCreate",
@@ -121,38 +78,40 @@
 			return {
 				checkedStaff: [],
 				modals: false, //选择员工弹出
-				value: '',
-				id: '',
-				work_sec: '',
-				roterPre: Setting.roterPre,
 				disabled: false,
-				storesList: [],
 				tageList: [{
-					value: 1,
+					value: '',
+					number: 1,
 					name: '星期一',
 					bool: false,
 				}, {
-					value: 2,
+					value: '',
+					number: 2,
 					name: '星期二',
 					bool: false,
 				}, {
-					value: 3,
+					value: '',
+					number: 3,
 					name: '星期三',
 					bool: false,
 				}, {
-					value: 4,
+					value: '',
+					number: 4,
 					name: '星期四',
 					bool: false,
 				}, {
-					value: 5,
+					value: '',
+					number: 5,
 					name: '星期五',
 					bool: false,
 				}, {
-					value: 6,
+					value: '',
+					number: 6,
 					name: '星期六',
 					bool: false,
 				}, {
-					value: 0,
+					value: '',
+					number: 0,
 					name: '星期天',
 					bool: false,
 				}],
@@ -160,21 +119,9 @@
 					groupname: '',
 					grouptype: 1, //规则类型: 1-固定时间上下班；2-按班次上下班；3-自由上下班
 					type: 2, //	打卡方式 0-手机，2-考勤机，3-手机/考勤机
-					loc_infos: [{
-						lat: 30547030,
-						lng: 104062890,
-						loc_title: "腾讯成都大厦",
-						loc_detail: "四川省成都市武侯区高新南区天府三街",
-						distance: 300
-					}],
-					// wifimac_infos: [{
-					// 	"wifiname": "Tencent-WiFi-1",
-					// 	"wifimac": "c0:7b:bc:37:f8:d3"
-					// }],
 					range: {
-						userid: [
-							"qywx4633487382413312"
-						]
+						userid: [],
+						member_id: []
 					}, //打卡人员
 					checkindate: [{
 						'workdays': [],
@@ -187,35 +134,58 @@
 							"earliest_work_sec": '', //上班最早时间
 							"latest_work_sec": '', //上班最晚时间
 							"earliest_off_work_sec": '', //下班最早时间
-							"latest_off_work_sec": '' //	下班最晚时间
+							"latest_off_work_sec": '', //	下班最晚时间
+							"start_price": '', //上班打卡奖励
+							"end_price": '' //下班打卡奖励
 						}],
 						"flex_on_duty_time": 0,
 						"flex_off_duty_time": 0
 					}]
 
 				},
-				id: 0,
-				product_name: '',
-				product_id: 0,
-				store_name: '',
-				repertory: '',
-				card_price: '',
-				explain: '',
-				unit_name: '',
-				image: '',
-				images: '',
-				modals: false,
 			}
 		},
 		created() {},
 		methods: {
+			// 上班时间修改
+			changeWordSec(ent, item) {
+				let time = this.getTime(ent);
+				item.work_sec = ent
+				item.latest_work_sec = time + 6000;//上班最晚时间
+				item.earliest_work_sec = time - 6000; //上班最早时间
+				item.remind_work_sec = time - 600;//上班提醒时间
+			},
+			// 下班时间修改
+			changeWordSecEnd(ent, item) {
+				let time = this.getTime(ent);
+				item.off_work_sec = ent
+				item.latest_off_work_sec = time + 12000; //	下班最晚时间
+				item.earliest_off_work_sec = time - 6000;//下班最早时间
+				item.remind_off_work_sec = time;//下班提醒时间
+			},
 			// 触发改变事件
-			changeWordkey(res) {
-				for (let a = 0; a < this.tageList.length; a++) {
-					this.tageList[a].bool = false;
-					for (let i = 0; i < res.length; i++) {
-						if (this.tageList[a].value == res[i]) {
-							this.tageList[a].bool = true;
+			changeWordkey(res, item, ind) {
+				for (let i = 0; i < res.length; i++) {
+					// 保存选中是星期几的index
+					let num = res[i];
+					// 判断这个星期是否未被选中过
+					if (!this.tageList[num].bool) {
+						this.tageList[num].bool = true;
+						// 保存选中这个星期的是哪个工作日组
+						this.tageList[num].value = ind;
+					} else {
+						// 判断这个星期选中的是否是当前工作组
+						if (ind !== this.tageList[num].value) {
+							let nn = this.tageList[num].value;
+							// 获取选中的值在所在工作组的位置
+							let wordays = this.formData.checkindate[nn].workdays;
+							// 判断参数值是否存在
+							if (wordays.indexOf(num) > -1) {
+								wordays = wordays.splice(wordays.indexOf(num), 1);
+							}
+							// 获取选中的星期坐在工作组中的index用于删除该数据
+							// 保存为当前的工作组
+							this.tageList[num].value = ind;
 						}
 					}
 				}
@@ -224,22 +194,6 @@
 			chooseSatff() {
 				this.modals = true;
 			},
-			changeT(e) {
-				// close()
-				console.log(e, 'dddddddddddddd')
-			},
-			showTime(time) {
-
-				let hh = '',
-					mm = '';
-				hh = Math.floor(time / 3600);
-				hh = hh > 9 ? hh : ('0' + hh)
-				mm = Math.floor((time % 3600) / 60);
-				mm = mm > 9 ? mm : ('0' + mm)
-				let str = hh + ':' + mm + ':' + '00'
-				console.log('str:', str)
-				return str
-			},
 			// 添加时间
 			addNewDk(item) {
 				item.checkintime.push({
@@ -251,7 +205,9 @@
 					"earliest_work_sec": '', //上班最早时间
 					"latest_work_sec": '', //上班最晚时间
 					"earliest_off_work_sec": '', //下班最早时间
-					"latest_off_work_sec": '' //	下班最晚时间
+					"latest_off_work_sec": '', //	下班最晚时间
+					'start_price': '', //上班打卡奖励
+					"end_price": '' //下班打卡奖励
 				})
 			},
 			// 添加日期
@@ -267,7 +223,9 @@
 						"earliest_work_sec": '', //上班最早时间
 						"latest_work_sec": '', //上班最晚时间
 						"earliest_off_work_sec": '', //下班最早时间
-						"latest_off_work_sec": '' //	下班最晚时间
+						"latest_off_work_sec": '', //	下班最晚时间
+						'start_price': '', //上班打卡奖励
+						"end_price": '' //下班打卡奖励
 					}],
 					"flex_on_duty_time": 0,
 					"flex_off_duty_time": 0
@@ -286,12 +244,28 @@
 			getProductId(row) {
 				this.modals = false;
 				console.log(row, '这个');
-				this.checkedStaff = row
+				for (let i = 0; i < row.length; i++) {
+					let bool = false;
+					for (let a = 0; a < this.checkedStaff.length; a++) {
+						if (row[i].id == this.checkedStaff[a].id) {
+							bool = true;
+							break
+						}
+					}
+					if (!bool) {
+						this.checkedStaff.push(row[i])
+					}
+				}
 				let arr = []
+				let arr1 = []
 				this.checkedStaff.forEach(item => {
-					arr.push(item.userid)
+					arr.push(item.userid);
+					arr1.push(item.id);
+
 				})
-				this.formData.range.userid = arr
+				console.log(arr, '22333');
+				this.formData.range.userid = arr;
+				this.formData.range.member_id = arr1;
 			},
 			getTime(str) {
 				if (typeof(str) == 'string') {
@@ -300,53 +274,106 @@
 				} else {
 					return str
 				}
-
+			},
+			// 初始化数据
+			initData() {
+				this.checkedStaff = [];
+				this.formData = {
+					groupname: '',
+					grouptype: 1, //规则类型: 1-固定时间上下班；2-按班次上下班；3-自由上下班
+					type: 2, //	打卡方式 0-手机，2-考勤机，3-手机/考勤机
+					range: {
+						userid: [],
+						member_id: []
+					}, //打卡人员
+					checkindate: [{
+						'workdays': [],
+						"checkintime": [{
+							"time_id": '1',
+							"work_sec": '', //上班时间（距0点秒数，整分钟）
+							"off_work_sec": '', //下班时间
+							"remind_work_sec": '', //上班提醒时间
+							"remind_off_work_sec": '', //下班提醒时间
+							"earliest_work_sec": '', //上班最早时间
+							"latest_work_sec": '', //上班最晚时间
+							"earliest_off_work_sec": '', //下班最早时间
+							"latest_off_work_sec": '', //	下班最晚时间
+							"start_price": '', //上班打卡奖励
+							"end_price": '' //下班打卡奖励
+						}],
+						"flex_on_duty_time": 0,
+						"flex_off_duty_time": 0
+					}]
+				}
 			},
 			// 创建
-			save() {
+			save(type = 'break') {
 				let that = this
-				let qdata = {}
-				qdata = Object.assign(qdata, this.formData)
+				let qdata = Object.assign({}, that.formData);
+				if (!qdata.groupname) {
+					that.$Message.error("请填写规则名称");
+					return
+				}
+				if (qdata.range.member_id.length == 0) {
+					that.$Message.error("请选择员工");
+					return
+				}
 				try {
-					let checkindate = [];
-					this.formData.checkindate.forEach(item => {
-						// checkindate.push(item.)
-						let mitem = []
-						item.checkintime.forEach(itemt => {
+					qdata.checkindate = that.formData.checkindate.map(item => {
+						let data = Object.assign({}, item);
+						data.checkintime = item.checkintime.map(itemt => {
 							for (let key in itemt) {
-								if (key != 'time_id') {
-									itemt[key] = that.getTime(itemt[key])
-								} else {
+								if (key == 'start_price' || key == 'end_price') {
+									if (!itemt[key]) {
+										throw '请填写上下班打卡奖励'
+									}
+								} else if (key == 'time_id') {
 									itemt[key] = itemt[key] * 1
+								} else {
+									itemt[key] = that.getTime(itemt[key])
+									if (!itemt[key]) {
+										throw '请选择上下班时间'
+									}
 								}
 							}
-							mitem.push(itemt)
+							return itemt
 						})
-						item.checkintime = mitem
-						checkindate.push(item)
+						data.workdays = item.workdays.map(itemt => {
+							return that.tageList[itemt].number;
+						})
+						if (data.workdays.length == 0) {
+							throw '请选择打卡日期'
+						}
+						return data
 					})
-					qdata.checkindate = checkindate
-					console.log(qdata, 'this.formData')
 				} catch (e) {
-					//TODO handle the exception
-					console.log(e, 'cuow')
+					that.$Message.error(e);
+					return;
 				}
+				that.disabled = true;
 				// 请求
 				addCheckRule({
 						'group': qdata
 					})
 					.then((res) => {
-						this.disabled = true;
-						this.$Message.success(res.msg);
-						setTimeout(() => {
-							this.$router.push({
-								path: this.roterPre + "/store/checkRule/index",
-							});
-						}, 1000);
+						that.$Message.success(res.msg);
+						if (type == "break") {
+							setTimeout(() => {
+								that.$router.push({
+									path: "/store/checkRule/index",
+								});
+							}, 1000);
+							return
+						}
+						if (type == "add") {
+							that.disabled = false;
+							that.initData()
+							return
+						}
 					})
 					.catch((err) => {
-						this.$Message.error(err.msg);
-						this.disabled = false;
+						that.$Message.error(err.msg);
+						that.disabled = false;
 					});
 			},
 			cancel() {
@@ -357,176 +384,9 @@
 </script>
 
 <style scoped lang="stylus">
-	.tips {
-		display: inline-bolck;
-		font-size: 12px;
-		font-weight: 400;
-		color: #999999;
-		margin-top: 10px;
-	}
-
-	.imgPic {
-		.info {
-			width: 60%;
-			margin-left: 10px;
-		}
-
-		.pictrue {
-			height: 36px;
-			margin: 7px 3px 0 3px;
-
-			img {
-				height: 100%;
-				display: block;
-			}
-		}
-	}
-
-	.productType {
-		width: 120px;
-		height: 60px;
-		background: #FFFFFF;
-		border-radius: 3px;
-		border: 1px solid #E7E7E7;
-		float: left;
-		text-align: center;
-		padding-top: 8px;
-		position: relative;
-		cursor: pointer;
-		line-height: 23px;
-		margin-right: 12px;
-
-		&.on {
-			border-color: #1890FF;
-		}
-
-		.name {
-			font-size: 14px;
-			font-weight: 600;
-			color: rgba(0, 0, 0, 0.85);
-
-			&.on {
-				color: #1890FF;
-			}
-		}
-
-		.title {
-			font-size: 12px;
-			font-weight: 400;
-			color: #999999;
-		}
-
-		.jiao {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			width: 0;
-			height: 0;
-			border-bottom: 26px solid #1890FF;
-			border-left: 26px solid transparent;
-		}
-
-		.iconfont {
-			position: absolute;
-			bottom: -3px;
-			right: 1px;
-			color: #FFFFFF;
-			font-size: 12px;
-		}
-	}
-
-	.info {
-		color: #888;
-		font-size: 12px;
-	}
-
-	.ivu-input-wrapper {
-		width: 320px;
-	}
-
-	.ivu-input-number {
-		width: 160px;
-	}
-
-	.ivu-date-picker {
-		width: 320px;
-	}
-
-	.ivu-icon-ios-camera-outline {
-		width: 58px;
-		height: 58px;
-		border: 1px dotted rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-		background-color: rgba(0, 0, 0, 0.02);
-		line-height: 58px;
-		cursor: pointer;
-		vertical-align: middle;
-	}
-
-	.upload-list {
-		width: 58px;
-		height: 58px;
-		border: 1px dotted rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
-		margin-right: 15px;
-		display: inline-block;
-		position: relative;
-		cursor: pointer;
-		vertical-align: middle;
-	}
-
-	.upload-list img {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	.ivu-icon-ios-close-circle {
-		position: absolute;
-		top: 0;
-		right: 0;
-		transform: translate(50%, -50%);
-	}
-
 	.form-submit {
-		/deep/.ivu-card {
-			border-radius: 0;
-		}
-
 		margin-bottom: 79px;
-
-		.fixed-card {
-			position: fixed;
-			right: 0;
-			bottom: 0;
-			left: 200px;
-			z-index: 99;
-			box-shadow: 0 -1px 2px rgb(240, 240, 240);
-
-			/deep/ .ivu-card-body {
-				padding: 15px 16px 14px;
-			}
-
-			.ivu-form-item {
-				margin-bottom: 0;
-			}
-
-			/deep/ .ivu-form-item-content {
-				margin-right: 124px;
-				text-align: center;
-			}
-
-			.ivu-btn {
-				height: 36px;
-				padding: 0 20px;
-			}
-		}
 	}
-
-	/deep/.vxe-tree-cell {
-		padding-left: 0 !important;
-	}
-
 	.day_box {
 		margin-bottom: 20px;
 
@@ -534,11 +394,20 @@
 			margin-bottom: 20px;
 		}
 	}
-	.jgTip{
+
+	.jgTip {
 		margin-top: -25px;
 		padding-left: 25px;
 		padding-bottom: 10px;
 		color: #c3c3c3;
 		font-size: 12px;
 	}
+
+	.right-tip {
+		margin-right: 10px;
+	}
+
+	.submission {
+		margin-right: 10px
+	}
 </style>

src/pages/check/rule/index.vue

@@ -25,15 +25,13 @@
 							<el-tag v-for="item in witem.workdays">{{item | showWd}}</el-tag>
 						</div>
 						<div class="flex">
-							<span>上班时段：</span>
 							<div>
 								<div v-for="itemx in witem.checkintime">
-									<span>{{itemx.work_sec| showTime}} </span> -
-									<span>{{itemx.off_work_sec | showTime}}</span>
+									<div>上班时间：{{itemx.work_sec| showTime}} 金额：{{itemx.start_price}}</div>
+									<div>下班时间：{{itemx.off_work_sec | showTime}} 金额：{{itemx.end_price}}</div>
 								</div>
 							</div>
 						</div>
-
 					</div>
 				</template>
 				<template slot-scope="{ row, index }" slot="status">