文件修改

src/api/dataModel.js

@@ -1,20 +1,23 @@
 import http from '../utils/http/http.js'
 // 获取数据资源列表
 const  getAllData=  (params) => {
-    return http.get('/data', params)
+    return http.post('/datasall', params)
 };
 // 添加数据
 const  addData= (params) => {
-    return http.post('/data', params)
+    return http.post('/datas', params)
+};
+const  getDataType= () => {
+    return http.get('/getdatatype')
 };
 // 修改数据
 const  updateData=(params) => {
-    return http.put('/data', params)
+    return http.put('/datas', params)
 };
 // 删除数据
 const  deleteData= (params) => {
     return http.del('/data', params)
 }
 export default {
-    getAllData, addData, updateData, deleteData
+    getAllData, addData, updateData, deleteData,getDataType
 }

src/api/product.js

@@ -1,24 +1,28 @@
 import http from '../utils/http/http.js'
 // 获取资源列表
-const  getProductList=  (params) => {
+const getProductList = (params) => {
     return http.post('/productAll', params)
 };
 // 获取资源详情
-const   getProductDetail= (params) => {
+const getProductDetail = (params) => {
     return http.get('/product', params)
 };
 // 添加资源
-const   addProduct= (params) => {
+const addProduct = (params) => {
     return http.post('/product', params)
 };
 // 修改资源
-const  updateProduct=(params) => {
+const updateProduct = (params) => {
     return http.put('/product', params)
 };
+// 上传配套资源
+const uploadFile = (params) => {
+    return http.post('/file', params)
+};
 // 删除资源
-const   deleteProduct= (params) => {
+const deleteProduct = (params) => {
     return http.del('/product', params)
 }
 export default {
-    getProductList, getProductDetail, addProduct, updateProduct, deleteProduct
+    getProductList, getProductDetail, addProduct, updateProduct, deleteProduct, uploadFile
 }

src/router/index.js

@@ -120,6 +120,13 @@ const routes = [
                 component: () => import('../view/dataModel/data.vue'),
             },
             {
+                path: '/data/add',
+                meta: {
+                    title: '添加数据大屏展示'
+                },
+                component: () => import('../view/dataModel/add.vue'),
+            },
+            {
                 path: '/news/list',
                 meta: {
                     title: '获取所有新闻'
@@ -158,7 +165,7 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     // 修改页面 title
     if (to.meta.title) {
-      document.title = '知否课堂后台管理系统 - ' + to.meta.title
+      document.title = '宝智达冷链后台管理系统 - ' + to.meta.title
     }
     // 放行登录页面
     if (to.path === '/login') {

src/utils/http/axios.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import {ElMessage} from 'element-plus'
+import router from "../../router/index.js";
 // 1. 创建axios实例
 const instance = axios.create({
     // 接口
@@ -10,9 +11,12 @@ const instance = axios.create({
 // 2.请求拦截
 instance.interceptors.request.use(
     config => {
-        let token = sessionStorage.getItem('token')
+        let token = localStorage.getItem('token')
         if (token) {
-            config.headers['token'] = token
+            config.headers['Authorization'] = token
+        }else{
+            router.push("/login");
+            ElMessage.error("未登录，请重新登录");
         }
         return config;
     },
@@ -34,8 +38,10 @@ instance.interceptors.response.use(
                 case 400:
                     ElMessage.error("请求错误");
                     break;
-                case 401:
+                case 103:
                     ElMessage.error("未授权，请重新登录");
+                    localStorage.removeItem('token')
+                    router.push("/login");
                     break;
                 case 403:
                     ElMessage.error("拒绝访问");

src/view/Home.vue

@@ -27,68 +27,68 @@
                 <el-aside>
                     <div class="toggle-button" @click="isCollapse = !isCollapse">
                         <el-icon :size="20">
-                            <Expand v-if="isCollapse" />
-                            <Fold v-if="!isCollapse" />
+                            <Expand v-if="isCollapse"/>
+                            <Fold v-if="!isCollapse"/>
                         </el-icon>
                     </div>
                     <el-menu router :default-active="activePath" class="el-menu-vertical-demo" :collapse="isCollapse">
                         <el-menu-item index="/index" @click="saveActiveNav('/index')">
                             <el-icon>
-                                <house />
+                                <house/>
                             </el-icon>
                             <span>首页</span>
                         </el-menu-item>
-                        <el-sub-menu index="1">
-                            <template #title>
-                                <el-icon>
-                                    <Setting />
-                                </el-icon>
-                                <span>系统设置</span>
-                            </template>
-                            <el-menu-item index="2-1">权限管理</el-menu-item>
-                        </el-sub-menu>
+                        <!--<el-sub-menu index="1">-->
+                        <!--    <template #title>-->
+                        <!--        <el-icon>-->
+                        <!--            <Setting/>-->
+                        <!--        </el-icon>-->
+                        <!--        <span>系统设置</span>-->
+                        <!--    </template>-->
+                        <!--    <el-menu-item index="2-1">权限管理</el-menu-item>-->
+                        <!--</el-sub-menu>-->
                         <el-menu-item index="/user/list" @click="saveActiveNav('/user/list')">
                             <el-icon>
-                                <user />
+                                <Picture/>
                             </el-icon>
                             <span>资源管理</span>
                         </el-menu-item>
-                      <el-menu-item index="/product/list" @click="saveActiveNav('/product/list')">
-                        <el-icon>
-                          <user/>
-                        </el-icon>
-                        <span>产品管理</span>
-                      </el-menu-item>
-                      <el-menu-item index="/contents/list" @click="saveActiveNav('/contents/list')">
-                        <el-icon>
-                          <user/>
-                        </el-icon>
-                        <span>招募新闻管理</span>
-                      </el-menu-item>
-                      <el-menu-item index="/serves/list" @click="saveActiveNav('/serves/list')">
-                        <el-icon>
-                          <user/>
-                        </el-icon>
-                        <span>服务管理</span>
-                      </el-menu-item>
-                      <el-menu-item index="/data/list" @click="saveActiveNav('/data/list')">
-                        <el-icon>
-                          <user/>
-                        </el-icon>
-                        <span>数据大屏展示</span>
-                      </el-menu-item>
-                      <el-menu-item index="/news/list" @click="saveActiveNav('/news/list')">
-                        <el-icon>
-                          <user/>
-                        </el-icon>
-                        <span>新闻管理</span>
-                      </el-menu-item>
-                      <el-menu-item index="/contact/list" @click="saveActiveNav('/contact/list')">
-                        <el-icon>
-                          <user/>
-                        </el-icon>
-                        <span>联系方式管理</span>
-                      </el-menu-item>
+                        <el-menu-item index="/product/list" @click="saveActiveNav('/product/list')">
+                            <el-icon>
+                                <ShoppingTrolley/>
+                            </el-icon>
+                            <span>产品管理</span>
+                        </el-menu-item>
+                        <el-menu-item index="/contents/list" @click="saveActiveNav('/contents/list')">
+                            <el-icon>
+                                <user/>
+                            </el-icon>
+                            <span>招募新闻管理</span>
+                        </el-menu-item>
+                        <el-menu-item index="/serves/list" @click="saveActiveNav('/serves/list')">
+                            <el-icon>
+                                <Discount/>
+                            </el-icon>
+                            <span>服务管理</span>
+                        </el-menu-item>
+                        <el-menu-item index="/data/list" @click="saveActiveNav('/data/list')">
+                            <el-icon>
+                                <Histogram/>
+                            </el-icon>
+                            <span>数据大屏展示</span>
+                        </el-menu-item>
+                        <el-menu-item index="/news/list" @click="saveActiveNav('/news/list')">
+                            <el-icon>
+                                <SetUp/>
+                            </el-icon>
+                            <span>新闻管理</span>
+                        </el-menu-item>
+                        <el-menu-item index="/contact/list" @click="saveActiveNav('/contact/list')">
+                            <el-icon>
+                                <user/>
+                            </el-icon>
+                            <span>联系方式管理</span>
+                        </el-menu-item>
                     </el-menu>
                 </el-aside>
                 <el-container>
@@ -104,9 +104,10 @@
     </div>
 </template>
 <script setup>
-import { onBeforeMount, ref } from 'vue';
+import {onBeforeMount, ref} from 'vue';
 import avatar from "../assets/img/avator.jpg"
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
+
 const router = useRouter();
 // 挂载 DOM 之前
 onBeforeMount(() => {

src/view/Login.vue

@@ -56,7 +56,6 @@ const onSubmit = () => {
     ruleFormRef.value.validate(async (valid) => {
         if (valid) {
             const res = await userApi.login(form);
-            console.log(res.data.Code);
             if (res.data) {
                 if (res.data.Code===200) {
                     // proxy.$commonJs.changeView('/home');

src/view/contact/add.vue

@@ -33,7 +33,6 @@
 import {onBeforeMount, reactive} from 'vue';
 import {useRoute, useRouter} from 'vue-router'
 import contents from "../../api/contents.js";
-import Editor from "../editor.vue";
 import {ElMessage} from "element-plus";
 
 const route = useRoute();

src/view/dataModel/add.vue

@@ -10,64 +10,55 @@
       </template>
       <el-form>
         <el-form-item label="标题:">
-          <el-input v-model="contentsDetail.title" placeholder="请输入标题"/>
+          <el-input v-model="data.title" placeholder="请输入标题" />
         </el-form-item>
         <el-form-item>
-          <el-switch v-model="contentsDetail.types" active-value="1" inactive-value="0" active-text="招聘"
-                     inactive-text="公告"/>
+          <el-select v-model="data.types" placeholder="请选择类型" size="large" style="width: 240px">
+            <el-option v-for="(item, index) in dataType" :key="index" :label="item" :value="item" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="简介:">
-          <el-input v-model="contentsDetail.synopsis" placeholder="请输入简介"/>
+        <el-form-item label="数量:">
+          <el-input-number v-model="data.nums" placeholder="请输入简介" />
         </el-form-item>
-        <el-form-item label="详情:">
-          {{ contentsDetail.synopsis }}
-          <editor v-model="contentsDetail.synopsis"></editor>
-        </el-form-item>
-
       </el-form>
     </el-card>
 
   </div>
 </template>
 <script setup>
-import {onBeforeMount, reactive} from 'vue';
-import {useRoute, useRouter} from 'vue-router'
-import contents from "../../api/contents.js";
-import Editor from "../editor.vue";
-import {ElMessage} from "element-plus";
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+import datas from "../../api/dataModel.js";
+import { ElMessage } from "element-plus";
 
 const route = useRoute();
 const router = useRouter();
-const contentsDetail = reactive({
+const data = reactive({
+  id: 0,
   title: '',
-  detail: '',
-  synopsis: '',
   types: '',
+  nums: '',
 })
+const dataType = reactive([])
 const addContent = async () => {
-  const res = await contents.addRecruit({
-    id: parseInt(route.query.id),
-    title: contentsDetail.title,
-    synopsis: contentsDetail.synopsis,
-    detail: contentsDetail.detail,
-    types: contentsDetail.types,
+  const res = await datas.addData({
+    id: 0,
+    title: data.title,
+    types: data.types,
+    nums: data.nums
   });
   if (res.data.Code === 200) {
     ElMessage.success("添加成功")
-    await getRecruitDetail()
+    data.types = ''
+    data.nums = ''
+    data.title = ''
   } else {
     ElMessage.error(res.data.Msg)
   }
 }
-const getRecruitDetail = async () => {
-  const res = await contents.getRecruitDetail({id: route.query.id})
-  Object.assign(contentsDetail, res.data.Data);
-}
 onBeforeMount(async () => {
-  if (route.query.id) {
-    const res = await contents.getRecruitDetail({id: route.query.id})
-    Object.assign(contentsDetail, res.data.Data);
-  }
+  const res = await datas.getDataType()
+  Object.assign(dataType, res.data.Data);
 })
 </script>
 

src/view/dataModel/data.vue

@@ -1,183 +1,140 @@
 <template>
-    <el-card class="box-card">
-        <template #header>
-            <div class="card-headers">
-                <span>数据展示</span>
-                <el-button size="mini" style="float:right" type="primary" @click="updateProduct">修改</el-button>
-            </div>
-        </template>
-        <el-form>
-            <div class="card-header" style="width: 500px;">
-                <span>覆盖区域:</span>
-                <el-form-item label="省区:">
-                    <el-input-number v-model="tableData.provinces" />
-                </el-form-item>
-                <el-form-item label="地州:">
-                    <el-input-number v-model="tableData.prefecture" />
-                </el-form-item>
-                <el-form-item label="县份:">
-                    <el-input-number v-model="tableData.counties"></el-input-number>
-                </el-form-item>
-            </div>
-            <div class="card-header" style="width: 500px;">
-                <span>覆盖领域:</span>
-                <el-form-item label="医院:">
-                    <el-input-number v-model="tableData.hospital"></el-input-number>
-                </el-form-item>
-                <el-form-item label="疾控中心:">
-                    <el-input-number v-model="tableData.cdc"></el-input-number>
-                </el-form-item>
-                <el-form-item label="疾控注射点:">
-                    <el-input-number v-model="tableData.cdc_injection_sites"></el-input-number>
-                </el-form-item>
-                <el-form-item label="医药公司:">
-                    <el-input-number v-model="tableData.pharmaceutical_companies"></el-input-number>
-                </el-form-item>
-                <el-form-item label="器械公司:">
-                    <el-input-number v-model="tableData.device_companies"></el-input-number>
-                </el-form-item>
-                <el-form-item label="连锁药店:">
-                    <el-input-number v-model="tableData.chain_pharmacies"></el-input-number>
-                </el-form-item>
-                <el-form-item label="门店数量:">
-                    <el-input-number v-model="tableData.number_of_stores"></el-input-number>
-                </el-form-item>
-                <el-form-item label="冷链物流公司:">
-                    <el-input-number v-model="tableData.cold_chain_logistics_company"></el-input-number>
-                </el-form-item>
-                <el-form-item label="药厂:">
-                    <el-input-number v-model="tableData.pharmaceutical"></el-input-number>
-                </el-form-item>
-            </div>
-            <div class="card-header" style="width: 500px;">
-                <span>监测对象:</span>
-                <el-form-item label="冷藏车:">
-                    <el-input-number v-model="tableData.refrigerated_trucks"></el-input-number>
-                </el-form-item>
-                <el-form-item label="冷链物流公司:">
-                    <el-input-number v-model="tableData.cold_chain_logistics_company"></el-input-number>
-                </el-form-item>
-                <el-form-item label="保温箱:">
-                    <el-input-number v-model="tableData.incubator"></el-input-number>
-                </el-form-item><el-form-item label="冷冻柜:">
-                    <el-input-number v-model="tableData.freezer"></el-input-number>
-                </el-form-item>
-                <el-form-item label="冷藏柜:">
-                    <el-input-number v-model="tableData.refrigerated_cabinets"></el-input-number>
-                </el-form-item>
-                <el-form-item label="阴凉柜:">
-                    <el-input-number v-model="tableData.shaded_cabinet"></el-input-number>
-                </el-form-item>
-                <el-form-item label="冷藏柜:">
-                    <el-input-number v-model="tableData.refrigerated_cabinets"></el-input-number>
-                </el-form-item>
-                <el-form-item label="冷库:">
-                    <el-input-number v-model="tableData.cold_storage"></el-input-number>
-                </el-form-item>
-                <el-form-item label="阴凉库:">
-                    <el-input-number v-model="tableData.shaded_storage"></el-input-number>
-                </el-form-item>
-                <el-form-item label="空  调:">
-                    <el-input-number v-model="tableData.airpacing"></el-input-number>
-                </el-form-item>
-                <el-form-item label="除湿机:">
-                    <el-input-number v-model="tableData.dehumidifiers"></el-input-number>
-                </el-form-item>
-            </div>
-            <div class="card-header" style="width: 500px;">
-                <span>管理效率:</span>
-                <el-form-item label="3D可视化平台:">
-                    <el-input-number v-model="tableData.dvisualization_platform"/>
-                </el-form-item>
-                <el-form-item label="大数据管理平台:">
-                    <el-input-number v-model="tableData.big_data_management_platform"></el-input-number>
-                </el-form-item>
-                <el-form-item label="冷链系列培训:">
-                    <el-input-number v-model="tableData.cold_chain_training" />
-                </el-form-item>
-                <el-form-item label="保温箱安全平台:">
-                    <el-input-number v-model="tableData.incubator_safety_platform"></el-input-number>
-                </el-form-item>
-                <el-form-item label="冷藏车安全平台:">
-                    <el-input-number v-model="tableData.safety_platform_for_refrigerated_trucks"></el-input-number>
-                </el-form-item>
-                <el-form-item label="售后预警服务:">
-                    <el-input-number v-model="tableData.after_sales_early_warning_service"></el-input-number>
-                </el-form-item>
-            </div>
-            <div class="card-header" style="width: 500px;">
-                <span>冷链验证:</span>
-                <el-form-item label="验证方案数量:">
-                    <el-input-number v-model="tableData.number_of_validation_scenarios"></el-input-number>
-                </el-form-item>
-                <el-form-item label="验证报告数量:">
-                    <el-input-number v-model="tableData.number_of_validation_reports"></el-input-number>
-                </el-form-item>
-            </div>
-            <div class="card-header" style=" width: 500px;">
-                <span>探头校准:</span>
-                <el-form-item label="探头数量:">
-                    <el-input-number v-model="tableData.number_of_probes"></el-input-number>
-                </el-form-item>
-            </div>
-        </el-form>
+  <div>
+    <el-card>
+      <el-button type="primary"
+                 @click="() => router.push({ path: '/data/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="title" label="标题" width="180">
+          <template #default="scope">
+            <el-input v-model="scope.row.title"   @change="UpData(scope.row.ID,'title',scope.row.title)" size="mini" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="types" label="类型" width="280">
+          <template #default="scope">
+            <el-select v-model="scope.row.types" @change="UpData(scope.row.ID,'types',scope.row.types)"  placeholder="请选择类型" size="large"  style="width: 240px">
+            <el-option v-for="(item, index) in dataType" :key="index" :label="item" :value="item" />
+          </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="nums" label="数量" width="180">
+          <template #default="scope">
+            <el-input-number v-model="scope.row.nums" @change="UpData(scope.row.ID,'nums',scope.row.nums)" 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 } from 'vue';
+import {onMounted, reactive, ref} from "vue";
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {useRouter} from 'vue-router'
 import dataModel from "../../api/dataModel.js";
-import { ElMessage } from "element-plus";
+const dataType = reactive([])
 
-const tableData = reactive({
-    provinces: 0,
-    prefecture: 0,
-    counties: 0,
-    hospital: 0,
-    cdc: 0,
-    cdc_injection_sites: 0,
-    pharmaceutical_companies: 0,
-    device_companies: 0,
-    chain_pharmacies: 0,
-    number_of_stores: 0,
-    cold_chain_logistics_company: 0,
-    pharmaceutical: 0,
-    refrigerated_trucks: 0,
-    incubator: 0,
-    freezer: 0,
-    refrigerated_cabinets: 0,
-    shaded_cabinet: 0,
-    cold_storage: 0,
-    shaded_storage: 0,
-    airpacing: 0,
-    dehumidifiers: 0,
-    dvisualization_platform: 0,
-    big_data_management_platform: 0,
-    cold_chain_training: 0,
-    incubator_safety_platform: 0,
-    safety_platform_for_refrigerated_trucks: 0,
-    after_sales_early_warning_service: 0,
-    number_of_validation_scenarios: 0,
-    number_of_validation_reports: 0,
-    number_of_probes: 0
+const router = useRouter();
+// Dom 挂载之后
+onMounted(() => {
+  getDataAll();
+  getDataType();
 })
-const getDataModel = async () => {
-    const res = await dataModel.getAllData()
-    Object.assign(tableData, res.data.Data);
-    console.log(res.data.Data)
+// 资源数据
+const typeMapping = {
+  recruit: '招募',
+  about: '关于我们',
+}
+const showUpload = ref(false);
+const showUploadDialog = ref(false);
+let tableData = ref([]);
+let total = ref(0);
+const toggleUpload = () => {
+  showUpload.value = !showUpload.value;
+};
+// 搜索条件
+const searchForm = reactive({
+  page: 1,
+  size: 10,
+  desc: 'created_at desc'
+})
+const data = reactive({
+  id: '',
+  title: '',
+  types: '',
+  nums: '',
+})
+const UpData = async (id,field,value) => {
+  const res = await dataModel.updateData({
+    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 dataModel.getAllData(searchForm);
+  tableData.value = res.data.Data.Data;
+  total.value = res.data.Data.Size;
+}
+const getDataType = async () => {
+  const res = await dataModel.getDataType();
+  Object.assign(dataType, res.data.Data);
+}
+const handleCurrentChange = (current) => {
+  searchForm.page = current;
+  getDataAll();
 }
-const updateProduct = async () => {
-    const res = await dataModel.updateData(tableData)
+const searchUser = () => {
+  searchForm.current = 1;
+  getDataAll();
+}
+// 删除资源信息
+const deleteData = (id) => {
+  ElMessageBox.confirm(
+      '确定要删除该资源信息吗?',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    const res = await dataModel.deleteData({id: id});
     if (res.data.Code === 200) {
-        ElMessage.success("修改成功")
+      ElMessage.success("删除成功")
+      await getDataAll();
     } else {
-        ElMessage.error(res.data.Msg)
+      ElMessage.error(res.data.Msg)
     }
-    console.log(res.data.Data)
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消删除',
+    })
+  })
 }
-onMounted(() => {
-    getDataModel();
-})
 </script>
-<style scoped>
 
-</style>
+<style lang="scss" scoped></style>

src/view/product/Detail.vue

@@ -1,49 +1,62 @@
 <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="图片:">
-          <img :src="productDetail.url" style="width: 100px;height: 100px;">
-        </el-form-item>
-        <el-form-item label="简介:">
-          <el-input v-model="productDetail.synopsis"></el-input>
-        </el-form-item>
-        <el-form-item label="详情:">
-          <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="支持软件:">
-          <editor v-if="productDetail.supporting_software" :initial-value="productDetail.supporting_software"></editor>
-        </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="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="图片:">
+                    <img :src="productDetail.url" style="width: 100px;height: 100px;">
+                </el-form-item>
+                <el-form-item label="简介:">
+                    <el-input v-model="productDetail.synopsis"></el-input>
+                </el-form-item>
+                <el-form-item label="详情:">
+                    <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} from 'vue';
+import {onBeforeMount, reactive, ref} from 'vue';
 import {useRoute, useRouter} from 'vue-router'
 import product from "../../api/product.js";
 import {ElMessage} from "element-plus";
@@ -52,46 +65,64 @@ import EditorWithBinding from "../EditorWithBinding.vue";
 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: '',
+    synopsis: '',
+    detail: '',
+    url: '',
+    product_introduction: '',
+    technical_parameters: '',
+    instructions: '',
+    supporting_software: '',
+    optional_accessories: '',
 })
+//定义一个响应式数组用来接收图片
+const fileList = ref([])
+
+//自定义函数用来覆盖原有的XHR行为（默认提交行为）
+function httpRequest(option) {
+//将图片存到数组中
+    fileList.value.push(option)
+}
+
 const handleContentChange = (htmlContent) => {
-  productDetail.detail = htmlContent
-  // 在这里可以使用接收到的内容进行进一步处理或者存储等操作
+    productDetail.detail = htmlContent
+    // 在这里可以使用接收到的内容进行进一步处理或者存储等操作
 };
 const updateProduct = async () => {
-  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)
-  }
+    let dataForm = new FormData();
+    dataForm.append('types', "files")
+    //将图片的二进制通过表单的形式发送到后台
+    fileList.value.forEach((it, index) => {
+        dataForm.append('file', it.file)
+    })
+    const files = await product.uploadFile(dataForm)
+    productDetail.supporting_software = files.data.Data
+    console.log(files, "============")
+    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)
+    }
 }
 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})
+        console.log(res.data)
+        Object.assign(productDetail, res.data.Data);
+    }
 })
 </script>
 

src/view/product/add.vue

@@ -1,155 +1,185 @@
 <template>
-  <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="addProduct">添加</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-upload :http-request="httpRequest" multiple :show-file-list="true" list-type="picture-card">
-            <el-icon>
-              <Plus />
-            </el-icon>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="类型:">
-          <el-select v-model="productDetail.type" @change="handleTypeChange" 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 label="硬件" value="hardware" />
-            <el-option label="软件" value="software" />
-          </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-input v-model="productDetail.synopsis"></el-input>
-        </el-form-item>
-        <el-form-item label="详情:">
-          <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="支持软件:">
-          <EditorWithBinding v-model="productDetail.supporting_software"></EditorWithBinding>
-        </el-form-item>
-        <el-form-item label="可选配件:">
-          <EditorWithBinding v-model="productDetail.optional_accessories"></EditorWithBinding>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </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="addProduct">添加</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-upload :http-request="httpRequest" multiple :show-file-list="true" list-type="picture-card">
+                        <el-icon>
+                            <Plus/>
+                        </el-icon>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item label="类型:">
+                    <el-select v-model="productDetail.type" @change="handleTypeChange" 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 label="硬件" value="hardware"/>
+                        <el-option label="软件" value="software"/>
+                    </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-input v-model="productDetail.synopsis"></el-input>
+                </el-form-item>
+                <el-form-item label="详情:">
+                    <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="httpRequests"
+                        class="upload-demo"
+                        drag
+                        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 { Plus } from "@element-plus/icons-vue";
+import {Plus} from "@element-plus/icons-vue";
 import resource from "../../api/resource.js";
 
 const route = useRoute();
 const router = useRouter();
 const productDetail = reactive({
-  title: '',
-  synopsis: '',
-  detail: '',
-  ptype: '',
-  type: '',
-  url: '',
-  isIndex: '',
-  product_introduction: '',
-  technical_parameters: '',
-  instructions: '',
-  supporting_software: '',
-  optional_accessories: '',
+    title: '',
+    synopsis: '',
+    detail: '',
+    ptype: '',
+    type: '',
+    url: '',
+    isIndex: '',
+    product_introduction: '',
+    technical_parameters: '',
+    instructions: '',
+    supporting_software: '',
+    optional_accessories: '',
 })
 const handleTypeChange = (value) => {
-  if (value === 'serve') {
-    productDetail.ptype = '';
-  }
+    if (value === 'serve') {
+        productDetail.ptype = '';
+    }
 }
 const fileList = ref([])
 
 function httpRequest(option) {
-  //将图片存到数组中
-  fileList.value.push(option)
+    //将图片存到数组中
+    fileList.value.push(option)
+}
+
+//定义一个响应式数组用来接收图片
+const fileLists = ref([])
+
+//自定义函数用来覆盖原有的XHR行为（默认提交行为）
+function httpRequests(option) {
+//将图片存到数组中
+    fileLists.value.push(option)
 }
 
 const addProduct = async () => {
-  let dataForm = new FormData();
-  dataForm.append('types', "serve")
-  //将图片的二进制通过表单的形式发送到后台
-  fileList.value.forEach((it, index) => {
-    dataForm.append('file', it.file)
-  })
-  const fileRes = await resource.uploadResource(dataForm)
-  productDetail.url = fileRes.data.Data
-  const res = await product.addProduct({
-    title: productDetail.title,
-    synopsis: productDetail.synopsis,
-    detail: productDetail.detail,
-    url: productDetail.url,
-    ptype: productDetail.ptype,
-    type: productDetail.type,
-    isIndex: Boolean(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("添加成功")
-    Object.assign(productDetail, {
-      title: '',
-      synopsis: '',
-      detail: '',
-      ptype: '',
-      type: '',
-      url: '',
-      isIndex: '',
-      product_introduction: '',
-      technical_parameters: '',
-      instructions: '',
-      supporting_software: '',
-      optional_accessories: '',
+    let dataForm = new FormData();
+    dataForm.append('types', "serve")
+    //将图片的二进制通过表单的形式发送到后台
+    fileList.value.forEach((it, index) => {
+        dataForm.append('file', it.file)
+    })
+    let dataForms = new FormData();
+    dataForms.append('types', "file")
+    //将图片的二进制通过表单的形式发送到后台
+    fileLists.value.forEach((it, index) => {
+        dataForms.append('file', it.file)
+    })
+    const fileRes = await product.uploadFile(dataForms)
+    productDetail.supporting_software = fileRes.data.Data
+    const resoursRes = await resource.uploadResource(dataForm)
+    productDetail.url = resoursRes.data.Data
+    const res = await product.addProduct({
+        title: productDetail.title,
+        synopsis: productDetail.synopsis,
+        detail: productDetail.detail,
+        url: productDetail.url,
+        ptype: productDetail.ptype,
+        type: productDetail.type,
+        isIndex: Boolean(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,
     });
-  } else {
-    ElMessage.error(res.data.Msg)
-  }
+    if (res.data.Code === 200) {
+        ElMessage.success("添加成功")
+        Object.assign(productDetail, {
+            title: '',
+            synopsis: '',
+            detail: '',
+            ptype: '',
+            type: '',
+            url: '',
+            isIndex: '',
+            product_introduction: '',
+            technical_parameters: '',
+            instructions: '',
+            supporting_software: '',
+            optional_accessories: '',
+        });
+    } 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})
+        console.log(res.data)
+        Object.assign(productDetail, res.data.Data);
+    }
 })
 </script>
 

src/view/product/product.vue

@@ -1,63 +1,64 @@
 <template>
-  <div>
-    <el-card>
-      <el-button type="primary"
-                 @click="() => router.push({ path: '/product/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 label="图片" width="120">
-          <template #default="scope">
-            <img :src="imageUrlWithPrefix(scope.row.url)" alt="图片" style="max-width: 100%; height: auto;">
-          </template>
-        </el-table-column>
-        <el-table-column prop="title" label="名称" width="180">
-          <template #default="scope">
-            {{ scope.row.title }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="title" label="是否首页显示" width="180">
-          <template #default="scope">
-            <el-switch
-                v-model="scope.row.isIndex"
-                size="large"
-                active-text="显示"
-                inactive-text="不显示"
-                @change="handleSwitchChange(scope.row)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column prop="ptype" label="产品类型" width="180">
-          <template #default="scope">
-            {{ ptypeMapping[scope.row.ptype] || '服务' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="type" label="类型" width="180">
-          <template #default="scope">
-            {{ typeMapping[scope.row.type] || '其他' }}
-          </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>
-            <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
+    <div>
+        <el-card>
+            <el-button type="primary"
+                       @click="() => router.push({ path: '/product/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 label="图片" width="120">
+                    <template #default="scope">
+                        <img :src="imageUrlWithPrefix(scope.row.url)" alt="图片" style="max-width: 100%; height: auto;">
+                    </template>
+                </el-table-column>
+                <el-table-column prop="title" label="名称" width="180">
+                    <template #default="scope">
+                        {{ scope.row.title }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="title" label="是否首页显示" width="180">
+                    <template #default="scope">
+                        <el-switch
+                            v-model="scope.row.isIndex"
+                            size="large"
+                            active-text="显示"
+                            inactive-text="不显示"
+                            @change="handleSwitchChange(scope.row)"
+                        />
+                    </template>
+                </el-table-column>
+                <el-table-column prop="ptype" label="产品类型" width="180">
+                    <template #default="scope">
+                        {{ ptypeMapping[scope.row.ptype] || '服务' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="type" label="类型" width="180">
+                    <template #default="scope">
+                        {{ typeMapping[scope.row.type] || '其他' }}
+                    </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>
+                        <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
                         <el-button size="small"
-                                   @click="() => router.push({ path: '/product/detail', query: { id: scope.row.ID } })">详情
+                                   @click="() => router.push({ path: '/product/detail', query: { id: 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>
+                </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>
@@ -70,116 +71,116 @@ import product from "../../api/product.js";
 const router = useRouter();
 // Dom 挂载之后
 onMounted(() => {
-  getProductAll();
+    getProductAll();
 })
 // 资源数据
 const ptypeMapping = {
-  hardware: '硬件',
-  software: '软件',
-  example: '合作案列',
-  4: ''
+    hardware: '硬件',
+    software: '软件',
+    example: '合作案列',
+    4: ''
 }
 const typeMapping = {
-  serve: '服务',
-  product: '产品',
-  example: '合作案列',
-  4: ''
+    serve: '服务',
+    product: '产品',
+    example: '合作案列',
+    4: ''
 }
 const productDetail = reactive({
-  ID: '',
-  type: '',
-  isIndex:'',
-  ptype: '',
-  title: '',
-  parentId:'',
-  synopsis: '',
-  detail: '',
-  url: '',
-  product_introduction: '',
-  technical_parameters: '',
-  instructions: '',
-  supporting_software: '',
-  optional_accessories: '',
-  is_active: '',
+    ID: '',
+    type: '',
+    isIndex: '',
+    ptype: '',
+    title: '',
+    parentId: '',
+    synopsis: '',
+    detail: '',
+    url: '',
+    product_introduction: '',
+    technical_parameters: '',
+    instructions: '',
+    supporting_software: '',
+    optional_accessories: '',
+    is_active: '',
 })
 const showUpload = ref(false);
 const showUploadDialog = ref(false);
 let tableData = ref([]);
 let total = ref(0);
 const toggleUpload = () => {
-  showUpload.value = !showUpload.value;
+    showUpload.value = !showUpload.value;
 };
 // 搜索条件
 const searchForm = reactive({
-  page: 1,
-  size: 5,
-  desc: 'created_at desc'
+    page: 1,
+    size: 5,
+    desc: 'created_at desc'
 })
 // 获取资源列表
 const getProductAll = async () => {
-  const res = await product.getProductList(searchForm);
-  tableData.value = res.data.Data.Data;
-  total.value = res.data.Data.Size;
+    const res = await product.getProductList(searchForm);
+    tableData.value = res.data.Data.Data;
+    total.value = res.data.Data.Size;
 }
 const handleSwitchChange = async (row) => {
-  try {
-    // 这里根据实际情况调用你的修改方法，例如 updateProduct
-    await updateProduct(row.ID, row.isIndex);
-    await getProductAll();
-  } catch (error) {
-    ElMessage.error('更新状态时出错');
-  }
+    try {
+        // 这里根据实际情况调用你的修改方法，例如 updateProduct
+        await updateProduct(row.ID, row.isIndex);
+        await getProductAll();
+    } catch (error) {
+        ElMessage.error('更新状态时出错');
+    }
 }
-const updateProduct = async (id,isIndex) => {
-  const res = await product.updateProduct({id: id, isIndex: isIndex});
-  if (res.data.Code === 200) {
-    ElMessage.success("修改成功")
-    await getProductAll();
-  } else {
-    ElMessage.error(res.data.Msg)
-  }
+const updateProduct = async (id, isIndex) => {
+    const res = await product.updateProduct({id: id, isIndex: isIndex});
+    if (res.data.Code === 200) {
+        ElMessage.success("修改成功")
+        await getProductAll();
+    } else {
+        ElMessage.error(res.data.Msg)
+    }
 }
 
 function imageUrlWithPrefix(url) {
-  const prefix = 'http://localhost:8080'; // 这里替换为你的图片服务器基础路径
-  return prefix + url;
+    const prefix = 'http://localhost:8080'; // 这里替换为你的图片服务器基础路径
+    return prefix + url;
 }
 
 const handleSizeChange = (size) => {
-  searchForm.size = size;
-  getProductList();
+    searchForm.size = size;
+    getProductList();
 }
 const handleCurrentChange = (current) => {
-  searchForm.page = current;
-  getProductAll();
+    searchForm.page = current;
+    getProductAll();
 }
 const searchUser = () => {
-  searchForm.current = 1;
-  getProductAll();
+    searchForm.current = 1;
+    getProductAll();
 }
 // 删除资源信息
 const deleteProduct = (id) => {
-  ElMessageBox.confirm(
-      '确定要删除该资源信息吗?',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(async () => {
-    const res = await product.deleteProduct({id: id});
-    if (res.data.code === 200) {
-      ElMessage.success("删除成功")
-      await getProductAll();
-    } else {
-      ElMessage.error(res.data.Msg)
-    }
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '取消删除',
+    ElMessageBox.confirm(
+        '确定要删除该资源信息吗?',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    ).then(async () => {
+        const res = await product.deleteProduct({id: id});
+        if (res.data.code === 200) {
+            ElMessage.success("删除成功")
+            await getProductAll();
+        } else {
+            ElMessage.error(res.data.Msg)
+        }
+    }).catch(() => {
+        ElMessage({
+            type: 'info',
+            message: '取消删除',
+        })
     })
-  })
 }
 </script>
 

src/view/resource/upload.vue

@@ -1,33 +1,33 @@
 <template>
-  <div v-if="isUploading">
-    <h3>图片上传</h3>
-    <el-form :model="formData">
-      <el-form-item label="图片类型:" label-width="100">
-        <el-select v-model="formData.types" placeholder="请选择图片类型" style="width: 20vw">
-          <el-option label="轮播图" value="banner"/>
-          <el-option label="荣耀资质" value="honor"/>
-          <el-option label="合作案例" value="example"/>
-          <el-option label="服务" value="serve"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="图片" label-width="100">
-        <el-upload
-            :http-request="httpRequest"
-            multiple
-            :show-file-list="true"
-            list-type="picture-card"
-        >
-          <el-icon>
-            <Plus/>
-          </el-icon>
-        </el-upload>
-      </el-form-item>
-      <div>
-        <el-button>取消</el-button>
-        <el-button type="primary" @click="onBtn">添加</el-button>
-      </div>
-    </el-form>
-  </div>
+    <div v-if="isUploading">
+        <h3>图片上传</h3>
+        <el-form :model="formData">
+            <el-form-item label="图片类型:" label-width="100">
+                <el-select v-model="formData.types" placeholder="请选择图片类型" style="width: 20vw">
+                    <el-option label="轮播图" value="banner"/>
+                    <el-option label="荣耀资质" value="honor"/>
+                    <el-option label="合作案例" value="example"/>
+                    <el-option label="服务" value="serve"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="图片" label-width="100">
+                <el-upload
+                    :http-request="httpRequest"
+                    multiple
+                    :show-file-list="true"
+                    list-type="picture-card"
+                >
+                    <el-icon>
+                        <Plus/>
+                    </el-icon>
+                </el-upload>
+            </el-form-item>
+            <div>
+                <el-button>取消</el-button>
+                <el-button type="primary" @click="onBtn">添加</el-button>
+            </div>
+        </el-form>
+    </div>
 </template>
 
 <script setup>
@@ -37,7 +37,7 @@ import resource from "../../api/resource.js";
 import {ElMessage} from "element-plus";
 
 const formData = reactive({
-  types: '',
+    types: '',
 });
 
 //定义一个响应式数组用来接收图片
@@ -46,24 +46,26 @@ const fileList = ref([])
 //自定义函数用来覆盖原有的XHR行为（默认提交行为）
 function httpRequest(option) {
 //将图片存到数组中
-  fileList.value.push(option)
+    fileList.value.push(option)
 }
+
 const isUploading = ref(true);
+
 async function onBtn() {
-  let dataForm = new FormData();
-  dataForm.append('types', formData.types)
+    let dataForm = new FormData();
+    dataForm.append('types', formData.types)
 
 //将图片的二进制通过表单的形式发送到后台
-  fileList.value.forEach((it, index) => {
-    dataForm.append('file', it.file)
-  })
-  const res = await resource.uploadResource(dataForm)
-  if (res.data.Code === 200) {
-    ElMessage.success("上传成功")
-    dataForm.set('file', '')
-  } else {
-    ElMessage.error(res.data.Msg)
-  }
+    fileList.value.forEach((it, index) => {
+        dataForm.append('file', it.file)
+    })
+    const res = await resource.uploadResource(dataForm)
+    if (res.data.Code === 200) {
+        ElMessage.success("上传成功")
+        dataForm.set('file', '')
+    } else {
+        ElMessage.error(res.data.Msg)
+    }
 //设置请求参数的规则
 }
 </script>

src/view/serve/Detail.vue

@@ -1,58 +1,58 @@
 <template>
-  <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="updateServe">修改</el-button>
-        </div>
-      </template>
-      <el-form>
-        <el-form-item label="标题:">
-          <el-input v-model="serveDetail.title" placeholder="请输入标题"/>
-        </el-form-item>
-        <el-form-item label="简介:">
-          <el-input v-model="serveDetail.synopsis" placeholder="请输入简介"/>
-        </el-form-item>
-        <el-form-item label="图片:">
-          <el-image
-              v-model="serveDetail.image"
-              style="width: 100px; height: 100px; margin-right: 10px"
-              fit="cover"></el-image>
-          <el-upload
-              :http-request="httpRequest"
-              multiple
-              :show-file-list="true"
-              list-type="picture-card"
-          >
-            <el-icon>
-              <Plus/>
-            </el-icon>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="分类:">
-          <el-select
-              @click="getServeType"
-              v-model="serveDetail.product_id"
-              clearable
-              placeholder="选择分类信息"
-              style="width: 240px"
-          >
-            <el-option
-                v-for="item in ServeType.value"
-                :key="item.ID"
-                :label="item.title"
-                :value="item.ID"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="详情:">
-          <EditorWithBinding v-model="serveDetail.detail"/>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </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="updateServe">修改</el-button>
+                </div>
+            </template>
+            <el-form>
+                <el-form-item label="标题:">
+                    <el-input v-model="serveDetail.title" placeholder="请输入标题"/>
+                </el-form-item>
+                <el-form-item label="简介:">
+                    <el-input v-model="serveDetail.synopsis" placeholder="请输入简介"/>
+                </el-form-item>
+                <el-form-item label="图片:">
+                    <el-image
+                        v-model="serveDetail.image"
+                        style="width: 100px; height: 100px; margin-right: 10px"
+                        fit="cover"></el-image>
+                    <el-upload
+                        :http-request="httpRequest"
+                        multiple
+                        :show-file-list="true"
+                        list-type="picture-card"
+                    >
+                        <el-icon>
+                            <Plus/>
+                        </el-icon>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item label="分类:">
+                    <el-select
+                        @click="getServeType"
+                        v-model="serveDetail.product_id"
+                        clearable
+                        placeholder="选择分类信息"
+                        style="width: 240px"
+                    >
+                        <el-option
+                            v-for="item in ServeType.value"
+                            :key="item.ID"
+                            :label="item.title"
+                            :value="item.ID"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="详情:">
+                    <EditorWithBinding v-model="serveDetail.detail"/>
+                </el-form-item>
+            </el-form>
+        </el-card>
+    </div>
 </template>
 
 <script setup>
@@ -70,59 +70,61 @@ const ServeType = reactive([{}])
 const route = useRoute();
 const router = useRouter();
 const serveDetail = reactive({
-  title: '',
-  detail: '',
-  synopsis: '',
-  types: '',
-  image: '',
-  product_id: ''
+    title: '',
+    detail: '',
+    synopsis: '',
+    types: '',
+    image: '',
+    product_id: ''
 })
 const getServeType = async () => {
-  const res = await serve.GetServiceType();
-  ServeType.value = res.data.Data;
-  console.log(ServeType.value)
+    const res = await serve.GetServiceType();
+    ServeType.value = res.data.Data;
+    console.log(ServeType.value)
 }
+
 function httpRequest(option) {
 //将图片存到数组中
-  fileList.value.push(option)
+    fileList.value.push(option)
 }
+
 const updateServe = async () => {
-  let dataForm = new FormData();
-  dataForm.append('types', "serve")
-  //将图片的二进制通过表单的形式发送到后台
-  fileList.value.forEach((it, index) => {
-    dataForm.append('file', it.file)
-  })
-  const fileRes = await resource.uploadResource(dataForm)
-  serveDetail.image = fileRes.data.Data
-  const res = await serve.updateService({
-    id: parseInt(route.query.id),
-    title: serveDetail.title,
-    synopsis: serveDetail.synopsis,
-    detail: serveDetail.detail,
-    types: serveDetail.types,
-    product_id: serveDetail.product_id,
-    image: serveDetail.image,
-  })
-  if (res.data.Code === 200) {
-    ElMessage.success("修改成功")
-    await getServiceDetail()
-  } else {
-    ElMessage.error(res.data.Msg)
-  }
+    let dataForm = new FormData();
+    dataForm.append('types', "serve")
+    //将图片的二进制通过表单的形式发送到后台
+    fileList.value.forEach((it, index) => {
+        dataForm.append('file', it.file)
+    })
+    const fileRes = await resource.uploadResource(dataForm)
+    serveDetail.image = fileRes.data.Data
+    const res = await serve.updateService({
+        id: parseInt(route.query.id),
+        title: serveDetail.title,
+        synopsis: serveDetail.synopsis,
+        detail: serveDetail.detail,
+        types: serveDetail.types,
+        product_id: serveDetail.product_id,
+        image: serveDetail.image,
+    })
+    if (res.data.Code === 200) {
+        ElMessage.success("修改成功")
+        await getServiceDetail()
+    } else {
+        ElMessage.error(res.data.Msg)
+    }
 }
 const getServiceDetail = async () => {
-  const res = await serve.getServiceDetail({id: route.query.id})
-  Object.assign(serveDetail, res.data.Data);
-}
-onBeforeMount(async () => {
-  if (route.query.id) {
     const res = await serve.getServiceDetail({id: route.query.id})
     Object.assign(serveDetail, res.data.Data);
-  }
+}
+onBeforeMount(async () => {
+    if (route.query.id) {
+        const res = await serve.getServiceDetail({id: route.query.id})
+        Object.assign(serveDetail, res.data.Data);
+    }
 })
 onMounted(async () => {
-  await getServeType()
+    await getServeType()
 })
 </script>