From 44be727ecbe536252f8b8ed3209f8905a6f32cca Mon Sep 17 00:00:00 2001
From: Wzp-2008 <minecraftwzpmc@163.com>
Date: Sat, 22 Apr 2023 18:54:49 +0800
Subject: [PATCH] feat: adding order create and manager function

---
 src/api/order/index.ts            |  24 ++++++
 src/api/order/types/order.ts      |  25 ++++++
 src/views/order/create/index.vue  | 132 +++++++++++++++++++++++++++++-
 src/views/order/manager/index.vue |  94 +++++++++++++++++----
 src/views/redirect/index.vue      |  12 +++
 src/views/user/index.vue          |   2 +-
 6 files changed, 269 insertions(+), 20 deletions(-)
 create mode 100644 src/api/order/index.ts
 create mode 100644 src/api/order/types/order.ts
 create mode 100644 src/views/redirect/index.vue

diff --git a/src/api/order/index.ts b/src/api/order/index.ts
new file mode 100644
index 0000000..f2d6bac
--- /dev/null
+++ b/src/api/order/index.ts
@@ -0,0 +1,24 @@
+import { IAddOrderResponse, IOrder } from "@/api/order/types/order"
+import { request } from "@/utils/service"
+import * as AxiosType from "axios"
+import { IPageResponseData, IResponseData } from "@/api/types/requests"
+
+export function addOrderApi(order: IOrder) {
+  return request<AxiosType.AxiosResponse<IResponseData<IAddOrderResponse>>>({
+    url: "/order/addOrder",
+    method: "POST",
+    data: order,
+    withCredentials: true
+  })
+}
+export function getAllOrderApi(pageNum: number) {
+  return request<AxiosType.AxiosResponse<IResponseData<IPageResponseData<IOrder>>>>({
+    url: "/order/getOrder",
+    method: "GET",
+    params: {
+      page: pageNum,
+      num: 10
+    },
+    withCredentials: true
+  })
+}
diff --git a/src/api/order/types/order.ts b/src/api/order/types/order.ts
new file mode 100644
index 0000000..419d0b0
--- /dev/null
+++ b/src/api/order/types/order.ts
@@ -0,0 +1,25 @@
+export interface IOrder {
+  id?: number
+  orderNo: string
+  orderTime?: string
+  orderStatus?: string
+  wangNo: string
+  wechatNo?: string
+  alipayNo?: string
+  payAmt: number
+  shopTownName: string
+  commission?: number
+  alipayName?: string
+  rpName?: string
+  rpWeChatName?: string
+  remark?: string
+  phoneNumber?: string
+  cardNo?: string
+  flag?: number
+  flagMark?: string
+  payTime?: string
+  address: string
+  shopId?: number
+  sku?: string
+}
+export type IAddOrderResponse = string
diff --git a/src/views/order/create/index.vue b/src/views/order/create/index.vue
index afa8615..ead3a19 100644
--- a/src/views/order/create/index.vue
+++ b/src/views/order/create/index.vue
@@ -1,7 +1,133 @@
 <template>
-  <div>OrderCreate</div>
+  <div class="orderDiv">
+    <div class="orderForm">
+      <el-form :model="form" label-width="150px" :rules="formRules" ref="formRef">
+        <el-form-item label="订单号" prop="orderNo">
+          <el-input v-model="form.orderNo" />
+        </el-form-item>
+        <el-form-item label="旺旺号" prop="wangNo">
+          <el-input v-model="form.wangNo" />
+        </el-form-item>
+        <el-form-item label="微信账号" prop="wechatNo">
+          <el-input v-model="form.wechatNo" />
+        </el-form-item>
+        <el-form-item label="支付宝账号" prop="alipayNo">
+          <el-input v-model="form.alipayNo" />
+        </el-form-item>
+        <el-form-item label="付款金额" prop="payAmt">
+          <el-input v-model.number="form.payAmt" type="number" />
+        </el-form-item>
+        <el-form-item label="店铺名称" prop="shopTownName">
+          <el-input v-model="form.shopTownName" />
+        </el-form-item>
+        <el-form-item label="支付宝收款名称" prop="alipayName">
+          <el-input v-model="form.alipayName" />
+        </el-form-item>
+        <el-form-item label="负责人" prop="rpName">
+          <el-input v-model="form.rpName" />
+        </el-form-item>
+        <el-form-item label="负责放单人微信名" prop="rpWeChatName">
+          <el-input v-model="form.rpWeChatName" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" />
+        </el-form-item>
+        <el-form-item label="买家电话" prop="phoneNumber">
+          <el-input v-model="form.phoneNumber" />
+        </el-form-item>
+        <el-form-item label="银行卡号" prop="cardNo">
+          <el-input v-model="form.cardNo" />
+        </el-form-item>
+        <el-form-item label="收货地址" prop="address">
+          <el-input v-model="form.address" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="orderAction">
+      <el-button type="warning" @click="submit">添加</el-button>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref } from "vue"
+import { IOrder } from "@/api/order/types/order"
+import { ElMessage, FormInstance, FormRules } from "element-plus"
+import { addOrderApi } from "@/api/order"
+const form = ref<IOrder>({
+  orderNo: "",
+  wangNo: "",
+  payAmt: 0,
+  shopTownName: "",
+  address: ""
+})
+const formRules: FormRules = {
+  orderNo: [
+    { required: true, message: "请输入订单号！" },
+    { max: 30, message: "订单号长度在30位以内！" }
+  ],
+  wangNo: [
+    { required: true, message: "请输入旺旺号" },
+    { max: 30, message: "旺旺号长度在30位以内！" }
+  ],
+  wechatNo: [{ max: 30, message: "微信号长度在30位以内！" }],
+  alipayNo: [{ max: 30, message: "支付宝账号长度在30位以内！" }],
+  payAmt: [{ required: true, message: "请输入付款金额" }],
+  shopTownName: [
+    { required: true, message: "请输入店铺名称" },
+    { max: 255, message: "店铺长度应在255位以内！" }
+  ],
+  alipayName: [{ max: 30, message: "支付宝用户名长度在30位以内！" }],
+  rpName: [{ max: 20, message: "负责人姓名长度应在20位以内！" }],
+  rpWeChatName: [{ max: 255, message: "放单人微信名长度在255位以内！" }],
+  remark: [{ max: 255, message: "备注长度在255位以内！" }],
+  phoneNumber: [{ max: 11, message: "卖家电话长度应在11位以内" }],
+  cardNo: [{ max: 20, message: "银行卡长度在20位以内！" }],
+  address: [
+    { required: true, message: "请输入收货地址" },
+    { max: 255, message: "收货地址长度在255位以内！" }
+  ]
+}
+const formRef = ref<FormInstance>()
+const submit = () => {
+  formRef.value
+    ?.validate()
+    .then(() => {
+      addOrderApi(form.value)
+        .then(() => {
+          ElMessage.success("提交成功！")
+          form.value = {
+            orderNo: "",
+            wangNo: "",
+            payAmt: 0,
+            shopTownName: "",
+            address: ""
+          }
+        })
+        .catch((err) => {
+          ElMessage.error("提交失败，请重试！")
+          console.log(err)
+        })
+    })
+    .catch(() => {
+      ElMessage.error("有错误的数据！")
+    })
+}
+</script>
 
-<style scoped></style>
+<style scoped>
+.orderDiv {
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  margin: 10px 10px 10px 10px;
+}
+.orderForm {
+  width: 100%;
+  height: 95%;
+}
+.orderAction {
+  width: max-content;
+  height: 5%;
+  margin-top: 10px;
+}
+</style>
diff --git a/src/views/order/manager/index.vue b/src/views/order/manager/index.vue
index 90a5bd3..dd23a9c 100644
--- a/src/views/order/manager/index.vue
+++ b/src/views/order/manager/index.vue
@@ -1,24 +1,86 @@
 <template>
-  <el-table :data="tableShowData" style="width: 100%">
-    <el-table-column label="Date" prop="date" />
-    <el-table-column label="Name" prop="name" />
-    <el-table-column align="right">
-      <template #header>
-        <el-input v-model="search" size="small" placeholder="Type to search" />
-      </template>
-      <template #default="scope">
-        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
-        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+  <div class="orderManagerDiv">
+    <div class="orderManagerTableDiv">
+      <el-table :data="tableShowData" style="width: 100%" table-layout="auto">
+        <el-table-column fixed prop="id" label="ID" />
+        <el-table-column prop="orderNo" label="订单号" />
+        <el-table-column prop="orderTime" label="订单创建事件" />
+        <el-table-column prop="orderStatus" label="订单状态" />
+        <el-table-column prop="wangNo" label="旺旺号" />
+        <el-table-column prop="wechatNo" label="微信号" />
+        <el-table-column prop="alipayNo" label="支付宝账号" />
+        <el-table-column prop="payAmt" label="付款金额" />
+        <el-table-column prop="shopTownName" label="店铺名称" />
+        <el-table-column prop="commission" label="佣金" />
+        <el-table-column prop="alipayName" label="支付宝用户名" />
+        <el-table-column prop="rpName" label="负责人名称" />
+        <el-table-column prop="rpWeChatName" label="负责人微信名称" />
+        <el-table-column prop="remark" label="备注" />
+        <el-table-column prop="phoneNumber" label="收件人手机号" />
+        <el-table-column prop="cardNo" label="银行卡号" />
+        <el-table-column prop="flag" label="插旗" />
+        <el-table-column prop="flagMark" label="插旗备注" />
+        <el-table-column prop="payTime" label="支付事件" />
+        <el-table-column prop="address" label="地址" />
+        <el-table-column prop="sku" label="SKU" />
+        <el-table-column fixed="right" label="操作">
+          <template #default="scope">
+            <el-button link type="primary" size="small" @click="handleExchange(scope.row)">修改</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="orderManagerPaginationDiv">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="totalOrderCount"
+        :current-page="nowPage"
+        @update:current-page="handleChangePage"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue"
-import { OrderData } from "@/entities/OrderData"
+import { IOrder } from "@/api/order/types/order"
+import { ElMessage } from "element-plus"
+import { getAllOrderApi } from "@/api/order"
 
-const tableShowData = ref<OrderData[]>([])
+const tableShowData = ref<IOrder[]>([])
+const totalOrderCount = ref<number>(1)
+const nowPage = ref<number>(1)
+const handleChangePage = () => {
+  getAllOrderApi(nowPage.value)
+    .then((response) => {
+      tableShowData.value = response.data.data.info
+      totalOrderCount.value = response.data.data.total
+    })
+    .catch(() => {
+      ElMessage.error("获取用户数据失败！")
+    })
+}
+
+const handleExchange = (row: IOrder) => {
+  console.log(row)
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+.orderManagerDiv {
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  margin: 10px 10px 10px 10px;
+}
+.orderManagerTableDiv {
+  width: 100%;
+  height: calc(95% - 20px);
+  margin-top: 10px;
+}
+.orderManagerPaginationDiv {
+  height: 5%;
+  margin-top: 10px;
+  min-height: 32px;
+}
+</style>
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
new file mode 100644
index 0000000..2fb46b3
--- /dev/null
+++ b/src/views/redirect/index.vue
@@ -0,0 +1,12 @@
+<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 b770b98..ae16b26 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -97,7 +97,7 @@ const addAccountRules: FormRules = {
   ],
   relName: [
     { required: true, message: "请输入真实姓名", trigger: "blur" },
-    { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
+    { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
     { pattern: "[A-Za-z0-9_-一-龥]+", message: "真实姓名不符合要求" }
   ],
   roleId: [