This commit is contained in:
刘旋 2023-04-20 16:56:48 +08:00
commit 83fbd59ade
1 changed files with 42 additions and 50 deletions

View File

@ -2,17 +2,8 @@
<el-dialog title="upload" v-model="state.isShowDialog" width="700px"> <el-dialog title="upload" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="120px" :rules="rules" ref="adminAddFormRef"> <el-form :model="state.ruleForm" size="default" label-width="120px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="upload picture" prop="img"> <el-form-item label="upload picture" prop="img">
<el-upload <el-upload ref="upFileRef" class="upload-demo" drag accept="image/*" action="#" multiple :http-request="uploadPic"
ref="upFileRef" :on-remove="removePic" :before-upload="beforeUpload">
class="upload-demo"
drag
accept="image/*"
action="#"
multiple
:http-request="uploadPic"
:on-remove="removePic"
:before-upload="beforeUpload"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon> <el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text"> <div class="el-upload__text">
Drop file here or <em>click to upload</em> Drop file here or <em>click to upload</em>
@ -26,16 +17,18 @@
</el-form-item> </el-form-item>
<el-form-item prop="type" label="data type"> <el-form-item prop="type" label="data type">
<el-select v-model="state.ruleForm.type" class="m-2" placeholder="please select data type"> <el-select v-model="state.ruleForm.type" class="m-2" placeholder="please select data type">
<el-option <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
v-for="item in options" </el-select>
:key="item.value" </el-form-item>
:label="item.label" <el-form-item prop="visualFlag" label="data visualFlag">
:value="item.value" <el-select v-model="state.ruleForm.visualFlag" placeholder="please select data visualFlag" size="default" >
/> <el-option label="Visualization" value= 1></el-option>
<el-option label="B Visualization" value= 0></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="remark" label="data details"> <el-form-item prop="remark" label="data details">
<el-input v-model="state.ruleForm.remark" class="m-2" placeholder="please enter data details" :rows="3" type="textarea" style="width:220px;"/> <el-input v-model="state.ruleForm.remark" class="m-2" placeholder="please enter data details" :rows="3"
type="textarea" style="width:220px;" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -48,9 +41,9 @@
</template> </template>
<script setup> <script setup>
import {reactive, ref} from "vue"; import { reactive, ref } from "vue";
import {uploadData} from '/@/api/data/otherData.js'; import { uploadData } from '/@/api/data/otherData.js';
import {ElMessage} from "element-plus"; import { ElMessage } from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue' import { UploadFilled } from '@element-plus/icons-vue'
const upFileRef = ref(); const upFileRef = ref();
const options = [ const options = [
@ -71,37 +64,37 @@ const emit = defineEmits(['callback']);
const adminAddFormRef = ref(); const adminAddFormRef = ref();
const state = reactive({ const state = reactive({
isShowDialog: false, isShowDialog: false,
isLoading:false, isLoading: false,
ruleForm: { ruleForm: {
}, },
tableData: [], tableData: [],
// //
dictData: [], dictData: [],
unitData:[], unitData: [],
standardId: '', standardId: '',
detectionData: [], detectionData: [],
disasterId:null, disasterId: null,
dataForm:new FormData(), dataForm: new FormData(),
fileArray:[], fileArray: [],
}) })
const validImg = (rule, value, callback) => { const validImg = (rule, value, callback) => {
if(state.fileArray.length>0){ if (state.fileArray.length > 0) {
adminAddFormRef.value.clearValidate('img') adminAddFormRef.value.clearValidate('img')
callback(); callback();
}else{ } else {
return callback(new Error('please upload image')); return callback(new Error('please upload image'));
} }
} }
// //
const rules = reactive({ const rules = reactive({
img: [ img: [
{required: true,trigger: 'change',validator:validImg} { required: true, trigger: 'change', validator: validImg }
], ],
type: [ type: [
{required: true, message: 'please select data type', trigger: 'change'} { required: true, message: 'please select data type', trigger: 'change' }
], ],
remark:[ remark: [
{required: true, message: 'please select data details', trigger: 'blur'} { required: true, message: 'please select data details', trigger: 'blur' }
], ],
}) })
// //
@ -118,7 +111,7 @@ const uploadPic = (data) => {
} }
// //
const removePic = (data) => { const removePic = (data) => {
state.fileArray.splice(state.fileArray.findIndex(item=>item.uid===data.raw.uid), 1) state.fileArray.splice(state.fileArray.findIndex(item => item.uid === data.raw.uid), 1)
console.log(state.fileArray) console.log(state.fileArray)
} }
// //
@ -149,19 +142,20 @@ const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => { adminAddFormRef.value.validate((valid, fields) => {
if (valid) { if (valid) {
state.isLoading = true; state.isLoading = true;
state.fileArray.forEach(item=>{ state.fileArray.forEach(item => {
state.dataForm.append('file',item); state.dataForm.append('file', item);
}) })
state.dataForm.append('type',state.ruleForm.type); state.dataForm.append('type', state.ruleForm.type);
state.dataForm.append('remark',state.ruleForm.remark); state.dataForm.append('remark', state.ruleForm.remark);
state.dataForm.append('disasterId',state.disasterId); state.dataForm.append('disasterId', state.disasterId);
for(let [a, b] of state.dataForm.entries()){ state.dataForm.append('visualFlag', state.ruleForm.visualFlag);
for (let [a, b] of state.dataForm.entries()) {
console.log(a, b, '--------------'); console.log(a, b, '--------------');
} }
uploadData(state.dataForm).then(res => { uploadData(state.dataForm).then(res => {
ElMessage.success("Upload successfully"); ElMessage.success("Upload successfully");
emit('callback'); emit('callback');
}).finally(()=>{ }).finally(() => {
state.isLoading = false; state.isLoading = false;
}) })
closeDialog(); closeDialog();
@ -176,6 +170,4 @@ defineExpose({
}); });
</script> </script>
<style scoped> <style scoped></style>
</style>