feat(模板列表): 增加搜索功能

ikuaitu · Aug 4, 2023 · 0cfdc41 · 0cfdc41
1 parent c3b5fa2
commit 0cfdc41
Showing 1 changed file with 30 additions and 46 deletions.
diff --git a/src/components/importTmpl.vue b/src/components/importTmpl.vue
@@ -2,12 +2,16 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2023-07-29 21:49:18
+ * @LastEditTime: 2023-08-04 13:26:31
  * @Description: 导入模板
 -->
 
 <template>
-  <div style="display: inline-block">
+  <div>
+    <div class="search-box">
+      <Input v-model="state.search" search @on-change="filterList" />
+    </div>
+
     <Divider plain orientation="left">{{ $t('title_template') }}</Divider>
     <Tooltip
       :content="item.label"
@@ -27,64 +31,30 @@
 
 <script setup name="ImportTmpl">
 import useSelect from '@/hooks/select';
-// import { downFontByJSON } from '@/utils/utils';
 import axios from 'axios';
 import { Spin, Modal } from 'view-ui-plus';
 import { useI18n } from 'vue-i18n';
 
 const repoSrc = import.meta.env.APP_REPO;
 const { t } = useI18n();
 const { canvasEditor } = useSelect();
+
+let templList = [];
 const state = reactive({
+  search: '',
   jsonFile: null,
   list: [
-    {
-      label: '海报模板',
-      tempUrl: `${repoSrc}template/49234261-0187-4fdc-be80-f9dfb14c8bc6.json`,
-      src: `${repoSrc}template/49234261-0187-4fdc-be80-f9dfb14c8bc6.png`,
-    },
-    {
-      label: '旅游海报',
-      tempUrl: `${repoSrc}template/6ff9093a-4976-416b-8285-db5496842487.json`,
-      src: `${repoSrc}template/6ff9093a-4976-416b-8285-db5496842487.png`,
-    },
-    {
-      label: '邀请海报',
-      tempUrl: `${repoSrc}template/b40fee28-de9f-4304-a07e-2f55d36f137e.json`,
-      src: `${repoSrc}template/b40fee28-de9f-4304-a07e-2f55d36f137e.png`,
-    },
+    // {
+    //   label: '海报模板',
+    //   tempUrl: `${repoSrc}template/49234261-0187-4fdc-be80-f9dfb14c8bc6.json`,
+    //   src: `${repoSrc}template/49234261-0187-4fdc-be80-f9dfb14c8bc6.png`,
+    // },
   ],
 });
 
 // 插入文件
 const insertSvgFile = () => {
-  // state.jsonFile
-  // console.log(state.jsonFile);
   canvasEditor.insertSvgFile(state.jsonFile);
-  // Spin.show({
-  //   render: (h) => h('div', t('alert.loading_fonts')),
-  // });
-
-  // downFontByJSON(state.jsonFile)
-  //   .then(() => {
-  //     Spin.hide();
-  //     canvas.c.loadFromJSON(state.jsonFile, () => {
-  //       canvas.c.renderAll.bind(canvas.c);
-  //       setTimeout(() => {
-  //         const workspace = canvas.c.getObjects().find((item) => item.id === 'workspace');
-  //         workspace.set('selectable', false);
-  //         workspace.set('hasControls', false);
-  //         canvas.c.requestRenderAll();
-  //         canvas.editor.editorWorkspace.setSize(workspace.width, workspace.height);
-  //         canvas.c.renderAll();
-  //         canvas.c.requestRenderAll();
-  //       }, 100);
-  //     });
-  //   })
-  //   .catch(() => {
-  //     Spin.hide();
-  //     Message.error(t('alert.loading_fonts_failed'));
-  //   });
 };
 
 // 获取模板列表数据
@@ -95,16 +65,27 @@ const getTempList = () => {
   const getTemp = axios.get(`${repoSrc}template/index.json`);
   getTemp
     .then((res) => {
-      state.list = res.data.data.map((item) => {
+      templList = res.data.data.map((item) => {
         item.tempUrl = repoSrc + item.tempUrl;
         item.src = repoSrc + item.src;
         return item;
       });
+
+      state.list = templList;
       Spin.hide();
     })
     .catch(Spin.hide);
 };
-
+// 模板搜索功能
+const filterList = () => {
+  console.log(state.search);
+  if (!state.search) {
+    state.list = templList;
+    return;
+  }
+  state.list = templList.filter((item) => item.label.includes(state.search));
+};
+// 替换提示
 const beforeClearTip = (tmplUrl) => {
   Modal.confirm({
     title: t('tip'),
@@ -132,6 +113,9 @@ getTempList();
 </script>
 
 <style scoped lang="less">
+.search-box {
+  padding-top: 10px;
+}
 .tmpl-img {
   width: 140px;
   cursor: pointer;