提交包裹图片

src/views/production/shipment/print-order/index.vue

@@ -46,7 +46,7 @@
       @get-list="getList"
       @clickReset="clickReset">
       <template #typeExpand="{ item }">
-        <div v-html="item.remark"></div>
+        <div class="remark" v-html="item.remark"></div>
       </template>
       <template #code="{ item }">
         <div>
@@ -58,12 +58,35 @@
           <div v-if="item.groupOrderCodeList && item.groupOrderCodeList.length > 0">{{ item.groupOrderCodeList.join(",") }}</div>
         </div>
       </template>
+      <template #address="{ item }">
+        <div>{{ item.province }},{{ item.city }},{{ item.county }},{{ item.detailedAddress }}</div>
+      </template>
     </byTable>
+
+    <el-dialog title="包裹图片" v-if="openPackagePicture" v-model="openPackagePicture" width="70%">
+      <div v-loading="loadingPackagePicture">
+        <el-upload
+          v-model:file-list="fileList"
+          action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+          list-type="picture-card"
+          multiple
+          :data="uploadData"
+          :before-upload="beforeUpload"
+          :on-preview="onPreview">
+          <el-icon><Plus /></el-icon>
+        </el-upload>
+      </div>
+      <template #footer>
+        <el-button @click="openPackagePicture = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitPicture()" size="large" v-preReClick>提 交</el-button>
+      </template>
+    </el-dialog>
   </el-card>
 </template>
 
 <script setup>
 import byTable from "/src/components/byTable/index";
+import { ElMessage } from "element-plus";
 
 const { proxy } = getCurrentInstance();
 const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);
@@ -162,15 +185,120 @@ const config = computed(() => {
     },
     {
       attrs: {
-        label: "合并订单号",
+        label: "总包裹数",
         slot: "groupOrderCodeList",
+        width: 90,
+      },
+    },
+    {
+      attrs: {
+        label: "事业部",
+        prop: "departmentName",
+        width: 130,
+      },
+    },
+    {
+      attrs: {
+        label: "快递",
+        prop: "expressDeliveryName",
+        width: 130,
+      },
+    },
+    {
+      attrs: {
+        label: "快递单号",
+        prop: "expressDeliveryCode",
+        width: 130,
+      },
+    },
+    {
+      attrs: {
+        label: "店铺来源",
+        prop: "sourcePlatform",
+        width: 120,
+      },
+    },
+    {
+      attrs: {
+        label: "店铺名称",
+        prop: "shopName",
+        width: 140,
+      },
+    },
+    {
+      attrs: {
+        label: "下单时间",
+        prop: "createTime",
+        width: 160,
+        align: "center",
+      },
+    },
+    {
+      attrs: {
+        label: "交期",
+        prop: "deliveryTime",
         width: 160,
+        align: "center",
       },
     },
     {
       attrs: {
-        label: "快照时间",
-        prop: "backupDate",
+        label: "收货人",
+        prop: "consignee",
+        width: 120,
+      },
+    },
+    {
+      attrs: {
+        label: "收货人电话",
+        prop: "consigneeNumber",
+        width: 160,
+      },
+    },
+    {
+      attrs: {
+        label: "收货地址",
+        slot: "address",
+        width: 300,
+      },
+    },
+    {
+      attrs: {
+        label: "总净重（kg）",
+        prop: "totalNetWeight",
+        width: 120,
+        fixed: "right",
+      },
+    },
+    {
+      attrs: {
+        label: "总体积（m³）",
+        prop: "totalVolume",
+        width: 120,
+        fixed: "right",
+      },
+    },
+    {
+      attrs: {
+        label: "操作",
+        width: 100,
+        align: "center",
+        fixed: "right",
+      },
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "包裹图片",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickPackagePicture(row);
+            },
+          },
+        ];
       },
     },
   ];
@@ -235,6 +363,83 @@ const clickCode = (row) => {
     },
   });
 };
+const openPackagePicture = ref(false);
+const rowData = ref({});
+const loadingPackagePicture = ref(false);
+const fileList = ref([]);
+const clickPackagePicture = (item) => {
+  fileList.value = [];
+  rowData.value = item;
+  openPackagePicture.value = true;
+  loadingPackagePicture.value = true;
+  proxy.post("/fileInfo/getList", { businessIdList: [item.id] }).then(
+    (fileObj) => {
+      if (fileObj[item.id] && fileObj[item.id].length > 0) {
+        let file = fileObj[item.id].filter((item) => item.businessType == "2");
+        if (file && file.length > 0) {
+          fileList.value = file.map((item) => {
+            return {
+              raw: item,
+              name: item.fileName,
+              url: item.fileUrl,
+            };
+          });
+        } else {
+          fileList.value = [];
+        }
+      }
+      loadingPackagePicture.value = false;
+    },
+    (err) => {
+      console.log(err);
+      loadingPackagePicture.value = false;
+    }
+  );
+};
+const uploadData = ref({});
+const beforeUpload = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  return true;
+};
+const onPreview = (file) => {
+  window.open(file.raw.fileUrl, "_blank");
+};
+const submitPicture = () => {
+  let packagePictureList = [];
+  if (fileList.value && fileList.value.length > 0) {
+    packagePictureList = fileList.value.map((item) => {
+      return {
+        id: item.raw.id,
+        fileName: item.raw.fileName,
+        fileUrl: item.raw.fileUrl,
+      };
+    });
+  }
+  loadingPackagePicture.value = true;
+  proxy.post("/issueBill/editPackagePicture", { id: rowData.value.id, packagePictureList: packagePictureList }).then(
+    () => {
+      openPackagePicture.value = false;
+      loadingPackagePicture.value = false;
+      ElMessage({ message: "提交成功", type: "success" });
+    },
+    (err) => {
+      console.log(err);
+      loadingPackagePicture.value = false;
+    }
+  );
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep(.remark) {
+  margin: 0 16px;
+  p {
+    margin-block-start: 0 !important;
+    margin-block-end: 0 !important;
+  }
+}
+</style>