screenFront/src/views/Hazardous/components/HDialog.vue

<!--
 * @FilePath: \code\gitscreenFront\src\components\headerBox\dialog\headerDialog.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-06 09:23:12
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div>
    <el-dialog :title="props.title" v-model="is_Show" ref="" destroy-on-close>
      <div style="margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="15">
            <span style="margin-right: 10px; font-size: 18px;">日期：</span>
            <el-date-picker v-model="selectTime" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
              format="YYYY/MM/DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" size="large"
              style="font-size: 18px;" />
          </el-col>
          <el-col :span="9">
            <span style="margin-right: 10px; font-size: 18px;">状态：</span>
            <el-select v-model="searchConfig.status" clearable placeholder="请选择状态" style="font-size: 18px;" size="large">
              <el-option v-for="item in alarmTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="18"> </el-col>
          <el-col :span="6">
            <el-button type="primary" plain @click="searchpartData" size="large">搜索</el-button>
            <el-button type="primary" plain @click="searchpartReset" size="large">重置</el-button>
          </el-col>

        </el-row>
      </div>

      <el-table :data="tableData" v-loading="dialogLoading" size="large" max-height="650px" stripe
        style="font-size: 18px;">
        <el-table-column type="index" :index="(searchConfig.pageNum - 1) * searchConfig.pageSize + 1" label="序号"
          min-width="10px" header-align="center" width="100" align="center" />
        <el-table-column property="name" label="名称" header-align="center" align="center" />
        <el-table-column property="time" label="时间" header-align="center" align="center" />
        <el-table-column label="状态" header-align="center" align="center" width="120">
          <template #default="scope">
            <text> {{ scope.row.status == '0'?'离线':'在线' }}</text>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-class">
        <el-pagination v-model:current-page="searchConfig.pageNum" v-model:page-size="searchConfig.pageSize"
          :page-sizes="[5, 10, 50, 100]" :small="small" :disabled="disabled" :background="background"
          layout="  prev, pager, next, jumper,sizes" :total="props.total" size="large" style="font-size: 18px;"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { gettime } from "@/utils/time";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  dialogTableVisible: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "",
  },
  dialogLoading: {
    type: Boolean,
    default: true,
  },
  total: {
    type: Number,
    default: 0,
  },
});
//总页数、每页数量、当前页
const searchConfig = reactive({
  type: props.type,
  status: '',
  startTime: "",
  endTime: "",
  pageSize: 10,
  pageNum: 1,
});
const selectTime = ref("");
let small = ref(false);
let disabled = ref(false);
let background = ref(false);
//类型选项
const alarmTypeOptions = [
  {
    value: '0',
    label: '离线',
  },
  {
    value: '1',
    label: '在线',
  },
]
const emits = defineEmits(["update:dialogTableVisible", "getDialogdatafun"]);
const is_Show = computed({
  get: () => props.dialogTableVisible,
  set: (val) => {
    emits("update:dialogTableVisible", val);
  },
});

computed({
  get: () => props.type,
  set: (val) => {
    searchConfig.type = val;
  },
});
watch(() => props.type,
  (newVal, oldVal) => {
    searchConfig.type = newVal
  }, { immediate: true, deep: true })
watch(
  () => selectTime,
  (newVal, oldVal) => {
    //监听日期数据
    if (newVal.value) {
      searchConfig.startTime = gettime(newVal.value[0], 2);
      searchConfig.endTime = gettime(newVal.value[1], 2);
    } else {
      searchConfig.startTime = null;
      searchConfig.endTime = null;
    }
  },
  { immediate: true, deep: true }
);

const handleSizeChange = (val: number) => {
  searchConfig.pageSize = val;

  emits("getDialogdatafun", searchConfig);
};
const handleCurrentChange = (val: number) => {
  searchConfig.pageNum = val;
  emits("getDialogdatafun", searchConfig);
};

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
//搜索
function searchpartData() {
  emits("getDialogdatafun", searchConfig);
}
//重置
function searchpartReset() {

  searchConfig.status = ''
  selectTime.value = ''
  //需要重置startTime、endTime，因监听重置有延迟
  searchConfig.startTime = null;
  searchConfig.endTime = null;
  emits("getDialogdatafun", searchConfig);
}
onMounted(() => { });
</script>

<style scoped>
.pagination-class {
  margin-top: 20px;
}

:deep(.el-dialog__title) {
  font-size: 25px;
}

.el-row {
  margin-bottom: 20px;
}
</style>