jztAdmin/src/pages/store/checkRule/create.vue

<template>
	<div class="form-submit">
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title">
					<router-link :to="{ path: `${roterPre}/store/checkRule/index` }">
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">返回</span>
						</div>
					</router-link>
					<span v-text="$route.params.id ? '编辑打卡规则' : '添加打卡规则'" class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form :model="formData" :label-width="150">
				<FormItem label="规则名称" required>
					<Input v-model="formData.groupname" v-width="320"></Input>
				</FormItem>
				<FormItem label="打卡员工" required>
					<!-- <Input v-model="formData.groupname" v-width="320"></Input> -->
					<template v-for="item in checkedStaff">
						<Tag>{{item.name}}</Tag>
					</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 v-for="(itemx,indexx) in formData.checkindate" style="width:1000px;">
					<div style="padding-bottom: 10px;">打卡时间
						<Button type="primary" style="margin-left: 20px;" @click="addNewDkTime()"
							v-if="indexx == 0">添加新打卡时间</Button>
						<Button type="primary" style="margin-left: 20px;" @click="delNewDkTime(indexx)"
							v-else>删除</Button>
					</div>
					<FormItem label="工作日" required>
						<TagSelect v-model="itemx.workdays" hide-check-all>
							<TagSelectOption :name="1">星期一</TagSelectOption>
							<TagSelectOption :name="2">星期二</TagSelectOption>
							<TagSelectOption :name="3">星期三</TagSelectOption>
							<TagSelectOption :name="4">星期四</TagSelectOption>
							<TagSelectOption :name="5">星期五</TagSelectOption>
							<TagSelectOption :name="6">星期六</TagSelectOption>
							<TagSelectOption :name="0">星期天</TagSelectOption>
						</TagSelect>
					</FormItem>
					<card v-for="(item,index) in itemx.checkintime" style="margin-bottom: 10px;">
						<FormItem label="时段id" required>
							<Input v-width="320" placeholder="大于0，小于99999,且唯一" v-model="item.time_id"></Input>
							<Button type="primary" style="margin-left: 20px;" @click="addNewDk(itemx)"
								v-if="index == 0">添加新上班时段</Button>
							<Button type="primary" style="margin-left: 20px;" @click="delNewDk(itemx,index)"
								v-else>删除</Button>
						</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.earliest_work_sec" />
						</FormItem>
						<FormItem label="上班最晚时间" required>
							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
								v-model="item.latest_work_sec" />
						</FormItem>
						<FormItem label="上班提醒时间" required>
							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
								v-model="item.remind_work_sec" />
						</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.earliest_off_work_sec" />
						</FormItem>
						<FormItem label="下班最晚时间" required>
							<TimePicker :steps="[1, 5]" placeholder="" v-width="320" format="HH:mm"
								v-model="item.latest_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>
					</card>
				</card>


			</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>
				<Button type="primary" @click="showDate()">测试数据</Button>
			</div>
		</Card>
		<Modal v-model="modals" title="员工列表" footerHide class="paymentFooter" scrollable width="900"
			@on-cancel="cancel">
			<staff-list ref="stafflist" :goodsType="1" v-if="modals" @getProductId="getProductId"
				:serviceCard="1"></staff-list>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import staffList from "@/components/staffList/index";
	import storeList from "@/components/storeList";
	import {
		couponCategoryApi,
		couponSaveApi,
		couponDetailApi,
		VipEditApi,
		serveAddApi,
		serveReadApi,
		createServeProduct
	} from "@/api/marketing";
	import {
		addCheckRule
	} from '@/api/store';
	import {
		brandList
	} from "@/api/product";
	// import { formatDate } from '@/utils/validate';
	import Setting from "@/setting";
	export default {
		name: "storeCouponCreate",
		components: {
			storeList,
			staffList
		},
		data() {
			return {
				checkedStaff: [],
				modals: false, //选择员工弹出
				value: '',
				id: '',
				work_sec: '',
				roterPre: Setting.roterPre,
				disabled: false,
				storesList: [],
				formData: {
					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"
						]
					}, //打卡人员
					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": '' //	下班最晚时间
						}],
						"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,
			}
		},
		computed: {
			...mapState("admin/layout", ["isMobile", "menuCollapse"]),
		},
		created() {},
		methods: {
			// 测试数据
			showDate() {
				console.log('shuju', this.formData)
			},
			// 打开员工选择弹窗
			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({
					"time_id": '',
					"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": '' //	下班最晚时间
				})
			},
			addNewDkTime() {
				this.formData.checkindate.push({
					'workdays': [],
					"checkintime": [{
						"time_id": '',
						"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": '' //	下班最晚时间
					}],
					"flex_on_duty_time": 0,
					"flex_off_duty_time": 0
				})
			},

			delNewDkTime(index) {
				this.formData.checkindate.splice(index, 1)
			},
			delNewDk(item,index) {
				item.splice(index, 1)
			},
			// 
			onchangeTime(e) {
				console.log(e, 'xuanz');
			},
			// 商品id
			getProductId(row) {
				this.modals = false;
				console.log(row, '这个');
				this.checkedStaff = row
				let arr = []
				this.checkedStaff.forEach(item => {
					arr.push(item.userid)
				})
				this.formData.range.userid = arr

			},
			// 选择商品
			changeGoods() {
				this.modals = true;
			},
			downTab() {
				// if (!this.formData.store_name) {
				// 	return this.$Message.error("请输入服务卡名称");
				// }
				// if (!this.formData.card_price) {
				// 	return this.$Message.error("请输入售价");
				// }
				// if (!this.formData.repertory) {
				// 	return this.$Message.error("请输入库存");
				// }
			},
			getTime(str) {
				if(typeof(str) == 'string') {
					let arr = str.split(':')
					return arr[0]*60*60 + arr[1]*60
				}else {
					return str
				}
				
			},
			// 创建
			save() {
				let that = this
				this.downTab();
				console.log('这');
				let qdata = {}
				qdata = Object.assign(qdata,this.formData)
				try{
					// let qdata = JSON.parse(JSON.stringify(this.formData))
					let checkindate = []
					this.formData.checkindate.forEach(item => {
						// checkindate.push(item.)
						let mitem = []
						item.checkintime.forEach(itemt => {
							for(let key in itemt) {
								// let val = ''
								if(key != 'time_id') {
									itemt[key] = that.getTime(itemt[key])
								}else {
									itemt[key] = itemt[key]*1
								}
							}
							mitem.push(itemt)
						})
						item.checkintime = mitem
						checkindate.push(item)
					})
					qdata.checkindate = checkindate
					console.log(qdata,'this.formData')
				}catch(e){
					//TODO handle the exception
					console.log(e,'cuow')
				}
				
				
				addCheckRule({
						'group': qdata
					})
					.then((res) => {
						this.disabled = true;
						this.$Message.success(res.msg);
						setTimeout(() => {
							this.$router.push({
								path: this.roterPre + "/store/checkRule/index",
							});
						}, 1000);
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			cancel() {
				this.modals = false;
			},
		},
	};
</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;
	}
</style>