个人信息模块

index.ejs

@@ -61,6 +61,12 @@
             "title": "员工管理",
             "appName": 'accounts',
             "url": "/account"
+          }, {
+            "icon": "fa-home",
+            "isRouteShow": 1,
+            "title": "个人信息",
+            "appName": 'profile',
+            "url": "/profile"
           }],
           homePage: {
             appName: 'reimbursement',

src/api.js

@@ -5,6 +5,7 @@ import DocumentApi from './apis/document.js'
 import CaseApi from './apis/case.js'
 import SupplierApi from './apis/supplier.js'
 import AccountApi from './apis/account.js'
+import ProfileApi from './apis/profile.js'
 
 const API_HOST = process.env.API_HOST
 const API_PORT = process.env.API_PORT
@@ -36,6 +37,7 @@ apis = Object.assign(apis, DocumentApi)
 apis = Object.assign(apis, CaseApi)
 apis = Object.assign(apis, SupplierApi)
 apis = Object.assign(apis, AccountApi)
+apis = Object.assign(apis, ProfileApi)
 
 export default {
   option,

src/apis/profile.js

+const type = 'user'
+export default {
+  [`get${type}Edit`]: {
+    url: `/vue/${type}/get-edit`
+  },
+
+  [`save${type}Edit`]: {
+    url: `/vue/${type}/save-edit`
+  },
+
+  resetPwd: {
+    url: '/vue/user/reset-password'
+  }
+}

src/assets/css/app.scss

@@ -5,3 +5,4 @@
 @import './case-app.scss';
 @import './supplier-app.scss';
 @import './account-app.scss';
+@import './profile-app.scss';

src/assets/css/profile-app.scss

+.profile-app {
+  .el-button--cancel {
+    color:white;
+    background-color: #EB7567;
+    border-color: #e86150;
+  }
+  .el-button--confirm {
+    color:white;
+    background-color:#649FD7;
+    border-color:#5092d2;
+  }
+  .mb10 {
+    margin-bottom:10px;
+  }
+  .el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner{
+    border-left: 1px solid #DCDFE6;
+    margin: 0 2px 0 0;
+    border-radius: 3px;
+  }
+  .el-radio-button__inner:hover{
+    color: #333;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+  }
+  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+    box-shadow: 0 0 0 0 #17a2b8;
+  }
+  .el-radio-button__orig-radio:checked+.el-radio-button__inner:hover{
+    color: #333;
+    background-color: #d4d4d4;
+    border-color: #8c8c8c;
+  }
+  .ec-page-wrapper .el-form-item__label {
+    color: white;
+  }
+}

src/components/profile/navTool.vue

+<template>
+  <div class="mb10">
+    <singleRadioTool
+      :form-item="navType"
+      :options-list="navArray"
+      @update:item="val => { navTypeChange(val) }">
+    </singleRadioTool>
+  </div>
+</template>
+<script>
+import singleRadioTool from '../common/singleRadioTool'
+export default {
+  name: 'navTool',
+
+  props: ['navType'],
+
+  components: {
+    singleRadioTool
+  },
+
+  data () {
+    return {
+      navArray: [{
+        key: 'view',
+        name: '查看个人信息'
+      }, {
+        key: 'edit',
+        name: '编辑个人信息'
+      }, {
+        key: 'changePwd',
+        name: '修改密码'
+      }]
+    }
+  },
+
+  methods: {
+    navTypeChange (val) {
+      if (val === 'view') {
+        this.$router.push({
+          path: '/profile'
+        })
+      } else if (val === 'edit') {
+        this.$router.push({
+          path: '/profileEdit'
+        })
+      } else {
+        this.$router.push({
+          path: '/ProfileChangePwd'
+        })
+      }
+    }
+  }
+}
+</script>

src/components/profile/profileChangePwd.vue

+<template>
+  <section>
+    <el-row :gutter="10" class="header-title">
+      <el-col :span="6">
+        <h2>修改密码</h2>
+      </el-col>
+    </el-row>
+    <div class="page-body-content">
+      <navTool navType="changePwd"></navTool>
+      <el-form label-width="120px" ref="form" :rules="rules" :model="model" class="ec-create-form">
+        <el-form-item label="当前密码：" prop="current_password" class="ec-clear-left is-required">
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.current_password">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="新密码：" prop="new_password" class="ec-clear-left is-required">
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.new_password">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="确认密码：" prop="confirm_password" class="ec-clear-left is-required">
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.confirm_password">
+          </el-input>
+        </el-form-item>
+        <el-form-item class="ec-clear-left">
+          <el-button type="confirm" size="mini" @click.stop.prevent="handleSave">修改</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+<script>
+import navTool from './navTool'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+import { setModule } from '@/lib/viewHelper'
+export default {
+
+  data () {
+    return {
+      model: {
+        current_password: '',
+        new_password: '',
+        confirm_password: ''
+      },
+      rules: {},
+      options: {
+        'Users[sex]': []
+      }
+    }
+  },
+
+  components: {
+    navTool
+  },
+
+  created () {
+  },
+
+  methods: {
+    handleSave () {
+      let _params = Object.assign({}, setModule(this.model, 'ChangePasswordForm'))
+      let _apiUrl = api.resetPwd
+      requestAPI(Object.assign(_apiUrl, { method: 'POST' }), _params)
+        .then((res) => {
+          this.$message.success('操作成功')
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/profile/profileEdit.vue

+<template>
+  <section>
+    <el-row :gutter="10" class="header-title">
+      <el-col :span="6">
+        <h2>编辑员工信息</h2>
+      </el-col>
+    </el-row>
+    <div class="page-body-content">
+      <navTool navType="edit"></navTool>
+      <el-form label-width="120px" ref="form" :rules="rules" :model="model" class="ec-create-form">
+        <el-form-item label="名称：" prop="name" class="ec-clear-left is-required">
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.name">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="电子邮箱：" prop="email" class="ec-clear-left is-required">
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.email">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="性别：" prop="sex" class="ec-clear-left is-required">
+          <el-select v-model="model.sex" size="small" placeholder="请选择">
+          <el-option v-for="(option, optKey) in options['Users[sex]']"
+                     :key="optKey"
+                     :label="option.name"
+                     :value="option.key"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="生日：" prop="birth_date" class="ec-clear-left is-required">
+          <el-date-picker
+            size="small"
+            v-model="model.birth_date"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            @change="birth_dateChange"
+            placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="手机：" prop="mobile" class="ec-clear-left">
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.mobile">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="座机：" prop="form_type" class="ec-clear-left">
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.telephone_area_code">
+          </el-input>
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.telephone">
+          </el-input>
+          <el-input
+            class="ec-input-normal"
+            size="small"
+            v-model="model.telephone_extension_number">
+          </el-input>
+        </el-form-item>
+        <el-form-item class="ec-clear-left">
+          <el-button type="cancel" size="mini" @click.stop.prevent="handleReset">重 置</el-button>
+          <el-button type="confirm" size="mini" @click.stop.prevent="handleSave">保存修改</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+<script>
+import navTool from './navTool'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+import { setModule } from '@/lib/viewHelper'
+export default {
+
+  data () {
+    return {
+      model: {
+        name: '',
+        email: '',
+        sex: '',
+        birth_date: '',
+        mobile: '',
+        telephone_area_code: '',
+        telephone: '',
+        telephone_extension_number: ''
+      },
+      rules: {},
+      options: {
+        'Users[sex]': []
+      }
+    }
+  },
+
+  components: {
+    navTool
+  },
+
+  created () {
+    this.getList()
+  },
+
+  methods: {
+    birth_dateChange (val) {
+      this.model.birth_date = val
+    },
+
+    getList () {
+      requestAPI(api.getuserEdit).then((res) => {
+        this.model = res.model
+        let _sex = res.options.find(item => item.key === 'Users[sex]')
+        if (_sex) {
+          this.options['Users[sex]'] = _sex.value
+        }
+      })
+    },
+
+    handleSave () {
+      let _params = Object.assign({}, setModule(this.model, 'Users'))
+      requestAPI(api.saveuserEdit, _params)
+        .then((res) => {
+          this.$message.success('操作成功')
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/profile/profileList.vue

+<template>
+  <section>
+    <table class="table table-stripede table-bordered">
+      <thead>
+        <tr><th>名称</th><th>内容</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>姓名</td><td>{{ model.name }}</td></tr>
+        <tr><td>电子邮箱</td><td>{{ model.email }}</td></tr>
+        <tr><td>头像</td><td><img :src="model.avatar.avatar"/></td></tr>
+        <tr><td>性别</td><td>{{ model.sex_display }}</td></tr>
+        <tr><td>生日</td><td>{{ model.birth_date }}</td></tr>
+        <tr><td>入职日期</td><td>{{ model.entry_date }}</td></tr>
+        <tr><td>部门</td><td>{{ model.department.name }}</td></tr>
+        <tr><td>职位</td><td>{{ model.departmentPosition.name }}</td></tr>
+        <tr><td>手机</td><td>{{ model.mobile }}</td></tr>
+        <tr><td>座机</td><td>{{ model.telephone }}</td></tr>
+        <tr><td>身份证号码</td><td>{{ model.id_number }}</td></tr>
+        <tr><td>籍贯</td><td>{{ model.native_place }}</td></tr>
+        <tr><td>毕业院校</td><td>{{ model.graduate_school }}</td></tr>
+        <tr><td>专业</td><td>{{ model.specialty }}</td></tr>
+        <tr><td>学历</td><td>{{ model.education }}</td></tr>
+        <tr><td>用户角色</td><td>{{ model.userRoles.map(item => item.display_name).join(',')}}</td></tr>
+        <tr><td>创建时间</td><td>{{ model.created_at }}</td></tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+<script>
+export default {
+  name: 'profileList',
+
+  props: ['model']
+}
+</script>
+<style scoped>
+table thead {
+  background: white;
+}
+table tr:nth-child(odd){
+  background: #6c757d;
+  background-color: rgba(0,0,0,.05);
+}
+</style>

src/components/profile/profileView.vue

+<template>
+  <section>
+    <el-row :gutter="10" class="header-title">
+      <el-col :span="6">
+        <h2>查看个人信息</h2>
+      </el-col>
+    </el-row>
+    <div class="page-body-content">
+      <navTool navType="view"></navTool>
+      <profileList :model="model"></profileList>
+    </div>
+  </section>
+</template>
+<script>
+import navTool from './navTool'
+import profileList from './profileList'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+export default {
+
+  data () {
+    return {
+      model: {}
+    }
+  },
+
+  components: {
+    navTool,
+    profileList
+  },
+
+  created () {
+    this.getList()
+  },
+
+  methods: {
+    navTypeChange (val) {},
+
+    getList () {
+      requestAPI(api.getuserEdit).then((res) => {
+        this.model = res.model
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/route.js

@@ -7,6 +7,7 @@ import DocumentRoute from './routes/document'
 import CaseRoute from './routes/case'
 import SupplierRoute from './routes/supplier'
 import AccountRoute from './routes/account'
+import ProfileRoute from './routes/profile'
 
 let routes = []
 let reimRoutes = []
@@ -15,7 +16,7 @@ let documentRoutes = []
 let caseRoutes = []
 let supplierRoute = []
 let accountRoute = []
-
+let profileRoute = []
 const appName = 'schedule'
 
 routes = [].concat(ScheduleRoute)
@@ -25,6 +26,7 @@ documentRoutes = [].concat(DocumentRoute)
 caseRoutes = [].concat(CaseRoute)
 supplierRoute = [].concat(SupplierRoute)
 accountRoute = [].concat(AccountRoute)
+profileRoute = [].concat(ProfileRoute)
 
 let RouterInit = () => {
   portal.createApp(appName, {}, app => {
@@ -48,6 +50,9 @@ let RouterInit = () => {
   portal.createApp('accounts', {}, app => {
     app.mapRoute(accountRoute)
   })
+  portal.createApp('profile', {}, app => {
+    app.mapRoute(profileRoute)
+  })
   // portal.createApp('client', {}, app => {
   //   app.mapRoute([
   //     {

src/routes/profile.js

+import ProfileView from '../components/profile/profileView'
+import ProfileEdit from '../components/profile/profileEdit'
+import ProfileChangePwd from '../components/profile/profileChangePwd'
+const routes = [{
+  path: '/profile',
+  name: 'profileView',
+  component: ProfileView
+}, {
+  path: '/profileEdit',
+  name: 'profileEdit',
+  component: ProfileEdit
+}, {
+  path: '/profileChangePwd',
+  name: 'profileChangePwd',
+  component: ProfileChangePwd
+}]
+export default routes