Web/admin.ui.plus-master/src/views/admin/statement/jikongzhuban/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 style="margin-bottom: -3vh;">
            <el-form-item prop="name" style="width: 100%">
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" 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="8" :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="8" :xl="6" class="mb20">
                <el-form-item label="计控主板状态">
                  <el-select v-model="state.filter.deviceStatus" placeholder="请选择计控主板状态">
                    <el-option v-for="option in deviceStatusList" :key="option.value" :label="option.label" :value="option.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="在线状态">
                  <el-select v-model="state.filter.onlineStatus" placeholder="请选择在线状态">
                    <el-option v-for="option in onlineStatusList" :key="option.value" :label="option.label" :value="option.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
            <el-form-item label="选择安装时间">
                  <el-date-picker
                    v-model="state.time"
                    type="datetimerange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
</el-form-item>
          </el-form>

          <hr>

          <el-row class="submit-button" style="margin-bottom: -1vh;">
            <el-button  type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
            <el-button  type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
          </el-row>
</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 === 'onlineStatus'">
                  <StatusBox :status="row.onlineStatus" />
                </template>
                <template v-else-if="column.prop === 'deviceStatus'">
                  <StatusBox :status="row.deviceStatus" />
                </template>
                <template v-else>
                  {{ row[column.prop] }}
                </template>
              </template>
        </el-table-column> 
<el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="140">
        <template #default="{ row }" >
<el-link
                  class="my-el-link mr12 ml12"
                  type="primary"
                  icon="ele-Upload"
                  @click="toPage(row)"
                  :underline="false"
                  target="_blank"
                >油机详情</el-link>
</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 {Api} from "/@/api/admin/PCBA/jikongzhuban";
import { EncodercontrolsDto } from "/@/api/admin/PCBA/jikongzhubanDto";
import type { FilterType, pageInput } from "/@/api/admin/PCBA/jikongzhubanDto";
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
import StatusBox from "/@/components/StatusBox.vue";
import router from "/@/router";


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

/**数据对象*/
  const state = reactive({
    time:[] as string[],
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
      filter: {
        /**石油公司 */
        oilCompanyName: "",
        /**站点名称 */
        stationName: "",
        /**状态 */
        deviceStatus: "",
        /**在线状态 */
        onlineStatus: "",
        /**安装时间 */
        edate: null,
        sdate: null
      } as unknown as FilterType,
  /**表格信息 */
tableModel: [] as EncodercontrolsDto,
    /**动态表头 */
    dynamicColumns: [
{ prop: 'oilCompanyName', label: '石油公司' },
{ prop: 'stationName', label: '加油站名称' },
{ prop: 'serialNumber', label: '序列号' },
{ prop: 'softwareVersion', label: '软件版本号' },
{ prop: 'hardwareVersion', label: '硬件版本号' },
{ prop: 'deviceStatus', label: '计控主板状态' },
{ prop: 'onlineStatus', label: '在线状态' },
{ prop: 'fixTime', label: '安装时间' },
{ prop: 'soldTime', label: '出厂时间' },
{ prop: 'bindingDispenserManufacturer', label: '绑定加油机厂商' },
],
/**分页标识 */
    pageInput:{
      CurrentPage: 1,
      PageSize: 10,
    } as pageInput,
    /**分页总数 */
    total: 0,
})

const onlineStatusList = [
     {label:'所有', value:''},
     {label:'在线', value:"online"},
     {label:'离线', value: 'offline'},
]

const deviceStatusList = [
     {label:'所有', value:''},
     {label:'启用', value:'启动'},
     {label:'已注册', value:'已注册'},
     {label:'未知', value:'未知'},
     {label:'禁用', value:'禁用'},
]

  onMounted(() => {
    state.pageInput.PageSize = pageState.pageInput.pageSize

    init()
    eventBus.off('refreshView')
    eventBus.on('refreshView', async () => {
      await init()
    })
    console.log()
  })
  onBeforeMount(() => {
    eventBus.off('refreshView')
  })
  /**
  * 监听变换
  */
watch(() => state.time, (newVal) => {
  if (newVal && newVal.length === 2) {
    state.filter.sdate = newVal[0];
    state.filter.edate = newVal[1];
  } else {
    state.filter.sdate = null;
    state.filter.edate = null;
  }
})
/**条件查询 */
          const onQuery = () => {
          init()
        }

        
        /**初始化 */
const init = async () => {
  state.loading = true;
  console.log('发送的过滤条件:', {
    ...pageState.pageInput,
    Filter: {
      ...state.filter,

    }
  });
  
  const res = await new Api().getList({
    ...pageState.pageInput,
    Filter: state.filter
  });
  
  state.tableModel = res?.data?.list ?? [];
  state.total = res?.data?.total ?? 0;
  state.loading = false;
}
        
/**详情 */
const toPage = (row: { fuelId: any; }) => {
  router.push({ path: `/statement/${row.fuelId}` })
}
      /**
 * 页条变化
 * @param val
 */
 const onSizeChange = (val: number) => {
  state.pageInput.PageSize = val
  onQuery()
}

/**
 * 页数变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  state.pageInput.CurrentPage = val
  onQuery()
}

const onReset = () => {
  state.time = [],
  state.filter = {
    stationName: '',
    oilCompanyName: '',
    deviceStatus: '',
    onlineStatus: '',
    sdate: null,
    edate: null,
  }
  init()
}

</script>
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

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

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