ele-usky-admin/src/views/statisManage/loginLog/index.vue

<template>
  <div class="app-container">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div class="left">
        <div>
          <a class="" style="margin-right: 30px">登录日志列表待排版</a>
          <!-- <el-button
            icon="el-icon-plus"
            type="success"
            @click="addItem()"
          >
           添加模板
          </el-button> -->
        </div>
      </div>
    </div>

    <div class="filter-container mb-10">
      <div style="margin-top: 20px">
        <div class="filter-item">
          平台名称：
          <el-input
            v-model="platformName"
            placeholder="请输入内容"
            style="width: 150px"
          ></el-input>
        </div>
       

        <div class="filter-item planOutage">
          选择时间范围：
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: auto"
          ></el-date-picker>
        </div>

        <el-button
          type="primary"
          icon="el-icon-search"
          @click="Select()"
          class="search-button"
        >
          查询
        </el-button>
      </div>
    </div>

    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
    >
      <el-table-column type="index" label="序号" width="50px"></el-table-column>
      <el-table-column
        prop="platformName"
        label="平台名称"
      ></el-table-column>
      <el-table-column
        prop="tenantCount"
        label="在用租户数"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
      ></el-table-column>
     

  
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </el-button>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        v-model:currentPage="page"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      ></el-pagination>
    </div>

    <!-- 分页end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
      :show_Dialog="showDialog"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref } from 'vue'
import DialogComponent from './dialogComponent'
import * as api from '@/api/platManage/index.js'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'VariableList',

  components: { DialogComponent },
  setup() {
    const store = useStore()

    const tableItem = ref()
    const dialogTitle = ref('')
    const showDialog = ref(false)

    const tableData = ref()
    const currentPage = ref(1)
    const pageSize = ref(15)
    const total = ref(0)

    const status = ref(0)
    const createTime = ref('')
    const platformName = ref('')
    const tenantCount = ref('')

    const dateTime = ref('')
    const select = ref(1)

    const input = ref('')
    const region = ref()

    // 添加操作
    const addItem = () => {
      tableItem.value = {
        platformName: '',
        tenantCount: '',
        tenantTerm: 3,
        geoPosition: '',
        createTime: '',
        phoneNumber: '',
        systemName: '',
        email: '',
        address: '',
        status:0,
        domain:''
      }
      dialogTitle.value = '添加模板'
      showDialog.value = true
    }
    // 编辑操作
    const editRow = (row) => {
      console.log(row)
      tableItem.value = {
        id:row.id,
        platformName: row.platformName,
        tenantCount: row.tenantCount,
        tenantTerm: row.tenantTerm=='永久有效'?3:4,
        value1:row.tenantTerm,
        status: Number(row.status),
        geoPosition: row.geoPosition,
        createTime: Number(row.createTime),
        phoneNumber: row.phoneNumber,
        systemName: Number(row.systemName),
        email: row.email,
        address: row.address,
        remark:row.remark,
        domain:row.domain
      }
      dialogTitle.value = '编辑'
      showDialog.value = true
    }

    // 关闭操作
    const closeDialog = (flag) => {
      if (flag) {
        // 重新刷新表格内容
        // this.fetchData()
        console.log(1)
      }
      showDialog.value = false
      Select()
    }

    //删除 是否删除  ---- 是
    const handleDelete = (row) => {
      api.plannedOutageDel({ id: row.id }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          Select()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    //是否删除  ---- 否
    const cancelEvent = () => {
      console.log('cancel!')
    }

    //查询列表
    function Select() {
      store.commit('TimeAll_function', dateTime.value)
      const time = store.state.Time_Data
      api
        .getPlatformList({
          size: pageSize.value,
          page: currentPage.value,
          startTime: time[0] ? time[0] : '',
          endTime: time[1] ? time[1] : '',
          // status: status.value,
          // createTime: createTime.value,
          platformName: platformName.value,
          // tenantCount: tenantCount.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            tableData.value = requset.data.records.map((val) => {
              store.commit('getTimestampAll', val.startTime)
              val.startTime = store.state.timeProcessing
              store.commit('getTimestampAll', val.endTime)
              val.endTime = store.state.timeProcessing
              store.commit('getTimestampAll', val.createTime)
              val.createTime = store.state.timeProcessing
            })
            tableData.value = requset.data.records
            total.value = requset.data.total
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    onMounted(() => {
      Select()
    })

    const handleSizeChange = (val) => {
      pageSize.value = val
      Select()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      Select()
    }
    // 表头样式设置
    const goVariableList = () => {
      // 跳转至订单列表页面传参
      this.$router.push({
        path: '../siteManage/variableList/index.vue',
      })
      // this.$router.push({ name:'variableList'})
    }
    const headClass = () => {
      return 'background:#FAFAFA;'
    }
    //处理状态状态值变色
    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      row, column, rowIndex
      // console.log(row, column, rowIndex)

      if (columnIndex) {
        // return `text-align:left;cursor:pointer;`
      } else {
        return ''
      }
    }

    //导出
    const DataReportExport = () => {
      store.commit('TimeAll_function', dateTime.value)
      const time = store.state.Time_Data
      api
        .outagePlanListExport({
          type: region.value,
          startTime: time[0] ? time[0] : '',
          endTime: time[1] ? time[1] : '',
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
            ElMessage.success({
              message: '导出成功',
              type: 'success',
            })
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }
    return {
      cellStyle,
      headClass,
      goVariableList,

      handleDelete,
      cancelEvent,
      closeDialog,
      editRow,
      addItem,
      Select,

      store,

      total,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,

      createTime,
      tableData,
      platformName,
      tenantCount,
      status,

      showDialog,
      select,
      dateTime,
      tableItem,
      dialogTitle,
      input,
      region,

      DataReportExport,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>