<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'
|
import useStation from "@/hooks/useStationList.js";
|
const {
|
stationName1,
|
stationName2,
|
stationName3,
|
stationName4,
|
stationList1,
|
stationList2,
|
stationList3,
|
stationList4,
|
lockList,
|
} = useStation();
|
|
|
const { $loading, $message, $confirm } = useElement();
|
|
const formRef = ref();
|
const form1 = reactive({
|
startTime: "",
|
stopTime: "",
|
lockIds: [],
|
});
|
|
const rules = {
|
startTime: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
stopTime: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
lockIds: [
|
{
|
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 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;
|
}
|
|
// 如果选中的锁中有蓝牙是打开状态的,那么就提示并退出
|
let lockIds = form1.lockIds;
|
let openList = [];
|
lockIds.map(v => {
|
let _lock = lockList.value.find(item => item.lockId === v);
|
if (_lock?.blState) {
|
openList.push(_lock);
|
}
|
});
|
if (openList.length) {
|
$message({
|
type: 'error',
|
message: `锁具${openList.map(v => v.lockName).join(',')}的蓝牙已经打开,请关闭后再操作`
|
});
|
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 = form1.lockIds.map(v => ({ lockId: v, startTime: form1.startTime, stopTime: form1.stopTime }));
|
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();
|
});
|
});
|
|
}
|
|
function stationChange() {
|
form1.lockIds = [];
|
}
|
|
|
onMounted(() => {
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="formRef" :model="form1" label-width="80px" :rules="rules">
|
<el-form-item label="省">
|
<el-select
|
v-model="stationName1"
|
clearable
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList1"
|
:key="'l1_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="市">
|
<el-select
|
v-model="stationName2"
|
clearable
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList2"
|
:key="'l2_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="区县">
|
<el-select
|
v-model="stationName3"
|
clearable
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList3"
|
:key="'l3_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="机房">
|
<el-select
|
v-model="stationName4"
|
clearable
|
placeholder="请选择"
|
style="width: 180px"
|
@change="stationChange"
|
>
|
<el-option
|
v-for="(item, idx) in stationList4"
|
:key="'l4_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="锁具" prop="lockIds">
|
<el-select
|
v-model="form1.lockIds"
|
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.lockId"
|
>{{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>
|
