glj-代码提交

src/views/dataService/otherData/component/upload.vue

@@ -2,17 +2,8 @@
   <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-item label="upload picture" prop="img">
-        <el-upload
-            ref="upFileRef"
-            class="upload-demo"
-            drag
-            accept="image/*"
-            action="#"
-            multiple
-            :http-request="uploadPic"
-            :on-remove="removePic"
-            :before-upload="beforeUpload"
-        >
+        <el-upload ref="upFileRef" 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>
           <div class="el-upload__text">
             Drop file here or <em>click to upload</em>
@@ -26,31 +17,33 @@
       </el-form-item>
       <el-form-item prop="type" label="data type">
         <el-select v-model="state.ruleForm.type" class="m-2" placeholder="please select data type">
-          <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-          />
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="visualFlag" label="data visualFlag">
+        <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-form-item>
       <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>
     <template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel" size="default">cancel</el-button>
-					<el-button type="primary" @click="onSubmit" size="default" :loading="state.isLoading">upload</el-button>
-				</span>
+      <span class="dialog-footer">
+        <el-button @click="onCancel" size="default">cancel</el-button>
+        <el-button type="primary" @click="onSubmit" size="default" :loading="state.isLoading">upload</el-button>
+      </span>
     </template>
   </el-dialog>
 </template>
 
 <script setup>
-import {reactive, ref} from "vue";
-import {uploadData} from '/@/api/data/otherData.js';
-import {ElMessage} from "element-plus";
+import { reactive, ref } from "vue";
+import { uploadData } from '/@/api/data/otherData.js';
+import { ElMessage } from "element-plus";
 import { UploadFilled } from '@element-plus/icons-vue'
 const upFileRef = ref();
 const options = [
@@ -71,37 +64,37 @@ const emit = defineEmits(['callback']);
 const adminAddFormRef = ref();
 const state = reactive({
   isShowDialog: false,
-  isLoading:false,
+  isLoading: false,
   ruleForm: {
   },
   tableData: [],
   //字典值
   dictData: [],
-  unitData:[],
+  unitData: [],
   standardId: '',
   detectionData: [],
-  disasterId:null,
-  dataForm:new FormData(),
-  fileArray:[],
+  disasterId: null,
+  dataForm: new FormData(),
+  fileArray: [],
 })
 const validImg = (rule, value, callback) => {
-  if(state.fileArray.length>0){
+  if (state.fileArray.length > 0) {
     adminAddFormRef.value.clearValidate('img')
     callback();
-  }else{
+  } else {
     return callback(new Error('please upload image'));
   }
 }
 //校验规则
 const rules = reactive({
   img: [
-    {required: true,trigger: 'change',validator:validImg}
+    { required: true, trigger: 'change', validator: validImg }
   ],
   type: [
-    {required: true, message: 'please select data type', trigger: 'change'}
+    { required: true, message: 'please select data type', trigger: 'change' }
   ],
-  remark:[
-    {required: true, message: 'please select data details', trigger: 'blur'}
+  remark: [
+    { required: true, message: 'please select data details', trigger: 'blur' }
   ],
 })
 //图片上传之前
@@ -118,7 +111,7 @@ const uploadPic = (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)
 }
 //重置表单
@@ -149,19 +142,20 @@ const onSubmit = () => {
   adminAddFormRef.value.validate((valid, fields) => {
     if (valid) {
       state.isLoading = true;
-     state.fileArray.forEach(item=>{
-       state.dataForm.append('file',item);
-     })
-     state.dataForm.append('type',state.ruleForm.type);
-     state.dataForm.append('remark',state.ruleForm.remark);
-     state.dataForm.append('disasterId',state.disasterId);
-     for(let [a, b] of state.dataForm.entries()){
-       console.log(a, b, '--------------');
-     }
+      state.fileArray.forEach(item => {
+        state.dataForm.append('file', item);
+      })
+      state.dataForm.append('type', state.ruleForm.type);
+      state.dataForm.append('remark', state.ruleForm.remark);
+      state.dataForm.append('disasterId', state.disasterId);
+      state.dataForm.append('visualFlag', state.ruleForm.visualFlag);
+      for (let [a, b] of state.dataForm.entries()) {
+        console.log(a, b, '--------------');
+      }
       uploadData(state.dataForm).then(res => {
         ElMessage.success("Upload successfully");
         emit('callback');
-      }).finally(()=>{
+      }).finally(() => {
         state.isLoading = false;
       })
       closeDialog();
@@ -176,6 +170,4 @@ defineExpose({
 });
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>