feature:组织架构管理部门成员新增查看跳转C端注册页功能

src/views/systemManage/orgManage/components/orgInfo.vue

@@ -43,6 +43,7 @@
             <el-button v-power="'resetUserPassword'" type="text" @click="pwdForm.id = row.id, $refs.changePwd.show = true">重置密码</el-button>
             <el-button v-power="'switchOrg'" type="text" @click="updateOrg(row)">调整部门</el-button>
             <el-button v-power="'addRole'" type="text" @click="setPersonInfo(row)">修改</el-button>
+            <el-button type="text" @click="watchPersonInfo(row)">查看</el-button>
             <!-- <el-button type="text" @click="updateStatus(3, row)">{{ row.enabled ? '禁用' : '启用' }}</el-button> -->
             <el-button v-if="row.enabled" v-power="'userDisabled'" type="text" @click="updateStatus(3, row)">禁用</el-button>
             <el-button v-if="!row.enabled" v-power="'userEnabled'" type="text" @click="updateStatus(3, row)">启用</el-button>
@@ -348,6 +349,9 @@ export default {
     },
     setPersonInfo(row) {
       this.$emit('addPerson', row)
+    },
+    watchPersonInfo(row) {
+      this.$emit('watchPerson', row)
     }
   }
 }

src/views/systemManage/orgManage/components/personInfo.vue

@@ -20,55 +20,63 @@
       <el-form-item label="姓名" prop="name">
         <el-input
           v-model="ruleForm.name"
+          :disabled="disabled"
           placeholder="请输入姓名"
         ></el-input>
       </el-form-item>
       <el-form-item label="身份证号" prop="idCard">
         <el-input
           v-model="ruleForm.idCard"
+          :disabled="disabled"
           placeholder="请输入身份证号"
         ></el-input>
       </el-form-item>
       <el-form-item label="手机号" prop="mobile">
         <el-input
           v-model="ruleForm.mobile"
+          :disabled="disabled"
           placeholder="请输入手机号"
         ></el-input>
       </el-form-item>
       <el-form-item label="企业邮箱" prop="email">
         <el-input
           v-model="ruleForm.email"
+          :disabled="disabled"
           placeholder="请输入企业邮箱"
         ></el-input>
       </el-form-item>
       <el-form-item label="登录名" prop="loginName">
         <el-input
           v-model="ruleForm.loginName"
+          :disabled="disabled"
           placeholder="请输入登录名"
         ></el-input>
       </el-form-item>
-      <el-form-item label="登录密码" prop="password" v-if="!personInfo || !personInfo.id">
+      <el-form-item v-if="!personInfo || !personInfo.id" label="登录密码" prop="password">
         <el-input
           v-model="ruleForm.password"
+          :disabled="disabled"
           placeholder="请输入登录密码"
         ></el-input>
       </el-form-item>
       <el-form-item label="部门" prop="orgIdList" style="width: 100%;">
         <el-cascader
+          ref="cascader"
           v-model="orgIds"
           style="width: 100%;"
           :options="orgListInfo"
-          ref="cascader"
           :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
           :show-all-levels="false"
+          :disabled="disabled"
+          placeholder="请选择"
+          clearable
           @change="chooseOrg"
           @remove-tag="chooseOrg"
-          placeholder="请选择"
-          clearable>
+        >
         </el-cascader>
       </el-form-item>
       <el-form-item label="职级" prop="rank">
-        <el-select v-model="ruleForm.rank" placeholder="请选择职级">
+        <el-select v-model="ruleForm.rank" :disabled="disabled" placeholder="请选择职级">
           <el-option
             v-for="item in pList"
             :key="item"
@@ -80,6 +88,7 @@
       <el-form-item label="职位" prop="position">
         <el-input
           v-model="ruleForm.position"
+          :disabled="disabled"
           placeholder="请输入职位"
         ></el-input>
       </el-form-item>
@@ -91,24 +100,34 @@
         ></el-input>
       </el-form-item>
       <el-form-item label="状态" prop="enabled">
-        <el-radio-group v-model="ruleForm.enabled">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
           <el-radio :label="true">启用</el-radio>
           <el-radio :label="false">禁用</el-radio>
         </el-radio-group>
       </el-form-item>
       <template v-if="ruleForm.orgIdList && ruleForm.orgIdList.length > 0">
-        <el-form-item v-for="(item, index) in ruleForm.orgIdList" :key="item.id + '_' + index" 
-          :label="`${item.name || item.label}身份`" style="width: 100%;">
-          <el-radio-group v-model="item.userIdentity">
+        <el-form-item
+          v-for="(item, index) in ruleForm.orgIdList"
+          :key="item.id + '_' + index"
+          :label="`${item.name || item.label}身份`"
+          style="width: 100%;"
+        >
+          <el-radio-group v-model="item.userIdentity" :disabled="disabled">
             <el-radio :label="false">普通员工</el-radio>
             <el-radio :label="true">负责人</el-radio>
           </el-radio-group>
         </el-form-item>
       </template>
+      <el-form-item v-if="ruleForm.referralCode && ruleForm.referralCode.path !== ''" label="推荐码">
+        <div class="invite-cont">
+          <img :src="`${codePrefix}${ruleForm.referralCode.path}`">
+          <span class="el-icon-download" @click="downloadClick(ruleForm.referralCode)">下载</span>
+        </div>
+      </el-form-item>
     </el-form>
     <div class="submit-btn">
-      <el-button type="primary" @click="save(1)">保存并继续添加</el-button>
-      <el-button type="primary" @click="save">保存</el-button>
+      <el-button v-if="!disabled" type="primary" @click="save(1)">保存并继续添加</el-button>
+      <el-button v-if="!disabled" type="primary" @click="save">保存</el-button>
       <el-button type="normal" @click="$emit('close', 1)">取消</el-button>
     </div>
   </div>
@@ -117,17 +136,21 @@
 <script>
 import request from '@/utils/request'
 import md5 from 'js-md5'
+import { getFilePerview } from '@/api/dictionary'
+import { exportFile } from '@/utils'
+
 export default {
+  props: ['info', 'orgList', 'personInfo', 'disabled'],
   data() {
     this.pList = []
-    for(let i = 0; i < 15; i += 1) {
+    for (let i = 0; i < 15; i += 1) {
       this.pList.push(`P${i + 1}`)
     }
     const validateLoginName = (rule, value, callback) => {
-      if(!value) {
+      if (!value) {
         callback(new Error('请输入登录名'))
       } else {
-        if(this.infoId) {
+        if (this.infoId) {
           callback()
         } else {
           request({
@@ -137,7 +160,7 @@ export default {
               loginName: this.ruleForm.loginName
             }
           }).then(({ data }) => {
-            if(data === false) {
+            if (data === false) {
               callback(new Error('登录名重复'))
             } else {
               callback()
@@ -149,6 +172,7 @@ export default {
       }
     }
     return {
+      codePrefix: process.env.VUE_APP_BASE_API,
       ruleForm: {
         name: '',
         mobile: '',
@@ -160,7 +184,8 @@ export default {
         orgIdList: [],
         referenceNumber: '',
         idCard: '',
-        enabled: true
+        enabled: true,
+        referralCode: {}
       },
       rules: {
         name: [{ required: true, message: '请请输入姓名', trigger: 'blur' }],
@@ -179,40 +204,48 @@ export default {
       infoId: ''
     }
   },
-  props: ["info", "orgList", "personInfo"],
+  watch: {
+    'personInfo.id': {
+      handler(val) {
+        if (val) {
+          this.getDetail(this.personInfo.id)
+        }
+      },
+      immediate: true
+    }
+  },
   mounted() {
     this.orgListInfo = JSON.parse(JSON.stringify(this.orgList))
     this.setOrgName(this.orgListInfo)
-    if(this.personInfo && this.personInfo.id) {
+    if (this.personInfo && this.personInfo.id) {
       this.getDetail(this.personInfo.id)
     } else {
       this.orgIds.push(this.info.id)
-      this.ruleForm.orgIdList.push({name: this.info.name.split('（')[0], id: this.info.id, userIdentity: false})
+      this.ruleForm.orgIdList.push({ name: this.info.name.split('（')[0], id: this.info.id, userIdentity: false })
       this.$nextTick(() => {
-        if(this.$refs.cascader) {
-          this.$refs.cascader.presentTags.push({text: this.info.name.split('（')[0], closable: true})
+        if (this.$refs.cascader) {
+          this.$refs.cascader.presentTags.push({ text: this.info.name.split('（')[0], closable: true })
         }
       })
     }
-    
   },
   methods: {
     addPerson(isNext) {
-      let data = new FormData()
+      const data = new FormData()
       Object.keys(this.ruleForm).forEach(key => {
-        if(key == 'orgIdList') {
+        if (key == 'orgIdList') {
           this.ruleForm.orgIdList.forEach((item, index) => {
             data.append(`orgIdList[${index}]`, item.id)
             data.append(`userOrgRelList[${index}].orgId`, item.id)
             data.append(`userOrgRelList[${index}].userIdentity`, item.userIdentity)
           })
-        } else if(key == 'password') {
+        } else if (key == 'password') {
           data.append('password', md5(this.ruleForm.password))
         } else {
           data.append(key, this.ruleForm[key])
         }
       })
-      if(this.infoId) {
+      if (this.infoId) {
         data.append('id', this.infoId)
       }
       request({
@@ -221,7 +254,7 @@ export default {
         data
       }).then(() => {
         this.$message.success(this.infoId ? '修改成功' : '新增成功')
-        if(isNext == 1) {
+        if (isNext == 1) {
           this.clearInfo()
           this.$emit('close')
         } else {
@@ -232,14 +265,14 @@ export default {
     chooseOrg() {
       this.$nextTick(() => {
         this.ruleForm.orgIdList = this.$refs.cascader.getCheckedNodes().map(item => {
-          return {name: item.data.name, id: item.data.id, userIdentity: false}
+          return { name: item.data.name, id: item.data.id, userIdentity: false }
         })
         this.$refs.ruleForm.validateField('orgIdList', () => {})
       })
     },
     save(val) {
       this.$refs.ruleForm.validate(flag => {
-        if(flag) {
+        if (flag) {
           this.addPerson(val)
         } else {
           this.$message.error('必填项不能为空')
@@ -247,9 +280,9 @@ export default {
       })
     },
     setOrgName(orgList) {
-      if(!orgList || orgList.length === 0) return
+      if (!orgList || orgList.length === 0) return
       orgList.forEach(item => {
-        if(item.children && item.children.length > 0) {
+        if (item.children && item.children.length > 0) {
           item.name = item.name.split('（')[0]
           item.userIdentity = false
           this.setOrgName(item.children)
@@ -264,8 +297,8 @@ export default {
       this.$refs.cascader.handleClear()
       this.$nextTick(() => {
         this.orgIds = [this.info.id]
-        this.ruleForm.orgIdList.push({name: this.info.name, id: this.info.id, userIdentity: false})
-        this.$refs.cascader.presentTags.push({text: this.info.name.split('（')[0], closable: true})
+        this.ruleForm.orgIdList.push({ name: this.info.name, id: this.info.id, userIdentity: false })
+        this.$refs.cascader.presentTags.push({ text: this.info.name.split('（')[0], closable: true })
         this.chooseOrg()
       })
     },
@@ -279,11 +312,11 @@ export default {
         }
       }).then(({ data }) => {
         Object.keys(this.ruleForm).forEach(key => {
-          if(key !== 'orgIdList' && (data[key] || data[key] === 0 || data[key] === false)) {
+          if (key !== 'orgIdList' && (data[key] || data[key] === 0 || data[key] === false)) {
             this.ruleForm[key] = data[key]
           }
         })
-        this.title = '修改成员'
+        this.title = this.disabled ? '查看成员' : '修改成员'
         this.infoId = this.personInfo.id
         this.orgIds = [...data.orgIdList]
         this.ruleForm.orgIdList = data.userOrgRelList.map(item => {
@@ -293,32 +326,53 @@ export default {
             userIdentity: item.userIdentity
           }
         })
+        this.ruleForm.referralCode = data.fileStorage
         this.$nextTick(() => {
-          if(this.$refs.cascader) {
+          if (this.$refs.cascader) {
             this.$refs.cascader.presentTags = []
             data.userOrgRelList.forEach(item => {
-              this.$refs.cascader.presentTags.push({text: item.orgName, closable: true})
+              this.$refs.cascader.presentTags.push({ text: item.orgName, closable: true })
             })
           }
         })
       })
-    }
-  },
-  watch: {
-    'personInfo.id': {
-      handler(val) {
-        if(val) {
-          this.getDetail(this.personInfo.id)
-        }
-      },
-      immediate: true
+    },
+    downloadClick(row) {
+      if (!row && row.absolutePath) return
+      let absolutePath = ''
+      if (row.absolutePath) {
+        absolutePath = row.absolutePath
+      }
+      getFilePerview({ absolutePath }).then((res) => {
+        exportFile(res)
+      })
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .org-person {
   padding: 20px 0 20px 20px;
 }
-</style>
+.invite-cont {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  height: 140px;
+  img {
+    width: 140px;
+    height: 100%;
+  }
+  span {
+    display: inline-block;
+    flex: 1;
+    cursor: pointer;
+    margin-left: 10px;
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+  }
+}
+</style>

src/views/systemManage/orgManage/index.vue

@@ -53,8 +53,8 @@
       </div>
     </div>
     <div class="sys-org-right">
-      <org-info v-if="type == '组织机构' && !isPerson" :info="orgInfo" :org-list="orgList" @toOrg="orgDetail" @addOrg="getOrgList" @addPerson="addPersonInfo"></org-info>
-      <person-info v-if="type == '组织机构' && isPerson == 1" :info="orgInfo" :person-info="personDetailInfo" :org-list="orgList" @close="closePerson"></person-info>
+      <org-info v-if="type == '组织机构' && !isPerson" :info="orgInfo" :org-list="orgList" @toOrg="orgDetail" @addOrg="getOrgList" @addPerson="addPersonInfo" @watchPerson="watchPersonInfo"></org-info>
+      <person-info v-if="type == '组织机构' && isPerson == 1" :info="orgInfo" :person-info="personDetailInfo" :org-list="orgList" :disabled="personInfoDisable" @close="closePerson"></person-info>
       <role-info v-if="type == '角色'" :info="roleInfo" @close="getRoleList"></role-info>
       <person-detail v-if="type == '组织机构' && isPerson == 2" :person-info="personDetailInfo"></person-detail>
     </div>
@@ -107,6 +107,7 @@ export default {
         }
       },
       isPerson: 0,
+      personInfoDisable: false,
       searchName: '',
       searchResultList: [],
       groupForm: {
@@ -241,6 +242,16 @@ export default {
         this.personDetailInfo = {}
       }
       this.isPerson = 1
+      this.personInfoDisable = false
+    },
+    watchPersonInfo(val) {
+      if (val) {
+        this.personDetailInfo = { ...val }
+      } else {
+        this.personDetailInfo = {}
+      }
+      this.isPerson = 1
+      this.personInfoDisable = true
     },
     openSearchResult(info) {
       this.type = '组织机构'