shenzeeUniApp/packageA/pages/remote/alarmClockItem.vue

<template>
	<view>
		<view class="test">
			<view>{{$t('alarmClock.title')}}</view>
			<p class="time">{{time}}</p>
			<button class="btime" type="primary" @click="onShowDatePicker('time')">{{$t('alarmClock.chooseTime')}}</button>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'1'"
			:end-text="'2'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<view class="example-body">
			<uni-badge class="uni-badge-left-margin" :inverted="Sunday" :text="$t('alarmClock.qi')" type="primary" @click="wek(7)" />
			<uni-badge class="uni-badge-left-margin" :inverted="Monday" :text="$t('alarmClock.yi')" type="primary" @click="wek(1)" />
			<uni-badge class="uni-badge-left-margin" :inverted="Tuesday" :text="$t('alarmClock.er')" type="primary" @click="wek(2)" />
			<uni-badge class="uni-badge-left-margin" :inverted="Wednesday" :text="$t('alarmClock.san')" type="primary" @click="wek(3)" />
			<uni-badge class="uni-badge-left-margin" :inverted="Thursday" :text="$t('alarmClock.si')" type="primary" @click="wek(4)" />
			<uni-badge class="uni-badge-left-margin" :inverted="Friday" :text="$t('alarmClock.wu')" type="primary" @click="wek(5)" />
			<uni-badge class="uni-badge-left-margin" :inverted="Saturday" :text="$t('alarmClock.liu')" type="primary" @click="wek(6)" />
		</view>
		<view class="line"></view>
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				{{$t('alarmClock.type')}}:
			</view>
			<view class="uni-list-cell-db">
				<picker @change="bindPickerChange" :value="indexType" :range="array">
					<view class="uni-input">{{array[indexType]}}</view>
				</picker>
			</view>
		</view>
		<!-- //查找 -->
		<view class="search">
			<view class="search-title">
				{{$t('dosugar.equipmentClientID')}}
			</view>
			<view class="search-input">
				<input type="text" :placeholder="$t('dosugar.placeholder')" v-model="searchClientId" />
			</view>
			<view class="search-button">
				<button type="primary" class="" @click="search()">
					<p class="">{{$t('alarmClock.add')}}</P>
				</button>
			</view>
		</view>
		<!-- //多选下拉框 -->
		<view class="select-item">
			<ld-select :multiple="true" :list="equipmentNameList" label-key="label" value-key="value"
				:placeholder="$t('alarmClock.placeholder')" clearable v-model="equipmentIds" @change="selectChange2"></ld-select>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">{{$t('alarmClock.switchChange')}}</view>
				<switch :checked="status" @change="switchChange" />
			</view>
		</view>
		<view class="search">
			<view class="search-title">
				{{$t('alarmClock.name')}}：
			</view>
			<view class="search-input2">
				<input type="text"  v-model="name" />
			</view>
		</view>
		<view class="line"></view>
		<!-- //提交按钮 -->
		<view class="tr">
			<button v-if="clock=='add'" type="primary" formType="submit" @click="add()" class="button">
				<p class="p1">{{$t('alarmClock.add')}}</p>
			</button>
			<button v-if="clock!='add'" v-show="ushow" type="primary" formType="submit" @click="update()"
				class="button">
				<p class="p1">{{$t('alarmClock.update')}}</p>
			</button>
			<button v-if="clock!='add'" v-show="ushow" type="warn" formType="submit" @click="delet()" class="button">
				<p class="p1">{{$t('alarmClock.delete')}}</p>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import MxDatePicker from "../../components/mx-datepicker/mx-datepicker.vue";
	// import ldSelect from "../../components/ld-select/ld-select.vue";
	import ldSelect from "../../components/ld-select/ld-select.vue"
	import likeButton from "../../components/like-button/like-button.vue";
	export default {
		components: {
			MxDatePicker,
			ldSelect,
			likeButton
		},
		data() {
			return {
				showPicker: false,
				// date: '2019/01/01',
				time: '22:00:00',
				// datetime: '2019/01/01 15:00:12',
				// range: ['2019/01/01','2019/01/06'],
				// rangetime: ['2019/01/08 14:00','2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				//0：炉头开启，1：炉头关闭，2：开始休眠，3：结束休眠
				// array: ['开启炉头', '关闭炉头', '开始休眠', '结束休眠'],
				array: [this.$t('alarmClock.kailutou'), this.$t('alarmClock.guanlutou'), this.$t('alarmClock.kaixiumian'), this.$t('alarmClock.guanxiumian')],
				indexType: 0,
				Sunday: true,
				Monday: true,
				Tuesday: true,
				Wednesday: true,
				Thursday: true,
				Friday: true,
				Saturday: true,
				name:'',
				week: '1,2,3,4,5,6,7,',
				searchClientId: null,
				equipmentName: null,
				equipmentNameList: [],
				globalUser: {},
				equipmentIds: [],
				clock: null,
				status: true,
				ushow: false
			}
		},
		onShow() {
			this.globalUser = uni.getStorageSync("globalUser");
			this.clock = uni.getStorageSync("clock");
			var token = uni.getStorageSync("token");
			if (this.clock == "add") {
				this.Sunday = false;
				this.Monday = false;
				this.Tuesday = false;
				this.Wednesday = false;
				this.Thursday = false;
				this.Friday = false;
				this.Saturday = false;
			}
			if (token.length > 1) {
				this.getEquipmentListData();
			} else {
				uni.reLaunch({
					url: '../../../pages/Login/Login',
				});
			}

		},
		onLoad() {
			let that = this
			// if (that.clock == "add") {
			// 	this.Sunday = false;
			// 	this.Monday = false;
			// 	this.Tuesday = false;
			// 	this.Wednesday = false;
			// 	this.Thursday = false;
			// 	this.Friday = false;
			// 	this.Saturday = false;
			// }
			// 回显
			setTimeout(function() {
				if (that.clock != "add") {
					that.selectOne();
				}
			}, 2000)
			// 回显
			setTimeout(function() {
				if (that.clock != "add") {
					that.ushow = true;
				}
			}, 4000)

		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser', 'addAlarmClock', 'addAlarmClockItem', 'updateAlarmClock']),
			getEquipmentListData() {
				this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						// this.merchantList = data;
						// console.log("1223");
						var listName = data[0].equipmentList;
						var equipmentNameList = this.equipmentNameList;
						var co = {};
						co["value"] = 'all';
						co["label"] = '全部机器';
						equipmentNameList.push(co);
						for (var i = 0; i < listName.length; i++) {
							var cov = {};
							cov["value"] = listName[i].id;
							cov["label"] = this.$t('common.name') + listName[i].name + ' , '+ this.$t('common.ID') + listName[i].clientId.substring(
								listName[i].clientId.length - 6, listName[i].clientId.length);
							equipmentNameList.push(cov);
						}
						this.equipmentNameList = equipmentNameList;
						var listId = data[0].id;
						if (listId != null && listId != '1') {
							uni.setStorageSync("listName", listName);
						}

						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			selectOne() {
				var token = uni.getStorageSync("token");
				var id = this.clock;
				var that = this;
				uni.request({
					url: this.serverurl + '/TAlarmClock/selectOne',
					data: {
						"id": id
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {
						if (res.data.code) {
							var alarmClock = res.data.data;
							// console.log("list");
							var status = alarmClock.status;
							this.time = alarmClock.hour;
							if (status == '0') {
								this.status = false;
							}
							if (status == '1') {
								this.status = true;
							}
							var equipmentIds = alarmClock.equipmentIds;
							that.addEids(equipmentIds);
							this.name = alarmClock.name;
							var week = alarmClock.week;
							this.week = week;
							if (week != null || week != '') {
								var w = week.split(",").sort();
								for (var j = 0; j < w.length; j++) {
									var t = w[j];
									switch (t) {
										case "1":
											this.Monday = false;
											break;
										case "2":
											this.Tuesday = false;
											break;
										case "3":
											this.Wednesday = false;
											break;
										case "4":
											this.Thursday = false;
											break;
										case "5":
											this.Friday = false;
											break;
										case "6":
											this.Saturday = false;
											break;
										case "7":
											this.Sunday = false;
											break;
										default:

									}
								}
								var type = alarmClock.type;
								switch (type) { //0：炉头开启，1：炉头关闭，2：开始休眠，3：结束休眠
									case "0":
										this.indexType = 0;
										break;
									case "1":
										this.indexType = 1;
										break;
									case "2":
										this.indexType = 2;
										break;
									case "3":
										this.indexType = 3;
										break;
									default:

								}
							}
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}


					},
				});
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					// console.log('value => ' + e.value);
					//原始的Date对象
					// console.log('date => ' + e.date);
				}
			},
			bindPickerChange: function(e) {
				this.indexType = e.target.value
			},
			wek(num) {
				if (num == 1) {
					if (this.Monday) {
						this.Monday = false;
						this.changWeek(1, num);
					} else {
						this.Monday = true;
						this.changWeek(0, num);
					}
				}
				if (num == 2) {
					if (this.Tuesday) {
						this.Tuesday = false;
						this.changWeek(1, num);
					} else {
						this.Tuesday = true;
						this.changWeek(0, num);
					}
				}
				if (num == 3) {
					if (this.Wednesday) {
						this.Wednesday = false;
						this.changWeek(1, num);
					} else {
						this.Wednesday = true;
						this.changWeek(0, num);
					}
				}
				if (num == 4) {
					if (this.Thursday) {
						this.Thursday = false;
						this.changWeek(1, num);
					} else {
						this.Thursday = true;
						this.changWeek(0, num);
					}
				}
				if (num == 5) {
					if (this.Friday) {
						this.Friday = false;
						this.changWeek(1, num);
					} else {
						this.Friday = true;
						this.changWeek(0, num);
					}
				}
				if (num == 6) {
					if (this.Saturday) {
						this.Saturday = false;
						this.changWeek(1, num);
					} else {
						this.Saturday = true;
						this.changWeek(0, num);
					}
				}
				if (num == 7) {
					if (this.Sunday) {
						this.Sunday = false;
						this.changWeek(1, num);
					} else {
						this.Sunday = true;
						this.changWeek(0, num);
					}
				}
			},
			changWeek(type, num) {
				var week = this.week;
				var we = '';
				//减
				if (type == 0) {
					var w = week.split(",").sort();
					for (var j = 1; j < w.length; j++) {
						var t = w[j];
						if (t != num) {
							we = we + t + ","
						}
					}
				}
				//加
				if (type == 1) {
					if (week == '' || week == null) {
						we = num + ","
					} else {
						week += num + ",";
						var w = week.split(",").sort();
						for (var j = 1; j < w.length; j++) {
							var t = w[j];
							we = we + t + ","
						}
					}

				}
				this.week = we;
				// console.log('we => ' + this.week);
			},
			addEids(equipmentIds) {
				// console.log('equipmentIds' + equipmentIds);
				var eids = equipmentIds.split(",");
				var idss = this.equipmentIds;
				var is = this.equipmentNameList
				for (var k = 0; k < eids.length; k++) {
					var id = eids[k];
					if (id != "" && id != '') {
						this.equipmentIds.push(parseInt(id));
					}
				}
			},
			search() {
				// console.log("search");
				var clientId = this.searchClientId;
				var list = uni.getStorageSync("listName");
				var n = 0;
				for (var i = 0; i < list.length; i++) {
					var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
					if (code == clientId) {
						n++;
						var id = list[i].id;
						this.equipmentIds.push(id);
						break;
					}
				}
				if (n == 0) {
					uni.showModal({
						title: "提示",
						content: "找不到该机器",
						success: (res) => {

						}
					})
				}
				if (n > 0) {
					uni.showModal({
						title: "提示",
						content: "已添加该机器",
						success: (res) => {

						}
					})
				}
			},
			selectChange2(val) {
				//有改动文件 import likeButton from "../../components/like-button/like-button.vue";
				if (val == "all") {
					this.equipmentIds = [];
					var list = uni.getStorageSync("listName");
					for (var i = 0; i < list.length; i++) {
						this.equipmentIds.push(list[i].id);
					}
				} else {
					this.equipmentIds = val
				}
				// console.log('this.equipmentIds => ' + this.equipmentIds);
			},
			switchChange: function(e) {
				this.status = e.target.value;
			},
			add() {
				const param = {};
				param['week'] = this.week;
				param['hour'] = this.time;
				param['name'] = this.name;
				if (this.status) {
					param['status'] = "1";
				} else {
					param['status'] = "0";
				}
				param['type'] = this.indexType;
				var eids = '';
				var ids = this.equipmentIds;
				for (var j = 0; j < ids.length; j++) {
					var t = ids[j];
					eids = eids + t + ","
				}
				param['equipmentIds'] = eids;
				param['adminId'] = this.globalUser.id;
				// console.log("param =>" + param);
				this.addAlarmClock(param)
					.then(res => {
						if (res.code) {
							this.addAlarmClockItems(res.data);
						}
						// uni.showModal({
						// 	title: "提示",
						// 	content: res.message,
						// 	success: (re) => {
						// 		if (re.confirm) {
						// 			uni.reLaunch({
						// 				url: 'alarmClockList',
						// 			});
						// 		}
						// 	}
						// })

						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			addAlarmClockItems(alarmClock) {
				console.log("alarmClock =>" + alarmClock);
				this.addAlarmClockItem(alarmClock)
					.then(res => {
						uni.showModal({
							title: "提示",
							content: res.message,
							success: (re) => {
								if (re.confirm) {
									// uni.navigateTo({
									// 	url: 'alarmClockList',
									// });
									uni.navigateBack({
										url: 'alarmClockList'
									});
								}
							}
						})

						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			update() {
				const param = {};
				param['id'] = this.clock;
				param['week'] = this.week;
				param['name'] = this.name;
				param['hour'] = this.time;
				if (this.status) {
					param['status'] = "1";
				} else {
					param['status'] = "0";
				}
				param['type'] = this.indexType;
				var eids = '';
				var ids = this.equipmentIds;
				for (var j = 0; j < ids.length; j++) {
					var t = ids[j];
					eids = eids + t + ","
				}
				param['equipmentIds'] = eids;
				param['adminId'] = this.globalUser.id;
				this.updateAlarmClock(param)
					.then(res => {
						uni.showToast({
							title: res.message,
							duration: 2000
						});
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			delet() {
				uni.showModal({
					title: "提示",
					content: "是否删除？",
					success: (res) => {
						if (res.confirm) {
							var eids = '';
							var ids = this.equipmentIds;
							for (var j = 0; j < ids.length; j++) {
								var t = ids[j];
								eids = eids + t + ","
							}
							var token = uni.getStorageSync("token");
							uni.request({
								url: this.serverurl + '/TAlarmClock/delete',
								data: {
									"id": this.clock,
									"adminId": this.globalUser.id,
									"equipmentIds": eids,
									"type": this.indexType
								},
								header: {
									'token': token
								},
								method: "POST",
								success: (res) => {
									uni.showModal({
										title: "提示",
										content: res.data.message,
										success: (re) => {
											if (re.confirm) {
												// uni.navigateTo({
												// 	url: 'alarmClockList',
												// });
												uni.navigateBack({
													url: 'alarmClockList'
												});
											}
										}
									})

								},
							});
						}
					}
				});

			},
		}
	}
</script>

<style>
	.test {
		text-align: center;
		padding: 10px 0;
	}

	.time {
		font-size: 78upx;
	}

	.btime {
		margin: 20upx;
		font-size: 28upx;
	}

	/* 	button {
		margin: 20upx;
		font-size: 28upx;
	} */

	/* #ifdef MP-ALIPAY */
	.uni-badge {
		margin-left: 20rpx;
	}

	/* #endif */
	.uni-badge {
		font-size: 40upx;
	}

	.example-body {
		flex-direction: row;
		justify-content: flex-start;
		padding-bottom: 15upx;
		font-size: 40upx;
	}

	.uni-badge-left-margin {
		font-size: 40upx;
		margin-left: 50upx;
	}

	.uni-list-cell {
		padding-top: 20upx;
		padding-bottom: 10upx;
		font-size: 35upx;
	}

	.line {
		height: 2upx;
		background: #8C959F;
	}

	.search {
		width: 100%;
		padding-top: 15upx;
		padding-bottom: 25upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.search-title {
		width: 28%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}

	.search-input {
		width: 45%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}
	.search-input2 {
		width: 65%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}

	.search-button {
		width: 20%;
		padding-left: 7upx;
		text-align: center;
	}

	.select-item {
		/* padding-top: 20upx; */
	}

	.tr {
		padding-top: 15upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 48upx;
		font-family: "PingFang-SC-Bold";
		position: fixed;
		bottom: 100upx;
		width: 100%;
	}

	.button {
		margin: auto;
		width: 60%;
		height: 100upx;
	}

	.p1 {
		font-size: 48upx;
	}
</style>