chore(config): 添加项目配置文件和隐私协议
- 添加 .editorconfig 文件统一代码风格 - 添加 .env.development 和 .env.example 环境配置文件 - 添加 .eslintignore 和 .eslintrc.js 代码检查配置 - 添加 .gitignore 版本控制忽略文件配置 - 添加 .prettierignore 格式化忽略配置 - 添加隐私协议HTML文件 - 添加API密钥管理组件基础结构
This commit is contained in:
411
src/views/shop/shopOrder/components/deliveryModal.vue
Normal file
411
src/views/shop/shopOrder/components/deliveryModal.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<!-- 订单发货弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="订单发送货"
|
||||
width="600px"
|
||||
:confirm-loading="loading"
|
||||
@update:visible="updateVisible"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 20 }"
|
||||
>
|
||||
<!-- 配送方式 -->
|
||||
<a-form-item label="配送方式" name="deliveryType">
|
||||
<a-radio-group v-model:value="form.deliveryType">
|
||||
<a-radio :value="0">
|
||||
<span style="color: #1890ff">快递配送</span>
|
||||
</a-radio>
|
||||
<a-radio :value="1">无需发货</a-radio>
|
||||
<a-radio :value="2">商家送货</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 发货类型 -->
|
||||
<a-form-item
|
||||
v-if="form.deliveryType === 0"
|
||||
label="发货类型"
|
||||
name="deliveryMethod"
|
||||
>
|
||||
<a-radio-group v-model:value="form.deliveryMethod">
|
||||
<a-radio value="manual">
|
||||
<span style="color: #1890ff">手动填写</span>
|
||||
</a-radio>
|
||||
<a-radio value="print">电子面单打印</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 快递公司 -->
|
||||
<a-form-item
|
||||
label="快递公司"
|
||||
name="expressId"
|
||||
v-if="form.deliveryType === 0"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="18">
|
||||
<a-select
|
||||
v-model:value="form.expressId"
|
||||
placeholder="请选择"
|
||||
show-search
|
||||
:filter-option="filterExpressOption"
|
||||
@change="onExpressChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="express in expressList"
|
||||
:key="express.expressId"
|
||||
:value="express.expressId"
|
||||
>
|
||||
{{ express.expressName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-button type="primary" @click="openExpressModal">
|
||||
设置物流公司
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
|
||||
<template v-if="form.deliveryType !== 1">
|
||||
<a-form-item label="发货人" name="sendName">
|
||||
<a-input
|
||||
v-model:value="form.sendName"
|
||||
placeholder="请输入发货人"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发货人联系方式" name="sendPhone">
|
||||
<a-input
|
||||
v-model:value="form.sendPhone"
|
||||
placeholder="请输入发货人联系方式"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发货地址" name="sendAddress">
|
||||
<a-input
|
||||
v-model:value="form.sendAddress"
|
||||
placeholder="请输入发货地址"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 快递单号 -->
|
||||
<!-- <a-form-item-->
|
||||
<!-- label="快递单号"-->
|
||||
<!-- name="trackingNumber"-->
|
||||
<!-- v-if="form.deliveryType === 0"-->
|
||||
<!-- >-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-model:value="form.trackingNumber"-->
|
||||
<!-- placeholder="请输入快递单号"-->
|
||||
<!-- :maxlength="50"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
<!-- <!– 分单发货 –>-->
|
||||
<!-- <a-form-item label="分单发货" v-if="form.deliveryType === 0">-->
|
||||
<!-- <a-switch-->
|
||||
<!-- v-model:checked="form.partialDelivery"-->
|
||||
<!-- checked-children="支持"-->
|
||||
<!-- un-checked-children="不支持"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
<!-- 发货备注 -->
|
||||
<a-form-item label="发货备注" name="deliveryNote">
|
||||
<a-textarea
|
||||
v-model:value="form.deliveryNote"
|
||||
placeholder="请输入发货备注（可选）"
|
||||
:rows="3"
|
||||
:maxlength="200"
|
||||
show-count
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 发货时间 -->
|
||||
<a-form-item label="发货时间" name="deliveryTime">
|
||||
<a-date-picker
|
||||
v-model:value="form.deliveryTime"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择发货时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- 快递公司设置弹窗 -->
|
||||
<express-setting-modal
|
||||
v-model:visible="expressModalVisible"
|
||||
@done="loadExpressList"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { ShopOrder } from '@/api/shop/shopOrder/model';
|
||||
import { updateShopOrder } from '@/api/shop/shopOrder';
|
||||
import { listShopExpress } from '@/api/shop/shopExpress';
|
||||
import { ShopExpress } from '@/api/shop/shopExpress/model';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import ExpressSettingModal from './expressSettingModal.vue';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
data?: ShopOrder | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
deliveryType: 0, // 0快递配送 1无需发货 2商家送货
|
||||
deliveryMethod: 'manual', // manual手动填写 print电子面单打印
|
||||
expressId: undefined as number | undefined,
|
||||
expressName: '',
|
||||
trackingNumber: '',
|
||||
partialDelivery: false,
|
||||
deliveryNote: '',
|
||||
sendName: '',
|
||||
sendPhone: '',
|
||||
sendAddress: '',
|
||||
deliveryTime: dayjs() as Dayjs
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
deliveryType: [{ required: true, message: '请选择配送方式' }],
|
||||
deliveryMethod: [
|
||||
{
|
||||
validator: (_: any, value: any) => {
|
||||
if (form.deliveryType === 0 && !value) {
|
||||
return Promise.reject('请选择发货类型');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
expressId: [
|
||||
{
|
||||
validator: (_: any, value: any) => {
|
||||
if (form.deliveryType === 0 && !value) {
|
||||
return Promise.reject('请选择快递公司');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
// trackingNumber: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请输入快递单号',
|
||||
// validator: (_: any, value: any) => {
|
||||
// if (form.deliveryType === 0 && !value) {
|
||||
// return Promise.reject('请输入快递单号');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
deliveryTime: [{ required: true, message: '请选择发货时间' }],
|
||||
sendName: [
|
||||
{
|
||||
validator: (_: any, value: any) => {
|
||||
if (form.deliveryType !== 1 && !value) {
|
||||
return Promise.reject('请输入发货人');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
sendPhone: [
|
||||
{
|
||||
validator: (_: any, value: any) => {
|
||||
if (form.deliveryType !== 1 && !value) {
|
||||
return Promise.reject('请输入发货人联系方式');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
sendAddress: [
|
||||
{
|
||||
validator: (_: any, value: any) => {
|
||||
if (form.deliveryType !== 1 && !value) {
|
||||
return Promise.reject('请输入发货地址');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
const { resetFields, validate } = useForm(form, rules);
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const expressList = ref<ShopExpress[]>([]);
|
||||
const expressModalVisible = ref(false);
|
||||
|
||||
// 加载快递公司列表
|
||||
const loadExpressList = async () => {
|
||||
try {
|
||||
const data = await listShopExpress({});
|
||||
expressList.value = data || [];
|
||||
} catch (error) {
|
||||
console.error('加载快递公司失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 快递公司筛选
|
||||
const filterExpressOption = (input: string, option: any) => {
|
||||
return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
// 快递公司选择变化
|
||||
const onExpressChange = (value: number) => {
|
||||
const express = expressList.value.find((item) => item.expressId === value);
|
||||
if (express) {
|
||||
form.expressName = express.expressName || '';
|
||||
}
|
||||
};
|
||||
|
||||
// 打开快递公司设置
|
||||
const openExpressModal = () => {
|
||||
expressModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 根据配送方式重置不需要的字段
|
||||
watch(
|
||||
() => form.deliveryType,
|
||||
(type) => {
|
||||
if (type !== 0) {
|
||||
form.expressId = undefined;
|
||||
form.expressName = '';
|
||||
form.deliveryMethod = 'manual';
|
||||
}
|
||||
if (type === 1) {
|
||||
form.sendName = '';
|
||||
form.sendPhone = '';
|
||||
form.sendAddress = '';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 更新弹窗显示状态
|
||||
const updateVisible = (visible: boolean) => {
|
||||
emit('update:visible', visible);
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
updateVisible(false);
|
||||
};
|
||||
|
||||
// 提交发货
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await validate();
|
||||
loading.value = true;
|
||||
|
||||
const deliveryTime = toDateString(
|
||||
form.deliveryTime.toDate(),
|
||||
'yyyy-MM-dd HH:mm:ss'
|
||||
);
|
||||
|
||||
const updateData = {
|
||||
...props.data,
|
||||
deliveryStatus: 20, // 已发货
|
||||
deliveryType: form.deliveryType,
|
||||
deliveryTime: deliveryTime,
|
||||
deliveryNote: form.deliveryNote
|
||||
};
|
||||
|
||||
// 如果是快递配送，添加快递信息
|
||||
if (form.deliveryType === 0) {
|
||||
updateData.expressId = form.expressId;
|
||||
updateData.sendName = form.sendName;
|
||||
updateData.sendPhone = form.sendPhone;
|
||||
updateData.sendAddress = form.sendAddress;
|
||||
// updateData.expressName = form.expressName;
|
||||
// updateData.trackingNumber = form.trackingNumber;
|
||||
} else if (form.deliveryType === 2) {
|
||||
// 商家送货需要记录发货人信息，但不需要快递公司
|
||||
updateData.sendName = form.sendName;
|
||||
updateData.sendPhone = form.sendPhone;
|
||||
updateData.sendAddress = form.sendAddress;
|
||||
updateData.expressId = undefined;
|
||||
} else {
|
||||
// 无需发货，清理快递/发货信息
|
||||
updateData.expressId = undefined;
|
||||
updateData.sendName = undefined;
|
||||
updateData.sendPhone = undefined;
|
||||
updateData.sendAddress = undefined;
|
||||
}
|
||||
|
||||
// 分单发货
|
||||
if (form.partialDelivery) {
|
||||
updateData.deliveryStatus = 30;
|
||||
}
|
||||
|
||||
await updateShopOrder(updateData);
|
||||
|
||||
message.success('发货成功');
|
||||
emit('done');
|
||||
updateVisible(false);
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
message.error(error.message || '发货失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
// 重置表单
|
||||
form.deliveryType = 0;
|
||||
form.deliveryMethod = 'manual';
|
||||
form.expressId = undefined;
|
||||
form.expressName = '';
|
||||
form.trackingNumber = '';
|
||||
form.partialDelivery = false;
|
||||
form.deliveryNote = '';
|
||||
form.sendName = '';
|
||||
form.sendPhone = '';
|
||||
form.sendAddress = '';
|
||||
form.deliveryTime = dayjs();
|
||||
|
||||
// 加载快递公司列表
|
||||
loadExpressList();
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-radio-wrapper {
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
372
src/views/shop/shopOrder/components/expressSettingModal.vue
Normal file
372
src/views/shop/shopOrder/components/expressSettingModal.vue
Normal file
@@ -0,0 +1,372 @@
|
||||
<!-- 快递公司设置弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="设置物流公司"
|
||||
width="900px"
|
||||
:confirm-loading="loading"
|
||||
@update:visible="updateVisible"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="express-setting">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar" style="margin-bottom: 16px">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索快递公司名称"
|
||||
style="width: 300px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<a-button type="primary" style="margin-left: 8px" @click="openAddModal">
|
||||
添加快递公司
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 快递公司列表 -->
|
||||
<a-table
|
||||
:data-source="filteredExpressList"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 400 }"
|
||||
row-key="expressId"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-switch
|
||||
v-model:checked="record.enabled"
|
||||
checked-children="启用"
|
||||
un-checked-children="禁用"
|
||||
@change="handleStatusChange(record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="editExpress(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此快递公司吗？"
|
||||
@confirm="deleteExpress(record)"
|
||||
>
|
||||
<a class="text-red-500">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑快递公司弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="addModalVisible"
|
||||
:title="editingExpress ? '编辑快递公司' : '添加快递公司'"
|
||||
width="500px"
|
||||
:confirm-loading="addLoading"
|
||||
@ok="handleAddSubmit"
|
||||
@cancel="handleAddCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="addFormRef"
|
||||
:model="addForm"
|
||||
:rules="addRules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
>
|
||||
<a-form-item label="快递公司名称" name="expressName">
|
||||
<a-input
|
||||
v-model:value="addForm.expressName"
|
||||
placeholder="请输入快递公司名称"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="微信编码" name="wxCode">
|
||||
<a-input
|
||||
v-model:value="addForm.wxCode"
|
||||
placeholder="请输入微信快递编码（可选）"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="快递100编码" name="kuaidi100Code">
|
||||
<a-input
|
||||
v-model:value="addForm.kuaidi100Code"
|
||||
placeholder="请输入快递100编码（可选）"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="快递鸟编码" name="kdniaoCode">
|
||||
<a-input
|
||||
v-model:value="addForm.kdniaoCode"
|
||||
placeholder="请输入快递鸟编码（可选）"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="排序号" name="sortNumber">
|
||||
<a-input-number
|
||||
v-model:value="addForm.sortNumber"
|
||||
placeholder="数字越小越靠前"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { ShopExpress } from '@/api/shop/shopExpress/model';
|
||||
import {
|
||||
listShopExpress,
|
||||
addShopExpress,
|
||||
updateShopExpress,
|
||||
removeShopExpress
|
||||
} from '@/api/shop/shopExpress';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const searchKeyword = ref('');
|
||||
const expressList = ref<ShopExpress[]>([]);
|
||||
const addModalVisible = ref(false);
|
||||
const addLoading = ref(false);
|
||||
const editingExpress = ref<ShopExpress | null>(null);
|
||||
|
||||
// 添加表单
|
||||
const addForm = reactive({
|
||||
expressName: '',
|
||||
wxCode: '',
|
||||
kuaidi100Code: '',
|
||||
kdniaoCode: '',
|
||||
sortNumber: 0
|
||||
});
|
||||
|
||||
const addRules = {
|
||||
expressName: [
|
||||
{ required: true, message: '请输入快递公司名称' },
|
||||
{ min: 2, max: 50, message: '快递公司名称长度为2-50个字符' }
|
||||
]
|
||||
};
|
||||
|
||||
const addFormRef = ref();
|
||||
const { resetFields: resetAddFields, validate: validateAdd } = useForm(
|
||||
addForm,
|
||||
addRules
|
||||
);
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '快递公司名称',
|
||||
dataIndex: 'expressName',
|
||||
key: 'expressName',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '微信编码',
|
||||
dataIndex: 'wxCode',
|
||||
key: 'wxCode',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '快递100编码',
|
||||
dataIndex: 'kuaidi100Code',
|
||||
key: 'kuaidi100Code',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '快递鸟编码',
|
||||
dataIndex: 'kdniaoCode',
|
||||
key: 'kdniaoCode',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
// 过滤后的快递公司列表
|
||||
const filteredExpressList = computed(() => {
|
||||
if (!searchKeyword.value) {
|
||||
return expressList.value;
|
||||
}
|
||||
return expressList.value.filter((item) =>
|
||||
item.expressName
|
||||
?.toLowerCase()
|
||||
.includes(searchKeyword.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
// 加载快递公司列表
|
||||
const loadExpressList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const data = await listShopExpress({});
|
||||
expressList.value = (data || []).map((item) => ({
|
||||
...item,
|
||||
enabled: item.deleted === 0 // 假设deleted=0表示启用
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('加载快递公司失败:', error);
|
||||
message.error('加载快递公司失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
// 搜索逻辑已在computed中处理
|
||||
};
|
||||
|
||||
// 状态变化
|
||||
const handleStatusChange = async (
|
||||
record: ShopExpress & { enabled: boolean }
|
||||
) => {
|
||||
try {
|
||||
await updateShopExpress({
|
||||
...record,
|
||||
deleted: record.enabled ? 0 : 1
|
||||
});
|
||||
message.success(record.enabled ? '已启用' : '已禁用');
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '操作失败');
|
||||
// 恢复状态
|
||||
record.enabled = !record.enabled;
|
||||
}
|
||||
};
|
||||
|
||||
// 打开添加弹窗
|
||||
const openAddModal = () => {
|
||||
editingExpress.value = null;
|
||||
resetAddFields();
|
||||
addModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑快递公司
|
||||
const editExpress = (record: ShopExpress) => {
|
||||
editingExpress.value = record;
|
||||
addForm.expressName = record.expressName || '';
|
||||
addForm.wxCode = record.wxCode || '';
|
||||
addForm.kuaidi100Code = record.kuaidi100Code || '';
|
||||
addForm.kdniaoCode = record.kdniaoCode || '';
|
||||
addForm.sortNumber = record.sortNumber || 0;
|
||||
addModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除快递公司
|
||||
const deleteExpress = async (record: ShopExpress) => {
|
||||
try {
|
||||
if (record.expressId) {
|
||||
await removeShopExpress(record.expressId);
|
||||
message.success('删除成功');
|
||||
loadExpressList();
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 添加/编辑提交
|
||||
const handleAddSubmit = async () => {
|
||||
try {
|
||||
await validateAdd();
|
||||
addLoading.value = true;
|
||||
|
||||
if (editingExpress.value) {
|
||||
// 编辑
|
||||
await updateShopExpress({
|
||||
...editingExpress.value,
|
||||
...addForm
|
||||
});
|
||||
message.success('编辑成功');
|
||||
} else {
|
||||
// 添加
|
||||
await addShopExpress(addForm);
|
||||
message.success('添加成功');
|
||||
}
|
||||
|
||||
addModalVisible.value = false;
|
||||
loadExpressList();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '操作失败');
|
||||
} finally {
|
||||
addLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 取消添加/编辑
|
||||
const handleAddCancel = () => {
|
||||
addModalVisible.value = false;
|
||||
resetAddFields();
|
||||
};
|
||||
|
||||
// 更新弹窗显示状态
|
||||
const updateVisible = (visible: boolean) => {
|
||||
emit('update:visible', visible);
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
updateVisible(false);
|
||||
};
|
||||
|
||||
// 确定
|
||||
const handleSubmit = () => {
|
||||
emit('done');
|
||||
updateVisible(false);
|
||||
};
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
loadExpressList();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.express-setting {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
1113
src/views/shop/shopOrder/components/orderInfo.vue
Normal file
1113
src/views/shop/shopOrder/components/orderInfo.vue
Normal file
File diff suppressed because it is too large
Load Diff
265
src/views/shop/shopOrder/components/search.vue
Normal file
265
src/views/shop/shopOrder/components/search.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<!-- <a-button-->
|
||||
<!-- danger-->
|
||||
<!-- type="primary"-->
|
||||
<!-- class="ele-btn-icon"-->
|
||||
<!-- :disabled="selection?.length === 0"-->
|
||||
<!-- @click="removeBatch"-->
|
||||
<!-- >-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <DeleteOutlined/>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>批量删除</span>-->
|
||||
<!-- </a-button>-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="where.orderNo"
|
||||
placeholder="订单编号"
|
||||
style="width: 240px"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
<a-select
|
||||
v-model:value="where.type"
|
||||
style="width: 150px"
|
||||
placeholder="订单类型"
|
||||
@change="search"
|
||||
>
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="1">普通订单</a-select-option>
|
||||
<a-select-option :value="2">秒杀订单</a-select-option>
|
||||
<a-select-option :value="3">拼团订单</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model:value="where.payStatus"
|
||||
style="width: 150px"
|
||||
placeholder="付款状态"
|
||||
@change="search"
|
||||
>
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="1">已付款</a-select-option>
|
||||
<a-select-option :value="0">未付款</a-select-option>
|
||||
</a-select>
|
||||
<!-- <a-select-->
|
||||
<!-- v-model:value="where.orderStatus"-->
|
||||
<!-- style="width: 150px"-->
|
||||
<!-- placeholder="订单状态"-->
|
||||
<!-- @change="search"-->
|
||||
<!-- >-->
|
||||
<!-- <a-select-option value="">全部</a-select-option>-->
|
||||
<!-- <a-select-option :value="1">已完成</a-select-option>-->
|
||||
<!-- <a-select-option :value="0">未完成</a-select-option>-->
|
||||
<!-- <a-select-option :value="2">未使用</a-select-option>-->
|
||||
<!-- <a-select-option :value="3">已取消</a-select-option>-->
|
||||
<!-- <a-select-option :value="4">退款中</a-select-option>-->
|
||||
<!-- <a-select-option :value="5">退款被拒</a-select-option>-->
|
||||
<!-- <a-select-option :value="6">退款成功</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<a-select
|
||||
:options="getPayType()"
|
||||
v-model:value="where.payType"
|
||||
style="width: 150px"
|
||||
placeholder="付款方式"
|
||||
@change="search"
|
||||
/>
|
||||
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
:placeholder="getSearchPlaceholder()"
|
||||
style="width: 320px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="type" style="width: 88px" @change="onType">
|
||||
<a-select-option value="">不限</a-select-option>
|
||||
<a-select-option value="userId"> 用户ID </a-select-option>
|
||||
<a-select-option value="phone"> 手机号 </a-select-option>
|
||||
<a-select-option value="nickname"> 昵称 </a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a-button @click="handleExport">导出</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { message } from 'ant-design-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model';
|
||||
import { listShopOrder } from '@/api/shop/shopOrder';
|
||||
import { getPayType } from '@/utils/shop';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的订单
|
||||
selection?: ShopOrder[];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: ShopOrderParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<ShopOrderParam>({
|
||||
keywords: '',
|
||||
orderId: undefined,
|
||||
orderNo: undefined,
|
||||
createTimeStart: undefined,
|
||||
createTimeEnd: undefined,
|
||||
userId: undefined,
|
||||
payUserId: undefined,
|
||||
nickname: undefined,
|
||||
phone: undefined,
|
||||
payStatus: undefined,
|
||||
orderStatus: undefined,
|
||||
payType: undefined
|
||||
});
|
||||
|
||||
const reload = () => {
|
||||
emit('search', {
|
||||
...where,
|
||||
keywords: type.value == '' ? where.keywords : undefined
|
||||
});
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
// const removeBatch = () => {
|
||||
// emit('remove');
|
||||
// };
|
||||
|
||||
const onType = () => {
|
||||
resetFields();
|
||||
};
|
||||
|
||||
// 获取搜索框placeholder
|
||||
const getSearchPlaceholder = () => {
|
||||
switch (type.value) {
|
||||
case 'userId':
|
||||
where.userId = Number(where.keywords);
|
||||
return '请输入用户ID';
|
||||
case 'phone':
|
||||
where.phone = where.keywords;
|
||||
return '请输入手机号';
|
||||
case 'nickname':
|
||||
where.nickname = where.keywords;
|
||||
return '请输入用户昵称';
|
||||
default:
|
||||
return '请输入搜索内容';
|
||||
}
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
xlsFileName.value = `${d1}至${d2}`;
|
||||
where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
|
||||
where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
|
||||
emit('search', {
|
||||
...where
|
||||
});
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
// 变量
|
||||
const loading = ref(false);
|
||||
const orders = ref<ShopOrder[]>([]);
|
||||
const xlsFileName = ref<string>();
|
||||
const type = ref('');
|
||||
|
||||
// 导出
|
||||
const handleExport = async () => {
|
||||
loading.value = true;
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'订单编号',
|
||||
'订单标题',
|
||||
'买家姓名',
|
||||
'手机号码',
|
||||
'实付金额(元)',
|
||||
'支付方式',
|
||||
'付款时间',
|
||||
'下单时间'
|
||||
]
|
||||
];
|
||||
|
||||
await listShopOrder(where)
|
||||
.then((list) => {
|
||||
orders.value = list;
|
||||
list?.forEach((d: ShopOrder) => {
|
||||
array.push([
|
||||
`${d.orderNo}`,
|
||||
`${d.comments}`,
|
||||
`${d.realName}`,
|
||||
`${d.phone}`,
|
||||
`${d.payPrice}`,
|
||||
`${getPayType(d.payType)}`,
|
||||
`${d.payTime || ''}`,
|
||||
`${d.createTime}`
|
||||
]);
|
||||
});
|
||||
const sheetName = `订单数据`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 40 },
|
||||
{ wch: 20 },
|
||||
{ wch: 20 },
|
||||
{ wch: 60 },
|
||||
{ wch: 15 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 }
|
||||
];
|
||||
message.loading('正在导出...');
|
||||
setTimeout(() => {
|
||||
writeFile(
|
||||
workbook,
|
||||
`${
|
||||
where.createTimeEnd ? xlsFileName.value + '_' : ''
|
||||
}${sheetName}.xlsx`
|
||||
);
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((msg) => {
|
||||
message.error(msg);
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
726
src/views/shop/shopOrder/index.vue
Normal file
726
src/views/shop/shopOrder/index.vue
Normal file
@@ -0,0 +1,726 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card style="margin-bottom: 20px">
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</a-card>
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs">
|
||||
<a-tab-pane key="all" tab="全部" />
|
||||
<a-tab-pane key="unpaid" tab="待付款" />
|
||||
<a-tab-pane key="undelivered" tab="待发货" />
|
||||
<a-tab-pane key="unreceived" tab="待收货" />
|
||||
<a-tab-pane key="completed" tab="已完成" />
|
||||
<a-tab-pane key="refunded" tab="退货/售后" />
|
||||
<a-tab-pane key="cancelled" tab="已关闭" />
|
||||
</a-tabs>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="orderId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:toolbar="false"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar> </template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<div @click="onSearch(record)" class="cursor-pointer">{{
|
||||
record.name || '匿名'
|
||||
}}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'orderGoods'">
|
||||
<template v-for="(item, index) in record.orderGoods" :key="index">
|
||||
<div class="item py-1">
|
||||
<a-space :id="`g-${index}`">
|
||||
<a-avatar :src="item.image" shape="square" />
|
||||
<span>{{ item.goodsName }}</span>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'phone'">
|
||||
<div v-if="record.mobile" class="text-gray-400">{{
|
||||
record.mobile
|
||||
}}</div>
|
||||
<div v-else class="text-gray-600">{{ record.phone }}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'payType'">
|
||||
<template v-for="item in getPayType()">
|
||||
<template v-if="record.payStatus == 1">
|
||||
<span v-if="item.value == record.payType">{{
|
||||
item.label
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span></span>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'payStatus'">
|
||||
<a-tag
|
||||
v-if="record.payStatus"
|
||||
color="green"
|
||||
@click.stop="updatePayStatus(record)"
|
||||
class="cursor-pointer"
|
||||
>已付款
|
||||
</a-tag>
|
||||
<a-tag
|
||||
v-if="!record.payStatus"
|
||||
@click.stop="updatePayStatus(record)"
|
||||
class="cursor-pointer"
|
||||
>未付款
|
||||
</a-tag>
|
||||
<a-tag v-if="record.payStatus == 3">未付款,占场中</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'sex'">
|
||||
<a-tag v-if="record.sex === 1">男</a-tag>
|
||||
<a-tag v-if="record.sex === 2">女</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'deliveryStatus'">
|
||||
<a-tag v-if="record.deliveryStatus == 10">未发货</a-tag>
|
||||
<a-tag v-if="record.deliveryStatus == 20" color="green"
|
||||
>已发货</a-tag
|
||||
>
|
||||
<a-tag v-if="record.deliveryStatus == 30" color="blue"
|
||||
>部分发货</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'orderStatus'">
|
||||
<a-tag v-if="record.orderStatus === 0">未完成</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 1" color="green">已完成</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 2">已关闭</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 3" color="red">关闭中</a-tag>
|
||||
<a-tag v-if="record.orderStatus === 4" color="red"
|
||||
>退款申请中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 5" color="red"
|
||||
>退款被拒绝</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 6" color="orange"
|
||||
>退款成功</a-tag
|
||||
>
|
||||
<a-tag v-if="record.orderStatus === 7" color="pink"
|
||||
>客户端申请退款</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'isInvoice'">
|
||||
<a-tag v-if="record.isInvoice == 0">未开具</a-tag>
|
||||
<a-tag v-if="record.isInvoice == 1" color="green">已开具</a-tag>
|
||||
<a-tag v-if="record.isInvoice == 2" color="blue">不能开具</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<!-- 查看详情 - 所有状态都可以查看 -->
|
||||
<a @click.stop="openEdit(record)"> <EyeOutlined /> 详情 </a>
|
||||
|
||||
<!-- 未付款状态的操作 -->
|
||||
<template v-if="!record.payStatus && record.orderStatus === 0">
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleEditOrder(record)">
|
||||
<EditOutlined /> 修改
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleCancelOrder(record)">
|
||||
<span class="ele-text-warning"> <CloseOutlined /> 关闭 </span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 已付款未发货状态的操作 -->
|
||||
<template
|
||||
v-if="
|
||||
record.payStatus &&
|
||||
record.deliveryStatus === 10 &&
|
||||
!isCancelledStatus(record.orderStatus)
|
||||
"
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleDelivery(record)" class="ele-text-primary">
|
||||
<SendOutlined /> 发货
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 退款
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 已发货未完成状态的操作 -->
|
||||
<template
|
||||
v-if="
|
||||
record.payStatus &&
|
||||
record.deliveryStatus === 20 &&
|
||||
record.orderStatus === 0
|
||||
"
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleConfirmReceive(record)"
|
||||
class="ele-text-primary"
|
||||
>
|
||||
<CheckOutlined /> 确认收货
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 退款
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 退款相关状态的操作 -->
|
||||
<template v-if="isRefundStatus(record.orderStatus)">
|
||||
<template
|
||||
v-if="record.orderStatus === 4 || record.orderStatus === 7"
|
||||
>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleApproveRefund(record)"
|
||||
class="ele-text-success"
|
||||
>
|
||||
<CheckCircleOutlined /> 同意退款
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
@click.stop="handleRejectRefund(record)"
|
||||
class="ele-text-danger"
|
||||
>
|
||||
<CloseCircleOutlined /> 拒绝退款
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template v-if="record.orderStatus === 5">
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleRetryRefund(record)">
|
||||
<RedoOutlined /> 重新处理
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 已完成状态的操作 -->
|
||||
<template v-if="record.orderStatus === 1">
|
||||
<a-divider type="vertical" />
|
||||
<a @click.stop="handleApplyRefund(record)">
|
||||
<UndoOutlined /> 申请退款
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 删除操作 - 已完成、已关闭、退款成功的订单可以删除 -->
|
||||
<template v-if="canDeleteOrder(record)">
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此订单吗？删除后无法恢复。"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger" @click.stop>
|
||||
<DeleteOutlined /> 删除
|
||||
</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<OrderInfo v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
|
||||
<!-- 发货弹窗 -->
|
||||
<DeliveryModal
|
||||
v-model:visible="showDelivery"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import {
|
||||
ExclamationCircleOutlined,
|
||||
EyeOutlined,
|
||||
EditOutlined,
|
||||
CloseOutlined,
|
||||
SendOutlined,
|
||||
UndoOutlined,
|
||||
CheckOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
RedoOutlined,
|
||||
DeleteOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import Search from './components/search.vue';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import OrderInfo from './components/orderInfo.vue';
|
||||
import DeliveryModal from './components/deliveryModal.vue';
|
||||
import { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model';
|
||||
import {
|
||||
pageShopOrder,
|
||||
repairOrder,
|
||||
removeShopOrder,
|
||||
removeBatchShopOrder,
|
||||
updateShopOrder
|
||||
} from '@/api/shop/shopOrder';
|
||||
import { updateUser } from '@/api/system/user';
|
||||
import { getPayType } from '@/utils/shop';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<ShopOrder[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<ShopOrder | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 是否显示发货弹窗
|
||||
const showDelivery = ref(false);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
// 激活的标签
|
||||
const activeKey = ref<string>('all');
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
where.type = 0;
|
||||
return pageShopOrder({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '订单编号',
|
||||
dataIndex: 'orderNo',
|
||||
key: 'orderNo',
|
||||
align: 'center',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '商品信息',
|
||||
dataIndex: 'orderGoods',
|
||||
key: 'orderGoods',
|
||||
width: 360
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
dataIndex: 'payPrice',
|
||||
key: 'payPrice',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => '￥' + text
|
||||
},
|
||||
{
|
||||
title: '支付方式',
|
||||
dataIndex: 'payType',
|
||||
key: 'payType',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '支付状态',
|
||||
dataIndex: 'payStatus',
|
||||
key: 'payStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '发货状态',
|
||||
dataIndex: 'deliveryStatus',
|
||||
key: 'deliveryStatus',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '开票状态',
|
||||
dataIndex: 'isInvoice',
|
||||
key: 'isInvoice',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'orderStatus',
|
||||
key: 'orderStatus',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '备注',
|
||||
// dataIndex: 'comments',
|
||||
// key: 'comments',
|
||||
// align: 'center',
|
||||
// },
|
||||
// {
|
||||
// title: '支付时间',
|
||||
// dataIndex: 'payTime',
|
||||
// key: 'payTime',
|
||||
// align: 'center',
|
||||
// width: 180,
|
||||
// sorter: true,
|
||||
// ellipsis: true
|
||||
// },
|
||||
{
|
||||
title: '下单时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 280,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: ShopOrderParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
const onTabs = () => {
|
||||
// 使用statusFilter进行筛选，这是后端专门为订单状态筛选设计的字段
|
||||
const filterParams: Record<string, any> = {};
|
||||
|
||||
// 根据后端 statusFilter 的值对应：
|
||||
// undefined全部，0待付款，1待发货，2待核销，3待收货，4待评价，5已完成，6已退款，7已删除
|
||||
switch (activeKey.value) {
|
||||
case 'all':
|
||||
// 全部订单：不传statusFilter参数
|
||||
// filterParams.statusFilter = undefined; // 不设置该字段
|
||||
break;
|
||||
case 'unpaid':
|
||||
// 待付款：pay_status = false
|
||||
filterParams.statusFilter = 0;
|
||||
break;
|
||||
case 'undelivered':
|
||||
// 待发货：pay_status = true AND delivery_status = 10
|
||||
filterParams.statusFilter = 1;
|
||||
break;
|
||||
case 'unverified':
|
||||
// 待核销：pay_status = true AND delivery_status = 10 (与待发货相同)
|
||||
filterParams.statusFilter = 2;
|
||||
break;
|
||||
case 'unreceived':
|
||||
// 待收货：pay_status = true AND delivery_status = 20
|
||||
filterParams.statusFilter = 3;
|
||||
break;
|
||||
case 'unevaluated':
|
||||
// 待评价：order_status = 1 (与已完成相同)
|
||||
filterParams.statusFilter = 4;
|
||||
break;
|
||||
case 'completed':
|
||||
// 已完成：order_status = 1
|
||||
filterParams.statusFilter = 5;
|
||||
break;
|
||||
case 'cancelled':
|
||||
// 已关闭：order_status = 2
|
||||
filterParams.statusFilter = 8;
|
||||
break;
|
||||
case 'refunded':
|
||||
// 退款/售后：order_status = 6
|
||||
filterParams.statusFilter = 6;
|
||||
break;
|
||||
case 'deleted':
|
||||
// 已删除：deleted = 1
|
||||
filterParams.statusFilter = 7;
|
||||
break;
|
||||
}
|
||||
|
||||
reload(filterParams);
|
||||
};
|
||||
|
||||
const onSearch = (item: ShopOrder) => {
|
||||
reload({ userId: item.userId });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: ShopOrder) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 修复订单支付状态
|
||||
*/
|
||||
const updatePayStatus = (record: ShopOrder) => {
|
||||
// 修复订单数据
|
||||
repairOrder({
|
||||
...record
|
||||
}).then(() => {
|
||||
if (!record.realName) {
|
||||
// 更新用户真实姓名
|
||||
updateUser({
|
||||
userId: record.userId,
|
||||
realName: record.realName
|
||||
}).then(() => {});
|
||||
}
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 辅助判断函数 */
|
||||
// 判断是否为关闭状态
|
||||
const isCancelledStatus = (orderStatus?: number) => {
|
||||
return [2, 3].includes(orderStatus || 0);
|
||||
};
|
||||
|
||||
// 判断是否为退款相关状态
|
||||
const isRefundStatus = (orderStatus?: number) => {
|
||||
return [4, 5, 6, 7].includes(orderStatus || 0);
|
||||
};
|
||||
|
||||
// 判断是否可以删除订单
|
||||
const canDeleteOrder = (order: ShopOrder) => {
|
||||
// 已完成、已关闭、退款成功的订单可以删除 （原来是[1, 2, 6],后面改成只有关闭的订单能删除）
|
||||
return [2].includes(order.orderStatus || 0);
|
||||
};
|
||||
|
||||
/* 订单操作方法 */
|
||||
// 修改订单
|
||||
const handleEditOrder = (record: ShopOrder) => {
|
||||
message.info('订单修改功能开发中...');
|
||||
// TODO: 实现订单修改功能
|
||||
};
|
||||
|
||||
// 关闭订单
|
||||
const handleCancelOrder = (record: ShopOrder) => {
|
||||
Modal.confirm({
|
||||
title: '确认关闭订单',
|
||||
content: '确定要关闭此订单吗？关闭后无法恢复。',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await updateShopOrder({
|
||||
...record,
|
||||
orderStatus: 2 // 已关闭
|
||||
});
|
||||
message.success('订单已关闭');
|
||||
reload();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '关闭订单失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 发货处理
|
||||
const handleDelivery = (record: ShopOrder) => {
|
||||
current.value = record;
|
||||
showDelivery.value = true;
|
||||
};
|
||||
|
||||
// 确认收货
|
||||
const handleConfirmReceive = (record: ShopOrder) => {
|
||||
Modal.confirm({
|
||||
title: '确认收货',
|
||||
content: '确定要将此订单标记为已收货并完成吗？',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await updateShopOrder({
|
||||
...record,
|
||||
deliveryStatus: 30, // 已收货
|
||||
orderStatus: 1 // 已完成
|
||||
});
|
||||
message.success('确认收货成功');
|
||||
reload();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '确认收货失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 同意退款
|
||||
const handleApproveRefund = (record: ShopOrder) => {
|
||||
Modal.confirm({
|
||||
title: '同意退款',
|
||||
content: '确定要同意此订单的退款申请吗？',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const now = new Date();
|
||||
const refundTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss');
|
||||
|
||||
await updateShopOrder({
|
||||
...record,
|
||||
orderStatus: 6, // 退款成功
|
||||
refundTime: refundTime
|
||||
});
|
||||
message.success('退款处理成功');
|
||||
reload();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '退款处理失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 拒绝退款
|
||||
const handleRejectRefund = (record: ShopOrder) => {
|
||||
Modal.confirm({
|
||||
title: '拒绝退款',
|
||||
content: '确定要拒绝此订单的退款申请吗？',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await updateShopOrder({
|
||||
...record,
|
||||
orderStatus: 5 // 退款被拒绝
|
||||
});
|
||||
message.success('已拒绝退款申请');
|
||||
reload();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '操作失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 重新处理退款
|
||||
const handleRetryRefund = (record: ShopOrder) => {
|
||||
Modal.confirm({
|
||||
title: '重新处理退款',
|
||||
content: '确定要重新处理此订单的退款吗？',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await updateShopOrder({
|
||||
...record,
|
||||
orderStatus: 4 // 退款申请中
|
||||
});
|
||||
message.success('已重新提交退款申请');
|
||||
reload();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '操作失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 申请退款
|
||||
const handleApplyRefund = (record: ShopOrder) => {
|
||||
Modal.confirm({
|
||||
title: '申请退款',
|
||||
content: '确定要为此订单申请退款吗？',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const now = new Date();
|
||||
const refundApplyTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss');
|
||||
|
||||
await updateShopOrder({
|
||||
...record,
|
||||
orderStatus: 4, // 退款申请中
|
||||
refundApplyTime: refundApplyTime
|
||||
});
|
||||
message.success('退款申请已提交');
|
||||
reload();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '申请退款失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个订单 */
|
||||
const remove = (row: ShopOrder) => {
|
||||
removeShopOrder(row.orderId)
|
||||
.then(() => {
|
||||
message.success('删除成功');
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除订单 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const ids = selection.value.map((d) => d.orderId);
|
||||
removeBatchShopOrder(ids)
|
||||
.then(() => {
|
||||
message.success('删除成功');
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: ShopOrder) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
openEdit(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
// openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as MenuIcons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
name: 'BszxOrder',
|
||||
components: MenuIcons
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user