index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <div class="layout-pd">
  3. <el-row>
  4. <!--操作-->
  5. <el-col :xs="24" >
  6. <el-card class="mt8" shadow="hover" >
  7. <el-form :model="state.filter" :inline="true" @submit.stop.prevent style="margin-bottom: -3vh;">
  8. <el-form-item prop="name" style="width: 100%">
  9. <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
  10. <el-form-item label="省、市、区">
  11. <el-input v-model="state.filter.stationName" placeholder="请输入地区" clearable></el-input>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
  15. <el-form-item label="加油站名称">
  16. <el-input v-model="state.filter.stationName" placeholder="请输入加油站" clearable></el-input>
  17. </el-form-item>
  18. </el-col>
  19. <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
  20. <el-form-item label="软件版本">
  21. <el-select v-model="state.filter.softV" placeholder="请选择">
  22. <el-option label="所有" :value="''"></el-option>
  23. <el-option label="开启" :value="''"></el-option>
  24. <el-option label="关闭" :value="''"></el-option>
  25. </el-select>
  26. </el-form-item>
  27. </el-col>
  28. <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
  29. <el-form-item label="升级状态">
  30. <el-select v-model="state.filter.upgradeStatus" placeholder="请选择">
  31. <el-option label="所有" :value="''"></el-option>
  32. <el-option label="开启" :value="''"></el-option>
  33. <el-option label="关闭" :value="''"></el-option>
  34. </el-select>
  35. </el-form-item>
  36. </el-col>
  37. <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
  38. <el-form-item label="石油公司">
  39. <el-input v-model="state.filter.remarks" placeholder="请输入石油公司" clearable></el-input>
  40. </el-form-item>
  41. </el-col>
  42. <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
  43. <el-form-item label="序列号">
  44. <el-input v-model="state.filter.serialNumber" placeholder="请输入序列号" clearable></el-input>
  45. </el-form-item>
  46. </el-col>
  47. </el-form-item>
  48. </el-form>
  49. <hr>
  50. <!-- 按钮 -->
  51. <el-row justify="space-between" class="submit-button" style="margin-bottom: -1vh;">
  52. <el-row>
  53. <el-button type="primary" icon="ele-CirclePlus" @click="''">升级软件</el-button>
  54. </el-row>
  55. <el-row>
  56. <el-button type="primary" icon="ele-Search" @click="onQuery">查询</el-button>
  57. <el-button type="primary" icon="ele-RefreshRight" @click="onReset">重置</el-button>
  58. </el-row>
  59. </el-row>
  60. </el-card>
  61. </el-col>
  62. <!--表格-->
  63. <el-col :xs="24" >
  64. <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
  65. <el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
  66. <!-- 多选框 -->
  67. <el-table-column type="selection" width="50" fixed="left"></el-table-column>
  68. <el-table-column label="操作" fixed="left" header-align="center" align="center" class="left-operation" width="140">
  69. <template #default="{ row }" >
  70. <el-link
  71. class="my-el-link mr12 ml12"
  72. type="primary"
  73. @click="onDateUpdate(row)"
  74. :underline="false"
  75. target="_blank"
  76. >软件升级</el-link>
  77. <el-link
  78. class="my-el-link mr12 ml12"
  79. type="primary"
  80. @click="onDateUpdate(row)"
  81. :underline="false"
  82. target="_blank"
  83. >升级日志</el-link>
  84. <el-link
  85. class="my-el-link mr12 ml12"
  86. type="primary"
  87. @click="onDateUpdate(row)"
  88. :underline="false"
  89. target="_blank"
  90. >软件版本记录</el-link>
  91. </template>
  92. </el-table-column>
  93. <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" >
  94. </el-table-column>
  95. </el-table>
  96. <div class="my-flex my-flex-end" style="margin-top: 20px">
  97. <el-pagination
  98. v-model:currentPage="state.pageInput.CurrentPage"
  99. v-model:page-size="state.pageInput.PageSize"
  100. :total="state.total"
  101. :page-sizes="[10, 15, 20, 50, 100]"
  102. small
  103. background
  104. @size-change="onSizeChange"
  105. @current-change="onCurrentChange"
  106. layout="total, sizes, prev, pager, next, jumper"
  107. />
  108. </div>
  109. </el-card>
  110. </el-col>
  111. </el-row>
  112. </div>
  113. </template>
  114. <script setup lang="ts">
  115. import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
  116. import eventBus from "/@/utils/mitt";
  117. import {Api} from "/@/api/admin/deviceAuthorization/oilUpApi";
  118. import { UpgradeManagementDto } from "/@/api/admin/deviceAuthorization/oilUpDto";
  119. import type { pageInput } from "/@/api/admin/deviceAuthorization/oilUpDto";
  120. import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
  121. // 使用组合式函数获取分页状态
  122. const pageState = useDynamicPageSize(10, 15);
  123. /**数据对象*/
  124. const state = reactive({
  125. /**加载显示 */
  126. loading: false,
  127. /**条件查询模块 */
  128. filter: {
  129. /**加油站 */
  130. stationName: "",
  131. /**软件版本 */
  132. softV: "",
  133. /**升级状态 */
  134. upgradeStatus: "",
  135. /**升级时间 */
  136. upgradeTime: "",
  137. /**备注 */
  138. remarks: "",
  139. /**序列号 */
  140. serialNumber: "",},
  141. /**表格信息 */
  142. tableModel: [] as UpgradeManagementDto,
  143. /**动态表头 */
  144. dynamicColumns: [
  145. { prop: 'serialNumber', label: '序列号' },
  146. { prop: 'stationName', label: '加油站' },
  147. { prop: 'model', label: '加油机机型' },
  148. { prop: 'name', label: '油机号' },
  149. { prop: 'softV', label: '软件版本' },
  150. { prop: 'upgradeStatus', label: '升级状态' },
  151. { prop: 'address', label: '地址信息' },
  152. { prop: 'account', label: '操作账户' },
  153. { prop: 'upgradeTime', label: '升级时间' },
  154. { prop: 'remarks', label: '备注' },
  155. ],
  156. /**分页标识 */
  157. pageInput:{
  158. CurrentPage: 1,
  159. PageSize: 10,
  160. } as pageInput,
  161. /**分页总数 */
  162. total: 0,
  163. })
  164. onMounted(() => {
  165. // 初始化分页大小
  166. state.pageInput.PageSize = pageState.pageInput.pageSize;
  167. init()
  168. eventBus.off('refreshView')
  169. eventBus.on('refreshView', async () => {
  170. await init()
  171. })
  172. console.log()
  173. })
  174. onBeforeMount(() => {
  175. eventBus.off('refreshView')
  176. })
  177. /**
  178. * 页条变化
  179. * @param val
  180. */
  181. const onSizeChange = (val: number) => {
  182. state.pageInput.PageSize = val
  183. onQuery()
  184. }
  185. /**
  186. * 页数变化
  187. * @param val
  188. */
  189. const onCurrentChange = (val: number) => {
  190. state.pageInput.CurrentPage = val
  191. onQuery()
  192. }
  193. /**
  194. * 监听变换
  195. */
  196. watch(() => {})
  197. /**条件查询 */
  198. const onQuery = () => {
  199. init()
  200. }
  201. /**初始化 */
  202. const init = async () => {
  203. state.loading = true
  204. const res:any = await new Api().getList({...state.pageInput, Filter:state.filter})
  205. state.total = res?.data?.total ?? 0
  206. state.tableModel = res?.data?.list ?? []
  207. state.loading = false
  208. }
  209. /**重置 */
  210. const onReset=()=>{
  211. state.filter.stationName=''
  212. onQuery()
  213. }
  214. /**编辑 */
  215. const onDateUpdate=(row)=>{}
  216. // const onSizeChange = () => {
  217. // onQuery()
  218. // }
  219. // const onCurrentChange = () => {
  220. // onQuery()
  221. // }
  222. </script>
  223. <style scoped lang="scss">
  224. .el-input,
  225. .el-select {
  226. width: 240px;
  227. }
  228. /* 输入框标签固定四个字符宽度 */
  229. ::v-deep .el-form-item__label {
  230. // 字体大小14,4个字符,12px右间距
  231. width: 14*5px+12px;
  232. justify-content: start;
  233. }
  234. /* 数据表头 设置灰色样式 */
  235. ::v-deep .el-table th.el-table__cell {
  236. background-color: #F6F6F6;
  237. }
  238. </style>