Prechádzať zdrojové kódy

自适应样式引入
页面列表自适应取代固定宽度

ZhangWenQiang 5 rokov pred
rodič
commit
7d6fdaac85

+ 15 - 0
src/assets/less/TableExpand.less

@@ -0,0 +1,15 @@
+/** [表格主题样式一] 表格强制列不换行 */
+.j-table-force-nowrap {
+  td, th {
+    white-space: nowrap;
+  }
+
+  .ant-table-selection-column {
+    padding: 12px 22px !important;
+  }
+
+  /** 列自适应,弊端会导致列宽失效 */
+  &.ant-table-wrapper .ant-table-content {
+    overflow-x: auto;
+  }
+}

+ 2 - 11
src/views/hlgpayment/HlgPaymentDetailList.vue

@@ -63,8 +63,7 @@
         :dataSource="dataSource"
         :pagination="ipagination"
         :loading="loading"
-        :scroll="{ x: 1600 }"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio',getCheckboxProps:getCheckboxProps}"
+        class="j-table-force-nowrap"
         @change="handleTableChange">
 
         <span slot="status" slot-scope="text, record">
@@ -83,6 +82,7 @@
 
 <script>
 
+  import '@/assets/less/TableExpand.less'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import HlgPaymentReissueModal from './modules/HlgPaymentReissueModal'
   import { httpAction, getAction, putAction } from '@/api/manage'
@@ -107,25 +107,21 @@
           {
             title:'姓名',
             align:"left",
-            width: 100,
             dataIndex: 'userName'
           },
           {
             title:'身份证号',
             align:"left",
-            width: 200,
             dataIndex: 'idcardNumber'
           },
           {
             title:'银行卡号',
             align:"left",
-            width: 200,
             dataIndex: 'cardNumber'
           },
           {
             title:'银行名称',
             align:"left",
-            width: 200,
             dataIndex: 'eacbnk',
             customRender: function(text, record) {
               return record.bnkflg === 'Y' ? '招商银行' : text
@@ -134,7 +130,6 @@
           {
             title:'开户地',
             align:"left",
-            width: 200,
             dataIndex: 'rcveaa',
             customRender: function(text, record) {
               return text ? text : '--'
@@ -143,26 +138,22 @@
           {
             title:'支付状态',
             align:"left",
-            width: 200,
             dataIndex: 'status_dictText',
             scopedSlots: { customRender: 'status' }
           },
           {
             title:'付款金额',
             align:"left",
-            width: 150,
             dataIndex: 'payment'
           },
           {
             title:'到账金额',
             align:"left",
-            width: 150,
             dataIndex: 'netPayment'
           },
           {
             title: '返回结果时间',
             align: "left",
-            width: 200,
             dataIndex: 'paymentResultTime',
             customRender: function(text, record) {
               return text ? text : '--'

+ 2 - 12
src/views/hlgpayment/HlgPaymentList.vue

@@ -57,7 +57,7 @@
           :dataSource="dataSource"
           :pagination="ipagination"
           :loading="loading"
-          :scroll="{ x: 2200 }"
+          class="j-table-force-nowrap"
           @change="handleTableChange">
 
           <span slot="paymentCode" slot-scope="text,record">
@@ -102,6 +102,7 @@
 
 <script>
 
+  import '@/assets/less/TableExpand.less'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import HlgPaymentImportModal from './modules/HlgPaymentImportModal'
   import HlgPaymentReviewModal from './modules/HlgPaymentReviewModal'
@@ -128,20 +129,17 @@
           {
             title: '付款单号',
             align: 'left',
-            width: 200,
             dataIndex: 'paymentCode',
             scopedSlots: { customRender: 'paymentCode' }
           },
           {
             title: '付款企业',
             align: 'left',
-            width: 300,
             dataIndex: 'companyName'
           },
           {
             title: '服务商',
             align: 'left',
-            width: 300,
             dataIndex: 'subcontractorName',
             customRender: (value,record) => {
               return value ? value:'--'
@@ -150,47 +148,39 @@
           {
             title: '付款金额',
             align: 'left',
-            width: 200,
             dataIndex: 'payment'
           },
           {
             title:'服务费',
             align:"left",
-            width:150,
             dataIndex: 'serviceFee'
           },
           // (0:待复核 1:付款中 2:复核未通过 3:已付款)
           {
             title: '状态',
             align: 'left',
-            width: 150,
             dataIndex: 'status_dictText',
             scopedSlots: { customRender: 'status' }
           },
           {
             title: '业务处理情况',
             align: 'left',
-            width: 500,
             dataIndex: 'remark'
           },
           {
             title: '导入时间',
             align: 'left',
-            width: 200,
             dataIndex: 'createTime'
           },
           {
             title: '导入人',
             align: 'left',
-            width: 200,
             dataIndex: 'createBy'
           },
           {
             title: '操作',
             dataIndex: 'action',
             align: 'left',
-            width: 240,
-            fixed: 'right',
             scopedSlots: { customRender: 'action' }
           }
         ],