@@ -5,12 +5,12 @@
<!-- 表格 -- >
< ele-pro-table
ref = "tableRef"
row -key = " orderId "
row -key = " id "
:columns = "columns"
:datasource = "datasource"
v -model :selection = "selection"
tool -class = " ele -toolbar -form "
: scroll = "{ x: 20 00 }"
: scroll = "{ x: 18 00 }"
class = "sys-org-table"
:striped = "true"
>
@@ -18,189 +18,50 @@
< search
@search ="reload"
:selection = "selection"
@add ="openEdit"
@remove ="removeBatch"
@advanced ="openAdvanced"
/ >
< / template >
< template # bodyCell = "{ column, record }" >
< template v-if = "column.key === 'o rderName '" >
< a -tooltip title = "查看详情 " >
< a href = "#" @click ="openInfo(record)" > {{ record.orderName }} < / a >
< template v-if = "column.key === 'rentO rderNo '" >
< a -tooltip : title = "record.rentOrderNo || record.rentOrderId " >
< span > { { record . rentOrderNo || ( '#' + record . rentOrderId ) } } < / span >
< / a-tooltip >
< / template >
< template v-if = "column.key === 'merchantName'" >
< div style = "display: flex; flex-direction: column " >
< span > { { record . merchantName } } < / span >
< span class = "ele-text-placeholder" >
{ { record . merchantCode } }
< / span >
< / div >
< template v-if = "column.key === 'servicePeriod' " >
< div > { { record . startTime } } < / div >
< div class = "ele-text-placeholder" > 至 { { record . expirationTime } } < / div >
< / template >
< template v-if = "column.key === 'payPrice'" >
< p >
< span class = "ele-text-warning price-edit" >
￥ { { record . payPrice } }
< / span >
< form-outlined
v-if = "record.payStatus === 10"
@click ="onEdit('payPrice', record.payPrice, record)"
/ > < / p >
< p class = "ele-text-placeholder"
> ( 含运费 ： ￥ { { record . expressPrice } } ) < / p
>
< / template >
< template v-if = "column.key === 'goods'" >
< template v-if = "record.equipment" >
< p class = "ele-text" > { { record . equipment . equipmentName } } < / p >
< p class = "ele-text" > { { record . equipment . batteryModel } } < / p >
< p class = "ele-text" > { { record . equipment . equipmentCode } } < / p >
< / template >
< / template >
< template v-if = "column.key === 'payMethod'" >
< a -tag v-if = "record.payMethod === '10'" color="orange"
> 余额支付 < / a - t a g
>
< a-tag v-if = "record.payMethod === '20'" color="green"
> 微信支付 < / a - t a g
>
< a-tag v-if = "record.payMethod === '30'" color="blue"
> 支付宝 < / a - t a g
>
< a-tag v-if = "record.payMethod === '40'" color="purple"
> 通联支付 < / a - t a g
>
< / template >
< template v-if = "column.key === 'deliveryType'" >
< span v-if = "record.deliveryType === 10" > 快递配送 < / span >
< span v-if = "record.deliveryType === 20" > 门店自提 < / span >
< template v-if = "column.key === 'validity'" >
< span class = "ele-text-danger" > { { calcValidity ( record ) } } < / span >
< / template >
< template v-if = "column.key === 'payStatus'" >
< div class = "ele-text-placeholder" >
付款状态 ：
< a-tag
v-if = "record.payStatus === 10"
@click ="onAlipayQuery(record.orderId)"
> 未付款 < / a - t a g
>
< a-tag v-if = "record.payStatus === 20" color="green"
> 已付款 < / a - t a g
>
< / div >
< div class = "ele-text-placeholder" >
发货状态 ：
< a-tag v-if = "record.deliveryStatus === 10" > 未发货 < / a -tag >
< a-tag v-if = "record.deliveryStatus === 20" color="success"
> 已发货 < / a - t a g
>
< / div >
< div class = "ele-text-placeholder" >
收货状态 ：
< a-tag v-if = "record.receiptStatus === 10" > 未收货 < / a -tag >
< a-tag v-if = "record.receiptStatus === 20" color="success"
> 已收货 < / a - t a g
>
< / div >
< a -tag v-if = "record.payStatus === 20" color="green" > 已付款 < / a -tag >
< a-tag v-else color = "red" > 未付款 < / a-tag >
< / template >
< template v-if = "column.key === 'orderSourceData'" >
< a -image -preview -group v-if = "record.orderSourceData " >
< a -image
:width = "45"
v-for = "item in JSON.parse(record.orderSourceData)"
:src = "item"
/ >
< / a-image-preview-group >
<!-- < a-image-- >
<!-- v - if = "record.orderSourceData" -- >
<!-- : src = "JSON.parse(record.orderSourceData)" -- >
<!-- : width = "45" -- >
<!-- / > - - >
< / 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 === 'orderSource'" >
< a -tag v-if = "Number(record.orderSource) === 10" color="success"
> 销售 < / a - t a g
>
< a-tag v-if = "Number(record.orderSource) === 20" color="red"
> 分期 < / a - t a g
>
< a-tag v-if = "Number(record.orderSource) === 30" color="orange"
> 以租代购 < / a - t a g
>
< a-tag v-if = "Number(record.orderSource) === 40" color="blue"
> 租赁 < / a - t a g
>
< / template >
< template v-if = "column.key === 'nickname'" >
< a -tooltip :title = "`用户ID： >
< a-avatar :src = "record.avatar" size = "small" / >
< span style = "padding-left: 4px" > { { record . nickname } } < / span >
< / a-tooltip >
< template v-if = "column.key === 'isAdminRenew' " >
< a -tag v-if = "record.isAdminRenew === 1" color="blue" > 后台续费 < / a -tag >
< a-tag v-else > 用户续费 < / a -tag >
< / template >
< template v-if = "column.key === 'createTime'" >
{{ record.createTime }}
< / template >
< template v-if = "column.key === 'action'" >
< a -space >
< a-button
@click ="openDelivery(record)"
v-if ="
record.orderStatus === 10 &&
record.payStatus === 20 &&
record.deliveryStatus === 10
"
>发货</a-button
>
<!-- <a-divider type="vertical" />-->
<!-- <a-popconfirm-->
<!-- title="确定要删除此记录吗？"-->
<!-- @confirm="remove(record)"-->
<!-- >-->
<!-- <a class="ele-text-danger">删除</a>-->
<!-- </a-popconfirm>-->
</a-space>
</template>
< / template >
< / ele -pro -table >
< / a-card >
< / div >
<!-- 编辑弹窗 -->
<Delivery v-model:visible="deliveryEdit" :data="current" @done="reload" />
<Markdown
v-model:visible="showMarkdown"
:data="data"
:field="field"
:orderId="orderId"
:content="markdown"
@done="reload"
/>
<Field
v-model:visible="showEdit"
:data="data"
:field="field"
:orderId="orderId"
:content="content"
@done="reload"
/>
<!-- 编辑弹窗 -->
<!-- <order-edit v-model:visible="showEdit" :data="current" @done="reload" />-->
<!-- 用户详情 -->
<!-- <order-info v-model:visible="showInfo" :data="current" @done="reload" />-->
< / div >
< / template >
< script lang = "ts" setup >
import { createVNode , ref } from 'vue' ;
import { message , Modal } from 'ant-design-vue' ;
import {
// PlusOutlined,
// DeleteOutlined,
FormOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue' ;
import type { EleProTable } from 'ele-admin-pro' ;
import type {
DatasourceFunction ,
@@ -208,22 +69,9 @@
} from 'ele-admin-pro/es/ele-pro-table/types' ;
import { toDateString } from 'ele-admin-pro' ;
import Search from './components/search.vue' ;
import Delivery from './components/delivery.vue';
import Markdown from './components/markdown.vue';
import Field from './components/field.vue';
// import OrderEdit from './components/order-edit.vue';
// import OrderInfo from './components/order-info.vue';
import { pageOrder, removeOrder, removeBatchOrder } from '@/api/order';
import { alipayQuery } from '@/api/system/payment';
import type { Order, OrderParam } from '@/api/order/model';
import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// import { getDictionaryOptions } from '@/utils/common';
import { pageOrderPay } from '@/api/order' ;
import type { OrderPay , OrderPayParam } from '@/api/order/model' ;
// 当前用户信息
// const userStore = useUserStore();
// const loginUser = computed(() => userStore.info ?? {});
// const orderType = localStorage.getItem('orderType');
const props = defineProps < {
activeKey ? : boolean ;
data ? : any ;
@@ -232,31 +80,43 @@
// 表格实例
const tableRef = ref < InstanceType < typeof EleProTable > | null > ( null ) ;
/* 获取字典数据 */
const orderSource = getDictionaryOptions('equipmentCategory');
// 续费有效期（按服务起止时间计算，固定为续费时长，避免“多给一个月”的观感）
const calcValidity = ( record : OrderPay ) => {
if ( ! record . startTime || ! record . expirationTime ) {
return '-' ;
}
const start = new Date ( record . startTime ) . getTime ( ) ;
const end = new Date ( record . expirationTime ) . getTime ( ) ;
const days = Math . round ( ( end - start ) / ( 24 * 60 * 60 * 1000 ) ) ;
if ( days < 0 ) {
return '异常' ;
}
return days + '天' ;
} ;
// 表格列配置
const columns = ref < ColumnItem [ ] > ( [
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '操作',
key: 'action',
width: 100,
align: 'center',
fixed: 'left',
hideInSetting: true
},
{
title: '订单号',
title : '续费订单号' ,
dataIndex : 'orderNo' ,
key: 'orderNo'
key : 'orderNo' ,
sorter : true
} ,
{
title : '关联原订单号' ,
dataIndex : 'rentOrderNo' ,
key : 'rentOrderNo' ,
sorter : true
} ,
{
title : '电池型号' ,
dataIndex : 'batteryModel' ,
key : 'batteryModel'
} ,
{
title : '电池编号' ,
dataIndex : 'equipmentCode' ,
key : 'equipmentCode'
} ,
{
title : '所属商户' ,
@@ -265,110 +125,63 @@
sorter : true
} ,
{
title: '买家',
dataIndex: 'nickname',
key: 'nickname',
align: 'center'
title : '服务期限' ,
dataIndex : 'servicePeriod' ,
key : 'servicePeriod'
} ,
{
title: '实付款(元)',
title : '续费时长' ,
dataIndex : 'validity' ,
key : 'validity'
} ,
{
title : '续费金额' ,
dataIndex : 'payPrice' ,
key: 'payPrice',
ellipsis: true
key : 'payPrice'
} ,
{
title: '支付方式',
key: 'payMethod',
dataIndex: 'payMethod',
title : '续费类型' ,
dataIndex : 'isAdminRenew' ,
key : 'isAdminRenew'
} ,
{
title : '付款状态' ,
dataIndex : 'payStatus' ,
key : 'payStatus' ,
filters : [
{
text: '余额支付',
value: 10
},
{
text: '微信支付',
value: 20
},
{
text: '支付宝',
value: 30
},
{
text: '通联支付',
value: 40
}
{ text : '未付款' , value : 10 } ,
{ text : '已付款' , value : 20 }
] ,
filterMultiple : false
} ,
{
title: '创建时间',
title : '购买时间' ,
dataIndex : 'createTime' ,
key : 'createTime' ,
sorter : true ,
customRender : ( { text } ) => toDateString ( text )
},
{
title: '交易状态',
key: 'payStatus',
dataIndex: 'payStatus',
fixed: 'right',
align: 'center',
filters: [
{
text: '未付款',
value: 10
},
{
text: '已付款',
value: 20
}
],
filterMultiple: false
}
] ) ;
// 表格选中数据
const selection = ref<Order[]>([]);
// 当前编辑数据
const current = ref<Order | null>(null);
// 是否显示资产详情
const showInfo = ref(false);
// 是否显示编辑弹窗
const showEdit = ref(false);
const markdown = ref('请输入备注内容');
const content = ref('请输入要修改的内容');
const showMarkdown = ref(false);
const deliveryEdit = ref(false);
const field = ref('comments');
const orderId = ref(undefined);
const selection = ref < OrderPay [ ] > ( [ ] ) ;
// 是否显示高级搜索
const showAdvancedSearch = ref ( false ) ;
// 表格数据源
// 表格数据源：只查续费单（rentOrderId 不为空）
const datasource : DatasourceFunction = ( {
page ,
limit ,
where ,
orders,
filters
orders
} ) => {
// 搜索条件
if (filters.payMethod) {
where.payMethod = filters.payMethod;
}
if (filters.deliveryType) {
where.deliveryType = filters.deliveryType;
}
if (filters.payStatus) {
where.payStatus = filters.payStatus;
}
if (filters.orderSource) {
where.orderSource = filters.orderSource;
if ( where . payStatus ) {
where . payStatus = where . payStatus ;
}
where . tenantId = localStorage . getItem ( 'tenantId' ) ;
// 续费订单
where.isRenew = 1;
return pageOrder({
// 关键：仅查询续费单（rentOrderId 不为空），避免与原订单混在一起
where . rentOrderIdNotNull = true ;
return pageOrderPay ( {
... where ,
... orders ,
page ,
@@ -377,72 +190,18 @@
} ;
/* 搜索 */
const reload = (where?: OrderParam) => {
const reload = ( where ? : OrderPayParam ) => {
selection . value = [ ] ;
tableRef ? . value ? . reload ( { where : where } ) ;
} ;
const onEdit = (name, text, item) => {
orderId.value = item.orderId;
field.value = name;
content.value = text;
showEdit.value = true;
};
const onEditContent = (name, text, item) => {
orderId.value = item.orderId;
field.value = name;
markdown.value = text;
showMarkdown.value = true;
};
const openDelivery = (row?: Order) => {
current.value = row ?? null;
deliveryEdit.value = true;
};
/* 打开编辑弹窗 */
const openEdit = (row?: Order) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: Order) => {
current.value = row ?? null;
showInfo.value = true;
};
/* 打开高级搜索 */
const openAdvanced = ( ) => {
showAdvancedSearch . value = ! showAdvancedSearch . value ;
} ;
/* 支付宝统一收单交易查询 */
const onAlipayQuery = (orderNo) => {
alipayQuery(orderNo).then((res) => {
console.log(res);
});
};
/* 删除单个 */
const remove = (row: Order) => {
const hide = message.loading('请求中..', 0);
removeOrder(row.orderId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = ( ) => {
console.log(selection.value);
if ( ! selection . value . length ) {
message . error ( '请至少选择一条数据' ) ;
return ;
@@ -453,17 +212,7 @@
icon : createVNode ( ExclamationCircleOutlined ) ,
maskClosable : true ,
onOk : ( ) => {
const hide = message.loading('请求中..', 0);
removeBatchOrder(selection.value.map((d) => d.orderId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
message . info ( '续费单删除需后端支持批量接口，请联系开发' ) ;
}
} ) ;
} ;
@@ -471,14 +220,11 @@
< script lang = "ts" >
export default {
name: 'Shop OrderIndex'
name : 'ShopRenew OrderIndex'
} ;
< / script >
< style lang = "less" scoped >
p {
line - height : 0.8 ;
}
. sys - org - table : deep ( . ant - table - body ) {
overflow : auto ! important ;
overflow : overlay ! important ;
@@ -488,7 +234,4 @@
padding : 0 4 px ;
margin - bottom : 0 ;
}
. price - edit {
padding - right : 5 px ;
}
< / style >
gxwebsoft