feat(对接后端油机sdk授权页面api): 接口对接

成功对接了油机SDK授权页面后端API，实现了分页查询，添加和修改功能，未实现表单提交的校验功能。

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

@@ -1,5 +1,10 @@
 import {ContentType, HttpClient, RequestParams,} from "/@/api/admin/http-client";
-import {oilSdkAuthorDtoResult, oilSdkAuthorPostPageDto} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
+import {
+  oilSdkAuthorDtoResult,
+  oilSdkAuthorPostPageDto,
+  oilSdkTableModel
+} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
+import {AxiosResponse} from "axios/index";
 
 export class OilSdkAuthorAPI<SecurityDataType = unknown> extends HttpClient<SecurityDataType>{
 
@@ -7,7 +12,7 @@ export class OilSdkAuthorAPI<SecurityDataType = unknown> extends HttpClient<Secu
  * No description
  *
  * @tags
- * @name
+ * @name getPageData
  * @summary 分页查询
  * @request GET:
  * @secure
@@ -22,4 +27,46 @@ export class OilSdkAuthorAPI<SecurityDataType = unknown> extends HttpClient<Secu
      query:query,
      ...params
    })
+
+  /**
+   * No description
+   *
+   * @tags
+   * @name updateForm
+   * @summary 添加授权
+   * @request POST:
+   * @secure
+   */
+  addForm = (data:oilSdkTableModel, params: RequestParams = {}) =>
+    this.request<AxiosResponse,any>({
+        path:'/api/app/fueiling-sdk-auth/add',
+        method: 'POST',
+        body: data,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }
+    )
+
+  /**
+  * No description
+  *
+  * @tags
+  * @name updateForm
+  * @summary 更新授权
+  * @request PUT:
+  * @secure
+  */
+  updateForm = (data:oilSdkTableModel, params: RequestParams = {}) =>
+    this.request<AxiosResponse,any>({
+        path:'/api/app/fueiling-sdk-auth/update',
+        method: 'PUT',
+        body: data,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+    }
+    )
 }

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

@@ -38,11 +38,13 @@ export interface oilSdkTableModel {
   /**id*/
   guid: number,
   /**日期*/
-  date: string,
+  date?: string,
   /**加油站*/
   oilStation: string | null,
   /**项目名称*/
-  projectName: string | null,
+  projectName?: string | null,
+  /**项目名称*/
+  project?: string | null,
   /**设备SN号*/
   sn: string | null,
   /**密钥key*/
@@ -50,9 +52,9 @@ export interface oilSdkTableModel {
   /**过期时间*/
   expiedTime: string | null,
   /**状态*/
-  state: string | null,
+  state: string | null | number,
   /**备注*/
-  "remark": string | null
+  remark: string | null
 }
 
 /**

admin.ui.plus-master/src/router/backEnd.ts

@@ -139,7 +139,6 @@ export async function getBackEndControlRoutes() {
         props: menu?.path?.includes(':')
       })
     })
-    console.log(menus)
     return listToTree(menus)
   } else {
     return []

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

@@ -1,42 +1,32 @@
 <template>
   <div class="admin-authorize-editInfo">
-    <el-dialog :title="state.title" v-model="state.isShowDialog" width="769px">
-      <el-form :model="state.editData" size="default" label-width="80px">
+    <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" width="769px">
+      <el-form :model="formData.editData" ref="formRef" v-loading="formData.loading" size="default" label-width="80px">
         <el-row :gutter="35">
-          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="日期">
-              <el-date-picker
-                v-model="state.editData.date"
-                type="datetime"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="Select date and time"
-              />
-            </el-form-item>
-          </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="油站名称">
-              <el-input v-model="state.editData.oilStation" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-input v-model="formData.editData.oilStation" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="项目名称">
-              <el-input v-model="state.editData.projectName" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-input v-model="formData.editData.projectName" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="设备SN">
-              <el-input v-model="state.editData.sn" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-input v-model="formData.editData.sn" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="授权码">
-              <el-input v-model="state.editData.key" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-input v-model="formData.editData.key" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="有效时间">
               <el-date-picker
-                v-model="state.editData.expiedTime"
+                v-model="formData.editData.expiedTime"
                 type="datetime"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 placeholder="Select date and time"
@@ -45,12 +35,19 @@
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="状态">
-              <el-input v-model="state.editData.state" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-select v-model="formData.editData.state" class="m-2" placeholder="选择状态" >
+                <el-option
+                  v-for="item in formData.options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="备注">
-              <el-input v-model="state.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>
+              <el-input v-model="formData.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -58,7 +55,7 @@
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="onCancel" size="default">取 消</el-button>
-          <el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
+          <el-button type="primary" @click="onSubmit" size="default">{{formData.buttonText}}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -66,12 +63,22 @@
 </template>
 
 <script setup lang="ts">
-import {reactive} from "vue";
+import { reactive, ref } from "vue";
 import {oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
+import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
+import eventBus from "/@/utils/mitt";
+
+enum Form {
+  ADD,
+  UPDATE
+}
 
 /**数据对象 */
-const state = reactive({
-  title:'',
+const formData = reactive({
+  loading: false,
+  formType: Form,
+  titleText:'',
+  buttonText:'',
   isShowDialog: false,
   editData:{} as oilSdkTableModel,
   /**动态表头 */
@@ -81,29 +88,68 @@ const state = reactive({
     { prop: 'sn', label: '设备SN号' },
     { prop: 'key', label: '授权码' },
     { prop: 'expiedTime', label: '过期时间' },
-    { prop: 'state', label: '状态' },
+    { prop: 'formData', label: '状态' },
     { prop: 'remark', label: '备注' },
   ],
+  options:[
+    {label:'正常',value:'正常'},
+    {label:'未授权',value:'未授权'},
+  ]
 })
 
+const formRef = ref()
+
 const openDialog = (val) => {
   if(val){
-    state.editData = JSON.parse(JSON.stringify(val))
-    state.title = '更新授权'
+    formData.editData = JSON.parse(JSON.stringify(val))
+    formData.titleText = '更新授权'
+    formData.buttonText = '更新'
+    //更新操作
+    formData.formType = Form.UPDATE
   }else {
-    state.editData = {} as oilSdkTableModel
-    state.title = '新增授权'
+    formData.editData = {} as oilSdkTableModel
+    formData.titleText = '添加授权'
+    formData.buttonText = '添加'
+    //添加操作
+    formData.formType = Form.ADD
+
   }
-  state.isShowDialog = true
+  formData.isShowDialog = true
+  formData.isShowDialog = true
 }
 
 const onCancel = () => {
-  state.editData = {} as oilSdkTableModel
-  state.isShowDialog = false
+  formData.editData = {} as oilSdkTableModel
+  formData.isShowDialog = false
 }
 
-const onSubmit = () => {
-  console.log(state.editData)
+const onSubmit =  () => {
+  formRef.value.validate(async (valid: boolean) =>{
+    if(!valid) return
+
+    formData.loading = true
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { projectName, state, ...newData} = formData.editData
+    let res = {} as any
+    if(formData.formType === Form.UPDATE){
+      res = await new OilSdkAuthorAPI().updateForm({project: formData.editData.projectName, state: formData.editData.state === '正常' ? 1 : 0 ?? 0,  ...newData},{ showSuccessMessage: true }).catch(() => {
+        formData.loading = false
+      })
+    }else if(formData.formType === Form.ADD){
+      res = await new OilSdkAuthorAPI().addForm({project: formData.editData.projectName, state: formData.editData.state === '正常' ? 1 : 0 ?? 0,  ...newData},{ showSuccessMessage: true }).catch(() => {
+        formData.loading = false
+      })
+    }else {
+      formData.loading = false
+      return
+    }
+    if(res?.success){
+      eventBus.emit('refreshView')
+      formData.isShowDialog = false
+    }
+    formData.loading = false
+  })
+
 }
 
 defineExpose({

admin.ui.plus-master/src/views/admin/authorize/index.vue

@@ -99,10 +99,11 @@
 </template>
 
 <script setup lang="ts" name="authorize/fuelingsdk">
-import {defineAsyncComponent, onMounted, reactive, ref, watch} from "vue";
+import {defineAsyncComponent, onMounted, reactive, ref, watch, onBeforeMount} from "vue";
 import {OilSdkAuthorDto, oilSdkFilterModel, oilSdkTableModel} 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";
 
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('./components/form-edit.vue'))
@@ -154,7 +155,7 @@ const sdkData = reactive({
 const init = async () => {
   sdkData.loading = true
   const query = flattenObject({ Filter: sdkData.Filter})
-  const res = await new OilSdkAuthorAPI().getPageData({...sdkData.pageInput, ...query}).catch(() => {
+  const res:any = await new OilSdkAuthorAPI().getPageData({...sdkData.pageInput, ...query}).catch(() => {
     sdkData.loading = false
   })
   sdkData.tableModel = res?.data?.list ?? []
@@ -164,6 +165,14 @@ const init = async () => {
 
 onMounted(() => {
   init()
+  eventBus.off('refreshView')
+  eventBus.on('refreshView', async () => {
+    init()
+  })
+})
+
+onBeforeMount(() => {
+  eventBus.off('refreshView')
 })
 
 /**