!28 列字段权限→自动匹配→添加model页面增加模糊搜索框

Merge pull request !28 from 北风南里/N/A

web/src/views/system/menu/components/MenuFieldCom/index.vue

@@ -4,8 +4,15 @@
       <div v-show="props.model">
         <el-tag>已选择:{{ props.model }}</el-tag>
       </div>
+     <!-- 搜索输入框 -->
+    <el-input
+    v-model="searchQuery"
+    placeholder="搜索模型..."
+    style="margin-bottom: 10px;"
+  ></el-input>
       <div class="model-card">
-        <div v-for="(item,index) in allModelData" :value="item.key" :key="index">
+        <!--注释编号:django-vue3-admin-index483211: 对请求回来的allModelData进行computed计算，返加搜索框匹配到的内容-->
+        <div v-for="(item,index) in filteredModelData" :value="item.key" :key="index">
           <el-text :type="modelCheckIndex===index?'primary':''" @click="onModelChecked(item,index)">
             {{ item.app + '--' + item.title + '(' + item.key + ')' }}
           </el-text>
@@ -29,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, reactive} from 'vue';
+import {ref, onMounted, reactive, computed } from 'vue';
 import {useFs} from '@fast-crud/fast-crud';
 import {createCrudOptions} from './crud';
 import {getModelList} from './api'
@@ -55,6 +62,26 @@ const onModelChecked = (row, index) => {
   props.model = row.key
   props.app = row.app
 }
+
+
+// 注释编号:django-vue3-admin-index083311:代码开始行
+// 功能说明:搭配搜索的处理，返回搜索结果
+const searchQuery = ref('');
+
+const filteredModelData = computed(() => {
+      if (!searchQuery.value) {
+        return allModelData.value;
+      }
+      const query = searchQuery.value.toLowerCase();
+      return allModelData.value.filter(item =>
+        item.app.toLowerCase().includes(query) ||
+        item.title.toLowerCase().includes(query) ||
+        item.key.toLowerCase().includes(query)
+      );
+    });
+// 注释编号:django-vue3-admin-index083311:代码结束行
+
+
 /**
  * 菜单选中时,加载表格数据
  * @param record