117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import RegionalMap from "@/views/component/RegionalMap/RegionalMap.vue";
|
|
import { deepClone } from "@/utils";
|
|
|
|
const props = defineProps({
|
|
operatorList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
const addFormRef = ref<any>();
|
|
const operatorAllList = ref<any>([]);
|
|
const addForm = reactive<any>({
|
|
regionId: "",
|
|
operatorId: "",
|
|
regionName: "",
|
|
regionSimpleName: "",
|
|
coordinates: []
|
|
});
|
|
const rules = {
|
|
operatorId: [{ required: true, message: "请选择运营商", trigger: "change" }],
|
|
regionName: [{ required: true, message: "请输入运营区名称", trigger: "blur" }],
|
|
coordinates: [
|
|
{
|
|
required: true,
|
|
validator: (value: any, cb: any) => {
|
|
console.log(value);
|
|
if (value.length === 0) {
|
|
cb("请编辑区域电子围栏");
|
|
} else {
|
|
cb();
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
const RegionalMapRef = ref();
|
|
const handleOpenMap = () => {
|
|
const path = addForm.coordinates.length === 0 ? null : { points: deepClone(addForm.coordinates) };
|
|
RegionalMapRef.value?.openMap(path);
|
|
};
|
|
|
|
const updateForm = (data: any) => {
|
|
addForm.regionId = data.regionId;
|
|
addForm.operatorId = data.operatorId;
|
|
addForm.regionName = data.regionName;
|
|
addForm.regionSimpleName = data.regionSimpleName;
|
|
addForm.coordinates = data.coordinates || [];
|
|
};
|
|
|
|
//获取地图点位
|
|
const getPoint = (paths: any[]) => {
|
|
addForm.coordinates = paths;
|
|
};
|
|
|
|
// 提交表单
|
|
const submit = () => {
|
|
return new Promise(async resolve => {
|
|
let status = await addFormRef.value.validate();
|
|
return resolve({
|
|
status,
|
|
data: deepClone(addForm)
|
|
});
|
|
});
|
|
};
|
|
|
|
const resetForm = () => {
|
|
addForm.regionId = "";
|
|
addForm.operatorId = "";
|
|
addForm.regionName = "";
|
|
addForm.regionSimpleName = "";
|
|
addForm.coordinates = [];
|
|
if (addFormRef.value) {
|
|
addFormRef.value.resetFields();
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => props.operatorList,
|
|
val => {
|
|
operatorAllList.value = val;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
defineExpose({
|
|
submit,
|
|
resetForm,
|
|
updateForm
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<a-form ref="addFormRef" :model="addForm" :rules="rules">
|
|
<a-form-item field="operatorId" label="运营商" validate-trigger="blur">
|
|
<a-select v-model="addForm.operatorId" placeholder="请选择运营商" validate-trigger="change">
|
|
<a-option v-for="it in operatorAllList" :key="it.operatorId" :value="it.operatorId">{{ it.operatorName }}</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="运营区名称" field="regionName" validate-trigger="blur">
|
|
<a-input placeholder="请输入运营区名称" allow-clear v-model="addForm.regionName" />
|
|
</a-form-item>
|
|
<a-form-item label="简称" field="regionSimpleName">
|
|
<a-input placeholder="请输入简称" allow-clear v-model="addForm.regionSimpleName" />
|
|
</a-form-item>
|
|
<a-form-item label="区域电子围栏" field="coordinates" validate-trigger="blur">
|
|
<a-tag bordered color="orange" v-if="addForm.coordinates.length === 0">未绘制</a-tag>
|
|
<a-tag bordered color="green" v-else>已绘制</a-tag>
|
|
<a-link @click="handleOpenMap" style="margin-left: 15px">编辑地图</a-link>
|
|
</a-form-item>
|
|
</a-form>
|
|
<RegionalMap ref="RegionalMapRef" @ok="getPoint" />
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|