feat: 增加属性搜索

dream2023 · Feb 10, 2020 · e2fb6bc · e2fb6bc
1 parent 94d2574
commit e2fb6bc
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 72 deletions.
diff --git a/src/components/app-main/components/main-left.vue b/src/components/app-main/components/main-left.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <el-card
-      id="comps-search-card"
-      :body-style="{ padding: '10px' }"
-    >
-      <el-input placeholder="请输入关键字查找组件" v-model.trim="searchValue"></el-input>
+    <el-card id="comps-search-card" :body-style="{ padding: '10px' }">
+      <el-input
+        placeholder="请输入关键字查找组件"
+        v-model.trim="searchValue"
+      ></el-input>
     </el-card>
-    <div v-if="comps.length === 0">
+    <div v-if="filteredComps.length === 0">
       <p class="no-comps-text">未找到相关组件~</p>
     </div>
     <el-card
@@ -15,7 +15,7 @@
       :key="comp.title"
       shadow="never"
       style="border: none;"
-      v-for="comp of comps"
+      v-for="comp of filteredComps"
     >
       <draggable
         :clone="addFormItem"
@@ -38,7 +38,7 @@
 import comps from '@/comps'
 import { addFormItem } from '@/tool.js'
 import draggable from 'vuedraggable'
-import _ from 'lodash'
+import _ from 'lodash-es'
 
 export default {
   name: 'AppMainLeft',
@@ -47,35 +47,27 @@ export default {
   },
   data() {
     return {
-      searchValue: '',
-      tempVal: ''
+      searchValue: ''
     }
   },
-  watch: {
-    searchValue(val) {
-      if (this.debouncedSearch) {
-        this.debouncedSearch(val)
+  computed: {
+    filteredComps() {
+      const keyword = _.toLower(this.searchValue)
+      if (!keyword) {
+        return comps
       } else {
-        this.debouncedSearch = _.debounce(val => {
-          this.tempVal = val
-        }, 200)
+        let newComps = comps.map(x => {
+          // 匹配 type 或者 label，匹配上就返回该项
+          let newInnerComps = _.filter(
+            x.comps,
+            x => x.type.includes(keyword) || x.type.includes(keyword)
+          )
+          return { ...x, comps: newInnerComps }
+        })
+        return newComps.filter(x => x.comps.length > 0)
       }
     }
   },
-  computed: {
-    comps() {
-      return this.tempVal === '' ? comps : this.filteredComps
-    },
-    filteredComps () {
-      const value = _.toLower(this.tempVal)
-      let newComps = comps.map(x => {
-        // 匹配 type 或者 label，匹配上就返回该项
-        let newInnerComps = _.filter(x.comps, x => (x.type.indexOf(value) !== -1 || x.label.indexOf(value) !== -1))
-        return { ...x, comps: newInnerComps }
-      })
-      return newComps.filter(x => x.comps.length > 0)
-    }
-  },
   methods: {
     // 拖拽后的数据
     addFormItem({ label, type }) {

diff --git a/src/components/app-main/components/main-right/components/components/attrs-header.vue b/src/components/app-main/components/main-right/components/components/attrs-header.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <div class="app-main-right-link">
+      <el-link type="primary" target="_blank" :href="url"
+        >点击查看{{ title }}</el-link
+      >&nbsp;
+      <span style="vertical-align: middle;">属性详细解释</span>
+    </div>
+    <div class="app-main-right-search">
+      <el-input
+        v-model="keyword"
+        clearable
+        @input="$emit('input', $event)"
+        placeholder="输入关键字搜索属性"
+      ></el-input>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'attrs-header',
+  props: {
+    url: String,
+    title: String
+  },
+  data() {
+    return {
+      keyword: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main-right-link {
+  color: #666;
+  font-size: 14px;
+  margin-left: 24px;
+  padding-left: 10px;
+  margin-bottom: 10px;
+  border-left: 3px solid #eee;
+}
+.app-main-right-search {
+  padding: 20px;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/components/app-main/components/main-right/components/components/searchMixin.js b/src/components/app-main/components/main-right/components/components/searchMixin.js
@@ -0,0 +1,26 @@
+export default {
+  data () {
+    return {
+      // 搜索关键字
+      keyword: ''
+    }
+  },
+  computed: {
+    // 根据搜过条件过滤
+    filterFormDesc () {
+      if (this.keyword) {
+        return Object.keys(this.formDesc).reduce((acc, key) => {
+          if (
+            key.includes(this.keyword) ||
+            this.formDesc[key].label.includes(this.keyword)
+          ) {
+            acc[key] = this.formDesc[key]
+          }
+          return acc
+        }, {})
+      } else {
+        return this.formDesc
+      }
+    }
+  }
+}
diff --git a/src/components/app-main/components/main-right/components/form-config.vue b/src/components/app-main/components/main-right/components/form-config.vue
@@ -1,18 +1,13 @@
 <template>
   <div>
-    <div class="app-main-right-link">
-      <el-link
-        type="primary"
-        target="_blank"
-        href="https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7"
-        >点击查看表单配置</el-link
-      >&nbsp;
-      <span style="vertical-align: middle;">属性详细解释</span>
-    </div>
-
+    <attrs-header
+      url="https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7"
+      title="表单配置"
+      v-model="keyword"
+    />
     <ele-form
       v-model="formAttr"
-      :form-desc="computedFormDesc"
+      :form-desc="filterFormDesc"
       :isShowBackBtn="false"
       :isShowSubmitBtn="false"
       :span="20"
@@ -25,12 +20,16 @@
 <script>
 import { mapMutations, mapState } from 'vuex'
 import { changeFormLabel } from '@/tool.js'
+import searchMixin from './components/searchMixin'
+import AttrsHeader from './components/attrs-header'
 
 export default {
   name: 'AppFormConfig',
+  mixins: [searchMixin],
+  components: { AttrsHeader },
   data() {
     return {
-      formDesc: {
+      originDesc: {
         inline: {
           type: 'radio',
           default: false,
@@ -164,8 +163,8 @@ export default {
   },
   computed: {
     ...mapState(['formAttr']),
-    computedFormDesc() {
-      return changeFormLabel(this.formDesc)
+    formDesc() {
+      return changeFormLabel(this.originDesc)
     }
   },
   methods: {

diff --git a/src/components/app-main/components/main-right/components/form-item-attrs.vue b/src/components/app-main/components/main-right/components/form-item-attrs.vue
@@ -1,15 +1,14 @@
 <template>
   <div>
     <template v-if="isShow">
-      <div v-if="attrLink" class="app-main-right-link">
-        <el-link type="primary" target="_blank" :href="attrLink"
-          >点击查看&nbsp;{{ currentFormItem.type }}组件</el-link
-        >&nbsp;
-        <span style="vertical-align: middle;">属性详细解释</span>
-      </div>
+      <attrs-header
+        :url="attrLink"
+        :title="currentFormItem.type + '组件'"
+        v-model="keyword"
+      />
       <ele-form
         :formData="currentFormItem.attrs"
-        :formDesc="formDesc"
+        :formDesc="filterFormDesc"
         :isShowBackBtn="false"
         :isShowSubmitBtn="false"
         :span="20"
@@ -26,9 +25,13 @@
 import { mapGetters } from 'vuex'
 import configList from '@/config'
 import { changeFormLabel } from '@/tool.js'
+import SearchMixin from './components/searchMixin'
+import AttrsHeader from './components/attrs-header'
 
 export default {
   name: 'AppFormItemAttrs',
+  mixins: [SearchMixin],
+  components: { AttrsHeader },
   computed: {
     ...mapGetters(['currentFormItem']),
     isShow() {

diff --git a/src/components/app-main/components/main-right/components/form-item-config.vue b/src/components/app-main/components/main-right/components/form-item-config.vue
@@ -1,18 +1,14 @@
 <template>
   <div>
     <template v-if="currentFormItem">
-      <div class="app-main-right-link">
-        <el-link
-          type="primary"
-          target="_blank"
-          href="https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf"
-          >点击查看通用配置</el-link
-        >&nbsp;
-        <span style="vertical-align: middle;">属性详细解释</span>
-      </div>
+      <attrs-header
+        url="https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf"
+        title="通用配置"
+        v-model="keyword"
+      />
       <ele-form
         :formData="currentFormItem"
-        :formDesc="formDesc"
+        :formDesc="filterFormDesc"
         :isShowBackBtn="false"
         :isShowSubmitBtn="false"
         :rules="rules"
@@ -47,11 +43,15 @@ import configList from '@/config'
 import { changeFormLabel } from '@/tool.js'
 import { mapGetters, mapMutations } from 'vuex'
 import FormItemRules from './components/form-item-rules'
+import AttrsHeader from './components/attrs-header'
+import SearchMixin from './components/searchMixin'
 const serialize = require('serialize-javascript')
 
 export default {
   name: 'AppFormItemConfig',
+  mixins: [SearchMixin],
   components: {
+    AttrsHeader,
     FormItemRules
   },
   computed: {

diff --git a/src/components/app-main/components/main-right/index.vue b/src/components/app-main/components/main-right/index.vue
@@ -38,7 +38,6 @@ export default {
   color: #909399;
   text-align: center;
 }
-
 .app-main-right-container .el-tabs__nav-wrap {
   padding: 0 15px;
 }
@@ -62,13 +61,4 @@ export default {
   margin-top: 0 !important;
   padding-top: 0 !important;
 }
-
-.app-main-right-link {
-  color: #666;
-  font-size: 14px;
-  margin-left: 24px;
-  padding-left: 10px;
-  margin-bottom: 10px;
-  border-left: 3px solid #eee;
-}
 </style>