<script setup>
|
import { ref, reactive, computed, onMounted } from "vue";
|
import { setLockBl } from "@/api/lockManager.js";
|
import useElement from "@/hooks/useElement.js";
|
import { getAreaUserLock } from '@/api/lockManager.js';
|
import { checkSnId } from '@/api/user.js';
|
import {ElMessageBox} from 'element-plus'
|
|
|
const { $loading, $message, $confirm } = useElement();
|
|
const formRef = ref();
|
const userList = ref([]);
|
const keyList = ref([]);
|
const lockList = ref([]);
|
const form1 = reactive({
|
startTime: "",
|
stopTime: "",
|
lockNames: [],
|
});
|
|
const rules = {
|
startTime: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
stopTime: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
lockNames: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
{
|
validator: (rule, value, callback) => {
|
if (!value.length) {
|
callback(new Error("请选择锁具"));
|
} else {
|
callback();
|
}
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
};
|
|
const isEdit = computed(() => !!props.info?.uname);
|
const $emit = defineEmits(["close", "ok"]);
|
function close() {
|
$emit("close");
|
}
|
|
// 查询所有锁具
|
async function getLockList() {
|
let res = await getAreaUserLock();
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
lockList.value = _list;
|
}
|
|
async function checkPwd(pwd) {
|
let res = await checkSnId(pwd);
|
let { code, data, data2 } = res;
|
if (code && data) {
|
return true;
|
} else {
|
return false;
|
}
|
}
|
|
async function onSubmit() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
ElMessageBox.prompt('请输入用户密码', '系统提示', {
|
inputType: 'password',
|
inputPattern: /^.+$/,
|
inputErrorMessage: '密码不能为空',
|
})
|
.then(async ({ value: pwd }) => {
|
console.log('pwd', pwd, '=============');
|
|
// 验证密码
|
let res_pwd = await checkPwd(pwd);
|
if (res_pwd) {
|
$message({
|
type: 'success',
|
message: '密码正确'
|
});
|
} else {
|
$message({
|
type: 'error',
|
message: '密码错误'
|
});
|
return false;
|
}
|
|
let params = {
|
keyName: 123,
|
};
|
console.log("params", params, "=============");
|
|
let loading = $loading();
|
setLockBl(params)
|
.then((res) => {
|
let { code, data } = res;
|
if (code && data) {
|
$emit("ok");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
});
|
|
}
|
|
|
onMounted(() => {
|
getLockList();
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="formRef" :model="form1" label-width="80px" :rules="rules">
|
<el-form-item label="锁具" prop="lockNames">
|
<el-select v-model="form1.lockNames" clearable multiple collapse-tags collapse-tags-tooltip>
|
<el-option v-for="item in lockList" :key="'lock_' + item.lockId" :label="`${item.lockName} (${item.blState ? '蓝牙开启' : '蓝牙关闭'})`" :value="item.lockName">{{item.lockName}} <span :class="{success: !item.blState, error: item.blState}">({{item.blState ? '蓝牙开启' : '蓝牙关闭'}})</span></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="开始时间" prop="startTime">
|
<el-date-picker v-model="form1.startTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
|
placeholder="" />
|
</el-form-item>
|
<el-form-item label="结束时间" prop="stopTime">
|
<el-date-picker v-model="form1.stopTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
|
placeholder="" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit">新增</el-button>
|
<el-button @click="close">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
:deep(.select) {
|
width: 100%;
|
}
|
.success {
|
color: green;
|
font-weight: bold;
|
}
|
.error {
|
color: red;
|
font-weight: bold;
|
}
|
</style>
|
