feat: table-pro 組件新增筛选表单功能

src/components/TableProV2/index.tsx

@@ -2,154 +2,17 @@ import {
   TableColumnProps, Table, Row, Col, Space, Tooltip, Dropdown, Menu,
   Button, DropdownButton, PaginationProps
 } from 'ant-design-vue'
-import { DownOutlined } from '@ant-design/icons-vue'
+import { DownOutlined, CheckOutlined } from '@ant-design/icons-vue'
 import {
   PropType, computed, defineComponent, reactive, ref, defineEmits, FunctionalComponent,
   onMounted,
-  toRefs
+  toRefs,
+  watch
 } from 'vue'
 
 /**
  * @description Table Pro 超级table 将各种业务与操作融合起来
  */
-
-interface Props {
-  columns: TableColumnProps[],
-  pagination: PaginationProps | false
-  request: {
-    get: (record: any) => {data, sum},
-    params: any
-  },
-  easy: boolean
-}
-
-// const TablePro: FunctionalComponent<Props> = (props) => {
-//   const { request, easy, columns } = props
-
-//   const emits = defineEmits(['add'])
-
-//   const loading = ref<boolean>(false)
-
-//   const columnsPro = ref<(TableColumnProps & {hidden: boolean}) []>(columns.map(column => ({ ...column, hidden: false })))
-
-//   const columnsFilter = computed(() => columnsPro.value.filter(column => !column.hidden))
-
-//   const rowCustomized = computed(() => columns.map(item => ({ title: item.title, key: item.key })))
-
-//   const pagination = reactive<PaginationProps>(Object.assign({}, {
-//     current: 1,
-//     pageSize: 10,
-//     total: 0,
-//     onChange: (page: number, pageSize: number) => onChangePage(page, pageSize)
-//   }, typeof props.pagination === 'boolean' ? {} : { ...props.pagination }))
-
-//   const dataSource = ref([])
-
-//   const opraMeun = (
-//     <Menu>
-//       <Menu.item key={0} onClick={emits('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 reload = () => dispatchRequest()
-
-//   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
-//   }
-
-//   /**
-//    * 展示或者隐藏对应的column
-//    */
-//   const swicthColumn = (index: number) => {
-//     columnsPro.value[index].hidden = !columnsPro.value[index].hidden
-//   }
-
-//   const RenderOpraRow = () => {
-//     return (
-//       <>
-//         {easy
-//           ? null
-//           : <Row gutter={[8, 8]}>
-//           <Col span={12} >
-//             {/* <solt name="search" ></solt> */}
-//           </Col>
-//           <Col span={12} >
-//             <Space>
-//               <Tooltip title='列表定制' >
-//                  {/*  @click.prevent */}
-//                  {/*  <a class="ant-dropdown-link"> <menu-outlined /> </a> */}
-//                 <Dropdown
-//                   trigger={['click']}
-//                   overlay={
-//                   <Menu>
-//                     {
-//                       rowCustomized.value.map((item, index) => (
-//                         <Menu.item key={item.key} onClick={() => swicthColumn(index)} >
-//                           {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={reload}
-//                 >
-//                   <Button>刷新</Button>
-//                 </DropdownButton>
-//             </Space>
-//           </Col>
-//         </Row>}
-//       </>
-//     )
-//   }
-
-//   return (
-//       <>
-//         <RenderOpraRow />
-//         {/*       */}
-//         <Table
-//           style="margin-top: 20px;"
-//           columns={columnsFilter.value}
-//           loading={loading.value}
-//           pagination={typeof props.pagination === 'boolean' ? false : pagination}
-//           dataSource={dataSource.value}
-//         >
-//           <slot></slot>
-//           <slot name='action'></slot>
-//         </Table>
-//       </>
-//   )
-// }
-
-// export default TablePro
-
 const TablePro = defineComponent({
   props: {
     columns: {
@@ -183,7 +46,9 @@ const TablePro = defineComponent({
 
     const loading = ref<boolean>(false)
 
-    // const hiddenOpraMenu = computed(() => hiddenMeunKeys.value.length)
+    const columnsProPlanVisible = ref<boolean>(false)
+
+    const columnsPro = ref(columns.value!.map(item => ({ ...item, _active: true })))
 
     const pageSize = computed(() => typeof pagination.value === 'boolean' ? 10 : pagination.value.pageSize)
 
@@ -199,7 +64,6 @@ const TablePro = defineComponent({
       if (params?.page) {
         paginationRef.value.current = params.page
       }
-      console.log('service:', service)
       dispatchRequest()
     }
     const dispatchRequest = async () => {
@@ -220,6 +84,10 @@ const TablePro = defineComponent({
       paginationRef.value.pageSize = pageSize
     }
 
+    const changeColumnActive = (index: number) => {
+      columnsPro.value[index]._active = !columnsPro.value[index]._active
+    }
+
     onMounted(() => {
       service && dispatchRequest()
     })
@@ -242,21 +110,41 @@ const TablePro = defineComponent({
             </Col>
             <Col span={12} style={{ display: 'flex', justifyContent: 'end' }} >
               <Space>
+              <Dropdown
+                  onUpdate:open={ () => columnsProPlanVisible.value = !columnsProPlanVisible.value }
+                  open={ columnsProPlanVisible.value}
+                  overlay={
+                    <Menu
+                    >
+                      {
+                        columnsPro.value.map((column, index) =>
+                        <Menu.Item key={column.key} onClick={ () => column._active = !column._active } >
+                          <Row gutter={[8, 8]} justify='space-between' >
+                            <Col>{column.title}</Col>
+                            <Col>{column._active ? <CheckOutlined /> : null}</Col>
+                          </Row>
+                        </Menu.Item>
+                        )
+                      }
+                    </Menu>
+                  }
+                >
+                  <Button type={ hiddenMeunKeys.value.length !== 1 ? 'default' : 'primary'} >筛选 { hiddenMeunKeys.value.length !== 1 ? <DownOutlined /> : null }</Button>
+              </Dropdown>
               <Dropdown
                   trigger={['click', 'hover']}
                   overlay={ hiddenMeunKeys.value.length !== 1 ? opraMeun : null}
                 >
                   <Button onClick={() => reload()} type={ hiddenMeunKeys.value.length !== 1 ? 'default' : 'primary'} >刷新 { hiddenMeunKeys.value.length !== 1 ? <DownOutlined /> : null }</Button>
-                </Dropdown>
+              </Dropdown>
               </Space>
             </Col>
           </Row>
         </Col>
-
         <Col span={24} >
           <Table
             style={{ marginTop: '20px' }}
-            columns={columns.value}
+            columns={columnsPro.value.filter(item => item._active)}
             loading={loading.value}
             pagination={ typeof pagination === 'boolean' ? pagination : { ...paginationRef.value, onChange: onChangePage }}
             dataSource={dataSource.value}

src/pages/cvs/video/space.vue

@@ -346,7 +346,7 @@ const submit = async () => {
     : await SpaceController.add({
       ...spaceState,
       aiConfig: {
-        ...spaceState,
+        ...spaceState.aiConfig,
         configuration: configuration
       }
     })