<script setup>
|
import { ref, onMounted, reactive, computed, watchEffect } from "vue"; import useElement from "@/hooks/useElement.js";
|
|
import {
|
addOfflineMap,
|
} from '@/api/system.js';
|
|
const { $loading, $message, $confirm } = useElement();
|
const emit = defineEmits(["close", "success"]);
|
|
import mapJson from '../../../public/mapJson/js/index.js'
|
const ruleForm = ref();
|
|
const params = reactive({
|
StationName1: '', // 省*
|
StationName2: '', // 市*
|
StationName5: '', // 区县*
|
dataName: '', // 数据名称
|
});
|
|
const rules = {
|
dataName: [{
|
required: true,
|
message: '不能为空',
|
trigger: 'blur'
|
}]
|
};
|
|
const props = defineProps({
|
list: {
|
type: Array,
|
required: true
|
}
|
});
|
|
const mapList = computed(() => {
|
let _list = mapJson.mapList();
|
let plist = props.list;
|
return _list.filter(item => {
|
let isIn = false;
|
for (let i = 0; i < plist.length; i++) {
|
if (plist[i].name == item.value) {
|
isIn = true;
|
break;
|
}
|
}
|
return !isIn;
|
});
|
});
|
|
function submitFrom() {
|
ruleForm.value.validate((valid) => {
|
// 校验通过
|
if (valid) {
|
var tmp = {};
|
tmp.province = params.StationName1;
|
tmp.city = params.StationName2;
|
tmp.distinct = params.StationName5;
|
tmp.name = params.dataName;
|
// 添加地图
|
addMap(tmp);
|
} else {
|
$layer.msg('存在校验未通过的数据！');
|
return false;
|
}
|
});
|
};
|
function addMap(tmp) {
|
let loading = $loading();
|
addOfflineMap(tmp).then((res) => {
|
if (res.code == 1) {
|
$message({
|
type: 'success',
|
message: '添加地图成功！'
|
});
|
// 触发事件
|
emit('success');
|
} else {
|
$message({
|
type: 'error',
|
message: '添加地图失败！'
|
});
|
}
|
// 关闭加载框
|
loading.close();
|
}).catch((err) => {
|
console.log(err);
|
// 关闭加载框
|
loading.close();
|
});
|
}
|
function mapChange(value) {
|
let mapInfo = mapJson.getItemByValue(value, mapList.value);
|
params.StationName1 = mapInfo.StationName1;
|
params.StationName2 = mapInfo.StationName2;
|
params.StationName5 = mapInfo.StationName5;
|
}
|
</script>
|
|
<template>
|
<el-form ref="ruleForm" label-position="top" :model="params" :rules="rules">
|
<el-row :gutter="16">
|
<el-col :span="24">
|
<el-form-item label="地图字段" prop="dataName">
|
<el-select v-model="params.dataName" placeholder="请选择地图" @change="mapChange" :filterable="true">
|
<el-option v-for="item in mapList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="form-footer">
|
<el-button type="primary" @click="submitFrom">确定</el-button>
|
</div>
|
</el-form>
|
</template>
|
|
<style scoped>
|
|
</style>
|
