288 lines
9.4 KiB
Vue
288 lines
9.4 KiB
Vue
<template>
|
||
<div class="current1">
|
||
<div class="upload-div w-1/2 xl:w-1/2 m-4 mr-0">
|
||
<a-upload-dragger
|
||
v-model:fileList="shpFileList"
|
||
name="shpFileName"
|
||
style="height: 274px; width: 300px"
|
||
class="upload-dragger"
|
||
:multiple="false"
|
||
:maxCount="1"
|
||
:before-upload="shpBeforeUpload"
|
||
:customRequest="shpCustomRequest"
|
||
accept=".zip,.xlsx"
|
||
>
|
||
<p class="ant-upload-drag-icon">
|
||
<PlusOutlined />
|
||
</p>
|
||
<div style="opacity: 0.7"> 文件上传 </div>
|
||
<div class="upload-span">
|
||
<div class="upload-span-content">
|
||
<div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
|
||
<div style="color: #1e5eff">支持扩展名：zip、xls、xlsx</div>
|
||
<div style="opacity: 0.7"> zip中需要包含 .shp .shx .dbf 文件 </div>
|
||
<div style="opacity: 0.7"> 且.shp文件大小小于10MB </div>
|
||
</div>
|
||
</div>
|
||
</a-upload-dragger>
|
||
</div>
|
||
<div class="upload-form w-1/2 xl:w-1/2 m-4 mr-0">
|
||
<a-form
|
||
ref="formRef"
|
||
:model="uploadFrom"
|
||
:labelCol="{ width: '75px' }"
|
||
labelAlign="right"
|
||
:rules="uploadFormRules"
|
||
>
|
||
<a-form-item label="服务名称" name="serverName">
|
||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
|
||
</a-form-item>
|
||
<a-form-item label="空间参考" name="spatialRef">
|
||
<a-select v-model:value="uploadFrom.spatialRef" placeholder="请选择空间参考">
|
||
<a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
|
||
<a-select-option value="EPSG:3857">EPSG:3857</a-select-option>
|
||
<a-select-option value="EPSG:900913">EPSG:900913</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item label="数据表名" name="dataTable">
|
||
<a-input v-model:value="uploadFrom.dataTable" placeholder="请输入表名" />
|
||
</a-form-item>
|
||
<a-form-item label="图层样式" name="appendPath">
|
||
<a-upload
|
||
v-model:fileList="tucengFileList"
|
||
name="tucengFileName"
|
||
list-type="picture-card"
|
||
class="upload-dragger"
|
||
:multiple="false"
|
||
:maxCount="1"
|
||
:show-upload-list="false"
|
||
:before-upload="tucengBeforeUpload"
|
||
:custom-request="tucengCustomRequest"
|
||
accept=".sld"
|
||
>
|
||
<div>
|
||
<PlusOutlined />
|
||
<div class="ant-upload-text">上传图层样式</div>
|
||
</div>
|
||
</a-upload>
|
||
<div style="position: relative; top: -50px" v-if="tucengFileName">
|
||
{{ tucengFileName }}
|
||
<DeleteOutlined @click="deleteTuceng" />
|
||
</div>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, h } from 'vue';
|
||
// vben
|
||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||
import { useMessage } from '@/hooks/web/useMessage';
|
||
import type { UploadProps } from 'ant-design-vue';
|
||
import { message, Upload } from 'ant-design-vue';
|
||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||
import {
|
||
getStatisticalList,
|
||
ShpGeoLayerAdd,
|
||
ShpGeoLayerLoadPage,
|
||
ShpGeoLayerGet,
|
||
ShpGeoLayerUpdateLayer,
|
||
ShpGeoLayerDelete,
|
||
ShpGeoLayerParseShpInfo,
|
||
} from '@/api/demo/system';
|
||
import { CheckTableExist } from '@/api/database/index';
|
||
|
||
import axios from 'axios';
|
||
import { cloneDeep } from 'lodash-es';
|
||
import { getAppEnvConfig } from '@/utils/env';
|
||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||
|
||
const { createMessage } = useMessage();
|
||
|
||
const formRef = ref();
|
||
|
||
const props = defineProps(['uploadForm']);
|
||
const uploadFrom = ref(props.uploadForm);
|
||
const emit = defineEmits(['uploadFormSubmit', 'isZipOrXls']);
|
||
|
||
const uploadFormRules = reactive({
|
||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
||
spatialRef: [{ required: true, message: '请选择空间参考', trigger: 'blur' }],
|
||
// dataType: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
|
||
appendPath: [{ required: true, message: '请上传图层样式', trigger: 'blur' }],
|
||
dataTable: [
|
||
{ required: true, message: '请输入数据表名', trigger: 'blur' },
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
let reg = /^[a-z]\w{0,28}$/;
|
||
if (value !== '' && !reg.test(value)) {
|
||
callback(
|
||
new Error('小写字母开头，可包含下划线，但不能有汉字和大写字母，不能超过30字符'),
|
||
);
|
||
}
|
||
callback();
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
{
|
||
validator: async (rule, value, callback) => {
|
||
try {
|
||
let query: any = { tableName: value };
|
||
const response = await CheckTableExist(query);
|
||
if (!response) {
|
||
callback(new Error('数据库已有此数据表名，请更换表名'));
|
||
}
|
||
} catch (error) {
|
||
callback(new Error('检查数据表名时发生错误'));
|
||
}
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
});
|
||
|
||
// 步骤1-提交
|
||
const submit1 = () => {
|
||
formRef.value
|
||
.validate()
|
||
.then(() => {
|
||
let params = {
|
||
zipFilePath: uploadFrom.value.shpPath,
|
||
tableName: uploadFrom.value.dataTable,
|
||
srid: uploadFrom.value.spatialRef,
|
||
};
|
||
ShpGeoLayerParseShpInfo(params).then((res) => {
|
||
uploadFrom.value.dataType = res.dataType;
|
||
uploadFrom.value.headers = res.headers;
|
||
emit('uploadFormSubmit', uploadFrom.value);
|
||
});
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
};
|
||
|
||
// 步骤1-shp上传
|
||
const shpFileList = ref<UploadProps['fileList']>([]);
|
||
const shpFileName = ref<string>('');
|
||
let isUpload = false;
|
||
// 步骤1-shp上传之前
|
||
const shpBeforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||
let size = file.size / 1024 / 1024;
|
||
const isZipOrXls = extension === 'zip' || extension === 'xls' || extension === 'xlsx';
|
||
const suitableSize = size < 30;
|
||
if (!isZipOrXls) {
|
||
createMessage.error('只能上传后缀是.zip .xls或者.xlsx的文件');
|
||
}
|
||
if (extension == 'zip') {
|
||
emit('isZipOrXls', 'shp');
|
||
} else if (['xls', 'xlsx'].includes(extension)) {
|
||
emit('isZipOrXls', 'excel');
|
||
}
|
||
if (!suitableSize) {
|
||
createMessage.error('文件大小不得超过30M');
|
||
}
|
||
isUpload = isZipOrXls && suitableSize;
|
||
return isUpload;
|
||
};
|
||
// 步骤1-shp上传文件接口
|
||
const shpCustomRequest = (options) => {
|
||
if (isUpload) {
|
||
const formData = new FormData();
|
||
formData.append('files', options.file);
|
||
// 假设 Token 存储在 localStorage 中
|
||
const token = localStorage.getItem('X-Token');
|
||
// 设置请求头部，带上 Token
|
||
const headers = {
|
||
'X-Token': token,
|
||
};
|
||
axios
|
||
.post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
|
||
.then((response) => {
|
||
options.onSuccess(response.data, options.file);
|
||
shpFileName.value = response.data.result[0].fileName;
|
||
uploadFrom.value.shpPath = response.data.result[0].filePath;
|
||
})
|
||
.catch((error) => {
|
||
options.onError(error);
|
||
});
|
||
}
|
||
};
|
||
|
||
// 步骤1-图层样式上传
|
||
const tucengFileList = ref<UploadProps['fileList']>([]);
|
||
const tucengFileName = ref<string>('');
|
||
// 步骤1-图层上传之前
|
||
const tucengBeforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||
let size = file.size / 1024 / 1024;
|
||
const isSld = extension === 'sld';
|
||
const suitableSize = size < 1;
|
||
|
||
if (!isSld) {
|
||
createMessage.error('只能上传后缀是.sld的文件');
|
||
}
|
||
if (!suitableSize) {
|
||
createMessage.error('文件大小不得超过1M');
|
||
}
|
||
return (isSld && suitableSize) || Upload.LIST_IGNORE;
|
||
};
|
||
// 步骤1-图层上传文件接口
|
||
const tucengCustomRequest = (options) => {
|
||
const formData = new FormData();
|
||
formData.append('files', options.file);
|
||
// 假设 Token 存储在 localStorage 中
|
||
const token = localStorage.getItem('X-Token');
|
||
// 设置请求头部，带上 Token
|
||
const headers = {
|
||
'X-Token': token,
|
||
};
|
||
axios
|
||
.post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
|
||
.then((response) => {
|
||
options.onSuccess(response.data, options.file);
|
||
tucengFileName.value = response.data.result[0].fileName;
|
||
uploadFrom.value.appendPath = response.data.result[0].filePath;
|
||
})
|
||
.catch((error) => {
|
||
options.onError(error);
|
||
});
|
||
};
|
||
// 步骤1-删除图层样式
|
||
const deleteTuceng = () => {
|
||
tucengFileName.value = '';
|
||
uploadFrom.value.appendPath = '';
|
||
};
|
||
// 清除验证
|
||
const clearValidation = () => {
|
||
formRef.value.clearValidate();
|
||
shpFileName.value = '';
|
||
tucengFileName.value = '';
|
||
};
|
||
|
||
defineExpose({
|
||
submit1,
|
||
clearValidation,
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.current1 {
|
||
display: flex;
|
||
}
|
||
.upload-div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
top: -30px;
|
||
}
|
||
.upload-span {
|
||
margin: 30px;
|
||
}
|
||
.upload-form {
|
||
margin-left: 100px;
|
||
}
|
||
</style>
|