update 优化日志管理

Web/src/pages/system/log/oplog/index.vue

@@ -1,35 +1,59 @@
 <template>
   <container>
-          <br />
-      <a-alert banner closable type="error">
-        <template slot="message">后端bug:任何操作的操作类型都是增加</template>
-      </a-alert>
-       <br />
-      <a-alert banner closable type="warning">
-        <template slot="message">详情的确认按钮没功能</template>
-      </a-alert>
-      <br />
+    <br />
+    <a-alert closable type="error">
+      <template slot="message">
+        <div>后端bug:任何操作的操作类型都是增加</div>
+        <div>没有记录请求参数.返回结果等信息</div>
+      </template>
+    </a-alert>
+    <br />
     <a-card :bordered="false">
-      <Auth auth="sysApp:page">
+      <Auth auth="sysOpLog:page">
         <div class="yo-query-bar">
           <a-form-model :model="query" layout="inline">
-            <a-form-model-item label="角色名称">
-              <a-input placeholder="请输入角色名称" v-model="query.name" />
+            <a-form-model-item label="日志名称">
+              <a-input placeholder="请输入日志名称" v-model="query.name" />
             </a-form-model-item>
-            <a-form-model-item label="唯一编号">
-              <a-input placeholder="请输入唯一编码" v-model="query.code" />
+            <a-form-model-item label="操作类型">
+              <a-select
+                :style="{ width: '170px' }"
+                allow-clear
+                placeholder="请选择操作类型"
+                v-model="query.opType"
+              >
+                <a-select-option
+                  :key="item.code"
+                  :value="item.code"
+                  v-for="item in codes.opTypeDict"
+                >{{ item.value }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="是否成功">
+              <a-select
+                :style="{ width: '170px' }"
+                allow-clear
+                placeholder="请选择是否成功"
+                v-model="query.success"
+              >
+                <a-select-option value="true">是</a-select-option>
+                <a-select-option value="false">否</a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="操作时间">
+              <a-range-picker
+                :show-time="{
+                      hideDisabledOptions: true,
+                      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+                    }"
+                format="YYYY-MM-DD HH:mm:ss"
+                v-model="query.dates"
+              />
             </a-form-model-item>
             <a-form-model-item>
               <a-button-group>
                 <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button
-                  @click="
-                    () => {
-                      (query = {}), onQuery();
-                    }
-                  "
-                  >重置</a-button
-                >
+                <a-button @click="() => { query = {}, onQuery() }">重置</a-button>
               </a-button-group>
             </a-form-model-item>
           </a-form-model>
@@ -37,126 +61,96 @@
       </Auth>
 
       <yo-table :columns="columns" :load-data="loadData" ref="table">
-        <div class="yo-action-bar" slot="title">
-          <Auth auth="sysApp:delete">
-            <div class="yo-action-bar--actions">
-              <a-popconfirm
-                @confirm="sysVisLogDelete()"
-                placement="topRight"
-                title="确认清空日志？"
-              >
-                <a-button>清空日志</a-button>
-              </a-popconfirm>
-            </div>
-          </Auth>
-        </div>
-        <span slot="opType" slot-scope="text">
-          {{ opTypeFilter(text) }}
-        </span>
-        <span slot="success" slot-scope="text">
-          {{ successFilter(text) }}
-        </span>
-        <span slot="action" slot-scope="text, record">
-          <yo-table-actions>
-            <a @click="onOpen('details-Form', record)">详情</a>
-          </yo-table-actions>
-        </span>
+        <Auth auth="sysOpLog:delete" slot="operator">
+          <a-popconfirm @confirm="onOpLogClear" placement="bottomLeft" title="是否确认清空日志">
+            <a-button>清空日志</a-button>
+          </a-popconfirm>
+        </Auth>
+        <span slot="opType" slot-scope="text">{{ bindCodeValue(text, 'opTypeDict') }}</span>
+        <span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
+        <a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
+          <a-descriptions-item :span="1" label="方法名称">{{ record.methodName }}</a-descriptions-item>
+          <a-descriptions-item :span="2" label="地址">{{ record.location }}</a-descriptions-item>
+          <a-descriptions-item label="浏览器">{{ record.browser }}</a-descriptions-item>
+          <a-descriptions-item :span="2" label="操作系统">{{ record.os }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="类名称">{{ record.className }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="返回结果">{{ record.result }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="请求参数">{{ record.param }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
+        </a-descriptions>
       </yo-table>
-      <details-Form ref="details-Form" />
     </a-card>
     <br />
   </container>
 </template>
 <script>
-import detailsForm from "./detailsForm";
+import moment from 'moment';
+
 export default {
-  components: {
-    detailsForm,
-  },
   data() {
     return {
       query: {},
       columns: [
         {
-          title: "日志名称",
-          dataIndex: "name",
+          title: '日志名称',
+          dataIndex: 'name',
         },
         {
-          title: "操作类型",
-          dataIndex: "opType",
-          scopedSlots: { customRender: "opType" },
+          title: '操作类型',
+          dataIndex: 'opType',
+          scopedSlots: { customRender: 'opType' },
         },
         {
-          title: "是否成功",
-          dataIndex: "success",
-          scopedSlots: { customRender: "success" },
+          title: '是否成功',
+          dataIndex: 'success',
+          scopedSlots: { customRender: 'success' },
         },
         {
-          title: "ip",
-          dataIndex: "ip",
+          title: 'ip',
+          dataIndex: 'ip',
         },
         {
-          title: "请求地址",
-          dataIndex: "url",
-          scopedSlots: { customRender: "url" },
+          title: '请求地址',
+          dataIndex: 'url',
+          scopedSlots: { customRender: 'url' },
         },
         {
-          title: "操作时间",
-          dataIndex: "opTime",
-          scopedSlots: { customRender: "opTime" },
+          title: '操作时间',
+          dataIndex: 'opTime',
+          scopedSlots: { customRender: 'opTime' },
         },
         {
-          title: "操作人",
-          dataIndex: "account",
-        },
-        {
-          title: "详情",
-          dataIndex: "action",
-          width: "150px",
-          scopedSlots: { customRender: "action" },
+          title: '操作人',
+          dataIndex: 'account',
         },
       ],
-      opTypeDict: [],
-      successDict: [],
+      codes: {
+        opTypeDict: [],
+      },
     };
   },
   created() {
     this.onLoadCodes();
   },
   methods: {
-    opTypeFilter(result) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.opTypeDict.filter((item) => item.code == result);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
-    sysVisLogDelete() {
-      this.$api.sysOpLogDelete().then((res) => {
-        if (res.success) {
-          this.$message.success("清空成功");
-          this.onReloadData();
-        } else {
-          this.$message.error("清空失败：" + res.message);
-        }
-      });
-    },
-    successFilter(result) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.successDict.filter((item) => item.code == result);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
+    moment,
+
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
+      const query = this.$_.cloneDeep(this.query);
+      if (query.dates && query.dates.length) {
+        query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+        query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+        delete query.dates;
+      }
+
       return this.$api
         .sysOpLogPage({
           ...params,
-          ...this.query,
+          ...query,
         })
         .then((res) => {
           return res.data;
@@ -183,59 +177,34 @@ export default {
      * 加载字典数据时的必要方法
      */
     onLoadCodes() {
-      this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
-          this.$api.sysDictTypeDropDownWait({ code: "op_type" }),
-        ])
-        .then(([yesOrNo, commonStatus]) => {
-          this.opTypeDict = commonStatus.data;
-          this.successDict = yesOrNo.data;
-        });
+      this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'op_type' })]).then(([commonStatus]) => {
+        this.codes.opTypeDict = commonStatus.data;
+      });
     },
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
       return null;
     },
 
-    /**
-     * 有编辑新增功能的必要方法
-     * 从列表页调用窗口的打开方法
-     */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
-    },
-
-    onResult(success, message, successMessage) {
-      if (success) {
-        this.$message.success(successMessage);
-        this.onReloadData();
-      } else {
-        this.$refs.table.onLoaded();
-        this.$message.error(message);
-      }
-    },
-
-    onSetDefault(record) {
+    onOpLogClear() {
       this.$refs.table.onLoading();
       this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
+        .sysOpLogDelete()
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('清空成功');
+            this.onReloadData();
+          } else {
+            this.$message.error('清空失败：' + res.message);
+          }
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
         });
     },
-
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api.sysRoleDel(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
-      });
-    },
   },
 };
 </script>