【bug】标协会员-基本信息、会员管理员增肌编辑的功能

2022-01-14 16:48:26 +08:00
parent c954431e1d
commit a33e895295
3 changed files with 255 additions and 2 deletions
@@ -166,7 +166,7 @@ const user = {
        if (userInfo.companyRole + '' === '1') {
          userIdentity = '0'
        } else {
-          // userInfo.roleCode，企业用户角色：1--企业联系人、--企业管理员
+          // userInfo.roleCode，企业用户角色：1--企业联系人、2--企业管理员
          if (userInfo.roleCode + '' === '2') {
            userIdentity = '1'
          } else {
@@ -25,6 +25,12 @@
       </div>
       <div class="panel-cell">
         <div class="title">本企业信息</div>
+         <div class="panel-cell-top" v-if="isShowEdit">
+           <a-button type="link" @click="handleEdit">
+             编辑
+             <img src="../../assets/imgs/icon/icon-edit.png" class="title-icon">
+           </a-button>
+         </div>
         <div class="content">
           <div class="info-row">
             <span class="label-span">企业名称：</span>
@@ -49,14 +55,20 @@
         </div>
       </div>
     </a-spin>
+      <basic-model ref="basicModel" @ok="refreshInfo"></basic-model>
    </div>
 </template>

 <script>
 import { getMemberBaseInfo } from '../../api/standardsAssociationApi'
+import BasicModel from './modules/BasicModel'
+import { mapGetters, mapState } from 'vuex'

 export default {
  name: 'BasicInfo',
+  components: {
+    BasicModel
+  },
  data() {
    return {
      isLoading: false,
@@ -74,6 +86,19 @@ export default {
        contactPhone: '', //  管理员电话
        contactMail: '', //  管理员邮箱
        validDate: 'xxxx年xx月xx日到xxxx年xx月xx日' //  会员有效期
+      },
+      // 当前登录用户的信息
+      loginUserInfo: {},
+      memberInfoInit: {} // 会员的初始化信息，用于编辑使用
+    }
+  },
+  computed: {
+    // 是否显示编辑按钮，当A企业角色为会员企业：（1--普通企业；2--会员企业）B当前登录人是企业管理员 的时候返回true
+    isShowEdit() {
+      if(Number((this.loginUserInfo || {}).companyRole) === 2 && (this.loginUserInfo || {}).roleCode + '' === '2') {
+        return true
+      } else {
+        return false
      }
    }
  },
@@ -89,6 +114,7 @@ export default {
          this.secretariatInfo.contactPhone = secretariatInfo.telephone
          this.secretariatInfo.contactMail = secretariatInfo.email
          const memberInfo = res.result.memberInfo || {}
+          this.memberInfoInit = memberInfo
          this.memberInfo.companyName = memberInfo.companyName
          this.memberInfo.contactPerson = memberInfo.liaisonMan
          this.memberInfo.contactPhone = memberInfo.mobile
@@ -98,10 +124,19 @@ export default {
      }).finally(() => {
        this.isLoading = false
      })
-    }
+    },
+    // 编辑成功后的回调-刷新页面的数据
+    refreshInfo() {
+      this.getBasicInfo()
+    },
+    handleEdit() {
+      this.$refs.basicModel.edit(this.memberInfoInit)
+    },
+    ...mapGetters(['userInfo'])
  },
  created() {
    this.getBasicInfo()
+    this.loginUserInfo = this.userInfo()
  }
 }
 </script>
@@ -174,5 +209,15 @@ export default {
    margin-left: 10px;
  }
 }
+.panel-cell-top{
+  position: absolute;
+  top: 12px;
+  right: 5px;
+  img{
+    width: 18px;
+    height: 18px;
+    margin-left: 3px;
+  }
+}

 </style>
@@ -0,0 +1,208 @@
+<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
+              ></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="['liaisonMan',validatorRules.liaisonMan]"
+                :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="['mobile',validatorRules.mobile]"
+                :maxLength="11"
+                @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>
+            <a-form-item label="会员有效期" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+              <a-input
+                placeholder="请输入会员有效期"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                v-decorator="['validDate']"
+                disabled
+                :maxLength="200"
+              />
+            </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 } from '../../../utils/validate'
+import { httpAction } from '@api/memberManage'
+import { JSEncrypt } from 'jsencrypt'
+import { getEncryptedString } from '../../../api/standardsAssociationApi'
+
+export default {
+  name: 'BasicModel',
+  data() {
+    return {
+      title: '编辑本企业信息',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      validatorRules: {
+        liaisonMan: {
+          rules: [
+            { required: true, message: '请输入企业管理员' },
+            { min: 1, max: 50, message: '企业管理员不超过50个字符' }
+          ]
+        },
+        email: {
+          rules: [{ required: true, validator: this.checkMail }],
+          validateTrigger: 'blur'
+        },
+        mobile: {
+          rules: [
+            { required: true, message: '请输入管理员电话' },
+            { min: 1, max: 50, message: '管理员电话不超过50个字符' },
+            { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }
+          ]
+        },
+      },
+      url: {
+        edit: '/memberInfo/memberInfo/edit'
+      }
+    }
+  },
+  methods: {
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'companyName', 'liaisonMan', 'mobile', 'email', 'validDate'))
+      })
+    },
+    handleOk() {
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          const formData = Object.assign({}, values, {id: this.model.id})
+          let encrypt = new JSEncrypt()
+          encrypt.setPublicKey(this.encryptedString)
+          formData.mobile = encrypt.encrypt(values.mobile)
+          formData.email = encrypt.encrypt(values.email)
+          formData.rsapublickey = this.encryptedString
+
+          console.log('表单提交数据', formData)
+          httpAction(this.url.edit, formData, 'put').then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              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('请输入正确格式的管理员邮箱')
+      }
+    },
+    // 获得加密公钥的方法
+    getEncryptedStringFunc() {
+      getEncryptedString().then((res) => {
+        this.encryptedString = res.result
+      })
+    },
+  },
+  created() {
+    // 获得公钥的相关信息
+    this.getEncryptedStringFunc()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>