细化

mock/article.js

@@ -1,19 +1,18 @@
 import Mock from 'mockjs'
 // http://mockjs.com/examples.html#Image
 
-const List = []
-const count = 100
+let List = []
+let count = 100
 
 const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
-const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
 
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
     id: '@increment',
     timestamp: +Mock.Random.date('T'),
-    author: '@first',
-    reviewer: '@first',
-    title: '@title(5, 10)',
+    author: '@cname',
+    reviewer: '@cname',
+    title: '@ctitle(5, 30)',
     content_short: 'mock data',
     content: baseContent,
     forecast: '@float(0, 100, 2, 2)',
@@ -23,8 +22,7 @@ for (let i = 0; i < count; i++) {
     display_time: '@date()',
     comment_disabled: true,
     pageviews: '@integer(300, 5000)',
-    image_uri,
-    platforms: ['a-platform']
+    image_uri: "@image('200x100', '#50B347', '#FFF', 'png', 'IMG')"
   }))
 }
 
@@ -74,6 +72,22 @@ export default [
     }
   },
 
+  {
+    url: '/article/delete',
+    type: 'get',
+    response: config => {
+      const { id } = config.query
+      if (List.find(article => article.id === +id)) {
+        List = List.filter(article => article.id !== +id)
+        count--
+        return {
+          code: 20000,
+          data: 'success'
+        }
+      }
+    }
+  },
+
   {
     url: '/article/pv',
     type: 'get',

package.json

@@ -6,8 +6,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
+    "build:prod": "vue-cli-service build --mode production",
+    "build": "vue-cli-service build",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src --fix",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",

src/api/article.js

@@ -39,3 +39,14 @@ export function updateArticle(data) {
     data
   })
 }
+
+export function deleteArticle(id) {
+  return request({
+    url: '/article/delete',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+

src/components/SrmDialogCheck/index.vue

@@ -1,17 +1,18 @@
 <template>
   <el-dialog
     :title="title"
-    :visible.sync="visible"
+    :visible="visible"
     :width="width"
     :show-close="false"
+    class="srm-dialog_body"
   >
     <div class="dialog-content">
       <i class="el-icon-warning" />
       <span>{{ content }}</span>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="handleDialog(false)">取 消</el-button>
-      <el-button type="primary" @click="handleDialog(true)">确 定</el-button>
+      <el-button @click="handleDialog(false)">取消</el-button>
+      <el-button type="primary" @click="handleDialog(true)">确定</el-button>
     </span>
   </el-dialog>
 </template>
@@ -23,30 +24,50 @@ export default {
       type: String,
       default: '提示'
     },
+    // eslint-disable-next-line
+    currentItem: {
+      required: true
+    },
     content: {
       type: String,
       default: '是否确定继续此操作'
     },
     width: {
       type: String,
       default: '350px'
-    },
-    visible: {
-      type: Boolean,
-      default: false
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  watch: {
+    currentItem: {
+      handler: function(val) {
+        if (val !== null && val !== undefined) {
+          this.visible = true
+        } else {
+          this.visible = false
+        }
+      },
+      deep: true
     }
   },
   methods: {
     handleDialog(check) {
-      this.$emit('update:visible', false)
       if (check) {
-        this.$emit('handleDialog', check)
+        this.$emit('confirmItem', this.currentItem)
       }
+      this.$emit('update:currentItem', null)
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+.srm-dialog_body /deep/ .el-dialog__body{
+  padding: 10px 20px;
+}
 .dialog-content{
   display: flex;
   align-items: center;

src/components/SrmForm/SrmUpload.vue

@@ -18,9 +18,6 @@
         />
       </div>
     </el-upload>
-    <!--
-      :on-success="uploadSuccess"
-     -->
     <el-upload
       v-else
       :before-upload="beforeUpload"
@@ -34,11 +31,6 @@
       :on-exceed="onExceed"
       :on-change="changeImg"
     >
-      <!-- <div class="upload-wrap">
-        <i
-          class="el-icon-plus"
-        />
-      </div> -->
       <i class="el-icon-plus" />
     </el-upload>
     <div

src/components/SrmForm/index.vue

@@ -8,7 +8,6 @@
       :inline="inline"
       :size="size"
       :label-width="labelWitdh"
-      class="srm-form"
     >
       <el-row>
         <template v-for="(item, index) in _formItems">
@@ -39,24 +38,18 @@
         <component :is="inline ? 'span' : 'el-col'" :span="btnCol">
           <el-form-item v-if="submitMsg || resetMsg">
             <slot name="buttons" />
-            <el-button v-if="!!submitMsg" @click="handleSubmit">{{ submitMsg }}</el-button>
-            <el-button v-if="resetMsg" @click="handleReset">{{ resetMsg }}</el-button>
-            <!-- <el-button v-if="showBack" :disabled="false" @click="goBack">返回</el-button> -->
+            <el-button v-if="!!submitMsg" type="primary" @click="handleSubmit">{{ submitMsg }}</el-button>
+            <el-button v-if="resetMsg" type="info" @click="handleReset">{{ resetMsg }}</el-button>
             <span v-if="showBack" class="el-button el-button--small" @click="goBack">返回</span>
           </el-form-item>
         </component>
 
       </el-row>
-    <!-- :class="item.itemAttrs.className" -->
     </el-form>
   </div>
 </template>
 
 <script>
-/*
-  attrs 中转给el-form-item的各类属性
-  itemAttrs 额外增加的各类属性
-*/
 import componentMap from './util'
 import SrmSelect from './SrmSelect'
 import SrmRadioGroup from './SrmRadioGroup'
@@ -242,13 +235,4 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-  .container /deep/ .srm-form .el-button--default{
-    padding: 9px 50px;
-    background: #999;
-    color: #FFF;
-    &:hover{
-      background: #333;
-    }
-  }
-</style>
+

src/components/SrmTable/index.vue

@@ -196,18 +196,13 @@ export default {
     currentChange(page) {
       this.$emit('changePage', page)
     },
-    setAttrs(options) {
-      return {
-        type: options.type,
-        align: options.align || 'center',
-        prop: options.prop,
-        label: options.label,
-        width: options.width,
-        minWidth: options.minWidth,
-        fixed: options.fixed,
-        formatter: options.formatter,
-        sortable: options.sortable
+    setAttrs(params) {
+      // eslint-disable-next-line
+      const { slot, ...options } = params
+      if (!options.align) {
+        options.align = 'center'
       }
+      return { ...options }
     },
     handleDownload() {
       this.downloadLoading = true

src/layout/components/Navbar.vue

@@ -13,23 +13,8 @@
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <el-dropdown-item>
-            <span style="display:block;" @click="logout">Log Out</span>
+            <span style="display:block;" @click="logout">退出登录</span>
           </el-dropdown-item>
-          <!-- <router-link to="/">
-            <el-dropdown-item>
-              <span style="display:block;" @click="logout">Log Out</span>
-            </el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">Log Out</span>
-          </el-dropdown-item>
-        </el-dropdown-menu> -->
         </el-dropdown-menu>
       </el-dropdown>
     </div>

src/styles/index.scss

@@ -125,11 +125,4 @@ div:focus {
 
 .require-visible /deep/ .el-form-item__label::before {
   display: none;
-}
-// 不需要数据的表格
-// .no-body_table /deep/ .el-table__body-wrapper {
-//   display: none;
-//   .el-table--small td, .el-table--small th{
-//     padding: 0;
-//   }
-// }
+}

src/utils/pageMixin.js

@@ -1,16 +1,20 @@
 import Cookies from 'js-cookie'
 import settings from '@/settings'
-
+import SrmDialogCheck from '@/components/SrmDialogCheck'
 export default {
   data() {
     return {
       listQuery: { ...settings.listQuery }, // 扩展运算，以免影响settings中的值
       total: 0,
       listLoading: false,
       fetchList: null,
-      tableData: []
+      tableData: [],
+      checkDialogItem: undefined // 当前选择项
     }
   },
+  components: {
+    SrmDialogCheck
+  },
   watch: {
     listQuery: {
       handler: 'getList',
@@ -51,15 +55,21 @@ export default {
         this.listLoading = false
       })
     },
+    /**
+     * @description: 操作项目及回调
+     * fn: 需要执行的函数
+     * cb: 回调（可传空）
+     * ...rest: 需要执行函数的参数
+     */
     async mixinHandleItem(fn, cb, ...rest) {
-      const { code, message } = await fn(...rest)
+      const { code, data } = await fn(...rest)
       if (code === 20000) {
         this.$message.success('操作成功')
         if (cb && typeof cb === 'function') {
           cb()
         }
       } else {
-        this.$message.error(message || '操作失败，请重试')
+        this.$message.error(data || '操作失败，请重试')
       }
     }
   }