diff --git a/src/views/system/Setting.vue b/src/views/system/Setting.vue deleted file mode 100644 index 827d3dc..0000000 --- a/src/views/system/Setting.vue +++ /dev/null @@ -1,600 +0,0 @@ - - - - - diff --git a/src/views/system/SettingGroup.vue b/src/views/system/SettingGroup.vue deleted file mode 100644 index 83f270f..0000000 --- a/src/views/system/SettingGroup.vue +++ /dev/null @@ -1,409 +0,0 @@ - - - - - diff --git a/src/views/system/SettingManage.vue b/src/views/system/SettingManage.vue index 3499c0d..a16b19a 100644 --- a/src/views/system/SettingManage.vue +++ b/src/views/system/SettingManage.vue @@ -128,6 +128,40 @@ @@ -185,6 +219,7 @@ :title="groupDialogTitle" width="500px" destroy-on-close + class="dialog-scrollable" > + + + @@ -271,6 +310,91 @@ v-else-if="settingForm.type === 'bool'" v-model="settingForm.value" /> +
+
+
+ {{ fileInfo.realName || fileInfo.saveName }} + 文件ID: {{ settingForm.value }} + {{ formatFileSize(fileInfo.size) }} +
+ 删除 +
+ + +
+ 将文件拖到此处，或点击上传 +
+ + +
+
+
+
+
+
+ {{ fileInfo.realName || fileInfo.saveName }} + 文件ID: {{ fileInfo.id }} + {{ formatFileSize(fileInfo.size) }} +
+ 删除 +
+
+
+ + +
+ 将文件拖到此处，或点击上传 +
+ + +
+
+
+
+ + {{ item }} + +
+
+
+ + 添加 +
+
{ @@ -413,7 +542,10 @@ const getTypeColor = (type) => { 'string': 'primary', 'int': 'success', 'float': 'warning', - 'bool': 'info' + 'bool': 'info', + 'file': 'danger', + 'file_list': 'danger', + 'string_list': 'primary' } return colorMap[type] || '' } @@ -630,11 +762,134 @@ const handleTypeChange = (type) => { settingForm.value = false } else if (type === 'int' || type === 'float') { settingForm.value = 0 + } else if (type === 'file') { + settingForm.value = '' + fileInfo.value = null + } else if (type === 'file_list') { + settingForm.value = '' + fileListInfo.value = [] + } else if (type === 'string_list') { + settingForm.value = '' + newStringItem.value = '' } else { settingForm.value = '' } } +// 文件变化处理 +const handleFileChange = async (file) => { + fileUploading.value = true + try { + const formData = new FormData() + formData.append('file_names', file.name) // Add file_names as an array + formData.append('files', file.raw) + formData.append('update_type','cover') + formData.append('open_down','true') + + const res = await uploadFile(formData) + if (res.data.code === 200 && res.data.data.length > 0) { + const uploadedFile = res.data.data[0] + settingForm.value = String(uploadedFile.id) + fileInfo.value = uploadedFile + ElMessage.success('文件上传成功') + } else { + ElMessage.error(res.data.message || '文件上传失败') + } + } catch (error) { + console.error('文件上传失败:', error) + ElMessage.error('文件上传失败') + } finally { + fileUploading.value = false + } +} + +// 清除文件 +const clearFile = () => { + settingForm.value = '' + fileInfo.value = null +} + +// 格式化文件大小 +const formatFileSize = (bytes) => { + if (!bytes) return '0 B' + const k = 1024 + const sizes = ['B', 'KB', 'MB', 'GB'] + const i = Math.floor(Math.log(bytes) / Math.log(k)) + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i] +} + +// 预览文件 +const previewFile = (fileId) => { + // 这里可以根据需要实现文件预览逻辑 + ElMessage.info(`文件ID: ${fileId}`) +} + +// 获取文件列表 +const getFileList = (value) => { + if (!value) return [] + return value.split(',').filter(id => id.trim()) +} + +// 获取字符串列表 +const getStringList = (value) => { + if (!value) return [] + return value.split(',').filter(str => str.trim()) +} + +// 文件列表变化处理 +const handleFileListChange = async (file) => { + fileUploading.value = true + try { + const formData = new FormData() + formData.append('file_names', file.name) + formData.append('files', file.raw) + formData.append('update_type','cover') + formData.append('open_down','true') + + const res = await uploadFile(formData) + if (res.data.code === 200 && res.data.data.length > 0) { + const uploadedFile = res.data.data[0] + const currentFileIds = getFileList(settingForm.value) + currentFileIds.push(String(uploadedFile.id)) + settingForm.value = currentFileIds.join(',') + fileListInfo.value.push(uploadedFile) + ElMessage.success('文件上传成功') + } else { + ElMessage.error(res.data.message || '文件上传失败') + } + } catch (error) { + console.error('文件上传失败:', error) + ElMessage.error('文件上传失败') + } finally { + fileUploading.value = false + } +} + +// 移除文件 +const removeFile = (index) => { + const currentFileIds = getFileList(settingForm.value) + currentFileIds.splice(index, 1) + settingForm.value = currentFileIds.join(',') + fileListInfo.value.splice(index, 1) +} + +// 添加字符串项 +const addStringItem = () => { + if (newStringItem.value.trim()) { + const currentItems = getStringList(settingForm.value) + currentItems.push(newStringItem.value.trim()) + settingForm.value = currentItems.join(',') + newStringItem.value = '' + } +} + +// 移除字符串项 +const removeStringItem = (index) => { + const currentItems = getStringList(settingForm.value) + currentItems.splice(index, 1) + settingForm.value = currentItems.join(',') +} + const handleAddSetting = async () => { settingDialogTitle.value = '新增配置' // 刷新配置组列表以确保数据最新 @@ -648,6 +903,9 @@ const handleAddSetting = async () => { open: false, note: '' }) + fileInfo.value = null + fileListInfo.value = [] + newStringItem.value = '' settingDialogVisible.value = true } @@ -672,6 +930,12 @@ const handleEditSetting = async (row) => { settingForm.value = parseInt(data.value) || 0 } else if (data.type === 'float') { settingForm.value = parseFloat(data.value) || 0 + } else if (data.type === 'file') { + fileInfo.value = null // 如果需要获取文件信息，可以调用文件详情接口 + } else if (data.type === 'file_list') { + fileListInfo.value = [] // 如果需要获取文件信息，可以调用文件详情接口 + } else if (data.type === 'string_list') { + newStringItem.value = '' } settingDialogVisible.value = true } @@ -888,8 +1152,71 @@ onMounted(() => { background-color: #f8f9fa !important; } -:deep(.el-card__body) { - padding: 0; +:deep(.dialog-scrollable .el-dialog) { + max-height: 90vh; + display: flex; + flex-direction: column; +} + +:deep(.dialog-scrollable .el-dialog__body) { + max-height: calc(90vh - 120px); + overflow-y: auto; + padding: 20px; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ +} + +/* 完全隐藏滚动条但保持滚动功能 */ +:deep(.dialog-scrollable .el-dialog__body)::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} + +/* 确保弹窗内容区域正确布局 */ +:deep(.dialog-scrollable .el-dialog__header) { + flex-shrink: 0; +} + +:deep(.dialog-scrollable .el-dialog__footer) { + flex-shrink: 0; + padding: 20px; + border-top: 1px solid #e4e7ed; +} + +/* 移动端适配 */ +@media (max-width: 768px) { + :deep(.dialog-scrollable .el-dialog) { + max-height: 95vh; + width: 95vw !important; + margin: 0 auto; + } + + :deep(.dialog-scrollable .el-dialog__body) { + max-height: calc(95vh - 140px); + padding: 15px; + } + + :deep(.dialog-scrollable .el-dialog__footer) { + padding: 15px; + } +} + +/* 确保表单在弹窗中正确显示 */ +:deep(.dialog-scrollable .el-form) { + margin: 0; +} + +:deep(.dialog-scrollable .el-form-item) { + margin-bottom: 20px; +} + +/* 文件上传组件在弹窗中的样式优化 */ +:deep(.dialog-scrollable .file-uploader) { + margin-bottom: 10px; +} + +:deep(.dialog-scrollable .file-info-display), +:deep(.dialog-scrollable .file-list-info-display) { + margin-bottom: 15px; } :deep(.el-tabs__header) { @@ -918,4 +1245,193 @@ onMounted(() => { :deep(.el-tabs__active-bar) { background-color: #2c3e50; } + +/* 文件上传相关样式 */ +.file-upload-section { + width: 100%; +} + +.file-uploader { + width: 100%; +} + +:deep(.file-uploader .el-upload) { + width: 100%; +} + +:deep(.file-uploader .el-upload-dragger) { + width: 100%; + border: 1px dashed #d9d9d9; + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; + transition: border-color 0.3s; +} + +:deep(.file-uploader .el-upload-dragger:hover) { + border-color: #409eff; +} + +.file-info-display { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px; + border: 1px solid #e4e7ed; + border-radius: 6px; + background-color: #f5f7fa; +} + +.file-details { + display: flex; + flex-direction: column; + gap: 4px; +} + +.file-name { + font-weight: 500; + color: #303133; + max-width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; +} + +.file-id { + font-size: 12px; + color: #909399; +} + +.file-size { + font-size: 12px; + color: #909399; +} + +/* 文件列表相关样式 */ +.file-list-section { + width: 100%; +} + +.file-list-info-display { + margin-bottom: 16px; +} + +.file-list-details { + display: flex; + flex-direction: column; + gap: 8px; +} + +.file-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px; + border: 1px solid #e4e7ed; + border-radius: 6px; + background-color: #f5f7fa; +} + +.file-item .file-details { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +} + +.file-item .file-name { + font-weight: 500; + color: #303133; + max-width: 180px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + cursor: pointer; + transition: color 0.3s; +} + +.file-item .file-name:hover { + color: #409eff; +} + +/* 字符串列表相关样式 */ +.string-list-section { + width: 100%; +} + +.string-list-display { + margin-bottom: 16px; +} + +.string-list-items { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 12px; +} + +.string-item { + margin: 0; +} + +.string-list-input { + display: flex; + flex-direction: column; + gap: 8px; +} + +/* 表格中的文件列表和字符串列表样式 */ +.file-list-display { + display: flex; + flex-direction: column; + gap: 4px; +} + +.file-link { + font-size: 12px; + margin-right: 8px; + max-width: 150px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: middle; +} + +.string-list-display { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.string-tag { + margin: 0; + max-width: 120px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .file-name { + max-width: 120px !important; + } + + .file-item .file-name { + max-width: 100px !important; + } + + .file-link { + max-width: 100px !important; + } + + .string-tag { + max-width: 80px !important; + } +} diff --git a/问题.MD b/问题.MD index b059da8..5960824 100644 --- a/问题.MD +++ b/问题.MD @@ -3,13 +3,61 @@ 自行访问下面的接口地址内容 -1.添加了参数show_home 用于控制商品套餐是否在首页显示，http://localhost:5174/product/list在该页面的编辑弹窗和新增弹窗添加show_home参数，是否展示按钮，这是个boolean值，true为展示，false为不展示 ✅已完成 -创建商品套餐 - POST /api/v1/admin/good/plan/create - 接口ID：412068533 - 接口地址：https://app.apifox.com/link/project/5145887/apis/api-412068533 +1.- 管理员 配置信息类型 type参数新增 file 类型，先点击上传图片的位置上传文件请求文件上传接口后将获取的响应数据中的id赋值到value，用户端返回信息会返回url ✅已完成 +- 管理员 配置信息类型 + - 新增 file 类型，上传文件后，设置value为id + - 新增 file_list 类型，允许上传多个文件，value 为文件列表id，使用 , 分割 + - 新增 string_list 类型，value 为字符串列表，使用 , 分割 +创建配置 + POST /api/v1/admin/server/setting/create + 接口ID：361964543 + 接口地址：https://app.apifox.com/link/project/5145887/apis/api-361964543 + 以下为响应数据格式： + { + "code": 200, + "message": "Success", + "data": { + "id": 5, + "name": "测试111", + "value": "1459", + "note": "测试", + "type": "file", + "settingGroup": null, + "settingGroupID": 4, + "open": true, + "CreatedAt": "2026-03-10T11:06:05.531505043+08:00", + "UpdatedAt": "2026-03-10T11:06:05.531505043+08:00", + "omitempty": null + } +} +文件上传 + POST /api/v1/tools/file/upload + 接口ID：223275082 + 接口地址：https://app.apifox.com/link/project/5145887/apis/api-223275082 + + 以下是响应数据格式： + { + "code": 200, + "message": "Success", + "data": [ + { + "id": 1459, + "realName": "312", + "saveName": "17731118324", + "savePath": "static/files/2026-03-10/17731118324", + "size": 323351, + "type": "work_order", + "content": "", + "userId": 4, + "openDow": true, + "CreatedAt": "2026-03-10T11:03:52.910463212+08:00", + "UpdatedAt": "2026-03-10T11:03:52.910463212+08:00", + "omitempty": null + } + ] +} -----------------------------------------------------------------------------------------------需要解决 规则限制：