wzp/Commerce-System-Frontend
1
0
Fork 0
generated from wzp/v3-admin-vite
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adding flag function

Browse Source
This commit is contained in:
Wzp-2008 2023-04-22 23:39:39 +08:00
parent df6b488108
commit 53d5d460dc
4 changed files with 358 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/api/order/index.ts
View File

@ -1,4 +1,11 @@
import { IAddOrderResponse, IOrder } from "@/api/order/types/order"
import {
IAddFlagResponse,
IAddOrderResponse,
IChangeOrderResponse,
IGetOrderUserInfoResponseData,
IOrder,
IRemoveOrderResponse
} from "@/api/order/types/order"
import { request } from "@/utils/service"
import * as AxiosType from "axios"
import { IPageResponseData, IResponseData } from "@/api/types/requests"
@ -22,3 +29,44 @@ export function getAllOrderApi(pageNum: number) {
withCredentials: true
})
}
export function getOrderUserInfoApi(content: string) {
return request<AxiosType.AxiosResponse<IResponseData<IGetOrderUserInfoResponseData>>>({
url: "/order/getOrderUserInfo",
method: "GET",
params: {
content: content
},
withCredentials: true
})
}
export function addFlagApi(order: IOrder) {
return request<AxiosType.AxiosResponse<IResponseData<IAddFlagResponse>>>({
url: "/order/addOrderFlag",
method: "GET",
params: {
orderId: order.id,
flagId: order.flag,
flagRemark: order.flagRemark
},
withCredentials: true
})
}
export function changeOrderApi(order: IOrder) {
return request<AxiosType.AxiosResponse<IResponseData<IChangeOrderResponse>>>({
url: "/order/changeOrder",
method: "POST",
data: order,
withCredentials: true
})
}
export function removeOrderApi(orderId: number) {
return request<AxiosType.AxiosResponse<IResponseData<IRemoveOrderResponse>>>({
url: "/order/delOrder",
method: "GET",
params: {
orderId: orderId
},
withCredentials: true
})
}

18
src/api/order/types/order.ts
View File

@ -1,6 +1,14 @@
export type OrderStatus =
| "商家驳回"
| "已完成"
| "已确认等待财务审核"
| "提交"
| "新建待提交数据"
| "财务审核已通过"
| "财务驳回"
export interface IOrder {
id?: number
orderNo: string
orderNo: OrderStatus
orderTime?: string
orderStatus?: string
wangNo: string
@ -11,15 +19,19 @@ export interface IOrder {
commission?: number
alipayName?: string
rpName?: string
rpWeChatName?: string
rpWechatName?: string
remark?: string
phoneNumber?: string
cardNo?: string
flag?: number
flagMark?: string
flagRemark?: string
payTime?: string
address: string
shopId?: number
sku?: string
}
export type IAddOrderResponse = string
export type IGetOrderUserInfoResponseData = boolean
export type IAddFlagResponse = string
export type IRemoveOrderResponse = string
export type IChangeOrderResponse = string

76
src/views/order/create/index.vue
View File

@ -26,8 +26,8 @@
<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 label="负责放单人微信名" prop="rpWechatName">
<el-input v-model="form.rpWechatName" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" />
@ -50,10 +50,12 @@
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { ref, watch } from "vue"
import { IOrder } from "@/api/order/types/order"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import { addOrderApi } from "@/api/order"
import { ElLoading, ElMessage, FormInstance, FormRules } from "element-plus"
import { addOrderApi, getOrderUserInfoApi } from "@/api/order"
import { LoadingInstance } from "element-plus/es/components/loading/src/loading"
const loading = ref<LoadingInstance>()
const form = ref<IOrder>({
orderNo: "",
wangNo: "",
@ -61,6 +63,9 @@ const form = ref<IOrder>({
shopTownName: "",
address: ""
})
watch(form.value, () => {
confirmUpload.value = false
})
const formRules: FormRules = {
orderNo: [
{ required: true, message: "请输入订单号！" },
@ -89,25 +94,54 @@ const formRules: FormRules = {
]
}
const formRef = ref<FormInstance>()
const confirmUpload = ref<boolean>(false)
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)
})
.then(async () => {
loading.value = ElLoading.service({ fullscreen: true })
let canUpload = true
const check = async (content?: string) => {
if (content) {
await getOrderUserInfoApi(content).then((response) => {
if (canUpload) {
canUpload = !response.data.data
}
})
}
}
if (!confirmUpload.value) {
await check(form.value.wangNo)
await check(form.value.wechatNo)
await check(form.value.alipayNo)
await check(form.value.alipayName)
await check(form.value.phoneNumber)
} else {
confirmUpload.value = false
canUpload = true
}
if (canUpload) {
addOrderApi(form.value)
.then(() => {
ElMessage.success("提交成功！")
form.value = {
orderNo: "",
wangNo: "",
payAmt: 0,
shopTownName: "",
address: ""
}
})
.catch((err) => {
ElMessage.error("提交失败，请重试！")
console.log(err)
})
} else {
ElMessage.warning("有重复项，请确定是否提交，若确认提交请再次点击提交按钮")
confirmUpload.value = true
}
loading.value?.close()
loading.value = undefined
})
.catch(() => {
ElMessage.error("有错误的数据！")

266
src/views/order/manager/index.vue
View File

@ -2,30 +2,37 @@
<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="操作">
<el-table-column fixed prop="id" label="ID" width="50px" />
<el-table-column prop="orderNo" label="订单号" width="200px" />
<el-table-column prop="orderTime" label="订单创建时间" width="300px" />
<el-table-column prop="orderStatus" label="订单状态" width="150px" />
<el-table-column prop="wangNo" label="旺旺号" width="300px" />
<el-table-column prop="wechatNo" label="微信号" width="300px" />
<el-table-column prop="alipayNo" label="支付宝账号" width="300px" />
<el-table-column prop="payAmt" label="付款金额" width="100px" />
<el-table-column prop="shopTownName" label="店铺名称" width="200px" />
<el-table-column prop="commission" label="佣金" width="100px" />
<el-table-column prop="alipayName" label="支付宝用户名" width="300px" />
<el-table-column prop="rpName" label="负责人名称" width="300px" />
<el-table-column prop="rpWechatName" label="负责人微信名称" width="300px" />
<el-table-column prop="remark" label="备注" width="600px" />
<el-table-column prop="phoneNumber" label="收件人手机号" width="300px" />
<el-table-column prop="cardNo" label="银行卡号" width="600px" />
<el-table-column prop="flag" label="插旗" width="50px">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleExchange(scope.row)">修改</el-button>
<el-icon v-if="scope.row.flag"><Flag :style="{ color: getColor(scope.row) }" /></el-icon>
</template>
</el-table-column>
<el-table-column prop="flagRemark" label="插旗备注" width="600px" />
<el-table-column prop="payTime" label="支付时间" width="300px" />
<el-table-column prop="address" label="地址" width="1000px" />
<el-table-column prop="shopId" label="商品ID" width="200px" />
<el-table-column prop="sku" label="SKU" width="300px" />
<el-table-column fixed="right" label="操作" width="150px">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleExchangeButtonClick(scope.row)">修改</el-button>
<el-button link type="primary" size="small" @click="handleFlagButtonClick(scope.row)">插旗</el-button>
<el-button link type="primary" size="small" @click="handleRemoveButtonClick(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@ -39,18 +46,184 @@
@update:current-page="handleChangePage"
/>
</div>
<el-dialog
v-model="showFlagDialog"
title="插旗"
width="30%"
:before-close="
() => {
flagData = undefined
}
"
>
<div>
<el-radio-group v-model="flagData.flag">
<el-radio :label="1">
<el-icon><Flag style="color: red" /></el-icon>
</el-radio>
<el-radio :label="2">
<el-icon><Flag style="color: orange" /></el-icon>
</el-radio>
<el-radio :label="3">
<el-icon><Flag style="color: yellow" /></el-icon>
</el-radio>
<el-radio :label="4">
<el-icon><Flag style="color: green" /></el-icon>
</el-radio>
<el-radio :label="5">
<el-icon><Flag style="color: blue" /></el-icon>
</el-radio>
<el-radio :label="6">
<el-icon><Flag style="color: purple" /></el-icon>
</el-radio>
<el-radio :label="7">
<el-icon><Flag style="color: gray" /></el-icon>
</el-radio>
</el-radio-group>
</div>
<div>
<el-input v-model="flagData.flagRemark">
<template #prepend>插旗备注：</template>
</el-input>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showFlagDialog = false">取消</el-button>
<el-button type="primary" @click="handleFlag">确认</el-button>
</span>
</template>
</el-dialog>
<el-dialog
v-model="showExchangeDialog"
title="修改订单"
width="30%"
:before-close="
() => {
exchangeOrder = undefined
}
"
>
<el-form :model="exchangeOrder" label-width="150px" :rules="formRules" ref="formRef">
<el-form-item label="订单状态" prop="orderStatus">
<el-select v-model="exchangeOrder.orderStatus" clearable>
<el-option :key="1" label="商家驳回" value="商家驳回" />
<el-option :key="2" label="已完成" value="已完成" />
<el-option :key="3" label="已确认等待财务审核" value="已确认等待财务审核" />
<el-option :key="4" label="提交" value="提交" />
<el-option :key="5" label="新建待提交数据" value="新建待提交数据" />
<el-option :key="6" label="财务审核已通过" value="财务审核已通过" />
<el-option :key="7" label="财务驳回" value="财务驳回" />
</el-select>
</el-form-item>
<el-form-item label="微信账号" prop="wechatNo">
<el-input v-model="exchangeOrder.wechatNo" />
</el-form-item>
<el-form-item label="支付宝账号" prop="alipayNo">
<el-input v-model="exchangeOrder.alipayNo" />
</el-form-item>
<el-form-item label="佣金" prop="commission">
<el-input v-model.number="exchangeOrder.commission" />
</el-form-item>
<el-form-item label="支付宝收款名称" prop="alipayName">
<el-input v-model="exchangeOrder.alipayName" />
</el-form-item>
<el-form-item label="负责人" prop="rpName">
<el-input v-model="exchangeOrder.rpName" />
</el-form-item>
<el-form-item label="负责放单人微信名" prop="rpWechatName">
<el-input v-model="exchangeOrder.rpWechatName" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="exchangeOrder.remark" />
</el-form-item>
<el-form-item label="买家电话" prop="phoneNumber">
<el-input v-model="exchangeOrder.phoneNumber" />
</el-form-item>
<el-form-item label="银行卡号" prop="cardNo">
<el-input v-model="exchangeOrder.cardNo" />
</el-form-item>
<el-form-item label="收货地址" prop="address">
<el-input v-model="exchangeOrder.address" />
</el-form-item>
<el-form-item label="商品ID" prop="shopId">
<el-input v-model.number="exchangeOrder.shopId" />
</el-form-item>
<el-form-item label="SKU" prop="sku">
<el-input v-model="exchangeOrder.sku" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showExchangeDialog = false">取消</el-button>
<el-button type="primary" @click="handleExchange">确认</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { IOrder } from "@/api/order/types/order"
import { ElMessage } from "element-plus"
import { getAllOrderApi } from "@/api/order"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import { addFlagApi, changeOrderApi, getAllOrderApi, removeOrderApi } from "@/api/order"
import { Flag } from "@element-plus/icons-vue"
const tableShowData = ref<IOrder[]>([])
const totalOrderCount = ref<number>(1)
const nowPage = ref<number>(1)
const showFlagDialog = ref<boolean>(false)
const flagData = ref<IOrder>()
const showExchangeDialog = ref<boolean>(false)
const exchangeOrder = ref<IOrder>()
const formRules: FormRules = {
wechatNo: [{ max: 30, message: "微信号长度在30位以内！" }],
alipayNo: [{ max: 30, message: "支付宝账号长度在30位以内！" }],
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 getColor = (row: IOrder): string => {
switch (row.flag) {
case 1:
return "red"
case 2:
return "orange"
case 3:
return "yellow"
case 4:
return "green"
case 5:
return "blue"
case 6:
return "purple"
case 7:
return "gray"
default:
ElMessage.warning("检测到未知旗帜类型，使用白色代替")
return "white"
}
}
const handleRemoveButtonClick = (row: IOrder) => {
if (row.id) {
removeOrderApi(row.id)
.then(() => {
ElMessage.success("删除成功")
})
.catch((err) => {
console.log(err)
ElMessage.error("删除失败")
})
}
}
const handleChangePage = () => {
getAllOrderApi(nowPage.value)
.then((response) => {
@ -62,8 +235,47 @@ const handleChangePage = () => {
})
}
const handleExchange = (row: IOrder) => {
console.log(row)
const handleExchangeButtonClick = (row: IOrder) => {
exchangeOrder.value = row
showExchangeDialog.value = true
}
const handleFlagButtonClick = (row: IOrder) => {
showFlagDialog.value = true
flagData.value = row
}
const handleFlag = () => {
if (flagData.value) {
addFlagApi(flagData.value)
.then(() => {
ElMessage.success("插旗成功！")
})
.catch((err) => {
ElMessage.error("插旗失败！")
console.log(err)
})
showFlagDialog.value = false
}
}
const handleExchange = () => {
formRef.value
?.validate()
.then(() => {
if (exchangeOrder.value) {
changeOrderApi(exchangeOrder.value)
.then(() => {
ElMessage.success("修改订单成功")
})
.catch((err) => {
console.log(err)
ElMessage.error("修改失败！")
})
showExchangeDialog.value = false
}
})
.catch((err) => {
console.log(err)
ElMessage.error("有数据不符合要求！")
})
}
onMounted(() => {
handleChangePage()