<script setup>
|
import { ref, reactive, computed, onMounted } from "vue";
|
import { getAllUserName } from "@/api/user";
|
import { addAuth, updateAuth } from "@/api/auth";
|
import useElement from "@/hooks/useElement.js";
|
import { getKeyInfAuth } from '@/api/keys.js';
|
import { getAreaUserLock } from '@/api/lockManager.js';
|
|
const { $loading, $message, $confirm } = useElement();
|
const props = defineProps({
|
info: {
|
type: Object,
|
},
|
});
|
const formRef = ref();
|
const userList = ref([]);
|
const keyList = ref([]);
|
const lockList = ref([]);
|
const form1 = reactive({
|
uname: "",
|
uid: "",
|
keyId: "",
|
lockIds: [],
|
descript: "",
|
});
|
|
const rules = {
|
uname: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
keyId: [
|
{
|
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 getAllUser() {
|
let res = await getAllUserName();
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
userList.value = _list;
|
}
|
|
// 查询所有钥匙
|
async function getKeyList() {
|
let res = await getKeyInfAuth();
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
// _list.unshift({ keyId: 0, keyName: "蓝牙钥匙" });
|
keyList.value = _list;
|
}
|
|
// 查询所有锁具
|
async function getLockList() {
|
let res = await getAreaUserLock();
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
lockList.value = _list;
|
}
|
|
async function update() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
let params = {
|
// uname: form1.uname.trim(),
|
uname: form1.uname,
|
keyId: form1.keyId,
|
keyName: keyList.value.find(item => item.keyId === form1.keyId)?.keyName,
|
lockInfs: form1.lockIds.map(v => ({ lockId: v, lockName: lockList.value.find(item => item.lockId === v)?.lockName })),
|
descript: form1.descript.trim(),
|
};
|
console.log("params update", params, "=============");
|
|
let loading = $loading();
|
updateAuth(props.info.id, 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();
|
});
|
}
|
async function onSubmit() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
let params = {
|
// uname: form1.uname.trim(),
|
uname: form1.uname,
|
keyId: form1.keyId,
|
keyName: keyList.value.find(item => item.keyId === form1.keyId)?.keyName,
|
lockInfs: form1.lockIds.map(v => ({ lockId: v, lockName: lockList.value.find(item => item.lockId === v)?.lockName })),
|
descript: form1.descript.trim(),
|
};
|
console.log("params", params, "=============");
|
|
let loading = $loading();
|
addAuth(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(() => {
|
let info = props.info;
|
console.log('info', info, '=============');
|
|
if (info) {
|
form1.uname = info.uname;
|
// form1.uid = info.uid;
|
form1.keyId = info.keyId;
|
form1.lockIds = [info.lockId];
|
form1.descript = info.descript;
|
}
|
getAllUser();
|
getKeyList();
|
getLockList();
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="formRef" :model="form1" label-width="80px" :rules="rules">
|
<el-form-item label="授权人员" prop="uname">
|
<el-select v-model="form1.uname">
|
<el-option v-for="(item, idx) in userList" :key="'user_' + idx" :label="item" :value="item" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="授权钥匙" prop="keyId">
|
<el-select v-model="form1.keyId">
|
<el-option v-for="item in keyList" :key="'key_' + item.keyId" :label="item.keyName" :value="item.keyId" />
|
</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" :value="item.lockId" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="任务说明" prop="descript">
|
<el-input v-model="form1.descript" :rows="2" type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="isEdit" type="primary" @click="update">修改</el-button>
|
<el-button v-else 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%;
|
}
|
</style>
|
