From a86b16bba66bd2283ef0acc24ff86ac1ef8adb67 Mon Sep 17 00:00:00 2001
From: "Adam.Gong" <admin@xiuyetang.com>
Date: Wed, 13 May 2020 02:14:54 +0800
Subject: [PATCH] auto commit the code by alias command

---
 .env.production                                  |   4 +-
 mock/index.js                                    |  18 +-
 mock/prod.js                                     | 106 ++++---
 src/api/prod.js                                  |   6 +-
 src/components/Pagination/index.vue              |   5 +-
 src/lang/zh.js                                   |   5 +-
 src/router/modules/prod.js                       |  22 +-
 src/router/modules/sites.js                      |   4 +-
 src/store/modules/settings.js                    |  18 +-
 src/utils/request.js                             |  25 +-
 src/views/example/list.vue                       |  75 ++++-
 src/views/prod/components/Dropdown/Comment.vue   |  41 +++
 src/views/prod/components/Dropdown/Platform.vue  |  46 +++
 src/views/prod/components/Dropdown/SourceUrl.vue |  38 +++
 src/views/prod/components/Dropdown/index.js      |   3 +
 src/views/prod/components/ProdDetail.vue         | 388 +++++++++++++++++++++++
 src/views/prod/components/Warning.vue            |  10 +
 src/views/prod/create.vue                        |  16 +
 src/views/prod/edit.vue                          |  13 +
 src/views/prod/list.vue                          |  94 +++---
 20 files changed, 799 insertions(+), 138 deletions(-)
 create mode 100755 src/views/prod/components/Dropdown/Comment.vue
 create mode 100755 src/views/prod/components/Dropdown/Platform.vue
 create mode 100755 src/views/prod/components/Dropdown/SourceUrl.vue
 create mode 100755 src/views/prod/components/Dropdown/index.js
 create mode 100755 src/views/prod/components/ProdDetail.vue
 create mode 100755 src/views/prod/components/Warning.vue
 create mode 100755 src/views/prod/create.vue
 create mode 100644 src/views/prod/edit.vue

diff --git a/.env.production b/.env.production
index 80c8103..8858c7b 100644
--- a/.env.production
+++ b/.env.production
@@ -2,5 +2,5 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = '/prod-api'
-
+#VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = 'https://api.glass.xiuyetang.com/'
diff --git a/mock/index.js b/mock/index.js
index 217ee3d..77def8e 100755
--- a/mock/index.js
+++ b/mock/index.js
@@ -1,15 +1,19 @@
 import Mock from 'mockjs'
-import { param2Obj } from '../src/utils'
+import {
+  param2Obj
+} from '../src/utils'
 
 import user from './user'
 import role from './role'
+import prod from './prod'
 import article from './article'
 import search from './remote-search'
-
+//因为没有Mock上，所以会请求不到数据。报404
 const mocks = [
   ...user,
   ...role,
   ...article,
+  ...prod,
   ...search
 ]
 
@@ -20,7 +24,7 @@ export function mockXHR() {
   // mock patch
   // https://github.com/nuysoft/Mock/issues/300
   Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
-  Mock.XHR.prototype.send = function() {
+  Mock.XHR.prototype.send = function () {
     if (this.custom.xhr) {
       this.custom.xhr.withCredentials = this.withCredentials || false
 
@@ -32,10 +36,14 @@ export function mockXHR() {
   }
 
   function XHR2ExpressReqWrap(respond) {
-    return function(options) {
+    return function (options) {
       let result = null
       if (respond instanceof Function) {
-        const { body, type, url } = options
+        const {
+          body,
+          type,
+          url
+        } = options
         // https://expressjs.com/en/4x/api.html#req
         result = respond({
           method: type,
diff --git a/mock/prod.js b/mock/prod.js
index 7e98179..7cd2792 100644
--- a/mock/prod.js
+++ b/mock/prod.js
@@ -10,21 +10,29 @@ const image_uri = 'https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a8255
 
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
-    pid: '@increment',
-    pname: '@title(5,10)',
-    timestamp: +Mock.Random.date('T'),
+    pid: '@increment', //产品id
+    pname: '01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流', //产品名移交
+    timestamp: +Mock.Random.date('T'), //产品时间
     shoper: '@first', //所属工厂
     salescount: '@first', //购买次数
-    importance: '@integer(1, 3)', //排序权重
-    prod_info_weight: '@integer(1, 3)', //重量
-    prod_info_leg_long: '@integer(1, 3)', //腿长
-    prod_info_glass_width: '@integer(1, 3)', //镜宽
-    prod_info_glass_height: '@integer(1, 3)', //镜高
-    prod_info_frame_width: '@integer(1, 3)', //框宽
-    prod_info_frame_height: '@integer(1, 3)', //框高
-    prod_info_norse_width: '@integer(1, 3)', //鼻宽
+    importance: '@integer(1, 3)', //排序-权重
+    prod_info_weight: '@integer(1, 3)', //参数--->重量
+    prod_info_leg_long: '@integer(1, 3)', //参数--->腿长
+    prod_info_glass_width: '@integer(1, 3)', //参数--->镜宽
+    prod_info_glass_height: '@integer(1, 3)', //参数--->镜高
+    prod_info_frame_width: '@integer(1, 3)', //参数--->框宽
+    prod_info_frame_height: '@integer(1, 3)', //参数--->框高
+    prod_info_norse_width: '@integer(1, 3)', //参数--->鼻宽
     prod_info_window_pic: [], //鼻宽
-    image_uri: image_uri
+    image_uri: image_uri,
+    prod_memo: '',
+    // 'type|1': ['CN', 'US', 'JP', 'EU'],
+    // 'status|1': ['published', 'draft'],
+    'type|1': ['CN', 'US', 'JP', 'EU'], //本产品销售区域
+    'prod_status|1': ['published', 'draft'], //状态，上线-下线
+    judge_list: [], //评论管理
+    sku_list: [], //sku清单
+    sku_attr: [], //sku属性
   }))
 }
 
@@ -35,23 +43,22 @@ export default [{
       const {
         importance,
         type,
-        title,
+        pname,
         page = 1,
         limit = 20,
-        sort
+        // sort
       } = config.query
 
       let mockList = List.filter(item => {
         if (importance && item.importance !== +importance) return false
         if (type && item.type !== type) return false
-        if (title && item.title.indexOf(title) < 0) return false
+        if (pname && item.pname.indexOf(pname) < 0) return false
         return true
       })
 
-      if (sort === '-id') {
-        mockList = mockList.reverse()
-      }
-
+      //   if (sort === '-pid') {
+      //     mockList = mockList.reverse()
+      //   }
       const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
 
       return {
@@ -63,16 +70,15 @@ export default [{
       }
     }
   },
-
   {
     url: '/yp/prod/detail',
     type: 'get',
     response: config => {
       const {
-        id
+        pid
       } = config.query
       for (const prod of List) {
-        if (prod.id === +id) {
+        if (prod.pid === +pid) {
           return {
             code: 20000,
             data: prod
@@ -82,34 +88,34 @@ export default [{
     }
   },
 
-  {
-    url: '/yp/prod/pv',
-    type: 'get',
-    response: _ => {
-      return {
-        code: 20000,
-        data: {
-          pvData: [{
-              key: 'PC',
-              pv: 1024
-            },
-            {
-              key: 'mobile',
-              pv: 1024
-            },
-            {
-              key: 'ios',
-              pv: 1024
-            },
-            {
-              key: 'android',
-              pv: 1024
-            }
-          ]
-        }
-      }
-    }
-  },
+  //   {
+  //     url: '/yp/prod/pv',
+  //     type: 'get',
+  //     response: _ => {
+  //       return {
+  //         code: 20000,
+  //         data: {
+  //           pvData: [{
+  //               key: 'PC',
+  //               pv: 1024
+  //             },
+  //             {
+  //               key: 'mobile',
+  //               pv: 1024
+  //             },
+  //             {
+  //               key: 'ios',
+  //               pv: 1024
+  //             },
+  //             {
+  //               key: 'android',
+  //               pv: 1024
+  //             }
+  //           ]
+  //         }
+  //       }
+  //     }
+  //   },
 
   {
     url: '/yp/prod/create',
diff --git a/src/api/prod.js b/src/api/prod.js
index 61a6e06..abf406c 100644
--- a/src/api/prod.js
+++ b/src/api/prod.js
@@ -12,16 +12,16 @@ export function fetchList(query) {
   return request({
     url: '/yp/prod/list',
     method: 'post',
-    params: query
+    data: query
   })
 }
 
-export function fetchArticle(id) {
+export function fetchProd(pid) {
   return request({
     url: '/yp/prod/detail',
     method: 'get',
     params: {
-      id
+      pid
     }
   })
 }
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index c815e13..4d3518b 100755
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div
+    :class="{'hidden':hidden}"
+    class="pagination-container"
+  >
     <el-pagination
       :background="background"
       :current-page.sync="currentPage"
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 03e490d..404ce3b 100755
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -79,7 +79,10 @@ export default {
       prodlist: '产品列表'
     },
     orders: '订单',
-    sites: '站点',
+    sites: {
+      sites: '站点',
+      siteList: '站点列表'
+    },
     metas: {
       metas: '元',
       list: '树'
diff --git a/src/router/modules/prod.js b/src/router/modules/prod.js
index 4ff042a..c85370c 100644
--- a/src/router/modules/prod.js
+++ b/src/router/modules/prod.js
@@ -16,11 +16,31 @@ const prodRouter = {
   children: [{
     path: 'list',
     component: () => import('@/views/prod/list'),
-    name: 'prodList',
+    name: 'ProdList',
     meta: {
       title: 'prods.prodlist',
       roles: ['admin', 'assistant', 'shoper', 'runner']
     }
+  }, {
+    path: 'edit/:pid(\\d+)',
+    component: () => import('@/views/prod/edit'),
+    name: 'ProdEdit',
+    meta: {
+      title: 'prods.prodedit',
+      noCache: true,
+      activeMenu: '/prod/list'
+    },
+    hidden: true
+  }, {
+    path: 'create/:fid(\\d+)',
+    component: () => import('@/views/prod/create'),
+    name: 'ProdCreate',
+    meta: {
+      title: 'prods.prodcreate',
+      noCache: true,
+      activeMenu: '/prod/list'
+    },
+    hidden: true
   }]
 }
 
diff --git a/src/router/modules/sites.js b/src/router/modules/sites.js
index 962cce0..36ad68e 100644
--- a/src/router/modules/sites.js
+++ b/src/router/modules/sites.js
@@ -7,7 +7,7 @@ const sitesRouter = {
   alwaysShow: true, // will always show the root menu
   name: 'Site',
   meta: {
-    title: 'sites',
+    title: 'sites.sites',
     icon: 'people',
     roles: ['admin', 'assistant', 'runner'] // you can set roles in root nav
   },
@@ -16,7 +16,7 @@ const sitesRouter = {
     component: () => import('@/views/site/list'),
     name: 'SiteList',
     meta: {
-      title: '站点列表',
+      title: 'sites.siteList',
       roles: ['admin', 'runner']
 
     }
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index e638a4c..65dabf3 100755
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,7 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, fixedHeader, sidebarLogo, supportPinyinSearch } = defaultSettings
+const {
+  showSettings,
+  tagsView,
+  fixedHeader,
+  sidebarLogo,
+  supportPinyinSearch
+} = defaultSettings
 
 const state = {
   theme: variables.theme,
@@ -13,7 +19,10 @@ const state = {
 }
 
 const mutations = {
-  CHANGE_SETTING: (state, { key, value }) => {
+  CHANGE_SETTING: (state, {
+    key,
+    value
+  }) => {
     if (state.hasOwnProperty(key)) {
       state[key] = value
     }
@@ -21,7 +30,9 @@ const mutations = {
 }
 
 const actions = {
-  changeSetting({ commit }, data) {
+  changeSetting({
+    commit
+  }, data) {
     commit('CHANGE_SETTING', data)
   }
 }
@@ -32,4 +43,3 @@ export default {
   mutations,
   actions
 }
-
diff --git a/src/utils/request.js b/src/utils/request.js
index b231657..b644e37 100755
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -40,21 +40,13 @@ service.interceptors.request.use(
         'Content-Type': 'application/x-www-form-urlencoded'
       }
     }
-    // let options = {
-    //   lock: true,
-    //   fullscreen: false,
-    //   text: '数据加载中……',
-    //   // background: '#FFCC00',
-    //   spinner: 'el-icon-loading'
-    // };
-    const options = {
-      type: 'success',
-      message: baseUrl + config.url,
-      title: 'request axios ',
-      showClose: true,
-      duration: 3000
-    }
-    Notification(options)
+    // Notification({
+    //   type: 'success',
+    //   message: baseUrl + config.url,
+    //   title: 'request axios ',
+    //   showClose: true,
+    //   duration: 3000
+    // })
     // loadingInstance = Loading.service(options);
     config.method === 'post'
       ? config.data = qs.stringify({
@@ -75,7 +67,6 @@ service.interceptors.request.use(
     // do something before request is sent
   },
   error => {
-    // do something with request error
     Message({
       message: error || 'Error',
       type: 'error',
@@ -100,7 +91,7 @@ service.interceptors.response.use(
    */
   response => {
     const options = {
-      type: 'error',
+      type: response.status == 200 ? 'success' : 'error',
       message: response.status,
       title: 'response status value ',
       showClose: true,
diff --git a/src/views/example/list.vue b/src/views/example/list.vue
index 7cdc4ac..6f5e91a 100755
--- a/src/views/example/list.vue
+++ b/src/views/example/list.vue
@@ -1,31 +1,62 @@
 <template>
   <div class="app-container">
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
-      <el-table-column align="center" label="ID" width="80">
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column
+        align="center"
+        label="ID"
+        width="80"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="Date">
+      <el-table-column
+        width="180px"
+        align="center"
+        label="Date"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="120px" align="center" label="Author">
+      <el-table-column
+        width="120px"
+        align="center"
+        label="Author"
+      >
         <template slot-scope="scope">
           <span>{{ scope.row.author }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="Importance">
+      <el-table-column
+        width="100px"
+        label="Importance"
+      >
         <template slot-scope="scope">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
+          <svg-icon
+            v-for="n in +scope.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">
+      <el-table-column
+        class-name="status-col"
+        label="Status"
+        width="110"
+      >
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">
             {{ row.status }}
@@ -33,18 +64,32 @@
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="Title">
+      <el-table-column
+        min-width="300px"
+        label="Title"
+      >
         <template slot-scope="{row}">
-          <router-link :to="'/example/edit/'+row.id" class="link-type">
+          <router-link
+            :to="'/example/edit/'+row.id"
+            class="link-type"
+          >
             <span>{{ row.title }}</span>
           </router-link>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column
+        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">
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-edit"
+            >
               Edit
             </el-button>
           </router-link>
@@ -52,7 +97,13 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
   </div>
 </template>
 
diff --git a/src/views/prod/components/Dropdown/Comment.vue b/src/views/prod/components/Dropdown/Comment.vue
new file mode 100755
index 0000000..d34b2b9
--- /dev/null
+++ b/src/views/prod/components/Dropdown/Comment.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>
+      {{ !comment_disabled?'Comment: opened':'Comment: closed' }}
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-padding">
+      <el-dropdown-item>
+        <el-radio-group v-model="comment_disabled" style="padding: 10px;">
+          <el-radio :label="true">
+            Close comment
+          </el-radio>
+          <el-radio :label="false">
+            Open comment
+          </el-radio>
+        </el-radio-group>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    comment_disabled: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/prod/components/Dropdown/Platform.vue b/src/views/prod/components/Dropdown/Platform.vue
new file mode 100755
index 0000000..0a52726
--- /dev/null
+++ b/src/views/prod/components/Dropdown/Platform.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
+    <el-button plain>
+      Platfroms({{ platforms.length }})
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-border">
+      <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
+        <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
+          {{ item.name }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      required: true,
+      default: () => [],
+      type: Array
+    }
+  },
+  data() {
+    return {
+      platformsOptions: [
+        { key: 'a-platform', name: 'a-platform' },
+        { key: 'b-platform', name: 'b-platform' },
+        { key: 'c-platform', name: 'c-platform' }
+      ]
+    }
+  },
+  computed: {
+    platforms: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/prod/components/Dropdown/SourceUrl.vue b/src/views/prod/components/Dropdown/SourceUrl.vue
new file mode 100755
index 0000000..8f47485
--- /dev/null
+++ b/src/views/prod/components/Dropdown/SourceUrl.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>
+      Link
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
+      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
+        <el-input v-model="source_uri" placeholder="Please enter the content">
+          <template slot="prepend">
+            URL
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    source_uri: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/prod/components/Dropdown/index.js b/src/views/prod/components/Dropdown/index.js
new file mode 100755
index 0000000..bc0c171
--- /dev/null
+++ b/src/views/prod/components/Dropdown/index.js
@@ -0,0 +1,3 @@
+export { default as CommentDropdown } from './Comment'
+export { default as PlatformDropdown } from './Platform'
+export { default as SourceUrlDropdown } from './SourceUrl'
diff --git a/src/views/prod/components/ProdDetail.vue b/src/views/prod/components/ProdDetail.vue
new file mode 100755
index 0000000..4b360a1
--- /dev/null
+++ b/src/views/prod/components/ProdDetail.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="createPost-container">
+    <el-form
+      ref="postForm"
+      :model="postForm"
+      :rules="rules"
+      class="form-container"
+    >
+      <sticky
+        :z-index="10"
+        :class-name="'sub-navbar '+postForm.status"
+      >
+        <CommentDropdown v-model="postForm.comment_disabled" />
+        <PlatformDropdown v-model="postForm.platforms" />
+        <SourceUrlDropdown v-model="postForm.source_uri" />
+        <el-button
+          v-loading="loading"
+          style="margin-left: 10px;"
+          type="success"
+          @click="submitForm"
+        >
+          Publish
+        </el-button>
+        <el-button
+          v-loading="loading"
+          type="warning"
+          @click="draftForm"
+        >
+          Draft
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+        <el-row>
+          <!-- <Warning /> -->
+          <el-col :span="24">
+            <el-form-item
+              style="margin-bottom: 40px;"
+              prop="title"
+            >
+              <MDinput
+                v-model="postForm.title"
+                :maxlength="100"
+                name="name"
+                required
+              >
+                Title
+              </MDinput>
+            </el-form-item>
+
+            <div class="postInfo-container">
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item
+                    label-width="60px"
+                    label="shoper:"
+                    class="postInfo-container-item"
+                  >
+                    <el-select
+                      v-model="postForm.shoper"
+                      :remote-method="getRemoteUserList"
+                      filterable
+                      default-first-option
+                      remote
+                      placeholder="Search user"
+                    >
+                      <el-option
+                        v-for="(item,index) in userListOptions"
+                        :key="item+index"
+                        :label="item"
+                        :value="item"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="10">
+                  <el-form-item
+                    label-width="120px"
+                    label="Publish Time:"
+                    class="postInfo-container-item"
+                  >
+                    <el-date-picker
+                      v-model="displayTime"
+                      type="datetime"
+                      format="yyyy-MM-dd HH:mm:ss"
+                      placeholder="Select date and time"
+                    />
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                  <el-form-item
+                    label-width="90px"
+                    label="Importance:"
+                    class="postInfo-container-item"
+                  >
+                    <el-rate
+                      v-model="postForm.importance"
+                      :max="3"
+                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+                      :low-threshold="1"
+                      :high-threshold="3"
+                      style="display:inline-block"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-form-item
+          style="margin-bottom: 40px;"
+          label-width="70px"
+          label="Summary:"
+        >
+          <el-input
+            v-model="postForm.content_short"
+            :rows="1"
+            type="textarea"
+            class="article-textarea"
+            autosize
+            placeholder="Please enter the content"
+          />
+          <span
+            v-show="contentShortLength"
+            class="word-counter"
+          >{{ contentShortLength }}words</span>
+        </el-form-item>
+
+        <el-form-item
+          prop="content"
+          style="margin-bottom: 30px;"
+        >
+          <Tinymce
+            ref="editor"
+            v-model="postForm.content"
+            :height="400"
+          />
+        </el-form-item>
+
+        <el-form-item
+          prop="image_uri"
+          style="margin-bottom: 30px;"
+        >
+          <Upload v-model="postForm.image_uri" />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import Upload from '@/components/Upload/SingleImage3'
+import MDinput from '@/components/MDinput'
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { validURL } from '@/utils/validate'
+import { fetchProd } from '@/api/prod'
+import { searchUser } from '@/api/remote-search'
+// import Warning from './Warning'
+import {
+  CommentDropdown,
+  PlatformDropdown,
+  SourceUrlDropdown
+} from './Dropdown'
+
+const defaultForm = {
+  status: 'draft',
+  title: '', // 文章题目
+  content: '', // 文章内容
+  content_short: '', // 文章摘要
+  source_uri: '', // 文章外链
+  image_uri: '', // 文章图片
+  display_time: undefined, // 前台展示时间
+  id: undefined,
+  platforms: ['a-platform'],
+  comment_disabled: false,
+  importance: 0
+}
+
+export default {
+  name: 'ProdDetail',
+  components: {
+    Tinymce,
+    MDinput,
+    Upload,
+    Sticky,
+    // Warning,
+    CommentDropdown,
+    PlatformDropdown,
+    SourceUrlDropdown
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + '为必传项',
+          type: 'error'
+        })
+        callback(new Error(rule.field + '为必传项'))
+      } else {
+        callback()
+      }
+    }
+    const validateSourceUri = (rule, value, callback) => {
+      if (value) {
+        if (validURL(value)) {
+          callback()
+        } else {
+          this.$message({
+            message: '外链url填写不正确',
+            type: 'error'
+          })
+          callback(new Error('外链url填写不正确'))
+        }
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+        image_uri: [{ validator: validateRequire }],
+        title: [{ validator: validateRequire }],
+        content: [{ validator: validateRequire }],
+        source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    contentShortLength() {
+      return this.postForm.content_short.length
+    },
+    lang() {
+      return this.$store.getters.language
+    },
+    displayTime: {
+      // set and get is useful when the data
+      // returned by the back end api is different from the front end
+      // back end return => "2013-06-25 06:59:25"
+      // front end need timestamp => 1372114765000
+      get() {
+        return +new Date(this.postForm.display_time)
+      },
+      set(val) {
+        this.postForm.display_time = new Date(val)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const pid = this.$route.params && this.$route.params.pid
+      this.fetchData(pid)
+    }
+
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(pid) {
+      fetchProd(pid)
+        .then(response => {
+          this.postForm = response.data
+
+          // just for test
+          this.postForm.title += `   prod pId:${this.postForm.pid}`
+          this.postForm.content_short += `   prod Id:${this.postForm.pid}`
+
+          // set tagsview title
+          this.setTagsViewTitle()
+
+          // set page title
+          this.setPageTitle()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    setTagsViewTitle() {
+      const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
+      const route = Object.assign({}, this.tempRoute, {
+        title: `${title}-${this.postForm.pid}`
+      })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+    },
+    setPageTitle() {
+      const title = 'Edit Article'
+      document.title = `${title} - ${this.postForm.pid}`
+    },
+    submitForm() {
+      console.log('this.postForm', this.postForm)
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          this.$notify({
+            title: '成功',
+            message: '发布文章成功',
+            type: 'success',
+            duration: 2000
+          })
+          this.postForm.status = 'published'
+          this.loading = false
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    draftForm() {
+      if (
+        this.postForm.content.length === 0 ||
+        this.postForm.title.length === 0
+      ) {
+        this.$message({
+          message: '请填写必要的标题和内容',
+          type: 'warning'
+        })
+        return
+      }
+      this.$message({
+        message: '保存成功',
+        type: 'success',
+        showClose: true,
+        duration: 1000
+      })
+      this.postForm.status = 'draft'
+    },
+    getRemoteUserList(query) {
+      searchUser(query).then(response => {
+        if (!response.data.items) return
+        this.userListOptions = response.data.items.map(v => v.name)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea /deep/ {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>
diff --git a/src/views/prod/components/Warning.vue b/src/views/prod/components/Warning.vue
new file mode 100755
index 0000000..d24fe29
--- /dev/null
+++ b/src/views/prod/components/Warning.vue
@@ -0,0 +1,10 @@
+<template>
+  <aside>
+    {{ $t('example.warning') }}
+    <a
+      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+      target="_blank"
+    >Document</a>
+  </aside>
+</template>
+
diff --git a/src/views/prod/create.vue b/src/views/prod/create.vue
new file mode 100755
index 0000000..68f873f
--- /dev/null
+++ b/src/views/prod/create.vue
@@ -0,0 +1,16 @@
+<template>
+  <prod-detail :is-edit="false" />
+</template>
+
+<script>
+import ProdDetail from './components/ProdDetail'
+// HTML 中的标签名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
+// 这意味着当你使用 DOM 中的模板时，
+// 使用驼峰命名法 的 prop 名需要使用其等价的短横线分隔命名方法或者全部使用小写。
+// 否者就会报上述错误。
+export default {
+  name: 'CreateForm',
+  components: { ProdDetail }
+}
+</script>
+
diff --git a/src/views/prod/edit.vue b/src/views/prod/edit.vue
new file mode 100644
index 0000000..1643fb1
--- /dev/null
+++ b/src/views/prod/edit.vue
@@ -0,0 +1,13 @@
+<template>
+  <prod-detail :is-edit="true" />
+</template>
+
+<script>
+import ProdDetail from './components/ProdDetail'
+
+export default {
+  name: 'EditForm',
+  components: { ProdDetail }
+}
+</script>
+
diff --git a/src/views/prod/list.vue b/src/views/prod/list.vue
index 6f5e91a..06f6ca5 100755
--- a/src/views/prod/list.vue
+++ b/src/views/prod/list.vue
@@ -1,5 +1,19 @@
 <template>
   <div class="app-container">
+    <!-- <el-header>
+
+    </el-header> -->
+    <template>
+      <router-link :to="'/prod/create/1111'">
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-edit"
+        >
+          create
+        </el-button>
+      </router-link>
+    </template>
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -10,39 +24,45 @@
     >
       <el-table-column
         align="center"
-        label="ID"
-        width="80"
+        label="pid"
       >
         <template slot-scope="scope">
-          <span>{{ scope.row.id }}</span>
+          <span>{{ scope.row.pid }}</span>
         </template>
       </el-table-column>
-
       <el-table-column
-        width="180px"
         align="center"
-        label="Date"
+        label="pname"
       >
         <template slot-scope="scope">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{ scope.row.pname }}</span>
         </template>
       </el-table-column>
-
       <el-table-column
-        width="120px"
         align="center"
-        label="Author"
+        label="参数信息"
       >
         <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
+          <span>框宽{{ scope.row.prod_info_frame_width }}mm</span><br>
+          <span>腿长{{ scope.row.prod_info_leg_long }}mm</span><br>
+          <span>镜宽{{ scope.row.prod_info_glass_width }}mm</span><br>
+          <span>镜高{{ scope.row.prod_info_glass_height }}mm</span><br>
+          <span>鼻宽{{ scope.row.prod_info_norse_width }}mm</span><br>
+          <span>重量{{ scope.row.prod_info_weight }}g</span>
         </template>
       </el-table-column>
 
       <el-table-column
-        width="100px"
-        label="Importance"
+        align="center"
+        label="Date"
       >
         <template slot-scope="scope">
+          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Importance">
+        <template slot-scope="scope">
           <svg-icon
             v-for="n in +scope.row.importance"
             :key="n"
@@ -54,43 +74,36 @@
 
       <el-table-column
         class-name="status-col"
-        label="Status"
-        width="110"
+        label="prod_status"
       >
         <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
-            {{ row.status }}
+          <el-tag :type="row.prod_status | statusFilter">
+            {{ row.prod_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>
-
-      <el-table-column
         align="center"
         label="Actions"
-        width="120"
       >
-        <template slot-scope="scope">
-          <router-link :to="'/example/edit/'+scope.row.id">
+        <template slot-scope="{row}">
+          <router-link :to="'/prod/edit/'+row.pid">
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-edit"
+            >
+              Edit1
+            </el-button>
+          </router-link>
+          <router-link :to="'/prod/del/'+row.pid">
             <el-button
               type="primary"
               size="small"
               icon="el-icon-edit"
             >
-              Edit
+              Edit2
             </el-button>
           </router-link>
         </template>
@@ -108,20 +121,20 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/article'
+import { fetchList } from '@/api/prod'
+// import { Pagination } from "@/components/Pagination"; // Secondary package based on el-pagination
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
-
 export default {
-  name: 'ArticleList',
+  name: 'ProdList',
   components: { Pagination },
   filters: {
-    statusFilter(status) {
+    statusFilter(prod_status) {
       const statusMap = {
         published: 'success',
         draft: 'info',
         deleted: 'danger'
       }
-      return statusMap[status]
+      return statusMap[prod_status]
     }
   },
   data() {
@@ -141,6 +154,7 @@ export default {
   methods: {
     getList() {
       this.listLoading = true
+      console.log('getList', 'dddddd')
       fetchList(this.listQuery).then(response => {
         this.list = response.data.items
         this.total = response.data.total
-- 
2.0.0