【商保系统】-回款管理-账单列表和已关联账单样式调整

src/views/verification/collectionDetail.vue

@@ -104,16 +104,16 @@
 						<a-tabs type="card" v-model="activeKey1">
 							<a-tab-pane v-for="pane in panes1" :key="pane.key" :tab="pane.title">
 								<div>
-									<a-row class="search-form">
+									<a-row type="flex" align="middle" class="search-form">
 										<a-form-model
 											ref="searchForm"
 											layout="inline"
-											:labelCol="{ span: 9 }"
-											:wrapperCol="{ span: 15 }"
+											:labelCol="{ span: 8 }"
+											:wrapperCol="{ span: 16 }"
 											:model="searchForm"
 										>
-											<a-row :gutter="30">
-												<a-col :lg="5" :sm="10">
+											<a-row>
+												<a-col :lg="4" :sm="12">
 													<a-form-model-item label="账单日期">
 														<a-range-picker
 															format="YYYY-MM-DD"
@@ -123,7 +123,7 @@
 														/>
 													</a-form-model-item>
 												</a-col>
-												<a-col :lg="4" :sm="10">
+												<a-col :lg="4" :sm="12">
 													<a-form-model-item label="病历号">
 														<a-input
 															v-model="searchForm.mrnNo"
@@ -144,7 +144,7 @@
 													</a-form-model-item>
 												</a-col>
 												<a-col :lg="4" :sm="12">
-													<a-form-model-item label="状态">
+													<a-form-model-item label="状态" :labelCol="{ span: 7 }" :wrapperCol="{ span: 14 }">
 														<a-select v-model="searchForm.rStatus" placeholder="请选择状态" allowClear>
 															<a-select-option v-for="item in statusOptions" :key="item.code" :value="item.code">
 																{{ item.name }}
@@ -162,12 +162,17 @@
 														/>
 													</a-form-model-item>
 												</a-col>
-												<a-col :lg="2" :sm="12">
-													<div class="btn-div mar-bottom10 none-label">
+												<a-col class="flex-col" :lg="4" :sm="12">
+													<div>
 														<a-button type="primary" @click="searchData">
 															<Icon name="ssisearch_active" :size="14" />查询
 														</a-button>
 													</div>
+													<div v-if="activeKey1 === '0' && selectedRows.length > 0">
+														<a-button type="primary" @click="exportExcel">
+															<Icon name="ssidaochu" :size="14" />导出
+														</a-button>
+													</div>
 												</a-col>
 											</a-row>
 										</a-form-model>
@@ -176,53 +181,52 @@
 								<!-- 已关联账单 -->
 								<template v-if="activeKey1 === '0'">
 									<template v-if="selectedRows.length > 0">
-										<div class="table-title">
-											<a-button class="mar-left10" type="primary" @click="exportExcel">
-												<Icon name="ssidaochu" :size="14" />导出
-											</a-button>
+										<div class="all-list_box">
+											<a-table
+												class="table-content"
+												:rowClassName="rowClassName"
+												:columns="selectedColumns"
+												:data-source="selectedRows"
+												:scroll="{ x: '100%', y: tableHeight }"
+												:pagination="false"
+											>
+												<template slot="status" slot-scope="text">
+													<span :style="{ color: text == 2 ? 'red' : '' }">{{
+														text == 1 ? '有效' : text == 2 ? '无效' : ''
+													}}</span>
+												</template>
+												<template slot="operation" slot-scope="text, record, index">
+													<a-button type="link" class="danger" @click.stop="delRecord(record, index)">删除</a-button>
+												</template>
+											</a-table>
 										</div>
-										<a-table
-											class="table-content"
-											:rowClassName="rowClassName"
-											:columns="selectedColumns"
-											:data-source="selectedRows"
-											:scroll="{ x: '100%', y: tableHeight }"
-											:pagination="false"
-										>
-											<template slot="status" slot-scope="text">
-												<span :style="{ color: text == 2 ? 'red' : '' }">{{
-													text == 1 ? '有效' : text == 2 ? '无效' : ''
-												}}</span>
-											</template>
-											<template slot="operation" slot-scope="text, record, index">
-												<a-button type="link" class="danger" @click.stop="delRecord(record, index)">删除</a-button>
-											</template>
-										</a-table>
 									</template>
 								</template>
 								<template v-else>
 									<!-- table -->
 									<template v-if="isEdit">
-										<a-table
-											class="table-content all-list"
-											:columns="columns"
-											:data-source="dataList"
-											:scroll="{ x: '100%', y: tableHeight }"
-											:pagination="false"
-											:rowKey="'id'"
-											:row-selection="{
-												selectedRowKeys: selectedRowKeys,
-												onSelect: onSelectChange,
-												onSelectAll: onSelectAll
-											}"
-										>
-											<template slot="status" slot-scope="text">
-												<span :style="{ color: text == 2 ? 'red' : '' }">{{
-													text == 1 ? '有效' : text == 2 ? '无效' : ''
-												}}</span>
-											</template>
-										</a-table>
-										<BurtPagination class="pagination" :pagination="pagination" @pageChange="pageChange" />
+										<div class="all-list_box">
+											<a-table
+												class="table-content all-list"
+												:columns="columns"
+												:data-source="dataList"
+												:scroll="{ x: '100%', y: tableHeight }"
+												:pagination="false"
+												:rowKey="'id'"
+												:row-selection="{
+													selectedRowKeys: selectedRowKeys,
+													onSelect: onSelectChange,
+													onSelectAll: onSelectAll
+												}"
+											>
+												<template slot="status" slot-scope="text">
+													<span :style="{ color: text == 2 ? 'red' : '' }">{{
+														text == 1 ? '有效' : text == 2 ? '无效' : ''
+													}}</span>
+												</template>
+											</a-table>
+											<BurtPagination class="pagination" :pagination="pagination" @pageChange="pageChange" />
+										</div>
 									</template>
 								</template>
 							</a-tab-pane>
@@ -856,10 +860,9 @@ export default {
 		opacity: 0;
 	}
 }
-.table-title {
-	font-size: 15px;
-	margin: 6px 0;
-	text-align: right;
+.all-list_box {
+	height: calc(100vh - 430px);
+	overflow-y: auto;
 }
 .table-content {
 	::v-deep {
@@ -875,6 +878,12 @@ export default {
 	.ant-form .ant-form-item {
 		margin-bottom: 4px;
 	}
+	.flex-col {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		height: 44px;
+	}
 }
 .ant-btn .icon-class {
 	.mg-r(10);
@@ -904,6 +913,11 @@ export default {
 	overflow-y: auto;
 	overflow-x: hidden;
 	padding-right: 12px;
+	::v-deep {
+		.ant-form-item {
+			margin-right: 0;
+		}
+	}
 	.pagination {
 		margin-top: 10px;
 		::v-deep .jump-page {