upadte: 升级vue到3.3 以期望defineComponent支持泛型的传递

.eslintrc.js

@@ -22,6 +22,8 @@ module.exports = {
     '@typescript-eslint/ban-types': 'off',
     'vue/on-parsing-error': 'off',
     'vue/no-unused-vars': 'off',
-    'no-useless-escape': 'off'
+    'no-useless-escape': 'off',
+    'no-use-before-define': 'off',
+    'vue/no-setup-props-destructure': 'off'
   }
 }

package.json

@@ -38,6 +38,7 @@
     "style-resources-loader": "^1.5.0",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0",
+    "vue-countup-v3": "^1.4.0",
     "vue-hooks-plus": "^1.6.2",
     "vue-router": "^4.0.3",
     "w3c-keyname": "^2.2.8"

src/components/StatisticsTemplate/index.vue

@@ -7,7 +7,9 @@
         :xs="12"  :sm="12"  :md="6"  :lg="8"  :xl="4"
       >
         <div class="statistic" >
-          <span class="count" :style="{color: item.color}" >{{item.value}}</span>
+          <span class="count" :style="{color: item.color}" >
+            <CountUp style="height: 64px" :end-val="item.value" :duration="duration(item.value)" />
+          </span>
           <span>{{item.unit}}</span>
         </div>
         <div class="label" >
@@ -19,11 +21,20 @@
 </template>
 <script lang='ts' setup >
 
+import CountUp from 'vue-countup-v3'
 interface IProps {
   title: string,
   list: {value: string | number, key?: string, label: string, color: string, unit: string }[]
 }
 
+const duration = (duration: number | string) => {
+  const count = Number(duration)
+  if (count < 10) return 0
+  else if (count < 100) return 2
+  else if (count < 1000) return 3
+  else if (count > 1000) return 5
+}
+
 const props = defineProps<IProps>()
 
 </script>
@@ -31,6 +42,7 @@ const props = defineProps<IProps>()
 @import '~@/styles/theme.less';
 .statistic {
   color: @sublabel-color;
+  height: 70px;
   .count {
     font-size: 48px;
     margin-right: 10px;

src/components/TableProV2/index.tsx

@@ -1,4 +1,9 @@
-import { defineComponent, ref } from 'vue'
+import {
+  TableColumnProps, Table, Row, Col, Space, Tooltip, Dropdown, Menu,
+  Button, DropdownButton, PaginationProps
+} from 'ant-design-vue'
+import { DownOutlined } from '@ant-design/icons-vue'
+import { PropType, computed, defineComponent, reactive, ref } from 'vue'
 
 // interface Methods {
 //   get: string
@@ -7,52 +12,145 @@ import { defineComponent, ref } from 'vue'
 //   del: string
 // }
 
+/**
+ * @description Table Pro 超级table 将各种业务与操作融合起来
+ */
+
+interface GenericListProps<T> {
+  dataSource: T;
+}
+
 export default defineComponent({
   name: 'table-pro-v2',
   props: {
-    methods: {
-      type: Object,
-      required: true,
-      default: () => ({
-        get: '',
-        post: '',
-        put: '',
-        del: ''
-      }),
-      validator: function (keys: 'get' | 'post' | 'put' | 'del') {
-        return keys === 'get'
-      }
-    },
     columns: {
-      type: Array,
+      type: Array as PropType<TableColumnProps[]>,
       default: () => [],
       required: true
     },
     pagination: {
-      type: Object || false,
+      type: Object as PropType<PaginationProps> || false,
       required: true,
-      default: false
-      // validator: function (keys: 'page' | 'pageSize' | 'total' | 'delete') {
-      //   return keys === 'page'
-      // }
+      default: () => {
+        return {
+          page: 1,
+          pageSize: 10,
+          total: 0
+        }
+      }
+    },
+    request: {
+      type: Object as PropType<{get: Function, params: Object}>,
+      default: () => {
+        return {
+          params: {},
+          get: () => {}
+        }
+      }
     }
   },
+  emits: ['reload', 'add'],
   setup (props, ctx) {
-    const loading = ref<boolean>(false)
-    // const { get, post, put, del } = props.methods
+    const { request, columns } = props
+
+    const columnsPro = ref<TableColumnProps & {hidden: boolean} []>(columns.map(column => ({ ...column, hidden: false })))
+
+    const rowCustomized = computed(() => props.columns.map(item => ({ title: item.title, key: item.key })))
+
+    const loading = ref<Boolean>(false)
+
+    const dataSource = ref([])
+
+    const pagination = reactive<PaginationProps>(Object.assign({}, {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      onChange: (page: number, pageSize: number) => onChangePage(page, pageSize)
+    }, { ...props.pagination }))
+
+    const opraMeun = (
+      <Menu>
+        <Menu.item key={0} onClick={ctx.emit('add')} > 新增 </Menu.item>
+        <Menu.item key={2} onClick={() => exportExcel()}> 导出 </Menu.item>
+        <Menu.item key={3} onClick={() => pure()}> 纯净 </Menu.item>
+      </Menu>
+    )
+
+    const exportExcel = () => {}
+
+    const pure = () => {}
+
+    const onChangePage = (page: number, pageSize: number) => {
+      pagination.current = page
+      pagination.pageSize = pageSize
+      dispatchRequest()
+    }
+
+    const dispatchRequest = async () => {
+      loading.value = true
+      const { data, sum } = await request.get({
+        ...request.params,
+        page: pagination.current,
+        pageSize: pagination.pageSize
+      })
+      loading.value = false
+      pagination.total = sum
+      dataSource.value = data
+    }
+
+    const init = () => {
+
+    }
+
+    init()
+
     return () => (
       <>
-        <a-row>
-          <a-col></a-col>
-          <a-col></a-col>
-        </a-row>
-        {/* <a-table
-          columns={props.columns}
+        <Row gutter={[8, 8]}>
+          <Col>
+            <solt name="search" ></solt>
+          </Col>
+          <Col>
+            <Space>
+              <Tooltip title='列表定制' >
+                 {/*  @click.prevent */}
+                 {/*  <a class="ant-dropdown-link"> <menu-outlined /> </a> */}
+                <Dropdown
+                  trigger={['click']}
+                  overlay={
+                  <Menu>
+                    {
+                      rowCustomized.value.map(item => (
+                        <Menu.item key={item.key}>
+                          {item.title}
+                        </Menu.item>
+                      ))
+                    }
+                  </Menu>}
+                >
+                </Dropdown>
+              </Tooltip>
+                 {/*  @click.prevent */}
+                 {/*  <a class="ant-dropdown-link"> <menu-outlined /> </a> */}
+                <DropdownButton
+                  trigger={['click']}
+                  overlay={opraMeun}
+                  icon={<DownOutlined />}
+                  onClick={dispatchRequest}
+                >
+                  <Button>操作</Button>
+                </DropdownButton>
+            </Space>
+          </Col>
+        </Row>
+        <Table
+          columns={columns}
           loading={loading}
-          pagination={props.pagination}
+          pagination={pagination}
+          dataSource={dataSource}
         >
-
-        </a-table> */}
+          <slot name='action'></slot>
+        </Table>
       </>
     )
   }

src/pages/Iot/model/index.vue

@@ -122,12 +122,12 @@
 import { CommonController, ModelController } from '@/controller/index'
 import { onMounted, reactive, watch } from 'vue'
 import { computed } from '@vue/reactivity'
-import { Form } from 'ant-design-vue'
+import { Form, TableColumnProps } from 'ant-design-vue'
 import { useRouter } from 'vue-router'
 import StatisticsTemplate from '@/components/StatisticsTemplate/index.vue'
 import { QuestionCircleOutlined } from '@ant-design/icons-vue'
 // question-circle-outlined
-const columns = [
+const columns: TableColumnProps[] = [
   {
     title: '产品模型名称',
     dataIndex: 'modelLabel',