添加巡检任务上传功能及优化文件组件

张诺

3 天以前 d2f590cfed0e874daa758d5e5548d17de8b3c772

 src/views/inspectionUpload/components/formDia.vue

@@ -1,57 +1,52 @@
<template>
  <div>
    <el-dialog title="上传"
               v-model="dialogVisitable" width="400px" @close="cancel">
      <el-form :model="form" ref="formRef" label-width="120px">
        <el-form-item label="生产前" prop="fileList0">
          <el-upload
              v-model:file-list="fileList0"
              ref="fileUpload0"
              :action="uploadFileUrl"
              multiple
              name="files"
              :data="{type: 0}"
              style="width: 100%"
              :headers="headers"
              :before-upload="handleBeforeUpload"
              :on-success="handleUploadSuccess"
    <el-dialog
      title="上传"
      v-model="dialogVisitable"
      width="400px"
      @close="cancel"
    >
      <div class="upload-container">
        <div class="form-container">
          <div class="title">生产前</div>
          <fileUpload
            :statusType="0"
            ref="beforeProductionRef"
            :fileSize="1024"
            :fileType="['mp3', 'mp4', 'avi', 'mov', 'mkv']"
            :limit="10"
            :drag="false"
            v-model:modelValue="beforeModelValue"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="生产后" prop="fileList1">
          <el-upload
              v-model:file-list="fileList1"
              ref="fileUpload1"
              :action="uploadFileUrl"
              multiple
              name="files"
              :data="{type: 1}"
              style="width: 100%"
              :headers="headers"
              :before-upload="handleBeforeUpload"
              :on-success="handleUploadSuccess1"
          </fileUpload>
        </div>
        <div class="form-container">
          <div class="title">生产后</div>
          <fileUpload
            :statusType="1"
            ref="afterProductionRef"
            :fileSize="1024"
            :fileType="['mp3', 'mp4', 'avi', 'mov', 'mkv']"
            :limit="10"
            :drag="false"
            v-model:modelValue="afterModelValue"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="生产问题" prop="fileList2">
          <el-upload
              v-model:file-list="fileList2"
              ref="fileUpload2"
              :action="uploadFileUrl"
              multiple
              name="files"
              :data="{type: 2}"
              style="width: 100%"
              :headers="headers"
              :before-upload="handleBeforeUpload"
              :on-success="handleUploadSuccess2"
          </fileUpload>
        </div>
        <div class="form-container">
          <div class="title">生产问题</div>
          <fileUpload
            :statusType="2"
            ref="issueProductionRef"
            :fileSize="1024"
            :fileType="['mp3', 'mp4', 'avi', 'mov', 'mkv']"
            :limit="10"
            :drag="false"
            v-model:modelValue="issueModelValue"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
          </fileUpload>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
@@ -63,96 +58,83 @@
</template>

<script setup>
import {reactive, ref} from "vue";
import {addOrEditInspectionTask} from "@/api/inspectionManagement/index.js";
import {getToken} from "@/utils/auth.js";
import { reactive, ref } from "vue";
import {ElMessage} from "element-plus";
import fileUpload from "@/components/FileUpload/index.vue";
import {uploadInspectionTask} from "@/api/inspectionManagement/index.js";

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const emit = defineEmits(['closeDia']);
const dialogVisitable = ref(false);
const data = reactive({
  form: {
    id: '',
    storageBlobDTO: {}
  },
})
const { proxy } = getCurrentInstance()
const beforeModelValue = ref([]);
const afterModelValue = ref([]);
const issueModelValue = ref([]);
const beforeProductionRef = ref(null);
const afterProductionRef = ref(null);
const issueProductionRef = ref(null);

const { form } = toRefs(data)
const fileList0 = ref([])
const fileList1 = ref([])
const fileList2 = ref([])
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/common/minioUploads'); // 上传文件服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() });

const submitForm = async () => {
  let arr = [];
  if (beforeModelValue.value.length > 0) {
    arr.push(...beforeModelValue.value);
  }
  if (afterModelValue.value.length > 0) {
    arr.push(...afterModelValue.value);
  }
  if (issueModelValue.value.length > 0) {
    arr.push(...issueModelValue.value);
  }
  // 提交数据
  infoData.value.storageBlobDTO = arr;
  await uploadInspectionTask({...infoData.value});
  cancel()
  ElMessage.success("提交成功");
};
const infoData = ref(null);
// 打开弹框
const openDialog = async (row) => {
  dialogVisitable.value = true
  form.value.id = row.id
}
// 上传前校检格式和大小
function handleBeforeUpload(file) {
  
  return true
}
// 上传成功回调
function handleUploadSuccess(res, file) {
  if (res.code === 200) {
    console.log("上传成功", res);
    proxy.$modal.msgSuccess("文件上传成功");
    console.log('fileList0---', fileList0)
  } else {
    proxy.$modal.msgError(res.msg)
    proxy.$refs.fileUpload0.handleRemove(file)
  }
}
function handleUploadSuccess1(res, file) {
  if (res.code === 200) {
    proxy.$modal.msgSuccess("文件上传成功");
  } else {
    proxy.$modal.msgError(res.msg)
    proxy.$refs.fileUpload1.handleRemove(file)
  }
}
function handleUploadSuccess2(res, file) {
  if (res.code === 200) {
    proxy.$modal.msgSuccess("文件上传成功");
  } else {
    proxy.$modal.msgError(res.msg)
    proxy.$refs.fileUpload2.handleRemove(file)
  }
}

// 提交合并表单
const submitForm = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      // 初始化 storageBlobDTO 为一个空数组
      form.value.storageBlobDTO = []
      // 合并所有 fileList 到 storageBlobDTO
      const allFiles = [
        ...fileList0.value,
        ...fileList1.value,
        ...fileList2.value
      ]
      // 将文件列表赋值给 form
      form.value.storageBlobDTO = allFiles
      // 提交数据
      addOrEditInspectionTask(form.value).then(() => {
        cancel()
        proxy.$modal.msgSuccess('提交成功')
      })
    }
  })
}
  infoData.value = row;
  dialogVisitable.value = true;
};
// 关闭合并表单
const cancel = () => {
  proxy.resetForm("formRef")
  dialogVisitable.value = false
  emit('closeDia')
}
defineExpose({ openDialog })
  proxy.resetForm("formRef");
  dialogVisitable.value = false;
  emit("closeDia");
};
defineExpose({ openDialog });
</script>

<style scoped>

</style>
<style scoped lang="scss">
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  .form-container {
    flex: 1;
    width: 100%;
    margin-bottom: 20px;
  }
}
.title {
  font-size: 14px;
  color: #165dff;
  line-height: 20px;
  font-weight: 600;
  padding-left: 10px;
  position: relative;
  margin: 6px 0;
}
.title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px; /* 调整垂直位置 */
  width: 4px; /* 小数条宽度 */
  height: 14px; /* 小数条高度 */
  background-color: #165dff; /* 蓝色 */
}
</style>