前端差不多,需要后端接收文件
This commit is contained in:
@@ -6,9 +6,23 @@ import (
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
func file_save() {
|
||||
|
||||
}
|
||||
|
||||
func ApiFiles(r *gin.RouterGroup) {
|
||||
r.POST("/upload", func(ctx *gin.Context) {
|
||||
fmt.Print(ctx.FormFile("file"))
|
||||
|
||||
cookie := ctx.PostForm("cookie")
|
||||
file, _ := ctx.FormFile("file")
|
||||
//通过cookie获取用户信息
|
||||
_, err := AuthenticationAuthorityFromCookie(cookie)
|
||||
if err == nil {
|
||||
|
||||
}
|
||||
|
||||
fmt.Println(file.Filename)
|
||||
fmt.Println(cookie)
|
||||
ReturnJson(ctx, "apiOK", nil)
|
||||
})
|
||||
r.GET("/upload", func(ctx *gin.Context) {
|
||||
|
||||
@@ -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",
|
||||
|
||||
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}} 个文件',
|
||||
//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"),
|
||||
|
||||
// 事件处理
|
||||
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;
|
||||
.dz_mark {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.thumbnail-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
min-height: 150px;
|
||||
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>
|
||||
@@ -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,9 +201,9 @@
|
||||
"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": {
|
||||
"pending_order": "Pending Order",
|
||||
|
||||
@@ -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": "添加事件",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<script setup>
|
||||
import useDropzone from '@/components/useDropzone.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<useDropzone></useDropzone>
|
||||
<!-- <useDropzoneBootstrap></useDropzoneBootstrap>
|
||||
|
||||
<useFilePond></useFilePond> -->
|
||||
</template>
|
||||
Reference in New Issue
Block a user