一些简单的代码修改

src/views/product/CreateProduct.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import {useRouter} from "vue-router";
 import {ref, computed} from "vue";
+import {Back, UploadFilled} from "@element-plus/icons-vue";
 import {createProduct} from "../../api/product.ts";
 import {uploadImage} from "../../api/tools.ts";
-import {Back, UploadFilled} from "@element-plus/icons-vue";
 
 const router = useRouter();
+
 const storeId = router.currentRoute.value.params.storeId;
 const name = ref('')
 const category = ref()
@@ -17,7 +18,7 @@ const imageFileList = ref([])
 const hasNameInput = computed(() => name.value != '')
 const hasCategoryInput = computed(() => category.value != null)
 const hasPriceInput = computed(() => price.value != '')
-const hasImageFile =  computed(() => imageFileList.value.length != 0)
+const hasImageFile = computed(() => imageFileList.value.length != 0)
 
 const createProductDisabled = computed(() => {
   return !(hasNameInput.value && hasCategoryInput.value && hasPriceInput.value && hasImageFile.value);
@@ -53,10 +54,6 @@ function handleCreateProduct() {
   })
 }
 
-function toBackPage() {
-  router.push("/storeDetail/" + storeId)
-}
-
 function handleChange(file, fileList) {
   imageFileList.value = fileList
   let formData = new FormData();
@@ -68,77 +65,86 @@ function handleChange(file, fileList) {
 
 function uploadHttpRequest() {
 }
+
+function toBackPage() {
+  router.push("/storeDetail/" + storeId)
+}
 </script>
 
+
 <template>
-  <el-main class="main-frame">
-    <div>
-      <el-button @click="toBackPage()"
-                 type="primary" circle plain>
-        <el-icon><Back/></el-icon>
-      </el-button>
-
-      <h1>添加商品</h1>
-
-      <el-form label-position="left" label-width="90px" size="large" class="create-store-form">
-
-        <el-form-item label="商品名">
-          <el-input id="name" v-model="name"
-                    required
-                    placeholder="请输入商品名"/>
-        </el-form-item>
-
-        <el-form-item label="品类">
-          <el-select id="category" v-model="category" placeholder="请选择">
-            <el-option value="FOOD" label="食品" />
-            <el-option value="CLOTHES" label="服饰" />
-            <el-option value="FURNITURE" label="家具" />
-            <el-option value="ELECTRONICS" label="电子产品" />
-            <el-option value="ENTERTAINMENT" label="娱乐" />
-            <el-option value="SPORTS" label="体育产品" />
-            <el-option value="LUXURY" label="奢侈品" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="单价">
-          <el-input id="price" v-model="price"
-                    required
-                    placeholder="请输入商品单价，单位（元）"/>
-        </el-form-item>
-
-        <el-form-item label="商品照片">
-          <el-upload
-              v-model:file-list="imageFileList"
-              :on-change="handleChange"
-              :on-remove="handleChange"
-              class="upload-demo"
-              list-type="picture"
-              :http-request="uploadHttpRequest"
-              drag>
-            <el-icon class="el-icon--upload">
-              <upload-filled/>
-            </el-icon>
-            <div class="el-upload__text">
-              将文件拖到此处或单击此处上传。
-            </div>
-          </el-upload>
-
-        </el-form-item>
-
-        <el-form-item>
-          <el-button @click.prevent="handleCreateProduct()" :disabled="createProductDisabled"
-                     type="primary" plain>
-            创建商品
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+  <el-main>
+    <el-button @click="toBackPage()"
+               type="primary" circle plain>
+      <el-icon>
+        <Back/>
+      </el-icon>
+    </el-button>
+
+    <h1 class="create-product-title">新建商品</h1>
+
+    <el-form label-position="left" label-width="90px" size="large" class="create-product-form">
+
+      <el-form-item label="商品名">
+        <el-input id="name" v-model="name"
+                  required
+                  placeholder="请输入商品名"/>
+      </el-form-item>
+
+      <el-form-item label="品类">
+        <el-select id="category" v-model="category" placeholder="请选择">
+          <el-option value="FOOD" label="食品"/>
+          <el-option value="CLOTHES" label="服饰"/>
+          <el-option value="FURNITURE" label="家具"/>
+          <el-option value="ELECTRONICS" label="电子产品"/>
+          <el-option value="ENTERTAINMENT" label="娱乐"/>
+          <el-option value="SPORTS" label="体育产品"/>
+          <el-option value="LUXURY" label="奢侈品"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="单价">
+        <el-input id="price" v-model="price"
+                  required
+                  placeholder="请输入商品单价，单位（元）"/>
+      </el-form-item>
+
+      <el-form-item label="商品照片">
+        <el-upload
+            v-model:file-list="imageFileList"
+            :on-change="handleChange"
+            :on-remove="handleChange"
+            class="upload-demo"
+            list-type="picture"
+            :http-request="uploadHttpRequest"
+            drag>
+          <el-icon class="el-icon--upload">
+            <upload-filled/>
+          </el-icon>
+          <div class="el-upload__text">
+            将文件拖到此处或单击此处上传。
+          </div>
+        </el-upload>
+
+      </el-form-item>
+
+      <el-form-item>
+        <el-button @click.prevent="handleCreateProduct()" :disabled="createProductDisabled"
+                   type="primary" plain>
+          创建商品
+        </el-button>
+      </el-form-item>
+    </el-form>
   </el-main>
 </template>
 
 <style scoped>
-.create-store-form {
-  margin-left: 30px;
+.create-product-title {
+  margin-left: 25%;
+}
+
+.create-product-form {
+  margin-left: 25%;
   width: 50%;
 }
 </style>

src/views/store/AllStore.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-
-import StoreItem from "../../components/StoreItem.vue"
 import {ref} from "vue"
 import {getAllStore} from "../../api/store.ts"
 import {useRouter} from "vue-router"
@@ -8,15 +6,11 @@ import {useRouter} from "vue-router"
 const role = sessionStorage.getItem("role")
 const router = useRouter()
 
-let storeList = ref()
-
-getStoreList();
+const storeList = ref()
 
-function getStoreList() {
-  getAllStore().then(res => {
-    storeList.value = res.result;
-  })
-}
+getAllStore().then(res => {
+  storeList.value = res.result;
+})
 
 function toCreateStorePage() {
   router.push("/createStore");
@@ -25,9 +19,9 @@ function toCreateStorePage() {
 function toStoreDetailPage(storeId: Number) {
   router.push("/storeDetail/" + storeId);
 }
-
 </script>
 
+
 <template>
   <el-main>
     <div v-if="role === 'MANAGER' || role === 'CEO'">
@@ -40,14 +34,15 @@ function toStoreDetailPage(storeId: Number) {
     <div class="store-item-list">
       <StoreItem
           v-for="storeVO in storeList" :storeId="storeVO.id"
-          @click="toStoreDetailPage(storeVO.id)" />
+          @click="toStoreDetailPage(storeVO.id)"/>
     </div>
   </el-main>
-
 </template>
 
+
 <style scoped>
 .add-store-button {
+  margin-left: 30px;
 
 }
 

src/views/store/CreateStore.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
-import {createStore} from "../../api/store.ts"
-import {uploadImage} from "../../api/tools.ts"
 import {router} from '../../router'
 import {Back, UploadFilled} from "@element-plus/icons-vue";
+import {createStore} from "../../api/store.ts"
+import {uploadImage} from "../../api/tools.ts"
 
 // 输入框值
 const name = ref('')
@@ -47,11 +47,9 @@ function handleCreateStore() {
   });
 }
 
-function toBackPage() {
-  router.push("/allStore")
-}
-
 function handleChange(file, fileList) {
+  console.log(file)
+  console.log(fileList)
   imageFileList.value = fileList
   let formData = new FormData();
   formData.append('file', file.raw);
@@ -67,67 +65,75 @@ function handleExceed() {
 
 function uploadHttpRequest() {
 }
+
+function toBackPage() {
+  router.push("/allStore")
+}
 </script>
 
+
 <template>
-  <el-main class="main-frame">
-    <div>
-      <el-button @click="toBackPage()"
-                 type="primary" circle plain>
-        <el-icon><Back/></el-icon>
-      </el-button>
-
-      <h1>新建商店</h1>
-
-      <el-form label-position="left" label-width="90px" size="large" class="create-store-form">
-
-        <el-form-item label="商店名">
-          <el-input id="name" v-model="name"
-                    required
-                    placeholder="请输入商店名"/>
-        </el-form-item>
-
-        <el-form-item label="商店地址">
-          <el-input id="location" v-model="location"
-                    required
-                    placeholder="楼层-门牌号 如：3楼-305"/>
-        </el-form-item>
-
-        <el-form-item label="商店Logo">
-          <el-upload
-              v-model:file-list="imageFileList"
-              :limit="1"
-              :on-change="handleChange"
-              :on-exceed="handleExceed"
-              :on-remove="handleChange"
-              class="upload-demo"
-              list-type="picture"
-              :http-request="uploadHttpRequest"
-              drag>
-            <el-icon class="el-icon--upload">
-              <upload-filled/>
-            </el-icon>
-            <div class="el-upload__text">
-              将文件拖到此处或单击此处上传。
-            </div>
-          </el-upload>
-
-        </el-form-item>
-
-        <el-form-item>
-          <el-button @click.prevent="handleCreateStore()" :disabled="createDisabled"
-                     type="primary" plain>
-            创建商店
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+  <el-main>
+    <el-button @click="toBackPage()"
+               type="primary" circle plain>
+      <el-icon><Back/></el-icon>
+    </el-button>
+
+    <h1 class="create-store-title">新建商店</h1>
+
+    <el-form label-position="left" label-width="90px" size="large" class="create-store-form">
+
+      <el-form-item label="商店名">
+        <el-input id="name" v-model="name"
+                  required
+                  placeholder="请输入商店名"/>
+      </el-form-item>
+
+      <el-form-item label="商店地址">
+        <el-input id="location" v-model="location"
+                  required
+                  placeholder="楼层-门牌号 如：3楼-305"/>
+      </el-form-item>
+
+      <el-form-item label="商店Logo">
+        <el-upload
+            v-model:file-list="imageFileList"
+            :limit="1"
+            :on-change="handleChange"
+            :on-exceed="handleExceed"
+            :on-remove="handleChange"
+            class="upload-demo"
+            list-type="picture"
+            :http-request="uploadHttpRequest"
+            drag>
+          <el-icon class="el-icon--upload">
+            <upload-filled/>
+          </el-icon>
+          <div class="el-upload__text">
+            将文件拖到此处或单击此处上传。
+          </div>
+        </el-upload>
+
+      </el-form-item>
+
+      <el-form-item>
+        <el-button @click.prevent="handleCreateStore()" :disabled="createDisabled"
+                   type="primary" plain>
+          创建商店
+        </el-button>
+      </el-form-item>
+    </el-form>
   </el-main>
 </template>
 
+
 <style scoped>
+.create-store-title {
+  margin-left: 25%;
+}
+
 .create-store-form {
-  margin-left: 30px;
+  margin-left: 25%;
   width: 50%;
 }
 </style>

src/views/store/StoreDetail.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 
-import {getStoreById} from "../../api/store.ts";
-import {useRouter} from "vue-router";
-import {ref} from "vue";
-import {getProductsByStoreId} from "../../api/product.ts";
-import ProductItem from "../../components/ProductItem.vue";
-import {Back} from "@element-plus/icons-vue";
+import {getStoreById} from "../../api/store.ts"
+import {useRouter} from "vue-router"
+import {ref} from "vue"
+import {getProductsByStoreId} from "../../api/product.ts"
+import {Back} from "@element-plus/icons-vue"
 
 const router = useRouter();
 const role = sessionStorage.getItem("role")
-const storeId = router.currentRoute.value.params.storeId;
+const storeId = router.currentRoute.value.params.storeId
 const storeVO = ref()
 const name = ref('')
 const logoUrl = ref('')
@@ -18,31 +17,24 @@ const number = ref(0)
 const location = ref('')
 const productList = ref()
 
-getStoreDetail()
-getAllProduct()
-
-function getStoreDetail() {
-  getStoreById(storeId).then(res => {
-    storeVO.value = res.result
-    name.value = storeVO.value.name
-    logoUrl.value = storeVO.value.logoUrl
-    rating.value = storeVO.value.rating
-    number.value = storeVO.value.number
-    location.value = storeVO.value.location
-  })
-}
+getStoreById(storeId).then(res => {
+  storeVO.value = res.result
+  name.value = storeVO.value.name
+  logoUrl.value = storeVO.value.logoUrl
+  rating.value = storeVO.value.rating
+  number.value = storeVO.value.number
+  location.value = storeVO.value.location
+})
+
+getProductsByStoreId(storeId).then(res => {
+  productList.value = res.result
+})
 
 function toCreateProductPage() {
   router.push("/createProduct/" + storeId)
 }
 
-function getAllProduct() {
-  getProductsByStoreId(storeId).then(res => {
-    productList.value = res.result
-  })
-}
-
-function toProductDetailPage(productId) {
+function toProductDetailPage(productId: Number) {
   router.push("/productDetail/" + productId);
 }
 
@@ -51,6 +43,7 @@ function toBackPage() {
 }
 </script>
 
+
 <template>
   <el-container>
     <el-aside width="25%" class="page-aside">
@@ -103,6 +96,7 @@ function toBackPage() {
 
 </template>
 
+
 <style scoped>
 .page-aside {
   border-right: lightgrey solid 1px;