feat(部件类型、油机授权): 部件类型表单提交，油机表单修改新特性

添加部件类型表单提交组件，实现添加和编辑功能，修改表单组件可以拖动的功能

admin.ui.plus-master/.env.production

@@ -8,4 +8,4 @@ VITE_COMPRESSION = true
 VITE_PUBLIC_PATH = '/'
 
 # 线上环境接口地址
-VITE_API_URL = 'https://admin.zhontai.net'
+VITE_API_URL = 'http://ipos.biz:8070'

admin.ui.plus-master/package.json

@@ -8,7 +8,7 @@
     "dev": "vite --force",
     "build": "vite build",
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
-    "format": "npx prettier --write .",
+    "format": "px prettier --write .",
     "install:pkg": "npm install --registry https://registry.npmmirror.com",
     "gen:api": "node ./gen/gen-api"
 

admin.ui.plus-master/src/api/admin/productionManagement/ComponentTypeDto.ts

@@ -12,9 +12,9 @@ export interface ComponentGetPageDto{
   // bomNo:string | null
   bomProNo: string | null
   // bomMateNo:string | null
-  bomType: number
+  bomType: string
   // status: number
-
+  bomMateNo?: string | null
 }
 
 /** 分页信息输入 */
@@ -32,3 +32,13 @@ export interface PageInputComponentGetPageDto {
   dynamicFilter?: DynamicFilterInfo
   filter?: ComponentGetPageDto
 }
+
+/**部件表格信息*/
+export interface typeTable {
+  bomName?: string
+  bomNo?: string
+  guid?: number
+  img?: string
+  remark?: string | null
+  status: number
+}

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

@@ -52,9 +52,6 @@ export const router = createRouter({
 export function formatFlatteningRoutes(arr: any) {
   if (arr.length <= 0) return false
   for (let i = 0; i < arr.length; i++) {
-    // if(process.env.NODE_ENV === 'development'){
-    //
-    // }
     if (arr[i].children) {
       arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1))
     }
@@ -82,14 +79,14 @@ export function formatTwoStageRoutes(arr: any) {
         v.meta['isDynamic'] = true
         v.meta['isDynamicPath'] = v.path
       }
-      newArr[0].children.push({ ...v })
-      // 存 name 值，keep-alive 中 include 使用，实现路由的缓存
-      // 路径：/@/layout/routerView/parent.vue
-      if (newArr[0].meta?.isKeepAlive && v.meta?.isKeepAlive) {
-        cacheList.push(v.name)
-        const stores = useKeepALiveNames(pinia)
-        stores.setCacheKeepAlive(cacheList)
-      }
+        newArr[0].children.push({ ...v })
+        // 存 name 值，keep-alive 中 include 使用，实现路由的缓存
+        // 路径：/@/layout/routerView/parent.vue
+        if (newArr[0].meta?.isKeepAlive && v.meta?.isKeepAlive) {
+          cacheList.push(v.name)
+          const stores = useKeepALiveNames(pinia)
+          stores.setCacheKeepAlive(cacheList)
+        }
     }
   })
   return newArr

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

@@ -1,6 +1,6 @@
 <template>
   <div class="admin-authorize-editInfo">
-    <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" width="769px">
+    <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" draggable width="769px">
       <el-form :model="formData.editData"
                :rules="rules"
                ref="formRef"

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

@@ -3,7 +3,7 @@
   <div class="layout-pd" >
     <!--操作-->
     <el-card  shadow="hover" >
-          <el-form :model="sdkData.Filter" size="default" label-width="100px" class="mt35 mb35">
+      <el-form :model="sdkData.Filter" size="default" label-width="100px" class="mt35 mb35">
             <el-row :gutter="35">
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="油站名称">
@@ -46,11 +46,11 @@
               </el-col>
             </el-row>
           </el-form>
-        <div class="my-flex my-flex-end" style="margin: 30px 30px 0 0">
-          <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
-          <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
-        </div>
-        </el-card>
+      <div class="my-flex my-flex-end" style="margin: 30px 30px 0 0">
+        <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
+        <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
+      </div>
+    </el-card>
     <!--表格-->
     <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
         <el-table v-loading="sdkData.loading" :data="sdkData.tableModel" row-key="id" style="width: 100%">

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="admin-authorize-editInfo">
+    <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" draggable width="769px">
+      <el-form :model="formData.editData"
+               :rules="rules"
+               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="部件名称" prop="bomName">
+              <el-input v-model="formData.editData.bomName" 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="物料号" prop="bomNo">
+              <el-input v-model="formData.editData.bomNo" 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="状态" prop="status">
+              <el-input v-model="formData.editData.status" 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="备注" prop="remark">
+              <el-input v-model="formData.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></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="有效时间" prop="expiedTime">-->
+<!--              <el-date-picker-->
+<!--                v-model="formData.editData.expiedTime"-->
+<!--                type="datetime"-->
+<!--                value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--                placeholder="选择有效时间"-->
+<!--              />-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
+<!--            <el-form-item label="状态" prop="state">-->
+<!--              <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="备注" prop="remark">-->
+<!--              <el-input v-model="formData.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+        </el-row>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" size="default">取 消</el-button>
+          <el-button type="primary" @click="onSubmit" size="default">{{formData.buttonText}}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {reactive, ref, watch} from "vue";
+import {oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
+import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
+import eventBus from "/@/utils/mitt";
+import {FormRules} from "element-plus";
+import {typeTable} from "/@/api/admin/productionManagement/ComponentTypeDto";
+
+enum Form {
+  ADD,
+  UPDATE
+}
+
+/**数据对象 */
+const formData = reactive({
+  loading: false,
+  formType: Form,
+  titleText:'',
+  buttonText:'',
+  isShowDialog: false,
+  editData:{} as typeTable,
+  /**动态表头 */
+  dynamicColumns: [
+    { prop: 'bomName', label: '部件名称' },
+    { prop: 'bomNo', label: '物料号' },
+    { prop: 'remark', label: '备注' },
+    { prop: 'status', label: '状态' },
+  ],
+  options:[
+    {label:'正常',value:'正常'},
+    {label:'未授权',value:'未授权'},
+  ]
+})
+
+/**有效时间选择校验*/
+const validateDate = (rule: any, value: any, callback: any) => {
+  if(new Date(value).getTime() > Date.now()){
+    callback()
+  }else{
+    callback(new Error('选择的时间已失效'))
+  }
+}
+
+/**表单校验*/
+const rules = reactive<FormRules>({
+  bomName: [
+    { required: true, message: '请输入部件名称', trigger: 'blur' },
+  ],
+  bomNo: [
+    { required: true, message: '请输入物料号', trigger: 'blur' },
+  ],
+  status: [
+    { required: true, message: '请输入状态', trigger: 'blur' },
+  ],
+  key: [
+    { required: true, message: '请输入设备授权码', trigger: 'blur' },
+  ],
+  expiedTime: [
+    { type: 'date', required: true, message: '请选择有效期', trigger: 'blur' },
+    { validator: validateDate, trigger: 'blur' }
+  ],
+  state: [
+    { required: true, message: '请选择状态', trigger: 'blur' },
+  ],
+})
+
+
+const formRef = ref()
+
+const openDialog = (val) => {
+  if(val){
+    formData.editData = JSON.parse(JSON.stringify(val))
+    formData.titleText = '更新部件'
+    formData.buttonText = '更新'
+    //更新操作
+    formData.formType = Form.UPDATE
+  }else {
+    formData.editData = {} as typeTable
+    formData.titleText = '添加部件'
+    formData.buttonText = '添加'
+    //添加操作
+    formData.formType = Form.ADD
+
+  }
+  formData.isShowDialog = true
+  formData.isShowDialog = true
+}
+
+const onCancel = () => {
+  formData.editData = {} as typeTable
+  formData.isShowDialog = false
+}
+
+/***监听弹窗关闭表单验证*/
+watch(() => formData.isShowDialog,(newVal) => {
+  if(newVal) formRef.value?.resetFields()
+})
+
+const onSubmit =  () => {
+  formRef.value.validate(async (valid: boolean) =>{
+    if(!valid) return
+    console.log(formData)
+  })
+}
+
+defineExpose({
+  openDialog,
+})
+</script>
+<style scoped lang="scss">
+
+</style>

admin.ui.plus-master/src/views/admin/product/type.vue

@@ -29,11 +29,17 @@
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item>
                   <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-                  <el-button v-auth="'api:admin:file:upload-file'" type="primary" icon="ele-Upload" @click="onUpload"> 上传 </el-button>
+                  <el-button type="primary" icon="ele-Delete" @click="onReset"> 重置 </el-button>
+                  <el-button type="primary" icon="ele-Plus" @click="onAdd"> 添加 </el-button>
+<!--                  <el-button v-auth="'api:admin:file:upload-file'" type="primary" icon="ele-Upload" @click="onUpload"> 上传 </el-button>-->
                 </el-form-item>
               </el-col>
             </el-form-item>
           </el-form>
+          <div class="my-flex my-flex-end" style="margin: 30px 30px 0 0">
+            <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
+            <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
+          </div>
         </el-card>
       </el-col>
       <!--表格-->
@@ -97,13 +103,13 @@
                 <el-button v-auth="'api:admin:file:delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)">删除</el-button> -->
                 <el-link
                   class="my-el-link mr12 ml12"
-                  @click="$router.push(`/product/${row.guid}`)"
+                  @click="editTableData(row)"
                   type="primary"
                   icon="ele-edit"
                   size="small"
                   :underline="false"
                   target="_blank"
-                >详情</el-link>
+                >编辑</el-link>
               </template>
             </el-table-column>
           </el-table>
@@ -123,14 +129,12 @@
         </el-card>
       </el-col>
     </el-row>
-
-
-
+    <EditDialog ref="editDialogRef" />
   </div>
 </template>
 
 <script lang="ts" setup name="admin/product/bom">
-import { ref, reactive, onMounted, onBeforeMount, computed } from 'vue'
+import {ref, reactive, onMounted, onBeforeMount, computed, defineAsyncComponent} from 'vue'
 import { ComponentTypeApi } from '/@/api/admin/productionManagement/ComponentType'
 import dayjs from 'dayjs'
 import eventBus from '/@/utils/mitt'
@@ -142,7 +146,10 @@ import {ComponentGetPageDto} from "/@/api/admin/productionManagement/ComponentTy
 
 // const { proxy } = getCurrentInstance() as any
 
+/**引入组件*/
+const EditDialog = defineAsyncComponent(() => import('./components/form-edit.vue'))
 
+const editDialogRef = ref()
 
 const fileUploadRef = ref()
 
@@ -155,7 +162,7 @@ const state = reactive({
     bomType: '',
     bomName: '',
     bomProNo: '',
-    // bomMateNo: '',
+    bomMateNo: '',
   } as ComponentGetPageDto,
   total: 0,
   pageInput: {
@@ -198,6 +205,7 @@ const getInitialIndex = (imgUrl: string) => {
   return previewImglist.value.indexOf(imgUrl)
 }
 
+/**查询*/
 const onQuery = async () => {
   state.loading = true
   const res = await new ComponentTypeApi().getPage({ ...state.pageInput, filter: state.filterModel }).catch(() => {
@@ -209,6 +217,30 @@ const onQuery = async () => {
   state.loading = false
 }
 
+/**重置*/
+const onReset = () => {
+  resetSearchForm()
+  onQuery()
+}
+
+/**重置检索的表单*/
+const resetSearchForm = () => {
+  state.filterModel.bomType = ''
+  state.filterModel.bomName = ''
+  state.filterModel.bomProNo = ''
+  state.filterModel.bomMateNo = ''
+}
+
+/**添加*/
+const onAdd = () => {
+  editDialogRef.value.openDialog()
+}
+
+/**编辑弹窗 */
+const editTableData = (row) => {
+  editDialogRef.value.openDialog(row)
+}
+
 const onSizeChange = (val: number) => {
   state.pageInput.pageSize = val
   onQuery()
@@ -219,9 +251,9 @@ const onCurrentChange = (val: number) => {
   onQuery()
 }
 
-const onUpload = () => {
-  fileUploadRef.value.open()
-}
+// const onUpload = () => {
+//   fileUploadRef.value.open()
+// }
 
 //const onDelete = (row: FileGetPageOutput) => {
 // proxy.$modal