采购未完成

src/api/svc/cg/index.js

@@ -42,3 +42,12 @@ export function delInfo(id) {
         method: 'delete'
     })
 }
+
+// 查询采购信息全部列表
+export function all(query) {
+    return request({
+        url: '/cg/info/all',
+        method: 'get',
+        params: query
+    })
+}

src/components/FileUpload/index.vue

@@ -1,21 +1,8 @@
 <template>
   <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :data="data"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="fileUpload"
-      v-if="!disabled"
-    >
+    <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :data="data"
+      :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess"
+      :show-file-list="false" :headers="headers" class="upload-file-uploader" ref="fileUpload" v-if="!disabled">
       <!-- 上传按钮 -->
       <el-button type="primary">选取文件</el-button>
     </el-upload>
@@ -27,7 +14,8 @@
       的文件
     </div>
     <!-- 文件列表 -->
-    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text"
+      name="el-fade-in-linear" tag="ul">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
@@ -49,7 +37,7 @@ const props = defineProps({
   // 上传接口地址
   action: {
     type: String,
-    default: "/common/upload"
+    default: "/file/upload"
   },
   // 上传携带的参数
   data: {
@@ -106,8 +94,8 @@ watch(() => props.modelValue, val => {
     const list = Array.isArray(val) ? val : props.modelValue.split(',')
     // 然后将数组转为对象数组
     fileList.value = list.map(item => {
-      if (typeof item === "string") {
-        item = { name: item, url: item }
+      if (typeof item.url === "string") {
+        item = { name: item.name, url: item.url }
       }
       item.uid = item.uid || new Date().getTime() + temp++
       return item
@@ -116,7 +104,7 @@ watch(() => props.modelValue, val => {
     fileList.value = []
     return []
   }
-},{ deep: true, immediate: true })
+}, { deep: true, immediate: true })
 
 // 上传前校检格式和大小
 function handleBeforeUpload(file) {
@@ -162,7 +150,7 @@ function handleUploadError(err) {
 // 上传成功回调
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
-    uploadList.value.push({ name: res.fileName, url: res.fileName })
+    uploadList.value.push({ name: res.data.name, url: '/file/' + res.data.id })
     uploadedSuccessfully()
   } else {
     number.value--
@@ -234,9 +222,11 @@ onMounted(() => {
   opacity: 0.5;
   background: #c8ebfb;
 }
+
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;
@@ -244,12 +234,14 @@ onMounted(() => {
   position: relative;
   transition: none !important;
 }
+
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }

src/components/ImageUpload/index.vue

@@ -37,7 +37,7 @@ const props = defineProps({
   // 上传接口地址
   action: {
     type: String,
-    default: "/common/upload"
+    default: "/file/upload"
   },
   // 上传携带的参数
   data: {

src/router/index.js

@@ -86,6 +86,10 @@ export const constantRoutes = [
         path: 'cg',
         component: () => import('@/views/hd/cg/index'),
       },
+      {
+        path: 'cg/detail',
+        component: () => import('@/views/hd/cg/detail/index'),
+      },
       {
         path: 'wd',
         component: () => import('@/views/hd/wd/index'),

src/views/hd/cg/detail/index.vue

@@ -0,0 +1,90 @@
+<template>
+    <div style="display: flex;width: 100%;justify-content: center;">
+        <el-form :model="form">
+            <div class="info">
+                <el-form-item label="商品名称">
+                    <el-input v-model="form.spmc" />
+                </el-form-item>
+                <el-form-item label="商品类型">
+                    <el-input v-model="form.splx" />
+                </el-form-item>
+                <el-form-item label="采购数量">
+                    <el-input v-model="form.cgsl" />
+                </el-form-item>
+                <el-form-item label="采购时间">
+                    <el-input v-model="form.cgsj" />
+                </el-form-item>
+                <el-form-item label="商品图片">
+                    <el-upload :headers="headers" :action="baseUrl + '/file/upload'" :on-success="uploadSptpSuccess"
+                        :file-list="fileSptpList" :limit="1">
+                        <el-button type="primary">点击上传</el-button>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item label="订单截图">
+                    <el-upload :headers="headers" :action="baseUrl + '/file/upload'" :on-success="uploadDdjtSuccess"
+                        :file-list="fileDdjtList" :limit="1">
+                        <el-button type="primary">点击上传</el-button>
+                    </el-upload>
+                </el-form-item>
+            </div>
+            <div class="ymq">
+
+            </div>
+        </el-form>
+    </div>
+</template>
+
+<script setup>
+import { getToken } from "@/utils/auth"
+import { getInfo, updateInfo } from '@/api/svc/cg/index.js'
+import { getInfo as getFileInfo } from '@/api/svc/file/index.js'
+import { onMounted } from 'vue';
+import { ref } from 'vue'
+
+const route = useRoute()
+const form = ref({})
+const headers = ref({ Authorization: "Bearer " + getToken() })
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+const fileSptpList = ref([])
+const fileDdjtList = ref([])
+
+function uploadSptpSuccess(res) {
+    if (res.code === 200) {
+        form.value.fileSptp = res.data.id
+        updateInfo(form.value)
+    }
+}
+
+function uploadDdjtSuccess(res) {
+    if (res.code === 200) {
+        form.value.fileDdjt = res.data.id
+        updateInfo(form.value)
+    }
+}
+
+async function getFileList(ids) {
+    if (!ids) return [];
+    const idArray = ids.split(',');
+    const promises = idArray.map(id =>
+        getFileInfo(id).then(res => ({
+            name: res.data.name,
+            url: baseUrl + '/file/' + res.data.id
+        }))
+    );
+    return Promise.all(promises);
+}
+
+onMounted(() => {
+    getInfo(route.query.id).then(res => {
+        form.value = res.data
+        getFileList(res.data.fileSptp).then(res => {
+            fileSptpList.value = res
+        })
+        getFileList(res.data.fileDdjt).then(res => {
+            fileDdjtList.value = res
+        })
+    })
+})
+</script>
+
+<style scoped></style>

src/views/hd/cg/index.vue

@@ -1,13 +1,38 @@
 <template>
-    <div>
-        <ImagePreview :src="'/file/5'" width="100px" height="100px" />
+    <div style="display: flex;align-items: center;width: 100%;flex-direction: column;">
+        <div @click="toDetail(item.id)" v-for="item in list" style="width: 90%;margin-top: 10px;">
+            <div style="display: flex;width: 100%;padding: 10px;background-color: #FFF;border-radius: 5px;">
+                <ImagePreview :src="'/file/' + item.fileSptp" width="100px" height="100px" />
+                <div style="display: flex;flex-direction: column;margin-left: 10px;">
+                    <div><el-text>商品名称：{{ item.spmc }}</el-text></div>
+                    <div><el-text>商品类型：{{ item.splx }}</el-text></div>
+                    <div><el-text>采购数量：{{ item.cgsl }}个</el-text></div>
+                    <div><el-text>采购时间：{{ item.cgsj }}</el-text></div>
+                </div>
+            </div>
+        </div>
 
     </div>
 </template>
 
 <script setup>
 import ImagePreview from '@/components/ImagePreview/index.vue'
+import { all } from '@/api/svc/cg/index.js'
+import { onMounted } from 'vue';
 
+const router = useRouter()
+
+const list = ref([])
+
+function toDetail(id) {
+    router.push({ path: '/hd/cg/detail', query: { id } })
+}
+
+onMounted(() => {
+    all().then(res => {
+        list.value = res.data
+    })
+})
 </script>
 
 <style scoped></style>

src/views/hd/index.vue

@@ -12,7 +12,7 @@
             <div class="sidebar-item"><router-link to="/hd/qd">签到</router-link></div>
             <div class="sidebar-item"><router-link to="/hd/his">历史</router-link></div>
             <div class="sidebar-item"><router-link to="/hd/zd">账单</router-link></div>
-            <!-- <div class="sidebar-item"><router-link to="/hd/cg">采购</router-link></div> -->
+            <div class="sidebar-item"><router-link to="/hd/cg">采购</router-link></div>
             <div class="sidebar-item"><router-link to="/hd/wd">我的</router-link></div>
         </div>
     </div>