更改后台上传图片资源为弹窗形式出现

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/product/Detail.vue

@@ -13,9 +13,28 @@
                 <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" @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-image v-model="productDetail.url" style="width: 100px; height: 100px; margin-right: 10px"
-                        fit="cover"></el-image>
+                    <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 />
@@ -26,7 +45,7 @@
                     <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"
+                    <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">
@@ -77,6 +96,9 @@ const router = useRouter();
 const productDetail = reactive({
     id: '',
     title: '',
+    type:'',
+    ptype:'',
+    isIndex:'',
     synopsis: '',
     detail: '',
     url: '',

src/view/resource/Index.vue

@@ -3,10 +3,14 @@
     <el-card>
       <!-- 添加el-button触发弹窗 -->
       <!-- 添加一个按钮来控制显示Upload组件 -->
-      <el-button type="primary" @click="toggleUpload">上传图片</el-button>
+      <!-- 添加el-button触发弹窗 -->
+      <el-button type="primary" @click="showUploadDialog = true">上传图片</el-button>
 
-      <!-- 使用v-if根据showUpload的值来决定是否渲染Upload组件 -->
-      <upload v-if="showUpload"></upload>
+      <!-- 使用el-dialog组件 -->
+      <el-dialog v-model="showUploadDialog" title="上传图片">
+        <!-- 在这里插入你的upload组件 -->
+        <upload @close="showUploadDialog = false" />
+      </el-dialog>
       <!-- 添加el-dialog组件 -->
       <el-table :data="tableData" border style="width: 100%;margin-top:20px">
         <el-table-column label="序号" width="60">
@@ -28,26 +32,25 @@
         <el-table-column label="操作" width="100">
           <template #default="scope">
             <el-button type="danger" size="small" @click="deleteResource(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: '/user/detail', query: { id: 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: '/user/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-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 { onMounted, reactive, ref } from "vue";
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useRouter } from 'vue-router'
 import resource from "../../api/resource";
 import Upload from "./upload.vue";
 
@@ -98,14 +101,14 @@ const searchUser = () => {
 // 删除资源信息
 const deleteResource = (id) => {
   ElMessageBox.confirm(
-      '确定要删除该资源信息吗?',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
+    '确定要删除该资源信息吗?',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
   ).then(async () => {
-    const res = await resource.deleteResource({id: id});
+    const res = await resource.deleteResource({ id: id });
     if (res.data.Code === 200) {
       ElMessage.success("删除成功")
       getResourceList();

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