<script setup>
|
import { ref, onMounted } from "vue";
|
import { getAreaTreeApi } from "@/api/area";
|
import { formatAreaTree } from "@/utils/tree";
|
import { updateLock, addLock, getScreenType, getScreenProduct } from "@/api/lockManager.js";
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm } = useElement();
|
const areaList = ref([]);
|
const emit = defineEmits(["close", "ok"]);
|
const formRef = ref();
|
const typeList = ref([
|
|
]);
|
const productList = ref([
|
|
]);
|
const rules = {
|
count: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
{
|
validator: (rule, value, callback) => {
|
const reg = /^\d+$/;
|
if (!reg.test(value)) {
|
callback(new Error("只能为数字"));
|
} else {
|
if (value > 1000) {
|
callback(new Error("最大支持批量新增1000套"));
|
} else if (value < 1) {
|
callback(new Error("输入不能小于1"));
|
} else {
|
callback();
|
}
|
}
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
areaId: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
{
|
validator: (rule, value, callback) => {
|
if (Object.prototype.toString.call(value) === '[object Array]' && !value.length) {
|
callback(new Error("请选择区域"));
|
} else {
|
callback();
|
}
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
lockName: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
screenFlag: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
screenBoxType: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
screenBoxProduct: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
// 经度
|
longitude: [
|
{
|
validator: (rule, value, callback) => {
|
let reg = /^-?1?(\d{1,2}(\.\d+)?|\d{1}(\.\d+))$/;
|
if (value && !reg.test(value)) {
|
callback(new Error("请输入正确的经度"));
|
} else {
|
callback();
|
}
|
|
},
|
trigger: ["change", "blur"],
|
},
|
],
|
// 纬度
|
latitude: [
|
{
|
validator: (rule, value, callback) => {
|
let reg = /^-?(\d{1,2}(\.\d+)?|\d{1}(\.\d+))$/;
|
if (value && !reg.test(value)) {
|
callback(new Error("请输入正确的纬度"));
|
} else {
|
callback();
|
}
|
|
},
|
trigger: ["change", "blur"],
|
},
|
]
|
};
|
const formLock = ref({
|
areaId: "",
|
lockId: "",
|
lockType: 3,
|
lockName: "",
|
count: 1,
|
});
|
|
const lockTypes = ref([
|
{
|
label: "实体锁",
|
value: 3,
|
},
|
]);
|
|
const props = defineProps({
|
info: {
|
type: Object,
|
},
|
isAdd: {
|
type: Boolean,
|
default: false,
|
},
|
isBatch: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
function ok() {
|
if (props.isAdd) {
|
add();
|
} else {
|
update();
|
}
|
}
|
|
async function getTypeList() {
|
let res = await getScreenType();
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
// console.log(data);
|
_list = data2;
|
}
|
typeList.value = _list;
|
}
|
|
async function getProdList () {
|
let res = await getScreenProduct();
|
let { code, data,data2 } = res;
|
let _list = [];
|
if (code && data) {
|
// console.log(data);
|
_list = data2;
|
}
|
productList.value = _list;
|
}
|
|
async function add() {
|
let valid = await formRef.value.validate(() => { });
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let areaId;
|
if (formLock.value.areaId && formLock.value.areaId.length) {
|
areaId = formLock.value.areaId[formLock.value.areaId.length - 1];
|
}
|
let params = {};
|
let param2 = {
|
lockName: formLock.value.lockName,
|
areaId,
|
// 目前固定
|
lockType: formLock.value.lockType,
|
screenFlag: formLock.value.screenFlag,
|
screenBoxType: formLock.value.screenBoxType,
|
screenBoxProduct: formLock.value.screenBoxProduct,
|
longitude: formLock.value.longitude || 0,
|
latitude: formLock.value.latitude || 0,
|
};
|
if (props.isBatch) {
|
params["num"] = formLock.value.count;
|
}
|
let loading = $loading();
|
addLock(params, param2)
|
.then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
emit("ok");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
|
async function update() {
|
// lockId lockName areaId lockType
|
let valid = await formRef.value.validate(() => { });
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let areaId;
|
if (formLock.value.areaId && formLock.value.areaId.length) {
|
areaId = formLock.value.areaId[formLock.value.areaId.length - 1];
|
}
|
let params = {
|
lockId: formLock.value.lockId,
|
lockName: formLock.value.lockName,
|
areaId,
|
// 目前固定
|
lockType: formLock.value.lockType,
|
screenFlag: formLock.value.screenFlag,
|
screenBoxType: formLock.value.screenBoxType,
|
screenBoxProduct: formLock.value.screenBoxProduct,
|
longitude: formLock.value.longitude || 0,
|
latitude: formLock.value.latitude || 0,
|
};
|
let loading = $loading();
|
updateLock(params)
|
.then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
emit("ok");
|
} else {
|
$message.error("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
}
|
|
function close() {
|
emit("close");
|
}
|
|
async function getAreaTree() {
|
try {
|
const res = await getAreaTreeApi();
|
let _data = [];
|
if (res.code === 1 && res.data) {
|
_data = res.data2;
|
}
|
const treeList = [];
|
let ids = _data.map((v) => v.id);
|
for (let i = 0; i < _data.length; i++) {
|
formatAreaTree(_data[i], ids, treeList);
|
}
|
// console.log(_data, 'data');
|
// console.log(treeList, 'treeList');
|
areaList.value = treeList;
|
} catch (e) {
|
console.log(e);
|
}
|
}
|
|
onMounted(() => {
|
if (!props.isAdd) {
|
console.log("info ", props.info, "=============");
|
|
formLock.value = props.info;
|
}
|
getAreaTree();
|
getTypeList();
|
getProdList();
|
});
|
</script>
|
|
<template>
|
<el-form ref="formRef" label-position="left" label-width="auto" :model="formLock" :rules="rules"
|
style="max-width: 600px">
|
<!-- 所属区域 -->
|
<el-form-item label="所属区域" label-position="right" prop="areaId">
|
<el-cascader class="select" filterable clearable v-model="formLock.areaId"
|
:props="{ value: 'id', checkStrictly: true }" :options="areaList"><template #default="{ node, data }">
|
<span>{{ data.label }}</span>
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
</template></el-cascader>
|
</el-form-item>
|
<!-- 类型 -->
|
<el-form-item label="类型" label-position="right" prop="lockType">
|
<el-select v-model="formLock.lockType" placeholder="Select" style="width: 240px">
|
<el-option v-for="item in lockTypes" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<!-- 锁具名称 -->
|
<el-form-item label="锁具名称" label-position="right" prop="lockName">
|
<el-input v-model="formLock.lockName" />
|
</el-form-item>
|
<!-- 锁具安装位置 1屏柜 2 其他 -->
|
<el-form-item label="锁具安装位置" label-position="right" prop="screenFlag">
|
<el-select v-model="formLock.screenFlag" placeholder="请选择" style="width: 240px">
|
<el-option label="屏柜" :value="1" />
|
<el-option label="其他" :value="2" />
|
</el-select>
|
</el-form-item>
|
|
<!-- 锁具安装位置 类型 -->
|
<el-form-item label="锁具安装位置类型" label-position="right" prop="screenBoxType">
|
<el-select v-model="formLock.screenBoxType" filterable allow-create placeholder="请选择或手动输入后选择" style="width: 240px">
|
<el-option v-for="(item, idx) in typeList" :key="'type_' + idx" :label="item" :value="item" />
|
</el-select>
|
</el-form-item>
|
|
<!-- 锁具安装位置 品牌 -->
|
<el-form-item label="锁具安装位置品牌" label-position="right" prop="screenBoxProduct">
|
<el-select v-model="formLock.screenBoxProduct" filterable allow-create placeholder="请选择或手动输入后选择" style="width: 240px">
|
<el-option v-for="(item, idx) in productList" :key="'product_' + idx" :label="item" :value="item" />
|
</el-select>
|
</el-form-item>
|
<!-- 经度 -->
|
<el-form-item label="经度" label-position="right" prop="longitude">
|
<el-input v-model="formLock.longitude" />
|
</el-form-item>
|
<!-- 纬度 -->
|
<el-form-item label="纬度" label-position="right" prop="latitude">
|
<el-input v-model="formLock.latitude" />
|
</el-form-item>
|
<!-- 批量添加数量 -->
|
<el-form-item label="批量添加数量" label-position="right" prop="count" v-if="isBatch">
|
<el-input v-model="formLock.count" />
|
</el-form-item>
|
</el-form>
|
<div class="footer">
|
<el-button size="small" @click="close">取消</el-button>
|
<el-button type="primary" size="small" @click="ok">确定</el-button>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
:deep(.select) {
|
width: 100%;
|
}
|
|
.footer {
|
text-align: right;
|
}
|
</style>
|
