generated from wzp/v3-admin-vite
feat: adding order create and manager function
This commit is contained in:
parent
0638732c73
commit
44be727ecb
24
src/api/order/index.ts
Normal file
24
src/api/order/index.ts
Normal file
@ -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
|
||||
})
|
||||
}
|
||||
25
src/api/order/types/order.ts
Normal file
25
src/api/order/types/order.ts
Normal file
@ -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
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
12
src/views/redirect/index.vue
Normal file
12
src/views/redirect/index.vue
Normal file
@ -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>
|
||||
@ -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: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user