完成账号中心前端编写

vu/src/api/account.js

+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/api/account/list',
+    method: 'get',
+    params: query
+  })
+}
+

vu/src/router/index.js

@@ -14,6 +14,7 @@ import TopicRouter from './modules/topic'
 import StarRouter from './modules/star'
 import GroupRouter from './modules/group'
 import UserRouter from './modules/user'
+import AccountRouter from './modules/account'
 
 /** note: Submenu only appear when children.length>=1
  *  detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -90,6 +91,7 @@ export const asyncRouterMap = [
 
   /** When your routing table is too long, you can split it into small modules**/
   componentsRouter,
+  AccountRouter,
   UserRouter,
   GroupRouter,
   TopicRouter,

vu/src/router/modules/account.js

+
+import Layout from '@/views/layout/Layout'
+
+
+const AccountRouter = {
+  path: '/account',
+  component: Layout,
+  redirect: '/account/list',
+  name: 'Account',
+  meta: {
+    title: '账号管理',
+    icon: 'example'
+  },
+  children: [
+    {
+      path: 'list',
+      component: () => import('@/views/account/list'),
+      name: 'AccountList',
+      meta: {title: '账户列表', icon: 'list'}
+    },
+    {
+      path: 'create',
+      component: () => import('@/views/account/create'),
+      name: 'CreateAccount',
+      meta: {title: '创建账户', icon: 'edit'}
+    },
+    {
+      path: 'edit/:id(\\d+)',
+      component: () => import('@/views/account/edit'),
+      name: 'EditAccount',
+      meta: {title: '编辑账户', noCache: true},
+      hidden: true
+    }
+  ]
+}
+
+export default AccountRouter

vu/src/views/account/components/AccountDetail.vue

+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :class-name="'sub-navbar '+postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
+        </el-button>
+        <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+        <el-row>
+
+          <el-col :span="24">
+            <el-form-item style="margin-bottom: 40px;" prop="title">
+              <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
+                标题
+              </MDinput>
+            </el-form-item>
+
+            <div class="postInfo-container">
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
+                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable remote placeholder="搜索用户">
+                      <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="80px" label="发布时间:" class="postInfo-container-item">
+                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"/>
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                  <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
+                    <el-rate
+                      v-model="postForm.importance"
+                      :max="3"
+                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+                      :low-threshold="1"
+                      :high-threshold="3"
+                      style="margin-top:8px;"/>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
+          <el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
+          <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
+        </el-form-item>
+
+        <div class="editor-container">
+          <Tinymce ref="editor" :height="400" v-model="postForm.content" />
+        </div>
+
+        <div style="margin-bottom: 20px;">
+          <Upload v-model="postForm.image_uri" />
+        </div>
+      </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 { validateURL } from '@/utils/validate'
+import { fetchArticle } from '@/api/article'
+import { userSearch } from '@/api/remoteSearch'
+
+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: 'GroupDetail',
+  components: { Tinymce, MDinput, Upload, Sticky},
+  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 (validateURL(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
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
+
+    // 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(id) {
+      fetchArticle(id).then(response => {
+        this.postForm = response.data
+        // Just for test
+        this.postForm.title += `   Article Id:${this.postForm.id}`
+        this.postForm.content_short += `   Article Id:${this.postForm.id}`
+
+        // Set tagsview title
+        this.setTagsViewTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setTagsViewTitle() {
+      const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
+      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
+      this.$store.dispatch('updateVisitedView', route)
+    },
+    submitForm() {
+      this.postForm.display_time = parseInt(this.display_time / 1000)
+      console.log(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) {
+      userSearch(query).then(response => {
+        if (!response.data.items) return
+        this.userListOptions = response.data.items.map(v => v.name)
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/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;
+      }
+    }
+    .editor-container {
+      min-height: 500px;
+      margin: 0 0 30px;
+      .editor-upload-btn-container {
+        text-align: right;
+        margin-right: 10px;
+        .editor-upload-btn {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: -10px;
+    top: 0px;
+  }
+}
+</style>

vu/src/views/account/create.vue

+<template>
+  <account-detail :is-edit="false"/>
+</template>
+
+<script>
+import AccountDetail from './components/AccountDetail'
+
+export default {
+  name: 'CreateAccount',
+  components: { AccountDetail }
+}
+</script>

vu/src/views/account/edit.vue

+<template>
+  <account-detail :is-edit="true"/>
+</template>
+
+<script>
+import AccountDetail from './components/AccountDetail'
+
+export default {
+  name: 'EditAccount',
+  components: { AccountDetail }
+}
+</script>
+

vu/src/views/account/list.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input :placeholder="'搜素'" v-model="listQuery.filter.value" style="width: 180px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-select v-model="listQuery.filter.key" :placeholder="'搜索字段'" clearable class="filter-item" style="width: 110px">
+        <el-option v-for="item in SearchTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
+      </el-select>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">创建</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleOfflineOrOnline('offline')">下线</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleOfflineOrOnline('online')">上线</el-button>
+    </div>
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"></el-table-column>
+      <el-table-column align="center" label="账号ID" width="180">
+        <template slot-scope="scope">
+          <router-link :to="'/pick/edit/'+scope.row.id" class="link-type">
+          <span>{{ scope.row.id }}</span>
+            </router-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="307px" align="center" label="昵称">
+        <template slot-scope="scope">
+          <span>{{ scope.row.username }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="280px" align="center" label="密码">
+        <template slot-scope="scope">
+          <span>{{ scope.row.phone }}</span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column width="380px" align="center" label="邮箱">
+        <template slot-scope="scope">
+          <span>{{ scope.row.email }}</span>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" style="margin-left: 150px;" @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+import { fetchList, OffLineOrOnLine } from '@/api/user'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import waves from '@/directive/waves'
+
+export default {
+  name: 'UserList',
+  components: { Pagination },
+  filters: {
+    isOnlineFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'info',
+      }
+      return statusMap[status]
+    },
+    genderFilter(status) {
+      const statusMap = {
+        '男': 'success',
+        '女': 'info',
+        '全部': 'danger'
+      }
+      return statusMap[status]
+    },
+  },
+  directives: { waves },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      multipleSelection: [],
+      del_list: [],
+      listQuery: {
+        page: 1,
+        limit: 10,
+        filter: {
+          value: '',
+          key: '',
+          is_online: '',
+          is_recommend: '',
+        },
+      },
+      BooleanTypeOptions: [
+        {'key': 1, 'display_name': '是'},
+        {'key': 0, 'display_name': '否'}
+      ],
+      ReBooleanTypeOptions: [
+        {'key': 1, 'display_name': '是'},
+        {'key': 0, 'display_name': '否'}
+      ],
+      IdentifyTypeOptions: [
+        {'key': 1, 'display_name': '组长'},
+        {'key': 2, 'display_name': '管理员'},
+        {'key': 3, 'display_name': '长老'},
+        {'key': 4, 'display_name': '普通群员'},
+      ],
+      UserTypeOptions: [
+        {'key': 0, 'display_name': '普通用户'},
+        {'key': 1, 'display_name': '马甲用户'}
+      ],
+      SearchTypeOptions:[
+        {'key': 'nickname', 'display_name': '昵称'},
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.data.data
+        this.total = response.data.data.total
+        this.listLoading = false
+      })
+    },
+    handleSelectionChange(val) {
+        this.multipleSelection = val;
+    },
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleCreate() {
+      this.$router.push('/pick/create')
+    },
+    handleOfflineOrOnline(val){
+      const length = this.multipleSelection.length;
+      let str = '';
+      this.del_list = this.del_list.concat(this.multipleSelection);
+      for (let i = 0; i < length; i++) {
+          if (val === 'offline'){
+            this.multipleSelection[i].is_online = 0
+          }else{
+            this.multipleSelection[i].is_online = 1
+          }
+          str += this.multipleSelection[i].id + ' ';
+      }
+      OffLineOrOnLine({type:val, ids:str}).then(response => {
+        this.multipleSelection = [];
+        response.data.data.message
+        this.$message.success(response.data.data.message);
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

vu/src/views/layout/components/Navbar.vue

@@ -28,15 +28,16 @@
           <i class="el-icon-caret-bottom"/>
         </div>
         <el-dropdown-menu slot="dropdown">
-          <router-link to="/">
+          <router-link to="/account/list">
             <el-dropdown-item>
               账号中心
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
+          <router-link :to="'/account/edit/'+1" class="link-type">
             <el-dropdown-item>
               修改密码
             </el-dropdown-item>
+            </router-link>
           </a>
           <el-dropdown-item divided>
             <span style="display:block;" @click="logout">退出账户</span>