SKU 添加编辑选择图稿文件(未完)

src/components/byForm/index.vue

@@ -394,6 +394,10 @@ const handleSubmit = async (onSubmit) => {
       return true;
     }
   } catch (err) {
+    setTimeout(() => {
+      const errorDiv = document.getElementsByClassName("is-error");
+      errorDiv[0].scrollIntoView();
+    }, 0);
     console.log("请检查表单！", err);
     return false;
   }

src/components/makeGroupProduct/index.vue

@@ -40,7 +40,7 @@
                 </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="设计图" align="center" width="100">
+            <!-- <el-table-column label="设计图" align="center" width="100">
               <template #default="{ row, $index }">
                 <el-form-item :prop="'skuSpecList.' + $index + '.designImgUrl'">
                   <el-upload
@@ -59,7 +59,7 @@
                   </el-upload>
                 </el-form-item>
               </template>
-            </el-table-column>
+            </el-table-column> -->
             <el-table-column label="品名" min-width="220">
               <template #default="{ row, $index }">
                 <el-form-item :prop="'skuSpecList.' + $index + '.name'" :rules="rulesSpec.name" :inline-message="true" style="width: 100%">
@@ -74,6 +74,11 @@
                 </el-form-item>
               </template>
             </el-table-column>
+            <el-table-column label="图稿文件" align="center" width="160">
+              <template #default="{ row, $index }">
+                <el-button type="primary" @click="clickDrawingFile($index)" text>选择</el-button>
+              </template>
+            </el-table-column>
             <el-table-column label="加工版面" width="140">
               <template #default="{ row, $index }">
                 <el-form-item :prop="'skuSpecList.' + $index + '.machinedPanel'" style="width: 100%">
@@ -83,7 +88,7 @@
                 </el-form-item>
               </template>
             </el-table-column>
-            <el-table-column label="尺寸（长宽高，cm）" align="center" width="300">
+            <el-table-column label="尺寸（长宽高，cm）" align="center" width="280">
               <template #default="{ row, $index }">
                 <el-row>
                   <el-col :span="8">
@@ -200,6 +205,13 @@
         <el-button @click="openBOM = false" size="large">关 闭</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog title="选择BOM" v-if="openDrawingFile" v-model="openDrawingFile" width="70%">
+      <SelectPicture @selectPic="selectPic"></SelectPicture>
+      <template #footer>
+        <el-button @click="openDrawingFile = false" size="large">关 闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -208,6 +220,7 @@ import byForm from "@/components/byForm/index";
 import { ElMessage } from "element-plus";
 import Editor from "@/components/Editor/index.vue";
 import SelectBOM from "@/views/group/BOM/management/index";
+import SelectPicture from "@/components/select-picture/index.vue";
 
 const { proxy } = getCurrentInstance();
 const emit = defineEmits(["clickCancel"]);
@@ -422,18 +435,18 @@ const uploadFile = async (file) => {
 const handleSuccess = (uploadFile, index) => {
   formData.data.skuSpecList[index].specImgUrl = uploadFile.raw.fileUrl;
 };
-const uploadDesignData = ref({});
-const uploadDesignFile = async (file) => {
-  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
-  uploadDesignData.value = res.uploadBody;
-  file.id = res.id;
-  file.fileName = res.fileName;
-  file.fileUrl = res.fileUrl;
-  return true;
-};
-const handleDesignSuccess = (uploadFile, index) => {
-  formData.data.skuSpecList[index].designImgUrl = uploadFile.raw.fileUrl;
-};
+// const uploadDesignData = ref({});
+// const uploadDesignFile = async (file) => {
+//   const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+//   uploadDesignData.value = res.uploadBody;
+//   file.id = res.id;
+//   file.fileName = res.fileName;
+//   file.fileUrl = res.fileUrl;
+//   return true;
+// };
+// const handleDesignSuccess = (uploadFile, index) => {
+//   formData.data.skuSpecList[index].designImgUrl = uploadFile.raw.fileUrl;
+// };
 const clickDelete = (index) => {
   formData.data.skuSpecList.splice(index, 1);
 };
@@ -521,6 +534,17 @@ const clickRemoveBOM = (index) => {
   formData.data.skuSpecList[index].bomSpecId = "";
   formData.data.skuSpecList[index].bomSpecName = "";
 };
+const drawingFileIndex = ref(0);
+const openDrawingFile = ref(false);
+const clickDrawingFile = (index) => {
+  drawingFileIndex.value = index;
+  openDrawingFile.value = true;
+};
+const selectPic = (row) => {
+  console.log(row);
+  ElMessage({ message: "选择完成", type: "success" });
+  openDrawingFile.value = false;
+};
 </script>
 
 <style lang="scss" scoped>

src/components/makeProduct/index.vue

@@ -460,9 +460,9 @@ const addSpecification = () => {
       formData.data.skuSpecList = [
         {
           specImgUrl: "",
+          designImgUrl: "",
           name: "",
           code: "",
-          designImgUrl: "",
           barCode: "",
           machinedPanel: "",
           length: undefined,

src/components/select-picture/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <byTable
+        :source="sourceList.data"
+        :pagination="sourceList.pagination"
+        :config="config"
+        :loading="loading"
+        highlight-current-row
+        @get-list="getList"
+        @clickReset="clickReset">
+        <template #imgUrl="{ item }">
+          <div style="display: grid; place-items: center" v-if="item.imgUrl">
+            <img
+              v-lazy="item.imgUrl"
+              style="cursor: pointer; border-radius: 5px; object-fit: contain; max-width: 100px; max-height: 100px"
+              @click="openFile(item.imgUrl)" />
+          </div>
+        </template>
+      </byTable>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import byTable from "@/components/byTable/index";
+
+const { proxy } = getCurrentInstance();
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+  },
+});
+const loading = ref(false);
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "群组品号",
+        slot: "imgUrl",
+        width: 160,
+        align: "center",
+      },
+    },
+    {
+      attrs: {
+        label: "设计图",
+        prop: "imgName",
+      },
+    },
+    {
+      attrs: {
+        label: "图稿名称",
+        prop: "artworkName",
+      },
+    },
+    {
+      attrs: {
+        label: "图稿文件",
+        prop: "fileName",
+      },
+    },
+    {
+      attrs: {
+        label: "操作",
+        width: 80,
+        align: "center",
+        fixed: "right",
+      },
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "选择",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickSelect(row);
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
+const getList = async (req, status) => {
+  if (status) {
+    sourceList.value.pagination = {
+      pageNum: sourceList.value.pagination.pageNum,
+      pageSize: sourceList.value.pagination.pageSize,
+    };
+  } else {
+    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  }
+  loading.value = true;
+  proxy.post("/artworkLibrary/page", sourceList.value.pagination).then((res) => {
+    sourceList.value.data = res.rows;
+    sourceList.value.pagination.total = res.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+getList();
+const clickReset = () => {
+  getList("", true);
+};
+const emit = defineEmits(["selectPic"]);
+const clickSelect = (row) => {
+  emit("selectPic", row);
+};
+const openFile = (path) => {
+  window.open(path);
+};
+</script>
+
+<style lang="scss" scoped></style>