From 8a0e4eede07d9836ba6ec1ead345155edcab531d Mon Sep 17 00:00:00 2001
From: BigBoss <2280520255@qq.com>
Date: Fri, 26 Jun 2020 23:15:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81=E5=88=97=E8=A1=A8=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/article.js                   |   2 +-
 src/views/application/appList.vue |   8 +-
 src/views/prod/list.vue           | 652 ++++++++++++++++++++++++++++++++++----
 3 files changed, 592 insertions(+), 70 deletions(-)

diff --git a/mock/article.js b/mock/article.js
index 275695e..c86962d 100755
--- a/mock/article.js
+++ b/mock/article.js
@@ -2,7 +2,7 @@ import Mock from 'mockjs'
 // import logoPath from "~@/assets/img/yp_logo.jpeg"
 
 const List = []
-const count = 100
+const count = 50
 
 const baseContent = '<p>I am testing data, I am testing data.</p><p></p>'
 // const image_uri = logoPath
diff --git a/src/views/application/appList.vue b/src/views/application/appList.vue
index 1e72d43..e8e0eff 100644
--- a/src/views/application/appList.vue
+++ b/src/views/application/appList.vue
@@ -91,16 +91,16 @@ export default {
       path: '',
       nav_menu_data: [{
         title: '产品列表',
-        path: '/Menu/appList'
+        name: 'appList'
       }, {
         title: '订单列表',
-        path: '/Menu/orderList'
+        name: 'orderList'
       }, {
         title: '用户列表',
-        path: '/Menu/userList'
+        name: 'userList'
       }, {
         title: '运营分析',
-        path: '/Menu/analys'
+        name: 'analys'
       }],
       prodListTableData: [{
         prodInfo: 'pic',
diff --git a/src/views/prod/list.vue b/src/views/prod/list.vue
index 6f5e91a..3e67192 100755
--- a/src/views/prod/list.vue
+++ b/src/views/prod/list.vue
@@ -1,102 +1,261 @@
 <template>
   <div class="app-container">
+    <div class="filter-container">
+      <!-- 搜索input -->
+      <el-input
+        v-model="listQuery.title"
+        :placeholder="$t('table.title')"
+        style="width: 200px;"
+        class="filter-item"
+        @keyup.enter.native="handleFilter"
+      />
+      <!-- type选择 -->
+      <el-select
+        v-model="listQuery.type"
+        :placeholder="$t('table.type')"
+        clearable
+        class="filter-item"
+        style="width: 110px"
+      >
+        <el-option
+          v-for="item in calendarTypeOptions"
+          :key="item.key"
+          :label="item.display_name"
+          :value="item.key"
+        />
+      </el-select>
+
+      <!-- imp选择 -->
+      <el-select
+        v-model="listQuery.importance"
+        :placeholder="$t('table.importance')"
+        clearable
+        filterable
+        style="width: 130px"
+        class="filter-item"
+      >
+        <!-- 分组tag筛选 -->
+        <el-option-group
+          v-for="group in importanceOptions"
+          :key="group.label"
+          :label="group.label"
+        >
+          <el-option
+            v-for="item in group.options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-option-group>
+      </el-select>
+      <!-- 排序 -->
+      <el-select
+        v-model="listQuery.sort"
+        style="width: 140px"
+        class="filter-item"
+        @change="handleFilter"
+      >
+        <el-option
+          v-for="item in sortOptions"
+          :key="item.key"
+          :label="item.label"
+          :value="item.key"
+        />
+      </el-select>
+      <!-- search按钮 -->
+      <el-button
+        v-waves
+        class="filter-item"
+        type="primary"
+        icon="el-icon-search"
+        @click="handleFilter"
+      >
+        {{ $t('table.search') }}
+      </el-button>
+      <!-- add按钮 -->
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+      >
+        {{ $t('table.add') }}
+      </el-button>
+      <!-- 导出为excel按钮 -->
+      <el-button
+        v-waves
+        :loading="downloadLoading"
+        class="filter-item"
+        type="primary"
+        icon="el-icon-download"
+        @click="handleDownload"
+      >
+        {{ $t('table.export') }}
+      </el-button>
+      <!-- 是否显示审核人 -->
+      <el-checkbox
+        v-model="showReviewer"
+        class="filter-item"
+        style="margin-left:15px;"
+        @change="tableKey=tableKey+1"
+      >
+        {{ $t('table.reviewer') }}
+      </el-checkbox>
+    </div>
+
+    <!-- 表格 -->
     <el-table
+      :key="tableKey"
       v-loading="listLoading"
       :data="list"
       border
       fit
       highlight-current-row
-      style="width: 100%"
+      style="width: 100%;"
+      @sort-change="sortChange"
     >
+      <!-- id列 -->
       <el-table-column
+        :label="$t('table.id')"
+        prop="id"
+        sortable="custom"
         align="center"
-        label="ID"
         width="80"
+        :class-name="getSortClass('id')"
       >
-        <template slot-scope="scope">
-          <span>{{ scope.row.id }}</span>
+        <template slot-scope="{row}">
+          <span>{{ row.id }}</span>
         </template>
       </el-table-column>
-
+      <!-- date列 -->
       <el-table-column
-        width="180px"
+        :label="$t('table.date')"
+        width="150px"
         align="center"
-        label="Date"
       >
-        <template slot-scope="scope">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+        <template slot-scope="{row}">
+          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
-
+      <!-- title列 -->
+      <el-table-column
+        :label="$t('table.title')"
+        min-width="150px"
+      >
+        <template slot-scope="{row}">
+          <span
+            class="link-type"
+            @click="handleUpdate(row)"
+          >{{ row.title }}</span>
+          <el-tag>{{ row.type | typeFilter }}</el-tag>
+        </template>
+      </el-table-column>
+      <!-- author列 -->
       <el-table-column
-        width="120px"
+        :label="$t('table.author')"
+        width="110px"
         align="center"
-        label="Author"
       >
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
+        <template slot-scope="{row}">
+          <span>{{ row.author }}</span>
+        </template>
+      </el-table-column>
+      <!-- reviewer列 -->
+      <el-table-column
+        v-if="showReviewer"
+        :label="$t('table.reviewer')"
+        width="110px"
+        align="center"
+      >
+        <template slot-scope="{row}">
+          <span style="color:red;">{{ row.reviewer }}</span>
         </template>
       </el-table-column>
-
       <el-table-column
-        width="100px"
-        label="Importance"
+        :label="$t('table.importance')"
+        width="80px"
       >
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
           <svg-icon
-            v-for="n in +scope.row.importance"
+            v-for="n in +row.importance"
             :key="n"
             icon-class="star"
             class="meta-item__icon"
           />
         </template>
       </el-table-column>
-
+      <!-- 阅读数列 -->
       <el-table-column
-        class-name="status-col"
-        label="Status"
-        width="110"
+        :label="$t('table.readings')"
+        align="center"
+        width="95"
       >
         <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
-          </el-tag>
+          <span
+            v-if="row.pageviews"
+            class="link-type"
+            @click="handleFetchPv(row.pageviews)"
+          >{{ row.pageviews }}</span>
+          <span v-else>0</span>
         </template>
       </el-table-column>
 
+      <!-- 状态列 -->
       <el-table-column
-        min-width="300px"
-        label="Title"
+        :label="$t('table.status')"
+        class-name="status-col"
+        width="100"
       >
         <template slot-scope="{row}">
-          <router-link
-            :to="'/example/edit/'+row.id"
-            class="link-type"
-          >
-            <span>{{ row.title }}</span>
-          </router-link>
+          <el-tag :type="row.status | statusFilter">
+            {{ row.status }}
+          </el-tag>
         </template>
       </el-table-column>
-
+      <!-- 操作列 -->
       <el-table-column
+        :label="$t('table.actions')"
         align="center"
-        label="Actions"
-        width="120"
-      >
-        <template slot-scope="scope">
-          <router-link :to="'/example/edit/'+scope.row.id">
-            <el-button
-              type="primary"
-              size="small"
-              icon="el-icon-edit"
-            >
-              Edit
-            </el-button>
-          </router-link>
+        width="230"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="{row,$index}">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleUpdate(row)"
+          >
+            {{ $t('table.edit') }}
+          </el-button>
+          <el-button
+            v-if="row.status!='published'"
+            size="mini"
+            type="success"
+            @click="handleModifyStatus(row,'published')"
+          >
+            {{ $t('table.publish') }}
+          </el-button>
+          <el-button
+            v-if="row.status!='draft'"
+            size="mini"
+            @click="handleModifyStatus(row,'draft')"
+          >
+            {{ $t('table.draft') }}
+          </el-button>
+          <el-button
+            v-if="row.status!='deleted'"
+            size="mini"
+            type="danger"
+            @click="handleDelete(row,$index)"
+          >
+            {{ $t('table.delete') }}
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
+    <!-- 分页器 -->
     <pagination
       v-show="total>0"
       :total="total"
@@ -104,16 +263,160 @@
       :limit.sync="listQuery.limit"
       @pagination="getList"
     />
+
+    <el-dialog
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogFormVisible"
+    >
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="left"
+        label-width="70px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item
+          :label="$t('table.type')"
+          prop="type"
+        >
+          <el-select
+            v-model="temp.type"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in calendarTypeOptions"
+              :key="item.key"
+              :label="item.display_name"
+              :value="item.key"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          :label="$t('table.date')"
+          prop="timestamp"
+        >
+          <el-date-picker
+            v-model="temp.timestamp"
+            type="datetime"
+            placeholder="Please pick a date"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('table.title')"
+          prop="title"
+        >
+          <el-input v-model="temp.title" />
+        </el-form-item>
+        <el-form-item :label="$t('table.status')">
+          <el-select
+            v-model="temp.status"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('table.importance')">
+          <el-rate
+            v-model="temp.importance"
+            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+            :max="3"
+            style="margin-top:8px;"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('table.remark')">
+          <el-input
+            v-model="temp.remark"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            type="textarea"
+            placeholder="Please input"
+          />
+        </el-form-item>
+      </el-form>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="dialogFormVisible = false">
+          {{ $t('table.cancel') }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="dialogStatus==='create'?createData():updateData()"
+        >
+          {{ $t('table.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="dialogPvVisible"
+      title="Reading statistics"
+    >
+      <el-table
+        :data="pvData"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="key"
+          label="Channel"
+        />
+        <el-table-column
+          prop="pv"
+          label="Pv"
+        />
+      </el-table>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          type="primary"
+          @click="dialogPvVisible = false"
+        >{{ $t('table.confirm') }}</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import {
+  fetchList,
+  fetchPv,
+  createArticle,
+  updateArticle
+} from '@/api/article'
+import waves from '@/directive/waves' // waves directive
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+
+const calendarTypeOptions = [
+  { key: 'CN', display_name: '成镜' },
+  { key: 'US', display_name: '镜片' },
+  { key: 'JP', display_name: '隐形眼镜' },
+  { key: 'EU', display_name: '特种镜' }
+]
+
+// arr to obj, such as { CN : "China", US : "USA" }
+const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
+  acc[cur.key] = cur.display_name
+  return acc
+}, {})
 
 export default {
-  name: 'ArticleList',
+  name: 'ComplexTable',
   components: { Pagination },
+  directives: { waves },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -122,17 +425,103 @@ export default {
         deleted: 'danger'
       }
       return statusMap[status]
+    },
+    typeFilter(type) {
+      return calendarTypeKeyValue[type]
     }
   },
   data() {
     return {
+      tableKey: 0,
       list: null,
       total: 0,
       listLoading: true,
       listQuery: {
         page: 1,
-        limit: 20
-      }
+        limit: 20,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      importanceOptions: [{
+        label: '款式索引',
+        options: [{
+          value: 'young',
+          label: '青春学子风'
+        }, {
+          value: 'leisure',
+          label: '休闲'
+        }, {
+          value: 'business',
+          label: '商务'
+        }, {
+          value: 'Retro',
+          label: '复古'
+        }, {
+          value: 'fashion',
+          label: '时尚'
+        }]
+      }, {
+        label: '颜色',
+        options: [{
+          value: 'golden',
+          label: '金色'
+        }, {
+          value: 'silver',
+          label: '银色'
+        }, {
+          value: 'black',
+          label: '黑色'
+        }, {
+          value: 'multicolour',
+          label: '彩色'
+        }, {
+          value: 'gun',
+          label: '枪色'
+        }]
+      }],
+      calendarTypeOptions,
+      sortOptions: [
+        { label: 'ID Ascending', key: '+id' },
+        { label: 'ID Descending', key: '-id' }
+      ],
+      statusOptions: ['published', 'draft', 'deleted'],
+      showReviewer: false,
+      temp: {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        type: '',
+        status: 'published'
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      dialogPvVisible: false,
+      pvData: [],
+      rules: {
+        type: [
+          { required: true, message: 'type is required', trigger: 'change' }
+        ],
+        timestamp: [
+          {
+            type: 'date',
+            required: true,
+            message: 'timestamp is required',
+            trigger: 'change'
+          }
+        ],
+        title: [
+          { required: true, message: 'title is required', trigger: 'blur' }
+        ]
+      },
+      downloadLoading: false
     }
   },
   created() {
@@ -144,20 +533,153 @@ export default {
       fetchList(this.listQuery).then(response => {
         this.list = response.data.items
         this.total = response.data.total
-        this.listLoading = false
+
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: '操作成功',
+        type: 'success'
+      })
+      row.status = status
+    },
+    sortChange(data) {
+      const { prop, order } = data
+      if (prop === 'id') {
+        this.sortByID(order)
+      }
+    },
+    sortByID(order) {
+      if (order === 'ascending') {
+        this.listQuery.sort = '+id'
+      } else {
+        this.listQuery.sort = '-id'
+      }
+      this.handleFilter()
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        status: 'published',
+        type: ''
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
       })
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
+          this.temp.author = '秀野堂主'
+          createArticle(this.temp).then(() => {
+            this.list.unshift(this.temp)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '创建成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
+          updateArticle(tempData).then(() => {
+            const index = this.list.findIndex(v => v.id === this.temp.id)
+            this.list.splice(index, 1, this.temp)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '更新成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row, index) {
+      this.$notify({
+        title: '成功',
+        message: '删除成功',
+        type: 'success',
+        duration: 2000
+      })
+      this.list.splice(index, 1)
+    },
+    handleFetchPv(pv) {
+      fetchPv(pv).then(response => {
+        this.pvData = response.data.pvData
+        this.dialogPvVisible = true
+      })
+    },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
+        const filterVal = [
+          'timestamp',
+          'title',
+          'type',
+          'importance',
+          'status'
+        ]
+        const data = this.formatJson(filterVal)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: 'table-list'
+        })
+        this.downloadLoading = false
+      })
+    },
+    formatJson(filterVal) {
+      return this.list.map(v =>
+        filterVal.map(j => {
+          if (j === 'timestamp') {
+            return parseTime(v[j])
+          } else {
+            return v[j]
+          }
+        })
+      )
+    },
+    getSortClass: function(key) {
+      const sort = this.listQuery.sort
+      return sort === `+${key}` ? 'ascending' : 'descending'
     }
   }
 }
 </script>
-
-<style scoped>
-.edit-input {
-  padding-right: 100px;
-}
-.cancel-btn {
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
-</style>
-- 
2.0.0