追溯角色可查看详情

src/views/system/user/components/Retrospect.vue

@@ -160,25 +160,34 @@
         show-overflow-tooltip
       >
         <template slot-scope="scope">
-          <el-tooltip
+          <el-button
-            class="item"
-            effect="dark"
-            :content="$t('trials:staff:tip:userTypeDisabled')"
-            placement="top"
-            style="margin-right: 2px"
             v-if="
-              scope.row.TrialUserRoleList.some(
+              Array.isArray(scope.row.TrialUserRoleList) &&
-                (item) => item.IsDeleted || item.IsUserRoleDisabled
+              scope.row.TrialUserRoleList.length > 0
-              )
             "
+            type="text"
+            @click.stop="openRoleList(scope.row)"
           >
-            <i class="el-icon-warning icon-i"></i>
+            <el-tooltip
-          </el-tooltip>
+              class="item"
-          <span>{{
+              effect="dark"
-            scope.row.TrialUserRoleList.map(
+              :content="$t('trials:staff:tip:userTypeDisabled')"
-              (item) => item.UserTypeShortName
+              placement="top"
-            ).join(', ')
+              style="margin-right: 2px"
-          }}</span>
+              v-if="
+                scope.row.TrialUserRoleList.some(
+                  (item) => item.IsDeleted || item.IsUserRoleDisabled
+                )
+              "
+            >
+              <i class="el-icon-warning icon-i"></i>
+            </el-tooltip>
+            <span>{{
+              scope.row.TrialUserRoleList.map(
+                (item) => item.UserTypeShortName
+              ).join(', ')
+            }}</span>
+          </el-button>
         </template>
       </el-table-column>
       <el-table-column
@@ -230,6 +239,89 @@
       :limit.sync="searchData.PageSize"
       @pagination="getList"
     />
+    <!-- 修改参与者人员角色 -->
+    <base-model v-if="role_model.visible" :config="role_model">
+      <template slot="dialog-body">
+        <el-table :data="roleList" style="width: 100%" max-height="300px">
+          <el-table-column type="index" width="60">
+            <template slot-scope="scope">
+              <span
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-end;
+                "
+              >
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="$t('system:retrospect:tip:userTypeSysDisabled')"
+                  placement="top"
+                  style="margin-right: 3px"
+                  v-if="scope.row.IsUserRoleDisabled"
+                >
+                  <i
+                    v-if="scope.row.IsUserRoleDisabled"
+                    class="el-icon-warning icon-i"
+                  ></i>
+                </el-tooltip>
+                <span>{{ scope.$index + 1 }}</span>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="UserTypeShortName"
+            :label="
+              $t(
+                'system:retrospect:table:UserTypeShortName'
+              )
+            "
+          />
+          <el-table-column
+            prop="IsDeleted"
+            :label="
+              $t(
+                'system:retrospect:table:IsUserRoleDisabled'
+              )
+            "
+          >
+            <template slot-scope="scope">
+              <span> {{ $fd('IsDisable', scope.row.IsDeleted) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="IsDeleted"
+            :label="
+              $t(
+                'system:retrospect:table:enableTime'
+              )
+            "
+            min-width="120px"
+          >
+            <template slot-scope="scope">
+              <span>
+                {{ scope.row.CreateTime }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="IsDeleted"
+            :label="
+              $t(
+                'system:retrospect:table:forbiddenTime'
+              )
+            "
+            min-width="120px"
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.IsDeleted">
+                {{ scope.row.UpdateTime }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </base-model>
   </box-content>
 </template>
 <script>
@@ -239,6 +331,7 @@ import {
 } from '@/api/admin.js'
 import Pagination from '@/components/Pagination'
 import BoxContent from '@/components/BoxContent'
+import BaseModel from '@/components/BaseModel'
 const searchDataDefault = () => {
   return {
     TrialCode: null,
@@ -253,7 +346,7 @@ const searchDataDefault = () => {
   }
 }
 export default {
-  components: { BoxContent, Pagination },
+  components: { BoxContent, Pagination, BaseModel },
   props: {
     userId: { type: String, default: '' },
   },
@@ -271,6 +364,13 @@ export default {
       list: [],
       total: 0,
       userTypeOptions: [],
+
+      roleList: [],
+      role_model: {
+        visible: false,
+        title: this.$t('system:retrospect:dialogTitle:role'),
+        width: '800px',
+      },
     }
   },
   mounted() {
@@ -278,6 +378,10 @@ export default {
     this.getList()
   },
   methods: {
+    openRoleList(row) {
+      this.roleList = row.TrialUserRoleList
+      this.role_model.visible = true
+    },
     getUserTypeList() {
       getUserTypeListByUserType(0).then((res) => {
         if (res.IsSuccess) {