lisang
/
jeepay-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

表格默认左侧10px, 表格内padding 8px

This commit is contained in:
terrfly 2021-11-19 11:50:48 +08:00
parent a4f412d1c4
commit c9503665a8
4 changed files with 32 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
jeepay-ui-manager/src/components/JeepayTable/JeepayTable.vue
View File

@ -18,8 +18,8 @@
:scroll="{ x: scrollX }" :scroll="{ x: scrollX }"
:customRow="(record, index) => { :customRow="(record, index) => {
if(!tableRowCrossColor){ if(!tableRowCrossColor){
return {}; return {};
} }
return { style: { 'background-color': index % 2 == 0 ? '#FCFCFC' : '#FFFFFF'} } return { style: { 'background-color': index % 2 == 0 ? '#FCFCFC' : '#FFFFFF'} }
}" }"
> >
@ -125,14 +125,18 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less">
// 表格默认左侧10px, 表格内padding 8px
.ant-table-body-outer { margin-left: 10px }
// 调整antdv 的table默认padding高度 // 调整antdv 的table默认padding高度
.ant-table-fixed{ .ant-table-fixed{
tr{ tr{
th{ th{
padding: 8px 16px !important; padding: 8px 8px !important;
} }
td{ td{
padding: 8px 16px !important; padding: 8px 8px !important;
} }
} }
} }

20
jeepay-ui-manager/src/views/order/pay/PayOrderList.vue
View File

@ -73,7 +73,7 @@
:tableColumns="tableColumns" :tableColumns="tableColumns"
:searchData="searchData" :searchData="searchData"
rowKey="payOrderId" rowKey="payOrderId"
:scrollX="1350" :scrollX="1250"
:tableRowCrossColor="true" :tableRowCrossColor="true"
> >
<template slot="amountSlot" slot-scope="{record}"><b>￥{{ record.amount/100 }}</b></template> <!-- 自定义插槽 --> <template slot="amountSlot" slot-scope="{record}"><b>￥{{ record.amount/100 }}</b></template> <!-- 自定义插槽 -->
@ -413,19 +413,19 @@ import moment from 'moment'
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const tableColumns = [ const tableColumns = [
{ key: 'amount', title: '支付金额', ellipsis: true, width: '130px', fixed: 'left', scopedSlots: { customRender: 'amountSlot' } }, { key: 'amount', title: '支付金额', ellipsis: true, width: 108, fixed: 'left', scopedSlots: { customRender: 'amountSlot' } },
{ key: 'refundAmount', title: '退款金额', width: '130px', scopedSlots: { customRender: 'refundAmountSlot' } }, { key: 'refundAmount', title: '退款金额', width: 108, scopedSlots: { customRender: 'refundAmountSlot' } },
{ key: 'mchFeeAmount', dataIndex: 'mchFeeAmount', title: '手续费', customRender: (text) => '￥' + (text / 100).toFixed(2) }, { key: 'mchFeeAmount', dataIndex: 'mchFeeAmount', title: '手续费', customRender: (text) => '￥' + (text / 100).toFixed(2), width: 100 },
{ key: 'mchName', title: '商户名称', dataIndex: 'mchName', ellipsis: true, width: '100px' }, { key: 'mchName', title: '商户名称', dataIndex: 'mchName', ellipsis: true, width: 100 },
{ key: 'orderNo', title: '订单号', scopedSlots: { customRender: 'orderSlot' }, width: '260px' }, { key: 'orderNo', title: '订单号', scopedSlots: { customRender: 'orderSlot' }, width: 210 },
// { key: 'payOrderId', title: '支付订单号', dataIndex: 'payOrderId' }, // { key: 'payOrderId', title: '支付订单号', dataIndex: 'payOrderId' },
// { key: 'mchOrderNo', title: '商户订单号', dataIndex: 'mchOrderNo' }, // { key: 'mchOrderNo', title: '商户订单号', dataIndex: 'mchOrderNo' },
{ key: 'wayName', title: '支付方式', dataIndex: 'wayName', width: 150 }, { key: 'wayName', title: '支付方式', dataIndex: 'wayName', width: 120 },
{ key: 'state', title: '支付状态', scopedSlots: { customRender: 'stateSlot' }, width: 100 }, { key: 'state', title: '支付状态', scopedSlots: { customRender: 'stateSlot' }, width: 100 },
{ key: 'divisionState', title: '分账状态', scopedSlots: { customRender: 'divisionStateSlot' }, align: 'center' },
{ key: 'notifyState', title: '回调状态', scopedSlots: { customRender: 'notifySlot' }, width: 100 }, { key: 'notifyState', title: '回调状态', scopedSlots: { customRender: 'notifySlot' }, width: 100 },
{ key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', width: 180 }, { key: 'divisionState', title: '分账状态', scopedSlots: { customRender: 'divisionStateSlot' }, width: 100 },
{ key: 'op', title: '操作', width: '160px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } } { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', width: 120 },
{ key: 'op', title: '操作', width: 120, fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
] ]
export default { export default {

31
jeepay-ui-manager/src/views/order/refund/RefundOrderList.vue
View File

@ -54,9 +54,8 @@
:reqTableDataFunc="reqTableDataFunc" :reqTableDataFunc="reqTableDataFunc"
:tableColumns="tableColumns" :tableColumns="tableColumns"
:searchData="searchData" :searchData="searchData"
:rowSelection="rowSelection"
rowKey="refundOrderId" rowKey="refundOrderId"
:scrollX="1350" :scrollX="1250"
:tableRowCrossColor="true" :tableRowCrossColor="true"
> >
<template slot="payAmountSlot" slot-scope="{record}"><b>￥{{ record.payAmount/100 }}</b></template> <!-- 自定义插槽 --> <template slot="payAmountSlot" slot-scope="{record}"><b>￥{{ record.payAmount/100 }}</b></template> <!-- 自定义插槽 -->
@ -328,16 +327,13 @@
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const tableColumns = [ const tableColumns = [
{ key: 'payAmount', title: '支付金额', ellipsis: true, fixed: 'left', scopedSlots: { customRender: 'payAmountSlot' }, width: '150px' }, { key: 'payAmount', title: '支付金额', ellipsis: true, fixed: 'left', scopedSlots: { customRender: 'payAmountSlot' }, width: 100 },
{ key: 'refundAmount', title: '退款金额', ellipsis: true, scopedSlots: { customRender: 'refundAmountSlot' }, width: '150px' }, { key: 'refundAmount', title: '退款金额', ellipsis: true, scopedSlots: { customRender: 'refundAmountSlot' }, width: 100 },
{ key: 'pay', title: '退款订单号', scopedSlots: { customRender: 'refundOrderSlot' }, width: '260px' }, { key: 'pay', title: '退款订单号', scopedSlots: { customRender: 'refundOrderSlot' }, width: 220 },
{ key: 'refund', title: '支付订单号', scopedSlots: { customRender: 'payOrderSlot' }, width: '280px' }, { key: 'refund', title: '支付订单号', scopedSlots: { customRender: 'payOrderSlot' }, width: 220 },
// { key: 'refundOrderId', title: '退款订单号', dataIndex: 'refundOrderId' }, { key: 'state', title: '状态', scopedSlots: { customRender: 'stateSlot' }, width: 100 },
// { key: 'payOrderId', title: '支付订单号', dataIndex: 'payOrderId' }, { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', width: 120 },
// { key: 'mchRefundNo', title: '商户退款单号', dataIndex: 'mchRefundNo' }, { key: 'op', title: '操作', width: 100, fixed: 'right', scopedSlots: { customRender: 'opSlot' } }
{ key: 'state', title: '状态', scopedSlots: { customRender: 'stateSlot' } },
{ key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
{ key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
] ]
export default { export default {
@ -356,17 +352,6 @@
} }
}, },
computed: { computed: {
rowSelection () {
const that = this
return {
onChange: (selectedRowKeys, selectedRows) => {
that.selectedIds = [] // 清空选中数组
selectedRows.forEach(function (data) { // 赋值选中参数
that.selectedIds.push(data.payOrderId)
})
}
}
}
}, },
mounted () { mounted () {
}, },

8
jeepay-ui-merchant/src/components/JeepayTable/JeepayTable.vue
View File

@ -125,14 +125,18 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less">
// 表格默认左侧10px, 表格内padding 8px
.ant-table-body-outer { margin-left: 10px }
// 调整antdv 的table默认padding高度 // 调整antdv 的table默认padding高度
.ant-table-fixed{ .ant-table-fixed{
tr{ tr{
th{ th{
padding: 8px 16px !important; padding: 8px 8px !important;
} }
td{ td{
padding: 8px 16px !important; padding: 8px 8px !important;
} }
} }
} }