Browse Source

feat(油机SDK授权页面):新增批量审核功能
style(参考样例):隐藏“参考样例”中的“个人中心”项

DOVER-GLOBAL\10090792 1 year ago
parent
commit
5cb977c7c0

+ 23 - 1
admin.ui.plus-master/src/api/admin/deviceAuthorization/oilSdkAuthor.ts

@@ -2,7 +2,8 @@ import {ContentType, HttpClient, RequestParams,} from "/@/api/admin/http-client"
 import {
   oilSdkAuthorDtoResult,
   oilSdkAuthorPostPageDto,
-  oilSdkTableModel
+  oilSdkTableModel,
+  FueilingSdkAuthInput
 } from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
 import {AxiosResponse} from "axios/index";
 
@@ -69,4 +70,25 @@ export class OilSdkAuthorAPI<SecurityDataType = unknown> extends HttpClient<Secu
         ...params
     }
     )
+
+    /**
+  * No description
+  *
+  * @tags
+  * @name updateForm
+  * @summary 批量审核
+  * @request PUT:
+  * @secure
+  */
+  updateForms = (data:FueilingSdkAuthInput, params: RequestParams = {}) =>
+  this.request<AxiosResponse,any>({
+      path:'/api/app/fueiling-sdk-auth/updates',
+      method: 'PUT',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+      ...params
+  }
+  )
 }

+ 30 - 0
admin.ui.plus-master/src/api/admin/deviceAuthorization/oilSdkAuthorDto.ts

@@ -116,3 +116,33 @@ export interface oilSdkAuthorPostPageDto {
   PageSize?: number
   Filter?: oilSdkFilterModel
 }
+/** 审核数据输入 */
+export interface FueilingSdkAuthInput{
+  /**id*/
+  guid: number,
+  /**加油站*/
+  oilStation: string | null,
+  /**项目名称*/
+  project?: string | null,
+  /**设备SN号*/
+  sn: string | null,
+  /**授权码*/
+  key: string | null,
+  /**状态*/
+  state: string | null | number,
+  /**授权开始时间*/
+  expiedTime: string | null,
+  /**备注*/
+  remark: string | null
+}
+/**结果输出*/
+export interface ResultOutputBoolean {
+  /** 是否成功标记 */
+  success?: boolean
+  /** 编码 */
+  code?: string | null
+  /** 消息 */
+  msg?: string | null
+  /** 分页信息输出 */
+  data?: boolean
+}

+ 15 - 15
admin.ui.plus-master/src/router/route.ts

@@ -1122,21 +1122,21 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
                   icon: 'iconfont icon-ico_shuju',
                 },
               },
-              {
-                path: '/example/personal',
-                name: 'example/personal',
-                component: () => import('/@/views/example/personal/index.vue'),
-                meta: {
-                  title: 'message.router.personal',
-                  isLink: '',
-                  isHide: false,
-                  isKeepAlive: true,
-                  isAffix: false,
-                  isIframe: false,
-                  roles: ['admin', 'common'],
-                  icon: 'iconfont icon-gerenzhongxin',
-                },
-              },
+              // {
+              //   path: '/example/personal',
+              //   name: 'example/personal',
+              //   component: () => import('/@/views/example/personal/index.vue'),
+              //   meta: {
+              //     title: 'message.router.personal',
+              //     isLink: '',
+              //     isHide: false,
+              //     isKeepAlive: true,
+              //     isAffix: false,
+              //     isIframe: false,
+              //     roles: ['admin', 'common'],
+              //     icon: 'iconfont icon-gerenzhongxin',
+              //   },
+              // },
               {
                 path: '/example/tools',
                 name: 'example/tools',

+ 109 - 0
admin.ui.plus-master/src/views/admin/authorize/fuelingsdk/components/form-audit.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <el-dialog title="审核" v-model="isShowDialog" draggable width="400px">
+      <el-form ref="formRef" :model="formData.auditData" :rules="rules" >
+        <el-form-item label="失效时间" prop="expiedTime">
+          <el-date-picker
+                    v-model="formData.auditData.expiedTime"
+                    type="datetime"
+                    value-format="YYYY-MM-DD HH:mm:ss"
+                    placeholder="请选择失效时间" >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" icon="ele-CircleClose" size="default">取 消</el-button>
+          <el-button type="primary" @click="confirmAudit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {reactive, ref, watch} from "vue";
+import {oilSdkTableModel,FueilingSdkAuthInput} from "/src/api/admin/deviceAuthorization/oilSdkAuthorDto";
+import {OilSdkAuthorAPI} from "/src/api/admin/deviceAuthorization/oilSdkAuthor";
+import eventBus from "/src/utils/mitt";
+import {FormRules} from "element-plus";
+
+/**数据对象 */
+const formData = reactive({
+  loading: false,
+  //isShowDialog: false,
+  auditData:[] as FueilingSdkAuthInput
+})
+/**有效时间选择校验*/
+const validateDate = (rule: any, value: any, callback: any) => {
+  if(new Date(value).getTime() > Date.now()){
+    callback()
+  }else{
+    callback(new Error('选择的时间已失效'))
+  }
+}
+
+/**表单校验*/
+const rules = reactive<FormRules>({
+  expiedTime: [
+    { type: 'date', required: true, message: '请选择失效期', trigger: 'blur' },
+    { validator: validateDate, trigger: 'blur' }
+  ],
+})
+const isShowDialog = ref(false);
+const formRef = ref()
+
+const openDialog = (val:any[]) => {
+  //console.log(val)
+  formData.auditData = JSON.parse(JSON.stringify(val))
+  //console.log(formData.auditData)
+  //formData.isShowDialog = true
+  //formData.isShowDialog = true
+  isShowDialog.value = true;
+}
+
+const onCancel = () => {
+  isShowDialog.value=false
+}
+
+const confirmAudit =async () => {
+  formRef.value.validate(async (valid: boolean) =>{
+    if(!valid) return
+    formData.auditData=formData.auditData.map(item=>{
+      item.expiedTime=formData.auditData.expiedTime
+      item.state = '正常' ? 1 : 0 ?? 0
+      return item
+    })
+    formData.loading = true
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    let res = {} as any
+    res = await new OilSdkAuthorAPI().updateForms(formData.auditData,{ showSuccessMessage: true }).catch(() => {
+      formData.loading = false
+    })
+
+    if(res?.success){
+      //console.log('2')
+      //console.log(formData.auditData)
+      eventBus.emit('refreshView')
+      isShowDialog.value = false
+      formData.auditData = {} as oilSdkTableModel
+    }
+
+    formData.loading = false
+  })
+}
+
+/***监听弹窗关   闭表单验证*/
+watch(() => isShowDialog.value,(newVal) => {
+  if(newVal) formRef.value?.resetFields()
+})
+
+defineExpose({
+  openDialog,
+})
+
+
+</script>
+<style scoped lang="scss">
+
+</style>

+ 3 - 3
admin.ui.plus-master/src/views/admin/authorize/fuelingsdk/components/form-edit.vue

@@ -29,12 +29,12 @@
             </el-form-item>
           </el-col> -->
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="效时间" prop="expiedTime">
+            <el-form-item label="效时间" prop="expiedTime">
               <el-date-picker
                 v-model="formData.editData.expiedTime"
                 type="datetime"
                 value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="选择效时间"
+                placeholder="选择效时间"
               />
             </el-form-item>
           </el-col>
@@ -128,7 +128,7 @@ const rules = reactive<FormRules>({
     { required: true, message: '请输入设备授权码', trigger: 'blur' },
   ],
   expiedTime: [
-    { type: 'date', required: true, message: '请选择效期', trigger: 'blur' },
+    { type: 'date', required: true, message: '请选择效期', trigger: 'blur' },
     { validator: validateDate, trigger: 'blur' }
   ],
   state: [

+ 39 - 19
admin.ui.plus-master/src/views/admin/authorize/fuelingsdk/index.vue

@@ -27,7 +27,7 @@
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-                <el-form-item label="效时间">
+                <el-form-item label="效时间">
                   <el-date-picker
                     v-model="sdkData.time"
                     type="datetimerange"
@@ -50,10 +50,9 @@
               </el-col>
             </el-form-item>
           </el-form>
-          <div class="my-flex my-flex-start" >
-            <el-button  type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
-          </div>
           <div class="my-flex my-flex-end" >
+            <el-button  type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
+            <el-button type="primary" icon="ele-Tickets" @click="onAuditRecord()"> 审核 </el-button>
             <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
             <el-button type="primary" icon="ele-Document" @click="exportTable(sdkData.tableModel,sdkData.dynamicColumns)"> 导出表格 </el-button>
           </div>
@@ -62,8 +61,14 @@
       <!--表格-->
       <el-col  :xs="24" >
         <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
-          <el-table v-loading="sdkData.loading" stripe :data="sdkData.tableModel" row-key="id" style="width: 100%">
-            <el-table-column v-for="column in sdkData.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  />
+          <el-table ref="multipleTableRef"
+            v-loading="sdkData.loading"
+            stripe :data="sdkData.tableModel"
+            row-key="id"
+            style="width: 100%"
+            @row-click="onOilSdkRowClick" >
+            <el-table-column type="selection" width="50"></el-table-column>
+            <el-table-column v-for="column in sdkData.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" show-overflow-tooltip  />
             <el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="100">
               <template #default="{ row }">
                 <el-link
@@ -75,7 +80,7 @@
                   :underline="false"
                   target="_blank"
                 >编辑</el-link>
-                <el-link
+                <!-- <el-link
                   class="my-el-link mr12 ml12"
                   v-if="showAudit(row)"
                   type="primary"
@@ -84,7 +89,7 @@
                   @click="onAuditRecord(row)"
                   :underline="false"
                   target="_blank"
-                >审核</el-link>
+                >审核</el-link> -->
               </template>
             </el-table-column>
           </el-table>
@@ -105,22 +110,29 @@
       </el-col>
     </el-row>
     <EditDialog ref="editDialogRef" />
+    <AuditDialog ref="auditDialogRef" />
   </div>
 
 </template>
 
 <script setup lang="ts" name="authorize/fuelingsdk">
-import {defineAsyncComponent, onMounted, reactive, ref, watch, onBeforeMount} from "vue";
-import {OilSdkAuthorDto, oilSdkFilterModel, oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
+import {defineAsyncComponent, onMounted, reactive, ref, watch, onBeforeMount,getCurrentInstance} from "vue";
+import {OilSdkAuthorDto, oilSdkFilterModel, oilSdkTableModel,oilSdkAuthorPageOutput,FueilingSdkAuthInput} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
 import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
 import type {pageInput} from "/@/api/admin/shareDto/shareDto";
 import eventBus from "/@/utils/mitt";
 import * as ExcelJS from 'exceljs';
 import * as FileSaver from 'file-saver';
+import { ElTable } from 'element-plus'
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('/src/views/admin/authorize/fuelingsdk/components/form-edit.vue'))
+const AuditDialog = defineAsyncComponent(() => import('/src/views/admin/authorize/fuelingsdk/components/form-audit.vue'))
 
 const editDialogRef = ref()
+const auditDialogRef = ref()
+
+const multipleTableRef=ref<InstanceType<typeof ElTable>>()
+const { proxy } = getCurrentInstance() as any
 
 /**sdk授权页面对象 */
 const sdkData = reactive({
@@ -151,7 +163,7 @@ const sdkData = reactive({
     { prop: 'projectName', label: '项目名称' },
     { prop: 'sn', label: '设备SN号' },
     { prop: 'key', label: '授权码' },
-    { prop: 'expiedTime', label: '效时间' },
+    { prop: 'expiedTime', label: '效时间' },
     { prop: 'state', label: '状态' },
     { prop: 'remark', label: '备注' },
   ],
@@ -329,15 +341,23 @@ const editTableData = (row) => {
   editDialogRef.value.openDialog(row)
 }
 /**审核弹窗 */
-const onAuditRecord=(row)=>{
-  console.log(row.key)
-}
-/**授权码为空时显示审核按钮 */
-const showAudit=(row):boolean=>{
-  if(row.key){
-    return false
+const onAuditRecord=()=>{
+  const selectionRows = multipleTableRef.value!.getSelectionRows() as FueilingSdkAuthInput
+  //console.log(selectionRows)
+
+  if (!((selectionRows.length as number) > 0)) {
+    proxy.$modal.msgWarning('请选择要审核的数据')
+    return
+  }else{
+    auditDialogRef.value.openDialog(selectionRows)
   }
-  return true
+
+}
+const onOilSdkRowClick=(row: FueilingSdkAuthInput)=> {
+  // TODO: improvement typing when refactor table
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  multipleTableRef.value!.toggleRowSelection(row, undefined)
 }
 </script>
 

+ 4 - 4
admin.ui.plus-master/src/views/admin/login/component/account.vue

@@ -4,7 +4,7 @@
       <el-form-item class="login-animation1" prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }]">
         <el-input
           text
-          :placeholder="$t('message.account.accountPlaceholder1')"
+          placeholder="请输入用户名"
           v-model="state.ruleForm.userName"
           clearable
           autocomplete="off"
@@ -18,7 +18,7 @@
       <el-form-item class="login-animation2" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }]">
         <el-input
           :type="state.isShowPassword ? 'text' : 'password'"
-          :placeholder="$t('message.account.accountPlaceholder2')"
+          placeholder="请输入密码"
           v-model="state.ruleForm.password"
           autocomplete="off"
           @keyup.enter="onSignIn"
@@ -106,8 +106,8 @@ const state = reactive({
   showDialog: false,
   isShowPassword: false,
   ruleForm: {
-    userName: 'admin',
-    password: '111111',
+    userName: '',
+    password: '',
     captchaId: '',
     captchaData: '',
   } as AuthLoginInput,

+ 1 - 1
admin.ui.plus-master/src/views/admin/login/component/mobile.vue

@@ -62,7 +62,7 @@ const phoneRef = ref()
 // 定义变量内容
 const state = reactive({
   ruleForm: {
-    mobile: '13122223333',
+    mobile: '',
     code: '',
     codeId: '',
   } as AuthMobileLoginInput,

+ 1 - 19
admin.ui.plus-master/src/views/admin/statement/listOfOilEngines/index.vue

@@ -132,22 +132,7 @@ const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStat
     currentPage: 1,
     pageSize: 10,
   } as PageInputFuelDispenserDto,
-  tableModel: [] as Array<FuelDispenserDto>,
-  // /**动态表头 */
-  // dynamicColumns: [
-  //   { prop: 'name', label: '加油机名称' },
-  //   { prop: 'oilCompany', label: '石油公司' },
-  //   { prop: 'gasStation', label: '加油站' },
-  //   { prop: 'serialNumber', label: '序列号' },
-  //   { prop: 'model', label: '加油机机型' },
-  //   { prop: 'gunCount', label: '加油机枪数量' },
-  //   //{ prop: ' manufacturer', label: '加油机厂商' },
-  //   { prop: 'manufactureDate', label: '出厂时间' },
-  //   { prop: 'startupDate', label: '启动时间' },
-  //   { prop: 'installationDate', label: '安装时间' },
-  //   { prop: 'deviceStatus', label: '设备状态' },
-  //   { prop: 'onlineStatus', label: '在线状态' },
-  // ]
+  tableModel: [] as Array<FuelDispenserDto>
 })
 /**将filterModel对象成.的连接方式*/
 const flattenObject = (obj, parentKey = '') => {
@@ -202,9 +187,6 @@ const onSizeChange = () => {
 const onCurrentChange = () =>{
   init()
 }
-// const toPage = (row) => {
-//   router.push({path:`/statement/${row.id}`})
-// }
 // /**油机列表 - 列表状态 */
 // const getOilEngineStatusType = (val) => {
 //   val = String(val)