登录日志

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

@@ -0,0 +1,89 @@
+<template>
+  <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>
+</template>
+<script>
+import BaseModel from '@/components/BaseModel'
+export default {
+  components: { BaseModel },
+  props: {
+    JsonObj: {
+      type: String,
+      default: '',
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          title: this.$t('system:loginLog:dialog:title'),
+          width: '500px',
+          top: '10vh',
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      curKeys: [
+        'UserName',
+        'FirstName',
+        'LastName',
+        'EMail',
+        'Phone',
+        'OrganizationName',
+        'PositionName',
+        'DepartmentName',
+        'UserRoleList',
+      ],
+    }
+  },
+  computed: {
+    curDataArr() {
+      if (!this.curData) return []
+      return Object.keys(this.curData)
+    },
+    curData() {
+      if (!this.JsonObj) return {}
+      let obj = JSON.parse(this.JsonObj)
+      let curData = {}
+      Object.keys(obj).forEach((key) => {
+        if (this.curKeys.includes(key)) {
+          curData[key] = obj[key]
+        }
+      })
+      return curData
+    },
+  },
+}
+</script>

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

@@ -168,9 +168,7 @@
         </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">
@@ -200,45 +198,14 @@
         />
       </div>
     </div>
-    <base-model v-if="config.visible" :config="config">
+    <detail :config="config" :JsonObj="JsonObj" />
-      <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 detail from './detail.vue'
 import moment from 'moment'
-import BaseModel from '@/components/BaseModel'
 const searchDataDefault = () => {
   return {
     OptType: null,
@@ -255,7 +222,7 @@ const searchDataDefault = () => {
   }
 }
 export default {
-  components: { Pagination, BaseModel },
+  components: { Pagination, detail },
   data() {
     return {
       moment,
@@ -268,30 +235,14 @@ export default {
         visible: false,
         title: this.$t('system:loginLog:dialog:title'),
         width: '500px',
+        top: '10vh',
       },
-      curData: {},
+      JsonObj: null,
-      curKeys: [
-        'UserName',
-        'FirstName',
-        'LastName',
-        'EMail',
-        'Phone',
-        'OrganizationName',
-        'PositionName',
-        'DepartmentName',
-        'UserRoleList',
-      ],
     }
   },
   mounted() {
     this.getList()
   },
-  computed: {
-    curDataArr() {
-      if (!this.curData) return []
-      return Object.keys(this.curData)
-    },
-  },
   methods: {
     handleOpenDialog(row) {
       if (!row.JsonObj)
@@ -300,12 +251,7 @@ export default {
         'xxx',
         this.$fd('UserOptType', row.OptType)
       )
-      let obj = JSON.parse(row.JsonObj)
+      this.JsonObj = row.JsonObj
-      Object.keys(obj).forEach((key) => {
-        if (this.curKeys.includes(key)) {
-          this.curData[key] = obj[key]
-        }
-      })
       this.config.visible = true
     },
     getList() {

src/views/trials/trials-panel/trial-summary/login-log/index.vue

@@ -86,7 +86,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="handleSearch">
-            {{ $t("common:button:search") }}
+            {{ $t('common:button:search') }}
           </el-button>
           <!-- 重置 -->
           <el-button
@@ -94,7 +94,7 @@
             icon="el-icon-refresh-left"
             @click="handleReset"
           >
-            {{ $t("common:button:reset") }}
+            {{ $t('common:button:reset') }}
           </el-button>
         </el-form-item>
       </el-form>
@@ -118,7 +118,7 @@
           sortable="custom"
         >
           <template slot-scope="scope">
-            {{ $fd("UserOptType", scope.row.OptType) }}
+            {{ $fd('UserOptType', scope.row.OptType) }}
           </template>
         </el-table-column>
         <el-table-column
@@ -145,12 +145,12 @@
         />
         <el-table-column
           :label="$t('trials:loginLog:table:userName')"
-          prop="LoginUserName"
+          prop="ActionUserName"
           min-width="90"
           show-overflow-tooltip
           sortable="custom"
         />
-        <el-table-column
+        <!-- <el-table-column
           :label="$t('trials:loginLog:table:userType')"
           prop="LoginUserTypeEnum"
           min-width="90"
@@ -158,18 +158,18 @@
           sortable="custom"
         >
           <template slot-scope="scope">
-            {{ $fd("UserType", scope.row.LoginUserTypeEnum) }}
+            {{ $fd('UserType', scope.row.LoginUserTypeEnum) }}
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column
           v-if="!isMine"
           :label="$t('trials:loginLog:table:optUserName')"
-          prop="OptUserName"
+          prop="TargetIdentityUserName"
-          min-width="160"
+          min-width="120"
           show-overflow-tooltip
           sortable="custom"
         />
-        <el-table-column
+        <!-- <el-table-column
           v-if="!isMine"
           :label="$t('trials:loginLog:table:optUserType')"
           prop="OptUserTypeEnum"
@@ -178,7 +178,22 @@
           sortable="custom"
         >
           <template slot-scope="scope">
-            {{ $fd("UserType", scope.row.OptUserTypeEnum) }}
+            {{ $fd('UserType', scope.row.OptUserTypeEnum) }}
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          :label="$t('trials:loginLog:table:detail')"
+          min-width="80"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.JsonObj"
+              type="text"
+              @click="handleOpenDialog(scope.row)"
+            >
+              <span>{{ $t('trials:loginLog:message:detail') }}</span>
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column
@@ -198,32 +213,34 @@
         @pagination="getList"
       />
     </template>
+    <detail :config="config" :JsonObj="JsonObj" />
   </BaseContainer>
 </template>
 <script>
-import { getUserLogList, getTrialUserList } from "@/api/user";
+import { getUserLogList, getTrialUserList } from '@/api/user'
-import BaseContainer from "@/components/BaseContainer";
+import BaseContainer from '@/components/BaseContainer'
-import Pagination from "@/components/Pagination";
+import Pagination from '@/components/Pagination'
-import moment from "moment";
+import moment from 'moment'
+import detail from '@/views/system/login-log/detail.vue'
 const searchDataDefault = () => {
   return {
-    TrialId: "",
+    TrialId: '',
     OptType: null,
-    Ip: "",
+    Ip: '',
-    LoginFaildName: "",
+    LoginFaildName: '',
-    LoginUserName: "",
+    LoginUserName: '',
     LoginUserTypeEnum: null,
-    BeginDate: "",
+    BeginDate: '',
-    EndDate: "",
+    EndDate: '',
     Asc: false,
-    SortField: "CreateTime",
+    SortField: 'CreateTime',
     PageIndex: 1,
     PageSize: 20,
-    UserId: "",
+    UserId: '',
-  };
+  }
-};
+}
 export default {
-  components: { BaseContainer, Pagination },
+  components: { BaseContainer, Pagination, detail },
   props: {
     isMine: {
       type: Boolean,
@@ -231,7 +248,7 @@ export default {
     },
     id: {
       type: String,
-      default: "",
+      default: '',
     },
   },
   data() {
@@ -243,75 +260,92 @@ export default {
       loading: false,
       datetimerange: [],
       trialUserList: [],
-    };
+      config: {
+        visible: false,
+        title: this.$t('trials:loginLog:dialog:title'),
+        width: '500px',
+        top: '10vh',
+      },
+      JsonObj: null,
+    }
   },
   mounted() {
     if (!this.isMine) {
-      this.getTrialUserList();
+      this.getTrialUserList()
     }
-    this.getList();
+    this.getList()
   },
   methods: {
+    handleOpenDialog(row) {
+      if (!row.JsonObj)
+        return this.$message.warning(this.$t('trials:loginLog:message:noJSON'))
+      this.config.title = this.$t('trials:loginLog:dialog:title').replace(
+        'xxx',
+        this.$fd('UserOptType', row.OptType)
+      )
+      this.JsonObj = row.JsonObj
+      this.config.visible = true
+    },
     // 获取登录用户
     async getTrialUserList() {
       try {
         let params = {
           TrialId: this.$route.query.trialId,
-        };
+        }
-        let res = await getTrialUserList(params);
+        let res = await getTrialUserList(params)
         if (res.IsSuccess) {
-          this.trialUserList = res.Result;
+          this.trialUserList = res.Result
         }
       } catch (err) {
-        console.log(err);
+        console.log(err)
       }
     },
     getList() {
-      this.loading = true;
+      this.loading = true
-      this.searchData.TrialId = this.$route.query.trialId;
+      this.searchData.TrialId = this.$route.query.trialId
       if (this.isMine) {
-        this.searchData.UserId = this.id;
+        this.searchData.UserId = this.id
       }
       getUserLogList(this.searchData)
         .then((res) => {
-          this.loading = false;
+          this.loading = false
-          this.list = res.Result.CurrentPageData;
+          this.list = res.Result.CurrentPageData
-          this.total = res.Result.TotalCount;
+          this.total = res.Result.TotalCount
         })
         .catch(() => {
-          this.loading = false;
+          this.loading = false
-        });
+        })
     },
     handleDatetimeChange(val) {
       if (val) {
-        this.searchData.BeginDate = val[0];
+        this.searchData.BeginDate = val[0]
-        this.searchData.EndDate = val[1];
+        this.searchData.EndDate = val[1]
       } else {
-        this.searchData.BeginDate = "";
+        this.searchData.BeginDate = ''
-        this.searchData.EndDate = "";
+        this.searchData.EndDate = ''
       }
     },
     handleSearch() {
-      this.searchData.PageIndex = 1;
+      this.searchData.PageIndex = 1
-      this.getList();
+      this.getList()
     },
     // 重置列表查询
     handleReset() {
-      this.datetimerange = null;
+      this.datetimerange = null
-      this.searchData = searchDataDefault();
+      this.searchData = searchDataDefault()
-      this.getList();
+      this.getList()
     },
     // 排序
     handleSortByColumn(column) {
-      if (column.order === "ascending") {
+      if (column.order === 'ascending') {
-        this.searchData.Asc = true;
+        this.searchData.Asc = true
       } else {
-        this.searchData.Asc = false;
+        this.searchData.Asc = false
       }
-      this.searchData.SortField = column.prop;
+      this.searchData.SortField = column.prop
-      this.searchData.PageIndex = 1;
+      this.searchData.PageIndex = 1
-      this.getList();
+      this.getList()
     },
   },
-};
+}
 </script>