Web/admin.ui.plus-master/src/views/admin/statement/encodercontrols/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 class="fengexian">
            <el-form-item prop="name" style="width: 100%">
<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="8" :xl="6" class="mb20">
                <el-form-item label="安装时间">
                  <el-date-picker
                     v-model="state.dateRange"
                     format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                     type="daterange"
                     start-placeholder="开始时间"
                     end-placeholder="结束时间"
                     :clearable="false"
                   ></el-date-picker>
                 </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-input v-model="state.filter.DeviceStatus" 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-date-picker
                    v-model="state.filter.FixTime"
                    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-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>
<div class="my-flex my-flex-start" >
<el-button  type="primary" icon="ele-CirclePlus" @click="onQuery"> 查询 </el-button>
</div>
</el-card>
      </el-col>
<!--表格-->
      <el-col  :xs="24" >
        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
<el-table 
            ref="multipleTableRef" 
            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>
<div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="state.pageInput.CurrentPage"
              v-model:page-size="state.pageInput.PageSize"
              :total="state.total"
              :page-sizes="[10, 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,encodercontrolsDto } from "/@/api/admin/reportManagement/encodercontrols/encodercontrolsdto";
  import {Api} from "/@/api/admin/reportManagement/encodercontrols/encodercontrolsapi";
  import StatusBox from "/@/components/StatusBox.vue";


/**数据对象*/
  const state = reactive({
    dateRange: [] as unknown as [string, string], // 用于存储日期范围
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
      filter: {
        startDate:"",
        endDate:"",

/**石油公司 */
        OilCompanyName: "",
/**序列号 */
        SerialNumber: "",
/**绑定加油机厂商 */
        BindingDispenserManufacturer: "",
/**安全装置状态 */
        DeviceStatus: "",
/**安装时间 */
        FixTime: "",
// 在线状态
        onlineStatus:"",
/**出厂时间 */
        SoldTime: "",},
  /**表格信息 */
tableModel: [] as encodercontrolsDto,
    /**动态表头 */
    dynamicColumns: [
{ prop: 'oilCompanyName', label: '石油公司' },
{ prop: 'stationName', label: '加油站名称' },
{ prop: 'serialNumber', label: '编码器编号' },
{ prop: 'bindingDispenserManufacturer', label: '加油机厂商' },
{ prop: 'dispenserNumber', label: '油机号' },
{ prop: 'nozzleNumber', label: '油枪号' },
{ prop: 'deviceStatus', label: '编码器状态' },
{ prop: 'onlineStatus', label: '在线状态' },
{ prop: 'fixTime', label: '安装时间' },
{ prop: 'soldTime', label: '出厂时间' },],
/**分页标识 */
    pageInput:{
      currentPage: 1,
      pageSize: 10,
    } as PageInput,
    /**分页总数 */
    total: 0,
})
  onMounted(() => {
    init()
    eventBus.off('refreshView')
    eventBus.on('refreshView', async () => {
      await init()
    })
    console.log()
  })
  onBeforeMount(() => {
    eventBus.off('refreshView')
  })
    /**页条数变化*/
const onSizeChange = () => {
  init()
}

/**页数变化*/
const onCurrentChange = () =>{
  init()
}
  /**
  * 监听变换
  */
  watch(
  () => state.dateRange,
  (newVal) => {
    if (newVal && newVal.length === 2) {
      state.filter.startDate = newVal[0]; // 开始时间
      state.filter.endDate = newVal[1];   // 结束时间
    } else {
      state.filter.startDate = "";
      state.filter.endDate = "";
    }
  }
);
/**条件查询 */
          const onQuery = () => {
          init()
        }
        /**初始化 */
        const init = async () => {
  state.loading = true;
  console.log("Request Payload:", { ...state.pageInput, Filter: state.filter });
  const res: any = await new Api().getList({ ...state.pageInput, Filter: state.filter });
  state.total = res?.data?.total ?? 0;
  state.tableModel = res?.data?.list ?? [];
  state.loading = false;
};
</script>
<style scoped lang="scss">

.fengexian{
  margin-bottom: -20px;
}

.my-flex{
  margin-top: 20px;
}

  </style>