个人中心角色切换

src/views/trials/trials-myinfo/account.vue

@@ -7,130 +7,72 @@
       </div>
       <el-form label-position="right" label-width="100px">
         <!-- 用户名 -->
-        <el-form-item
+        <el-form-item :label="$t('trials:trials-myinfo:form:userName')" style="margin-bottom: 5px" prop="UserName">
-          :label="$t('trials:trials-myinfo:form:userName')"
-          style="margin-bottom: 5px"
-          prop="UserName"
-        >
           <span>{{ user.UserName }}</span>
         </el-form-item>
         <el-form-item label="" style="position: relative" prop="UserName">
-          <el-input
+          <el-input v-model="userForm.UserName" :placeholder="$t('trials:trials-myinfo:form:userName')" />
-            v-model="userForm.UserName"
-            :placeholder="$t('trials:trials-myinfo:form:userName')"
-          />
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userForm.UserName" class="saveBtn" type="primary" size="small" @click="setNewUserName">
-            :disabled="!userForm.UserName"
-            class="saveBtn"
-            type="primary"
-            size="small"
-            @click="setNewUserName"
-          >
             {{ $t("trials:trials-myinfo:button:update") }}
           </el-button>
         </el-form-item>
         <!-- 校验码 -->
-        <el-form-item
+        <el-form-item :label="$t('trials:researchForm:form:checkCode')" style="margin-bottom: 5px" prop="CheckCode">
-          :label="$t('trials:researchForm:form:checkCode')"
-          style="margin-bottom: 5px"
-          prop="CheckCode"
-        >
           <span>{{ user.CheckCode }}</span>
         </el-form-item>
         <el-form-item label="" style="position: relative" prop="CheckCode">
-          <el-input
+          <el-input v-model="userForm.CheckCode" :placeholder="$t('trials:researchForm:form:checkCode')" :maxlength="6"
-            v-model="userForm.CheckCode"
+            type="number" />
-            :placeholder="$t('trials:researchForm:form:checkCode')"
-            :maxlength="6"
-            type="number"
-          />
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userForm.CheckCode" class="saveBtn" type="primary" size="small"
-            :disabled="!userForm.CheckCode"
+            @click.stop="setNewUserCheckCode">
-            class="saveBtn"
-            type="primary"
-            size="small"
-            @click.stop="setNewUserCheckCode"
-          >
             {{ $t("trials:trials-myinfo:button:update") }}
           </el-button>
         </el-form-item>
         <!-- 电话 -->
-        <el-form-item
+        <el-form-item :label="$t('trials:trials-myinfo:form:phone')" style="margin-bottom: 5px" prop="UserName">
-          :label="$t('trials:trials-myinfo:form:phone')"
-          style="margin-bottom: 5px"
-          prop="UserName"
-        >
           <span>{{ user.Phone }}</span>
         </el-form-item>
         <el-form-item label="" style="position: relative" prop="UserName">
-          <el-input
+          <el-input v-model="userForm.Phone" :placeholder="$t('trials:trials-myinfo:form:phone')" />
-            v-model="userForm.Phone"
-            :placeholder="$t('trials:trials-myinfo:form:phone')"
-          />
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userForm.Phone" class="saveBtn" type="primary" size="small" @click="setNewPhone">
-            :disabled="!userForm.Phone"
-            class="saveBtn"
-            type="primary"
-            size="small"
-            @click="setNewPhone"
-          >
             {{ $t("trials:trials-myinfo:button:update") }}
           </el-button>
         </el-form-item>
         <!-- 邮箱 -->
-        <el-form-item
+        <el-form-item :label="$t('trials:trials-myinfo:form:email')" style="margin-bottom: 5px" prop="UserName">
-          :label="$t('trials:trials-myinfo:form:email')"
-          style="margin-bottom: 5px"
-          prop="UserName"
-        >
           <span>{{ user.EMail }}</span>
         </el-form-item>
-        <el-form-item
+        <el-form-item label="" style="margin-bottom: 10px; position: relative" prop="EMail" v-if="IsCanConnectInternet">
-          label=""
+          <el-input v-model="userForm.EMail" @input="handleEmailChange"
-          style="margin-bottom: 10px; position: relative"
+            :placeholder="$t('trials:trials-myinfo:form:email')" />
-          prop="EMail"
+          <el-button class="sendCode" :disabled="sendDisabled" type="primary" size="mini"
-          v-if="IsCanConnectInternet"
+            @click="sendVerificationCode">{{ sendTitle }}</el-button>
-        >
-          <el-input
-            v-model="userForm.EMail"
-            @input="handleEmailChange"
-            :placeholder="$t('trials:trials-myinfo:form:email')"
-          />
-          <el-button
-            class="sendCode"
-            :disabled="sendDisabled"
-            type="primary"
-            size="mini"
-            @click="sendVerificationCode"
-            >{{ sendTitle }}</el-button
-          >
         </el-form-item>
-        <el-form-item
+        <el-form-item label="" style="position: relative" prop="VerificationCode" v-if="IsCanConnectInternet">
-          label=""
+          <el-input v-model="userForm.VerificationCode" :placeholder="$t('trials:researchForm:form:verifyCode')" />
-          style="position: relative"
-          prop="VerificationCode"
-          v-if="IsCanConnectInternet"
-        >
-          <el-input
-            v-model="userForm.VerificationCode"
-            :placeholder="$t('trials:researchForm:form:verifyCode')"
-          />
           <!-- 修改 -->
-          <el-button
+          <el-button :disabled="!userForm.EMail || !userForm.VerificationCode
-            :disabled="
+            " class="saveBtn" type="primary" size="small" @click="setNewEmail">
-              !userForm.EMail || !userForm.VerificationCode
-            "
-            class="saveBtn"
-            type="primary"
-            size="small"
-            @click="setNewEmail"
-          >
             {{ $t("trials:trials-myinfo:button:update") }}
           </el-button>
         </el-form-item>
+        <el-form-item :label="$t('trials:trials-myinfo:form:toggleRole')" style="position: relative"
+          prop="VerificationCode" v-if="hasRole">
+          <el-radio-group v-model="userRoleId" class="roles" v-if="hasRole">
+            <el-radio v-for="item in roles" :key="item.Id" :label="item.Id" :disabled="item.IsUserRoleDisabled"
+              style="margin-bottom: 10px">
+              {{ item.UserTypeShortName }}
+            </el-radio>
+          </el-radio-group>
+          <!-- 修改 -->
+          <el-button :disabled="!userRoleId || saveDisabled" class="saveBtn" :loading="toggleRoleLoading" type="primary"
+            size="small" @click="toggleRole">
+            {{ $t('trials:trials-myinfo:button:toggleRole') }}
+          </el-button>
+        </el-form-item>
       </el-form>
     </div>
     <password />
@@ -168,9 +110,43 @@ export default {
       userForm: {},
       sendDisabled: true,
       sendTitle: this.$t("trials:trials-myinfo:button:getVCode"),
+      userRoleId: null,
+      toggleRoleLoading: false,
     };
   },
+  created() {
+    this.userRoleId = zzSessionStorage.getItem('userId')
+  },
+  computed: {
+    roles() {
+      return this.$store.state.user.roles
+    },
+    hasRole() {
+      return this.roles && this.roles.length > 1
+    },
+    saveDisabled() {
+      return this.userRoleId === zzSessionStorage.getItem('userId')
+    },
+  },
   methods: {
+    // 切换角色
+    toggleRole() {
+      if (
+        this.userRoleId === zzSessionStorage.getItem('userId') ||
+        this.toggleRoleLoading
+      )
+        return false
+      this.toggleRoleLoading = true
+      this.$store
+        .dispatch('user/loginByRole', { userRoleId: this.userRoleId })
+        .then((res) => {
+          zzSessionStorage.removeItem('lastWorkbench')
+          window.location.reload()
+        })
+        .catch(() => {
+          this.toggleRoleLoading = false
+        })
+    },
     // 修改校验码
     async setNewUserCheckCode() {
       try {