sync

src/views/business/index.vue

@@ -1,85 +1,78 @@
 <template>
   <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-    </el-form>
+    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
+
+    <el-tree
+      ref="tree2"
+      :data="data2"
+      :props="defaultProps"
+      :filter-node-method="filterNode"
+      class="filter-tree"
+      default-expand-all
+    />
+
   </div>
 </template>
 
 <script>
 export default {
+
   data() {
     return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+      filterText: '',
+      data2: [{
+        id: 1,
+        label: 'Level one 1',
+        children: [{
+          id: 4,
+          label: 'Level two 1-1',
+          children: [{
+            id: 9,
+            label: 'Level three 1-1-1'
+          }, {
+            id: 10,
+            label: 'Level three 1-1-2'
+          }]
+        }]
+      }, {
+        id: 2,
+        label: 'Level one 2',
+        children: [{
+          id: 5,
+          label: 'Level two 2-1'
+        }, {
+          id: 6,
+          label: 'Level two 2-2'
+        }]
+      }, {
+        id: 3,
+        label: 'Level one 3',
+        children: [{
+          id: 7,
+          label: 'Level two 3-1'
+        }, {
+          id: 8,
+          label: 'Level two 3-2'
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
       }
     }
   },
+  watch: {
+    filterText(val) {
+      this.$refs.tree2.filter(val)
+    }
+  },
+
   methods: {
-    onSubmit() {
-      this.$message('submit!')
-    },
-    onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     }
   }
 }
 </script>
 
-<style scoped>
-.line{
-  text-align: center;
-}
-</style>
-

src/views/home/components/Business.vue → src/views/home/Business.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import BusinessEdit from './BusinessEdit'
+import BusinessEdit from './components/BusinessEdit'
 
 import { fetchDictData } from '@/api/dict'
 import { isNull } from '@/utils/convert'

src/views/home/components/Link.vue → src/views/home/Link.vue

@@ -16,6 +16,7 @@
 
 <script>
 import EllipsisTooltip from '@/components/EllipsisTooltip'
+
 export default {
   name: 'Link',
   components: {

src/views/home/components/Message.vue → src/views/home/Message.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import MessageList from './MessageList'
+import MessageList from './components/MessageList'
 
 import { fetchTableList } from '@/api/message'
 import { isNull, toQuery } from '@/utils/convert'

src/views/home/components/Search.vue → src/views/home/Search.vue

@@ -9,6 +9,7 @@
 
 <script>
 import { isNull } from '@/utils/convert'
+
 export default {
   name: 'Search',
   data() {

src/views/home/components/Test.vue → src/views/home/Test.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import MessageList from './MessageList'
+import MessageList from './components/MessageList'
 
 export default {
   components: {

src/views/home/index.vue

@@ -23,15 +23,15 @@
 <script>
 import { mapGetters } from 'vuex'
 import VueGridLayout from 'vue-grid-layout'
-import Search from './components/Search'
-import Message from './components/Message'
-import Business from './components/Business'
-import System from './components/System'
-// import System from './components/System'
-import Specification from './components/Specification'
-import Link from './components/Link'
-import Information from './components/Information'
-import Test from './components/Test'
+import Search from './Search'
+import Message from './Message'
+import Business from './Business'
+import System from './System'
+// import System from './System'
+import Specification from './Specification'
+import Link from './Link'
+import Information from './Information'
+import Test from './Test'
 
 let sseClient