diff --git a/frontent/ops_vue_js/src/components/dateTimePicker.vue b/frontent/ops_vue_js/src/components/dateTimePicker.vue
index 6990ea1..d4314ad 100644
--- a/frontent/ops_vue_js/src/components/dateTimePicker.vue
+++ b/frontent/ops_vue_js/src/components/dateTimePicker.vue
@@ -1,83 +1,85 @@
 <script setup>
-import { onMounted, ref, watch, defineProps,reactive } from "vue";
+import { onMounted, ref, watch, defineProps, reactive } from "vue";
 
 import flatpickr from "flatpickr";
-import 'flatpickr/dist/flatpickr.css';
-import 'flatpickr/dist/l10n/zh.js';
+import "flatpickr/dist/flatpickr.css";
+import "flatpickr/dist/l10n/zh.js";
 
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
 
+const datatimepack = ref();
 
-const datatimepack=ref()
-
-const datatimepack_config=reactive({
-
-    enableTime: true,
-    dateFormat: "Y-m-d H:i",
-    minuteIncrement:1,
-    time_24hr: true
-    //locale:"zh"
-  
-})
-
-const sele_data=reactive()
-
-function getCurrentDateTime() {
-  const now = new Date();
-  
-  const year = now.getFullYear();
-  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
-  const day = String(now.getDate()).padStart(2, '0');
-  const hours = String(now.getHours()).padStart(2, '0');
-  const minutes = String(now.getMinutes()).padStart(2, '0');
-  
-  return `${year}-${month}-${day} ${hours}:${minutes}`;
-}
-
-
-watch(locale, () => {
-  if(locale.value=="zh-CN"){
-    datatimepack_config.locale='zh'
-  }else{
-    datatimepack_config.locale='en'
-  }
-//console.log(locale.value=="zh-CN"?"zh":"en")
-});
-
-const prop= defineProps({
+const prop = defineProps({
   setdef: {
     type: String,
     default: "",
   },
+  max_date: {
+    type: [String, Date, Function],
+    default: () => new Date(), // 默认值为当前时间
+  },
 });
+
+const datatimepack_config = reactive({
+  enableTime: true,
+  dateFormat: "Y-m-d H:i",
+  minuteIncrement: 1,
+  time_24hr: true,
+  maxDate: prop.max_date, // 只能选择当前时间之前的时间
+  //locale:"zh"
+});
+
+const sele_data = reactive();
+
+function getCurrentDateTime() {
+  const now = new Date();
+
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始
+  const day = String(now.getDate()).padStart(2, "0");
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+watch(locale, () => {
+  if (locale.value == "zh-CN") {
+    datatimepack_config.locale = "zh";
+  } else {
+    datatimepack_config.locale = "en";
+  }
+  //console.log(locale.value=="zh-CN"?"zh":"en")
+});
+
+
 onMounted(() => {
   // @formatter:off
   //console.log(getCurrentDateTime())
   //sele_data=getCurrentDateTime();
 
-// console.log(prop.setdef)
+  // console.log(prop.setdef)
 
-  if(prop.setdef=="")
-  {
-    datatimepack_config.defaultDate=getCurrentDateTime()
-  }else{
-    datatimepack_config.defaultDate=prop.setdef
+  if (prop.setdef == "") {
+    datatimepack_config.defaultDate = getCurrentDateTime();
+  } else {
+    datatimepack_config.defaultDate = prop.setdef;
   }
-  
-  datatimepack_config.locale=locale.value=="zh-CN"?"zh":"en";
+
+  datatimepack_config.locale = locale.value == "zh-CN" ? "zh" : "en";
   flatpickr(datatimepack.value, datatimepack_config);
-
 });
 
-defineExpose({
-  
-});
+defineExpose({});
 </script>
 
 <template>
-
-    <div ></div>
-    <input ref="datatimepack" type="datetime-local" class="form-control" v-model="sele_data">
-
+  <div></div>
+  <input
+    ref="datatimepack"
+    type="datetime-local"
+    class="form-control"
+    v-model="sele_data"
+  />
 </template>
diff --git a/frontent/ops_vue_js/src/components/useDropzone.vue b/frontent/ops_vue_js/src/components/useDropzone.vue
index 62570e8..7513b5d 100644
--- a/frontent/ops_vue_js/src/components/useDropzone.vue
+++ b/frontent/ops_vue_js/src/components/useDropzone.vue
@@ -13,27 +13,27 @@ const lightbox = new FsLightbox();
 const userStore = useUserStore();
 
 const dropzoneElement = ref(null);
-let dropzoneInstance = null;
+var dropzoneInstance = null;
 
 const files = reactive([]);
 
 function get_file_from_uuid(uuid) {
   if (files.length != 0) {
-    for(let i=0;i<files.length;i++){
-      if(files[i].uuid==uuid){
+    for (var i = 0; i < files.length; i++) {
+      if (files[i].uuid == uuid) {
         return i;
       }
-    }  
-  } 
-  return -1;
-  
+    }
+    return -1;
+  }
+  return -2;
 }
 
 function remove_file_from_uuie(uuid) {
-  //delete files[uuid]
-  var id=get_file_from_uuid(uuid)
-  if(id>=0){
-    files.splice(id, 1) 
+  //devare files[uuid]
+  var id = get_file_from_uuid(uuid);
+  if (id >= 0) {
+    files.splice(id, 1);
   }
 }
 
@@ -87,12 +87,12 @@ const initDropzone = () => {
     //addRemoveLinks: true, // 显示移除链接
     dictDefaultMessage: t("dropzone.upload_drop_or_click"),
     dictFallbackMessage: t("dropzone.upload_browser_not_supported"),
-    dictFileTooBig:
+    dictFivarooBig:
       t("dropzone.upload_file_too_big") +
       "({{filesize}}MB). " +
       t("dropzone.upload_max_file_size") +
       "{{maxFilesize}}MB.",
-    dictInvalidFileType: t("dropzone.upload_invalid_file_type"),
+    dictInvalidFivarype: t("dropzone.upload_invalid_file_type"),
     dictResponseError: t("dropzone.upload_server_error") + "{{statusCode}}",
     //dictCancelUpload: t('dropzone.upload_cancel'),
     //dictUploadCanceled: t('dropzone.upload_canceled'),
@@ -106,28 +106,28 @@ const initDropzone = () => {
     // 事件处理
     init: function () {
       this.on("success", (file, response) => {
-        console.log("上传成功:", file, response);
+        //console.log("上传成功:", file, response);
         file.previewElement.addEventListener("click", function (e) {
           e.preventDefault();
           e.stopPropagation();
 
           // 处理点击事件
-          console.log("缩略图被点击", file);
+          //console.log("缩略图被点击", file);
 
           //动态把文件载入灯箱
           //先移除原有数据
-          lightbox.props.sources.splice(0,lightbox.props.sources.length)
+          lightbox.props.sources.splice(0, lightbox.props.sources.length);
 
-          var dis_id=0;
-          var dis_id_t=0;
-          for (let i=0;i<files.length;i++){
-            if(files[i]["is_upload"]==true){
-              lightbox.props.sources.push(files[i]["get_url"])
-              if(files[i]["uuid"]==file.upload.uuid){
-                dis_id=dis_id_t;
+          var dis_id = 0;
+          var dis_id_t = 0;
+          for (var i = 0; i < files.length; i++) {
+            if (files[i]["is_upload"] == true) {
+              lightbox.props.sources.push(files[i]["get_url"]);
+              if (files[i]["uuid"] == file.upload.uuid) {
+                dis_id = dis_id_t;
               }
             }
-            dis_id_t+=1;
+            dis_id_t += 1;
           }
 
           lightbox.open(dis_id);
@@ -148,18 +148,17 @@ const initDropzone = () => {
         //   size: file.size,
         // };
 
-        var file_id=get_file_from_uuid(file.upload.uuid)
-        if(file_id>=0)
-        {
-          files[file_id]["hash"]=response.return.hash;
-          files[file_id]["get_url"]=response.return.get;
-          files[file_id]["download_url"]=response.return.download;
-          files[file_id]["file_name"]=file.name;
-          files[file_id]["file_size"]=file.size;
+        var file_id = get_file_from_uuid(file.upload.uuid);
+        if (file_id >= 0) {
+          files[file_id]["hash"] = response.return.hash;
+          files[file_id]["get_url"] = response.return.get;
+          files[file_id]["download_url"] = response.return.download;
+          files[file_id]["file_name"] = file.name;
+          files[file_id]["file_size"] = file.size;
 
-          files[file_id]["is_upload"]=true;
+          files[file_id]["is_upload"] = true;
 
-          console.log(files)
+          //console.log(files)
         }
 
         //files.push(t)
@@ -173,21 +172,30 @@ const initDropzone = () => {
         console.error("上传失败:", file.name, errorMessage);
       });
       this.on("removedfile", (file) => {
-        console.log("remove:", file);
+        //console.log("remove:", file);
         //files.value = files.value.filter(f => f.name !== file.name)
-         remove_file_from_uuie(file.upload.uuid)
-         console.log(files)
+        remove_file_from_uuie(file.upload.uuid);
+        //console.log(files)
       });
       this.on("addedfile", (file) => {
         //添加文件
-        console.log("addfile", file);
-        //控制排序 需要从添加文件开始操作
-        var t = {
-          uuid: file.upload.uuid,
-          is_upload: false,
-        };
-        files.push(t);
-        console.log(files);
+        console.log(get_file_from_uuid(file.upload.uuid));
+
+        //判断文件是否重复
+        if (get_file_from_uuid(file.upload.uuid) <0) {
+          //   //控制排序 需要从添加文件开始操作
+          var t = {
+            uuid: file.upload.uuid,
+            is_upload: false,
+          };
+          files.push(t);
+          console.log(files);
+          return;
+        }
+
+        //this.removeFile(file)
+
+        
       });
       this.on("sending", function (file, xhr, formData) {
         // 获取表单值并添加到 FormData
@@ -229,6 +237,10 @@ const initDropzone = () => {
 //   }
 // }
 
+function return_files() {
+  return files;
+}
+
 // 组件挂载时初始化
 onMounted(() => {
   initDropzone();
@@ -242,6 +254,10 @@ onUnmounted(() => {
     dropzoneInstance.destroy();
   }
 });
+
+defineExpose({
+  return_files,
+});
 </script>
 
 <template>
@@ -310,15 +326,8 @@ onUnmounted(() => {
         <!-- 移除按钮 -->
       </div>
     </div>
+    <div class="text-end">{{ files.length }}/{{ maxFiles }}</div>
     <div ref="dropzoneElement" class="dropzone"></div>
-    <!-- <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>
 </template>
 
diff --git a/frontent/ops_vue_js/src/views/purchase/addorder.vue b/frontent/ops_vue_js/src/views/purchase/addorder.vue
index b7dba01..3b8e2f9 100644
--- a/frontent/ops_vue_js/src/views/purchase/addorder.vue
+++ b/frontent/ops_vue_js/src/views/purchase/addorder.vue
@@ -2,6 +2,8 @@
 import { onMounted, watch, ref, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 
+import MyOffcanvas from "@/components/MyOffcanvas.vue";
+
 import tagadder from "@/components/tagadder.vue";
 import dateTimePicker from "@/components/dateTimePicker.vue";
 
@@ -18,7 +20,12 @@ import "tom-select/dist/css/tom-select.css";
 
 const textarea_maxlen = 256;
 const textarea_len = ref(0);
-const textarea_val = ref();
+
+const title_input_dom = ref();
+
+const photos_hash = ref();
+
+const mos = ref();
 
 const { t, locale } = useI18n();
 
@@ -44,7 +51,7 @@ const order_status = reactive({
   1: t("order_status.pending_order"),
   2: t("order_status.order_placed"),
   3: t("order_status.in_transit"),
-  4: t("order_status.completed"),
+  4: t("order_status.compvared"),
   5: t("order_status.refund_requested"),
   6: t("order_status.returning"),
   7: t("order_status.refunded"),
@@ -55,7 +62,7 @@ function update_order_status() {
   order_status["1"] = t("order_status.pending_order");
   order_status["2"] = t("order_status.order_placed");
   order_status["3"] = t("order_status.in_transit");
-  order_status["4"] = t("order_status.completed");
+  order_status["4"] = t("order_status.compvared");
   order_status["5"] = t("order_status.refund_requested");
   order_status["6"] = t("order_status.returning");
   order_status["7"] = t("order_status.refunded");
@@ -86,19 +93,50 @@ function add_cost() {
   //console.log(t);
 }
 
+const submit_sheet = reactive({
+  title: "",
+  remark: "",
+  photos: [],
+  link: "",
+  part_name: "",
+  styles: [],
+  costs: [],
+  update_time: "",
+  tracking_number: "",
+  order_status: "1",
+});
+
 function submit_order() {
-  console.log("up");
+  if (submit_sheet.title == "") {
+    title_input_dom.value.classList.add("is-invalid");
+    title_input_dom.value.addEventListener("input", function () {
+      if (this.value.trim() !== "") {
+        this.classList.remove("is-invalid");
+        //this.removeEventListener('input');
+      }
+    });
+
+    mos.value?.showAlert("danger", t("purchase_addorder.title"), 1000);
+    return;
+  }
+  //载入图片哈希列表
+  var photos = photos_hash.value.return_files();
+  for (var i = 0; i < photos.length; i++) {
+    submit_sheet.photos.push(photos[i].hash);
+  }
+
+  console.log(submit_sheet);
 }
 
 function textarea_change(a) {
   //console.log(textarea_val.value.length)
 
-  textarea_len.value = textarea_val.value.length;
+  textarea_len.value = submit_sheet.remark.length;
 
   // if(a.inputType=="insertText"){
   //   textarea_len.value+=1;
   // }
-  // if(a.inputType=="deleteContentBackward"){
+  // if(a.inputType=="devareContentBackward"){
   //   textarea_len.value-=1;
   // }
 }
@@ -132,7 +170,7 @@ watch(
         cost_sheet.cost = parseFloat(fixed);
       }
     }
-  }
+  },
 );
 </script>
 
@@ -166,6 +204,8 @@ watch(
                   class="form-control"
                   name="example-text-input"
                   :placeholder="t('purchase_addorder.title')"
+                  v-model="submit_sheet.title"
+                  ref="title_input_dom"
                 />
               </div>
               <div class="mb-3">
@@ -182,12 +222,13 @@ watch(
                   :placeholder="t('purchase_addorder.remarks_text')"
                   :maxlength="textarea_maxlen"
                   @input="textarea_change"
-                  v-model="textarea_val"
+                  v-model="submit_sheet.remark"
                 ></textarea>
                 <useDropzone
                   acceptedFiles="image/*"
                   uploadURL="/api/files/upload/image"
                   maxFiles="10"
+                  ref="photos_hash"
                 ></useDropzone>
               </div>
             </div>
@@ -202,13 +243,13 @@ watch(
                 <label class="form-label">{{
                   t("purchase_addorder.link")
                 }}</label>
-                <input
+                <textarea
                   name="url"
                   type="url"
                   class="form-control"
                   placeholder="http"
-                  value=""
-                />
+                  v-model="submit_sheet.link"
+                ></textarea>
                 <div class="mb-3 mt-3">
                   <label class="form-label">{{
                     t("purchase_addorder.part_name")
@@ -218,6 +259,7 @@ watch(
                     class="form-control"
                     name="example-text-input"
                     :placeholder="t('purchase_addorder.part_name')"
+                    v-model="submit_sheet.part_name"
                   />
                 </div>
                 <div class="mt-3">
@@ -289,7 +331,7 @@ watch(
                       <select
                         ref="select_type"
                         class="form-control"
-                        autocomplete="off"
+                        autocompvare="off"
                         value="1"
                         v-model="cost_sheet.type"
                       >
@@ -324,7 +366,7 @@ watch(
                       <select
                         ref="select_beast"
                         class="form-control"
-                        autocomplete="off"
+                        autocompvare="off"
                         value="1"
                         v-model="cost_sheet.currency_type"
                       >
@@ -374,7 +416,7 @@ watch(
                       :placeholder="
                         t('purchase_addorder.input_tracking_number')
                       "
-                      value=""
+                      v-model="submit_sheet.tracking_number"
                     />
                   </div>
                   <div class="col-xl-4">
@@ -382,8 +424,8 @@ watch(
                     <select
                       ref="select_beast"
                       class="form-control"
-                      autocomplete="off"
-                      value="1"
+                      autocompvare="off"
+                      v-model="submit_sheet.order_status"
                     >
                       <option v-for="(value, key) in order_status" :value="key">
                         {{ value }}
@@ -409,6 +451,8 @@ watch(
       </div>
     </div>
   </div>
+
+  <MyOffcanvas ref="mos" />
 </template>
 
 <style></style>