feat(richedit): 添加信号规则筛选功能及展示

- 新增获取信号规则列表API接口
- 在富文本编辑页面添加信号规则筛选组件
- 表格中新增信号规则和媒体来源展示列
- 为表格项添加公司和标签展示样式

src/api/api.ts

@@ -350,3 +350,12 @@ export const doNewReturn = (params?: any) => {
 		params
 	});
 };
+
+// 筛选项-获取信号规则级联列表
+export const getSignalRules = (params?: any) => {
+	return request({
+		url: '/news/getSignalRulesList',
+		method: 'get',
+		params
+	});
+};

src/views/pages/richedit/index.vue

@@ -34,6 +34,8 @@
 					</el-space>
 
 					<div class="colHeader-right-2">
+
+
 						<el-date-picker v-model="daterange" type="daterange" range-separator="至"
 							value-format="YYYY-MM-DD" start-placeholder="选择报道时间" end-placeholder="选择报道时间"
 							style="margin-right: 12px" @change="handleSearch" />
@@ -62,7 +64,21 @@
 						</div>
 					</div>
 
-					<!-- <el-button type="primary" icon="Plus" @click="toDetail({}, false)">创建新资讯</el-button> -->
+					<div class="colHeader-right-2" style="gap: 10px">
+						<el-select v-model="signalId1" clearable placeholder="含任一信号规则" multiple size="large"
+							style="width: 240px" filterable @change="signalChange($event, 1)">
+
+							<el-option v-for="item in signalRulesList1" :key="item.value" :value="item.value"
+								:label="item.label"></el-option>
+						</el-select>
+
+						<el-select v-model="signalId2" clearable placeholder="不含任一信号规则" multiple size="large"
+							style="width: 240px" filterable @change="signalChange($event, 2)">
+							<el-option v-for="item in signalRulesList2" :key="item.value" :value="item.value"
+								:label="item.label"></el-option>
+						</el-select>
+					</div>
+
 				</div>
 			</div>
 		</div>
@@ -71,10 +87,36 @@
 			:tableLoading="tableLoading" @currentChange="currentChange" @sizeChange="sizeChange">
 			<el-table-column prop="title" label="标题" align="left" width="380">
 				<template v-slot="scope">
-					<span class="cursor-pointer" @click="goDetail(1, scope.row, true)" v-html="scope.row.title"></span>
+					<div style="display: flex; flex-direction: column;gap: 5px;padding: 10px 0;">
+						<span class="cursor-pointer" @click="goDetail(1, scope.row, true)"
+							v-html="scope.row.title"></span>
+
+						<div class="labels">
+							<div v-for="company in scope.row.companys" :key="company" class="label_item">
+								{{ company }}
+							</div>
+						</div>
+
+						<div class="labels">
+							<div v-for="(label, index) in scope.row.labels" :key="label" class="label_item"
+								:style="{ backgroundColor: index == 0 ? '#EEE6CD' : '#CFDCF3' }">
+								{{ label }}
+							</div>
+						</div>
+					</div>
+
 				</template>
 			</el-table-column>
 
+			<el-table-column label="信号规则" align="center" width="120">
+				<template v-slot="scope">
+					<div v-for="item in scope.row.signalNames" :key="item" class="label_item">
+						{{ item }}
+					</div>
+				</template>
+			</el-table-column>
+
+			<el-table-column label="媒体来源" align="center" width="120" prop="sourceName"></el-table-column>
 			<!-- :show-overflow-tooltip="true" -->
 			<el-table-column prop="status" align="center" width="120">
 				<template #header>
@@ -358,6 +400,7 @@ import {
 	doRecover,
 	doNewCheck,
 	doNewReturn,
+	getSignalRules
 } from '/@/api/api';
 import { highlightTitle } from '/@/utils/highlight';
 import clipboard from 'clipboard';
@@ -477,7 +520,24 @@ async function getData() {
 					}
 				});
 				item.title = highlightTitle(item.title, form.value.keyword);
+
+				item.companys = [
+					"英伟达",
+					"微软",
+				]
+
+				item.labels = [
+					"新科技-人工智能",
+					"新科技-人工智能",
+				]
+
+				item.signalNames = [
+					"信号规则1",
+					"信号规则2",
+				]
 			});
+
+
 		}
 	} catch (error) {
 		tableLoading.value = false;
@@ -792,6 +852,58 @@ async function doNewReturnFn(item) {
 	}
 }
 
+// 含任一信号规则
+const signalRulesList1 = ref([
+	{
+		label: '全部',
+		value: 1,
+	},
+	{
+		label: '全部1',
+		value: 2,
+	},
+])
+
+// 不含任一信号规则
+const signalRulesList2 = ref([
+	{
+		label: '全部',
+		value: 1,
+	},
+	{
+		label: '全部1',
+		value: 2,
+	},
+])
+
+async function getSignalRulesFn() {
+	let { code, data } = await getSignalRules({
+	});
+	if (code == 200) {
+		signalRulesList.value = data.map((item: any) => {
+			return {
+				label: item.name,
+				value: item.id,
+			};
+		});
+	}
+}
+
+const signalId1 = ref([])
+const signalId2 = ref([])
+
+function signalChange(event, type) {
+	console.log("🚀 ~ signalChange ~ event:", event)
+	if (type == 1) {
+		form.value.signalId1 = signalId1.value;
+	} else {
+		form.value.signalId2 = signalId2.value;
+	}
+
+	getData()
+}
+
+
 // 页面加载时
 onMounted(async () => {
 	if (isMobileByWidth() && (Session.get('userInfoLocal').userType == '01' || Session.get('userInfoLocal').userType == '02')) {
@@ -818,6 +930,8 @@ onMounted(async () => {
 			}
 		});
 	}
+
+	getSignalRulesFn()
 });
 </script>
 
@@ -923,4 +1037,30 @@ onMounted(async () => {
 		margin-bottom: 10px;
 	}
 }
+
+.labels {
+	display: flex;
+	gap: 5px;
+
+	.label_item {
+		height: 24px;
+		background: #F6F6F6;
+		border-radius: 2px;
+		border: 1px solid #E2E2E2;
+		padding: 0 5px;
+
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		font-size: 12px;
+		color: #656363;
+		line-height: 16px;
+		text-align: left;
+		font-style: normal;
+
+		display: flex;
+		text-align: center;
+		justify-content: center;
+		align-items: center;
+	}
+}
 </style>