admin-fiveFollowing/src/views/planOutage/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 style="margin-top: 20px">
          <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>
          <div class="filter-item">
            状态:
            <el-select
              v-model="region"
              placeholder="请选择"
              style="width: 200px"
              clearable
            >
              <el-option label="未执行" :value="1"></el-option>
              <el-option label="执行中" :value="2"></el-option>
              <el-option label="已执行" :value="3"></el-option>
            </el-select>
          </div>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="Select()"
            class="search-button"
          >
            搜索
          </el-button>
        </div>
      </div>

      <div class="right">
        <el-button type="primary">导出</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=""></el-table-column>
      <el-table-column
        prop="siteName"
        label="站点名称"
        width=""
      ></el-table-column>
      <el-table-column
        prop="startTime"
        label="开始停电时间"
        width=""
      ></el-table-column>
      <el-table-column
        prop="endTime"
        label="结束停电时间"
        width=""
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="提交时间"
        width=""
      ></el-table-column>
      <el-table-column prop="creator" label="提交人" width=""></el-table-column>
      <el-table-column prop="type" label="状态" width="">
        <template #default="scope">
          <span
            :style="{
              color:
                scope.row.type == 3
                  ? '#8DCF6E'
                  : scope.row.type === 1
                  ? '#FF747B'
                  : '#5c88fa',
            }"
          >
            {{
              scope.row.type === 1
                ? '未执行'
                : scope.row.type === 2
                ? '执行中'
                : '已执行'
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除?"
            @confirm="handleDelete(scope.row)"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button type="text" size="small" class="delete-text">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></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/planOutage/index'
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 dateTime = ref([
      new Date(2021, 8, 10, 10, 10),
      new Date(2021, 10, 11, 10, 10),
    ])
    const select = ref(1)

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

    // 添加操作
    const addItem = () => {
      tableItem.value = {
        siteId: '',
        time: ['', ''],
        startTime: '',
        endTime: '',
        phone: '',
        contacts: '',
        planType: '',
        type: '',
      }
      dialogTitle.value = '新增'
      showDialog.value = true
    }
    // 编辑操作
    const editRow = (row) => {
      console.log(row)
      tableItem.value = {
        id: row.id,
        siteId: row.siteId,
        time: [row.startTime, row.endTime],
        startTime: row.startTime,
        endTime: row.endTime,
        phone: row.phone,
        contacts: row.contacts,
        planType: row.planType,
        type: row.type,
      }
      dialogTitle.value = '编辑'
      showDialog.value = true
    }

    // 关闭操作
    const closeDialog = (flag) => {
      if (flag) {
        // 重新刷新表格内容
        this.fetchData()
      }
      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
        .plannedOutageList({
          size: pageSize.value,
          current: currentPage.value,
          type: region.value,
          startTime: time[0],
          endTime: time[1],
        })
        .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) => {
      column, rowIndex, columnIndex
      // console.log('rowIndex', row, column, rowIndex, columnIndex)
      // console.log(row.row.status)
      // console.log(row)
      if (row.column.status == '未执行') {
        return 'color:#FF747B'
      }
      if (row.column.label == '已执行') {
        return 'color:#8DCF6E'
      }
    }
    return {
      cellStyle,
      headClass,
      goVariableList,
      handleSizeChange,
      handleCurrentChange,
      handleDelete,
      cancelEvent,
      closeDialog,
      editRow,
      addItem,
      Select,

      store,

      total,
      pageSize,
      currentPage,
      tableData,

      showDialog,
      tabPosition,
      select,
      dateTime,
      tableItem,
      dialogTitle,
      input,
      region,
    }
  },
})
</script>

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