NEZ-2633 feat: 角色列表增加查看按钮

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -76,6 +76,8 @@
         <recordRulesQuery v-if="from === fromRoute.recordRule && targetTab === 'Metrics'" :from="from" :obj="obj" :tabs="tabs.recordRule.Metrics" @changeTab="changeTab" :targetTab.sync="targetTab"></recordRulesQuery>
         <!--alertRule Tab-->
         <alertMessageTabNew v-if="from === fromRoute.alertSilence && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
+        <!--roles Tab-->
+        <roles-tab v-if="from === fromRoute.role && targetTab === 'roles'" :from="from" :obj="obj"  :tabs="tabs.role" @changeTab="changeTab" :targetTab.sync="targetTab"></roles-tab>
         <!--issue Tab-->
         <!-- <issueTab v-if="from === fromRoute.issue && targetTab === 'issue'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></issueTab> -->
       </div>
@@ -111,6 +113,7 @@ import networkBottomTab from '@/components/common/bottomBox/tabs/networkBottomTa
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 import cortexDetail from '@/components/common/bottomBox/tabs/cortexDetail'
 import lokiStatus from '@/components/common/bottomBox/tabs/lokiStatus'
+import rolesTab from '@/components/common/bottomBox/tabs/rolesTab'
 import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
 import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
@@ -146,7 +149,8 @@ export default {
     recordRulesQuery,
     issueTab,
     commentsBottomTab,
-    vsysBottomTab
+    vsysBottomTab,
+    rolesTab
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -284,6 +288,9 @@ export default {
         alertSilence: [
           { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
         ],
+        role: [
+          { prop: 'userTab', name: this.$t('config.operationlog.username'), active: true }
+        ],
         issue: [
           // { prop: 'issue', name: this.$t('overall.issue'), active: true }
         ]

nezha-fronted/src/components/common/bottomBox/tabs/rolesTab.vue

@@ -0,0 +1,239 @@
+<template>
+ <div>
+  <nz-bottom-data-list
+    :showTitle="showTitle"
+    :obj="obj"
+    :api="url"
+    :tableId="tableId"
+    style="height: 100%"
+    :custom-table-title.sync="tools.customTableTitle"
+    :layout="['searchInput', 'elementSet']"
+    :search-msg="searchMsg"
+    :tabs="tabs"
+    :targetTab.sync="targetTab"
+    @changeTab="changeTab"
+    @search="search"
+  >
+    <template v-slot:title
+      ><span :title="obj.name">{{ obj.name }}</span></template
+    >
+    <template v-slot>
+      <user-tab-table
+        ref="dataTable"
+        :api="url"
+        :orderByFa="orderBy"
+        v-my-loading="tools.loading"
+        :loading="tools.loading"
+        :custom-table-title="tools.customTableTitle"
+        :height="subTableHeight"
+        :table-data="tableData"
+        @del="del"
+        @copy="copy"
+        @reset_mfa="resetMfa"
+        @edit="edit"
+        @orderBy="tableDataSort"
+        @reload="getTableData"
+        @selectionChange="selectionChange"
+      ></user-tab-table>
+    </template>
+    <template v-slot:pagination>
+      <Pagination
+        ref="Pagination"
+        :pageObj="pageObj"
+        :tableId="tableId"
+        @pageNo="pageNo"
+        @pageSize="pageSize"
+      >
+      </Pagination>
+    </template>
+  </nz-bottom-data-list>
+  <transition name="right-box">
+    <user-box v-if="rightBox.show" :obj="object" @close="closeRightBox"></user-box>
+  </transition>
+</div>
+</template>
+
+<script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import userTabTable from '@/components/common/table/settings/userTabTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+import userBox from '@/components/common/rightBox/administration/userBox'
+import MessageBox from 'element-ui/packages/message-box/src/main'
+import i18n from '@/components/common/i18n'
+import routerPathParams from '@/components/common/mixin/routerPathParams'
+export default {
+  name: 'rolesTab',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin, routerPathParams],
+  components: {
+    nzBottomDataList,
+    userTabTable,
+    userBox
+  },
+  props: {
+    obj: Object
+  },
+  data () {
+    return {
+      url: 'sys/user',
+      tableId: 'userTabTable',
+      detailType: 'list',
+      searchMsg: {
+        // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+          {
+            id: 11,
+            name: this.$t('config.user.user'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          }
+        ]
+      },
+      searchLabel: { roleId: this.obj.id }
+    }
+  },
+  watch: {
+    tableData: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          const arr = []
+          n.map(item => {
+            if (!item.position) {
+              const obj = {
+                ...this.$loadsh.cloneDeep(item),
+                type: 'user',
+                position: {
+                  top: 0,
+                  left: 0
+                },
+                loading: false
+              }
+              arr.push(obj)
+            }
+          })
+          return arr
+        }
+      }
+    },
+    obj (n) {
+      this.searchLabel = { roleId: this.obj.id }
+      this.getTableData()
+    }
+  },
+  methods: {
+    edit (u, copyFlag) {
+      this.$get(`${this.url}/${u.id}`).then((response) => {
+        const user = response.user
+        if (response.code === 200) {
+          this.object = {
+            ...user,
+            status: user.status + '',
+            roleIds: Number(user.roles.map((item) => item.id).join(',')),
+            pin: '',
+            pinChange: ''
+          }
+          if (!this.object.mfaLevel) {
+            this.object.mfaLevel = 0
+          }
+          if (copyFlag) {
+            this.object.id = ''
+            this.object.name = this.object.name + '-copy'
+            if (this.object.name.length > 64) {
+              const length = this.object.name.length - 64
+              this.object.name =
+                u.name.substring(0, u.name.length - length) + '-copy'
+            }
+          }
+          this.rightBox.show = true
+        }
+      })
+    },
+    copy (u) {
+      this.edit(u, true)
+    },
+    resetMfa (row) {
+      MessageBox.confirm(i18n.t('tip.resetMfa'), {
+        confirmButtonText: i18n.t('tip.yes'),
+        cancelButtonText: i18n.t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/sys/user/resetMfa?ids=' + row.id).then((res) => {
+          if (res.code == 200) {
+            this.$message.success(this.$t('tip.resetSuccess'))
+            this.getTableData()
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      })
+    },
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      if (this.obj) {
+        this.$set(this.searchLabel, 'roleId', this.obj.id)
+      }
+      this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
+          }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    }
+  },
+  created () {
+    const searchKeys = {
+      // key: path 键
+      // value: vue set 参数
+      pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
+      pageSize: {
+        target: this.pageObj,
+        propertyName: 'pageSize',
+        type: 'number'
+      },
+      orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+      name: {
+        target: this.searchLabel,
+        isSearchInput: true,
+        propertyName: 'name',
+        type: 'string',
+        defaultJson: {
+          disabled: false,
+          id: 11,
+          label: 'name',
+          name: 'Name',
+          type: 'input',
+          val: ''
+        },
+        jsonKey: 'val'
+      }
+    }
+    this.initQueryFromPath(searchKeys)
+  }
+}
+</script>

nezha-fronted/src/components/common/table/settings/roleTable.vue

@@ -61,12 +61,13 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" v-has="'role_edit'" @click="tableOperation(['edit', scope.row])" :title="$t('overall.edit')"><i class="nz-icon nz-icon-edit"></i></button>
+        <button class="table-operation-item" v-has="'role_edit'" @click="showBottomBox('roles', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
         <el-dropdown size="medium" v-has="['role_delete','role_edit']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-item v-has="'role_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'role_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'role_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true, deleteTitle:'config.roles.roles'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>

nezha-fronted/src/components/common/table/settings/userTabTable.vue

@@ -0,0 +1,205 @@
+<template>
+    <div style="height: 100%">
+      <el-table
+        id="userTable"
+        ref="dataTable"
+        class="user-table"
+        :data="tableData"
+        :height="height"
+        border
+        :default-sort="orderBy"
+        @header-dragend="dragend"
+        @sort-change="tableDataSort"
+        @selection-change="selectionChange"
+      >
+        <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column
+          v-for="(item, index) in customTableTitle"
+          v-if="item.show"
+          :key="`col-${index}`"
+          :fixed="item.fixed"
+          :label="item.label"
+          :min-width="`${item.minWidth}`"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          :width="`${item.width}`"
+        >
+          <template slot="header">
+            <span class="data-column__span" :class="{'margin-l-10': item.prop === 'name'}">{{item.label}}</span>
+            <div class="col-resize-area"></div>
+          </template>
+          <template slot-scope="scope" :column="item">
+            <template v-if="item.prop === 'name'">
+              <div class="document-copy-block">
+                <div class="user-name-td document-copy-text" :class="{'margin-l-10': !scope.row.online}">
+                  <i class="nz-icon nz-icon-user1 user-online" v-if="scope.row.online" :title="$t('overall.online')"/>
+                  <div>
+                  <div class="flex-align-center">
+                    <span class="user-name-top">{{scope.row[item.prop]}}</span>
+                    <el-tag size="mini" v-if="mfaEnable == '1' || scope.row.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
+                  </div>
+                  <div class="user-name-bottom">
+                    @{{scope.row.username}}
+                  </div>
+                </div>
+                </div>
+              <i v-if="scope.row.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.name)" :title="$t('overall.copyText')"></i>
+              </div>
+            </template>
+            <template v-else-if="item.prop === 'roles'">
+              <template v-if="scope.row[item.prop]">
+                {{scope.row[item.prop].map(t=>t.name).join(',')}}
+              </template>
+              <template v-else>
+                <span>-</span>
+              </template>
+            </template>
+            <template v-else-if="item.prop === 'status'">
+              <div v-if="scope.row[item.prop] == 1">
+                <div class="active-icon green-bg inline-block"></div>
+                {{ $t('overall.enabled') }}
+              </div>
+              <div v-else-if="scope.row[item.prop] == 0">
+                <div class="active-icon gray-bg inline-block"></div>
+                {{ $t('overall.disabled') }}
+              </div>
+            </template>
+            <span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+            <span v-else-if="item.prop === 'lastLoginTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+            <template v-else-if="item.prop === 'lang'">
+              <span v-if="scope.row[item.prop] === 'en'">English</span>
+              <span v-else-if="scope.row[item.prop] === 'zh'">简体中文</span>
+            </template>
+            <template v-else-if="item.prop === 'email'">
+              <copy :copyData='scope.row[item.prop]' :showInfo='scope.row[item.prop]'>
+                      <template slot="copy-text">
+                         {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+                      </template>
+              </copy>
+            </template>
+            <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :resizable="false"
+          :width="operationWidth"
+          fixed="right">
+          <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+          <div slot-scope="scope" class="table-operation-items">
+            <button class="table-operation-item" v-has="'user_edit'" @click="tableOperation(['edit', scope.row])" :title="$t('overall.edit')"><i class="nz-icon nz-icon-edit"></i></button>
+            <el-dropdown size="medium" v-has="['user_edit','user_delete']" trigger="click" @command="tableOperation">
+              <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
+                <i class="nz-icon nz-icon-more3"></i>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+                <el-dropdown-item v-has="'user_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+                <el-dropdown-item v-has="'user_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true, deleteTitle:'config.user.user'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item v-has="'user_edit'" :command="['reset_mfa', scope.row]"><i class="nz-icon nz-icon-zhongzhi2FA"></i><span class="operation-dropdown-text">{{$t('config.user.resetMfa')}}</span></el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </el-table-column>
+        <template slot="empty">
+          <div  v-if="!loading" class="table-no-data">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#nz-icon-no-data-list"></use>
+            </svg>
+            <div class="table-no-data__title">No results found</div>
+          </div>
+          <div v-else>&nbsp;</div>
+        </template>
+      </el-table>
+    </div>
+    </template>
+
+<script>
+import table from '@/components/common/mixin/table'
+import copy from '@/components/common/copy'
+export default {
+  name: 'userTabTable',
+  mixins: [table],
+  components: { copy },
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.user.name'),
+          prop: 'name',
+          show: true,
+          minWidth: 600,
+          sortable: 'custom'
+        },
+        // {
+        //   label: this.$t('login.username'),
+        //   prop: 'username',
+        //   show: true,
+        //   width: 150
+        // },
+        {
+          label: this.$t('profile.role'),
+          prop: 'roles',
+          show: true,
+          width: 150
+        }, {
+          label: 'E-mail',
+          prop: 'email',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('profile.lastLoginTime'),
+          prop: 'lastLoginTime',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('profile.lastLoginIp'),
+          prop: 'lastLoginIp',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('profile.source'),
+          prop: 'source',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('config.user.language'),
+          prop: 'lang',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.state'),
+          prop: 'status',
+          show: true,
+          width: 100
+        }
+      ],
+      mfaEnable: localStorage.getItem('nz-mfa-enable')
+    }
+  },
+  methods: {
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') === username
+      }
+    }
+  }
+}
+</script>

nezha-fronted/src/components/page/config/roles.vue

@@ -76,6 +76,7 @@ export default {
     return {
       url: 'sys/role',
       tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
+      detailType: 'list',
       blankObject: { // 空白对象
         name: '',
         remark: '',