修改文章显示

src/api/articles.ts

@@ -2,21 +2,19 @@ import request from '@/utils/request'
 import { IArticleData } from './types'
 
 export const defaultArticleData: IArticleData = {
-  id: 0,
+  id: '',
-  status: 'draft',
   title: '',
   content: '',
   summary: '',
-  sourceURL: '',
+  source: '',
-  imageURL: '',
+  sourceUrl: '',
-  timestamp: '',
+  displayTime: '',
-  platforms: ['a-platform'],
+  tags: [],
-  disableComment: false,
+  keywords: [],
-  importance: 0,
+  sortno: 0,
   author: '',
-  reviewer: '',
   type: '',
-  pageviews: 0
+  attachments: []
 }
 
 export const getArticles = (params: any) =>

src/api/types.d.ts

@@ -1,17 +1,15 @@
 export interface IArticleData {
-  id: number
+  id: string
-  status: string
   title: string
   summary: string
   content: string
-  sourceURL: string
+  source: string
-  imageURL: string
+  sourceUrl: string
-  timestamp: string | number
+  displayTime: string | number
-  platforms: string[]
+  tags: string[]
-  disableComment: boolean
+  keywords: string[]
-  importance: number
+  sortno: number
   author: string
-  reviewer: string
   type: string
-  pageviews: number
+  attachments: []
 }

src/lang/en.ts

@@ -179,5 +179,8 @@ export default {
   admin: {
     addAdmin: 'New Admin',
     editAdmin: 'Edit Admin'
+  },
+  article: {
+    add: 'New Article'
   }
 }

src/lang/zh.ts

@@ -179,5 +179,8 @@ export default {
   admin: {
     addAdmin: '新增',
     editAdmin: '编辑'
+  },
+  article: {
+    add: '添加'
   }
 }

src/views/article/components/ArticleDetail.vue

@@ -10,9 +10,6 @@
         :z-index="10"
         :class-name="'sub-navbar '+postForm.status"
       >
-        <comment-dropdown v-model="postForm.disableComment" />
-        <platform-dropdown v-model="postForm.platforms" />
-        <source-url-dropdown v-model="postForm.sourceURL" />
         <el-button
           v-loading="loading"
           style="margin-left: 10px;"
@@ -223,10 +220,9 @@ export default class extends Vue {
   private loading = false
   private userListOptions = []
   private rules = {
-    imageURL: [{ validator: this.validateRequire }],
     title: [{ validator: this.validateRequire }],
-    fullContent: [{ validator: this.validateRequire }],
+    content: [{ validator: this.validateRequire }],
-    sourceURL: [{ validator: this.validateSourceUrl, trigger: 'blur' }]
+    sourceUrl: [{ validator: this.validateSourceUrl, trigger: 'blur' }]
   }
 
   private tempTagView?: ITagView
@@ -245,11 +241,11 @@ export default class extends Vue {
   // e.g.: backend return => "2013-06-25 06:59:25"
   //       frontend need timestamp => 1372114765000
   get timestamp() {
-    return (+new Date(this.postForm.timestamp))
+    return (+new Date(this.postForm.displayTime))
   }
 
   set timestamp(value) {
-    this.postForm.timestamp = +new Date(value)
+    this.postForm.displayTime = +new Date(value)
   }
 
   created() {
@@ -310,7 +306,6 @@ export default class extends Vue {
           type: 'success',
           duration: 2000
         })
-        this.postForm.status = 'published'
         // Just to simulate the time of the request
         setTimeout(() => {
           this.loading = false
@@ -336,7 +331,6 @@ export default class extends Vue {
       showClose: true,
       duration: 1000
     })
-    this.postForm.status = 'draft'
   }
 
   private async getRemoteUserList(name: string) {

src/views/article/list.vue

@@ -1,37 +1,56 @@
 <template>
   <div class="app-container">
+    <router-link to="/article/create">
+      <el-button
+          type="primary"
+          icon="el-icon-edit"
+      >
+        {{$t('article.add')}}
+      </el-button>
+    </router-link>
     <el-table
       v-loading="listLoading"
       :data="list"
       border
       fit
       highlight-current-row
-      style="width: 100%"
+      style="width: 100%;margin-top:30px;"
     >
+
       <el-table-column
-        width="80"
+        width="180px"
         align="center"
-        label="ID"
+        label="时间"
       >
         <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
+          <span>{{ row.displayTime | parseTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          width="180px"
+          label="类型"
+      >
+        <template slot-scope="{row}">
+          <span>{{ row.type }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          min-width="300px"
+          label="标题"
+      >
+        <template slot-scope="{row}">
+          <router-link
+              :to="'/article/edit/'+row._id"
+              class="link-type"
+          >
+            <span>{{ row.title }}</span>
+          </router-link>
         </template>
       </el-table-column>
 
       <el-table-column
         width="180px"
-        align="center"
+        label="作者"
-        label="Date"
-      >
-        <template slot-scope="{row}">
-          <span>{{ row.timestamp | parseTime }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        width="180px"
-        align="center"
-        label="Author"
       >
         <template slot-scope="{row}">
           <span>{{ row.author }}</span>
@@ -39,42 +58,11 @@
       </el-table-column>
 
       <el-table-column
-        width="105px"
+          width="180px"
-        label="Importance"
+          label="来源"
       >
         <template slot-scope="{row}">
-          <svg-icon
+          <span><a :href="row.sourceUrl">{{ row.source }}</a></span>
-            v-for="n in +row.importance"
-            :key="n"
-            name="star"
-            class="meta-item__icon"
-          />
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        class-name="status-col"
-        label="Status"
-        width="110"
-      >
-        <template slot-scope="{row}">
-          <el-tag :type="row.status | articleStatusFilter">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        min-width="300px"
-        label="Title"
-      >
-        <template slot-scope="{row}">
-          <router-link
-            :to="'/example/edit/'+row.id"
-            class="link-type"
-          >
-            <span>{{ row.title }}</span>
-          </router-link>
         </template>
       </el-table-column>
 
@@ -117,8 +105,14 @@ import Pagination from '@/components/Pagination/index.vue'
   name: 'ArticleList',
   components: {
     Pagination
+  },
+  filters: {
+    parseTime: (timestamp: string) => {
+      return new Date(timestamp).toISOString()
+    }
   }
 })
+
 export default class extends Vue {
   private total = 0
   private list: IArticleData[] = []
@@ -155,4 +149,5 @@ export default class extends Vue {
   right: 15px;
   top: 10px;
 }
+
 </style>