perf: 优化部分显示效果
							parent
							
								
									77ccb9a5d8
								
							
						
					
					
						commit
						6236f59473
					
				|  | @ -3,7 +3,7 @@ import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log'; | |||
| 
 | ||||
| import { ref } from 'vue'; | ||||
| 
 | ||||
| import { useVbenModal } from '@vben/common-ui'; | ||||
| import { JsonViewer, useVbenModal } from '@vben/common-ui'; | ||||
| import { formatDateTime } from '@vben/utils'; | ||||
| 
 | ||||
| import { Descriptions } from 'ant-design-vue'; | ||||
|  | @ -71,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
|         {{ formData?.requestMethod }} {{ formData?.requestUrl }} | ||||
|       </Descriptions.Item> | ||||
|       <Descriptions.Item label="请求参数"> | ||||
|         {{ formData?.requestParams }} | ||||
|         <JsonViewer :value="formData?.requestParams" preview-mode /> | ||||
|       </Descriptions.Item> | ||||
|       <Descriptions.Item label="请求结果"> | ||||
|         {{ formData?.responseBody }} | ||||
|  |  | |||
|  | @ -3,10 +3,10 @@ import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log'; | |||
| 
 | ||||
| import { ref } from 'vue'; | ||||
| 
 | ||||
| import { useVbenModal } from '@vben/common-ui'; | ||||
| import { JsonViewer, useVbenModal } from '@vben/common-ui'; | ||||
| import { formatDateTime } from '@vben/utils'; | ||||
| 
 | ||||
| import { Descriptions, Input } from 'ant-design-vue'; | ||||
| import { Descriptions } from 'ant-design-vue'; | ||||
| 
 | ||||
| import { DictTag } from '#/components/dict-tag'; | ||||
| import { DICT_TYPE } from '#/utils'; | ||||
|  | @ -71,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
|         {{ formData?.requestMethod }} {{ formData?.requestUrl }} | ||||
|       </Descriptions.Item> | ||||
|       <Descriptions.Item label="请求参数"> | ||||
|         {{ formData?.requestParams }} | ||||
|         <JsonViewer :value="formData?.requestParams" preview-mode /> | ||||
|       </Descriptions.Item> | ||||
|       <Descriptions.Item label="异常时间"> | ||||
|         {{ formatDateTime(formData?.exceptionTime || '') }} | ||||
|  | @ -80,11 +80,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
|         {{ formData?.exceptionName }} | ||||
|       </Descriptions.Item> | ||||
|       <Descriptions.Item v-if="formData?.exceptionStackTrace" label="异常堆栈"> | ||||
|         <Input.TextArea | ||||
|           :value="formData?.exceptionStackTrace" | ||||
|           :auto-size="{ maxRows: 20 }" | ||||
|           readonly | ||||
|         /> | ||||
|         <JsonViewer :value="formData?.exceptionStackTrace" preview-mode /> | ||||
|       </Descriptions.Item> | ||||
|       <Descriptions.Item label="处理状态"> | ||||
|         <DictTag | ||||
|  |  | |||
|  | @ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|   <Modal :title="getTitle"> | ||||
|   <Modal class="w-[40%]" :title="getTitle"> | ||||
|     <Form class="mx-4" /> | ||||
|   </Modal> | ||||
| </template> | ||||
|  |  | |||
|  | @ -116,7 +116,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       title: '支付时间', | ||||
|       field: 'successTime', | ||||
|       minWidth: 180, | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|  | @ -129,7 +128,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     }, | ||||
|     { | ||||
|       title: '操作', | ||||
|       width: 80, | ||||
|       width: 100, | ||||
|       fixed: 'right', | ||||
|       slots: { default: 'actions' }, | ||||
|     }, | ||||
|  |  | |||
|  | @ -31,8 +31,12 @@ function handleDetail(row: PayOrderApi.Order) { | |||
| const [Grid, gridApi] = useVbenVxeGrid({ | ||||
|   formOptions: { | ||||
|     schema: useGridFormSchema(), | ||||
|     collapsed: false, | ||||
|   }, | ||||
|   gridOptions: { | ||||
|     cellConfig: { | ||||
|       height: 80, | ||||
|     }, | ||||
|     columns: useGridColumns(), | ||||
|     height: 'auto', | ||||
|     keepSource: true, | ||||
|  | @ -49,6 +53,9 @@ const [Grid, gridApi] = useVbenVxeGrid({ | |||
|     }, | ||||
|     rowConfig: { | ||||
|       keyField: 'id', | ||||
|       isCurrent: true, | ||||
|       isHover: true, | ||||
|       resizable: true, | ||||
|     }, | ||||
|     toolbarConfig: { | ||||
|       refresh: { code: 'query' }, | ||||
|  | @ -90,16 +97,18 @@ const [Grid, gridApi] = useVbenVxeGrid({ | |||
|         /> | ||||
|       </template> | ||||
|       <template #no="{ row }"> | ||||
|         <p class="order-font"> | ||||
|           <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }} | ||||
|         </p> | ||||
|         <p class="order-font" v-if="row.no"> | ||||
|           <Tag size="small" color="orange">支付</Tag> {{ row.no }} | ||||
|         </p> | ||||
|         <p class="order-font" v-if="row.channelOrderNo"> | ||||
|           <Tag size="small" color="green">渠道</Tag> | ||||
|           {{ row.channelOrderNo }} | ||||
|         </p> | ||||
|         <div class="flex flex-col gap-1 text-left"> | ||||
|           <p class="text-sm"> | ||||
|             <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }} | ||||
|           </p> | ||||
|           <p class="text-sm" v-if="row.no"> | ||||
|             <Tag size="small" color="orange">支付</Tag> {{ row.no }} | ||||
|           </p> | ||||
|           <p class="text-sm" v-if="row.channelOrderNo"> | ||||
|             <Tag size="small" color="green">渠道</Tag> | ||||
|             {{ row.channelOrderNo }} | ||||
|           </p> | ||||
|         </div> | ||||
|       </template> | ||||
|     </Grid> | ||||
|   </Page> | ||||
|  |  | |||
|  | @ -80,76 +80,41 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'id', | ||||
|       title: '编号', | ||||
|       minWidth: 100, | ||||
|     }, | ||||
|     { | ||||
|       field: 'createTime', | ||||
|       title: '创建时间', | ||||
|       minWidth: 180, | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       field: 'payPrice', | ||||
|       title: '支付金额', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellTag', | ||||
|         props: { | ||||
|           type: 'success', | ||||
|           content: '¥{payPrice}', | ||||
|           formatter: (value: number) => (value / 100).toFixed(2), | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'refundPrice', | ||||
|       title: '退款金额', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellTag', | ||||
|         props: { | ||||
|           type: 'danger', | ||||
|           content: '¥{refundPrice}', | ||||
|           formatter: (value: number) => (value / 100).toFixed(2), | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'merchantRefundId', | ||||
|       title: '退款订单号', | ||||
|       minWidth: 300, | ||||
|       cellRender: { | ||||
|         name: 'CellTag', | ||||
|         props: { | ||||
|           type: 'info', | ||||
|           content: '商户 {merchantRefundId}', | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'channelRefundNo', | ||||
|       title: '渠道退款单号', | ||||
|       minWidth: 200, | ||||
|       cellRender: { | ||||
|         name: 'CellTag', | ||||
|         props: { | ||||
|           type: 'success', | ||||
|           content: '{channelRefundNo}', | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'payPrice', | ||||
|       title: '支付金额', | ||||
|       formatter: 'formatFraction', | ||||
|     }, | ||||
|     { | ||||
|       field: 'refundPrice', | ||||
|       title: '退款金额', | ||||
|       formatter: 'formatFraction', | ||||
|     }, | ||||
|     { | ||||
|       field: 'status', | ||||
|       title: '退款状态', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.PAY_REFUND_STATUS }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'createTime', | ||||
|       title: '创建时间', | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       title: '操作', | ||||
|       width: 80, | ||||
|       width: 100, | ||||
|       fixed: 'right', | ||||
|       slots: { default: 'actions' }, | ||||
|     }, | ||||
|  |  | |||
|  | @ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({ | |||
|       class: 'w-full', | ||||
|     }, | ||||
|     formItemClass: 'col-span-2', | ||||
|     labelWidth: 80, | ||||
|     labelWidth: 140, | ||||
|   }, | ||||
|   layout: 'horizontal', | ||||
|   schema: useFormSchema(), | ||||
|  | @ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|   <Modal :title="getTitle"> | ||||
|   <Modal class="w-[40%]" :title="getTitle"> | ||||
|     <Form class="mx-4" /> | ||||
|   </Modal> | ||||
| </template> | ||||
|  |  | |||
|  | @ -50,14 +50,6 @@ export function useFormSchema(): VbenFormSchema[] { | |||
|       }, | ||||
|       rules: z.number().default(CommonStatusEnum.ENABLE), | ||||
|     }, | ||||
|     { | ||||
|       fieldName: 'remark', | ||||
|       label: '备注', | ||||
|       component: 'Textarea', | ||||
|       componentProps: { | ||||
|         placeholder: '请输入备注', | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       fieldName: 'apiKey', | ||||
|       label: '短信 API 的账号', | ||||
|  | @ -83,6 +75,14 @@ export function useFormSchema(): VbenFormSchema[] { | |||
|         placeholder: '请输入短信发送回调 URL', | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       fieldName: 'remark', | ||||
|       label: '备注', | ||||
|       component: 'Textarea', | ||||
|       componentProps: { | ||||
|         placeholder: '请输入备注', | ||||
|       }, | ||||
|     }, | ||||
|   ]; | ||||
| } | ||||
| 
 | ||||
|  | @ -135,17 +135,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'id', | ||||
|       title: '编号', | ||||
|       minWidth: 100, | ||||
|     }, | ||||
|     { | ||||
|       field: 'signature', | ||||
|       title: '短信签名', | ||||
|       minWidth: 120, | ||||
|     }, | ||||
|     { | ||||
|       field: 'code', | ||||
|       title: '渠道编码', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE }, | ||||
|  | @ -154,38 +151,32 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'status', | ||||
|       title: '启用状态', | ||||
|       minWidth: 100, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.COMMON_STATUS }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'remark', | ||||
|       title: '备注', | ||||
|       minWidth: 120, | ||||
|     }, | ||||
|     { | ||||
|       field: 'apiKey', | ||||
|       title: '短信 API 的账号', | ||||
|       minWidth: 180, | ||||
|     }, | ||||
|     { | ||||
|       field: 'apiSecret', | ||||
|       title: '短信 API 的密钥', | ||||
|       minWidth: 180, | ||||
|     }, | ||||
|     { | ||||
|       field: 'callbackUrl', | ||||
|       title: '短信发送回调 URL', | ||||
|       minWidth: 180, | ||||
|     }, | ||||
|     { | ||||
|       field: 'createTime', | ||||
|       title: '创建时间', | ||||
|       minWidth: 180, | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       field: 'remark', | ||||
|       title: '备注', | ||||
|     }, | ||||
|     { | ||||
|       title: '操作', | ||||
|       width: 130, | ||||
|  |  | |||
|  | @ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({ | |||
|       class: 'w-full', | ||||
|     }, | ||||
|     formItemClass: 'col-span-2', | ||||
|     labelWidth: 80, | ||||
|     labelWidth: 120, | ||||
|   }, | ||||
|   layout: 'horizontal', | ||||
|   schema: useFormSchema(), | ||||
|  | @ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|   <Modal :title="getTitle"> | ||||
|   <Modal class="w-[40%]" :title="getTitle"> | ||||
|     <Form class="mx-4" /> | ||||
|   </Modal> | ||||
| </template> | ||||
|  |  | |||
|  | @ -84,18 +84,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'id', | ||||
|       title: '编号', | ||||
|       minWidth: 100, | ||||
|     }, | ||||
|     { | ||||
|       field: 'createTime', | ||||
|       title: '创建时间', | ||||
|       minWidth: 180, | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       field: 'mobile', | ||||
|       title: '手机号', | ||||
|       minWidth: 120, | ||||
|     }, | ||||
|     { | ||||
|       field: 'templateContent', | ||||
|  | @ -105,7 +97,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'sendStatus', | ||||
|       title: '发送状态', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS }, | ||||
|  | @ -114,13 +105,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'sendTime', | ||||
|       title: '发送时间', | ||||
|       minWidth: 180, | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       field: 'receiveStatus', | ||||
|       title: '接收状态', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS }, | ||||
|  | @ -129,13 +118,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'receiveTime', | ||||
|       title: '接收时间', | ||||
|       minWidth: 180, | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       field: 'channelCode', | ||||
|       title: '短信渠道', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE }, | ||||
|  | @ -144,17 +131,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'templateId', | ||||
|       title: '模板编号', | ||||
|       minWidth: 100, | ||||
|     }, | ||||
|     { | ||||
|       field: 'templateType', | ||||
|       title: '短信类型', | ||||
|       minWidth: 100, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'createTime', | ||||
|       title: '创建时间', | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       title: '操作', | ||||
|       width: 80, | ||||
|  |  | |||
|  | @ -78,6 +78,7 @@ export function useFormSchema(): VbenFormSchema[] { | |||
|       component: 'Textarea', | ||||
|       componentProps: { | ||||
|         placeholder: '请输入模板内容', | ||||
|         rows: 4, | ||||
|       }, | ||||
|       rules: 'required', | ||||
|     }, | ||||
|  | @ -204,12 +205,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'id', | ||||
|       title: '编号', | ||||
|       minWidth: 100, | ||||
|     }, | ||||
|     { | ||||
|       field: 'type', | ||||
|       title: '短信类型', | ||||
|       minWidth: 120, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE }, | ||||
|  | @ -218,12 +217,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'name', | ||||
|       title: '模板名称', | ||||
|       minWidth: 120, | ||||
|     }, | ||||
|     { | ||||
|       field: 'code', | ||||
|       title: '模板编码', | ||||
|       minWidth: 120, | ||||
|     }, | ||||
|     { | ||||
|       field: 'content', | ||||
|  | @ -233,26 +230,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'status', | ||||
|       title: '开启状态', | ||||
|       minWidth: 100, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.COMMON_STATUS }, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       field: 'remark', | ||||
|       title: '备注', | ||||
|       minWidth: 120, | ||||
|     }, | ||||
|     { | ||||
|       field: 'apiTemplateId', | ||||
|       title: '短信 API 的模板编号', | ||||
|       minWidth: 180, | ||||
|     }, | ||||
|     { | ||||
|       field: 'channelCode', | ||||
|       title: '短信渠道', | ||||
|       minWidth: 100, | ||||
|       cellRender: { | ||||
|         name: 'CellDict', | ||||
|         props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE }, | ||||
|  | @ -261,9 +250,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { | |||
|     { | ||||
|       field: 'createTime', | ||||
|       title: '创建时间', | ||||
|       minWidth: 180, | ||||
|       formatter: 'formatDateTime', | ||||
|     }, | ||||
|     { | ||||
|       field: 'remark', | ||||
|       title: '备注', | ||||
|     }, | ||||
|     { | ||||
|       title: '操作', | ||||
|       width: 220, | ||||
|  |  | |||
|  | @ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({ | |||
|       class: 'w-full', | ||||
|     }, | ||||
|     formItemClass: 'col-span-2', | ||||
|     labelWidth: 80, | ||||
|     labelWidth: 120, | ||||
|   }, | ||||
|   layout: 'horizontal', | ||||
|   schema: useFormSchema(), | ||||
|  | @ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|   <Modal :title="getTitle"> | ||||
|   <Modal class="w-[40%]" :title="getTitle"> | ||||
|     <Form class="mx-4" /> | ||||
|   </Modal> | ||||
| </template> | ||||
|  |  | |||
|  | @ -103,7 +103,7 @@ const buildFormSchema = () => { | |||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|   <Modal title="发送短信"> | ||||
|   <Modal class="w-[30%]" title="发送短信"> | ||||
|     <Form class="mx-4" /> | ||||
|   </Modal> | ||||
| </template> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 xingyu4j
						xingyu4j