kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端差不多，需要后端接收文件

Browse Source
This commit is contained in:
kevin
2026-01-16 20:49:11 +08:00
parent 56d4b104eb
commit 6396b79ac5
7 changed files with 519 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontent/ops_vue_js/src/components/useDropzone.vue
+334 -88
View File
@@ -1,133 +1,379 @@
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'
import { ref, onMounted, onUnmounted,defineProps } from "vue";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
import Dropzone from "dropzone";
import "dropzone/dist/dropzone.css";
const dropzoneElement = ref(null)
let dropzoneInstance = null
const files = ref([])
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const dropzoneElement = ref(null);
let dropzoneInstance = null;
const files = ref([]);
const prop= defineProps({
maxFiles: {
type: Number,
default: 5,
},
acceptedFiles:{
type: String,
default: "image/*",
},
maxFilesize:{
type: Number,
default: 10,
}
});
// 初始化 Dropzone
const initDropzone = () => {
if (!dropzoneElement.value) return
if (!dropzoneElement.value) return;
// 禁用自动发现
Dropzone.autoDiscover = false
Dropzone.autoDiscover = false;
// 移除任何现有的 Dropzone 实例
if (dropzoneInstance) {
dropzoneInstance.destroy()
dropzoneInstance.destroy();
}
// 初始化新的实例
dropzoneInstance = new Dropzone(dropzoneElement.value, {
url: '/api/files/upload', // 上传地址
method: 'post',
// 确保不启用分片上传
// chunking: false, // 明确禁用分片
// forceChunking: false, // 强制不分片
// chunkSize: false, // 不分片大小
// retryChunks: false, // 不重试分片
// parallelChunkUploads: false, // 不并行上传分片
url: "/api/files/upload", // 上传地址
// headers: {
// user_cookie: "cccc",
// },
method: "post",
//uploadMultiple: true,
previewTemplate: document.getElementById("custom-template").innerHTML,
parallelUploads: 3, // 同时上传的文件数
maxFilesize: prop.maxFilesize, // MB
maxFiles: prop.maxFiles, // 最大文件数
acceptedFiles:prop.acceptedFiles, // 接受的文件类型
//addRemoveLinks: true, // 显示移除链接
dictDefaultMessage: t("dropzone.upload_drop_or_click"),
dictFallbackMessage: t("dropzone.upload_browser_not_supported"),
dictFileTooBig:
t("dropzone.upload_file_too_big") +
"({{filesize}}MB). " +
t("dropzone.upload_max_file_size") +
"{{maxFilesize}}MB.",
dictInvalidFileType: t("dropzone.upload_invalid_file_type"),
dictResponseError: t("dropzone.upload_server_error") + "{{statusCode}}",
//dictCancelUpload: t('dropzone.upload_cancel'),
//dictUploadCanceled: t('dropzone.upload_canceled'),
//dictCancelUploadConfirmation: t('dropzone.upload_cancel_confirmation'),
dictRemoveFile: t("dropzone.upload_remove_file"),
dictMaxFilesExceeded:
t("dropzone.upload_max_files") +
"{{maxFiles}}" +
t("dropzone.upload_max_files_unit"),
parallelUploads: 1, // 同时上传的文件数
maxFilesize: 10, // MB
maxFiles: 5, // 最大文件数
acceptedFiles: 'image/*,.pdf,.doc,.docx', // 接受的文件类型
addRemoveLinks: true, // 显示移除链接
dictDefaultMessage: '拖放文件到这里或点击上传',
dictFallbackMessage: '您的浏览器不支持拖放文件上传',
dictFileTooBig: '文件太大 ({{filesize}}MB). 最大文件大小: {{maxFilesize}}MB.',
dictInvalidFileType: '不支持此文件类型',
dictResponseError: '服务器响应错误 {{statusCode}}',
dictCancelUpload: '取消上传',
dictUploadCanceled: '上传已取消',
dictCancelUploadConfirmation: '确定要取消上传吗?',
dictRemoveFile: '移除文件',
dictMaxFilesExceeded: '您最多只能上传 {{maxFiles}} 个文件',
// 事件处理
init: function() {
this.on('success', (file, response) => {
console.log('上传成功:', file.name, response)
}),
this.on('error', (file, errorMessage) => {
console.error('上传失败:', file.name, errorMessage)
}),
this.on('removedfile', (file) => {
console.log('remove:')
files.value = files.value.filter(f => f.name !== file.name)
})
}
})
}
init: function () {
this.on("success", (file, response) => {
console.log("上传成功:", file, response);
file.previewElement.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
// 处理点击事件
console.log("缩略图被点击", file);
// 可以在这里实现：
// 1. 预览大图
// 2. 显示文件详情
// 3. 触发自定义操作
});
});
this.on("error", (file, errorMessage) => {
console.error("上传失败:", file.name, errorMessage);
});
this.on("removedfile", (file) => {
console.log("remove:", file);
//files.value = files.value.filter(f => f.name !== file.name)
});
this.on("addedfile", (file) => {
console.log("addfile", file);
});
this.on("sending", function (file, xhr, formData) {
// 获取表单值并添加到 FormData
//console.log(userStore.userCookie.Value)
formData.append("cookie", userStore.userCookie.Value);
});
},
});
};
// 自定义方法
const formatBytes = (bytes, decimals = 2) => {
if (bytes === 0) return '0 Bytes'
const k = 1024
const dm = decimals < 0 ? 0 : decimals
const sizes = ['Bytes', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}
// const formatBytes = (bytes, decimals = 2) => {
// if (bytes === 0) return '0 Bytes'
// const k = 1024
// const dm = decimals < 0 ? 0 : decimals
// const sizes = ['Bytes', 'KB', 'MB', 'GB']
// const i = Math.floor(Math.log(bytes) / Math.log(k))
// return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
// }
// 手动添加文件的方法
const addFiles = (fileList) => {
if (dropzoneInstance) {
Array.from(fileList).forEach(file => {
dropzoneInstance.addFile(file)
})
}
}
// // 手动添加文件的方法
// const addFiles = (fileList) => {
// if (dropzoneInstance) {
// Array.from(fileList).forEach(file => {
// dropzoneInstance.addFile(file)
// })
// }
// }
// 获取所有已添加的文件
const getAllFiles = () => {
return dropzoneInstance ? dropzoneInstance.files : []
}
// // 获取所有已添加的文件
// const getAllFiles = () => {
// return dropzoneInstance ? dropzoneInstance.files : []
// }
// 清除所有文件
const removeAllFiles = () => {
if (dropzoneInstance) {
dropzoneInstance.removeAllFiles(true)
}
}
// // 清除所有文件
// const removeAllFiles = () => {
// if (dropzoneInstance) {
// dropzoneInstance.removeAllFiles(true)
// }
// }
// 组件挂载时初始化
onMounted(() => {
initDropzone()
})
initDropzone();
});
// 组件卸载时销毁
onUnmounted(() => {
if (dropzoneInstance) {
dropzoneInstance.destroy()
dropzoneInstance.destroy();
}
})
});
</script>
<template>
<div>
<div id="custom-template" style="display: none">
<div class="dz-preview dz-file-preview my-custom-style">
<div class="remove-btn" data-dz-remove>
<!-- <i class="bi bi-x"></i> -->
X
</div>
<div class="dz-image">
<img data-dz-thumbnail alt="File preview" />
<!-- 缩略图 -->
</div>
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<!-- 文件名 -->
<div class="dz-size"><span data-dz-size></span></div>
<!-- 文件大小 -->
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress></span>
<!-- 进度条 -->
</div>
<div class="dz-success-mark" data-dz-successmark>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
<path d="M9 12l2 2l4 -4" />
</svg>
</div>
<!-- 成功标记 -->
<div class="dz-error-mark" data-dz-errormark>
<svg
xmlns="http://www.w3.org/2000/svg"
width="240"
height="240"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-circle-x"
>
<path stroke="none" fill="none" d="M0 0h24v24H0z" />
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
<path d="M10 10l4 4m0 -4l-4 4" />
</svg>
</div>
<!-- 错误标记 -->
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<!-- 错误信息 -->
<!-- 移除按钮 -->
</div>
</div>
<div ref="dropzoneElement" class="dropzone"></div>
<div v-if="files.length > 0" class="mt-4">
<!-- <div v-if="files.length > 0" class="mt-4">
<h3>已选择的文件：</h3>
<ul>
<li v-for="file in files" :key="file.name">
{{ file.name }} ({{ formatBytes(file.size) }})
</li>
</ul>
</div>
</div> -->
</div>
</template>
<style scoped>
.dropzone {
border: 2px dashed #cccccc;
border-radius: 5px;
background: white;
padding: 20px;
min-height: 150px;
.dz_mark {
height: 60px;
width: 60px;
}
</style>
.thumbnail-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 20px;
background-color: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* 缩略图样式 */
.thumbnail {
width: var(--thumbnail-size);
height: var(--thumbnail-size);
border-radius: var(--border-radius);
object-fit: cover;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.thumbnail:hover {
transform: scale(1.05);
border-color: #6c757d;
}
/* 缩略图包装器 */
.thumbnail-wrapper {
position: relative;
width: var(--thumbnail-size);
height: var(--thumbnail-size);
margin-bottom: 10px;
}
/* 移除按钮 */
.remove-btn {
position: absolute;
top: -12px;
right: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #dc3545;
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.remove-btn:hover {
background-color: #bb2d3b;
transform: scale(1.1);
}
/* 文件名称 */
.file-name {
font-size: 12px;
text-align: center;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #495057;
}
/* 上传区域 */
.upload-area {
border: 2px dashed #dee2e6;
border-radius: 15px;
padding: 30px;
text-align: center;
background-color: #f8f9fa;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.upload-area:hover {
border-color: #6c757d;
background-color: #e9ecef;
}
.upload-icon {
font-size: 48px;
color: #6c757d;
margin-bottom: 10px;
}
.preview-title {
color: #343a40;
border-bottom: 2px solid #e9ecef;
padding-bottom: 10px;
margin-bottom: 20px;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #6c757d;
}
.empty-state i {
font-size: 48px;
margin-bottom: 15px;
color: #adb5bd;
}
.counter-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: #0d6efd;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.thumbnail-actions {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.file-input {
display: none;
}
</style>
frontent/ops_vue_js/src/i18n/en.json
+50 -4
View File
@@ -20,6 +20,20 @@
"loding": "Loading...",
"add": "Add new option: "
},
"dropzone": {
"upload_drop_or_click": "Drag and drop files here or click to upload",
"upload_browser_not_supported": "Your browser does not support drag-and-drop file upload",
"upload_file_too_big": "File is too large",
"upload_max_file_size": "Maximum file size: ",
"upload_invalid_file_type": "File type not supported",
"upload_server_error": "Server responded with an error",
"upload_cancel": "Cancel upload",
"upload_canceled": "Upload canceled",
"upload_cancel_confirmation": "Are you sure you want to cancel the upload?",
"upload_remove_file": "Remove file",
"upload_max_files": "You can upload up to ",
"upload_max_files_unit": " files"
},
"cropper": {
"select_image": "Select Image",
"select_File": "Select File",
@@ -46,6 +60,38 @@
"add_part": "Add Order",
"exp_report": "Export Report"
},
"purchase_addorder": {
"add_order": "Add Order",
"order_info": "Order Information",
"title": "Title",
"input_title": "Enter order title",
"remarks": "Remarks",
"remarks_text": "Enter text notes",
"purchase_channel": "Purchase Channel",
"link": "Link",
"style_remarks": "Style Remarks",
"add_style": "Add Style",
"cost": "Cost",
"type": "Type",
"quantity": "Quantity",
"fee": "Fee",
"total_price": "Total Price",
"currency": "Currency",
"operation": "Operation",
"remove": "Remove",
"fee_type": "Fee type",
"input_quantity": "Quantity",
"input_fee": "Fee",
"select_currency": "Select currency",
"add": "Add",
"other_status": "Other Status",
"update_time": "Update Time",
"tracking_number": "Tracking Number",
"input_tracking_number": "Enter tracking number",
"order_status": "Order Status",
"modify_order_status": "Modify Order Status",
"submit": "Submit"
},
"schedule": {
"my_schedule": "My Schedule",
"add_event": "Add Event",
@@ -155,11 +201,11 @@
"source_code": "Source Code",
"copy": "Copyright © 2025 Operations. All rights reserved."
},
"cost_type":{
"unit_price":"Unit Price",
"freight":"Freight"
"cost_type": {
"unit_price": "Unit Price",
"freight": "Freight"
},
"order_status": {
"order_status": {
"pending_order": "Pending Order",
"order_placed": "Order Placed",
"in_transit": "In Transit",
frontent/ops_vue_js/src/i18n/zh-CN.json
+46
View File
@@ -20,6 +20,20 @@
"loding": "正在加载...",
"add": "添加新选项: "
},
"dropzone": {
"upload_drop_or_click": "拖放文件到这里或点击上传",
"upload_browser_not_supported": "您的浏览器不支持拖放文件上传",
"upload_file_too_big": "文件太大",
"upload_max_file_size": "最大文件大小: ",
"upload_invalid_file_type": "不支持此文件类型",
"upload_server_error": "服务器响应错误",
"upload_cancel": "取消上传",
"upload_canceled": "上传已取消",
"upload_cancel_confirmation": "确定要取消上传吗?",
"upload_remove_file": "移除文件",
"upload_max_files": "您最多只能上传",
"upload_max_files_unit": "个文件"
},
"cropper": {
"select_image": "选择图片",
"select_File": "选择文件",
@@ -46,6 +60,38 @@
"add_part": "添加订单",
"exp_report": "生成报告"
},
"purchase_addorder": {
"add_order": "添加订单",
"order_info": "订单信息",
"title": "标题",
"input_title": "输入订单标题",
"remarks": "备注",
"remarks_text": "输入文字备注",
"purchase_channel": "采购途径",
"link": "链接",
"style_remarks": "样式备注",
"add_style": "添加样式",
"cost": "成本",
"type": "类型",
"quantity": "数量",
"fee": "费用",
"total_price": "总价",
"currency": "货币",
"operation": "操作",
"remove": "移除",
"fee_type": "费用类型",
"input_quantity": "数量",
"input_fee": "费用",
"select_currency": "选择货币类型",
"add": "添加",
"other_status": "其他状态",
"update_time": "更新时间",
"tracking_number": "快递单号",
"input_tracking_number": "输入快递单号",
"order_status": "订单状态",
"modify_order_status": "修改订单状态",
"submit": "提交"
},
"schedule": {
"my_schedule": "我的日程",
"add_event": "添加事件",
frontent/ops_vue_js/src/views/purchase/addorder.vue
+69 -35
View File
@@ -5,6 +5,14 @@ import { useI18n } from "vue-i18n";
import tagadder from "@/components/tagadder.vue";
import dateTimePicker from "@/components/dateTimePicker.vue";
import useDropzone from "@/components/useDropzone.vue";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
import { useRouter } from "vue-router";
const router = useRouter();
import TomSelect from "tom-select";
import "tom-select/dist/css/tom-select.css";
@@ -81,6 +89,10 @@ function add_cost() {
onMounted(() => {
functionupdataTitle();
//sele_init();
if (!userStore.isLoggedIn) {
router.push("/login");
}
});
// 监听语言变化，更新标题
watch(locale, () => {
@@ -95,7 +107,7 @@ watch(locale, () => {
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<h2 class="page-title">添加订单</h2>
<h2 class="page-title">{{ t("purchase_addorder.add_order") }}</h2>
</div>
</div>
</div>
@@ -106,37 +118,47 @@ watch(locale, () => {
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">订单信息</h4>
<h4 class="card-title">
{{ t("purchase_addorder.order_info") }}
</h4>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label required">标题</label>
<label class="form-label required">{{
t("purchase_addorder.title")
}}</label>
<input
type="text"
class="form-control"
name="example-text-input"
placeholder="输入订单标题"
:placeholder="t('purchase_addorder.title')"
/>
</div>
<div class="mb-3">
<label class="form-label"
>备注 <span class="form-label-description">0/100</span></label
>{{ t("purchase_addorder.remarks") }}
<span class="form-label-description">0/100</span></label
>
<useDropzone></useDropzone>
<textarea
class="form-control"
class="form-control mt-2"
name="example-textarea-input"
rows="6"
placeholder="Content.."
:placeholder="t('purchase_addorder.remarks_text')"
></textarea>
</div>
</div>
<div class="card-header">
<h4 class="card-title">采购途径</h4>
<h4 class="card-title">
{{ t("purchase_addorder.purchase_channel") }}
</h4>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">URL</label>
<label class="form-label">{{
t("purchase_addorder.link")
}}</label>
<input
name="url"
type="url"
@@ -145,13 +167,19 @@ watch(locale, () => {
value=""
/>
<div class="mt-3">
<label class="form-label">样式备注</label>
<label class="form-label">{{
t("purchase_addorder.style_remarks")
}}</label>
<tagadder placeholder="添加样式"></tagadder>
<tagadder
:placeholder="t('purchase_addorder.add_style')"
></tagadder>
</div>
<div class="mt-3">
<label class="form-label">成本</label>
<label class="form-label">{{
t("purchase_addorder.cost")
}}</label>
<table
v-show="cost_sheet_tab.length"
@@ -159,12 +187,14 @@ watch(locale, () => {
>
<thead>
<tr>
<th>类型</th>
<th>数量</th>
<th>费用</th>
<th>总价</th>
<th>货币</th>
<th class="w-1">操作</th>
<th>{{ t("purchase_addorder.type") }}</th>
<th>{{ t("purchase_addorder.quantity") }}</th>
<th>{{ t("purchase_addorder.fee") }}</th>
<th>{{ t("purchase_addorder.total_price") }}</th>
<th>{{ t("purchase_addorder.currency") }}</th>
<th class="w-1">
{{ t("purchase_addorder.operation") }}
</th>
</tr>
</thead>
<tbody>
@@ -183,7 +213,7 @@ watch(locale, () => {
class="btn btn-outline-danger"
@click="del_cost(key)"
>
Del
{{ t("purchase_addorder.remove") }}
</button>
</td>
</tr>
@@ -201,11 +231,10 @@ watch(locale, () => {
<div class="row g-5">
<div class="col-xl-2">
类型
{{ t("purchase_addorder.fee_type") }}
<select
ref="select_type"
class="form-control"
placeholder="选择费用类型"
autocomplete="off"
value="1"
v-model="cost_sheet.type"
@@ -216,7 +245,7 @@ watch(locale, () => {
</select>
</div>
<div class="col-xl-3">
数量
{{ t("purchase_addorder.input_quantity") }}
<input
type="number"
class="form-control"
@@ -226,7 +255,7 @@ watch(locale, () => {
/>
</div>
<div class="col-xl-3">
费用
{{ t("purchase_addorder.input_fee") }}
<input
type="number"
class="form-control"
@@ -237,11 +266,10 @@ watch(locale, () => {
/>
</div>
<div class="col-xl-2">
货币
{{ t("purchase_addorder.select_currency") }}
<select
ref="select_beast"
class="form-control"
placeholder="选择货币类型"
autocomplete="off"
value="1"
v-model="cost_sheet.currency_type"
@@ -255,12 +283,12 @@ watch(locale, () => {
</select>
</div>
<div class="col-xl-2">
操作
{{ t("purchase_addorder.operation") }}
<button
class="form-control btn btn-outline-primary"
@click="add_cost"
>
添加
{{ t("purchase_addorder.add") }}
</button>
</div>
</div>
@@ -269,30 +297,37 @@ watch(locale, () => {
</div>
<div class="card-header">
<h4 class="card-title">其他状态</h4>
<h4 class="card-title">
{{ t("purchase_addorder.other_status") }}
</h4>
</div>
<div class="card-body">
<div class="mb-3">
<div class="row g-5">
<div class="col-xl-4">
<label class="form-label required">更新时间</label>
<label class="form-label required">{{
t("purchase_addorder.update_time")
}}</label>
<dateTimePicker></dateTimePicker>
</div>
<div class="col-xl-4">
<label class="form-label">快递单号</label>
<label class="form-label">{{
t("purchase_addorder.tracking_number")
}}</label>
<input
type="text"
class="form-control"
placeholder="输入快递单号"
:placeholder="
t('purchase_addorder.input_tracking_number')
"
value=""
/>
</div>
<div class="col-xl-4">
订单状态
{{ t("purchase_addorder.order_status") }}
<select
ref="select_beast"
class="form-control"
placeholder="选择订单状态"
autocomplete="off"
value="1"
>
@@ -306,9 +341,8 @@ watch(locale, () => {
</div>
<div class="card-footer text-end">
<div class="d-flex">
<button class="btn btn-link">Cancel</button>
<button type="submit" class="btn btn-primary ms-auto">
Send data
{{ t("purchase_addorder.submit") }}
</button>
</div>
</div>
frontent/ops_vue_js/src/views/settings/account.vue
+1
View File
@@ -8,6 +8,7 @@ import { useUserStore } from "@/stores/user";
import { my_network_func } from "@/my_network_func";
import MyOffcanvas from "@/components/MyOffcanvas.vue";
import { useRouter } from "vue-router";
const mos = ref();
frontent/ops_vue_js/src/views/test.vue
+4 -1
View File
@@ -1,8 +1,11 @@
<script setup>
import useDropzone from '@/components/useDropzone.vue';
</script>
<template>
<useDropzone></useDropzone>
<!-- <useDropzoneBootstrap></useDropzoneBootstrap>
<useFilePond></useFilePond> -->
</template>