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

src/components/Antd/index.js

-import Vue from "vue";
-import {
-  Row,
-  Col,
-  menu,
-  dropdown,
-  Table,
-  message,
-  pagination,
-  FormModel,
-  Select,
-  DatePicker,
-  Input,
-  InputNumber,
-  Radio,
-  upload,
-  Button,
-  notification,
-  popconfirm,
-  Modal,
-  modal,
-  Spin,
-  Collapse,
-  Tabs,
-  Tooltip
-} from "ant-design-vue";
-
-export default () => {
-  let els = [
-    Row,
-    Col,
-    menu,
-    dropdown,
-    Table,
-    message,
-    pagination,
-    FormModel,
-    Select,
-    DatePicker,
-    Input,
-    InputNumber,
-    Radio,
-    upload,
-    Button,
-    notification,
-    popconfirm,
-    Modal,
-    modal,
-    Spin,
-    Collapse,
-    Tabs,
-    Tooltip
-  ];
-  // 注册
-  els.forEach((item) => {
-    Vue.use(item);
-  });
-  // 全局提示
-  Vue.prototype.$msg = notification;
-  Vue.prototype.$message = message;
-  Vue.prototype.$modal = Modal;
-};
+import Vue from "vue";
+import {
+  Row,
+  Col,
+  menu,
+  dropdown,
+  Table,
+  message,
+  pagination,
+  FormModel,
+  Select,
+  DatePicker,
+  Input,
+  InputNumber,
+  Radio,
+  upload,
+  Button,
+  notification,
+  popconfirm,
+  Modal,
+  modal,
+  Spin,
+  Collapse,
+  Tabs,
+  Tooltip,
+	Popover
+} from "ant-design-vue";
+
+export default () => {
+  let els = [
+    Row,
+    Col,
+    menu,
+    dropdown,
+    Table,
+    message,
+    pagination,
+    FormModel,
+    Select,
+    DatePicker,
+    Input,
+    InputNumber,
+    Radio,
+    upload,
+    Button,
+    notification,
+    popconfirm,
+    Modal,
+    modal,
+    Spin,
+    Collapse,
+    Tabs,
+    Tooltip,
+		Popover
+  ];
+  // 注册
+  els.forEach((item) => {
+    Vue.use(item);
+  });
+  // 全局提示
+  Vue.prototype.$msg = notification;
+  Vue.prototype.$message = message;
+  Vue.prototype.$modal = Modal;
+};

src/views/verification/collectionDetail.vue

@@ -423,14 +423,30 @@ export default {
 			};
 			base[10].customRender = (val, row) => {
 				return (
-					<a-input
-						v-model={row.remark}
-						allow-clear
-						disabled={!this.isEdit}
-						onBlur={() => {
-							this.syncData(row);
-						}}
-					/>
+					<div>
+						{this.isEdit ? (
+							<a-popover title="备注" trigger="click">
+								<template slot="content">
+									<a-textarea
+										class="remark_inp"
+										v-model={row.remark}
+										auto-size={{ minRows: 3, maxRows: 5 }}
+										allow-clear
+										disabled={!this.isEdit}
+									></a-textarea>
+								</template>
+								<a-tooltip>
+									<template slot="title">{row.remark}</template>
+									<a-input v-model={row.remark} allow-clear disabled={!this.isEdit} />
+								</a-tooltip>
+							</a-popover>
+						) : (
+							<a-tooltip>
+								<template slot="title">{row.remark}</template>
+								<a-input v-model={row.remark} disabled />
+							</a-tooltip>
+						)}
+					</div>
 				);
 			};
 			base[11] = {
@@ -543,14 +559,6 @@ export default {
 		rowClassName(record) {
 			return record.hidden ? 'hide_' : '';
 		},
-		// 已关联账单数据同步
-		syncData(row, field) {
-			this.selectedRows.forEach((item) => {
-				if (item.id === row.id) {
-					item[field] = row[field];
-				}
-			});
-		},
 		// 账单查询
 		searchData() {
 			this._getNewEOBList();
@@ -567,7 +575,7 @@ export default {
 			});
 			this.panes[Number(this.activeKey)].show = true;
 		},
-		changeAmount(row, field) {
+		changeAmount(row) {
 			let totalMoney = Number(this.form.backAmountCny || 0);
 			this.selectedRows.forEach((item) => {
 				totalMoney -= Number(item.backAmount);
@@ -578,7 +586,6 @@ export default {
 			if (Number(row.actualAmount || 0) - Number(row.backAmount || 0) < 0) {
 				this.$message.warning('录入账单回款金额大于账单金额');
 			}
-			this.syncData(row, field);
 		},
 		onSelectChange(selectedRow, selected) {
 			selectedRow['backAmount'] =
@@ -950,4 +957,7 @@ export default {
 		margin-bottom: 4px !important;
 	}
 }
+.remark_inp {
+	width: 300px;
+}
 </style>