From 280ba2291e03e16b304c340142a105a806828534 Mon Sep 17 00:00:00 2001
From: wzp <minecraftwzpmc@163.com>
Date: Wed, 7 Jun 2023 22:54:39 +0800
Subject: [PATCH] feat: adding

---
 .env.development                  |  2 +-
 src/layout/components/AppMain.vue | 85 +++++++++++++++++++++++--------
 src/router/index.ts               |  3 ++
 src/store/modules/user.ts         | 13 ++---
 src/views/order/create/index.vue  | 66 +++++++++++++++++++++++-
 src/views/redirect/index.vue      | 12 -----
 src/views/user/index.vue          |  2 +-
 7 files changed, 138 insertions(+), 45 deletions(-)
 delete mode 100644 src/views/redirect/index.vue

diff --git a/.env.development b/.env.development
index 037293b..2c2713e 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ NODE_ENV = development
 
 ## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
 # VITE_BASE_API = 'http://192.168.1.1:8001'
-VITE_BASE_API = 'http://wzpmc.cn:8002'
+VITE_BASE_API = 'http://127.0.0.1:8001'
 
 ## 路由模式 hash 或 html5
 VITE_ROUTER_HISTORY = 'hash'
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 70ec231..0323674 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from "vue"
+import { computed, onMounted, onUnmounted, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useTagsViewStore } from "@/store/modules/tags-view"
-import { ElCountdown, ElMessage, FormInstance, FormRules } from "element-plus"
+import { ElMessage, FormInstance, FormRules } from "element-plus"
 import { useUserStore } from "@/store/modules/user"
-import { verify } from "@/api/users"
+import { getToken } from "@/utils/cache/cookies"
 
 const route = useRoute()
 const tagsViewStore = useTagsViewStore()
 const router = useRouter()
 const user = useUserStore()
-const valueTime = ref<number>(new Date().getTime() + 1000000000)
 const storeInformation = ref<{ name: string; phone: string }>({ name: "", phone: "00000000000" })
 const storeInformationForm = ref<FormInstance>()
+const need = ref<boolean>(false)
+const waiting = ref<boolean>(false)
 
 const key = computed(() => {
   return route.path
@@ -28,34 +29,78 @@ const valueRules: FormRules = {
     { len: 11, message: "手机号长度为11", trigger: "blur" }
   ]
 }
-const finished = () => {
-  ElMessage.error("超时未添加店铺信息！")
-  user.logout()
-  router.push("/login")
-}
 const upload = () => {
   if (!storeInformationForm.value?.validate()) {
     ElMessage.error("数据存在错误！")
     return
   }
-  verify(Number.parseInt(user.token), storeInformation.value.name, storeInformation.value.phone)
-    .then(() => {
-      ElMessage.success("上传成功，等待管理员审核！")
-    })
-    .catch((err) => {
-      ElMessage.error("上传失败，请重试！")
-      console.log(err)
+  webSocket.value?.send(
+    JSON.stringify({
+      type: "addVerifyInfo",
+      verifyName: storeInformation.value.name,
+      verifyPhone: storeInformation.value.phone
     })
+  )
+  ElMessage.warning("正在上传，请稍后...")
 }
+const webSocket = ref<WebSocket>()
+const timerId = ref<number>()
 onMounted(() => {
-  valueTime.value = new Date().getTime() + (user.countdown as number) * 1000
+  if (user.roleId === 5) {
+    webSocket.value = new WebSocket(
+      import.meta.env.VITE_BASE_API.replace("http", "ws").replace("https", "wss") + "/api/auth/websocket/" + getToken()
+    )
+    webSocket.value.onclose = () => {
+      ElMessage.error("WebSocket连接被顿开，已登出，请尝试重新登录或联系网站管理员！")
+      user.logout()
+      router.push("/login")
+    }
+    webSocket.value.onmessage = (evt: MessageEvent) => {
+      const data = JSON.parse(evt.data)
+      console.log(data)
+      if (data.data.info == "pong") {
+        if (data.data.time == -2) {
+          if (!need.value) {
+            ElMessage.warning("请提交店铺消息！")
+            need.value = true
+          }
+        }
+      }
+      if (data.data.info == "验证信息添加成功,请耐心等待管理员审核") {
+        ElMessage.success(data.data.info)
+        waiting.value = true
+      }
+      if (data.data.info == "管理员未同意你的验证信息,你可以重新进行验证") {
+        ElMessage.error(data.data.info)
+        waiting.value = false
+      }
+    }
+    webSocket.value.onerror = (evt) => {
+      console.log(evt)
+      ElMessage.error("WebSocket连接出现错误，已自动断开并登出，请尝试重新登录或联系网站管理员！")
+      if (!webSocket.value?.CLOSING) {
+        webSocket.value?.close()
+      }
+    }
+    timerId.value = window.setInterval(() => {
+      webSocket.value?.send(JSON.stringify({ type: "ping" }))
+      webSocket.value?.send(JSON.stringify({ type: "getTime" }))
+    }, 1000)
+  }
+})
+onUnmounted(() => {
+  if (!webSocket.value?.CLOSING) {
+    webSocket.value?.close()
+  }
+  if (timerId.value) {
+    window.clearInterval(timerId.value)
+  }
 })
 </script>
 
 <template>
   <section class="app-main">
-    <div v-if="(user.countdown as number) >= 0" style="margin: 10px 10px 10px 10px">
-      <el-countdown title="你需要在时间范围内添加店铺信息" :value="valueTime" :rules="valueRules" @finish="finished" />
+    <div v-if="user.roleId === 5 && need && false" style="margin: 10px 10px 10px 10px">
       <div style="width: 30%; margin-top: 10px">
         <el-form :model="storeInformation" :rules="valueRules" title="店铺信息" ref="storeInformationForm">
           <el-form-item prop="name" label="店铺名称">
@@ -66,7 +111,7 @@ onMounted(() => {
           </el-form-item>
         </el-form>
       </div>
-      <el-button type="success" @click="upload">提交</el-button>
+      <el-button type="success" :disabled="waiting" @click="upload">提交</el-button>
     </div>
     <router-view v-slot="{ Component }" v-else>
       <transition name="fade-transform" mode="out-in">
diff --git a/src/router/index.ts b/src/router/index.ts
index af69a78..5b7356b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -108,6 +108,9 @@ export const asyncRoutes: RouteRecordRaw[] = [
     path: "/store",
     component: Layout,
     redirect: "/store",
+    meta: {
+      roles: ["add:store", "show:store"]
+    },
     children: [
       {
         path: "store",
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index bf512ff..9017276 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -9,7 +9,7 @@ import { loginApi } from "@/api/login"
 import { type ILoginRequestData } from "@/api/login/types/login"
 import { type RouteRecordRaw } from "vue-router"
 import asyncRouteSettings from "@/config/async-route"
-import { getUserInfoApi, getRemainderTime } from "@/api/users"
+import { getUserInfoApi } from "@/api/users"
 
 export const useUserStore = defineStore("user", () => {
   /** Token即用户id */
@@ -17,7 +17,6 @@ export const useUserStore = defineStore("user", () => {
   const roles = ref<string[]>([])
   const username = ref<string>("")
   const roleId = ref<number>(-1)
-  const countdown = ref<number>()
 
   const permissionStore = usePermissionStore()
   const tagsViewStore = useTagsViewStore()
@@ -32,7 +31,7 @@ export const useUserStore = defineStore("user", () => {
       loginApi(loginData)
         .then((res) => {
           if (res.status == 202) {
-            setToken("null1")
+            setToken(res.data.data.id.toString())
             resolve(res.data.data)
             return
           }
@@ -61,11 +60,6 @@ export const useUserStore = defineStore("user", () => {
             // 塞入一个没有任何作用的默认角色，不然路由守卫逻辑会无限循环
             roles.value = asyncRouteSettings.defaultRoles
           }
-          if (roleId.value == 5) {
-            getRemainderTime(Number.parseInt(res.data.data.id)).then((response) => {
-              countdown.value = response.data.data.remainderTime
-            })
-          }
           resolve(res)
         })
         .catch((error) => {
@@ -118,8 +112,7 @@ export const useUserStore = defineStore("user", () => {
     logout,
     resetToken,
     hasRole,
-    roleId,
-    countdown
+    roleId
   }
 })
 
diff --git a/src/views/order/create/index.vue b/src/views/order/create/index.vue
index dd7ea7f..0856d89 100644
--- a/src/views/order/create/index.vue
+++ b/src/views/order/create/index.vue
@@ -47,19 +47,73 @@
     </div>
     <div class="orderAction">
       <el-button type="warning" @click="submit">添加</el-button>
+      <el-button type="danger" @click="showUploadDialog = true">批量上传</el-button>
     </div>
+    <el-dialog v-model="showUploadDialog" title="批量上传" width="50%">
+      <div v-if="step == 1">
+        <el-text>第一步·下载模板</el-text>
+        <div>
+          <el-link :href="templateUrl">点我下载模板</el-link>
+        </div>
+      </div>
+      <div v-if="step == 2">
+        <el-text>第二步·上传数据</el-text>
+        <el-upload
+          drag
+          ref="upload"
+          :action="actionUrl"
+          :limit="1"
+          :on-exceed="handleExceed"
+          :auto-upload="false"
+          :with-credentials="true"
+        >
+          <el-icon><upload-filled /></el-icon>
+          <div>将文件拖到这里，或者 <em>点击这里以上传</em></div>
+        </el-upload>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button
+            @click="
+              () => {
+                showUploadDialog = false
+                step = 1
+              }
+            "
+            >取消</el-button
+          >
+          <el-button type="success" v-if="step > 1" @click="step -= 1">上一步</el-button>
+          <el-button type="primary" v-if="step < 2" @click="step += 1">下一步</el-button>
+          <el-button type="danger" v-if="step == 2" @click="confirmData">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue"
 import { IOrder } from "@/api/order/types/order"
-import { ElLoading, ElMessage, FormInstance, FormRules } from "element-plus"
+import {
+  ElLoading,
+  ElMessage,
+  FormInstance,
+  FormRules,
+  genFileId,
+  UploadInstance,
+  UploadProps,
+  UploadRawFile
+} from "element-plus"
 import { addOrderApi, getOrderUserInfoApi } from "@/api/order"
 import { LoadingInstance } from "element-plus/es/components/loading/src/loading"
 import { IStore } from "@/api/store/types/store"
 import { getAllStoreApi } from "@/api/store"
+const templateUrl = ref<string>(import.meta.env.VITE_BASE_API + "/order/downloadTemplate")
+const actionUrl = ref<string>(import.meta.env.VITE_BASE_API + "/order/uploadBatch")
+const upload = ref<UploadInstance>()
 const loading = ref<LoadingInstance>()
+const showUploadDialog = ref<boolean>(false)
+const step = ref<number>(1)
 const form = ref<IOrder>({
   orderNo: "",
   wangNo: "",
@@ -162,6 +216,16 @@ onMounted(() => {
       ElMessage.error("获取店铺失败！")
     })
 })
+const confirmData = () => {
+  upload.value!.submit()
+  ElMessage.success("上传成功！")
+}
+const handleExceed: UploadProps["onExceed"] = (files) => {
+  upload.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  upload.value!.handleStart(file)
+}
 </script>
 
 <style scoped>
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
deleted file mode 100644
index 2fb46b3..0000000
--- a/src/views/redirect/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts" setup>
-import { useRoute, useRouter } from "vue-router"
-
-const route = useRoute()
-const router = useRouter()
-
-router.replace({ path: "/" + route.params.path, query: route.query })
-</script>
-
-<template>
-  <div />
-</template>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 5b2bede..ececf32 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -224,7 +224,7 @@ const handleChangePage = () => {
         })
       }
       if (user.roleId === 4) {
-        getVerifyMessage(Number.parseInt(user.token)).then((response) => {
+        getVerifyMessage(Number.parseInt(getToken()!)).then((response) => {
           for (const datum of response.data.data) {
             for (const valueElement of showTableData.value) {
               if (valueElement.id === datum.storeId) {