airConditionerWebManager/src/views/systemSet/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">系统设置</div>
						</div>
					</div>
					<div class="cell-body">
						<el-form ref="formData" :rules="formRules" :model="formData">
							<el-form-item prop="noOne">
								<span>空调开启半小时不足1小时为</span>
								<el-input v-model="formData.noOne" maxlength="2" placeholder="请输入金额"></el-input>
								<span>元</span>
							</el-form-item>
							<el-form-item prop="one">
								<span>空调开启每小时为</span>
								<el-input v-model="formData.one" maxlength="2" placeholder="请输入金额"></el-input>
								<span>元</span>
							</el-form-item>
							<el-form-item prop="isauto">
								<span>自动扣款</span>
								<el-switch v-model="formData.isauto" active-color="#2B4CFE"></el-switch>
							</el-form-item>
							<el-form-item prop="start_tiao">
								<span>账户余额少于</span>
								<el-input v-model="formData.start_tiao" maxlength="2" placeholder="请输入金额"></el-input>
								<span>元，不能开启空调</span>
							</el-form-item>
							<el-form-item prop="send_jian">
								<span>每隔</span>
								<el-input v-model="formData.send_jian" maxlength="2" placeholder="请输入小时数"></el-input>
								<span>小时，系统自动发送通知给操作员</span>
							</el-form-item>
							<el-form-item prop="send_start">
								<span>每天</span>
								<el-time-picker :editable="false" v-model="formData.send_start" :picker-options="{
										    start: '00:00',step: '00:01',end: '23:59'
									}" value-format="HH:mm:ss" placeholder="请输入时间" :clearable="false">
								</el-time-picker>
								<span>为截止时间，系统自动发送通知给操作员</span>
							</el-form-item>
							<el-form-item prop="phone">
								<span>使用问题联系方式</span>
								<el-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11" class="phone-class"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" round @click="handle_submit">确认提交</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		updateSet,
		getSet
	} from '@/api/systemSet';

	export default {
		data() {
			var checkMoney = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('金额不能为空'));
				}
				setTimeout(() => {
					var reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
					if (!reg.test(value)) {
						callback(new Error('请输入数值型，可保留2位小数'));
					} else if (value < 0.01 || value > 10) {
						callback(new Error('范围在0.01-10'));
					} else {
						callback();
					}
				}, 100);
			}
			var checkTime = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('不能为空'));
				}
				setTimeout(() => {
					var reg = /^(\d{1,})$/
					if (!reg.test(value)) {
						callback(new Error('请输入整数值'));
					} else if (value < 1 || value > 10) {
						callback(new Error('范围在1-10'));
					} else {
						callback();
					}
				}, 100);
			}
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入手机号'));
				}
				setTimeout(() => {
					var reg = /^1[3456789]\d{9}$/
					if (!reg.test(value)) {
						callback(new Error('手机号格式不对'));
					} else {
						callback();
					}
				}, 100);
			}
			return {
				formData: {
					noOne: '', // 半小时不足1小时
					one: '', // 每小时
					isauto: true, // 自动扣款
					start_tiao: '',
					send_jian: '',
					send_start: '',
					phone: '',
					state: 1,
				},
				currentPage: 1,
				rows: 6,
				// 校验规则
				formRules: {
					noOne: [{
						validator: checkMoney
					}],
					one: [{
						validator: checkMoney
					}],
					start_tiao: [{
						validator: checkMoney
					}],
					send_jian: [{
						validator: checkTime
					}],
					phone: [{
						validator: checkPhone
					}]
				}
			}
		},
		mounted() {
			this.get_data()
		},
		methods: {
			/**
			 * 获取配置数据
			 */
			get_data() {
				const params = {
					page: this.currentPage,
					rows: this.rows
				}
				// 开始发送请求，获取配置数据
				getSet(params).then((res) => {
					// console.log(res.rows[0]);
					let r = res.rows[0]
					this.formData.noOne = r.noOne
					this.formData.one = r.one
					this.formData.isauto = r.isauto == 1 ? true : false
					this.formData.start_tiao = r.start_tiao
					this.formData.send_jian = r.send_jian
					this.formData.send_start = r.send_start
					this.formData.phone = r.phone
					this.formData.state = r.state
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 提交修改后的配置
			 */
			handle_submit() {
				this.$refs["formData"].validate(validate => {
					if (validate) {
						//form表单校验通过,可以进行下一步操作
						const params = {
							id: 1,
							noOne: this.formData.noOne,
							one: this.formData.one,
							isauto: this.formData.isauto == true ? 1 : 0,
							start_tiao: this.formData.start_tiao,
							send_jian: this.formData.send_jian,
							send_start: this.formData.send_start,
							phone: this.formData.phone,
							state: this.formData.state
						}
						// 开始发送更新配置请求
						updateSet(params).then((res) => {
							// console.log(res);
							if (res.code === 200) {
								this.$message.success(res.message)
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title {
							font-size: 22px;
							font-family: Microsoft YaHei-3970(82674968);
							font-weight: bold;
							color: #1A202B;
						}
					}

					.cell-body {
						height: 630px;

						::v-deep .el-form-item {
							display: flex;
							align-items: center;
							white-space: nowrap;

							span {
								font-size: 16px;
								font-family: Microsoft YaHei-3970(82674968);
								color: #46515E;
							}

							.el-input,
							.el-input__inner {
								width: 90px;
								text-align: center;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								color: #46515E;
							}

							.el-input {
								margin: 0 10px;
								width: 140px;

								.el-input__inner {
									width: 140px;
								}
							}

							.el-switch {
								margin: 0 10px;
							}

							.el-date-editor--time {
								width: 150px;

								.el-input__inner {
									width: 150px;
								}
							}

							.phone-class {
								width: 160px;

								.el-input__inner {
									width: 160px;
								}
							}

							.el-button.el-button--primary {
								background: #3660FF;
								font-size: 18px;

								span {
									color: #FFFFFF;
								}
							}

							.el-form-item__error {
								font-size: 16px
							}
						}
					}
				}
			}
		}
	}
</style>