JG-ADMIN-TEMP/src/views/system/logs/index.vue

<template>
  <el-tabs type="border-card" @tab-click="clickTab">
    <el-tab-pane label="登录日志">
      <div class="mainContentBox">
        <avue-crud
          :option="optionLogin"
          v-model:page="pageLogin"
          v-model:search="searchLogin"
          :table-loading="loading"
          :permission="permission"
          @search-change="handleLoginQuery"
          @search-reset="resetQueryLogin"
          @size-change="handleLoginQuery"
          @current-change="handleLoginQuery"
          @row-del="rowDel1"
          :data="pageDataLogin"
        >
          <template #menu-left="{}">
            <el-button
              class="ml-3"
              v-hasPerm="['plan:order:export']"
              @click="clearLog1"
            >
              清空
              <template #icon>
                <svg-icon icon-class="qingkong"></svg-icon>
              </template>
            </el-button>
          </template>
        </avue-crud>
      </div>
    </el-tab-pane>
    <el-tab-pane label="操作日志">
      <div class="mainContentBox">
        <avue-crud
          :option="option"
          v-model:page="page"
          v-model:search="search"
          :table-loading="loading"
          :permission="permission"
          @search-change="handleOperQuery"
          @search-reset="resetQuery"
          @size-change="handleOperQuery"
          @current-change="handleOperQuery"
          @row-del="rowDel2"
          :data="pageData"
        >
          <template #menu-left="{}">
            <el-button
              class="ml-3"
              v-hasPerm="['plan:order:export']"
              @click="clearLog2"
            >
              <template #icon> <i-ep-download /> </template>清空
            </el-button>
          </template>
        </avue-crud>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { useCommonStoreHook ,useDictionaryStore} from "@/store";
import {
  getLoginLogPage,
  getOperaLogPage,
  clearLoginLog,
  clearOperaLog,
  deleteLoginLogs,
  deleteOperaLogs,
} from "@/api/system/log";
const { dicts,getLabelByValue } = useDictionaryStore();
// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "order-form",
  width: 800,
  title: "",
});
const search = ref({});
const option = ref({});
const pageData = ref([]);
const form = ref({});
const page = ref({ total: 0, currentPage: 1, pageSize: 10 });
const searchLogin = ref({});
const optionLogin = ref({});
const pageDataLogin = ref([]);
const pageLogin = ref({ total: 0, currentPage: 1, pageSize: 10 });
const loading = ref(false);
const permission = reactive({
  delBtn: true,
  addBtn: true,
  editBtn: true,
  menu: true,
});
option.value = {
  border: true,
  searchIndex: 3,
  searchIcon: true,
  searchMenuSpan: 8,
  align: "center",
  menuAlign: "center",
  search: true,
  viewBtn: true,
  editBtn: false,
  addBtn: false,
  refreshBtn: false,
  column: [
    {
      label: "编号",
      prop: "id",
      width: 80,
    },
    {
      label: "系统模块",
      prop: "requestModel",
    },
    {
      label: "操作类型",
      prop: "operatorType",
      search: true,
      html: true,
      width: 100,
      type: "select",
      formatter: (val) => {
        if (val.operatorType === "1") {
          return '<b class="el-tag el-tag--success el-tag--light">新增</b>';
        } else if (val.operatorType === "2") {
          return '<b class="el-tag el-tag--info el-tag--light">修改</b>';
        } else if (val.operatorType === "3") {
          return '<b class="el-tag el-tag--danger el-tag--light">删除</b>';
        } else if (val.operatorType === "4") {
          return '<b class="el-tag el-tag--info el-tag--light">授权</b>';
        } else if (val.operatorType === "5") {
          return '<b class="el-tag el-tag--warning el-tag--light">导出</b>';
        } else if (val.operatorType === "6") {
          return '<b class="el-tag el-tag--warning el-tag--light">导入</b>';
        } else if (val.operatorType === "7") {
          return '<b class="el-tag el-tag--warning el-tag--light">强退</b>';
        } else if (val.operatorType === "9") {
          return '<b class="el-tag el-tag--danger el-tag--light">清空</b>';
        } else if (val.operatorType === "10") {
          return '<b class="el-tag el-tag--info el-tag--light">其它</b>';
        }
      },
      dicData: [
        { label: "其它", value: "10" },
        { label: "新增", value: "1" },
        { label: "修改", value: "2" },
        { label: "删除", value: "3" },
        { label: "授权", value: "4" },
        { label: "导出", value: "5" },
        { label: "导入", value: "6" },
        { label: "强退", value: "7" },
        { label: "清空", value: "9" },
      ],
    },
    {
      label: "操作地址",
      prop: "requestUrl",
      width: 200,
      overHidden: true,
    },
    {
      label: "操作人员",
      prop: "creator",
      type: "select",
      dicData: dicts.user_name_list,
      props: {"label": "dictLabel","value":"dictValue"},
      search: true,
    },
    {
      label: "请求参数",
      prop: "requestParams",
      overHidden: true,
    },
    {
      label: "返回参数",
      prop: "responseStr",
      overHidden: true,
    },
    {
      label: "操作状态",
      prop: "state",
      html: true,
      width: 100,
      type: "select",
      formatter: (val) => {
        if (val.state === 0) {
          return '<b class="el-tag el-tag--success el-tag--light">成功</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">失败</b>';
      },
      dicData: [
        { label: "成功", value: 0 },
        { label: "失败", value: 1 },
      ],
    },
    {
      label: "操作日期",
      prop: "created",
      display: false,
    },
  ],
};
optionLogin.value = {
  border: true,
  searchIndex: 3,
  searchIcon: true,
  searchMenuSpan: 8,
  align: "center",
  menuAlign: "center",
  search: true,
  editBtn: false,
  addBtn: false,
  refreshBtn: false,
  column: [
    {
      label: "编号",
      prop: "id",
      width: 80,
    },
    {
      label: "用户名称",
      prop: "creator",
      type: "select",
      dicData: dicts.user_name_list,
      props: {"label": "dictLabel","value":"dictValue"},
      search: true,
    },
    {
      label: "登录地址",
      prop: "loginIp",
    },
    {
      label: "登录系统",
      prop: "operatorType",
      html: true,
      type: "select",
      formatter: (val) => {
        if (val.operatorType === "aio") {
          return '<b class="el-tag el-tag--info el-tag--light">一体机</b>';
        }
        return '<b class="el-tag el-tag--info el-tag--light">后台</b>';
      },
    },
    {
      label: "浏览器",
      prop: "clientBrowser",
    },
    {
      label: "操作系统",
      prop: "clientOs",
    },
    {
      label: "登录状态",
      prop: "state",
      search: true,
      html: true,
      type: "select",
      formatter: (val) => {
        if (val.state === 0) {
          return '<b class="el-tag el-tag--success el-tag--light">成功</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">失败</b>';
      },
      dicData: [
        { label: "成功", value: 0 },
        { label: "失败", value: 1 },
      ],
    },
    {
      label: "操作信息",
      prop: "responseStr",
    },
    {
      label: "访问时间",
      prop: "created",
    },
  ],
};
const clearLog1 = () => {
  ElMessageBox.confirm("当前操作会删除数据,你确认要继续吗?")
    .then(() => {
      clearLoginLog().then((data: any) => {
        ElMessage({
          message: data.msg,
          type: "success",
        });
        handleLoginQuery(null, null);
      });
    })
    .catch(() => {
      // catch error
    });
};
const clearLog2 = () => {
  ElMessageBox.confirm("当前操作会删除数据,你确认要继续吗?")
    .then(() => {
      clearOperaLog().then((data: any) => {
        ElMessage({
          message: data.msg,
          type: "success",
        });
        handleOperQuery(null, null);
      });
    })
    .catch(() => {
      // catch error
    });
};
const handleLoginQuery = (params: any, done: any) => {
  loading.value = true;
  const querySearch = {
    pageSize: pageLogin.value.pageSize,
    pageNo: pageLogin.value.currentPage,
    ...params,
  };
  getLoginLogPage(querySearch)
    .then(({ data }) => {
      pageDataLogin.value = data.records;
      pageLogin.value.total = data.totalCount;
      pageLogin.value.currentPage = data.pageNo;
      pageLogin.value.pageSize = data.pageSize;
    })
    .finally(() => {
      loading.value = false;
      if (done) {
        done();
      }
    });
};
const rowDel1 = (form: any, index: any) => {
  ElMessageBox.confirm("当前操作会删除数据,你确认要继续吗?")
    .then(() => {
      deleteLoginLogs([form.id])
        .then((data: any) => {
          ElMessage({
            message: data.msg,
            type: "success",
          });
          handleLoginQuery(null, null);
        })
        .finally(() => {});
    })
    .catch(() => {
      // catch error
    });
};
const rowDel2 = (form: any, index) => {
  ElMessageBox.confirm("当前操作会删除数据,你确认要继续吗?")
    .then(() => {
      deleteOperaLogs([form.id])
        .then((data: any) => {
          ElMessage({
            message: data.msg,
            type: "success",
          });
          handleOperQuery(null, null);
        })
        .finally(() => {});
    })
    .catch(() => {
      // catch error
    });
};
const clickTab = (targetName: any) => {
  if (targetName.index === 0) {
    handleLoginQuery(null, null);
  } else {
    handleOperQuery(null, null);
  }
};
const handleOperQuery = (params: any, done: any) => {
  loading.value = true;
  const querySearch = {
    pageSize: page.value.pageSize,
    pageNo: page.value.currentPage,
    ...params,
  };
  if(search.value.operatorType){
    querySearch.operatorType = search.value.operatorType
  }
  if(search.value.creator){
    querySearch.creator = search.value.creator
  }
  getOperaLogPage(querySearch)
    .then(({ data }) => {
      pageData.value = data.records;
      page.value.total = data.totalCount;
      page.value.currentPage = data.pageNo;
      page.value.pageSize = data.pageSize;
    })
    .finally(() => {
      loading.value = false;
      if (done) {
        done();
      }
    });
};
const resetQuery = () => {};
const resetQueryLogin = () => {};
onMounted?.(() => {
  handleLoginQuery(null, null);
});
</script>