|
|
@@ -0,0 +1,235 @@
|
|
|
+
|
|
|
+<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>
|
|
|
+ <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.computerID" 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: -9px;">
|
|
|
+<el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
+<el-button type="primary" icon="ele-Plus" @click="onAdd"> 添加 </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 type="selection" width="50"></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-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-Tickets"
|
|
|
+ @click="onDataDetail(row)"
|
|
|
+ :underline="false"
|
|
|
+ target="_blank"
|
|
|
+ >查看密码</el-link>
|
|
|
+<el-link
|
|
|
+ class="my-el-link mr12 ml12"
|
|
|
+ type="primary"
|
|
|
+ icon="ele-EditPen"
|
|
|
+ @click="onDateUpdate(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>
|
|
|
+ <AddComponentDialog ref="AddComponentDialogRef" />
|
|
|
+ <UpdateComponentDialog ref="UpdateComponentDialogRef" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <script setup lang="ts">
|
|
|
+ import {onBeforeMount, onMounted, reactive, ref, watch,defineAsyncComponent} from "vue";
|
|
|
+ import eventBus from "/@/utils/mitt";
|
|
|
+ import { iFuelDBKeyAPI } from '/@/api/admin/deviceAuthorization/iFuelDBKeyApi'
|
|
|
+import { iFuelDBKeyDto } from '/@/api/admin/deviceAuthorization/iFuelDBKeyDto'
|
|
|
+ import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
|
|
|
+import { iFuelDBKeyRecordAPI } from '/@/api/admin/deviceAuthorization/iFuelDBKeyRecordApi'
|
|
|
+import { AuthApi } from '/@/api/admin/Auth'
|
|
|
+import emitter from '/@/utils/mitt'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 引入组件
|
|
|
+const AddComponentDialog = defineAsyncComponent(() => import('./add.vue'))
|
|
|
+const UpdateComponentDialog = defineAsyncComponent(() => import('./update.vue'))
|
|
|
+
|
|
|
+// 定义变量内容
|
|
|
+const AddComponentDialogRef = ref()
|
|
|
+const UpdateComponentDialogRef = ref()
|
|
|
+
|
|
|
+ // 使用组合式函数获取分页状态
|
|
|
+const pageState = useDynamicPageSize(10, 15);
|
|
|
+import type { pageInput } from "/@/api/admin/shareDto/shareDto";
|
|
|
+import { getDate } from "date-fns";
|
|
|
+
|
|
|
+/**数据对象*/
|
|
|
+ const state = reactive({
|
|
|
+ /**加载显示 */
|
|
|
+ loading: false,
|
|
|
+ /**条件查询模块 */
|
|
|
+ filter: {
|
|
|
+/**电脑识别号 */
|
|
|
+ computerID: "",},
|
|
|
+ /**表格信息 */
|
|
|
+tableModel: [] as iFuelDBKeyDto,
|
|
|
+ /**动态表头 */
|
|
|
+ dynamicColumns: [
|
|
|
+{ prop: 'computerID', 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')
|
|
|
+ })
|
|
|
+
|
|
|
+ emitter.on('component-closed', () => {
|
|
|
+ console.log('组件已关闭');
|
|
|
+ // 执行原页面函数
|
|
|
+init();
|
|
|
+});
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 监听变换
|
|
|
+ */
|
|
|
+ watch(() => {})
|
|
|
+/**条件查询 */
|
|
|
+ const onQuery = () => {
|
|
|
+ init()
|
|
|
+ }
|
|
|
+ /**初始化 */
|
|
|
+ const init = async () => {
|
|
|
+ state.loading = true
|
|
|
+const res:any = await new iFuelDBKeyAPI().getiFuelDBKeyRecord({...pageState.pageInput, Filter:state.filter})
|
|
|
+ state.total = res?.data?.total ?? 0
|
|
|
+state.tableModel = res?.data?.list ?? []
|
|
|
+ state.loading = false
|
|
|
+ }
|
|
|
+
|
|
|
+ function getCurrentFormattedTime(): string {
|
|
|
+ const now = new Date();
|
|
|
+
|
|
|
+ const year = now.getFullYear();
|
|
|
+ const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(now.getDate()).padStart(2, '0');
|
|
|
+ const hours = String(now.getHours()).padStart(2, '0');
|
|
|
+ const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
|
+ const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
|
+
|
|
|
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+}
|
|
|
+
|
|
|
+/**添加 */
|
|
|
+ const onAdd=()=>{
|
|
|
+ AddComponentDialogRef.value.openDialog()
|
|
|
+ }
|
|
|
+/**编辑 */
|
|
|
+ const onDateUpdate=(row)=>{
|
|
|
+ UpdateComponentDialogRef.value.openDialog(row)}
|
|
|
+/**详情 */
|
|
|
+ const onDataDetail= async(row)=>{
|
|
|
+
|
|
|
+ const name: any = await new AuthApi().getUserProfile()
|
|
|
+ var data = row;
|
|
|
+
|
|
|
+ data.applyDate = getCurrentFormattedTime();
|
|
|
+ data.user = name.data.name;
|
|
|
+
|
|
|
+ await new iFuelDBKeyRecordAPI().insertRecord(data)
|
|
|
+
|
|
|
+ const res = await new iFuelDBKeyAPI().GetiFuelDBKey({ computerID:row.computerID}).catch()
|
|
|
+
|
|
|
+
|
|
|
+ alert("密码:"+res.data)
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+* 页条变化
|
|
|
+* @param val
|
|
|
+*/
|
|
|
+const onSizeChange = (val: number) => {
|
|
|
+ state.pageInput.PageSize = val
|
|
|
+ //需按照页面对象修改Data
|
|
|
+ init()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 页数 变化
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const onCurrentChange = (val: number) => {
|
|
|
+ state.pageInput.CurrentPage = val
|
|
|
+ //需按照页面对象修改Data
|
|
|
+ init()
|
|
|
+}
|
|
|
+ </script>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .el-input,
|
|
|
+.el-select {
|
|
|
+ width: 240px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 输入框标签固定四个字符宽度 */
|
|
|
+::v-deep .el-form-item__label {
|
|
|
+ // 字体大小14,5个字符,12px右间距
|
|
|
+ width: 14*5px+12px;
|
|
|
+ justify-content: start;
|
|
|
+}
|
|
|
+
|
|
|
+/* 数据表头 设置灰色样式 */
|
|
|
+::v-deep .el-table th.el-table__cell {
|
|
|
+ background-color: #F6F6F6;
|
|
|
+}
|
|
|
+ </style>
|