优化级联菜单用户体验;

src/components/test.vue

@@ -4,6 +4,10 @@
       <img v-for="(source, index) in images" :key="index" :src="source" class="image">
     </div>
     <button type="button" class="button" @click="show">Show</button>
+    <el-cascader
+      v-model="cascader"
+      :options="filter[0].value"
+      :props="props"></el-cascader>
   </div>
 </template>
 
@@ -15,15 +19,28 @@
   }
   import 'viewerjs/dist/viewer.css'
   import Viewer from 'viewerjs'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
   export default {
     name: '',
     data () {
       return {
+        filter: [{
+          value: []
+        }],
+        cascader: [],
         options: {
           toolbar: true,
           url: 'data-source'
         },
-        images: []
+        images: [],
+        props: {
+          value: 'id',
+          label: 'name',
+          children: 'value'
+        }
       }
     },
     methods: {
@@ -44,6 +61,15 @@
     mounted () {
     },
     created () {
+      requestAPI(api.getFilter).then(res => {
+        this.filter = res
+        console.log(this.filter)
+      })
+    },
+    watch: {
+      'cascader' (val) {
+        console.log(val)
+      }
     }
   }
 </script>

src/components/workLog/list.vue

@@ -83,6 +83,7 @@
   } from '@/lib/commonMixin'
   import 'viewerjs/dist/viewer.css'
   import Viewer from 'viewerjs'
+
   export default {
     name: '',
     components: {
@@ -241,11 +242,13 @@
             item.cascader = []
           }
         })
+        console.log(res)
         return res
       },
       getFilter () {
         requestAPI(api.getFilter).then(res => {
           this.filter = this.updateOptions(res)
+          console.log(this.filter)
         })
       }
     },

src/components/workLog/workLogListForm.vue

 <template>
   <div>
     <el-row class="form-content">
-      <el-form ref="clientForm" size="mini" :model="clientForm" label-width="0" label-position="top">
+      <el-form size="mini" :model="clientForm" label-width="0" label-position="top">
         <el-col :span="4" v-for="(item, key) in filter" :key="key">
           <el-form-item>
             <span slot="label" v-if="item.key !== 'Filter[sort]'">
@@ -25,13 +25,14 @@
               </el-option>
             </el-select>
             <el-cascader
+              :ref="'elCasc' + key"
               v-model="item.cascader"
-              change-on-select
+              :props="props"
               clearable
+              change-on-select
               v-if="item.itemKey"
               :options="item.value"
-              :props="cascaderOption"
-              @change="setCascader(item)"
+              @change="setCascader(item, key)"
             ></el-cascader>
           </el-form-item>
         </el-col>
@@ -42,22 +43,25 @@
 
 <script>
   import {findWhere} from '../../lib/viewHelper'
-
+  import $ from 'jquery'
   export default {
     name: 'client-form',
     data () {
       return {
         clientForm: {},
-        cascaderOption: {
-          value: 'key',
+        props: {
           label: 'name',
-          children: 'value'
+          value: 'key',
+          children: 'child'
         }
       }
     },
     props: ['filter'],
     methods: {
-      setCascader (item) {
+      hideCascader (key) {
+        // this.$refs['elCasc' + key][0].menuVisible = false
+      },
+      setCascader (item, key) {
         if (item.cascader.length === 1) {
           this.clientForm[item.key] = item.cascader[0]
           this.clientForm[item.itemKey] = ''
@@ -77,14 +81,13 @@
               if (keys.parentNode) {
                 this.clientForm[item.itemKey] = keys.parentNode.key
                 this.clientForm[item.key] = keys.node.key
-                item.cascader = [keys.parentNode.id, keys.node.key]
+                item.cascader = [keys.parentNode.key, keys.node.key]
               } else {
                 this.clientForm[item.itemKey] = ''
                 this.clientForm[item.key] = keys.node.key
                 item.cascader = [keys.node.key]
               }
             }
-            console.log(item.cascader)
           }
         })
       },
@@ -92,6 +95,14 @@
         this.$watch('clientForm', (val) => {
           this.$emit('update:clientList', val)
         }, {deep: true})
+        let _this = this
+        $(document).ready(() => {
+          $(document).on('mouseleave', '.el-cascader-menus', () => {
+            Object.keys(_this.$refs).forEach(item => {
+              _this.$refs[item][0].menuVisible = false
+            })
+          })
+        })
       },
       setSortIcon () {
         if (this.clientForm['Filter[sort]'] === '') {
@@ -112,7 +123,7 @@
         }
       }
     },
-    created () {
+    mounted () {
     },
     watch: {
       'filter' (val) {

src/lib/viewHelper.js

@@ -64,11 +64,11 @@ let getNode = function (json, nodeId, type, nodeObj) {
       break
     } else {
       // 3.如果有子节点就开始找
-      if (obj.value) {
+      if (obj.child) {
         // 4.递归前，记录当前节点，作为parent 父亲
         nodeObj.parentNode = obj
         // 递归往下找
-        getNode(obj.value, nodeId, type, nodeObj)
+        getNode(obj.child, nodeId, type, nodeObj)
       } else {
         // 跳出当前递归，返回上层递归
         continue

src/routes/workLog.js

@@ -2,6 +2,7 @@ import clientList from '../components/workLog/list'
 import workLogOfClient from '../components/workLog/logOfClient/workLogOfClient'
 import workLogAdd from '../components/workLog/work/addLog'
 import workLogEdit from '../components/workLog/work/editLog'
+import test from '../components/test'
 const projectTitle = '金畅逍BMS - '
 const routes = [
   {
@@ -34,6 +35,11 @@ const routes = [
     path: '/workLogEdit/:id',
     name: 'workLogEdit',
     component: workLogEdit
+  },
+  {
+    path: '/test',
+    name: 'test',
+    component: test
   }
 ]
 export default routes