From 628f5a9ae886933139f25afe0081e124b3e8ce24 Mon Sep 17 00:00:00 2001
From: zhouhaibin <zhouhaibin@qq.com>
Date: Fri, 14 Jun 2024 10:32:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=A7=E5=93=81=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/costTypeComponents.vue         |   8 +-
 src/modules/productManagement/api/index.ts    |   2 +-
 .../components/uploadImage.vue                | 106 ++++++++++++++++++
 .../view/companyProducts/index.vue            |  80 ++++++++-----
 .../view/personProducts/index.vue             |  74 +++++++-----
 .../view/supplierProducts/index.vue           |  25 ++++-
 src/modules/support/api/index.ts              |   4 +
 7 files changed, 244 insertions(+), 55 deletions(-)
 create mode 100644 src/modules/productManagement/components/uploadImage.vue

diff --git a/src/modules/costManagement/components/costTypeComponents.vue b/src/modules/costManagement/components/costTypeComponents.vue
index 5fc29aa..160f343 100644
--- a/src/modules/costManagement/components/costTypeComponents.vue
+++ b/src/modules/costManagement/components/costTypeComponents.vue
@@ -143,7 +143,13 @@ export default {
             label: '产品描述',
             labelWidth: 120,
             //editDisabled: true //编辑时禁用
-            display: false //表单不展示该字段
+            display: false ,//表单不展示该字段,
+            overHidden: true,
+          },
+          image: {
+            label: '图片',
+            labelWidth: 120,
+            type: 'upload'
           },
           remarks: {
             label: '备注',
diff --git a/src/modules/productManagement/api/index.ts b/src/modules/productManagement/api/index.ts
index e114ec1..296ee6b 100644
--- a/src/modules/productManagement/api/index.ts
+++ b/src/modules/productManagement/api/index.ts
@@ -27,7 +27,7 @@ export const supplierInformation = Object.assign({}, COMMON_METHOD, {
 
 // 厂商产品管理
 export const supplierProducts = Object.assign({}, COMMON_METHOD, {
-  serveUrl: '/' + moduleName + '/' + 'supplierProducts' + '/'
+  serveUrl: '/' + moduleName + '/' + 'supplierProducts' + '/',
 })
 
 // 公司产品
diff --git a/src/modules/productManagement/components/uploadImage.vue b/src/modules/productManagement/components/uploadImage.vue
new file mode 100644
index 0000000..320349e
--- /dev/null
+++ b/src/modules/productManagement/components/uploadImage.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-upload
+    v-model:file-list="fileList"
+    class="upload-demo"
+    action
+    :on-preview="handlePreview"
+    :on-remove="handleRemove"
+    list-type="picture"
+    :limit="1"
+    :http-request="ImgUploadSectionFile"
+    :before-upload="beforeAvatarUpload"
+    :on-change="handleEditChange"
+    :on-exceed="handleExceed"
+    accept=".png, .jpg"
+  >
+    <el-button type="primary">上传图片</el-button>
+    <template #tip>
+      <div class="el-upload__tip">支持 jpg/png 最大尺寸为10Mb</div>
+    </template>
+  </el-upload>
+  <el-dialog v-model="dialogVisible">
+      <img w-full :src="dialogImageUrl" alt="Preview Image" />
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref,defineEmits,defineProps} from 'vue'
+import { ElMessage } from 'element-plus'
+
+import type { UploadProps, UploadUserFile } from 'element-plus'
+const propsData= defineProps(["modelValue","moduleParam"])
+const emits= defineEmits(['update:modelValue'])
+const fileList = ref<UploadUserFile[]>([])
+let dialogVisible = ref(false)
+let dialogImageUrl = ref()
+
+if(propsData.modelValue){
+    fileList.value.push({url:propsData.modelValue,name:propsData.modelValue.split('/')[propsData.modelValue.split('/').length-1]})
+    console.log(fileList.value)
+}
+// const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+//   console.log(uploadFile, uploadFiles)
+// }
+
+const handlePreview: UploadProps['onPreview'] = (file) => {
+  console.log(file)
+  dialogImageUrl.value = file.url
+  dialogVisible.value = true
+}
+
+// 删除图片
+function handleRemove(file, fileList) {
+  if (fileList.length === 0) {
+    fileList = []
+  } else {
+    let dl = fileList.indexOf(file)
+    fileList.splice(dl, 1)
+  }
+  console.log('remove', file, fileList)
+  //   hideUploadEdit = fileList.length >= limitNum
+}
+
+// on-change添加文件，上传成功和上传失败时都会被调用
+function handleEditChange(file, fileList) {
+  console.log('file:', file, fileList)
+  //   hideUploadEdit = fileList.length >= limitNum
+  // console.log("this.fileList:", this.fileList);
+  // console.log("this.hideUploadEdit:", this.hideUploadEdit);
+}
+// http-request自定义上传
+function ImgUploadSectionFile(param) {
+  console.log('param', param)
+  emits("update:modelValue",param.file)
+}
+
+// before-upload上传文件之前的钩子，参数为上传的文件
+// 若返回 false 或者返回 Promise 且被 reject，则停止上传
+function beforeAvatarUpload(file) {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+  const isLt2M = file.size / 1024 / 1024 < 10
+  if (!isJPG) {
+    ElMessage.error('上传图片只能是 JPG 或 PNG 格式!')
+  }
+  if (!isLt2M) {
+    ElMessage.error('上传图片大小不能超过 10MB!')
+  }
+  return isJPG && isLt2M
+}
+function handleExceed() {
+  ElMessage.warning('最多只能上传一个文件')
+}
+</script>
+
+<!-- :limit="limitNum" //最大允许上传个数
+:class="{hide:hideUploadEdit}" //加类名为了隐藏上传样式
+:on-remove="handleRemove" //文件列表移除文件时的钩子
+:on-change="handleEditChange" //文件状态改变时的钩子(可以限制文件数量和文件大小)
+:http-request="ImgUploadSectionFile" //覆盖默认的上传行为，实现手动上传
+:before-upload="beforeAvatarUpload" //上传文件之前的钩子
+:with-credentials="true" //支持发送 cookie 凭证信息
+:auto-upload="true" //是否在选取文件后立即进行上传(不知什么原因false没效果)
+accept=".png, .jpg" //接受上传的文件类型
+action="" //手动上传不需要填写url
+list-type="picture-card" //设置文件列表的样式
+:file-list="fileList" //上传的文件列表
+ -->
diff --git a/src/modules/productManagement/view/companyProducts/index.vue b/src/modules/productManagement/view/companyProducts/index.vue
index fefb932..e0b5052 100644
--- a/src/modules/productManagement/view/companyProducts/index.vue
+++ b/src/modules/productManagement/view/companyProducts/index.vue
@@ -56,12 +56,17 @@
     <template #modelId-form="{}">
       <product-model-components v-model="formData.modelId" :module-param="moduleParam" />
     </template>
+    <template #image-form="{}">
+      <uploadImage v-model="formData.image" :module-param="moduleParam" />
+    </template>
   </avue-crud>
 </template>
 <script setup>
 import { ref, getCurrentInstance, reactive } from 'vue'
 import supplierInformationComponents from '@/modules/productManagement/components/supplierInformationComponents.vue'
 import productModelComponents from '@/modules/productManagement/components/productModelComponents.vue'
+import uploadImage from '@/modules/productManagement/components/uploadImage.vue'
+import apiIndex from '@/api/index'
 //获取this
 let { proxy } = getCurrentInstance()
 const option = ref(null)
@@ -105,8 +110,8 @@ option.value = {
       labelWidth: 120,
       prop: 'productName', //sProductName
       search: true,
-      html:true,
-      formatter:(val)=>{
+      html: true,
+      formatter: (val) => {
         return val.productName
       },
       searchLabelWidth: 120
@@ -148,8 +153,8 @@ option.value = {
       labelWidth: 120,
       prop: 'productSpecifications',
       //editDisabled: true //编辑时禁用
-      html:true,
-      formatter:(val)=>{
+      html: true,
+      formatter: (val) => {
         return val.productSpecifications
       },
       display: false //表单不展示该字段
@@ -158,27 +163,33 @@ option.value = {
       label: '图片',
       labelWidth: 120,
       prop: 'image',
-      type: 'img',
+      type: 'img'
+      // httpRequest: (file, column) => {
+      //   console.log("image",file, column)
+      //   const formData = new FormData()
+      //   formData.append('image', file.file)
+      //   apiIndex.support.attachment.uploadImageReturnUrl(formData)
+      // }
     },
     {
       label: '品牌',
       labelWidth: 120,
-      prop: 'brand',
+      prop: 'brand'
     },
     {
       label: '单位',
       labelWidth: 120,
-      prop: 'unit',
+      prop: 'unit'
     },
     {
       label: '除税价格',
       labelWidth: 120,
-      prop: 'exTaxPrice',
+      prop: 'exTaxPrice'
     },
     {
       label: '税率',
       labelWidth: 120,
-      prop: 'taxrate',
+      prop: 'taxrate'
     },
     {
       label: '信息来源',
@@ -195,27 +206,46 @@ option.value = {
   ]
 }
 data.value = []
-function rowSave(row, done, loading) {
-  api.add(row).then(() => {
-    done()
-    onLoad()
-  }).catch(() => {
-    loading()
-  
-  })
+async function rowSave(row, done, loading) {
+  //先上传图片 获取图片的url
+  console.log(row.image)
+  const formData = new FormData()
+  formData.append('image', row.image)
+  let res = await apiIndex.support.attachment.uploadImageReturnUrl(formData)
+  row.image = res.data
+  //在更新信息
+  api
+    .add(row)
+    .then(() => {
+      done()
+      onLoad()
+    })
+    .catch(() => {
+      loading()
+    })
 }
 function rowDel(row, index) {
   api.remove(row.id)
   onLoad()
 }
-function rowUpdate(row, index, done, loading) {
-  api.modify(row).then(() => {
-    done()
-    onLoad()
-  }).catch(() => {
-    loading()
-  
-  })
+async function rowUpdate(row, index, done, loading) {
+  if (typeof row.image === 'object') {
+    console.log(row.image)
+    const formData = new FormData()
+    formData.append('image', row.image)
+    let res = await apiIndex.support.attachment.uploadImageReturnUrl(formData)
+    row.image = res.data
+  }
+
+  api
+    .modify(row)
+    .then(() => {
+      done()
+      onLoad()
+    })
+    .catch(() => {
+      loading()
+    })
   // done()
 }
 function onLoad() {
diff --git a/src/modules/productManagement/view/personProducts/index.vue b/src/modules/productManagement/view/personProducts/index.vue
index 8ef5e60..93b8928 100644
--- a/src/modules/productManagement/view/personProducts/index.vue
+++ b/src/modules/productManagement/view/personProducts/index.vue
@@ -56,12 +56,18 @@
     <template #modelId-form="{}">
       <product-model-components v-model="formData.modelId" :module-param="moduleParam" />
     </template>
+    <template #image-form="{}">
+      <uploadImage v-model="formData.image" :module-param="moduleParam" />
+    </template>
   </avue-crud>
 </template>
 <script setup>
 import { ref, getCurrentInstance, reactive } from 'vue'
 import supplierInformationComponents from '@/modules/productManagement/components/supplierInformationComponents.vue'
 import productModelComponents from '@/modules/productManagement/components/productModelComponents.vue'
+import apiIndex from '@/api/index'
+import uploadImage from '@/modules/productManagement/components/uploadImage.vue'
+
 //获取this
 let { proxy } = getCurrentInstance()
 const option = ref(null)
@@ -105,8 +111,8 @@ option.value = {
       labelWidth: 120,
       prop: 'productName', //sProductName
       search: true,
-      html:true,
-      formatter:(val)=>{
+      html: true,
+      formatter: (val) => {
         return val.productName
       },
       searchLabelWidth: 120
@@ -148,8 +154,8 @@ option.value = {
       labelWidth: 120,
       prop: 'productSpecifications',
       //editDisabled: true //编辑时禁用
-      html:true,
-      formatter:(val)=>{
+      html: true,
+      formatter: (val) => {
         return val.productSpecifications
       },
       display: false //表单不展示该字段
@@ -158,27 +164,27 @@ option.value = {
       label: '图片',
       labelWidth: 120,
       prop: 'image',
-      type: 'img',
+      type: 'img'
     },
     {
       label: '品牌',
       labelWidth: 120,
-      prop: 'brand',
+      prop: 'brand'
     },
     {
       label: '单位',
       labelWidth: 120,
-      prop: 'unit',
+      prop: 'unit'
     },
     {
       label: '除税价格',
       labelWidth: 120,
-      prop: 'exTaxPrice',
+      prop: 'exTaxPrice'
     },
     {
       label: '税率',
       labelWidth: 120,
-      prop: 'taxrate',
+      prop: 'taxrate'
     },
     {
       label: '信息来源',
@@ -195,27 +201,45 @@ option.value = {
   ]
 }
 data.value = []
-function rowSave(row, done, loading) {
-  api.add(row).then(() => {
-    done()
-    onLoad()
-  }).catch(() => {
-    loading()
-  
-  })
+async function rowSave(row, done, loading) {
+  if (typeof row.image === 'object') {
+    console.log(row.image)
+    const formData = new FormData()
+    formData.append('image', row.image)
+    let res = await apiIndex.support.attachment.uploadImageReturnUrl(formData)
+    row.image = res.data
+  }
+  api
+    .add(row)
+    .then(() => {
+      done()
+      onLoad()
+    })
+    .catch(() => {
+      loading()
+    })
 }
 function rowDel(row, index) {
   api.remove(row.id)
   onLoad()
 }
-function rowUpdate(row, index, done, loading) {
-  api.modify(row).then(() => {
-    done()
-    onLoad()
-  }).catch(() => {
-    loading()
-  
-  })
+async function rowUpdate(row, index, done, loading) {
+  if (typeof row.image === 'object') {
+    console.log(row.image)
+    const formData = new FormData()
+    formData.append('image', row.image)
+    let res = await apiIndex.support.attachment.uploadImageReturnUrl(formData)
+    row.image = res.data
+  }
+  api
+    .modify(row)
+    .then(() => {
+      done()
+      onLoad()
+    })
+    .catch(() => {
+      loading()
+    })
 }
 function onLoad() {
   pageInfo.pageNum = page.currentPage
diff --git a/src/modules/productManagement/view/supplierProducts/index.vue b/src/modules/productManagement/view/supplierProducts/index.vue
index 906bb8b..1c04313 100644
--- a/src/modules/productManagement/view/supplierProducts/index.vue
+++ b/src/modules/productManagement/view/supplierProducts/index.vue
@@ -57,12 +57,17 @@
     <template #modelId-form="{}">
       <product-model-components v-model="formData.modelId" :module-param="moduleParam" />
     </template>
+    <template #image-form="{}">
+      <uploadImage v-model="formData.image" :module-param="moduleParam" />
+    </template>
   </avue-crud>  
 </template>
 <script setup>
 import { ref, getCurrentInstance, reactive } from 'vue'
 import supplierInformationComponents from '@/modules/productManagement/components/supplierInformationComponents.vue'
 import productModelComponents from '@/modules/productManagement/components/productModelComponents.vue'
+import apiIndex from '@/api/index'
+import uploadImage from '@/modules/productManagement/components/uploadImage.vue'
 //获取this
 let { proxy } = getCurrentInstance()
 const option = ref(null)
@@ -163,7 +168,7 @@ option.value = {
       label: '图片',
       labelWidth: 120,
       prop: 'image',
-      type: 'img',
+      type: 'upload',
     },
     {
       label: '品牌',
@@ -203,7 +208,14 @@ option.value = {
   ]
 }
 data.value = []
-function rowSave(row, done, loading) {
+async function rowSave(row, done, loading) {
+  if (typeof row.image === 'object') {
+    console.log(row.image)
+    const formData = new FormData()
+    formData.append('image', row.image)
+    let res = await apiIndex.support.attachment.uploadImageReturnUrl(formData)
+    row.image = res.data
+  }
   api
     .add(row)
     .then((res) => {
@@ -218,7 +230,14 @@ function rowDel(row, index) {
   api.remove(row.id)
   onLoad()
 }
-function rowUpdate(row, index, done, loading) {
+async function rowUpdate(row, index, done, loading) {
+  if (typeof row.image === 'object') {
+    console.log(row.image)
+    const formData = new FormData()
+    formData.append('image', row.image)
+    let res = await apiIndex.support.attachment.uploadImageReturnUrl(formData)
+    row.image = res.data
+  }
   api
     .modify(row)
     .then((res) => {
diff --git a/src/modules/support/api/index.ts b/src/modules/support/api/index.ts
index 3c5e05b..9b6ca9a 100644
--- a/src/modules/support/api/index.ts
+++ b/src/modules/support/api/index.ts
@@ -54,6 +54,10 @@ export const attachment = Object.assign({}, COMMON_METHOD, {
   // 上传图片
   uploadImage(param) {
     return request.upload({ url: this.serveUrl + 'uploadImage', data: param })
+  },
+  uploadImageReturnUrl(param){
+    return request.upload({ url: this.serveUrl + 'uploadImageReturnUrl', data: param })
+
   }
 })