From d2f590cfed0e874daa758d5e5548d17de8b3c772 Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期四, 19 六月 2025 17:58:50 +0800
Subject: [PATCH] 添加巡检任务上传功能及优化文件组件
---
src/views/inspectionUpload/components/formDia.vue | 248 +++++++++++++++++++++++--------------------------
1 files changed, 115 insertions(+), 133 deletions(-)
diff --git a/src/views/inspectionUpload/components/formDia.vue b/src/views/inspectionUpload/components/formDia.vue
index 8889657..c2da61c 100644
--- a/src/views/inspectionUpload/components/formDia.vue
+++ b/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>
\ No newline at end of file
+<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>
--
Gitblit v1.9.3