User edit/create complete

src/api/user.js

@@ -1,3 +1,4 @@
+import axios from 'axios'
 import request from '@/utils/request'
 
 export function login(data) {
@@ -22,3 +23,37 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function fetchList(query) {
+  query.platform = 'OLFDE'
+  return axios.get('https://users.service.development.therig.onlinefuelslabs.io/user/search', { params: query })
+}
+
+export function fetchUser(id) {
+  return axios.get(`https://users.service.development.therig.onlinefuelslabs.io/user/${id}`)
+}
+
+export function createUser(data) {
+  const dto = __dataToDTO(data)
+
+  return axios.post(`https://users.service.development.therig.onlinefuelslabs.io/user`, dto)
+}
+
+export function updateUser(data) {
+  const dto = __dataToDTO(data)
+  return axios.put(`https://users.service.development.therig.onlinefuelslabs.io/user/${data.id}`, dto)
+}
+
+function __dataToDTO(data) {
+  return {
+    'firstName': data.firstName,
+    'lastName': data.lastName,
+    'type': data.type,
+    'email': data.email,
+    'username': data.username,
+    'phone': data.phone,
+    'statusId': parseInt(data.status_id),
+    'accountId': data.accountId,
+    'typeId': data.type_id
+  }
+}

src/router/index.js

@@ -137,6 +137,37 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/users',
+    component: Layout,
+    redirect: '/users/list',
+    name: 'Users',
+    meta: {
+      title: 'Users',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/users/create'),
+        name: 'CreateUser',
+        meta: { title: 'Create User', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id',
+        component: () => import('@/views/users/edit'),
+        name: 'EditUser',
+        meta: { title: 'Edit User', noCache: true, activeMenu: '/users/list' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/users/list'),
+        name: 'UsersList',
+        meta: { title: 'User List', icon: 'list' }
+      }
+    ]
+  },
   {
     path: '/permission',
     component: Layout,

src/views/example/components/ArticleDetail.vue

@@ -29,7 +29,7 @@
               <el-row>
                 <el-col :span="8">
                   <el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
+                    <el-select v-model="postForm.author" :remote-method="getRemoteAccountList" 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>

src/views/users/components/UserDetail.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="createAccount-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          Save
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+
+        <el-row>
+          <el-col :span="20">
+            <div class="postInfo-container">
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Id" class="postInfo-container-item">
+                    <el-input v-model="postForm.id" placeholder="Id" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Account:" class="postInfo-container-item">
+                    <el-select v-model="postForm.accountId" :remote-method="getRemoteAccountList" filterable default-first-option remote placeholder="Search Accounts" loading-text="Loading...">
+                      <el-option v-for="(item,index) in accountListOptions" :key="item+index" :label="item.name" :value="item.id" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="First Name" class="postInfo-container-item">
+                    <el-input v-model="postForm.firstName" placeholder="First Name" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Last Name" class="postInfo-container-item">
+                    <el-input v-model="postForm.lastName" placeholder="Last Name" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Email" class="postInfo-container-item">
+                    <el-input v-model="postForm.email" placeholder="Email" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Username" class="postInfo-container-item">
+                    <el-input v-model="postForm.username" placeholder="Username" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Phone" class="postInfo-container-item">
+                    <el-input v-model="postForm.phone" placeholder="User Phone" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Type" class="postInfo-container-item">
+                    <el-radio-group v-model="postForm.type_id">
+                      <el-radio-button label="user">User</el-radio-button>
+                      <el-radio-button label="admin">Admin</el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Status" class="postInfo-container-item">
+                    <el-radio-group v-model="postForm.status_id">
+                      <el-radio-button label="100">Enabled</el-radio-button>
+                      <el-radio-button label="200">Disabled</el-radio-button>
+                      <el-radio-button label="300">Locked</el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+            </div>
+          </el-col>
+        </el-row>
+
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { fetchUser, updateUser, createUser } from '@/api/user'
+import { fetchList } from '@/api/account'
+
+const defaultForm = {
+  id: '',
+  accountId: '',
+  firstName: '',
+  lastName: '',
+  email: '',
+  phone: '',
+  status_id: 100,
+  type_id: 'user',
+  account: {
+    name: ''
+  }
+}
+
+export default {
+  name: 'UserDetail',
+  components: { Sticky },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + 'Epic Success brudda',
+          type: 'error'
+        })
+        callback(new Error(rule.field + ' ERRRR'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      accountListOptions: [],
+      rules: {
+        // image_uri: [{ validator: validateRequire }],
+        name: [{ validator: validateRequire }]
+        // content: [{ validator: validateRequire }],
+        // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    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 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) {
+      fetchUser(id).then(response => {
+        this.postForm = response.data
+
+        // // set tagsview title
+        this.setTagsViewTitle()
+
+        // // set page title
+        this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setTagsViewTitle() {
+      const title = 'Edit User'
+      const route = Object.assign({}, this.tempRoute, { title: `${title} - ${this.postForm.firstName} ${this.postForm.lastName} (${this.postForm.account.name})` })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+    },
+    setPageTitle() {
+      const title = 'Edit User'
+      document.title = `${title} - ${this.postForm.id}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+
+          console.dir(this.postForm)
+
+          // Save the account
+          const methodToCall = this.isEdit ? updateUser : createUser
+          methodToCall(this.postForm).then((r) => {
+            this.$notify({
+              title: 'Success',
+              message: 'User Saved',
+              type: 'success',
+              duration: 2000
+            })
+
+            // Redirect to the edit page when we create a new one
+            if (!this.isEdit) { this.$router.push(`/users/edit/${r.data.id}`) }
+
+            this.loading = false
+          }).catch((e) => {
+            console.dir(e)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    getRemoteAccountList(query) {
+      query = {}
+      query.platform = 'OLFDE'
+      query.limit = 100
+      fetchList(query).then(response => {
+        if (!response.data.docs) return
+        this.accountListOptions = response.data.docs.map(v => { return { name: v.name, id: v._id } })
+      })
+    }
+  }
+}
+</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>

src/views/users/create.vue

@@ -0,0 +1,13 @@
+<template>
+  <user-detail :is-edit="false" />
+</template>
+
+<script>
+import UserDetail from './components/UserDetail'
+
+export default {
+  name: 'CreateForm',
+  components: { UserDetail }
+}
+</script>
+

src/views/users/edit.vue

@@ -0,0 +1,13 @@
+<template>
+  <user-detail :is-edit="true" />
+</template>
+
+<script>
+import UserDetail from './components/UserDetail'
+
+export default {
+  name: 'EditForm',
+  components: { UserDetail }
+}
+</script>
+

src/views/users/list.vue

@@ -0,0 +1,101 @@
+<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="Name" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.firstName }} {{ scope.row.lastName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Account" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.account.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Email" width="250">
+        <template slot-scope="scope">
+          <span>{{ scope.row.email }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Phone" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.phone }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Actions" width="120">
+        <template slot-scope="scope">
+          <router-link :to="'/users/edit/' + scope.row.id">
+            <el-button type="primary" size="small" icon="el-icon-edit">
+              Edit
+            </el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/user'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+
+export default {
+  name: 'ArticleList',
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      }
+    }
+  },
+  created() {
+    // Set the type for the query
+    // this.listQuery.type = this.$route.meta.type
+    // this.listQuery.platform = 'OLFDE'
+
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.docs
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>