update 优化日志管理

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

@@ -1,37 +1,56 @@
 <template>
   <container>
     <br />
-    <a-alert banner closable type="warning">
-      <template slot="message">详情的确认按钮没功能</template>
-    </a-alert>
-    <br />
-    <a-alert banner closable type="warning">
-      <template slot="message"
-        >页面刷新的时候也会有保存登录日志，但是没有ip显示</template
-      >
+    <a-alert closable type="error">
+      <template slot="message">页面刷新的时候也会有保存登录日志，但是没有ip显示</template>
     </a-alert>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysApp:page">
+      <Auth auth="sysVisLog: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.visType"
+              >
+                <a-select-option
+                  :key="item.code"
+                  :value="item.code"
+                  v-for="item in codes.visTypeDict"
+                >{{ 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>
@@ -39,127 +58,91 @@
       </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="visType" slot-scope="text">
-          {{ visTypeFilter(text) }}
-        </span>
-        <span slot="success" slot-scope="text">
-          {{ successFilter(text) }}
-        </span>
-        <span slot="action" slot-scope="text, record">
-          <span slot="action" >
-            <a @click="onOpen('details-Form', record)">详情</a>
-          </span>
-        </span>
+        <Auth auth="sysVisLog:delete" slot="operator">
+          <div class="yo-action-bar--actions">
+            <a-popconfirm @confirm="onVisLogClear" placement="bottomLeft" title="是否确认清空日志">
+              <a-button>清空日志</a-button>
+            </a-popconfirm>
+          </div>
+        </Auth>
+        <span slot="visType" slot-scope="text">{{ bindCodeValue(text, 'visTypeDict') }}</span>
+        <span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
+        <a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
+          <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: "visType",
-          scopedSlots: { customRender: "visType" },
+          title: '访问类型',
+          dataIndex: 'visType',
+          scopedSlots: { customRender: 'visType' },
         },
         {
-          title: "是否成功",
-          dataIndex: "success",
-          scopedSlots: { customRender: "success" },
+          title: '是否成功',
+          dataIndex: 'success',
+          scopedSlots: { customRender: 'success' },
         },
         {
-          title: "ip",
-          dataIndex: "ip",
+          title: 'ip',
+          dataIndex: 'ip',
         },
         {
-          title: "浏览器",
-          dataIndex: "browser",
+          title: '浏览器',
+          dataIndex: 'browser',
         },
         {
-          title: "访问时间",
-          dataIndex: "visTime",
-          scopedSlots: { customRender: "visTime" },
+          title: '访问时间',
+          dataIndex: 'visTime',
+          scopedSlots: { customRender: 'visTime' },
         },
         {
-          title: "访问人",
-          dataIndex: "account",
-        },
-        {
-          title: "详情",
-          width: "200px",
-          dataIndex: "action",
-          scopedSlots: {
-            customRender: "action",
-          },
+          title: '访问人',
+          dataIndex: 'account',
         },
       ],
-      visTypeDict: [],
-      successDict: [],
+
+      codes: {
+        visTypeDict: [],
+      },
     };
   },
   created() {
     this.onLoadCodes();
   },
   methods: {
-    visTypeFilter(result) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.visTypeDict.filter((item) => item.code == result);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
-    sysVisLogDelete() {
-      this.$api.sysVisLogDelete().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
         .sysVisLogPage({
           ...params,
-          ...this.query,
+          ...query,
         })
         .then((res) => {
           return res.data;
@@ -186,59 +169,34 @@ export default {
      * 加载字典数据时的必要方法
      */
     onLoadCodes() {
-      this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
-          this.$api.sysDictTypeDropDownWait({ code: "vis_type" }),
-        ])
-        .then(([yesOrNo, commonStatus]) => {
-          this.visTypeDict = commonStatus.data;
-          this.successDict = yesOrNo.data;
-        });
+      this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'vis_type' })]).then(([commonStatus]) => {
+        this.codes.visTypeDict = 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) {
+    onVisLogClear() {
       this.$refs.table.onLoading();
       this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
+        .sysVisLogDelete()
+        .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>