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

<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>
    <br />
    <a-card :bordered="false">
      <Auth auth="sysApp: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>
            <a-form-model-item label="唯一编号">
              <a-input placeholder="请输入唯一编码" v-model="query.code" />
            </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-group>
            </a-form-model-item>
          </a-form-model>
        </div>
      </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>
      </yo-table>
      <details-Form ref="details-Form" />
    </a-card>
    <br />
  </container>
</template>
<script>
import detailsForm from "./detailsForm";
export default {
  components: {
    detailsForm,
  },
  data() {
    return {
      query: {},
      columns: [
        {
          title: "日志名称",
          dataIndex: "name",
        },
        {
          title: "访问类型",
          dataIndex: "visType",
          scopedSlots: { customRender: "visType" },
        },
        {
          title: "是否成功",
          dataIndex: "success",
          scopedSlots: { customRender: "success" },
        },
        {
          title: "ip",
          dataIndex: "ip",
        },
        {
          title: "浏览器",
          dataIndex: "browser",
        },
        {
          title: "访问时间",
          dataIndex: "visTime",
          scopedSlots: { customRender: "visTime" },
        },
        {
          title: "访问人",
          dataIndex: "account",
        },
        {
          title: "详情",
          width: "200px",
          dataIndex: "action",
          scopedSlots: {
            customRender: "action",
          },
        },
      ],
      visTypeDict: [],
      successDict: [],
    };
  },
  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;
      }
    },
    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      return this.$api
        .sysVisLogPage({
          ...params,
          ...this.query,
        })
        .then((res) => {
          return res.data;
        });
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
    },

    /**
     * 加载字典数据时的必要方法
     */
    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;
        });
    },
    bindCodeValue(code, name) {
      const c = this.codes
        .find((p) => p.code == name)
        .values.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) {
      this.$refs.table.onLoading();
      this.$api
        .sysAppSetAsDefault({ id: record.id })
        .then(({ success, message }) => {
          this.onResult(success, message, "设置成功");
        });
    },

    onDelete(record) {
      this.$refs.table.onLoading();
      this.$api.sysRoleDel(record).then(({ success, message }) => {
        this.onResult(success, message, "删除成功");
      });
    },
  },
};
</script>