feat: add document for AdvanceTable.vue; 🐛

新增：给 AdvanceTable.vue 增加说明文档；
iczer · Oct 5, 2020 · 3619242 · 3619242
1 parent a4281b6
commit 3619242
Show file tree

Hide file tree

Showing 17 changed files with 488 additions and 150 deletions.
diff --git a/package.json b/package.json
@@ -22,15 +22,16 @@
     "core-js": "^3.6.5",
     "date-fns": "^2.14.0",
     "enquire.js": "^2.1.6",
+    "highlight.js": "^10.2.1",
     "js-cookie": "^2.2.1",
     "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.11",
     "vue-i18n": "^8.18.2",
     "vue-router": "^3.3.4",
     "vuedraggable": "^2.23.2",
-    "vuex": "^3.4.0",
-    "nprogress": "^0.2.0"
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@ant-design/colors": "^4.0.1",
@@ -39,7 +40,9 @@
     "@vue/cli-service": "^4.4.0",
     "@vuepress/plugin-back-to-top": "^1.5.2",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-polyfill": "^6.26.0",
+    "compression-webpack-plugin": "^2.0.0",
     "deepmerge": "^4.2.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
@@ -51,9 +54,7 @@
     "vue-template-compiler": "^2.6.11",
     "vuepress": "^1.5.2",
     "webpack-theme-color-replacer": "^1.3.12",
-    "whatwg-fetch": "^3.0.0",
-    "compression-webpack-plugin": "^2.0.0",
-    "babel-plugin-transform-remove-console": "^6.9.4"
+    "whatwg-fetch": "^3.0.0"
   },
   "eslintConfig": {
     "root": true,

diff --git a/src/components/table/advance/ActionColumns.vue b/src/components/table/advance/ActionColumns.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="action-columns" ref="root">
-    <a-tooltip title="列设置" :get-popup-container="() => $refs.root">
       <a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root">
         <div slot="title">
           <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示
@@ -14,21 +13,20 @@
             </template>
             <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
             <template slot="actions">
-              <a-tooltip title="固定在列头" :get-popup-container="() => $refs.root">
+              <a-tooltip title="固定在列头" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                 <a-icon :class="['left', {active: col.fixed === 'left'}]" @click="fixColumn('left', col)" type="vertical-align-top" />
               </a-tooltip>
-              <a-tooltip title="固定在列尾" :get-popup-container="() => $refs.root">
+              <a-tooltip title="固定在列尾" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                 <a-icon :class="['right', {active: col.fixed === 'right'}]" @click="fixColumn('right', col)" type="vertical-align-bottom" />
               </a-tooltip>
-              <a-tooltip title="添加搜索" :get-popup-container="() => $refs.root">
+              <a-tooltip title="添加搜索" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                 <a-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" />
               </a-tooltip>
             </template>
           </a-list-item>
         </a-list>
         <a-icon class="action" type="setting" />
       </a-popover>
-    </a-tooltip>
   </div>
 </template>
 
@@ -87,12 +85,14 @@
       },
       setSearch(col) {
         this.$set(col, 'searchAble', !col.searchAble)
+        console.log(col)
         if (!col.searchAble && col.search) {
           this.resetSearch(col)
         }
       },
       resetSearch(col) {
-        col.search.value = col.dataType === 'boolean' ? false : undefined
+        // col.search.value = col.dataType === 'boolean' ? false : undefined
+        col.search.value = undefined
         col.search.backup = undefined
       },
       resetColumns() {
@@ -114,7 +114,8 @@
           } else {
             this.$set(column, 'fixed', undefined)
           }
-          column.searchAble = back.searchAble
+          this.$set(column, 'searchAble', back.searchAble)
+          // column.searchAble = back.searchAble
           this.resetSearch(column)
         })
         this.checkedCounts = counts

diff --git a/src/components/table/advance/AdvanceTable.vue b/src/components/table/advance/AdvanceTable.vue
@@ -8,7 +8,7 @@
         <template v-else>高级表格</template>
       </div>
       <div class="search">
-        <search-area @change="onSearchChange" :columns="columns" >
+        <search-area :format-conditions="formatConditions" @change="onSearchChange" :columns="columns" >
           <template :slot="slot" v-for="slot in slots">
             <slot :name="slot"></slot>
           </template>
@@ -19,11 +19,13 @@
           <a-icon @click="refresh" class="action" :type="loading ? 'loading' : 'reload'" />
         </a-tooltip>
         <action-size v-model="sSize" class="action" />
-        <action-columns :columns="columns" @reset="onColumnsReset" class="action">
-          <template :slot="slot" v-for="slot in slots">
-            <slot :name="slot"></slot>
-          </template>
-        </action-columns>
+        <a-tooltip title="列配置">
+          <action-columns :columns="columns" @reset="onColumnsReset" class="action">
+            <template :slot="slot" v-for="slot in slots">
+              <slot :name="slot"></slot>
+            </template>
+          </action-columns>
+        </a-tooltip>
         <a-tooltip title="全屏">
           <a-icon @click="toggleScreen" class="action" :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'" />
         </a-tooltip>
@@ -85,7 +87,8 @@
       customHeaderRow: Function,
       customRow: Function,
       getPopupContainer: Function,
-      transformCellText: Function
+      transformCellText: Function,
+      formatConditions: Boolean
     },
     provide() {
       return {
@@ -97,7 +100,7 @@
         id: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`,
         sSize: this.size || 'default',
         fullScreen: false,
-        conditions: []
+        conditions: {}
       }
     },
     computed: {
@@ -118,9 +121,9 @@
       refresh() {
         this.$emit('refresh', this.conditions)
       },
-      onSearchChange(conditions) {
+      onSearchChange(conditions, searchOptions) {
         this.conditions = conditions
-        this.$emit('search', conditions)
+        this.$emit('search', conditions, searchOptions)
       },
       toggleScreen() {
         if (this.fullScreen) {