个人中心

2021-09-29 13:38:29 +08:00
parent 8e3a9afe9c
commit c760d4a90f
9 changed files with 504 additions and 4 deletions
@@ -1,13 +1,19 @@
-import {getAction} from '@api/manage'
+import { getAction, postAction } from '@api/manage'
 // 普通项目管理-通过项目id查询其他的信息
 const queryCommonProjectById = (param) => getAction('/project/payCommonProject/queryById', param)
 // 通过会议id获取会议的详细信息
 const getMeetInfoById = (params) => getAction('/meeting/payMeeting/queryById',params)
 // 通过id获取参会人详细信息
 const getSingUpUserInfo = (params) => getAction('/meeting/payMeetingSituation/queryById',params)
+// 通过id获取用户信息(联系人)
+const getContactUserInfo = (param) => getAction('/company/payContactsManagement/queryByIdMeeting', param)
+// 编辑用户信息
+const editUserInfo = (param) => postAction('', param)

 export {
  queryCommonProjectById,
  getMeetInfoById,
-  getSingUpUserInfo
+  getSingUpUserInfo,
+  getContactUserInfo,
+  editUserInfo
 }
@@ -177,5 +177,19 @@ export const routerData = [
    },
    name: 'user-announcement-list',
    id: '9'
-  }
+  },
+  {
+    path: "/system/AccountCenter",
+    component: 'system/AccountCenter',
+    redirect: null,
+    hidden: true,
+    route: '9',
+    meta: {
+      icon: 'user', // 菜单前图标
+      componentName: 'AccountCenter',
+      title: '个人中心' // 菜单名称
+    },
+    name: 'account-center',
+    id: '9'
+  },
 ]
@@ -30,6 +30,7 @@ import vTrim from '@/utils/vTrim'
 import '@/components/iconfont/common.less'
 // 使用 symbol模式 支持多色
 import '@/components/iconfont/iconfont.js'
+import preventClick from '@/utils/preventClick'

 Vue.config.productionTip = false
 Vue.use(Storage, config.storageOptions)
@@ -39,6 +40,7 @@ Vue.use(router)
 Vue.use(JeroComponents)
 Vue.use(JDictSelectTag)
 Vue.use(vTrim)
+Vue.use(preventClick)

 new Vue({
  router,
@@ -0,0 +1,19 @@
+export default {
+
+  install (Vue) {
+    // 防重复点击(指令实现)
+    Vue.directive('preventclick', {
+      inserted (el, binding) {
+        el.addEventListener('click', () => {
+          if (!el.disabled) {
+            el.disabled = true
+            setTimeout(() => {
+              el.disabled = false
+            }, binding.value || 1000)
+          }
+        })
+      }
+    })
+  }
+
+}
@@ -44,3 +44,12 @@ export function phoneReg(s) {
 export function chineseReg(s){
  return /[\u4E00-\u9FA5]/g.test(s)
 }
+
+/**
+ * 邮编
+ * @param s
+ * @returns {boolean}
+ */
+export function postcode(s) {
+  return /^[0-9]\d{5}$/.test(s)
+}
@@ -0,0 +1,227 @@
+<template>
+  <a-card :bordered="false">
+    <a-spin :spinning="loading">
+      <div class="account-box">
+        <div class="account-container">
+          <div class="top">
+            <div class="title"><span class="title-text">个人中心</span></div>
+            <a-button type="link" @click="handleEdit">
+              编辑
+              <img src="../../assets/imgs/icon/icon-edit.png" class="title-icon">
+            </a-button>
+          </div>
+
+          <div>
+            <table class="table" border="1px">
+              <tr v-for="(items, indexs) in accountColumn" :key="indexs">
+                <template v-for="item in items">
+                  <td class="table-title">{{ item.title }}</td>
+                  <td class="table-content">{{ accountData[item.fieldName] }}</td>
+                </template>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+
+    <account-center-model ref="editAccountDetail" @ok="editOk"></account-center-model>
+  </a-card>
+</template>
+
+<script>
+import Vue from 'vue'
+import { USER_INFO } from '@/store/mutation-types'
+import { getContactUserInfo } from '@api/incomePaymentsApi'
+import AccountCenterModel from '@views/system/modules/AccountCenterModel'
+
+export default {
+  name: 'AccountCenter',
+  components: { AccountCenterModel },
+  data() {
+    return {
+      accountColumn: [
+        [
+          {
+            title: '姓名',
+            fieldName: 'name',
+            canEdit: false
+          }, {
+          title: '邮政编码',
+          fieldName: 'postalCode',
+          canEdit: true
+        }
+        ], [
+          {
+            title: '企业名称',
+            fieldName: 'companyName',
+            canEdit: false
+          }, {
+            title: '手机号',
+            fieldName: 'phone',
+            canEdit: false
+          }
+        ], [
+          {
+            title: '职务',
+            fieldName: 'post',
+            canEdit: true
+          }, {
+            title: '性别',
+            fieldName: 'gender',
+            canEdit: true
+          }
+        ], [
+          {
+            title: '通讯地址',
+            fieldName: 'contactAddress',
+            canEdit: true
+          }, {
+            title: '邮箱',
+            fieldName: 'email',
+            canEdit: true
+          }
+        ], [
+          {
+            title: '备注',
+            fieldName: 'remarks',
+            canEdit: true
+          }, {
+            title: '',
+            fieldName: '',
+            canEdit: false
+          }
+        ]
+      ],
+      // 接口获取的个人信息
+      accountData: {},
+      loading: false
+    }
+  },
+  created() {
+    // 获取用户id
+    let userId = Vue.ls.get(USER_INFO).id
+    this.initAccountData(userId)
+  },
+  methods: {
+    /**
+     * 初始化个人信息
+     */
+    initAccountData(userId) {
+      this.loading = true
+      let param = {
+        id: userId
+      }
+      // 获取用户信息
+      getContactUserInfo(param).then(res => {
+        // 初始化信息
+        this.accountData = res.result
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleEdit() {
+      this.$refs.editAccountDetail.edit(this.accountData)
+    },
+    /**
+     * 编辑成功后重新获取数据
+     * @param id
+     */
+    editOk(id) {
+      this.initAccountData(id)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+.ant-form-item {
+  margin-bottom: 0;
+}
+
+.account-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.account-container {
+  width: 70%;
+
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      position: relative;
+      padding-left: 10px;
+
+      &-text {
+        font-size: 16px;
+        font-family: NotoSansHans, NotoSansHans-Regular;
+        font-weight: 400;
+        line-height: 25px;
+        color: #333333;
+      }
+
+      &-text::before {
+        position: absolute;
+        top: 4px;
+        left: 0;
+        content: "";
+        height: 20px;
+        width: 2px;
+        background: #069f99;
+      }
+
+      &-icon {
+        height: 12px;
+        margin-left: 10px;
+      }
+    }
+
+  }
+
+
+  .table {
+    margin-top: 20px;
+    width: 100%;
+    font-size: 14px;
+    font-family: NotoSansHans, NotoSansHans-Regular;
+    font-weight: 400;
+    border: 1px solid #e3e4e6;
+
+    & tr {
+      height: 48px;
+    }
+
+    & tr td {
+      padding: 10px;
+    }
+
+    &-title {
+      width: 20%;
+      text-align: right;
+      color: #333333;
+    }
+
+    &-content {
+      width: 30%;
+      text-align: left;
+      color: #57635e;
+    }
+  }
+
+  .submit-button {
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+
+    .ant-btn {
+      margin: 0 10px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,223 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入企业名称"
+                       v-decorator="['companyName',validatorRules.companyName]"
+                       :maxLength='50'
+                       disabled
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入姓名"
+                       v-decorator="['name',validatorRules.name]"
+                       :maxLength='50'
+                       disabled
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-dict-select-tag v-decorator="['gender', {}]" :triggerChange="true" placeholder="请选择性别"
+                                 dictCode="sex"/>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入职务"
+                       v-decorator="['post']"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入手机号"
+                       v-decorator="['phone',validatorRules.phone]"
+                       :maxLength='11'
+                       disabled
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入邮箱"
+                       v-decorator="['email',validatorRules.email]"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入通讯地址"
+                       :maxLength='50'
+                       v-decorator="['contactAddress',validatorRules.contactAddress]"
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
+              <a-input placeholder="请输入邮政编码"
+                       :maxLength='6'
+                       v-decorator="['postalCode',validatorRules.postalCode]"
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+              <a class="search-postcode" href="https://www.youbianku.com" target="_blank">查询邮编</a>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col>
+            <a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+              <a-textarea
+                placeholder="请输入备注"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                v-decorator="['remarks']"
+                :maxLength='200'
+                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="handleOk" type="primary" v-preventclick>确定</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { isEmail, postcode } from '@/utils/validate'
+import { editUserInfo } from '@api/incomePaymentsApi'
+
+export default {
+  name: 'AccountCenterModel',
+  data() {
+    return {
+      title: '编辑个人信息',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 21 }
+      },
+      validatorRules: {
+        email: {
+          rules: [{ required: true, validator: this.checkMail }],
+          validateTrigger: 'blur'
+        },
+        postalCode: {
+          rules: [{ required: true, validator: this.checkPostcode }],
+          validateTrigger: 'blur'
+        },
+        contactAddress: {
+          rules: [{ required: true, message: '请输入通讯地址' }],
+          validateTrigger: 'blur'
+        }
+      },
+    }
+  },
+  methods: {
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'companyName', 'name', 'gender', 'post', 'phone', 'email', 'contactAddress', 'postalCode', 'remarks'))
+      })
+    },
+    handleOk() {
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          editUserInfo(formData).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok', res.result.id)
+              this.close()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    close() {
+      this.visible = false
+    },
+    /**
+     * 邮箱校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkMail(rules, value, callback) {
+      if (isEmail(value)) {
+        callback()
+      } else {
+        callback('请输入正确邮箱')
+      }
+    },
+    /**
+     * 邮政编码校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkPostcode(rules, value, callback) {
+      if (postcode(value)) {
+        callback()
+      } else {
+        callback('请输入正确格式的邮编')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -16,7 +16,7 @@
                  size="large"
                  v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
                  type="text"
-                  placeholder="请输入帐号">
+                  placeholder="请输入手机号">
                  <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
                </a-input>
              </a-form-item>