详情页bug以及后台日志

back/src/views/modules/sys/log-data-modification-log.vue

@@ -0,0 +1,301 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__log-operation">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <el-form-item>
+          <el-select
+            v-model="dataForm.status"
+            :placeholder="$t('logOperation.status')"
+            clearable
+          >
+            <el-option
+              :label="$t('logOperation.status0')"
+              :value="0"
+            ></el-option>
+            <el-option
+              :label="$t('logOperation.status1')"
+              :value="1"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.creatorName"
+            placeholder="请输入操作人"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.operation"
+            placeholder="请输入操作名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select
+            v-model="operationType"
+            placeholder="请选择操作类型"
+            clearable
+          >
+            <el-option
+              label="增加"
+              value="/renren-admin/resource%/insert"
+            ></el-option>
+            <el-option
+              label="更新"
+              value="/renren-admin/resource%/update"
+            ></el-option>
+            <el-option
+              label="删除"
+              value="/renren-admin/resource%/delete"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetFunction()"> 重置 </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{
+            $t('export')
+          }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%"
+        :row-class-name="rowClassName"
+      >
+        <el-table-column
+          label="序号"
+          align="center"
+          prop="xh"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="operation"
+          label="操作名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="creatorName"
+          label="操作人"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestUriCharacters"
+          label="操作类型"
+          header-align="center"
+          width="100"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="operationTable"
+          label="操作数据表"
+          header-align="center"
+          align="center"
+          width="120"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="status"
+          label="操作结果"
+          sortable="custom"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
+              $t('logOperation.status0')
+            }}</el-tag>
+            <el-tag v-else size="small" type="success">{{
+              $t('logOperation.status1')
+            }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="操作时间"
+          sortable="custom"
+          header-align="center"
+          align="center"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="requestMethod"
+          label="操作方法"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestParams"
+          label="传递参数"
+          header-align="center"
+          align="center"
+          width="120"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="resultData"
+          label="返回结果"
+          header-align="center"
+          width="150"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle"
+      >
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/log/operation/page',
+        getDataListIsPage: true,
+        exportURL: '/sys/log/operation/export'
+      },
+      dataForm: {
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: '',
+        operationType: 'all'
+      },
+      operationType: '',
+      value1: ''
+    }
+  },
+  watch: {
+    value1 (val) {
+      val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.startDate = val[0]
+      val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.endDate = val[1]
+    },
+    dataList (val) {
+      if (val[0].requestUri) {
+        this.requestUriFunction()
+      }
+    },
+    operationType (val) {
+      if (val !== 'all') {
+        this.dataForm.operationType = val
+      }
+    }
+  },
+  methods: {
+    // 重置按钮
+    resetFunction () {
+      const params = {
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: '',
+        operationType: 'all'
+      }
+      this.value1 = '' // 格式化日期
+      this.operationType = '' // 操作类型转化
+      this.page = 1
+      this.limit = 10
+      this.dataForm = params
+      this.getDataList() // 重置完调用查询方法
+    },
+    // 序号
+    rowClassName ({ row, rowIndex }) {
+      row.xh = rowIndex + 1 + (this.page - 1) * this.limit
+    },
+    // 操作类型字段
+    requestUriFunction () {
+      this.dataList.map((item, index) => {
+        const name = item.requestUri.substring(
+          item.requestUri.lastIndexOf('/') + 1
+        )
+        switch (name) {
+          case 'delete':
+            this.dataList[index].requestUriCharacters = '删除'
+            break
+          case 'update':
+            this.dataList[index].requestUriCharacters = '更新'
+            break
+          case 'insert':
+            this.dataList[index].requestUriCharacters = '增加'
+            break
+        }
+      })
+    },
+    // 定义格式化函数：
+    handleTime (time, format) {
+      if (time == null || time == undefined || time == '') {
+        return ''
+      }
+      var t = new Date(time)
+      var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+      }
+      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
+        switch (a) {
+          case 'yyyy':
+            return tf(t.getFullYear())
+            break
+          case 'MM':
+            return tf(t.getMonth() + 1)
+            break
+          case 'mm':
+            return tf(t.getMinutes())
+            break
+          case 'dd':
+            return tf(t.getDate())
+            break
+          case 'HH':
+            return tf(t.getHours())
+            break
+          case 'ss':
+            return tf(t.getSeconds())
+            break
+        }
+      })
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {})
+  }
+}
+</script>

back/src/views/modules/sys/log-operation.vue

@@ -1,40 +1,164 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-sys__log-operation">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-select v-model="dataForm.status" :placeholder="$t('logOperation.status')" clearable>
+          <el-select
-            <el-option :label="$t('logOperation.status0')" :value="0"></el-option>
+            v-model="dataForm.status"
-            <el-option :label="$t('logOperation.status1')" :value="1"></el-option>
+            :placeholder="$t('logOperation.status')"
+            clearable
+          >
+            <el-option
+              :label="$t('logOperation.status0')"
+              :value="0"
+            ></el-option>
+            <el-option
+              :label="$t('logOperation.status1')"
+              :value="1"
+            ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.creatorName"
+            placeholder="请输入操作人"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.operation"
+            placeholder="请输入操作名称"
+          ></el-input>
+        </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button @click="resetFunction()"> 重置 </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{
+            $t('export')
+          }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;">
+      <el-table
-        <el-table-column prop="creatorName" :label="$t('logOperation.creatorName')" header-align="center" align="center"></el-table-column>
+        v-loading="dataListLoading"
-        <el-table-column prop="operation" :label="$t('logOperation.operation')" header-align="center" align="center"></el-table-column>
+        :data="dataList"
-        <el-table-column prop="requestUri" :label="$t('logOperation.requestUri')" header-align="center" align="center"></el-table-column>
+        border
-        <el-table-column prop="requestMethod" :label="$t('logOperation.requestMethod')" header-align="center" align="center"></el-table-column>
+        @sort-change="dataListSortChangeHandle"
-        <el-table-column prop="requestParams" :label="$t('logOperation.requestParams')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        style="width: 100%"
-        <el-table-column prop="requestTime" :label="$t('logOperation.requestTime')" sortable="custom" header-align="center" align="center">
+        :row-class-name="rowClassName"
+      >
+        <el-table-column
+          label="序号"
+          align="center"
+          prop="xh"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="operation"
+          label="操作名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="creatorName"
+          label="操作人"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="操作时间"
+          sortable="custom"
+          header-align="center"
+          align="center"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="ip"
+          label="客户端IP"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestUri"
+          label="请求地址"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestMethod"
+          :label="$t('logOperation.requestMethod')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestParams"
+          :label="$t('logOperation.requestParams')"
+          header-align="center"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="resultData"
+          label="返回结果"
+          header-align="center"
+          width="150"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="requestTime"
+          :label="$t('logOperation.requestTime')"
+          sortable="custom"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
             {{ `${scope.row.requestTime}ms` }}
           </template>
         </el-table-column>
-        <el-table-column prop="status" :label="$t('logOperation.status')" sortable="custom" header-align="center" align="center">
+        <el-table-column
+          prop="status"
+          :label="$t('logOperation.status')"
+          sortable="custom"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('logOperation.status0') }}</el-tag>
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
-            <el-tag v-else size="small" type="success">{{ $t('logOperation.status1') }}</el-tag>
+              $t('logOperation.status0')
+            }}</el-tag>
+            <el-tag v-else size="small" type="success">{{
+              $t('logOperation.status1')
+            }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="ip" :label="$t('logOperation.ip')" header-align="center" align="center"></el-table-column>
+        <!-- <el-table-column
-        <el-table-column prop="userAgent" :label="$t('logOperation.userAgent')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+          prop="userAgent"
-        <el-table-column prop="createDate" :label="$t('logOperation.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+          :label="$t('logOperation.userAgent')"
+          header-align="center"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"
+        ></el-table-column> -->
       </el-table>
       <el-pagination
         :current-page="page"
@@ -43,7 +167,8 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
     </div>
   </el-card>
@@ -61,8 +186,76 @@ export default {
         exportURL: '/sys/log/operation/export'
       },
       dataForm: {
-        status: ''
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: ''
+      },
+      value1: ''
     }
+  },
+  watch: {
+    value1 (val) {
+      val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.startDate = val[0]
+      val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.endDate = val[1]
+    }
+  },
+  methods: {
+    // 重置按钮
+    resetFunction () {
+      const params = {
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: '',
+        operationType: 'all'
+      }
+      this.value1 = '' // 格式化日期
+      this.operationType = '' // 操作类型转化
+      this.page = 1
+      this.limit = 10
+      this.dataForm = params
+      this.getDataList() // 重置完调用查询方法
+    },
+    // 序号
+    rowClassName ({ row, rowIndex }) {
+      row.xh = rowIndex + 1 + (this.page - 1) * this.limit
+    },
+    // 定义格式化函数：
+    handleTime (time, format) {
+      if (time == null || time == undefined || time == '') {
+        return ''
+      }
+      var t = new Date(time)
+      var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+      }
+      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
+        switch (a) {
+          case 'yyyy':
+            return tf(t.getFullYear())
+            break
+          case 'MM':
+            return tf(t.getMonth() + 1)
+            break
+          case 'mm':
+            return tf(t.getMinutes())
+            break
+          case 'dd':
+            return tf(t.getDate())
+            break
+          case 'HH':
+            return tf(t.getHours())
+            break
+          case 'ss':
+            return tf(t.getSeconds())
+            break
+        }
+      })
     }
   }
 }

front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue

@@ -144,11 +144,11 @@
             dataFrom.value.content[1].childrenContent.push(itemContent)
           })
         }
-        // let obj = {
+        let obj = {
-        //   attrType: '访问地址',
+          attrType: '访问地址',
-        //   attrValue: props.dataList.link || '------',
+          attrValue: props.dataList.link || '------',
-        // }
+        }
-        // dataFrom.value.content[0].childrenContent.push(obj)
+        dataFrom.value.content[0].childrenContent.push(obj)
       }
     }
   )

front/src/views/detailsAll/components/Application/ApplicationNavigation.vue

@@ -8,7 +8,12 @@
 <template>
   <div class="application-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
         {{ nav.name }}
         <span class="line"></span>
       </div>

front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue

@@ -2,10 +2,17 @@
 <template>
   <div class="application-deployment-and-security">
     <div class="title">
-      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
     </div>
     <div class="content">
-      <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
+      <div
+        v-for="(item, index) in dataFrom.content"
+        :key="index"
+        class="content-card"
+      >
         <div class="card-title">{{ item.childrenTitle }}</div>
         <div class="card-content">
           <div v-for="carditem in item.childrenContent" :key="carditem">
@@ -184,9 +191,11 @@ watch(
         height: 1.5rem;
         width: 6.2rem;
         border-radius: 0.2rem;
-      background: linear-gradient(to right,
+        background: linear-gradient(
+          to right,
           rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4));
+          rgba(148, 163, 252, 0.4)
+        );
         padding: 0 0.3rem;
         display: flex;
         flex-direction: column;
@@ -211,11 +220,11 @@ watch(
 
             div {
               max-width: 2.8rem;
-            overflow: hidden;
+              // overflow: hidden;
-            text-overflow: ellipsis;
+              // text-overflow: ellipsis;
-            display: -webkit-box;
+              // display: -webkit-box;
-            -webkit-box-orient: vertical;
+              // -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
+              // -webkit-line-clamp: 1;
             }
           }