Browse Source

814日志,文件上传

tangjunhao 4 weeks ago
parent
commit
9ef289d541

BIN
src/assets/img/open.png


+ 5 - 0
src/style/index.css

@@ -86,6 +86,11 @@ img{
   border: 1px solid #2CFFFF;
   box-shadow: none;
   color: #2CFFFF;
+  padding: 0 5px;
+}
+
+.el-progress__text {
+  color: #2CFFFF;
 }
 
 .el-select .el-select__wrapper {

+ 14 - 6
src/views/components/fileuploads.vue

@@ -12,9 +12,13 @@
       :accept="props.accept"
       :auto-upload="true"
       class="upload-box"
+      :disabled="props.disabled"
     >
       <!-- 自定义上传按钮 -->
-      <div class="btntext upname" style="width: 28px; height: 24px">
+      <div 
+        class="btntext upname" 
+        :style="{ width: '24px', cursor: props.disabled ? 'not-allowed' : 'pointer', opacity: props.disabled ? 0.5 : 1 }"
+      >
         <img :src="props.imgSrc" alt="upload icon" class="custom-icon" />
       </div>
     </el-upload>
@@ -35,6 +39,7 @@ const props = defineProps({
   namelist: Array,
   gfname: String,
   imgSrc: String,
+  disabled: { type: Boolean, default: false }
 })
 const emit = defineEmits([
   'upload-success',
@@ -72,14 +77,16 @@ function generateUUID() {
 }
 
 async function handleBeforeUpload(rawFile) {
+  if (props.disabled) return false
   fileName.value = rawFile.name
   emit('update-fileName', fileName.value)
 
   const ext = fileName.value.split('.').pop().toLowerCase()
   const acceptList = props.accept
-    .split(',')
-    .map((e) => e.trim().replace(/^\./, '').toLowerCase())
-  if (!acceptList.includes(ext)) {
+    ? props.accept.split(',').map(e => e.trim().replace(/^\./, '').toLowerCase())
+    : []
+
+  if (acceptList.length > 0 && !acceptList.includes(ext)) {
     ElMessage.error(`只支持 ${props.accept} 格式文件!`)
     return false
   }
@@ -108,6 +115,7 @@ function handleSuccess(response, file) {
 
 function handleError() {
   emit('upload-status', '上传失败')
+  emit('update-fileName', '')
   uuid.value = generateUUID()
 }
 
@@ -154,12 +162,12 @@ function calculateMD5(file) {
   position: relative;
 }
 .upload-box {
-  display: inline-block;
+  display: flex;
+  align-items: center;
 }
 .custom-icon {
   width: 100%;
   height: auto;
   display: block;
-  cursor: pointer;
 }
 </style>

+ 1 - 4
src/views/mainContent/footer/infoLog.vue

@@ -66,9 +66,7 @@ const websocketonmessage = (res) => {
     }
     if (res.data.indexOf("——成功") !== -1) {
       
-      const timer = setTimeout(function () {
-        console.log("关闭定时器")
-      }, 10000)
+      
     }
     if (res.data.indexOf("msg=heartChec") == -1) {
       // 去除空行
@@ -81,7 +79,6 @@ const websocketonmessage = (res) => {
       textarea.scrollTop = textarea.scrollHeight
     }
     
-    // console.log('arrobjvalue',arrobj.value)
   }
 
   reset()

+ 45 - 2
src/views/mainContent/leftaside/agentModel.vue

@@ -47,9 +47,27 @@
                   size="small"
                 >
                   <template #append>
-                    <el-button :icon="FolderOpened" :disabled="!isfileup" @click="handleFileUp"/>
+                    <FileUploader
+                      :accept="''"     
+                      :img-src="fileOpen"
+                      :disabled="!isfileup"
+                      @upload-success="(fileInfo) => handleUploadSuccess(fileInfo, item)"
+                      @update-fileName="(name) => handleUpdateFileName(name, item)"
+                      @update-percentage="handleUpdatePercentage"
+                      @upload-status="handleUploadStatus"
+                    />
                   </template>
                 </el-input>
+
+                <!-- 小进度条放在输入框下方 -->
+                <el-progress
+                  v-if="uploadPercent > 0 && uploadPercent < 100"
+                  :percentage="uploadPercent"
+                  :text-inside="false"
+                  :stroke-width="4"
+                  style="width: 100%; margin-top: 4px;"
+                />
+                
               </el-form-item>
 
               <!-- 复选框(无 label、不占位) -->
@@ -84,9 +102,11 @@
 
 <script setup>
 import { analysisJson, delChangeInfo } from '../js/analysisData.js'
-
+import FileUploader from '@/views/components/fileuploads.vue'
 import { useValOptionsStore } from '@/store/valoptions'
+
 import { FolderOpened } from '@element-plus/icons-vue'
+import fileOpen from '@/assets/img/open.png'
 
 const valOptionsStore = useValOptionsStore()
 
@@ -105,6 +125,7 @@ const props = defineProps({
 })
 
 const Labelwidth = '80px';
+const uploadPercent = ref(0) // 上传进度百分比
 
 const valoption = computed(() => valOptionsStore.valOptionsMap)
 
@@ -119,6 +140,28 @@ watch(
   { deep: true } // 深度监听
 );
 
+// 上传成功回调
+function handleUploadSuccess(fileInfo, item) {
+  item.vo.val = fileInfo.fname
+  uploadPercent.value = 0
+}
+
+// 文件名更新回调
+function handleUpdateFileName(name, item) {
+  item.vo.val = name
+  console.log('选中文件名', name, item)
+}
+
+// 上传进度更新回调
+function handleUpdatePercentage(percent) {
+  uploadPercent.value = percent
+}
+
+// 上传状态回调
+function handleUploadStatus(status) {
+  console.log('上传状态', status)
+}
+
 const getdatainit = () => {
   amDataObj.value = analysisJson(props.amDatajson);
   console.log('amDataObj', amDataObj.value );