airoptweb/src/components/cloudChart/dialog/FileSelectDialog.vue

<template>
  <SubDialog
    :modelValue="modelValue"
    @update:modelValue="$emit('update:modelValue', $event)"
    title="文件选择"
    width="460"
    height="430px"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <el-form :model="form" label-position="left">
      <el-form-item label="添加文件：" :label-width="formLabelWidth3" style="width: 100%">
        <el-row style="width: 100%">
          <el-col :span="24">
            <el-input
              v-model="cloudFileName"
              readonly
              :step="100"
              :min="0"
              :max="1000"
              controls-position="right"
            />
          </el-col>
          <!-- 文件上传按钮部分 -->
          <el-col :span="1" style="display: flex; align-items: center; margin-left: -35px">
            <fileUploads
              :projectId="projectId" 
              :solverType="solverType" 
              accept=".plt"
              upId="cloud" 
              name="点击选择文件"
              :imgSrc="meshFileImgSrc"
              @upload-success="handleFileUploadSuccess"
              @update-fileName="updateFileName"
              @update-percentage="updatePercentage"
              @upload-status="getUploadStatus"
            />
          </el-col>
        </el-row>
        <!-- 进度条 -->
        <el-row v-if="showProgress" style="width: 100%; margin-top: 10px;">
          <el-col :span="20">
            <el-progress :percentage="percentage"></el-progress>
          </el-col>
          <el-col :span="4">
            <div style="line-height: 15px">{{uploadStatus}}</div>
          </el-col>
        </el-row>
      </el-form-item>
    
      <div style="display: flex; flex-direction: row; width: 100%; margin-top: 20px;">
        <el-card shadow="hover" style="width: 70%; height: 200px; overflow-y: auto;" >
          <el-checkbox-group v-model="selectedFiles">
            <el-checkbox 
              v-for="item in fileList" 
              :key="item.value" 
              :label="item.value" 
              style="display: block"
            >
            <span style="font-size: 14px">{{ item.label }}</span>
              
            </el-checkbox>
          </el-checkbox-group>
        </el-card>
        
        <div style="width: 30%; padding-left: 10px;">
          <el-button 
            style="width: 100%; margin-bottom: 10px;" 
            @click="deleteSelectedFiles"
          >
            删除选中文件
          </el-button>
          <el-button 
            style="width: 100%; background-color: transparent; margin-left: 0;" 
            @click="deleteAllFiles"
          >
            删除全部文件
          </el-button>
        </div>
      </div>
    </el-form>
  </SubDialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watch } from 'vue'
import SubDialog from './SubDialog.vue'
import fileUploads from '@/views/components/fileuploads.vue'

const props = defineProps({
  modelValue: Boolean,
  projectId: {
    type: String,
    required: true
  },
  solverType: {
    type: String,
    required: true
  },
  initialFiles: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

// 表单数据
const formLabelWidth = '100px'
const cloudFileName = ref('')
const selectedFiles = ref([])
// const fileList = ref([...props.initialFiles])
const fileList = ref([
  {
    value: 'file1',
    label: '测试文件1.cgns',
    raw: {
      name: '测试文件1.cgns',
      size: 1024 * 1024 * 5 // 5MB
    }
  },
  {
    value: 'file2',
    label: '测试文件2.xyz',
    raw: {
      name: '测试文件2.xyz',
      size: 1024 * 500 // 500KB
    }
  },
  {
    value: 'file3',
    label: '测试文件3.bdf',
    raw: {
      name: '测试文件3.bdf',
      size: 1024 * 1024 * 10 // 10MB
    }
  }
])
const upId = ref(`file-upload-${Date.now()}`)
const meshFileImgSrc = new URL("@/assets/img/open.png", import.meta.url).href;
let formLabelWidth3 = ref(80)
let uploadStatus = ref('');
let percentage = ref(0);
let fid = ref('');

watch(() => props.modelValue, (newVal) => {
  if (!newVal) {
    // 当modelValue变为false时，确保完全关闭
    emit('cancel')
  }
})

// 文件上传成功处理
const handleFileUploadSuccess = (file) => {
  //隐藏进度条
  setTimeout(() => {
    percentage.value = 0;
  }, 1000);
  const newFile = {
    value: file.id || file.name,
    label: file.name,
    raw: file
  }
  fileList.value.push(newFile)
  cloudFileName.value = file.name
}

// 更新文件名
const updateFileName = (newValue) => {
  meshFileName.value = newValue
}

// 更新进度条
const updatePercentage = (newValue) => {
  percentage.value = newValue
}

// 更新上传状态
const getUploadStatus = (newValue) => {
  uploadStatus.value = newValue
}

// 控制进度条显隐
const showProgress = computed(() => percentage.value > 0 && percentage.value <= 100);

// 删除选中文件
const deleteSelectedFiles = () => {
  fileList.value = fileList.value.filter(
    file => !selectedFiles.value.includes(file.value)
  )
  selectedFiles.value = []
}

// 删除全部文件
const deleteAllFiles = () => {
  fileList.value = []
  selectedFiles.value = []
  cloudFileName.value = ''
}

// 确认选择
const handleConfirm = () => {
  emit('confirm', {
    // selectedFiles: fileList.value.filter(
    //   file => selectedFiles.value.includes(file.value)
    // )
  fid: '9305c3e01b5d44e6a1964148d34e02f4'
  })
  emit('update:modelValue', false)
}

// 取消
const handleCancel = () => {
  emit('cancel')
  emit('update:modelValue', false)
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>