实现下载excel报表功能，调整工具API

src/api/_prefix.ts

@@ -8,7 +8,6 @@ export const STORE_MODULE= `${API_MODULE}/stores`
 export const PRODUCT_MODULE= `${API_MODULE}/products`
 //订单模块
 export const ORDER_MODULE= `${API_MODULE}/orders`
-//图片模块
-export const IMAGE_MODULE= `${API_MODULE}/images`
 //优惠券模块
 export const COUPON_MODULE= `${API_MODULE}/coupons`
+

src/api/image.ts → src/api/tools.ts

@@ -1,9 +1,9 @@
 import {axios} from '../utils/request'
-import {IMAGE_MODULE} from './_prefix'
+import {API_MODULE} from './_prefix'
 
 // 上传文件
 export const uploadImage = payload => {
-    return axios.post(`${IMAGE_MODULE}/`, payload, {
+    return axios.post(`${API_MODULE}/images`, payload, {
         headers:{
             'Content-Type': "multipart/form-data;"
         }
@@ -12,3 +12,10 @@ export const uploadImage = payload => {
             return res;
         })
 }
+
+export const getExcelUrl = () => {
+    return axios.get(`${API_MODULE}/excel`, )
+        .then(res => {
+            return res;
+        })
+}

src/components/OrderItem.vue

@@ -101,23 +101,18 @@ const isLoading = ref(false)
 const refreshButtonVisible = ref(false)
 
 function handleConfirmOrder() {
-  isLoading.value = true
-  refreshButtonVisible.value = true
   payOrder(props.orderId, couponId.value).then(res => {
-    const paymentWindow = window.open('', '_blank');
-    paymentWindow.document.write(res);
-    paymentWindow.document.forms[0].submit(); // 提交表单
     if (res.code === '000') {
       ElMessage({
-        message: '订单支付成功！',
+        message: '订单提交成功！',
         type: 'success',
         center: true,
       })
-      orderDialogVisible.value = false
-      getOrderDetail()
-      couponId.value = 0
-      isLoading.value = false
-      refreshButtonVisible.value = false
+      isLoading.value = true
+      refreshButtonVisible.value = true
+      const paymentWindow = window.open('', '_blank');
+      paymentWindow.document.write(res.result);
+      paymentWindow.document.forms[0].submit(); // 提交表单
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,
@@ -349,7 +344,7 @@ function parseOrderType(type) {
       </el-button>
     </el-row>
 
-    <div>
+    <div v-loading="isLoading">
       <el-form>
         <el-form-item>
           <label>购买数量：</label>

src/views/order/AllOrder.vue

@@ -2,22 +2,35 @@
 import {ref} from "vue";
 import {getAllOrder} from "../../api/order.ts";
 import OrderItem from "../../components/OrderItem.vue";
+import {getExcelUrl} from "../../api/tools.ts";
 
-let orderList = ref()
+const role = sessionStorage.getItem("role")
 
-getOrderList()
+const orderList = ref()
+const excelUrl = ref('')
+
+getAllOrder().then(res => {
+  orderList.value = res.result
+})
+
+getExcelUrl().then(res => {
+  excelUrl.value = res.result
+})
 
-function getOrderList() {
-  getAllOrder().then(res => {
-    orderList.value = res.result
-  })
-}
 </script>
 
 <template>
-  <el-main class="order-item-list">
-    <OrderItem
-               v-for="orderVO in orderList" :orderId="orderVO.id"/>
+  <el-main>
+    <div v-if="role === 'STAFF' || role === 'MANAGER' || role === 'CEO'">
+      <a :href="excelUrl">
+        <el-button class="get-excel-button" type="success" plain>下载订单报表</el-button>
+      </a>
+    </div>
+
+    <div class="order-item-list">
+      <OrderItem
+          v-for="orderVO in orderList" :orderId="orderVO.id"/>
+    </div>
   </el-main>
 </template>
 
@@ -28,4 +41,10 @@ function getOrderList() {
   flex-flow: wrap;
   justify-content: center;
 }
+
+.get-excel-button {
+  margin-top: 20px;
+  margin-left: 50px;
+
+}
 </style>

src/views/product/CreateProduct.vue

@@ -2,7 +2,7 @@
 import {useRouter} from "vue-router";
 import {ref, computed} from "vue";
 import {createProduct} from "../../api/product.ts";
-import {uploadImage} from "../../api/image.ts";
+import {uploadImage} from "../../api/tools.ts";
 import {Back, UploadFilled} from "@element-plus/icons-vue";
 
 const router = useRouter();

src/views/product/ProductDetail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useRouter} from "vue-router";
-import {ref, onMounted} from "vue";
+import {ref, onMounted, computed} from "vue";
 import {addStock, getProductById} from "../../api/product.ts";
 import {Back, RefreshRight} from "@element-plus/icons-vue";
 import {ElTable} from "element-plus";
@@ -35,25 +35,28 @@ let orderDialogVisible = ref(false)
 const orderId = ref()
 const couponId = ref(0)
 
-getProductDetail()
-
-function getProductDetail() {
-  getProductById(productId).then(res => {
-    productVO.value = res.result
-    storeId.value = productVO.value.storeId
-    name.value = productVO.value.name
-    photoUrlList.value = productVO.value.photoUrlList
-    rating.value = productVO.value.rating
-    number.value = productVO.value.number
-    salesAmount.value = productVO.value.salesAmount
-    stock.value = productVO.value.stock
-    category.value = productVO.value.category
-    price.value = productVO.value.price
-
-    photoUrl.value = photoUrlList.value[0]
-    totalPrice.value = price.value
-  })
-}
+const hasTypeInput = computed(() => type.value != '')
+const typeLegal = hasTypeInput
+
+const createDisabled = computed(() => {
+  return !(nameLegal.value && locationLegal.value && imageFileList.value);
+})
+
+getProductById(productId).then(res => {
+  productVO.value = res.result
+  storeId.value = productVO.value.storeId
+  name.value = productVO.value.name
+  photoUrlList.value = productVO.value.photoUrlList
+  rating.value = productVO.value.rating
+  number.value = productVO.value.number
+  salesAmount.value = productVO.value.salesAmount
+  stock.value = productVO.value.stock
+  category.value = productVO.value.category
+  price.value = productVO.value.price
+
+  photoUrl.value = photoUrlList.value[0]
+  totalPrice.value = price.value
+})
 
 function parseCategory(category) {
   if (category === 'FOOD') {
@@ -135,26 +138,19 @@ const isLoading = ref(false)
 const refreshButtonVisible = ref(false)
 
 function handleConfirmOrder() {
-  isLoading.value = true
-  refreshButtonVisible.value = true
   payOrder(orderId.value, couponId.value).then(res => {
-    const paymentWindow = window.open('', '_blank');
-    paymentWindow.document.write(res);
-    paymentWindow.document.forms[0].submit(); // 提交表单
-    showForm.value = false; // 隐藏表单
     if (res.code === '000') {
       ElMessage({
-        message: '订单支付成功！',
+        message: '订单提交成功！',
         type: 'success',
         center: true,
       })
-      orderDialogVisible.value = false
-      amount.value = 1
-      type.value = ''
-      totalPrice.value = price.value
-      couponId.value = 0
-      isLoading.value = false
-      refreshButtonVisible.value = false
+      isLoading.value = true
+      refreshButtonVisible.value = true
+      const paymentWindow = window.open('', '_blank');
+      paymentWindow.document.write(res.result);
+      paymentWindow.document.forms[0].submit(); // 提交表单
+      showForm.value = false; // 隐藏表单
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,
@@ -281,23 +277,14 @@ function toBackPage() {
             {{ stock }} 件
           </el-descriptions-item>
         </el-descriptions>
-
-        <el-input class="add-stock-number-input" v-if="role === 'STAFF'"
-                  v-model="addStockNumber" placeholder="请输入添加库存数"/>
-        <el-button class="add-stock-button" @click="AddStock" v-if="role === 'STAFF'"
-                   type="primary" plain>
-          新增库存
-        </el-button>
       </div>
     </el-aside>
 
-    <el-main>
+    <el-main v-if="role === 'CUSTOMER'">
       <div>
-        <span class="buy-product-title">购买商品</span>
+        <span class="main-title">购买商品</span>
       </div>
-      <el-form ref="form" v-if="showForm">
-      </el-form>
-      <el-form class="buy-form-main">
+      <el-form class="buy-form">
         <el-form-item>
           <label for="amount">购买数量：</label>
           <el-input-number v-model="amount" :min="1" :max="stock + 10" @change="handleChange"/>
@@ -317,68 +304,84 @@ function toBackPage() {
           {{ totalPrice }} 元
         </el-form-item>
       </el-form>
-      <el-button class="buy-button"
-                 @click="handleCreateOrder">创建订单
+      <el-button @click="handleCreateOrder" :disabled="createDisabled"
+                 class="buy-button" type="primary" plain>创建订单
       </el-button>
+    </el-main>
 
-      <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
-        <el-row>
-          <span class="pay-dialog-title">订单支付</span>
-          <el-button v-if="refreshButtonVisible" @click="refreshPage()"
-                     type="primary" plain class="pay-dialog-refresh-button">
-            已完成支付，刷新界面
-            <el-icon>
-              <RefreshRight/>
-            </el-icon>
-          </el-button>
-        </el-row>
-
-        <div v-loading="isLoading">
-          <el-form>
-            <el-form-item>
-              <label for="amount">购买数量：</label>
-              {{ amount }} 件
-            </el-form-item>
-            <el-form-item>
-              <label for="discountPrice">折扣前总价：</label>
-              {{ totalPrice }} 元
-            </el-form-item>
-            <el-form-item>
-              <label for="type">提货方式：</label>
-              {{ parseOrderType(type) }}
-            </el-form-item>
-            <el-form-item>
-              <label for="type">优惠券：</label>
-              <el-button @click="setCurrent()">不使用优惠券</el-button>
-              <el-table
-                  ref="singleTableRef"
-                  :data="availableCouponList"
-                  highlight-current-row
-                  style="width: 100%"
-                  @current-change="handleCurrentChange"
-              >
-                <el-table-column type="index" width="50"/>
-                <el-table-column prop="type" label="类型" width="180">
-                  <template #default="scope">
-                    {{ handleCouponType(scope.row.type) }}
-                  </template>
-                </el-table-column>
-                <el-table-column prop="satisfaction" label="满（元）" width="180"/>
-                <el-table-column prop="minus" label="减（元）" width="180"/>
-              </el-table>
-            </el-form-item>
-
-            <el-form-item>
-              <label>折扣后金额：</label>
-              {{ discountPrice }} 元
-            </el-form-item>
-          </el-form>
-
-          <el-button @click="handleConfirmOrder" type="primary" plain>确认支付</el-button>
-        </div>
-
-      </el-dialog>
+    <el-main v-if="role === 'STAFF'">
+      <div>
+        <span class="main-title">添加库存</span>
+      </div>
+      <div class="add-stock-main">
+        <el-input class="add-stock-number-input"
+                  v-model="addStockNumber" placeholder="请输入添加库存数">
+          <template #append>件</template>
+        </el-input>
+        <br>
+        <el-button @click="AddStock"
+                   class="add-stock-button" type="primary" plain>
+          新增库存
+        </el-button>
+      </div>
     </el-main>
+
+    <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
+      <el-row>
+        <span class="pay-dialog-title">订单支付</span>
+        <el-button v-if="refreshButtonVisible" @click="refreshPage()"
+                   type="primary" plain class="pay-dialog-refresh-button">
+          已完成支付，刷新界面
+          <el-icon>
+            <RefreshRight/>
+          </el-icon>
+        </el-button>
+      </el-row>
+
+      <div v-loading="isLoading">
+        <el-form>
+          <el-form-item>
+            <label for="amount">购买数量：</label>
+            {{ amount }} 件
+          </el-form-item>
+          <el-form-item>
+            <label for="type">提货方式：</label>
+            {{ parseOrderType(type) }}
+          </el-form-item>
+          <el-form-item>
+            <label for="discountPrice">折扣前总价：</label>
+            {{ totalPrice }} 元
+          </el-form-item>
+          <el-form-item>
+            <label for="type">优惠券：</label>
+            <el-button @click="setCurrent()">不使用优惠券</el-button>
+            <el-table
+                ref="singleTableRef"
+                :data="availableCouponList"
+                highlight-current-row
+                style="width: 100%"
+                @current-change="handleCurrentChange"
+            >
+              <el-table-column type="index" width="50"/>
+              <el-table-column prop="type" label="类型" width="180">
+                <template #default="scope">
+                  {{ handleCouponType(scope.row.type) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="satisfaction" label="满（元）" width="180"/>
+              <el-table-column prop="minus" label="减（元）" width="180"/>
+            </el-table>
+          </el-form-item>
+
+          <el-form-item>
+            <label>折扣后金额：</label>
+            {{ discountPrice }} 元
+          </el-form-item>
+        </el-form>
+
+        <el-button @click="handleConfirmOrder" type="primary" plain>确认支付</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -410,22 +413,27 @@ function toBackPage() {
 }
 
 .add-stock-number-input {
-  margin-top: 15px;
-  margin-bottom: 10px;
+  width: 300px;
+  margin-bottom: 20px;
 }
 
 .add-stock-button {
   margin-bottom: 40px;
 }
 
-.buy-product-title {
+.main-title {
   font-size: 30px;
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: 20px;
 }
 
-.buy-form-main {
+.buy-form {
+  margin-top: 20px;
+  margin-left: 30px;
+}
+
+.add-stock-main {
   margin-top: 20px;
   margin-left: 30px;
 }

src/views/store/CreateStore.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {createStore} from "../../api/store.ts"
-import {uploadImage} from "../../api/image.ts"
+import {uploadImage} from "../../api/tools.ts"
 import {router} from '../../router'
 import {Back, UploadFilled} from "@element-plus/icons-vue";