feat: from pro 组件

src/components/FormPro/index.vue

@@ -1,9 +1,41 @@
 <template>
+  <a-form
+    :model="formState"
+    name="basic"
+    :label-col="{ span: 8 }"
+    :wrapper-col="{ span: 16 }"
+    autocomplete="off"
+    @finish="onFinish"
+    @finishFailed="onFinishFailed"
+  >
+    <a-form-item>
 
+    </a-form-item>
+  </a-form>
 </template>
 
 <script lang='ts' setup >
+import { reactive } from 'vue'
 
+export interface FormProProps {
+  rules: {required: boolean, message: string} | boolean,
+  type: COMMON.COMPONENTS.ComType,
+  request: () => {
+    id?: string,
+    name?: string,
+    value: any,
+    key: any
+  }
+ [key: string]: any
+}
+
+const props = defineProps<FormProProps>()
+
+const formState = reactive(props)
+
+const emit = defineEmits(['onFinish'])
+
+const onFinish = () => emit('onFinish')
 </script>
 
 <style lang="less" scope >

src/components/TablePro/index.vue

@@ -4,7 +4,7 @@
         <a-row justify="end">
             <a-col>
               <a-space>
-                <a-button type="primary" >
+                <a-button type="primary" @click="openModel('add')" >
                   新增
                   <template #icon>
                     <plus-outlined />
@@ -19,10 +19,10 @@
                 <!-- 小组件 -->
 
                 <a-tooltip>
-                  <template #title>刷新</template>
-                  <reload-outlined />
+                  <template #title >刷新</template>
+                  <reload-outlined v-if="!state.loading"  @click="reload"/>
+                  <loading-outlined v-else />
                 </a-tooltip>
-                <!--  -->
               </a-space>
             </a-col>
         </a-row>
@@ -59,11 +59,13 @@
     </a-row>
 
     <!-- 弹窗 -->
-    <model-pro
+    <modal-pro
+      :label="props.modalTitle"
       :visible="state.modelVisible"
+      @cancel="closeModel"
     >
 
-    </model-pro>
+    </modal-pro>
 </template>
 
 <script lang="ts" setup >
@@ -71,7 +73,7 @@ import { useCopy } from '@/hooks/dom'
 import { ColumnsType } from 'ant-design-vue/lib/vc-table/interface'
 import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
 import { reactive, watch } from 'vue'
-import { PlusOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons-vue'
+import { PlusOutlined, DownloadOutlined, ReloadOutlined, LoadingOutlined } from '@ant-design/icons-vue'
 /**
  * formItemProps
  * rules 校验
@@ -95,7 +97,8 @@ export interface TablePropPorps extends TableProps {
   request: (params: any) => any
   del: (id: string) => void
   params: any,
-  columns: ColumnsType & {children: ColumnsChildren}
+  columns: ColumnsType & {children: ColumnsChildren},
+  modalTitle: string
 }
 
 const props = defineProps<TablePropPorps>()
@@ -108,7 +111,8 @@ const state = reactive({
     total: 0,
     pageSize: 10
   },
-  modelVisible: false
+  modelVisible: false,
+  opraState: 'add'
 })
 
 const handleTableChange = (pag: { pageSize: number; current: number }) => {
@@ -140,6 +144,18 @@ const handleAction = (column: ColumnsChildren, record: any) => {
   }
 }
 
+// `const reload = () => request()` 正在定义一个名为 `reload` 的函数，该函数调用 `request` 函数。该函数用于在用户点击“刷新”按钮时重新加载表格数据。
+const reload = () => request()
+
+const openModel = (type: 'add' | 'update') => {
+  state.modelVisible = true
+  state.opraState = type
+}
+
+const closeModel = () => {
+  state.modelVisible = false
+}
+
 watch(
   () => props.request,
   () => request(),

src/main.ts

@@ -4,8 +4,9 @@ import router from './router'
 import '@/router/before'
 import { createPinia } from 'pinia'
 import antd from 'ant-design-vue'
-// import '~ant-design-vue/dist/antd.less'
-import '@/styles/index.less'
+// import 'ant-design-vue/dist/antd.less'
+// import '@/styles/index.less'
+import 'ant-design-vue/dist/antd.css'
 import UsePro from './utils/UsePro'
 import { assets } from '@/utils/static'
 

src/pages/Iot/model/index.vue

@@ -2,6 +2,7 @@
 
   <a-card>
     <table-pro
+      modalTitle="模型"
       :request="ModelController.page"
       :del="ModelController.del"
       :params="{
@@ -24,12 +25,10 @@ const columns = [
     dataIndex: 'modelLabel',
     key: 'modelLabel',
     formItemProps: {
-      rules: [
-        {
-          required: true,
-          message: '此项为必填项'
-        }
-      ],
+      rules: {
+        required: true,
+        message: '此项为必填项'
+      },
       request: async () => {
         return await CommonController.getTransport()
       },

src/type/common.d.ts

@@ -13,4 +13,8 @@ declare namespace COMMON {
       }
     }
 
+    namespace COMPONENTS {
+      type ComType = 'input' | 'select' | 'datepick'
+    }
+
 }

src/utils/UsePro.ts

@@ -1,6 +1,7 @@
 import ModalPro from '@/components/ModalPro/index.vue'
 import SiderPro from '@/components/SiderPro/index.vue'
 import TablePro from '@/components/TablePro/index.vue'
+import FormPro from '@/components/FormPro/index.vue'
 import RowPro from '@/components/RowPro/index.vue'
 import ColPro from '@/components/ColPro/index.vue'
 import { App } from 'vue'
@@ -9,6 +10,7 @@ export default function (app: App) {
   app.component('modal-pro', ModalPro)
   app.component('sider-pro', SiderPro)
   app.component('table-pro', TablePro)
+  app.component('form-pro', FormPro)
   app.component('l-row', RowPro)
   app.component('l-col', ColPro)
 }

vue.config.js

@@ -8,13 +8,13 @@ const proxy = require('./config/proxy.ts')
 console.log(proxy.dev)
 module.exports = defineConfig({
   transpileDependencies: true,
-  css: {
-    loaderOptions: {
-      less: {
-        javascriptEnabled: true
-      }
-    }
-  },
+  // css: {
+  //   loaderOptions: {
+  //     less: {
+  //       javascriptEnabled: true
+  //     }
+  //   }
+  // },
   devServer: {
     proxy: proxy.dev
   }