123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- <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>
|