<script setup>
|
import { ref, reactive, computed, onMounted } from "vue";
|
// import { addKey, updateKey } from "@/api/keys";
|
import useElement from "@/hooks/useElement.js";
|
import { getAllUserName } from "@/api/user";
|
const { $loading, $message, $confirm } = useElement();
|
import {
|
addCard,
|
delCard,
|
} from '@/api/keys.js';
|
|
const props = defineProps({
|
isUnbind: {
|
type: Boolean,
|
default: false,
|
},
|
lockId: {
|
type: [String, Number],
|
default: "",
|
},
|
list: {
|
type: Array,
|
default: () => [],
|
},
|
});
|
const formRef = ref();
|
|
const form1 = reactive({
|
cardIdInput: "",
|
cardIdSelect: "",
|
});
|
|
const rules = {
|
cardIdInput: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
cardIdSelect: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
};
|
|
const $emit = defineEmits(["cancel", "success"]);
|
function close() {
|
$emit("cancel");
|
}
|
|
|
|
|
|
async function unBindCard() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let loading = $loading();
|
|
delCard(form1.cardIdSelect, props.lockId).then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
// console.log(data);
|
$message.success("操作成功");
|
$emit("success");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
async function bindCard() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
form1.cardIdInput = form1.cardIdInput.trim();
|
|
// 如果输入的卡号存在于list中,那么就提示并退出
|
if (props.list.includes(form1.cardIdInput)) {
|
$message.error("该卡号已存在");
|
return false;
|
}
|
|
|
let loading = $loading();
|
|
addCard(form1.cardIdInput, props.lockId).then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
console.log(data);
|
$message.success("操作成功");
|
$emit("success");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
|
onMounted(() => {
|
let info = props.info;
|
if (info) {
|
form1.uname = info.uname;
|
form1.uid = info.uid;
|
form1.keyType = info.keyType;
|
form1.keyName = info.keyName;
|
form1.keyNumber = info.keyNumber;
|
}
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="formRef" :model="form1" label-width="80px" :rules="rules">
|
<el-form-item v-if="!isUnbind" label="电子卡号" prop="cardIdInput">
|
<el-input v-model="form1.cardIdInput"></el-input>
|
</el-form-item>
|
<el-form-item v-else label="电子卡号" prop="cardIdSelect">
|
<el-select v-model="form1.cardIdSelect">
|
<el-option v-for="(item, idx) in list" :key="'key_' + idx" :label="item" :value="item" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="isUnbind" type="primary" @click="unBindCard">解绑</el-button>
|
<el-button v-else type="primary" @click="bindCard">绑定</el-button>
|
<el-button @click="close">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
:deep(.select) {
|
width: 100%;
|
}
|
</style>
|
