产品类型

src/api/product.js

@@ -27,6 +27,41 @@ const deleteProduct = (params) => {
 const updateProductIsindex = (params) => {
     return http.put('/api/productisindex', params)
 }
+const updateProductSort = (params) => {
+    return http.put('/api/productsort', params)
+}
+//获取产品类型
+const getProductType = (params) => {
+    return http.get('/api/producttype', params)
+}
+//添加产品类型
+const addProductType = (params) => {
+    return http.post('/api/producttype', params)
+};
+// 所有产品类型
+const allproducttypetType = (params) => {
+    return http.post('/api/allproducttype', params)
+};
+//修改产品类型
+const updateProductType = (params) => {
+    return http.put('/api/producttype', params)
+};
+//删除产品类型
+const deleteProductType = (params) => {
+    return http.del('/api/producttype', params)
+}
 export default {
-    getProductList, getProductDetail, addProduct, updateProduct, deleteProduct, uploadFile,updateProductIsindex
+    getProductList,
+    updateProductSort,
+    getProductDetail,
+    deleteProductType,
+    addProduct,
+    updateProduct,
+    deleteProduct,
+    uploadFile,
+    updateProductIsindex,
+    getProductType,
+    addProductType,
+    allproducttypetType,
+    updateProductType
 }

src/router/index.js

@@ -168,6 +168,20 @@ const routes = [
                 },
                 component: () => import('../view/links/add.vue'),
             },
+            {
+                path: '/productType/list',
+                meta: {
+                    title: '产品类型'
+                },
+                component: () => import('../view/producttype/productType.vue'),
+            },
+            {
+                path: '/productType/add',
+                meta: {
+                    title: '添加产品类型'
+                },
+                component: () => import('../view/producttype/add.vue'),
+            },
         ]
     },
 ]

src/utils/http/axios.js

@@ -4,7 +4,7 @@ import router from "../../router/index.js";
 // 1. 创建axios实例
 const instance = axios.create({
     // 接口
-    baseURL: "http://localhost:8080",
+    baseURL: "./",
     // 超时时间
     timeout: 50000,
 });
@@ -16,7 +16,7 @@ instance.interceptors.request.use(
             config.headers['Authorization'] = token
         } else {
             router.push("/login");
-            ElMessage.error("未登录，请重新登录");
+            // ElMessage.error("未登录，请重新登录");
         }
         return config;
     },

src/view/Home.vue

@@ -57,6 +57,12 @@
                             </el-icon>
                             <span>产品管理</span>
                         </el-menu-item>
+                      <el-menu-item index="/productType/list" @click="saveActiveNav('/productType/list')">
+                        <el-icon>
+                          <IceCreamSquare/>
+                        </el-icon>
+                        <span>产品类型</span>
+                      </el-menu-item>
                         <el-menu-item index="/contents/list" @click="saveActiveNav('/contents/list')">
                             <el-icon><OfficeBuilding /></el-icon>
                             <span>招募和关于我们</span>
@@ -85,7 +91,8 @@
                             </el-icon>
                             <span>友情链接管理</span>
                         </el-menu-item>
-                        <el-menu-item index="/contact/list" @click="saveActiveNav('/contact/list')">
+
+                      <el-menu-item index="/contact/list" @click="saveActiveNav('/contact/list')">
                             <el-icon>
                                 <user/>
                             </el-icon>

src/view/Login.vue

@@ -61,7 +61,7 @@ const onSubmit = () => {
                     // proxy.$commonJs.changeView('/home');
                     localStorage.setItem("token", res.data.Data);
                     ElMessage.success(res.data.Msg);
-                    router.push("/contact/list");
+                  await router.push("/contact/list");
                 } else {
                     ElMessage.error(res.data.Msg);
                 }

src/view/contents/Detail.vue

@@ -16,7 +16,7 @@
           <el-input v-model="contentsDetail.synopsis" placeholder="请输入简介" />
         </el-form-item>
         <el-form-item label="详情:">
-          <el-image v-model="contentsDetail.detail" style="width: 100px; height: 100px; margin-right: 10px"
+          <el-image :src="contentsDetail.detail" style="width: 100px; height: 100px; margin-right: 10px"
                         fit="cover"></el-image>
           <el-upload :http-request="detailhttpRequests" multiple :show-file-list="true" list-type="picture-card">
             <el-icon>

src/view/links/link.vue

@@ -62,7 +62,7 @@ let total = ref(0);
 const searchForm = reactive({
   page: 1,
   size: 10,
-  desc: 'created_at desc'
+  desc: 'sort desc'
 })
 
 const UpData = async (id,field,value) => {

src/view/news/Detail.vue

@@ -32,7 +32,14 @@
           <el-input v-model="newsDetail.synopsis"></el-input>
         </el-form-item>
         <el-form-item label="详情:">
-          <EditorWithBinding v-model="newsDetail.detail"/>
+          <el-image v-if="newsDetail.detail" v-model="newsDetail.detail"
+                    style="width: 100px; height: 100px; margin-right: 10px"
+                    fit="cover"></el-image>
+          <el-upload :http-request="httpRequests" multiple :show-file-list="true" list-type="picture-card">
+            <el-icon>
+              <Plus/>
+            </el-icon>
+          </el-upload>
         </el-form-item>
       </el-form>
     </el-card>
@@ -80,18 +87,32 @@ function httpRequest(option) {
   fileList.value.push(option)
 }
 
+function httpRequests(option) {
+//将图片存到数组中
+  fileLists.value.push(option)
+}
+
+const fileLists = ref([])
 const fileList = ref([])
 const content = ref('')
 const updateProduct = async () => {
-  console.log(content.value)
+  newsDetail.image = ''
+  newsDetail.detail = ''
   let dataForm = new FormData();
-  dataForm.append('types', "serve")
+  let dataForms = new FormData();
+  dataForm.append('types', "new")
+  dataForms.append('types', "new")
   //将图片的二进制通过表单的形式发送到后台
   fileList.value.forEach((it, index) => {
     dataForm.append('file', it.file)
   })
+  fileLists.value.forEach((it, index) => {
+    dataForms.append('file', it.file)
+  })
   const fileRes = await resource.uploadResource(dataForm)
+  const fileResdetal = await resource.uploadResource(dataForm)
   newsDetail.image = fileRes.data.Data
+  newsDetail.detail = fileResdetal.data.Data
   const res = await news.updateNew({
     id: parseInt(route.query.id),
     detail: newsDetail.detail,

src/view/news/add.vue

@@ -30,8 +30,18 @@
         <el-form-item label="简介:">
           <el-input v-model="newsDetail.synopsis"></el-input>
         </el-form-item>
+        <!--        <el-form-item label="详情:">-->
+        <!--          <editor-with-binding v-model="newsDetail.detail" />-->
+        <!--        </el-form-item>-->
         <el-form-item label="详情:">
-          <editor-with-binding v-model="newsDetail.detail" />
+          <el-image v-if="newsDetail.detail" v-model="newsDetail.detail"
+                    style="width: 100px; height: 100px; margin-right: 10px"
+                    fit="cover"></el-image>
+          <el-upload :http-request="httpRequests" multiple :show-file-list="true" list-type="picture-card">
+            <el-icon>
+              <Plus/>
+            </el-icon>
+          </el-upload>
         </el-form-item>
 
       </el-form>
@@ -82,15 +92,31 @@ function httpRequest(option) {
 }
 const fileList = ref([])
 
+function httpRequests(option) {
+//将图片存到数组中
+  fileLists.value.push(option)
+}
+
+const fileLists = ref([])
+
 const updateProduct = async () => {
   let dataForm = new FormData();
-  dataForm.append('types', "serve")
+  let dataForms = new FormData();
+  dataForm.append('types', "news")
+  dataForms.append('types', "news")
   //将图片的二进制通过表单的形式发送到后台
   fileList.value.forEach((it, index) => {
     dataForm.append('file', it.file)
   })
+  //将图片的二进制通过表单的形式发送到后台
+  fileLists.value.forEach((it, index) => {
+    dataForms.append('file', it.file)
+  })
   const fileRes = await resource.uploadResource(dataForm)
+  const fileResdetal = await resource.uploadResource(dataForms)
   newsDetail.image = fileRes.data.Data
+  newsDetail.detail = fileResdetal.data.Data
+  console.log(fileResdetal)
   const res = await news.addNew({
     detail: newsDetail.detail,
     synopsis: newsDetail.synopsis,

src/view/product/Detail.vue

@@ -1,166 +1,210 @@
 <template>
-    <div>
+  <div>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
-                    <span>产品详情</span>
-                    <el-button size="mini" style="float:right" @click="router.go(-1)">返回</el-button>
-                    <el-button size="mini" style="float:right" type="primary" @click="updateProduct">修改</el-button>
-                </div>
-            </template>
-            <el-form>
-                <el-form-item label="标题:">
-                    <el-input v-model="productDetail.title"></el-input>
-                </el-form-item>
-                <el-form-item label="图片:">
-                    <el-image v-model="productDetail.url" style="width: 100px; height: 100px; margin-right: 10px"
-                        fit="cover"></el-image>
-                    <el-upload :http-request="httpRequests" multiple :show-file-list="true" list-type="picture-card">
-                        <el-icon>
-                            <Plus />
-                        </el-icon>
-                    </el-upload>
-                </el-form-item>
-                <el-form-item label="简介:">
-                    <el-input v-model="productDetail.synopsis"></el-input>
-                </el-form-item>
-                <el-form-item label="详情:">
-                    <el-image v-model="productDetail.detail" style="width: 100px; height: 100px; margin-right: 10px"
-                        fit="cover"></el-image>
-                    <el-upload :http-request="detailhttpRequests" multiple :show-file-list="true"
-                        list-type="picture-card">
-                        <el-icon>
-                            <Plus />
-                        </el-icon>
-                    </el-upload>
-                    <!-- <EditorWithBinding v-model="productDetail.detail"></EditorWithBinding> -->
-                </el-form-item>
-                <el-form-item label="产品介绍:">
-                    <EditorWithBinding v-model="productDetail.product_introduction"></EditorWithBinding>
-                </el-form-item>
-                <el-form-item label="技术参数:">
-                    <EditorWithBinding v-model="productDetail.technical_parameters"></EditorWithBinding>
-                </el-form-item>
-                <el-form-item label="使用说明:">
-                    <EditorWithBinding v-model="productDetail.instructions"></EditorWithBinding>
-                </el-form-item>
-                <el-form-item label="支持软件:">
-                    <el-upload :http-request="httpRequest" class="upload-demo" drag
-                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
-                        <el-icon class="el-icon--upload">
-                            <upload-filled />
-                        </el-icon>
-                        <div class="el-upload__text" style="width: 300px">
-                            选择上传文件
-                        </div>
-                    </el-upload>
-                </el-form-item>
-                <el-form-item label="可选配件:">
-                    <EditorWithBinding v-model="productDetail.optional_accessories"></EditorWithBinding>
-                </el-form-item>
-            </el-form>
-        </el-card>
-    </div>
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>产品详情</span>
+          <el-button size="default" style="float:right" @click="router.go(-1)">返回</el-button>
+          <el-button size="default" style="float:right" type="primary" @click="updateProduct">修改</el-button>
+        </div>
+      </template>
+      <el-form>
+        <el-form-item label="标题:">
+          <el-input v-model="productDetail.title"></el-input>
+        </el-form-item>
+        <el-form-item label="产品/服务:">
+          <el-select v-model="productDetail.type" placeholder="请选择添加类型">
+            <el-option label="服务" value="serve"/>
+            <el-option label="产品" value="product"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产品类型:">
+          <el-select v-model="productDetail.ptype" :disabled="productDetail.type === 'serve'"
+                     placeholder="请选择产品类型" style="width: 20vw">
+            <el-option v-for="p in  productType " :value="p.name" :label="p.name" :key="p.ID"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否首页展示:">
+          <el-select v-model="productDetail.isIndex" placeholder="请选择是否首页显示" style="width: 20vw">
+            <el-option label="是" value="true"/>
+            <el-option label="否" value="false"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="图片:">
+          <el-image :src="productDetail.url" style="width: 100px; height: 100px; margin-right: 10px"
+                    fit="cover"></el-image>
+          <el-upload :http-request="httpRequests" multiple :show-file-list="true" list-type="picture-card">
+            <el-icon>
+              <Plus/>
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="简介:">
+          <el-input v-model="productDetail.synopsis"></el-input>
+        </el-form-item>
+        <el-form-item label="详情:">
+          <el-image :src="productDetail.detail" style="width: 100px; height: 100px; margin-right: 10px"
+                    fit="cover"></el-image>
+          <el-upload :http-request="detailhttpRequests" multiple :show-file-list="true"
+                     list-type="picture-card">
+            <el-icon>
+              <Plus/>
+            </el-icon>
+          </el-upload>
+          <!-- <EditorWithBinding v-model="productDetail.detail"></EditorWithBinding> -->
+        </el-form-item>
+        <el-form-item label="产品介绍:">
+          <EditorWithBinding v-model="productDetail.product_introduction"></EditorWithBinding>
+        </el-form-item>
+        <el-form-item label="技术参数:">
+          <EditorWithBinding v-model="productDetail.technical_parameters"></EditorWithBinding>
+        </el-form-item>
+        <el-form-item label="使用说明:">
+          <EditorWithBinding v-model="productDetail.instructions"></EditorWithBinding>
+        </el-form-item>
+        <el-form-item label="支持软件:">
+          <el-upload :http-request="httpRequest" class="upload-demo" drag
+                     action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
+            <el-icon class="el-icon--upload">
+              <upload-filled/>
+            </el-icon>
+            <div class="el-upload__text" style="width: 300px">
+              选择上传文件
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="可选配件:">
+          <EditorWithBinding v-model="productDetail.optional_accessories"></EditorWithBinding>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
 </template>
 
 <script setup>
-import { onBeforeMount, reactive, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router'
+import {onBeforeMount, reactive, ref} from 'vue';
+import {useRoute, useRouter} from 'vue-router'
 import product from "../../api/product.js";
-import { ElMessage } from "element-plus";
+import {ElMessage} from "element-plus";
 import EditorWithBinding from "../EditorWithBinding.vue";
 import resource from "../../api/resource.js";
 
 const route = useRoute();
 const router = useRouter();
 const productDetail = reactive({
-    id: '',
-    title: '',
-    synopsis: '',
-    detail: '',
-    url: '',
-    product_introduction: '',
-    technical_parameters: '',
-    instructions: '',
-    supporting_software: '',
-    optional_accessories: '',
+  id: '',
+  title: '',
+  type: '',
+  ptype: '',
+  isIndex: '',
+  synopsis: '',
+  detail: '',
+  url: '',
+  product_introduction: '',
+  technical_parameters: '',
+  instructions: '',
+  supporting_software: '',
+  optional_accessories: '',
 })
 //定义一个响应式数组用来接收图片
 const fileList = ref([])
 const fileLists = ref([])
 const detailfileLists = ref([])
+const productType = ref([])
 
 //自定义函数用来覆盖原有的XHR行为（默认提交行为）
 function detailhttpRequests(option) {
-    //将图片存到数组中
-    detailfileLists.value.push(option)
+  //将图片存到数组中
+  detailfileLists.value.push(option)
 }
+
 //自定义函数用来覆盖原有的XHR行为（默认提交行为）
 function httpRequest(option) {
-    //将图片存到数组中
-    fileList.value.push(option)
+  //将图片存到数组中
+  fileList.value.push(option)
 }
+
 function httpRequests(option) {
-    //将图片存到数组中
-    fileLists.value.push(option)
+  //将图片存到数组中
+  fileLists.value.push(option)
+}
+
+//产品类型
+function getProductType() {
+  product.getProductType().then(res => {
+    if (res.data.Code === 200) {
+      productType.value = res.data.Data
+      console.log(productType)
+    } else {
+      ElMessage.error(res.data.Msg)
+    }
+  })
 }
-const handleContentChange = (htmlContent) => {
-    productDetail.detail = htmlContent
-    // 在这里可以使用接收到的内容进行进一步处理或者存储等操作
-};
+
 const updateProduct = async () => {
-    let dataForm = new FormData();
-    dataForm.append('types', "files")
-    //将图片的二进制通过表单的形式发送到后台
-    fileList.value.forEach((it, index) => {
-        dataForm.append('file', it.file)
-    })
-    const files = await product.uploadFile(dataForm)
+  let dataForm = new FormData();
+  dataForm.append('types', "files")
+  //将图片的二进制通过表单的形式发送到后台
+  fileList.value.forEach((it, index) => {
+    dataForm.append('file', it.file)
+  })
+  const files = await product.uploadFile(dataForm)
+  if (files.data.Code === 200) {
     productDetail.supporting_software = files.data.Data
+  }
 
-    //详情图开始
-    let detaildataForms = new FormData();
-    detaildataForms.append('types', "serve")
-    //将图片的二进制通过表单的形式发送到后台
-    detailfileLists.value.forEach((it, index) => {
-        detaildataForms.append('file', it.file)
-    })
-    const detailfileRes = await product.uploadFile(detaildataForms)
+  //详情图开始
+  let detaildataForms = new FormData();
+  detaildataForms.append('types', "serve")
+  //将图片的二进制通过表单的形式发送到后台
+  detailfileLists.value.forEach((it, index) => {
+    detaildataForms.append('file', it.file)
+  })
+  const detailfileRes = await product.uploadFile(detaildataForms)
+  if (detailfileRes.data.Code === 200) {
     productDetail.detail = detailfileRes.data.Data
-    //上传图片
-    let dataForms = new FormData();
-    dataForms.append('types', "product")
-    //将图片的二进制通过表单的形式发送到后台
-    fileLists.value.forEach((it, index) => {
-        dataForms.append('file', it.file)
-    })
-    const resourcefiles = await resource.uploadResource(dataForms)
+  }
+  //上传图片
+  let dataForms = new FormData();
+  dataForms.append('types', "product")
+  //将图片的二进制通过表单的形式发送到后台
+  fileLists.value.forEach((it, index) => {
+    dataForms.append('file', it.file)
+  })
+  const resourcefiles = await resource.uploadResource(dataForms)
+  if (resourcefiles.data.Code === 200) {
     productDetail.url = resourcefiles.data.Data
-    const res = await product.updateProduct({
-        id: parseInt(route.query.id),
-        title: productDetail.title,
-        synopsis: productDetail.synopsis,
-        detail: productDetail.detail,
-        url: productDetail.url,
-        product_introduction: productDetail.product_introduction,
-        technical_parameters: productDetail.technical_parameters,
-        instructions: productDetail.instructions,
-        supporting_software: productDetail.supporting_software,
-        optional_accessories: productDetail.optional_accessories,
-    });
-    if (res.data.Code === 200) {
-        ElMessage.success("修改成功")
-    } else {
-        ElMessage.error(res.data.Msg)
-    }
+  }
+
+  const res = await product.updateProduct({
+    id: parseInt(route.query.id),
+    title: productDetail.title,
+    synopsis: productDetail.synopsis,
+    detail: productDetail.detail,
+    url: productDetail.url,
+    type: productDetail.type,
+    ptype: productDetail.ptype,
+    isIndex: productDetail.isIndex,
+    product_introduction: productDetail.product_introduction,
+    technical_parameters: productDetail.technical_parameters,
+    instructions: productDetail.instructions,
+    supporting_software: productDetail.supporting_software,
+    optional_accessories: productDetail.optional_accessories,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("修改成功")
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
 }
 onBeforeMount(async () => {
-    if (route.query.id) {
-        const res = await product.getProductDetail({ id: route.query.id })
-        console.log(res.data)
-        Object.assign(productDetail, res.data.Data);
-    }
+  if (route.query.id) {
+    const res = await product.getProductDetail({id: route.query.id})
+    getProductType()
+    console.log(res.data)
+    Object.assign(productDetail, res.data.Data);
+  }
 })
 </script>
 

src/view/product/add.vue

@@ -25,13 +25,12 @@
                         <el-option label="产品" value="product" />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="产品类型:">
-                    <el-select v-model="productDetail.ptype" :disabled="productDetail.type === 'serve'"
-                        placeholder="请选择软件或者硬件" style="width: 20vw">
-                        <el-option label="硬件" value="hardware" />
-                        <el-option label="软件" value="software" />
-                    </el-select>
-                </el-form-item>
+              <el-form-item label="产品类型:">
+                <el-select v-model="productDetail.ptype" :disabled="productDetail.type === 'serve'"
+                           placeholder="请选择产品类型" style="width: 20vw">
+                  <el-option v-for="p in  productType " :value="p.name" :label="p.name" :key="p.ID"/>
+                </el-select>
+              </el-form-item>
                 <el-form-item label="是否首页展示:">
                     <el-select v-model="productDetail.isIndex" placeholder="请选择是否首页显示" style="width: 20vw">
                         <el-option label="是" value="true" />
@@ -78,7 +77,7 @@
 </template>
 
 <script setup>
-import { onBeforeMount, reactive, ref } from 'vue';
+import {onBeforeMount, onMounted, reactive, ref} from 'vue';
 import { useRoute, useRouter } from 'vue-router'
 import product from "../../api/product.js";
 import { ElMessage } from "element-plus";
@@ -131,6 +130,18 @@ function detailhttpRequests(option) {
     detailfileLists.value.push(option)
 }
 
+const productType = ref([])
+
+function getProductType() {
+  product.getProductType().then(res => {
+    if (res.data.Code === 200) {
+      productType.value = res.data.Data
+      console.log(productType)
+    } else {
+      ElMessage.error(res.data.Msg)
+    }
+  })
+}
 const addProduct = async () => {
     let dataForm = new FormData();
     dataForm.append('types', "serve")
@@ -196,9 +207,13 @@ onBeforeMount(async () => {
     if (route.query.id) {
         const res = await product.getProductDetail({ id: route.query.id })
         console.log(res.data)
+      getProductType()
         Object.assign(productDetail, res.data.Data);
     }
 })
+onMounted(() => {
+  getProductType()
+})
 </script>
 
 <style lang="scss" scoped></style>

src/view/product/product.vue

@@ -28,7 +28,7 @@
                 </el-table-column>
                 <el-table-column prop="ptype" label="产品类型" width="180">
                     <template #default="scope">
-                        {{ ptypeMapping[scope.row.ptype] || '服务' }}
+                      {{ scope.row.ptype || '服务' }}
                     </template>
                 </el-table-column>
                 <el-table-column prop="type" label="类型" width="180">
@@ -36,6 +36,12 @@
                         {{ typeMapping[scope.row.type] || '其他' }}
                     </template>
                 </el-table-column>
+
+              <el-table-column prop="sort" label="展示顺序(数字越小越靠前)" width="220">
+                <template #default="scope">
+                  <el-input-number v-model="scope.row.sort" @change="updateProducsort(scope.row)" size="large"/>
+                </template>
+              </el-table-column>
                 <el-table-column label="操作" width="200">
                     <template #default="scope">
                         <el-button type="danger" size="small" @click="deleteProduct(scope.row.ID)">删除</el-button>
@@ -116,7 +122,7 @@ const getProductAll = async () => {
     total.value = res.data.Data.Size;
 }
 const updateProducts = async (row) => {
-    const res = await product.updateProduct({ id: row.ID, isIndex: row.isIndex });
+  const res = await product.updateProduct({id: row.ID, sort: row.sort});
     if (res.data.Code === 200) {
         ElMessage.success("修改成功")
         // await getProductAll();
@@ -134,6 +140,15 @@ const updateProductsIsindex = async (row) => {
         ElMessage.error(res.data.Msg)
     }
 }
+const updateProducsort = async (row) => {
+  const res = await product.updateProductSort({id: row.ID, sort: row.sort});
+  if (res.data.Code === 200) {
+    ElMessage.success("修改成功")
+    // await getProductAll();
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
 
 const handleSizeChange = (size) => {
     searchForm.size = size;

src/view/producttype/add.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>详情</span>
+          <el-button size="large" style="float:right" type="info" @click="router.go(-1)">返回</el-button>
+          <el-button size="large" style="float:right" type="primary" @click="addContent">添加</el-button>
+        </div>
+      </template>
+      <el-form>
+        <el-form-item label="类型:">
+          <el-input v-model="data.name" placeholder="请输入类型"/>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+  </div>
+</template>
+<script setup>
+import {onBeforeMount, reactive, ref} from 'vue';
+import {useRoute, useRouter} from 'vue-router'
+import {ElMessage} from "element-plus";
+import links from '../../api/links.js';
+import product from "../../api/product.js";
+
+const route = useRoute();
+const router = useRouter();
+const data = reactive({
+  id: 0,
+  name: '',
+})
+const addContent = async () => {
+  const res = await product.addProductType({
+    id: 0,
+    name: data.name,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("添加成功")
+    data.name = ''
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/view/producttype/productType.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-card>
+      <el-button type="primary"
+                 @click="() => router.push({ path: '/productType/add'})">添加
+      </el-button>
+      <!-- 添加el-dialog组件 -->
+      <el-table :data="tableData" border style="width: 100%;margin-top:20px">
+        <el-table-column label="序号" width="60">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="标题" width="180">
+          <template #default="scope">
+            <el-input v-model="scope.row.name" @change="UpData(scope.row.ID,'name',scope.row.name)" size="large"/>
+          </template>
+        </el-table-column>
+        <!--        <el-table-column prop="types" label="链接" width="280">-->
+        <!--          <template #default="scope">-->
+        <!--            <el-input v-model="scope.row.url"   @change="UpData(scope.row.ID,'url',scope.row.url)" size="mini" />-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column prop="nums" label="排序" width="180">-->
+        <!--          <template #default="scope">-->
+        <!--            <el-input-number v-model="scope.row.sort" @change="UpData(scope.row.ID,'sort',scope.row.sort)" size="mini" />-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button type="danger" size="small" @click="deleteData(scope.row.ID)">删除</el-button>
+            <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination style="margin-top:20px" :current-page="searchForm.page" :page-size="searchForm.size"
+                     :total="total"
+                     @current-change="handleCurrentChange"/>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {useRouter} from 'vue-router'
+import link from "../../api/links.js";
+import product from "../../api/product.js";
+
+const dataType = reactive([])
+
+const router = useRouter();
+// Dom 挂载之后
+onMounted(() => {
+  getDataAll();
+})
+
+let tableData = ref([]);
+let total = ref(0);
+
+// 搜索条件
+const searchForm = reactive({
+  page: 1,
+  size: 10,
+  desc: ''
+})
+
+const UpData = async (id, field, value) => {
+  const res = await product.updateProductType({
+    id: parseInt(id),
+    [field]: value,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("修改成功")
+    await getDataAll();
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+// 获取资源列表
+const getDataAll = async () => {
+  // const res = await link.getalllinks(searchForm);
+  const res = await product.allproducttypetType(searchForm)
+  console.log(res)
+  tableData.value = res.data.Data.Data;
+  total.value = res.data.Data.Size;
+}
+
+const handleCurrentChange = (current) => {
+  searchForm.page = current;
+  getDataAll();
+}
+
+// 删除资源信息
+const deleteData = (id) => {
+  ElMessageBox.confirm(
+      '确定要删除该资源信息吗?',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    const res = await product.deleteProductType({id: id});
+    if (res.data.code === 200) {
+      ElMessage.success("删除成功")
+      await getDataAll();
+    } else {
+      ElMessage.error(res.data.msg)
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消删除',
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

src/view/serve/Detail.vue

@@ -17,7 +17,7 @@
                 </el-form-item>
                 <el-form-item label="图片:">
                     <el-image
-                        v-model="serveDetail.image"
+                        :src="serveDetail.image"
                         style="width: 100px; height: 100px; margin-right: 10px"
                         fit="cover"></el-image>
                     <el-upload
@@ -49,7 +49,7 @@
                 </el-form-item>
                 <el-form-item label="详情:">
                     <el-image
-                        v-model="serveDetail.detail"
+                        :src="serveDetail.detail"
                         style="width: 100px; height: 100px; margin-right: 10px"
                         fit="cover"></el-image>
                     <el-upload

vite.config.js

@@ -8,7 +8,7 @@ export default defineConfig({
         port: 3000,
         proxy: {
             '/api': {
-                target: 'http://localhost:8080', // 
+                target: './', //
                 changeOrigin: true,
                 rewrite: (path) => path.replace(/^\/api/, '')
             },