web/apsDashboard-1.git

			@@ -1,10 +1,242 @@
			<template>
			<div class="AuthorizationSetting">AuthorizationSetting</div>
			<div class="AuthorizationSetting">
			<div class="content">
			<div class="title">设备授权配置</div>

			<el-form
			:model="settingForm"
			:rules="rules"
			ref="joinForm"
			class="join-form"
			>
			<!-- 授权管理方式 -->
			<el-form-item>
			<div class="row">
			<div class="item-title">设备授权管理方式</div>
			<div class="inputContain">
			<el-select
			v-model="settingForm.need_auth_pwd"
			placeholder="请选择"
			size="small"
			:popper-append-to-body="false"
			>
			<el-option
			v-for="item in typeOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			</div>
			</el-form-item>

			<!-- 授权密码 -->
			<el-form-item prop="auth_pwd" v-if="settingForm.need_auth_pwd == 1">
			<div class="row">
			<div class="item-title">授权密钥</div>
			<div class="inputContain">
			<el-input
			v-model="settingForm.auth_pwd"
			placeholder="请输入6位授权密钥"
			maxlength="6"
			show-auth_pwd
			></el-input>
			</div>
			</div>
			</el-form-item>
			</el-form>

			<div class="save" @click="submit">保存</div>
			</div>
			</div>
			</template>

			<script>
			export default {};
			import { getAuthInfo, setAuthInfo } from "@/api/system";

			export default {
			created() {
			this.getAuth();
			},
			data() {
			return {
			settingForm: {
			need_auth_pwd: 0, //授权管理方式
			auth_pwd: "", //授权密钥
			id: "", //设备id
			},
			typeOptions: [
			{
			label: "始终允许",
			value: 0,
			},
			{
			label: "密码校验",
			value: 1,
			},
			], //授权管理方式选项
			rules: {
			auth_pwd: [
			{ min: 6, max: 6, message: "长度为6个字符", trigger: "blur" },
			],
			}, //正则校验
			};
			},
			methods: {
			//获取授权信息
			async getAuth() {
			const res = await getAuthInfo();
			if (res.code === 200 && res.success) {
			//授权数据回填
			this.settingForm = res.data;
			} else {
			this.$notify.error({
			title: "错误",
			message: "获取授权信息失败",
			});
			}
			},
			//提交授权配置
			async submit() {
			const res = await setAuthInfo(this.settingForm);
			if (res.code === 200 && res.success) {
			this.$notify.success({
			title: "成功",
			message: "修改成功",
			});
			} else {
			this.$notify.error({
			title: "错误",
			message: "修改失败",
			});
			}
			},
			},
			};
			</script>

			<style>
			<style lang="scss" scoped>
			.AuthorizationSetting {
			position: relative;

			.content {
			width: 456px;
			margin: 0 auto;
			}

			.title {
			height: 48px;
			font-size: 16px;
			line-height: 48px;
			color: #4f4f4f;
			font-weight: bold;
			background: #f2f2f7;
			border-radius: 8px;
			margin-bottom: 4px;
			}

			.row {
			margin: 0 auto;
			height: 48px;
			margin-bottom: 4px;
			background-color: #f2f2f7;
			border-radius: 8px;

			line-height: 48px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f7;
			border-radius: 8px;
			padding: 0 20px;

			.item-title {
			font-size: 14px;
			color: #4f4f4f;
			font-weight: 700;
			}

			.el-select ::v-deep {
			width: 280px;
			height: 32px;

			input {
			border-radius: 20px;
			border-color: #fff;
			padding-left: 20px;
			font-size: 12px;
			color: #333;
			font-weight: 700;
			}

			.popper__arrow,
			.popper__arrow::after {
			display: none;
			}

			.el-select-dropdown {
			top: 30px;
			height: 84px;
			box-shadow: 0px 4px 12px rgba(5, 95, 230, 0.25);
			border-radius: 8px;

			.el-select-dropdown__item {
			font-size: 12px;
			font-weight: 400;
			color: #333;

			&.selected {
			span {
			color: #4e94ff;
			}
			}
			}
			}
			}

			.el-input ::v-deep {
			width: 280px;
			height: 32px;

			input {
			height: 32px;
			border-radius: 20px;
			border-color: #fff;
			padding-left: 20px;
			font-size: 12px;
			color: #333;
			font-weight: 700;

			&::-webkit-input-placeholder {
			/* WebKit browsers */
			color: #828282;
			font-weight: normal;
			font-size: 12px;
			}
			}
			}
			}

			.save {
			position: absolute;
			top: 375px;
			left: 50%;
			margin-left: -94px;
			width: 188px;
			height: 40px;
			background: var(--colorCard);
			border-radius: 25px;
			font-weight: bold;
			font-size: 16px;
			line-height: 40px;
			color: #fff;
			text-align: center;
			cursor: pointer;
			}

			.el-form-item {
			margin-bottom: 0;
			}
			}
			</style>