✨ feat(【drp-产品标识附件查询】): 新增产品标识附件查询模块

新版GSP要求，需索取供应商的标签与DI进行存档，现有已过首营物料和新建物料需上传标签，方便验收组核对 需求:产品标签首营组索取后上传到物料集团并规范命名，验收组在WMS验收界面如标签未上传，需有产品标签未上传提醒功 能，已上传的能打开图片方便验收核对

20240131288

src/api/WMS/product-marking.js

@@ -0,0 +1,20 @@
+// 产品标识附件查询
+import request from '@/utils/request'
+
+// 查询文件列表
+export function referFile(params) {
+  return request({
+    url: `/refer/pic/${params.code}`,
+    method: 'get',
+    params,
+  })
+}
+
+// 下载
+export function download(data) {
+  return request({
+    url: `/download`,
+    method: 'post',
+    data,
+  })
+}

src/views/WMS/product-marking/columns.js

@@ -0,0 +1,10 @@
+export default function useColumns() {
+  const TableColumns = [
+    {
+      item: { key: "name", title: "名称", width: "auto" },
+      attr: {},
+    },
+
+  ];
+  return { TableColumns };
+}

src/views/WMS/product-marking/index.vue

@@ -0,0 +1,119 @@
+<!-- 产品标识附件查询 -->
+<script>
+import { referFile, download } from "@/api/WMS/product-marking";
+import useColumns from "./columns";
+export default {
+  name: "ProductMarking",
+  components: {
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+  },
+  data() {
+    const page = this.$init.page();
+    const { TableColumns } = useColumns();
+    return {
+      page,
+      size: "mini",
+      TableColumns,
+      loading: false,
+      tableData: [],
+    };
+  },
+  methods: {
+    async getList(params) {
+      try {
+        this.loading = true;
+        let { code, msg, rows, total } = await referFile(params);
+        if (code == 200) {
+          this.tableData = rows;
+          this.page.total = total;
+        }
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 下载
+    // async useDownload(row) {
+    //   try {
+    //     this.$modal.loading("请稍候...");
+    //     let formData = new FormData();
+    //     formData.append("url", row.url);
+    //     await download(formData).then(async (res) => {
+    //       var blob = new Blob([res], {
+    //         type: "image/jpeg",
+    //       });
+    //       const link = document.createElement("a");
+    //       link.href = URL.createObjectURL(blob);
+    //       link.download = row.name; // 这里填保存成的文件名
+    //       link.click();
+    //       URL.revokeObjectURL(link.href);
+    //     });
+    //   } catch (error) {
+    //   } finally {
+    //     this.$modal.closeLoading();
+    //   }
+    // },
+
+    useDownload(row) {
+      let [url, isPreview] = row.url.split("?");
+      let [isView, value] = isPreview.split("=");
+      window.open(`${url}?${isView}=${false}`);
+    },
+    usePreview(row) {
+      let [url, isPreview] = row.url.split("?");
+      let [isView, value] = isPreview.split("=");
+      window.open(`${url}?${isView}=${true}`);
+    },
+  },
+  async created() {
+    let { code } = this.$route.query;
+    await this.getList({ ...this.page, code });
+  },
+};
+</script>
+
+<template>
+  <el-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <el-super-ux-table
+      v-model="tableData"
+      :size="size"
+      :page="page"
+      :columns="TableColumns"
+      index
+      pagination
+      storage-key="ProductMarkingSuperTable"
+      @row-dblclick="useDownload"
+      @pagination="getList(page)"
+    >
+      <ux-table-column fixed="right" title="操作" align="center" width="100">
+        <template slot-scope="scope">
+          <el-button type="text" @click="useDownload(scope.row)" :size="size"
+            >下载</el-button
+          >
+          <el-button type="text" @click="usePreview(scope.row)" :size="size"
+            >预览</el-button
+          >
+        </template>
+      </ux-table-column>
+    </el-super-ux-table>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.el-card {
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
+}
+</style>