样式调整

src/layout/navBars/breadcrumb/telControl.vue

@@ -404,24 +404,14 @@
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-						<el-form-item
-							label="办理意见"
-							class="textarea"
-							prop="opinion"
-							:rules="[{ required: true, message: '请填写小休办理意见', trigger: 'blur' }]"
-						>
-							<el-input
+						<el-form-item label="办理意见" prop="opinion" :rules="[{ required: true, message: '请填写小休办理意见', trigger: 'blur' }]">
+							<Comment
+								@chooseComment="chooseComment"
 								v-model="state.restForm.opinion"
-								type="textarea"
-								:autosize="{ minRows: 10, maxRows: 10 }"
+								:loading="state.loading"
 								placeholder="请填写小休办理意见"
-								clearable
-							>
-							</el-input>
-							<span class="bttons">
-								<el-button @click="showComents" class="default-button" :loading="state.loading">常用意见</el-button>
-								<el-button type="primary" @click="onAddComments" :loading="state.loading">添加到常用意见</el-button>
-							</span>
+								:commonEeum="commonEeum.RestReason"
+							/>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -453,8 +443,6 @@
 				<el-button type="primary" @click="clickOnRest" :loading="state.loading">提 交</el-button>
 			</span>
 		</template>
-		<!-- 常用意见管理 -->
-		<Comment ref="CommentRef" @chooseComment="chooseComment" />
 	</el-dialog>
 
 	<!-- 转接 -->
@@ -617,7 +605,7 @@ import {
 	hangupApi,
 	restFlowStart,
 } from '/@/api/login/user';
-import { addCommon, commonList } from '/@/api/business/commonP';
+import { commonList } from '/@/api/business/commonP';
 import { auth } from '/@/utils/authFunction';
 
 // 引入组件
@@ -701,7 +689,6 @@ const restFormRef = ref(); //小休
 const transferFormRef = ref(); // 转接
 const outboundFormRef = ref(); //外呼
 const callForwardingFormRef = ref(); //呼叫转移
-const CommentRef = ref(); // 常用意见
 const dialogRestRef = ref(); // 小休申请弹窗
 const router = useRouter();
 //  signalR 初始化signalr
@@ -905,7 +892,7 @@ const onControlClick = (val: string) => {
 			else onCallForwarding();
 			break;
 		case 'evaluate': //评价
-		if (!auth('999104')) ElMessage.error('抱歉，您没有评价权限！');
+			if (!auth('999104')) ElMessage.error('抱歉，您没有评价权限！');
 			else onEvaluate();
 			break;
 		default:
@@ -1187,27 +1174,9 @@ const clickOnRest = () => {
 const mouseup = () => {
 	state.trasform = dialogRestRef.value.dialogContentRef.$el.style.transform;
 };
-// 打开常用意见管理
-const showComents = () => {
-	CommentRef.value.openDialog(commonEeum.Rest);
-};
-// 添加到常用意见
-const onAddComments = async () => {
-	if (!state.restForm.opinion) {
-		ElMessage.warning(`请先填写小休常用意见`);
-		return;
-	}
-	await addCommon({
-		typeCode: commonEeum.Rest,
-		content: state.restForm.opinion,
-	});
-	ElMessage.success('操作成功');
-	CommentRef.value.closeDialog();
-};
 // 选择常用意见 填入填写框
 const chooseComment = (item: any) => {
 	state.restForm.opinion += item.content;
-	CommentRef.value.closeDialog();
 };
 // 小休结束
 const onRestEnd = () => {
@@ -1560,14 +1529,6 @@ onUnmounted(() => {
 .seizeSeat-box {
 	display: none;
 }
-.textarea {
-	position: relative;
-	.bttons {
-		position: absolute;
-		right: 10px;
-		bottom: 10px;
-	}
-}
 .phoneControls {
 	display: flex;
 	flex: 1;

src/views/business/order/accept/orderAdd.vue

@@ -368,25 +368,8 @@
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-								<el-form-item
-									label="诉求详情"
-									prop="content"
-									class="textarea"
-									:rules="[{ required: true, message: '请填写诉求详情', trigger: 'blur' }]"
-								>
-									<el-input
-										v-model="state.ruleForm.content"
-										type="textarea"
-										:autosize="{ minRows: 10, maxRows: 20 }"
-										placeholder="请填写诉求详情"
-										clearable
-										maxlength="2000"
-									>
-									</el-input>
-									<span class="bttons">
-										<el-button @click="showComents" class="default-button" :loading="state.formLoading">常用意见</el-button>
-										<el-button type="primary" @click="onAddComments" :loading="state.formLoading">添加到常用意见</el-button>
-									</span>
+								<el-form-item label="诉求详情" prop="content" :rules="[{ required: true, message: '请填写诉求详情', trigger: 'blur' }]">
+									<Comment @chooseComment="chooseComment" v-model="state.ruleForm.content" placeholder="请填写诉求详情" :loading="state.formLoading" :commonEeum="commonEeum.Seat" modal/>
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -542,8 +525,6 @@
 		</el-row>
 		<!-- 拓展表单 -->
 		<ExpandForm ref="ExpandFormRef" @saveExpandForm="saveExpandForm" />
-		<!-- 常用意见管理 -->
-		<Comment ref="CommentRef" @chooseComment="chooseComment" modal />
 		<!-- 历史工单 -->
 		<History ref="HistoryOrderRef" @saveSlect="saveSlect" />
 		<!-- 提交流程 -->
@@ -563,7 +544,7 @@ import { useTelStatus } from '/@/stores/telStatus';
 import { commonEeum } from '/@/utils/tools';
 import { orderBasedataAdd, orderAdd, hotspottype, historyOrder } from '/@/api/business/order';
 import { useUserInfo } from '/@/stores/userInfo';
-import { addCommon, treeArea } from '/@/api/business/commonP';
+import { treeArea } from '/@/api/business/commonP';
 import { knowpopscreen, getkeyword } from '/@/api/knowledge';
 import mittBus from '/@/utils/mitt';
 
@@ -647,7 +628,6 @@ state.ruleForm.employeeStaffNo = userInfos.value.staffNo;
 const route = useRoute();
 const router = useRouter();
 const HistoryOrderRef = ref();
-const CommentRef = ref();
 const hotspotRef = ref();
 const SupplyRef = ref();
 // 证件号码验证
@@ -878,27 +858,9 @@ const handleRowChange = (row: any) => {
 	state.ruleForm.duplicateId = row.id;
 	state.ruleForm.duplicateName = row.title;
 };
-// 打开常用意见管理
-const showComents = () => {
-	CommentRef.value.openDialog(commonEeum.Seat);
-};
-// 添加到常用意见
-const onAddComments = async () => {
-	if (!state.ruleForm.content) {
-		ElMessage.warning('请先输入诉求详情');
-		return;
-	}
-	await addCommon({
-		typeCode: commonEeum.Seat,
-		content: state.ruleForm.content,
-	});
-	ElMessage.success('操作成功');
-	CommentRef.value.closeDialog();
-};
 // 选中常用意见
 const chooseComment = (item: any) => {
 	state.ruleForm.content += item.content;
-	CommentRef.value.closeDialog();
 };
 // 流程提交成功
 const onSubmitProcess = () => {
@@ -1001,14 +963,6 @@ onMounted(async () => {
 	border-left: 4px solid var(--el-color-primary);
 	padding-left: 7px;
 }
-.textarea {
-	position: relative;
-	.bttons {
-		position: absolute;
-		right: 10px;
-		bottom: 10px;
-	}
-}
 .order-add-container {
 	color: var(--hotline-color-text-main);
 	.right-content {

src/views/business/order/accept/orderEdit.vue

@@ -374,25 +374,15 @@
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-								<el-form-item
-									label="诉求详情"
-									prop="content"
-									class="textarea"
-									:rules="[{ required: true, message: '请填写诉求详情', trigger: 'blur' }]"
-								>
-									<el-input
+								<el-form-item label="诉求详情" prop="content" :rules="[{ required: true, message: '请填写诉求详情', trigger: 'blur' }]">
+									<Comment
+										@chooseComment="chooseComment"
 										v-model="state.ruleForm.content"
-										type="textarea"
-										:autosize="{ minRows: 10, maxRows: 20 }"
 										placeholder="请填写诉求详情"
-										clearable
-										maxlength="2000"
-									>
-									</el-input>
-									<span class="bttons">
-										<el-button @click="showComents" class="default-button" :loading="state.historyOrderLoading">常用意见</el-button>
-										<el-button type="primary" @click="onAddComments" :loading="state.historyOrderLoading">添加到常用意见</el-button>
-									</span>
+										:loading="state.formLoading"
+										:commonEeum="commonEeum.Seat"
+										modal
+									/>
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -546,8 +536,6 @@
 		</el-row>
 		<!-- 拓展表单 -->
 		<ExpandForm ref="ExpandFormRef" @saveExpandForm="saveExpandForm" />
-		<!-- 常用意见管理 -->
-		<Comment ref="CommentRef" @chooseComment="chooseComment" modal />
 		<!-- 历史工单 -->
 		<History ref="HistoryOrderRef" @saveSlect="saveSlect" />
 		<!-- 提交流程 -->
@@ -567,7 +555,7 @@ import { useTelStatus } from '/@/stores/telStatus';
 import { desensitizationPhone, commonEeum } from '/@/utils/tools';
 import { orderBasedataAdd, hotspottype, historyOrder, orderDetail, orderEdit } from '/@/api/business/order';
 import { useUserInfo } from '/@/stores/userInfo';
-import { addCommon, treeArea } from '/@/api/business/commonP';
+import { treeArea } from '/@/api/business/commonP';
 import { knowpopscreen, getkeyword } from '/@/api/knowledge';
 import mittBus from '/@/utils/mitt';
 
@@ -651,7 +639,6 @@ state.ruleForm.employeeStaffNo = userInfos.value.staffNo;
 const route = useRoute();
 const router = useRouter();
 const HistoryOrderRef = ref();
-const CommentRef = ref();
 const hotspotRef = ref();
 const SupplyRef = ref();
 // 证件号码验证
@@ -884,27 +871,9 @@ const handleRowChange = (row: any) => {
 	state.ruleForm.duplicateId = row.id;
 	state.ruleForm.duplicateName = row.title;
 };
-// 打开常用意见管理
-const showComents = () => {
-	CommentRef.value.openDialog(commonEeum.Seat);
-};
-// 添加到常用意见
-const onAddComments = async () => {
-	if (!state.ruleForm.content) {
-		ElMessage.warning('请先输入诉求详情');
-		return;
-	}
-	await addCommon({
-		typeCode: commonEeum.Seat,
-		content: state.ruleForm.content,
-	});
-	ElMessage.success('操作成功');
-	CommentRef.value.closeDialog();
-};
 // 选中常用意见
 const chooseComment = (item: any) => {
 	state.ruleForm.content += item.content;
-	CommentRef.value.closeDialog();
 };
 // 历史工单搜索
 const searchKnowledge = (value?: string) => {
@@ -1063,14 +1032,6 @@ onMounted(async () => {
 	border-left: 4px solid var(--el-color-primary);
 	padding-left: 7px;
 }
-.textarea {
-	position: relative;
-	.bttons {
-		position: absolute;
-		right: 10px;
-		bottom: 10px;
-	}
-}
 .order-edit-container {
 	color: var(--hotline-color-text-main);
 	.right-content {

src/views/business/order/components/Comment.vue

@@ -1,6 +1,12 @@
 <template>
-	<div>
-		<el-drawer v-model="state.showDrawer" size="35%" title="" :show-close="false" :modal="props.modal">
+	<div class="textarea w100">
+		<el-input v-model="value" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" :placeholder="placeholder" maxlength="2000"> </el-input>
+		<span class="bttons">
+			<el-button @click="showComents" class="default-button" :loading="loading">常用意见</el-button>
+			<el-button type="primary" @click="onAddComments" :loading="loading">添加到常用意见</el-button>
+		</span>
+
+		<el-drawer v-model="state.showDrawer" size="35%" title="" :show-close="false" :modal="modal">
 			<template #header="{ close }">
 				<div class="comments-header">
 					<div>
@@ -25,7 +31,7 @@
 					<template v-if="state.active === 'default' && !state.manage">
 						<ul class="comments-box">
 							<li class="comments-item" v-for="(item, index) in state.commentsList" :key="index" @click="chooseComment(item)">
-								<p class="text-ellipsis2">{{ item.content }}</p>
+								<p class="text-ellipsis2" :title="item.content">{{ item.content }}</p>
 							</li>
 						</ul>
 					</template>
@@ -37,9 +43,9 @@
 								v-for="(item, index) in state.commentsList"
 								:class="[item.ischeck === true ? 'choosed' : '']"
 								:key="index"
-								@click="handelRepeat(item, index)"
+								@click="handelComent(item, index)"
 							>
-								<p>{{ item.content }}</p>
+								<p class="text-ellipsis2" :title="item.content">{{ item.content }}</p>
 								<el-checkbox v-model="item.ischeck" class="check-icon" label="" v-if="item.ischeck" size="large" />
 							</li>
 						</ul>
@@ -76,16 +82,41 @@
 	</div>
 </template>
 
-<script setup lang="ts" name="orderCrculationRecord">
-import { reactive, ref } from 'vue';
+<script setup lang="ts" name="commentManage">
+import { reactive, ref, computed } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { commonList, addCommon, deleteCommon } from '/@/api/business/commonP';
-const emit = defineEmits(['chooseComment']);
+import { commonEeum } from '/@/utils/tools';
+const emit = defineEmits(['chooseComment', 'update:modelValue']);
 const props = defineProps({
 	modal: {
 		type: Boolean,
 		default: false,
 	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
+	placeholder: {
+		type: String,
+		default: '请填写内容',
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+	commonEeum: {
+		type: String,
+		default: commonEeum.Seat,
+	},
+});
+const value = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(value) {
+		emit('update:modelValue', value);
+	},
 });
 // 定义变量内容
 const state = reactive<any>({
@@ -101,27 +132,44 @@ const state = reactive<any>({
 	typecode: '',
 });
 const commentsFormRef = ref();
+// 打开常用意见管理
+const showComents = () => {
+	openDialog();
+};
+// 添加到常用意见
+const onAddComments = async () => {
+	if (!props.modelValue) {
+		ElMessage.warning(props.placeholder);
+		return;
+	}
+	await addCommon({
+		typeCode: props.commonEeum,
+		content: props.modelValue,
+	});
+	ElMessage.success('操作成功');
+	closeDialog();
+};
 // 打开弹窗
-const openDialog = async (val: any) => {
-	state.typecode = val;
+const openDialog = async () => {
+	state.typecode = props.commonEeum;
 	state.active = 'default';
 	commentsFormRef.value?.resetFields();
 	state.manage = false;
-	getList(val);
+	getList();
 	state.showDrawer = true;
 };
-const getList = async (val: any) => {
+const getList = async () => {
 	try {
 		state.loading = true;
-		const res: any = await commonList({ typecode: val });
+		const res: any = await commonList({ typecode: props.commonEeum });
 		state.commentsList = res.result;
 		state.loading = false;
 	} catch (error) {
 		state.loading = false;
 	}
 };
-// 选中常用意见
-const handelRepeat = (item: any, index: number) => {
+// 选中常用意见（管理）
+const handelComent = (item: any, index: number) => {
 	const repeatData = [...state.commentsList];
 	const repeatSelarr = [...state.chooseCommentList];
 	if (!repeatData[index].ischeck) {
@@ -136,12 +184,13 @@ const handelRepeat = (item: any, index: number) => {
 	}
 	state.chooseCommentList = repeatSelarr.filter((item: any) => item.ischeck);
 };
+// 重置状态
 const resetState = () => {
 	state.active = 'default';
 	state.manage = false;
 	state.chooseCommentList = [];
 	state.commentsForm.content = '';
-	getList(state.typecode);
+	getList();
 };
 // 删除常用意见
 const deleteComment = () => {
@@ -189,6 +238,7 @@ const commentSave = () => {
 // 选择常用意见 填入填写框
 const chooseComment = (item: any) => {
 	emit('chooseComment', item);
+	closeDialog();
 };
 // 关闭弹窗
 const closeDialog = () => {
@@ -201,6 +251,17 @@ defineExpose({
 });
 </script>
 <style lang="scss" scoped>
+.textarea {
+	position: relative;
+	.bttons {
+		position: absolute;
+		right: 10px;
+		bottom: 10px;
+	}
+	:deep(.el-textarea__inner) {
+		padding-bottom: 40px;
+	}
+}
 .comments-container {
 	.comments-box {
 		.comments-item {
@@ -210,6 +271,7 @@ defineExpose({
 			padding: 8px 15px;
 			cursor: pointer;
 			position: relative;
+			line-height: 18px;
 			&:hover {
 				box-shadow: 0 0 0 1px var(--el-color-primary) inset;
 				background-color: var(--hotline-bg-main-color);

src/views/business/order/components/Process.vue

@@ -84,25 +84,14 @@
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-						<el-form-item
-							:label="state.title + '意见'"
-							class="textarea"
-							prop="opinion"
-							:rules="[{ required: true, message: '请填写常用意见', trigger: 'blur' }]"
-						>
-							<el-input
+						<el-form-item :label="state.title + '意见'" prop="opinion" :rules="[{ required: true, message: '请填写常用意见', trigger: 'blur' }]">
+							<Comment
+								@chooseComment="chooseComment"
 								v-model="state.ruleForm.opinion"
-								type="textarea"
-								:autosize="{ minRows: 10, maxRows: 10 }"
 								placeholder="请填写常用意见"
-								clearable
-								max-length="2000"
-							>
-							</el-input>
-							<span class="bttons">
-								<el-button @click="showComents" class="default-button" :loading="state.loading">常用意见</el-button>
-								<el-button type="primary" @click="onAddComments" :loading="state.loading">添加到常用意见</el-button>
-							</span>
+								:loading="state.loading"
+								:commonEeum="state.commonEeum"
+							/>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -119,8 +108,6 @@
 					<el-button type="primary" @click="onSubmit" :loading="state.loading">提 交</el-button>
 				</span>
 			</template>
-			<!-- 常用意见管理 -->
-			<Comment ref="CommentRef" @chooseComment="chooseComment" />
 		</el-dialog>
 	</div>
 </template>
@@ -128,7 +115,6 @@
 <script setup lang="ts" name="orderProcess">
 import { defineAsyncComponent, reactive, ref, computed } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { addCommon } from '/@/api/business/commonP';
 import { OrderFlowParams, orderStartflow } from '/@/api/business/order';
 import { workflowNextsteps, workflowNext, workflowRecall, workflowJump, workflowPrevious } from '/@/api/system/workflow';
 
@@ -158,7 +144,6 @@ const state = reactive<any>({
 	handerMainOptions: [], // 主办人
 });
 const ruleFormRef = ref();
-const CommentRef = ref();
 const dialogRef = ref();
 // 打开弹窗
 const openDialog = async (val: any) => {
@@ -254,27 +239,9 @@ const closeDialog = () => {
 const onCancel = () => {
 	closeDialog();
 };
-// 打开常用意见管理
-const showComents = () => {
-	CommentRef.value.openDialog(state.commonEeum);
-};
-// 添加到常用意见
-const onAddComments = async () => {
-	if (!state.ruleForm.opinion) {
-		ElMessage.warning(`请先填写${state.title}意见`);
-		return;
-	}
-	await addCommon({
-		typeCode: state.commonEeum,
-		content: state.ruleForm.opinion,
-	});
-	ElMessage.success('操作成功');
-	CommentRef.value.closeDialog();
-};
 // 选择常用意见 填入填写框
 const chooseComment = (item: any) => {
 	state.ruleForm.opinion += item.content;
-	CommentRef.value.closeDialog();
 };
 // 保存
 // const onSave = () => {
@@ -391,13 +358,3 @@ defineExpose({
 	closeDialog,
 });
 </script>
-<style lang="scss" scoped>
-.textarea {
-	position: relative;
-	.bttons {
-		position: absolute;
-		right: 10px;
-		bottom: 10px;
-	}
-}
-</style>

src/views/knowledge/component/Process.vue

@@ -94,19 +94,7 @@
 							prop="opinion"
 							:rules="[{ required: true, message: '请填写常用意见', trigger: 'blur' }]"
 						>
-							<el-input
-								v-model="state.ruleForm.opinion"
-								type="textarea"
-								:autosize="{ minRows: 10, maxRows: 10 }"
-								placeholder="请填写常用意见"
-								clearable
-								max-length="2000"
-							>
-							</el-input>
-							<span class="bttons">
-								<el-button @click="showComents" class="default-button" :loading="state.loading">常用意见</el-button>
-								<el-button type="primary" @click="onAddComments" :loading="state.loading">添加到常用意见</el-button>
-							</span>
+							<Comment @chooseComment="chooseComment" placeholder="请填写常用意见" v-model="state.ruleForm.opinion" :loading="state.loading" :commonEeum="state.commonEeum"/>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -123,8 +111,6 @@
 					<el-button type="primary" @click="onSubmit" :loading="state.loading">提 交</el-button>
 				</span>
 			</template>
-			<!-- 常用意见管理 -->
-			<Comment ref="CommentRef" @chooseComment="chooseComment" />
 		</el-dialog>
 	</div>
 </template>
@@ -132,7 +118,6 @@
 <script setup lang="ts" name="knowledgeProcessComponent">
 import { defineAsyncComponent, reactive, ref, computed } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { addCommon } from '/@/api/business/commonP';
 import { KnowledgeAddStartflowParams, KnowledgeDeleteStartflowParams, KnowledgeAddStartflow, KnowledgeDeleteStartflow } from '/@/api/knowledge';
 import { workflowNextsteps, workflowNext, workflowRecall, workflowJump } from '/@/api/system/workflow';
 
@@ -165,7 +150,6 @@ const state = reactive<any>({
 	handerMainOptions: [], // 主办人
 });
 const ruleFormRef = ref();
-const CommentRef = ref();
 const dialogRef = ref();
 // 打开弹窗
 const openDialog = async (val: any) => {
@@ -272,27 +256,9 @@ const closeDialog = () => {
 const onCancel = () => {
 	closeDialog();
 };
-// 打开常用意见管理
-const showComents = () => {
-	CommentRef.value.openDialog(state.commonEeum);
-};
-// 添加到常用意见
-const onAddComments = async () => {
-	if (!state.ruleForm.opinion) {
-		ElMessage.warning(`请先填写${state.title}意见`);
-		return;
-	}
-	await addCommon({
-		typeCode: state.commonEeum,
-		content: state.ruleForm.opinion,
-	});
-	ElMessage.success('操作成功');
-	CommentRef.value.closeDialog();
-};
 // 选择常用意见 填入填写框
 const chooseComment = (item: any) => {
 	state.ruleForm.opinion += item.content;
-	CommentRef.value.closeDialog();
 };
 // 保存
 // const onSave = () => {
@@ -409,13 +375,3 @@ defineExpose({
 	closeDialog,
 });
 </script>
-<style lang="scss" scoped>
-.textarea {
-	position: relative;
-	.bttons {
-		position: absolute;
-		right: 10px;
-		bottom: 10px;
-	}
-}
-</style>

src/views/knowledge/config/type/index.vue

@@ -2,7 +2,17 @@
 	<div class="knowledge-type-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
 			<div class="flex-center-between mb20">
-				<p class="table-title">信息列表</p>
+				<el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
+					<el-form-item label="关键字" prop="keyword">
+						<el-input v-model="state.queryParams.keyword" placeholder="类型名称" clearable @keyup.enter="handleQuery" style="width: 250px" />
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="handleQuery" :loading="state.loading" v-waves>
+							<SvgIcon name="ele-Search" class="mr5" />查询
+						</el-button>
+						<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+					</el-form-item>
+				</el-form>
 				<div>
 					<el-button type="primary" @click="expand">
 						<SvgIcon
@@ -62,6 +72,8 @@ import { defineAsyncComponent, ref, h, reactive, onMounted, watch } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { formatDate } from '/@/utils/formatTime';
 import { treelist, delType, changeAble, changestateandoffshelf } from '/@/api/knowledge/type';
+import { throttle } from '/@/utils/tools';
+import type { FormInstance } from 'element-plus';
 // 引入组件
 const KnowledgeTypeAdd = defineAsyncComponent(() => import('/@/views/knowledge/config/type/component/knowledgeTypeAdd.vue'));
 const KnowledgeTypeEdit = defineAsyncComponent(() => import('/@/views/knowledge/config/type/component/knowledgeTypeEdit.vue'));
@@ -69,11 +81,52 @@ const KnowledgeTypeEdit = defineAsyncComponent(() => import('/@/views/knowledge/
 // 定义变量内容
 const knowledgeTypeAddRef = ref();
 const knowledgeTypeEditRef = ref();
+const ruleFormRef = ref();
 const state = reactive({
 	tableData: <any>[], // 获取所有菜单
 	loading: false,
 	isExpand: true,
+	queryParams: {
+		keyword: '',
+	},
+	expandedRowKeys: <any>[],
 });
+// 过滤表格
+const formatTable = (list: any[], keyword: string) => {
+	if (!list.length || !Array.isArray(list)) return [];
+	let emptyArr: any[] = [];
+	list.map((item) => {
+		if (item.name.includes(keyword)) {
+			if (item.child && Array.isArray(item.child) && item.child.length > 0) {
+				item.child = formatTable(item.child, keyword);
+			}
+			emptyArr.push(item);
+		} else if (item.child && Array.isArray(item.child) && item.child.length > 0) {
+			item.child = formatTable(item.child, keyword);
+			if (item.child.length) {
+				emptyArr.push(item);
+			}
+		}
+	});
+	return emptyArr;
+};
+/** 搜索按钮操作 节流操作 */
+const handleQuery = throttle(() => {
+	if (state.queryParams.keyword) {
+		state.loading = true;
+		state.tableData = formatTable(state.tableData, state.queryParams.keyword);
+		state.loading = false;
+	} else {
+		getList();
+	}
+}, 1000);
+/** 重置按钮操作 */
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	getList();
+};
+
 const expand = () => {
 	state.isExpand = !state.isExpand;
 	toggleRowExpansionAll(state.tableData, state.isExpand);

src/views/system/menu/index.vue

@@ -2,7 +2,17 @@
 	<div class="system-menu-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
 			<div class="flex-center-between mb20">
-				<p class="table-title">信息列表</p>
+				<el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
+					<el-form-item label="关键字" prop="keyword">
+						<el-input v-model="state.queryParams.keyword" placeholder="菜单名称" clearable @keyup.enter="handleQuery" style="width: 250px" />
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="handleQuery" :loading="state.loading" v-waves>
+							<SvgIcon name="ele-Search" class="mr5" />查询
+						</el-button>
+						<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+					</el-form-item>
+				</el-form>
 				<div>
 					<el-button type="primary" @click="expand">
 						<SvgIcon
@@ -19,7 +29,7 @@
 			<el-auto-resizer class="table" v-loading="state.loading">
 				<template #default="{ height, width }">
 					<el-table-v2
-						v-model:expanded-row-keys="expandedRowKeys"
+						v-model:expanded-row-keys="state.expandedRowKeys"
 						:columns="state.columns"
 						:data="state.menuTableData"
 						expand-column-key="pageName"
@@ -43,9 +53,11 @@
 import { defineAsyncComponent, ref, h, reactive, onMounted, watch } from 'vue';
 import { RouteRecordRaw } from 'vue-router';
 import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 import { getMenuList, removeMenu } from '/@/api/system/menu';
 import { auth, authAll } from '/@/utils/authFunction';
 import SvgIcon from '/@/views/system/menu/component/SvgIcon.vue';
+import { throttle } from '/@/utils/tools';
 // 引入组件
 const AddMenu = defineAsyncComponent(() => import('/@/views/system/menu/component/addMenu.vue'));
 const EditMenu = defineAsyncComponent(() => import('/@/views/system/menu/component/editMenu.vue'));
@@ -53,9 +65,14 @@ const EditMenu = defineAsyncComponent(() => import('/@/views/system/menu/compone
 // 定义变量内容
 const addMenuRef = ref();
 const editMenuRef = ref();
+const ruleFormRef = ref();
 const state = reactive({
 	menuTableData: <any>[], // 获取所有菜单
 	loading: false,
+	queryParams: {
+		keyword: '',
+	},
+	expandedRowKeys:<any>[],
 	columns: [
 		{
 			key: 'pageName',
@@ -197,7 +214,56 @@ const state = reactive({
 	],
 	isExpand: false,
 });
-const expandedRowKeys = ref<string[]>([]);
+const formatTable = (list: any[], keyword: string) => {
+	if (!list.length || !Array.isArray(list)) return [];
+	let emptyArr: any[] = [];
+	list.map((item) => {
+		if (item.pageName.includes(keyword)) {
+			if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+				item.children = formatTable(item.children, keyword);
+			}
+			emptyArr.push(item);
+		} else if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+			item.children = formatTable(item.children, keyword);
+			if (item.children.length) {
+				emptyArr.push(item);
+			}
+		}
+	});
+	return emptyArr;
+};
+let emptyArr: any[] = [];
+const getExpand = (list: any[]) => {
+	if (!list.length || !Array.isArray(list)) return [];
+	list.map((item) => {
+		if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+			getExpand(item.children);
+		}
+		emptyArr.push(item.id);
+	});
+	return emptyArr;
+};
+/** 搜索按钮操作 节流操作 */
+const handleQuery = throttle(() => {
+	if (state.queryParams.keyword) {
+		state.loading = true;
+		state.expandedRowKeys = [];
+		emptyArr = [];
+		state.menuTableData = formatTable(state.menuTableData, state.queryParams.keyword);
+		state.expandedRowKeys = getExpand(state.menuTableData);
+		state.loading = false;
+	} else {
+		getMenuListApi();
+	}
+}, 1000);
+/** 重置按钮操作 */
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	getMenuListApi();
+	state.expandedRowKeys = [];
+	emptyArr = [];
+};
 // 打开新增菜单弹窗
 const onOpenAddMenu = () => {
 	addMenuRef.value.openDialog();
@@ -213,7 +279,7 @@ watch(
 	() => state.isExpand,
 	(old: Boolean) => {
 		if (old) getAllIds(state.menuTableData);
-		else expandedRowKeys.value = [];
+		else state.expandedRowKeys = [];
 	}
 );
 const getAllIds = (arr: any) => {
@@ -221,7 +287,7 @@ const getAllIds = (arr: any) => {
 	arr.forEach((v: any) => {
 		if (v.children?.length) {
 			getAllIds(v.children);
-			expandedRowKeys.value.push(v.id);
+			state.expandedRowKeys.push(v.id);
 		}
 	});
 };

src/views/system/organize/index.vue

@@ -2,7 +2,17 @@
 	<div class="system-organize-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
 			<div class="flex-center-between mb20">
-				<p class="table-title">信息列表</p>
+				<el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
+					<el-form-item label="关键字" prop="keyword">
+						<el-input v-model="state.queryParams.keyword" placeholder="部门名称" clearable @keyup.enter="handleQuery" style="width: 250px;"/>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="handleQuery" :loading="state.loading" v-waves>
+							<SvgIcon name="ele-Search" class="mr5" />查询
+						</el-button>
+						<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+					</el-form-item>
+				</el-form>
 				<div>
 					<el-button type="primary" @click="expand"
 						><SvgIcon
@@ -20,7 +30,7 @@
 			<el-auto-resizer class="table" v-loading="state.loading">
 				<template #default="{ height, width }">
 					<el-table-v2
-						v-model:expanded-row-keys="expandedRowKeys"
+						v-model:expanded-row-keys="state.expandedRowKeys"
 						:columns="state.columns"
 						:data="state.orgTableData"
 						expand-column-key="orgName"
@@ -42,9 +52,11 @@
 <script lang="ts" setup name="organize">
 import { defineAsyncComponent, ref, h, reactive, onMounted, watch } from 'vue';
 import { ElButton, ElTag } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 import { getOrgList } from '/@/api/system/organize';
 import { formatDate } from '/@/utils/formatTime';
 import { auth } from '/@/utils/authFunction';
+import { throttle } from '/@/utils/tools';
 // 引入组件
 const AddOrg = defineAsyncComponent(() => import('/@/views/system/organize/component/addOrg.vue'));
 const EditOrg = defineAsyncComponent(() => import('/@/views/system/organize/component/editOrg.vue'));
@@ -55,6 +67,10 @@ const editOrgRef = ref();
 const state = reactive({
 	orgTableData: <any>[], // 获取所有菜单
 	loading: false,
+	queryParams: {
+		keyword: '',
+	},
+	expandedRowKeys: <any>[],
 	columns: [
 		{
 			key: 'orgName',
@@ -114,7 +130,58 @@ const state = reactive({
 	],
 	isExpand: false,
 });
-const expandedRowKeys = ref<string[]>([]);
+const ruleFormRef = ref();
+// 搜索
+const formatTable = (list: any[], keyword: string) => {
+	if (!list.length || !Array.isArray(list)) return [];
+	let emptyArr: any[] = [];
+	list.map((item) => {
+		if (item.orgName.includes(keyword)) {
+			if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+				item.children = formatTable(item.children, keyword);
+			}
+			emptyArr.push(item);
+		} else if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+			item.children = formatTable(item.children, keyword);
+			if (item.children.length) {
+				emptyArr.push(item);
+			}
+		}
+	});
+	return emptyArr;
+};
+let emptyArr: any[] = [];
+const getExpand = (list: any[]) => {
+	if (!list.length || !Array.isArray(list)) return [];
+	list.map((item) => {
+		if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+			getExpand(item.children);
+		}
+		emptyArr.push(item.id);
+	});
+	return emptyArr;
+};
+/** 搜索按钮操作 节流操作 */
+const handleQuery = throttle(() => {
+	if (state.queryParams.keyword) {
+		state.loading = true;
+		state.expandedRowKeys = [];
+		emptyArr = [];
+		state.orgTableData = formatTable(state.orgTableData, state.queryParams.keyword);
+		state.expandedRowKeys = getExpand(state.orgTableData);
+		state.loading = false;
+	} else {
+		getOrgListApi();
+	}
+}, 1000);
+/** 重置按钮操作 */
+const resetQuery = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	getOrgListApi();
+	state.expandedRowKeys = [];
+	emptyArr = [];
+};
 // 打开新增菜单弹窗
 const onOpenAddOrg = () => {
 	addOrgRef.value.openDialog(state.orgTableData);
@@ -130,7 +197,7 @@ watch(
 	() => state.isExpand,
 	(old: Boolean) => {
 		if (old) getAllIds(state.orgTableData);
-		else expandedRowKeys.value = [];
+		else state.expandedRowKeys = [];
 	}
 );
 const getAllIds = (arr: any) => {
@@ -138,7 +205,7 @@ const getAllIds = (arr: any) => {
 	arr.forEach((v: any) => {
 		if (v.children?.length) {
 			getAllIds(v.children);
-			expandedRowKeys.value.push(v.id);
+			state.expandedRowKeys.push(v.id);
 		}
 	});
 };