<script setup>
|
import { ref, onMounted, reactive, computed } 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";
|
import useStation from '@/hooks/useStationList.js';
|
const {
|
stationName1,
|
stationName2,
|
stationName3,
|
stationName4,
|
stationList1,
|
stationList2,
|
stationList3,
|
stationList4,
|
getProviceList, getCityList, getCountryList, getStationList
|
} = useStation();
|
|
|
const { $loading, $message, $confirm } = useElement();
|
const areaList = ref([]);
|
const emit = defineEmits(["close", "ok"]);
|
const formRef = ref();
|
const typeList = ref([
|
|
]);
|
const productList = ref([
|
|
]);
|
const rules = {
|
lockName: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationName1: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationName2: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationName3: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationName4: [
|
{
|
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"],
|
},
|
],
|
lockIp: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["change", "blur"],
|
},
|
{
|
validator: (rule, value, callback) => {
|
let reg = /^((25[0-5]|2[0-4][0-9]|1[0-9]{1,2}|[1-9]|[1-9][0-9]|0)\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{1,2}|[1-9]|[1-9][0-9]|0)$/;
|
|
if (value && !reg.test(value)) {
|
callback(new Error("请输入正确的IP地址"));
|
} else {
|
callback();
|
}
|
},
|
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 = reactive({
|
lockName: "",
|
lockId: "",
|
lockType: 1,
|
lockAddress: '',
|
screenFlag: 1,
|
screenBoxType: '',
|
screenBoxProduct: '',
|
longitude: '',
|
latitude: '',
|
stationName1: stationName1.value,
|
stationName2: stationName2.value,
|
stationName3: stationName3.value,
|
stationName4: stationName4.value,
|
lockIp: '127.0.0.1',
|
stationId: '',
|
});
|
|
const layout = {
|
gutter: 16,
|
span: 12,
|
};
|
|
function stationNameChange(idx, val) {
|
console.log('idx, val', idx, val, '=============');
|
|
switch (idx) {
|
case 1:
|
stationName1.value = val;
|
formLock.stationName2 = '';
|
formLock.stationName3 = '';
|
formLock.stationName4 = '';
|
break;
|
case 2:
|
stationName2.value = val;
|
formLock.stationName3 = '';
|
formLock.stationName4 = '';
|
break;
|
case 3:
|
stationName3.value = val;
|
formLock.stationName4 = '';
|
break; default:
|
break;
|
}
|
}
|
|
const lockTypes = ref([
|
{
|
label: "实体锁",
|
value: 3,
|
},
|
]);
|
|
const props = defineProps({
|
info: {
|
type: Object,
|
},
|
isAdd: {
|
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 params = {
|
lockName: formLock.lockName,
|
// 目前固定
|
lockType: formLock.lockType,
|
lockName: formLock.lockName,
|
lockAddress: formLock.lockAddress,
|
screenFlag: formLock.screenFlag,
|
screenBoxType: formLock.screenBoxType,
|
screenBoxProduct: formLock.screenBoxProduct,
|
stationName1: formLock.stationName1,
|
stationName2: formLock.stationName2,
|
stationName3: formLock.stationName3,
|
stationName4: formLock.stationName4,
|
lockIp: formLock.lockIp,
|
longitude: formLock.longitude || 0,
|
latitude: formLock.latitude || 0,
|
};
|
let loading = $loading();
|
addLock(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);
|
});
|
}
|
|
async function update() {
|
// lockId lockName areaId lockType
|
let valid = await formRef.value.validate(() => { });
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let params = {
|
lockName: formLock.lockName,
|
// 目前固定
|
lockType: formLock.lockType,
|
lockName: formLock.lockName,
|
lockAddress: formLock.lockAddress,
|
screenFlag: formLock.screenFlag,
|
screenBoxType: formLock.screenBoxType,
|
screenBoxProduct: formLock.screenBoxProduct,
|
stationName1: formLock.stationName1,
|
stationName2: formLock.stationName2,
|
stationName3: formLock.stationName3,
|
stationName4: formLock.stationName4,
|
lockId: formLock.lockId,
|
lockIp: formLock.lockIp,
|
longitude: formLock.longitude || 0,
|
latitude: formLock.latitude || 0,
|
stationId: formLock.stationId
|
};
|
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");
|
}
|
|
|
onMounted(async() => {
|
if (!props.isAdd) {
|
console.log("info ", props.info, "=============");
|
for(let key in props.info){
|
formLock[key] = props.info[key];
|
}
|
|
await getProviceList();
|
stationName1.value = props.info.stationName1;
|
await getCityList();
|
stationName2.value = props.info.stationName2;
|
await getCountryList();
|
stationName3.value = props.info.stationName3;
|
await getStationList();
|
stationName4.value = props.info.stationName4;
|
}
|
getTypeList();
|
getProdList();
|
});
|
</script>
|
|
<template>
|
<el-form
|
ref="formRef"
|
label-position="left"
|
label-width="auto"
|
:model="formLock"
|
:rules="rules"
|
style="max-width: 680px"
|
>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="24">
|
<!-- 锁具名称 -->
|
<el-form-item label="锁具名称" label-position="right" prop="lockName">
|
<el-input v-model="formLock.lockName" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<!-- 省 -->
|
<el-form-item label="省" label-position="right" prop="stationName1">
|
<el-select
|
v-model="formLock.stationName1"
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="(val) => stationNameChange(1, val)"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList1"
|
:key="'province_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<!-- 市 -->
|
<el-form-item label="市" label-position="right" prop="stationName2">
|
<el-select
|
v-model="formLock.stationName2"
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="(val) => stationNameChange(2, val)"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList2"
|
:key="'list2_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<!-- 区县 -->
|
<el-form-item label="区县" label-position="right" prop="stationName3">
|
<el-select
|
v-model="formLock.stationName3"
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="(val) => stationNameChange(3, val)"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList3"
|
:key="'list3_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<!-- 机房 -->
|
<el-form-item label="机房" label-position="right" prop="stationName4">
|
<el-select
|
v-model="formLock.stationName4"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList4"
|
:key="'list4_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="24">
|
<!-- Ip -->
|
<el-form-item label="机房Ip" label-position="right" prop="lockIp">
|
<el-input v-model="formLock.lockIp" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="24">
|
<!-- 地址 -->
|
<el-form-item label="地址" label-position="right" prop="lockAddress">
|
<el-input v-model="formLock.lockAddress" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="24">
|
<!-- 锁具安装位置 1屏柜 2 其他 -->
|
<el-form-item
|
label="锁具安装位置"
|
label-position="right"
|
prop="screenFlag"
|
>
|
<el-select
|
v-model="formLock.screenFlag"
|
placeholder="请选择"
|
style="width: 100%"
|
>
|
<el-option label="屏柜" :value="1" />
|
<el-option label="其他" :value="2" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="24">
|
<!-- 锁具安装位置 类型 -->
|
<el-form-item
|
label="屏柜类型"
|
label-position="right"
|
prop="screenBoxType"
|
>
|
<el-select
|
v-model="formLock.screenBoxType"
|
filterable
|
allow-create
|
placeholder="请选择或手动输入后选择"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(item, idx) in typeList"
|
:key="'type_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="24">
|
<!-- 锁具安装位置 品牌 -->
|
<el-form-item
|
label="屏柜品牌"
|
label-position="right"
|
prop="screenBoxProduct"
|
>
|
<el-select
|
v-model="formLock.screenBoxProduct"
|
filterable
|
allow-create
|
placeholder="请选择或手动输入后选择"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(item, idx) in productList"
|
:key="'product_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<!-- 经度 -->
|
<el-form-item label="经度" label-position="right" prop="longitude">
|
<el-input v-model="formLock.longitude" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<!-- 纬度 -->
|
<el-form-item label="纬度" label-position="right" prop="latitude">
|
<el-input v-model="formLock.latitude" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="footer">
|
<el-button @click="close">取消</el-button>
|
<el-button type="primary" @click="ok">确定</el-button>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
:deep(.select) {
|
width: 100%;
|
}
|
|
.footer {
|
text-align: right;
|
}
|
</style>
|
