Web/admin.ui.plus-master/src/views/admin/authorize/oilUp/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.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-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.softV" placeholder="请选择">
                     <el-option label="所有" :value="''"></el-option>
                     <el-option label="开启" :value="''"></el-option>
                     <el-option label="关闭" :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.upgradeStatus" placeholder="请选择">
                     <el-option label="所有" :value="''"></el-option>
                     <el-option label="开启" :value="''"></el-option>
                     <el-option label="关闭" :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-input v-model="state.filter.remarks" 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.serialNumber" placeholder="请输入序列号" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>

          <hr>

  <!-- 按钮 -->
  <el-row justify="space-between" class="submit-button" style="margin-bottom: -1vh;">
      <el-row>
        <el-button type="primary" icon="ele-CirclePlus" @click="''">升级软件</el-button>
      </el-row>
      <el-row>
          <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-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 type="selection" width="50" fixed="left"></el-table-column>
  <el-table-column label="操作" fixed="left" header-align="center" align="center" class="left-operation" width="140">
        <template #default="{ row }" >
                <el-link
                  class="my-el-link mr12 ml12"
                  type="primary"
                  @click="onDateUpdate(row)"
                  :underline="false"
                  target="_blank"
                >软件升级</el-link>
                <el-link
                  class="my-el-link mr12 ml12"
                  type="primary"
                  @click="onDateUpdate(row)"
                  :underline="false"
                  target="_blank"
                >升级日志</el-link>
                <el-link
                  class="my-el-link mr12 ml12"
                  type="primary"
                  @click="onDateUpdate(row)"
                  :underline="false"
                  target="_blank"
                >软件版本记录</el-link>
</template>
            </el-table-column>
        <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  >
        </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, 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/deviceAuthorization/oilUpApi";
import { UpgradeManagementDto } from "/@/api/admin/deviceAuthorization/oilUpDto";
import type { pageInput } from "/@/api/admin/deviceAuthorization/oilUpDto";
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";

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

/**数据对象*/
  const state = reactive({
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
      filter: {
/**加油站 */
        stationName: "",
/**软件版本 */
        softV: "",
/**升级状态 */
        upgradeStatus: "",
/**升级时间 */
        upgradeTime: "",
/**备注 */
        remarks: "",
/**序列号 */
        serialNumber: "",},
  /**表格信息 */
tableModel: [] as UpgradeManagementDto,
    /**动态表头 */
    dynamicColumns: [
    { prop: 'serialNumber', label: '序列号' },
    { prop: 'stationName', label: '加油站' },
    { prop: 'model', label: '加油机机型' },
    { prop: 'name', label: '油机号' },
    { prop: 'softV', label: '软件版本' },
    { prop: 'upgradeStatus', label: '升级状态' },
    { prop: 'address', label: '地址信息' },
    { prop: 'account', label: '操作账户' },
    { prop: 'upgradeTime', label: '升级时间' },
    { prop: 'remarks', 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')
  })


  /**
 * 页条变化
 * @param val
 */
 const onSizeChange = (val: number) => {
  state.pageInput.PageSize = val
  onQuery()
}

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

  /**
  * 监听变换
  */
  watch(() => {})

/**条件查询 */
          const onQuery = () => {
          init()
        }
        /**初始化 */
        const init = async () => {
          state.loading = true
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
        }
/**重置 */
        const onReset=()=>{
          state.filter.stationName=''
        
          onQuery()
        }
/**编辑 */
      const onDateUpdate=(row)=>{}
      
//       const onSizeChange = () => {
//         onQuery()
// }

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

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

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