管理端登录日志详情

src/components/BaseTable/index.vue

@@ -48,6 +48,7 @@
             :show-overflow-tooltip="column.showOverflowTooltip || false"
             :sortable="column.sortable || false"
             :prop="column.prop"
+            :fixed="column.fixed"
           >
             <template slot-scope="scope">
               <!-- 仅仅显示文字 -->

src/views/system/login-log/index.vue

@@ -77,19 +77,15 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            @click="getList"
-          >
-            {{ $t("common:button:search") }}
+          <el-button type="primary" icon="el-icon-search" @click="getList">
+            {{ $t('common:button:search') }}
           </el-button>
           <el-button
             type="primary"
             icon="el-icon-refresh-left"
             @click="handleReset"
           >
-            {{ $t("common:button:reset") }}
+            {{ $t('common:button:reset') }}
           </el-button>
         </el-form-item>
       </el-form>
@@ -110,7 +106,7 @@
           sortable="custom"
         >
           <template slot-scope="scope">
-            {{ $fd("UserOptType", scope.row.OptType) }}
+            {{ $fd('UserOptType', scope.row.OptType) }}
           </template>
         </el-table-column>
         <el-table-column
@@ -136,12 +132,12 @@
         />
         <el-table-column
           :label="$t('system:loginLog:table:LoginUserName')"
-          prop="LoginUserName"
+          prop="ActionUserName"
           min-width="140"
           show-overflow-tooltip
           sortable="custom"
         />
-        <el-table-column
+        <!-- <el-table-column
           :label="$t('system:loginLog:table:LoginUserType')"
           prop="LoginUserTypeEnum"
           min-width="120"
@@ -151,15 +147,15 @@
           <template slot-scope="scope">
             {{ $fd("UserType", scope.row.LoginUserTypeEnum) }}
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column
           :label="$t('system:loginLog:table:OptUserName')"
-          prop="OptUserName"
+          prop="TargetIdentityUserName"
           min-width="200"
           sortable="custom"
           show-overflow-tooltip
         />
-        <el-table-column
+        <!-- <el-table-column
           :label="$t('system:loginLog:table:OptUserType')"
           prop="OptUserTypeEnum"
           min-width="200"
@@ -169,6 +165,23 @@
           <template slot-scope="scope">
             {{ $fd("UserType", scope.row.OptUserTypeEnum) }}
           </template>
+        </el-table-column> -->
+        <el-table-column
+          :label="$t('system:loginLog:table:detail')"
+          prop="TargetIdentityUserName"
+          min-width="120"
+          sortable="custom"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.JsonObj"
+              type="text"
+              @click="handleOpenDialog(scope.row)"
+            >
+              <span>{{ $t('system:loginLog:message:detail') }}</span>
+            </el-button>
+          </template>
         </el-table-column>
         <el-table-column
           :label="$t('system:loginLog:table:CreateTime')"
@@ -187,29 +200,62 @@
         />
       </div>
     </div>
+    <base-model v-if="config.visible" :config="config">
+      <template slot="dialog-body">
+        <el-form ref="form" :model="curData" max-height="500px">
+          <template v-for="key in curDataArr">
+            <el-form-item
+              :key="key"
+              :label="$t(`system:loginLog:form:${key}`)"
+              label-width="120px"
+              style="margin-bottom: 0px"
+            >
+              <span v-if="key !== 'UserRoleList'">{{ curData[key] }}</span>
+              <template v-else>
+                <div
+                  v-for="item in curData[key]"
+                  :key="item.UserTypeEnum"
+                  style="margin: 0"
+                >
+                  {{ item.UserTypeShortName
+                  }}{{ $t('system:loginLog:form:symbol')
+                  }}{{ $fd('IsEnable', !item.IsUserRoleDisabled) }}
+                </div>
+              </template>
+            </el-form-item>
+          </template>
+        </el-form>
+      </template>
+      <template slot="dialog-footer">
+        <el-button type="primary" @click="config.visible = false">
+          {{ $t('common:button:confirm') }}
+        </el-button>
+      </template>
+    </base-model>
   </div>
 </template>
 <script>
-import { getUserLogList } from "@/api/user";
-import Pagination from "@/components/Pagination";
-import moment from "moment";
+import { getUserLogList } from '@/api/user'
+import Pagination from '@/components/Pagination'
+import moment from 'moment'
+import BaseModel from '@/components/BaseModel'
 const searchDataDefault = () => {
   return {
     OptType: null,
-    Ip: "",
-    LoginFaildName: "",
+    Ip: '',
+    LoginFaildName: '',
     LoginUserName: '',
     LoginUserTypeEnum: null,
-    BeginDate: "",
-    EndDate: "",
+    BeginDate: '',
+    EndDate: '',
     Asc: false,
-    SortField: "CreateTime",
+    SortField: 'CreateTime',
     PageIndex: 1,
     PageSize: 20,
-  };
-};
+  }
+}
 export default {
-  components: { Pagination },
+  components: { Pagination, BaseModel },
   data() {
     return {
       moment,
@@ -218,52 +264,90 @@ export default {
       total: 0,
       loading: false,
       datetimerange: [],
-    };
+      config: {
+        visible: false,
+        title: this.$t('system:loginLog:dialog:title'),
+        width: '500px',
+      },
+      curData: {},
+      curKeys: [
+        'UserName',
+        'FirstName',
+        'LastName',
+        'EMail',
+        'Phone',
+        'OrganizationName',
+        'PositionName',
+        'DepartmentName',
+        'UserRoleList',
+      ],
+    }
   },
   mounted() {
-    this.getList();
+    this.getList()
+  },
+  computed: {
+    curDataArr() {
+      if (!this.curData) return []
+      return Object.keys(this.curData)
+    },
   },
   methods: {
+    handleOpenDialog(row) {
+      if (!row.JsonObj)
+        return this.$message.warning(this.$t('system:loginLog:message:noJSON'))
+      this.config.title = this.$t('system:loginLog:dialog:title').replace(
+        'xxx',
+        this.$fd('UserOptType', row.OptType)
+      )
+      let obj = JSON.parse(row.JsonObj)
+      Object.keys(obj).forEach((key) => {
+        if (this.curKeys.includes(key)) {
+          this.curData[key] = obj[key]
+        }
+      })
+      this.config.visible = true
+    },
     getList() {
-      this.loading = true;
+      this.loading = true
       getUserLogList(this.searchData)
         .then((res) => {
-          this.loading = false;
-          this.list = res.Result.CurrentPageData;
-          this.total = res.Result.TotalCount;
+          this.loading = false
+          this.list = res.Result.CurrentPageData
+          this.total = res.Result.TotalCount
         })
         .catch(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     handleDatetimeChange(val) {
       if (val) {
-        this.searchData.BeginDate = val[0];
-        this.searchData.EndDate = val[1];
+        this.searchData.BeginDate = val[0]
+        this.searchData.EndDate = val[1]
       } else {
-        this.searchData.BeginDate = "";
-        this.searchData.EndDate = "";
+        this.searchData.BeginDate = ''
+        this.searchData.EndDate = ''
       }
     },
     // 重置列表查询
     handleReset() {
       this.datetimerange = []
-      this.searchData = searchDataDefault();
-      this.getList();
+      this.searchData = searchDataDefault()
+      this.getList()
     },
     // 排序
     handleSortByColumn(column) {
-      if (column.order === "ascending") {
-        this.searchData.Asc = true;
+      if (column.order === 'ascending') {
+        this.searchData.Asc = true
       } else {
-        this.searchData.Asc = false;
+        this.searchData.Asc = false
       }
-      this.searchData.SortField = column.prop;
-      this.searchData.PageIndex = 1;
-      this.getList();
+      this.searchData.SortField = column.prop
+      this.searchData.PageIndex = 1
+      this.getList()
     },
   },
-};
+}
 </script>
 <style lang="scss">
 .log {

src/views/system/user/list/index.vue

@@ -213,6 +213,7 @@ export default {
           type: 'operate',
           label: this.$t('common:action:action'),
           minWidth: 200,
+          fixed:"right",
           operates: [
             {
               name: this.$t('common:button:edit'),