更新工作台与车辆租赁合同新增页面

Made-with: Cursor

web端/工作台.jsx

@@ -366,18 +366,19 @@ const Component = function () {
 		return n;
 	}, [noticeList]);
 
-	var markAllNoticesRead = useCallback(function () {
+	var markNoticeRead = useCallback(function (id) {
 		setNoticeList(function (prev) {
 			return (prev || []).map(function (n) {
+				if (n.id !== id) return n;
+				if (n.read) return n;
 				return Object.assign({}, n, { read: true });
 			});
 		});
 	}, []);
 
 	var openNoticeModal = useCallback(function () {
-		markAllNoticesRead();
 		setNoticeModalOpen(true);
-	}, [markAllNoticesRead]);
+	}, []);
 
 	var pushUrgeNotice = useCallback(function (taskRow) {
 		var adminName = mockAdminDisplayName;
@@ -908,9 +909,35 @@ const Component = function () {
 		return [
 			{ title: '时间', dataIndex: 'time', key: 'time', width: 150 },
 			{ title: '通知类型', dataIndex: 'type', key: 'type', width: 160 },
-			{ title: '内容', dataIndex: 'content', key: 'content', ellipsis: true }
+			{ title: '内容', dataIndex: 'content', key: 'content', ellipsis: true },
+			{
+				title: '状态',
+				key: 'read',
+				width: 72,
+				render: function (_, record) {
+					return record.read
+						? React.createElement(Tag, { color: 'default', style: { margin: 0, fontSize: 11, lineHeight: '18px' } }, '已读')
+						: React.createElement(Tag, { color: 'warning', style: { margin: 0, fontSize: 11, lineHeight: '18px' } }, '未读');
+				}
+			},
+			{
+				title: '操作',
+				key: 'markRead',
+				width: 88,
+				render: function (_, record) {
+					if (record.read) {
+						return React.createElement(Text, { type: 'secondary', style: { fontSize: 12 } }, '—');
+					}
+					return React.createElement(Button, {
+						type: 'link',
+						size: 'small',
+						style: { padding: 0, height: 'auto' },
+						onClick: function () { markNoticeRead(record.id); }
+					}, '设为已读');
+				}
+			}
 		];
-	}, []);
+	}, [markNoticeRead]);
 
 	var overdueDeliveryPopoverTableStyle = { width: '100%', borderCollapse: 'collapse', fontSize: 12 };
 	var overdueDeliveryPopoverThStyle = { padding: '6px 8px', textAlign: 'left', borderBottom: '1px solid #f0f0f0', backgroundColor: '#fafafa', fontWeight: 600 };
@@ -1354,10 +1381,20 @@ const Component = function () {
 						? React.createElement(Tag, { color: 'warning', style: { marginLeft: 6, fontSize: 11, lineHeight: '18px', padding: '0 6px' } }, '未读')
 						: null
 				),
+				React.createElement('div', { style: { display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' } },
 					React.createElement(Text, {
 						ellipsis: { tooltip: true },
-					style: { fontSize: 12, color: 'rgba(0,0,0,0.78)', display: 'block', lineHeight: 1.45, width: '100%' }
+						style: { fontSize: 12, color: 'rgba(0,0,0,0.78)', display: 'block', lineHeight: 1.45, flex: 1, minWidth: 0 }
-				}, n.content)
+					}, n.content),
+					!n.read
+						? React.createElement(Button, {
+							type: 'link',
+							size: 'small',
+							style: { padding: 0, flexShrink: 0, height: 'auto', lineHeight: 1.45, fontSize: 12 },
+							onClick: function () { markNoticeRead(n.id); }
+						}, '设为已读')
+						: null
+				)
 			);
 		});
 		return React.createElement(Card, {
@@ -1803,7 +1840,8 @@ const Component = function () {
 					rowKey: 'id',
 					columns: noticeColumns,
 					dataSource: noticeList,
-					pagination: { pageSize: 8, showSizeChanger: false }
+					pagination: { pageSize: 8, showSizeChanger: false },
+					scroll: { x: 720 }
 				})
 			),