@ethan1979/jf-lib 0.0.32

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ethan1979/jf-lib",
+  "private": false,
+  "version": "0.0.32",
+  "main": "./dist/jf-lib.es.js",
+  "typings": "./dist/components/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "test:collapsible-search": "node scripts/check-collapsible-search.mjs",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@arco-design/web-vue": "latest",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^17.0.26",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "less": "^4.1.2",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.5",
+    "vue-tsc": "^0.34.7",
+    "vite-plugin-dts": "^1.1.1",
+    "lodash": "^4.17.21",
+    "vue": "^3.2.25",
+    "@vitejs/plugin-vue-jsx": "^1.2.0",
+    "@vue/babel-plugin-jsx": "^1.1.1"
+  }
+}

package/scripts/check-collapsible-search.mjs

@@ -0,0 +1,67 @@
+import assert from 'node:assert/strict'
+import { readFile } from 'node:fs/promises'
+
+const [packageSource, searchSource, typingsSource] = await Promise.all([
+  readFile(new URL('../package.json', import.meta.url), 'utf8'),
+  readFile(
+    new URL(
+      '../src/components/v-table/components/search.vue',
+      import.meta.url
+    ),
+    'utf8'
+  ),
+  readFile(
+    new URL('../src/components/v-table/typings.d.ts', import.meta.url),
+    'utf8'
+  ),
+])
+
+const pkg = JSON.parse(packageSource)
+const checks = [
+  [
+    'declares the collapsible option',
+    () => assert.match(typingsSource, /collapsible\?: boolean/),
+  ],
+  [
+    'declares the default visible fields option',
+    () =>
+      assert.match(typingsSource, /defaultVisibleFields\?: string\[\]/),
+  ],
+  [
+    'renders the derived visible field list',
+    () => assert.match(searchSource, /in visibleForm/),
+  ],
+  [
+    'requires collapsible to be explicitly enabled',
+    () => assert.match(searchSource, /collapsible\s*===\s*true/),
+  ],
+  [
+    'exposes the expansion state',
+    () => assert.match(searchSource, /:aria-expanded="expanded"/),
+  ],
+  [
+    'renders both toggle labels',
+    () => assert.match(searchSource, /expanded \? '收起' : '展开'/),
+  ],
+  [
+    'uses the release version',
+    () => assert.equal(pkg.version, '0.0.32'),
+  ],
+]
+
+const failures = []
+for (const [name, check] of checks) {
+  try {
+    check()
+  } catch {
+    failures.push(name)
+  }
+}
+
+if (failures.length > 0) {
+  console.error('Collapsible search contract failed:')
+  failures.forEach((failure) => console.error('- ' + failure))
+  process.exitCode = 1
+} else {
+  console.log('Collapsible search contract is valid.')
+}

package/src/App.vue

@@ -0,0 +1,98 @@
+<template>
+  <div style="height:100vh">
+    <v-table :config="config" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import VTable from "./components/v-table/index.vue";
+import { TableConfig } from "./components/v-table/typings";
+// console.log('zzzz',VTable);
+const createData = () => {
+  const data: TableConfig = {
+    title:'test',
+    card:false,
+    table: {
+      data: [],
+      summary:true
+    },
+    columns: [],
+  };
+  const keys:string[]=[]
+  new Array(5).fill(0).map((_, index) => {
+    keys.push(`test${index}-1`,`test${index}-2`)
+    data.columns.push(      {
+        title: `test${index}`,
+        dataIndex: `test${index}`,
+        children: [
+          {
+            title: `test${index}-1`,
+            dataIndex: `test${index}-1`,
+            width:120,
+            form:true
+          },
+          {
+            title: `test${index}-2`,
+            dataIndex: `test${index}-2`,
+            width:120,
+            form:true
+          },
+        ],
+      },)
+    // console.log("index", index);
+    // data.table.data
+  });
+  keys.forEach(()=>{
+    const obj:{[key:string]:number}={}
+    keys.forEach(key=>{
+      obj[key]=Math.floor(Math.random()*100)
+    })
+    data.table.data.push(obj)
+  })
+  return data
+};
+
+const config = ref<TableConfig>(createData());
+setTimeout(()=>{
+  // config.value.table.summary=true
+  config.value.columns.push({
+    dataIndex:'title',
+    title:'zzz',
+    form:{
+      hiddenSearch:true
+    }
+  })
+},100)
+// setTimeout(() => {
+//   config.value=createData()
+//   // config.value = {
+//   //   table: {
+//   //     data: [
+//   //       {
+//   //         test: 1,
+//   //         test2: 2,
+//   //       },
+//   //     ],
+//   //   },
+//   //   columns: [
+//   //     {
+//   //       title: "test1",
+//   //       dataIndex: "test1",
+//   //       children: [
+//   //         {
+//   //           title: "test",
+//   //           dataIndex: "test",
+//   //         },
+//   //         {
+//   //           title: "test2",
+//   //           dataIndex: "test2",
+//   //         },
+//   //       ],
+//   //     },
+//   //   ],
+//   // };
+// }, 1000);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/index.ts

@@ -0,0 +1,18 @@
+// import VTable from './v-table/index.vue'
+
+const NAV_HEIGHT = 60
+
+const getContainerHeight = () => {
+  const { innerHeight } = window
+  const height = innerHeight - NAV_HEIGHT - 32
+  window.containerHeight = height
+  document.body.style.setProperty('--container-height', `${height}px`)
+}
+getContainerHeight()
+window.addEventListener('resize', () => getContainerHeight())
+
+// export default {
+//   VTable
+// }
+
+export {default as VTable} from './v-table/index.vue'

package/src/components/v-table/components/content/components/operations.vue

@@ -0,0 +1,119 @@
+<template>
+  <span class="column-operations">
+    <template v-if="extendRender && props.extendPostion === 'left'">
+      <component :is="extendRender" />
+    </template>
+    <a-button
+      v-if="!updateButton?.hidden"
+      type="text"
+      :disabled="updateButton?.disabled"
+      @click="updateData"
+      >编辑</a-button
+    >
+    <template v-if="extendRender && props.extendPostion === 'center'">
+      <component :is="extendRender" />
+    </template>
+    <a-popconfirm content="确定要删除此项内容吗" @ok="deleteData">
+      <a-button
+        v-if="!deleteButton?.hidden"
+        type="text"
+        status="danger"
+        :disabled="deleteButton?.disabled"
+        >删除</a-button
+      >
+    </a-popconfirm>
+    <template v-if="extendRender && props.extendPostion === 'right'">
+      <component :is="extendRender" />
+    </template>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, h, onMounted, toRefs } from 'vue'
+import {
+  CellRenderFN,
+  OperationsButtonConfig,
+  TableConfig,
+} from '@/components/v-table/typings'
+import { BaseObj } from '../../../../../types/global'
+import { TableColumnData } from '@arco-design/web-vue';
+
+export interface ColumnData {
+  record: BaseObj
+  column: TableColumnData
+  rowIndex: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    config: TableConfig
+    columnData: ColumnData
+    extend?: CellRenderFN
+    extendPostion?: 'center' | 'left' | 'right'
+    updateButton?: OperationsButtonConfig
+    deleteButton?: OperationsButtonConfig
+  }>(),
+  {
+    extendPostion: 'center',
+  }
+)
+
+const emit = defineEmits(['updateData', 'deleteData'])
+
+const { config, columnData, extend } = toRefs(props)
+
+const extendRender = computed(() => {
+  if (!columnData) return false
+  const { record, column, rowIndex } = columnData?.value as ColumnData
+  return () =>
+    extend?.value ? extend.value(record, column, rowIndex) : h('span')
+  // return false
+})
+
+const updateData = async () => {
+  if (typeof props.updateButton?.onClick === 'function') {
+    const result = await props.updateButton?.onClick(columnData?.value?.record)
+    if (result === false) return
+  }
+  emit('updateData', columnData?.value?.record)
+}
+
+const deleteData = async () => {
+  if (typeof props.deleteButton?.onClick === 'function') {
+    const result = await props.deleteButton?.onClick(columnData?.value?.record)
+    if (result === false) return
+  }
+  emit('deleteData', columnData?.value?.record)
+}
+
+onMounted(() => {
+  const columns = config?.value?.columns
+  if (!columns) return
+  const dataIndex = columnData?.value?.column.dataIndex
+  for (let i = 0; i < columns.length; i += 1) {
+    if (columns[i].dataIndex === dataIndex) {
+      const column = columns[i]
+      if (column.titleRender) return
+      const { title } = column
+      column.titleRender = () =>
+        h(
+          'span',
+          {
+            style: {
+              marginLeft: '6px',
+            },
+          },
+          title
+        )
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.column-operations {
+  .arco-btn-size-medium {
+    padding: 0 6px;
+  }
+}
+</style>

package/src/components/v-table/components/content/index.vue

@@ -0,0 +1,295 @@
+<script lang="tsx">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import {
+    computed,
+    defineComponent,
+    h,
+    inject,
+    nextTick,
+    onMounted,
+    onUnmounted,
+    PropType,
+    Ref,
+    ref,
+    toRefs,
+    VNode,
+    // watch,
+  } from 'vue'
+  import type _Table from '@arco-design/web-vue/es/table'
+  // import type _TableColumn from '@arco-design/web-vue/es/table/table-column'
+  import {
+    CellComponents,
+    CellRenderFN,
+    Columns,
+    OperationsProps,
+    TableConfig,
+  } from '../../typings'
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import operations from './components/operations.vue'
+  import { BaseObj } from '../../../../types/global'
+  import { setSelectedRowKeys } from '../../util'
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import ModalForm from '../modal-form.vue'
+  import { Table, TableColumn, TableColumnData } from '@arco-design/web-vue'
+  import { omit } from 'lodash'
+
+  export default defineComponent({
+    props: {
+      config: {
+        type: Object as PropType<TableConfig>,
+      },
+    },
+    setup(props, { emit, expose }) {
+      const components = { operations }
+
+      // type Table = InstanceType<typeof _Table>;
+
+      // const props = defineProps({
+      //   config: Object as PropType<TableConfig>,
+      // });
+
+      // const emit = defineEmits(["update", "deleteData", "get"]);
+
+      const tableRef = ref<InstanceType<typeof Table>>()
+        expose({tableRef})
+      const { config } = toRefs(props)
+
+      const TABLE_BASE_CONFIG: typeof Table['$props'] = {
+        pagination: {
+          current: 1,
+          showPageSize: true,
+          total: config?.value?.table?.data?.length || 0,
+          pageSize: 30,
+          showTotal: true,
+          showJumper: true,
+        },
+        rowSelection: {
+          type: 'checkbox',
+          showCheckedAll: true,
+          selectedRowKeys: [],
+        },
+      }
+
+      const columns = computed(() => {
+        return config?.value?.columns
+      })
+
+      const setPagination = (obj: BaseObj) => {
+        if (typeof config?.value?.table.pagination === 'object') {
+          config.value.table.pagination = {
+            ...config.value.table.pagination,
+            ...obj,
+          }
+        }
+      }
+      const pageChange = (current: number) => {
+        setPagination({ current })
+        emit('get')
+      }
+      const pageSizeChange = (pageSize: number) => {
+        setPagination({ pageSize })
+        setPagination({ current: 1 })
+        emit('get')
+      }
+
+      // const selectedRowKeys = inject<Ref<string[] | undefined>>('selectedRowKeys')
+      const selectionChange = (ids: string[] | undefined) => {
+        setSelectedRowKeys((config as Ref<TableConfig>).value, ids)
+        // if (selectedRowKeys) selectedRowKeys.value = ids
+      }
+
+      const operationsRender = computed(() => {
+        let render = false
+        columns?.value?.forEach((column) => {
+          if (
+            typeof column.cellRender === 'object' &&
+            column.cellRender.type === 'operations'
+          ) {
+            render = true
+          }
+        })
+        return render
+      })
+      const getProps = (
+        props:
+          | OperationsProps
+          | ((params: BaseObj) => OperationsProps)
+          | undefined,
+        params: any
+      ) => {
+        if (typeof props === 'function') return props(params)
+        return {
+          ...props,
+        }
+      }
+
+      const visible = ref(false)
+      const renderParams = ref<BaseObj>({})
+      const modalForm = ref<{
+        formData: {
+          [x: string]: unknown
+        }
+      }>()
+      const updateData = (params: BaseObj) => {
+        renderParams.value = params
+        const formData = modalForm.value?.formData as {
+          [x: string]: unknown
+        }
+        Object.keys(formData).forEach((key) => {
+          // console.log(' params[key]', params[key], key, formData)
+          formData[key] = params[key]
+        })
+        // 主键,一般为id
+        const rowKey = config?.value?.table.rowKey
+        if (typeof rowKey === 'string') formData[rowKey] = params[rowKey]
+        visible.value = true
+      }
+      const deleteData = (params: BaseObj) => {
+        // console.log('????')
+        emit('deleteData', { ...params })
+      }
+
+      const tableId = inject<string>('tableId')
+
+      const RenderColumns = (columns: Columns<BaseObj>[]) => {
+        return columns.map((column) => {
+          const slot: {
+            title?: () => VNode
+            cell?: any
+          } = {}
+          if (column.titleRender) slot.title = column.titleRender
+          if (!column.children && column.cellRender) {
+            if (typeof column.cellRender === 'function') {
+              slot.cell = column.cellRender
+            } else {
+              const component = column.cellRender as CellComponents<any>
+              slot.cell = (record: any) =>
+                h(components[component.type] as any, {
+                  config: config?.value,
+                  columnData: {
+                    ...record,
+                    // column,
+                    // rowIndex,
+                  },
+                  ...getProps(component?.props, record),
+                  onUpdateData: updateData,
+                  onDeleteData: deleteData,
+                })
+            }
+          }
+          return (
+            <TableColumn
+              v-slots={slot}
+              ellipsis={true}
+              {...(omit(column, [
+                'cellRender',
+                'form',
+                'hidden',
+                'children',
+                'titleRender',
+              ]) as any)}
+              key={column.dataIndex ?? Date.now()}
+            >
+              {column.children && RenderColumns(column.children)}
+            </TableColumn>
+          )
+        })
+      }
+
+      onMounted(() => {
+        if (config?.value) {
+          if (!config.value.batchDelete)
+            delete (TABLE_BASE_CONFIG as any).rowSelection
+          config.value.table = {
+            ...TABLE_BASE_CONFIG,
+            ...config.value.table,
+          }
+        }
+        // emit("get");
+        // setTimeout(() => resize());
+        // window.addEventListener("resize", resize);
+      })
+      // onUnmounted(() => {
+      //   // window.removeEventListener("resize", resize);
+      // });
+
+      return () => {
+        // console.log("render");
+        return (
+          <div
+            style={{
+              flex: 1,
+              overflow: 'hidden',
+            }}
+          >
+            <Table
+              // 无实际意义，仅为激活表格的flex布局，请勿更改！！！
+              scroll={{
+                y: 100,
+              }}
+              {...omit(config.value?.table, 'v-slots')}
+              class='v-table-content'
+              onPageChange={pageChange}
+              onPageSizeChange={pageSizeChange}
+              //@ts-ignore
+              onSelectionChange={selectionChange}
+              ref={tableRef}
+              v-slots={{
+                ...(config.value?.table?.['v-slots'] || {}),
+                columns: () =>
+                  RenderColumns(
+                    columns.value?.filter((item) => !item.hidden) || []
+                  ),
+              }}
+            ></Table>
+            {operationsRender.value && (
+              <ModalForm
+                {...config.value?.table}
+                ref={modalForm}
+                title='编辑'
+                onUpdate:visible={(v:any) => (visible.value = v)}
+                visible={visible.value}
+                type='Update'
+                renderParams={renderParams.value}
+                onOkEvent={(data:any) => emit('update', data)}
+              />
+            )}
+          </div>
+        )
+      }
+    },
+  })
+</script>
+
+<style lang="less">
+  .v-table-content {
+    height: 100%;
+    .arco-spin {
+      overflow: hidden;
+      .arco-table-container {
+        flex: 1;
+        min-height: 0;
+        .arco-table-content {
+          overflow: hidden;
+          .arco-table-body {
+            flex: 1;
+            min-height: 0;
+            max-height: 100% !important;
+            height: 0;
+          }
+        }
+      }
+    }
+    // .arco-table-body {
+    //   // height: var(--v-table-height);
+    // }
+  }
+</style>
+
+<style lang="less" scoped>
+  .v-table-content {
+    :deep(.arco-table-pagination) {
+      margin-top: 16px;
+    }
+  }
+</style>