School_bus_manage/src/views/log/log.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><UserFilled /></el-icon> -->
      <span class="cameratxt">操作日志</span>
    </div>

    <div class="filter">
      <div class="condition">
        <span>操作日期 : </span>
        <el-date-picker
          type="date"
          placeholder="请选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          v-model="searchInput.create_time"
        />
      </div>

      <div class="condition">
        <span>车牌号 : </span>
        <el-select
          v-model="searchInput.car_number"
          class="m-2"
          placeholder="请选择车牌号"
          :clearable="true"
        >
          <el-option
            v-for="item in busNum.list"
            :key="item"
            :label="item.car_number"
            :value="item.car_number"
          />
        </el-select>
      </div>
      <!-- <div class="condition">
            <span>发车日期 : </span>
          
            <el-date-picker
              type="date"
              placeholder="请选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="searchInput.s_date"
            />
          </div> -->
      <el-button
        color="rgba(61, 81, 232, 1)"
        type="primary"
        class="search"
        @click="search"
        ><el-icon><Search /></el-icon><span>搜索</span></el-button
      >
      <el-button
        style="margin-left: 20px"
        color="rgba(61, 81, 232, 1)"
        type="primary"
        class="search"
        @click="resetSearch"
        ><el-icon><Search /></el-icon><span>重置</span></el-button
      >
    </div>
    <div class="footer">
      <el-table
        :row-class-name="tableRowClassName"
        :data="tableData.list"
        style="width: 100%;"
        :header-cell-style="{
          background: 'rgba(240, 243, 247, 1)',
          border: 0,
        }"
      >
        <el-table-column
          width="280"
          align="center"
          prop="create_time"
          label="操作日期"
        />
        <el-table-column
          align="center"
          width="100"
          prop="admin_name"
          label="操作账号"
        />
        <el-table-column
          align="center"
          width="150"
          prop="car_number"
          label="车牌"
        />
        <el-table-column align="center" prop="record1" label="操作详情" />
      </el-table>
    </div>

    <!-- 分页数据 -->
    <el-pagination
      background
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper, slot"
      :total="total"
      @update:current-page="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive, watch, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Select, Pointer, Upload } from "@element-plus/icons-vue";
import { JSEncrypt } from "jsencrypt"; // 加密密码
import { ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import axios from "axios";
import lodash from "lodash";
import adminApi from "@/api/admin.js";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const api = ref("");
// 搜索框数据
const searchInput = reactive({
  startTime: "",
  car_number: "",
});

const busNum = reactive({ list: [] }); // 车牌号

// 表格数据
const tableData = reactive({
  list: [], //汇总数据
});

const pageSize = ref(10);
const currentPage = ref(1); // 当前页
const total = ref(10); // 当前总数

// 获取数据列表
const getList = async () => {
  {
    let data = new FormData();
    let time = dayjs().format("YYYY-MM-DD");
    console.log(searchInput.car_number);
    console.log(searchInput.create_time == null);

    if (searchInput.car_number) {
      data.set("car_number", searchInput.car_number);
    }
    if (
      typeof searchInput.create_time == "undefined" ||
      searchInput.create_time == null
    ) {
      data.set("create_time", "");
    } else {
      data.set("create_time", searchInput.create_time);
    }
    data.set("page", currentPage.value);
    data.set("rows", pageSize.value);
    let res = await axios({
      method: "post",
      url: api.value + "/carBook/logslist.action",
      headers: {
        token: sessionStorage.getItem("token"),
      },
      data: data,
    });
    console.log(res, "操作日志");
    if (res.status == 200) {
      tableData.list = res.data.rows;
      // currentPage.value = res.data.currentPage;
      total.value = res.data.total;
    } else {
      tableData.list = res.data.rows;
      currentPage.value = 1;
      total.value = res.data.total;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
      if (res.data.message == "token错误") {
        router.push({
          path: `/login`,
        });
      }
    }
  }
};

// 搜索按钮
const search = lodash.debounce(() => {
  getList();
}, 300);
// 重置搜索框
const resetSearch = lodash.debounce(() => {
  searchInput.create_time = "";
  searchInput.car_number = "";
  getList();
}, 300);

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  currentPage.value = value;
  getList();
};

onMounted(() => {
  api.value = store.state.user.api;
  busNum.list = JSON.parse(sessionStorage.getItem("busSelect"));

  getList();
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;

  .left {
    width: calc(100% - 60px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    margin: 0 30px;
    // padding: 10px 0;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
  }
  .filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    //   width: 100%;
    .condition {
      display: flex;
      align-items: center;
      margin: 15px 30px 15px 30px;
      color: #000;
      :deep(.el-input .el-input__inner) {
        font-size: 16px;
      }
      span {
        margin: 0 10px 0 0;
      }
    }
  }
  :deep(.sendBus) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 30px 20px 10px 20px;
      .el-form-item--feedback {
        .el-input__validateIcon {
          color: rgba(61, 81, 232, 1);
        }
      }
      .el-form-item.is-error .el-input__validateIcon {
        color: red;
      }
      .el-input {
        width: 200px;
      }

      .options {
        margin-left: 200px;
      }
    }
  }

  :deep(.mergeBus) {
    //   height: 420px;
    border-radius: 11px;
    /* 去掉全选按钮 */

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 30px 20px 10px 20px;
      .el-table__header {
        font-size: 17px;
      }
      .el-table__body-wrapper {
        .el-table__row {
          height: 48px;
          font-size: 17px;
          color: #000;
          td {
            padding: 0;
          }
        }
      }

      .el-table__inner-wrapper::before {
        height: 0;
      }
      .el-table__inner-wrapper {
        .el-table__header-wrapper {
          .el-table__header {
            .disabledsele .cell .el-checkbox__inner {
              display: none !important;
            }
            .disabledsele .cell::before {
              content: "操作";
              text-align: center;
              line-height: 37px;
            }
          }
        }
      }

      .el-form-item--feedback {
        .el-input__validateIcon {
          color: rgba(61, 81, 232, 1);
        }
      }
      .el-form-item.is-error .el-input__validateIcon {
        color: red;
      }
      .el-input {
        width: 200px;
      }

      .options {
        margin-left: 200px;
      }
    }

    .btn {
      width: 100%;
      height: 40px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: space-between;
      .txt {
        font-size: 18px;
        color: #000;
      }
    }
  }

  .footer {
    width: calc(100% - 60px);
    flex:1;
    margin: 10px auto 10px;
    overflow: auto;
    :deep(.el-table__header-wrapper) {
      height: 48px;

      .el-table__header {
        height: 48px;
        font-size: 16px;
      }
    }
    .el-table--fit {
      height: 100%;

      :deep(.el-table__row) {
        height: 48px;
        font-size: 16px;
        color: #000;
      }
      :deep(.el-table__row td) {
        padding: 0;
        border: 0;
      }

      :deep(.el-button) {
        width: 50px;
        height: 26px;
        border-radius: 40px;
        font-size: 15px;
      }
      :deep(.look) {
        padding: 3px 10px;
        border-radius: 40px;
        // border: 0.74px solid rgba(30, 125, 251, 1);
      }
      :deep(.lookcar) {
        padding: 3px 10px;
        border-radius: 40px;
        // border: 0.74px solid #e6a23c;
      }
      :deep(.lookdel) {
        padding: 3px 5px;
        border-radius: 40px;
        // border: 0.74px solid #fa7070;
      }
      // 输出链接弹窗样式
      :deep(.link .el-dialog__header) {
        text-align: left;
        font-size: 20px;
        font-weight: 600;
      }
      :deep(.link .el-dialog__body) {
        padding: 10px 20px;
        height: 100px;
        margin-bottom: 10px;
      }
      .link {
        .linkcontent {
          text-align: left;
          height: 100px;
          border: 1px solid #ccc;
          p {
            margin: 5px 10px;
          }
        }
      }

      :deep(.playVideo .el-dialog__header) {
        text-align: left;
        font-size: 20px;
        font-weight: 600;
        background-color: #ccc;
        margin-right: 0;
      }
      :deep(.playVideo .el-dialog__body) {
        height: 600px;
      }

      .el-button--primary {
        margin-left: 5px;
      }
      :deep(.el-table__body .even) {
        background-color: #fff;
      }
      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }
    }
  }
  .el-pagination {
    // width: 1600px;
    width: calc(100% - 60px);
    height: 60px;
    margin: 0 30px;
    justify-content: flex-end;
    :deep(.el-pagination__total) {
      color: #000;
    }
    :deep(.el-pagination__goto) {
      color: #000;
    }
    :deep(.el-pagination__classifier) {
      color: #000;
    }
    :deep(.el-input__wrapper) {
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      box-shadow: none;
    }
    :deep(.el-pager li) {
      margin: 0 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }
    :deep(.el-pager li.is-active) {
      background-color: rgba(30, 125, 251, 1);
    }
    :deep(.btn-prev) {
      margin-right: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }
    :deep(.btn-next) {
      margin-left: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }
  }
}
.el-input {
  width: 192px;
}
</style>