Web/admin.ui.plus-master/src/views/admin/statement/BlackBox/index.vue

<template>
  <div class="layout-pd">
    <el-row>
<!--操作-->
      <el-col :xs="24" >
        <el-card class="mt8"  shadow="hover" >
<el-form :model="state.filter" :inline="true" @submit.stop.prevent>
            <el-form-item prop="name" style="width: 100%;">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
                <el-form-item label="加油站名称">
                  <el-input v-model="state.filter.stationName" placeholder="请输入加油站名称" clearable></el-input>
                </el-form-item>
              </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="石油公司">
                  <el-input v-model="state.filter.OilCompanyName" placeholder="请输入石油公司" clearable></el-input>
                </el-form-item>
              </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="序列号">
                  <el-input v-model="state.filter.SerialNumber" placeholder="请输入序列号" clearable></el-input>
                </el-form-item>
              </el-col>
<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="绑定加油机厂商">
                  <el-input v-model="state.filter.BindingDispenserManufacturer" placeholder="单行输入" clearable></el-input>
                </el-form-item>
              </el-col> -->
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="安全装置状态">
                  <el-select v-model="state.filter.DeviceStatus" placeholder="请输入在线状态">
                    <el-option label="所有" :value="''"></el-option>
                    <el-option v-for="(value, key) in FuelDispenserEnum" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
              </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
            <el-form-item label="选择安装时间">
                  <el-date-picker
                    v-model="state.filter.FixTime"
                    type="datetimerange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
            <el-form-item label="选择时间">
                  <el-date-picker
                    v-model="state.filter.SoldTime"
                    type="datetimerange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                  />
                </el-form-item>
              </el-col> -->
</el-form-item>
          </el-form>
          <hr class="fenge">
<div class="my-flex my-flex-start" >
          <!-- 按钮 -->
          <el-row justify="space-between" class="submit-button" style="margin-bottom:-6px">
            <el-row>
              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
              <el-button type="primary" icon="ele-RefreshRight" @click="resetQuery"> 重置 </el-button>
            </el-row>
          </el-row>
</div>
</el-card>
      </el-col>
<!--表格-->
      <el-col  :xs="24" >
        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
<el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
        <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  >
          <template #default="{ row }">
      <template v-if="column.prop === 'deviceStatus'">
        <StatusBox :status="row.deviceStatus" />
      </template>
      <template v-else>
        {{ row[column.prop] }}
      </template>
    </template>
        </el-table-column>
</el-table>
<div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="pageState.pageInput.currentPage"
              v-model:page-size="pageState.pageInput.pageSize"
              :total="state.total"
              :page-sizes="[10, 15, 20, 50, 100]"
              small
              background
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
</el-card>
      </el-col>
</el-row>
    </div>
  </template>
  <script setup lang="ts">
  import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
  import eventBus from "/@/utils/mitt";
  import { PageInput,BlackBoxDto } from "/@/api/admin/reportManagement/BlackBox/BlackBoxdto";
  import {Api} from "/@/api/admin/reportManagement/BlackBox/BlackBoxapi";
  import StatusBox from "/@/components/StatusBox.vue";
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";


// 使用组合式函数获取分页状态
const pageState = useDynamicPageSize(10, 15);


  // 在 script setup 的顶部定义枚举
const FuelDispenserEnum = {
  unregister: '未备案',
  produce: '已生产',
  register: '已备案',
  bind: '已绑定油机',
  factory: '已出厂注册',
  enable: '已启用',
  disable: '维修中'
} as const; // 使用 as const 确保类型安全

/**数据对象*/
  const state = reactive({
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
      filter: {
/**石油公司 */
        OilCompanyName: "",
/**序列号 */
        SerialNumber: "",
/**绑定加油机厂商 */
        BindingDispenserManufacturer: "",
/**安全装置状态 */
        DeviceStatus: "",
/**安装时间 */
        FixTime: "",
// 加油站名称
        stationName:"",
/**出厂时间 */
        SoldTime: "",},
  /**表格信息 */
tableModel: [] as BlackBoxDto,
    /**动态表头 */
    dynamicColumns: [
{ prop: 'stationName', label: '加油站名称' },
{ prop: 'oilCompanyName', label: '石油公司' },
{ prop: 'softwareVersion', label: '软件版本号' },
{ prop: 'hardwareVersion', label: '硬件版本号' },
{ prop: 'serialNumber', label: '序列号' },
{ prop: 'safetyDeviceManufacturer', label: '安全装置厂家' },
{ prop: 'dispenserNumber', label: '油机号' },
{ prop: 'nozzleNumber', label: '油枪号' },
{ prop: 'deviceStatus', label: '安全装置状态' },
{ prop: 'fixTime', label: '安装时间' },
{ prop: 'soldTime', label: '出厂时间' },
{ prop: 'bindingDispenserManufacturer', label: '绑定加油机厂商' },
{ prop: 'componentManufacturer', label: '部件出厂加油机厂商' },],


/**分页标识 */
    pageInput:{
      currentPage: 1,
      pageSize: 10,
    } as PageInput,
    /**分页总数 */
    total: 0,
})
  onMounted(() => {
      // 初始化分页大小
  state.pageInput.pageSize = pageState.pageInput.pageSize;
    init()
    eventBus.off('refreshView')
    eventBus.on('refreshView', async () => {
      await init()
    })
    console.log()
  })
  onBeforeMount(() => {
    eventBus.off('refreshView')
  })
  /**
  * 监听变换
  */
  watch(() => {})
/**条件查询 */
          const onQuery = () => {
          init()
        }
        const init = async () => {
  state.loading = true;

  try {
    const res: any = await new Api().getList({
      ...state.pageInput, // 使用 state.pageInput 中的分页参数
      Filter: state.filter,
    });
    state.total = res?.data?.total ?? 0;
    state.tableModel = res?.data?.list ?? [];
  } catch (error) {
    console.error("数据加载失败：", error);
  } finally {
    state.loading = false;
  }
};

        /**重置查询条件 */
const resetQuery = () => {
  state.filter.OilCompanyName = ''
  state.filter.SerialNumber = ''
  state.filter.BindingDispenserManufacturer = ''
  state.filter.DeviceStatus = ''
  state.filter.FixTime = ''
  state.filter.stationName=''
  // state.filter.createTimeRange = null

    // 重置分页参数
    state.pageInput.currentPage = 1; // 回到第一页
  state.pageInput.pageSize = 10;   // 恢复默认每页显示条数

  // 重新加载数据
  init();
}

/** 分页大小变化 */
const onSizeChange = (size: number) => {
  state.pageInput.pageSize = size; // 更新每页显示条数
  state.pageInput.currentPage = 1; // 切换分页大小时回到第一页
  init(); // 重新加载数据
};

/** 当前页码变化 */
const onCurrentChange = (page: number) => {
  state.pageInput.currentPage = page; // 更新当前页码
  init(); // 重新加载数据
};
</script>
<style scoped lang="scss">
.el-input,
.el-select,
 {
  width: 240px;
}

.el-date-picker {
  width: 240px !important;
}


/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
  // 字体大小14，5个字符，12px右间距
  width: 14*6px+12px;
  justify-content: start;
}

/* 数据表头 设置灰色样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #F6F6F6;
}

.fenge{
  margin-top:-35px
}
  </style>