refactor(filter): 优化文章状态过滤器

Author: cklwblove

src/directives/index.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { DirectiveOptions } from 'vue';
 
 import permission from './permission';
 import waves from './waves';
@@ -13,5 +13,5 @@ const directives = {
 };
 
 Object.keys(directives).forEach((key) => {
-  Vue.directive(key, directives[key]);
+  Vue.directive(key, (directives as { [key: string]: DirectiveOptions })[key]);
 });

src/filters/index.ts

@@ -43,15 +43,29 @@ export function toThousandFilter(num) {
   return (+num || 0).toString().replace(/^-?\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));
 }
 
+// Filter for article status
+export const articleStatusFilter = (status: string) => {
+  const statusMap: { [key: string]: string } = {
+    published: 'success',
+    success: 'success',
+    draft: 'info',
+    deleted: 'danger',
+    pending: 'danger'
+  };
+  return statusMap[status];
+};
+
 // register global utility filters.
 const filters = {
   formatDate,
   parseTime,
   formatTime,
   numberFormatter,
-  toThousandFilter
+  toThousandFilter,
+  articleStatusFilter
 };
 
 Object.keys(filters).forEach((key) => {
-  Vue.filter(key, filters[key]);
+  // tslint:disable-next-line:ban-types
+  Vue.filter(key, (filters as { [key: string]: Function })[key]);
 });

src/views/dashboard/admin/components/BoxCard.vue

@@ -34,18 +34,10 @@ import {
 } from '@/components';
 
 @Component({
+  name: 'BoxCard',
   components: {
     PanThumb,
     Mallki
-  },
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        success: 'success',
-        pending: 'danger'
-      };
-      return statusMap[status];
-    }
   }
 })
 export default class BoxCard extends Vue {

src/views/dashboard/admin/components/TransactionTable.vue

@@ -12,7 +12,7 @@
     </el-table-column>
     <el-table-column label="Status" width="100" align="center">
       <template slot-scope="scope">
-        <el-tag :type="scope.row.status | statusFilter"> {{ scope.row.status }}</el-tag>
+        <el-tag :type="scope.row.status | articleStatusFilter"> {{ scope.row.status }}</el-tag>
       </template>
     </el-table-column>
   </el-table>
@@ -23,14 +23,8 @@ import { Component, Vue } from 'vue-property-decorator';
 import {SUCCESS_STATUS} from '@/constant';
 
 @Component({
+  name: 'TransactionTable',
   filters: {
-    statusFilter(status) {
-      const statusMap = {
-        success: 'success',
-        pending: 'danger'
-      };
-      return statusMap[status];
-    },
     orderNoFilter(str) {
       return str.substring(0, 30);
     }

src/views/example/list.vue

@@ -28,7 +28,7 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | articleStatusFilter">{{ scope.row.status }}</el-tag>
         </template>
       </el-table-column>
 
@@ -63,18 +63,9 @@
   import {SUCCESS_STATUS} from '@/constant';
 
   @Component({
+    name: 'List',
     components: {
       Pagination
-    },
-    filters: {
-      statusFilter(status) {
-        const statusMap = {
-          published: 'success',
-          draft: 'info',
-          deleted: 'danger'
-        };
-        return statusMap[status];
-      }
     }
   })
   export default class List extends Vue {
@@ -128,4 +119,3 @@
     top: 10px;
   }
 </style>
-

src/views/tab/components/tabPane.vue

@@ -45,7 +45,7 @@
 
     <el-table-column class-name="status-col" label="Status" width="110">
       <template slot-scope="scope">
-        <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+        <el-tag :type="scope.row.status | articleStatusFilter">{{ scope.row.status }}</el-tag>
       </template>
     </el-table-column>
 
@@ -63,16 +63,7 @@
   }
 
   @Component({
-    filters: {
-      statusFilter(status) {
-        const statusMap = {
-          published: 'success',
-          draft: 'info',
-          deleted: 'danger'
-        };
-        return statusMap[status];
-      }
-    }
+    name: 'TabPane'
   })
   export default class TabPane extends Vue {
     @Prop({default: 'CN'}) type!: string;

src/views/table/complexTable.vue

@@ -76,7 +76,7 @@
       </el-table-column>
       <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | articleStatusFilter">{{ scope.row.status }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
@@ -190,18 +190,11 @@
   }, {});
 
   @Component({
+    name: 'ComplexTable',
     components: {
       Pagination
     },
     filters: {
-      statusFilter(status) {
-        const statusMap = {
-          published: 'success',
-          draft: 'info',
-          deleted: 'danger'
-        };
-        return statusMap[status];
-      },
       typeFilter(type) {
         return calendarTypeKeyValue[type];
       }

src/views/table/dragTable.vue

@@ -41,7 +41,7 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | articleStatusFilter">{{ scope.row.status }}</el-tag>
         </template>
       </el-table-column>
 
@@ -66,16 +66,7 @@ import Sortable from 'sortablejs';
 import {SUCCESS_STATUS} from '@/constant';
 
 @Component({
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      };
-      return statusMap[status];
-    }
-  }
+  name: 'DragTable'
 })
 export default class DragTable extends Vue {
   list: any[] = [];

src/views/table/inlineEditTable.vue

@@ -29,7 +29,7 @@
 
       <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <el-tag :type="scope.row.status | articleStatusFilter">{{ scope.row.status }}</el-tag>
         </template>
       </el-table-column>
 
@@ -66,16 +66,7 @@
   import {SUCCESS_STATUS} from '@/constant';
 
   @Component({
-    filters: {
-      statusFilter(status) {
-        const statusMap = {
-          published: 'success',
-          draft: 'info',
-          deleted: 'danger'
-        };
-        return statusMap[status];
-      }
-    }
+    name: 'InlineEditTabele'
   })
   export default class InlineEditTable extends Vue {
     list: string[] | number[] = [];