add

2025-12-19 16:57:49 +08:00
parent cd634e6a3e
commit 734e71976e
6 changed files with 377 additions and 18 deletions
--- a/src/pages/admin/ui-components/index.vue
+++ b/src/pages/admin/ui-components/index.vue
@@ -73,7 +73,7 @@
              上传文件
            </el-button>
            <el-button 
-              v-if="row.file_path && !row.is_extracted" 
+              v-if="row.file_path && !row.is_extracted && isZipFileFromPath(row.file_path)" 
              size="small" 
              type="warning" 
              @click="handleUploadExtract(row)"
@@ -162,6 +162,36 @@
        <el-form-item label="排序">
          <el-input-number v-model="form.sort_order" :min="0" />
        </el-form-item>
+        <el-form-item label="上传模式" v-if="!isEdit">
+          <el-radio-group v-model="uploadMode">
+            <el-radio label="files">文件上传</el-radio>
+            <el-radio label="folder">文件夹上传</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="组件文件" v-if="!isEdit">
+          <el-upload
+            ref="createUploadRef"
+            :auto-upload="false"
+            :multiple="uploadMode === 'files'"
+            :webkitdirectory="uploadMode === 'folder'"
+            :on-change="handleCreateFileChange"
+            :on-remove="handleCreateFileRemove"
+            drag
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+            <template #tip>
+              <div class="el-upload__tip" v-if="uploadMode === 'files'">
+                可以上传多个文件，每个文件不超过100MB。ZIP文件可以自动解压，其他文件类型仅保存。
+              </div>
+              <div class="el-upload__tip" v-else>
+                可以上传整个文件夹，保持原有目录结构。ZIP文件可以自动解压，每个文件不超过100MB。
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
@@ -183,7 +213,6 @@
        ref="uploadRef"
        :auto-upload="false"
        :limit="1"
-        accept=".zip"
        :on-change="handleFileChange"
        :on-remove="handleFileRemove"
        drag
@@ -194,7 +223,7 @@
        </div>
        <template #tip>
          <div class="el-upload__tip">
-            只能上传zip文件，且不超过100MB
+           文件夹使用压缩为zip格式，可以批量上传文件。
          </div>
        </template>
      </el-upload>
@@ -263,8 +292,12 @@ const uploading = ref(false)
 const isEdit = ref(false)
 const currentComponent = ref(null)
 const selectedFile = ref(null)
+const selectedCreateFile = ref(null)
+const selectedCreateFiles = ref([])
+const uploadMode = ref('files') // 'files' 或 'folder'
 const formRef = ref(null)
 const uploadRef = ref(null)
+const createUploadRef = ref(null)
 const folderTree = ref([])

 // 筛选表单
@@ -411,8 +444,32 @@ const handleSubmit = async () => {
      await uiComponentApi.updateUIComponent(form.id, form)
      ElMessage.success('更新成功')
    } else {
-      await uiComponentApi.createUIComponent(form)
-      ElMessage.success('创建成功')
+      // 检查是否上传了文件
+      if (selectedCreateFiles.value && selectedCreateFiles.value.length > 0) {
+        // 使用合并接口，同时创建组件和上传文件
+        const formData = new FormData()
+        formData.append('component_code', form.component_code)
+        formData.append('component_name', form.component_name)
+        formData.append('description', form.description || '')
+        formData.append('version', form.version || '')
+        formData.append('is_active', form.is_active ? 'true' : 'false')
+        formData.append('sort_order', form.sort_order.toString())
+        
+        // 添加所有文件
+        selectedCreateFiles.value.forEach(file => {
+          formData.append('files', file.raw)
+          if (uploadMode.value === 'folder') {
+            formData.append('paths', file.path)
+          }
+        })
+        
+        await uiComponentApi.createUIComponentWithFile(formData)
+        ElMessage.success('创建并上传成功')
+      } else {
+        // 只创建组件，不上传文件
+        await uiComponentApi.createUIComponent(form)
+        ElMessage.success('创建成功')
+      }
    }
    
    dialogVisible.value = false
@@ -441,9 +498,15 @@ const resetForm = () => {
    is_active: true,
    sort_order: 0
  })
+  selectedCreateFile.value = null
+  selectedCreateFiles.value = []
+  uploadMode.value = 'files' // 重置为文件上传模式
  if (formRef.value) {
    formRef.value.resetFields()
  }
+  if (createUploadRef.value) {
+    createUploadRef.value.clearFiles()
+  }
 }

 const handleUpload = (row) => {
@@ -472,6 +535,20 @@ const handleFileRemove = () => {
  selectedFile.value = null
 }

+const handleCreateFileChange = (file, fileList) => {
+  selectedCreateFiles.value = fileList.map(f => ({
+    raw: f.raw,
+    name: f.name,
+    path: uploadMode.value === 'folder' ? (f.raw.webkitRelativePath || f.name) : f.name
+  }))
+  selectedCreateFile.value = fileList.length > 0 ? fileList[0].raw : null // 保留兼容性
+}
+
+const handleCreateFileRemove = () => {
+  selectedCreateFiles.value = []
+  selectedCreateFile.value = null // 保留兼容性
+}
+
 const handleFileSubmit = async () => {
  if (!selectedFile.value) {
    ElMessage.warning('请选择要上传的文件')
@@ -512,7 +589,17 @@ const handleDownload = async (row) => {
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
-    link.setAttribute('download', `${row.component_name}.zip`)
+    
+    // 根据文件类型确定下载文件名
+    let fileName = row.component_name
+    if (row.file_path) {
+      const fileExtension = row.file_path.substring(row.file_path.lastIndexOf('.'))
+      fileName += fileExtension
+    } else {
+      fileName += '.zip' // 默认扩展名
+    }
+    
+    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
@@ -620,6 +707,18 @@ const formatDateTime = (dateTime) => {
  return date.toLocaleString('zh-CN')
 }

+// 判断文件是否为ZIP类型
+const isZipFile = (file) => {
+  if (!file) return false
+  return file.toLowerCase().endsWith('.zip')
+}
+
+// 判断文件路径是否为ZIP类型
+const isZipFileFromPath = (path) => {
+  if (!path) return false
+  return path.toLowerCase().endsWith('.zip')
+}
+
 // 生命周期
 onMounted(() => {
  fetchComponentList()
--- a/src/pages/profile/Profile.vue
+++ b/src/pages/profile/Profile.vue
@@ -550,14 +550,29 @@ const loadAlertSettings = async () => {
  try {
    // 调用API获取用户的余额预警设置
    const response = await balanceAlertApi.getUserAlertSettings()
+    
+    // 添加日志追踪：接收到的原始数据
+    console.log('[余额预警] 接收到的原始数据:', JSON.stringify(response))
+    
    if (response.success) {
-      balanceAlertSettings.value = response.data
-      originalAlertSettings.value = JSON.parse(JSON.stringify(response.data))
+      // 转换字段名，确保前端使用camelCase
+      const transformedData = {
+        enabled: response.data.enabled,
+        threshold: response.data.threshold,
+        alertPhone: response.data.alert_phone || response.data.alertPhone || ''  // 支持两种字段名，优先使用alert_phone
+      }
+      
+      // 添加日志追踪：转换后的数据
+      console.log('[余额预警] 转换后的数据:', JSON.stringify(transformedData))
+      
+      balanceAlertSettings.value = transformedData
+      originalAlertSettings.value = JSON.parse(JSON.stringify(transformedData))
    } else {
+      console.error('[余额预警] 获取余额预警设置失败:', response.message)
      ElMessage.error('获取余额预警设置失败')
    }
  } catch (error) {
-    console.error('获取余额预警设置失败:', error)
+    console.error('[余额预警] 获取余额预警设置异常:', error)
    ElMessage.error('获取余额预警设置失败')
  }
 }
@@ -565,20 +580,31 @@ const loadAlertSettings = async () => {
 // 处理预警开关变化
 const handleAlertEnabledChange = (value) => {
  if (!value) {
-    // 禁用预警时，可以清空手机号
-    balanceAlertSettings.value.alertPhone = ''
+    // 禁用预警时，保留手机号不清空，但记录日志
+    console.log('[余额预警] 预警已禁用，保留手机号:', balanceAlertSettings.value.alertPhone)
  } else {
-    // 启用预警时，使用用户手机号作为默认值
-    if (!balanceAlertSettings.value.alertPhone && userInfo.value?.phone) {
+    // 启用预警时，如果用户从未设置过预警手机号，则默认使用用户手机号
+    // 如果原始数据中alertPhone为空，说明用户从未设置过，此时才设置默认值
+    if (!originalAlertSettings.value.alertPhone && userInfo.value?.phone) {
      balanceAlertSettings.value.alertPhone = userInfo.value.phone
+      console.log('[余额预警] 首次启用预警，设置默认手机号:', userInfo.value.phone)
+    } else {
+      console.log('[余额预警] 预警已启用，保持现有手机号:', balanceAlertSettings.value.alertPhone)
    }
  }
 }

 // 处理阈值变化
 const handleThresholdChange = (value) => {
-  if (value < 0) {
+  // 确保值是数字类型
+  const numValue = Number(value)
+  
+  if (isNaN(numValue) || numValue < 0) {
    balanceAlertSettings.value.threshold = 0
+    console.log('[余额预警] 阈值已重置为0，输入值无效:', value)
+  } else {
+    balanceAlertSettings.value.threshold = numValue
+    console.log('[余额预警] 阈值已更新:', numValue)
  }
 }

@@ -588,7 +614,12 @@ const handlePhoneChange = (event) => {
  // 简单的手机号验证
  if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
    ElMessage.warning('请输入正确的手机号格式')
+    console.log('[余额预警] 手机号格式不正确:', phone)
  }
+  
+  // 更新数据模型中的手机号
+  balanceAlertSettings.value.alertPhone = phone
+  console.log('[余额预警] 手机号已更新:', phone)
 }

 // 保存余额预警设置
@@ -600,16 +631,42 @@ const saveAlertSettings = async () => {

  alertSettingsLoading.value = true
  try {
+    // 准备发送给后端的数据，确保字段名使用后端风格 (snake_case)
+    const dataToSave = {
+      enabled: balanceAlertSettings.value.enabled,
+      threshold: balanceAlertSettings.value.threshold,
+      alert_phone: balanceAlertSettings.value.alertPhone  // 转换字段名
+    }
+    
+    // 添加日志追踪：准备发送的数据
+    console.log('[余额预警] 准备发送的数据:', JSON.stringify(dataToSave))
+    console.log('[余额预警] 当前表单数据:', JSON.stringify(balanceAlertSettings.value))
+    
    // 调用API保存用户的余额预警设置
-    const response = await balanceAlertApi.updateUserAlertSettings(balanceAlertSettings.value)
+    const response = await balanceAlertApi.updateUserAlertSettings(dataToSave)
+    
+    // 添加日志追踪：API响应
+    console.log('[余额预警] API响应:', JSON.stringify(response))
+    
    if (response.success) {
-      originalAlertSettings.value = JSON.parse(JSON.stringify(balanceAlertSettings.value))
+      // 确保数据结构一致，只保留前端使用的字段
+      const updatedData = {
+        enabled: balanceAlertSettings.value.enabled,
+        threshold: balanceAlertSettings.value.threshold,
+        alertPhone: balanceAlertSettings.value.alertPhone  // 确保使用前端字段名
+      }
+      
+      // 添加日志追踪：更新后的数据
+      console.log('[余额预警] 更新后的数据:', JSON.stringify(updatedData))
+      
+      originalAlertSettings.value = JSON.parse(JSON.stringify(updatedData))
      ElMessage.success('余额预警设置保存成功')
    } else {
+      console.error('[余额预警] 保存失败:', response.message)
      ElMessage.error('保存失败：' + response.message)
    }
  } catch (error) {
-    console.error('保存余额预警设置失败:', error)
+    console.error('[余额预警] 保存余额预警设置失败:', error)
    ElMessage.error('保存余额预警设置失败')
  } finally {
    alertSettingsLoading.value = false