Update withdraw.vue

src/modules/dj/views/withdraw.vue

@@ -5,9 +5,60 @@
 			<cl-export-btn :columns="Table?.columns" />
 		</cl-row>
 
+		<cl-row>
+			<el-checkbox v-model="showSummary" label="统计数据" size="small" />
+			<el-tag v-if="showSummary" class="ml-2" effect="light">代付成功金额: {{ summary.num1 }}</el-tag>
+			<el-tag v-if="showSummary" class="ml-2" effect="light">成功订单数: {{ summary.num2 }}</el-tag>
+			<el-tag v-if="showSummary && checkPerm(service.dj.withdraw.permission.update)" class="ml-2"
+				effect="light">通道手续费: {{ summary.num5.toFixed(2) }}</el-tag>
+			<el-tag v-if="showSummary" class="ml-2" effect="light">成功手续费: {{ summary.num3 }}</el-tag>
+		</cl-row>
+
+
 		<cl-row>
 			<!-- 数据表格 -->
-			<cl-table ref="Table" />
+			<cl-table ref="Table" :contextMenu="[]">
+				<template #column-orderNo="{ scope }">
+					<el-tooltip class="box-item" effect="dark" :content="scope.row.orderNo" placement="top">
+						<div class="tooltip">{{ scope.row.orderNo }}</div>
+					</el-tooltip>
+				</template>
+				<template #column-traceNo="{ scope }">
+					<el-tooltip class="box-item" effect="dark" :content="scope.row.traceNo" placement="top">
+						<div class="tooltip">{{ scope.row.traceNo }}</div>
+					</el-tooltip>
+				</template>
+				<template #column-outOrderNo="{ scope }">
+					<el-tooltip class="box-item" effect="dark" :content="scope.row.outOrderNo" placement="top">
+						<div class="tooltip">{{ scope.row.outOrderNo }}</div>
+					</el-tooltip>
+				</template>
+				<template #column-detail="{ scope }">
+					<div style="padding: 10px;">
+						<el-descriptions border :column="4" class="desc">
+							<el-descriptions-item :span="2" label="收款账号">
+								{{ scope.row.accountNo }}
+							</el-descriptions-item>
+							<el-descriptions-item :span="2" label="收款人姓名">
+								{{ scope.row.accountName }}
+							</el-descriptions-item>
+							<el-descriptions-item :span="2" label="银行名称">
+								{{ scope.row.bankName }}
+							</el-descriptions-item>
+							<el-descriptions-item :span="2" label="银行编码">
+								{{ scope.row.bankCode }}
+							</el-descriptions-item>
+							<el-descriptions-item :span="4" label="回调地址">
+								{{ scope.row.notifyUrl }}
+							</el-descriptions-item>
+
+							<el-descriptions-item :span="4" label="备注/失败描述">
+								{{ scope.row.remark }}
+							</el-descriptions-item>
+						</el-descriptions>
+					</div>
+				</template>
+			</cl-table>
 		</cl-row>
 
 		<cl-row>
@@ -27,9 +78,10 @@ import { useCool } from "/@/cool";
 import { ref } from "vue";
 import dayjs from "dayjs";
 import { ElMessage } from "element-plus";
+import { checkPerm } from "/$/base";
 
 const { service } = useCool();
-
+const showSummary = ref(false);
 const filterParam = ref({
 	createTime: [
 		dayjs().format("YYYY-MM-DD ") + "00:00:00",
@@ -37,6 +89,13 @@ const filterParam = ref({
 	]
 });
 
+const summary = ref({
+	num1: 0,
+	num2: 0,
+	num3: 0,
+	num4: 0
+});
+
 const items = ref<ClForm.Item[]>([
 	{
 		label: "订单号",
@@ -45,6 +104,13 @@ const items = ref<ClForm.Item[]>([
 			name: "el-input"
 		}
 	},
+	{
+		label: "商户订单号",
+		prop: "outOrderNo",
+		component: {
+			name: "el-input"
+		}
+	},
 	{
 		label: "交易号",
 		prop: "traceNo",
@@ -59,13 +125,13 @@ const items = ref<ClForm.Item[]>([
 			name: "el-input"
 		}
 	},
-	// {
-	// 	label: "通道编码",
-	// 	prop: "code",
-	// 	component: {
-	// 		name: "el-input"
-	// 	}
-	// },
+	{
+		label: "通道编码",
+		prop: "code",
+		component: {
+			name: "el-input"
+		}
+	},
 	{
 		label: "状态",
 		prop: "status",
@@ -76,16 +142,20 @@ const items = ref<ClForm.Item[]>([
 			},
 			options: [
 				{
-					label: "处理中",
-					value: 0
+					label: "已受理",
+					value: 1
 				},
 				{
-					label: "代付成功",
-					value: 1
+					label: "银行处理中",
+					value: 2
 				},
 				{
 					label: "代付失败",
-					value: 2
+					value: 3
+				},
+				{
+					label: "代付成功",
+					value: 8
 				}
 			]
 		}
@@ -100,6 +170,38 @@ const items = ref<ClForm.Item[]>([
 				type: "datetimerange",
 				unlinkPanels: true,
 				valueFormat: "YYYY-MM-DD HH:mm:ss",
+				shortcuts: [
+					{
+						text: '今天',
+						value: () => {
+							return [dayjs().startOf('day'), dayjs().endOf('day')]
+						}
+					},
+					{
+						text: '昨天',
+						value: () => {
+							return [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')]
+						}
+					},
+					{
+						text: '近三天',
+						value: () => {
+							return [dayjs().subtract(2, 'day').startOf('day'), dayjs().endOf('day')]
+						}
+					},
+					{
+						text: '近七天',
+						value: () => {
+							return [dayjs().subtract(6, 'day').startOf('day'), dayjs().endOf('day')]
+						}
+					},
+					{
+						text: '近一个月',
+						value: () => {
+							return [dayjs().startOf('month'), dayjs().endOf('month')]
+						}
+					},
+				],
 				onChange() { }
 			}
 		}
@@ -109,10 +211,41 @@ const items = ref<ClForm.Item[]>([
 // cl-upsert
 const Upsert = useUpsert({
 	items: [
-		{ prop: "orderNo", label: "订单号", required: true, component: { name: "el-input" } },
-		{ prop: "traceNo", label: "交易号", component: { name: "el-input" } },
-		{ prop: "code", label: "通道码", component: { name: "el-input" }, required: true },
-		{ prop: "mchId", label: "商户号", required: true, component: { name: "el-input" } },
+		{
+			prop: "mchId",
+			label: "商户号",
+			required: true,
+			component: {
+				name: "el-input",
+				props: {
+					disabled: true
+				}
+			},
+
+		},
+		{
+			label: "订单号",
+			prop: "orderNo",
+			required: true,
+			component: {
+				name: "el-input",
+				props: {
+					disabled: true
+				}
+			}
+		},
+		{
+			prop: "traceNo",
+			label: "交易号",
+			component: { name: "el-input" },
+			required: true
+		},
+		{
+			prop: "code",
+			label: "通道码",
+			component: { name: "el-input" },
+			required: true
+		},
 		{
 			prop: "amount",
 			label: "金额",
@@ -120,20 +253,66 @@ const Upsert = useUpsert({
 			component: { name: "el-input-number", props: { min: 0 } },
 			required: true
 		},
-		{ prop: "accountNo", label: "账户", required: true, component: { name: "el-input" } },
+		{
+			prop: "accountNo",
+			label: "账户",
+			required: true,
+			component: { name: "el-input" }
+		},
 		{
 			prop: "bankCode",
 			label: "银行编码",
-			component: { name: "cl-editor-monaco" },
+			component: { name: "el-input" },
+			required: true
+		},
+		{
+			prop: "bankName",
+			label: "银行名称",
+			required: true,
+			component: { name: "el-input" }
+		},
+		{
+			prop: "accountName",
+			label: "账户名",
+			required: true,
+			component: { name: "el-input" }
+		},
+		{
+			prop: "status",
+			label: "订单状态",
+			component: {
+				name: "el-select",
+				props: {
+					disabled: true
+				},
+				options: [
+					{
+						label: "已受理",
+						value: 1
+					},
+					{
+						label: "银行处理中",
+						value: 2
+					},
+					{
+						label: "代付失败",
+						value: 3
+					},
+					{
+						label: "代付成功",
+						value: 8
+					},
+				]
+			},
 			required: true
 		},
-		{ prop: "bankName", label: "银行名称", required: true, component: { name: "el-input" } },
-		{ prop: "accountName", label: "账户名", required: true, component: { name: "el-input" } },
-		{ prop: "status", label: "订单状态", component: { name: "cl-switch" }, required: true },
 		{
 			prop: "remark",
 			label: "备注",
-			component: { name: "el-input", props: { type: "textarea", rows: 4 } }
+			component: {
+				name: "el-input",
+				props: { type: "textarea", rows: 4 }
+			}
 		}
 	]
 });
@@ -142,34 +321,45 @@ const Upsert = useUpsert({
 const Table = useTable({
 	autoHeight: false,
 	columns: [
-		{ label: "#", type: "index" },
+		() => {
+			return {
+				label: "#",
+				type: "expand",
+				prop: "detail"
+			};
+		},
 		{ prop: "orderNo", label: "订单号" },
+		{ prop: "outOrderNo", label: "商户订单号" },
 		{ prop: "traceNo", label: "交易号" },
-		{ prop: "code", label: "通道码" },
 		{ prop: "mchId", label: "商户号" },
-		{ prop: "amount", label: "金额" },
-		{ prop: "accountNo", label: "账户" },
+		{ prop: "code", label: "通道码" },
 		{
-			prop: "bankCode",
-			label: "银行",
+			prop: "amount",
+			label: "金额",
+			width: 90,
+			formatter(row) {
+				return (+row.amount).toFixed(2) + ' ' + row.currency;
+			}
+		},
+		{
+			prop: "charge",
+			label: "手续费",
+			width: 90,
 			formatter(row) {
-				return `${row.bankName}(${row.bankCode})`;
+				return (+row.amount).toFixed(2) + ' ' + row.currency;
 			}
 		},
-		// { prop: "bankName", label: "银行名称" },
-		{ prop: "accountName", label: "账户名" },
 		{
 			prop: "status",
 			label: "状态",
 			dict: [
-				{ label: "交易中", value: 0, color: "#909399" },
-				{ label: "代付成功", value: 1, color: "#67C23A" },
-				{ label: "代付失败", value: 2, color: "#F56C6C" }
+				{ label: "已受理", value: 1, color: "#909399" },
+				{ label: "银行处理中", value: 2, color: "#909399" },
+				{ label: "代付失败", value: 3, color: "#F56C6C" },
+				{ label: "代付成功", value: 8, color: "#67C23A" },
 			]
 		},
-		{ prop: "remark", label: "备注", showOverflowTooltip: true },
 		{ prop: "createTime", label: "创建时间", sortable: "desc", width: 160 },
-		// { prop: "updateTime", label: "更新时间", sortable: "custom", width: 160 },
 		{
 			type: "op",
 			buttons({ scope }) {
@@ -208,3 +398,23 @@ const Crud = useCrud(
 	}
 );
 </script>
+<style lang="scss">
+.orderList {
+	.el-descriptions {
+		.el-descriptions__label {
+			width: 120px !important;
+		}
+	}
+}
+
+.desc .el-descriptions__label {
+	min-width: 115px;
+}
+
+.tooltip {
+	max-width: 100px !important;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>