@yidun/antd-super-table 0.0.7 → 0.0.9

package/example/index.vue

@@ -0,0 +1,315 @@
+<script setup lang="ts">
+// 表格组件示例
+import { onMounted, ref } from 'vue'
+import { Modal } from 'ant-design-vue'
+import Mock from 'mockjs'
+import { useLocalStorage } from '@vueuse/core'
+// import SuperTable from '../src/index'
+import SuperTable from '../'
+
+import { createTableColumns } from './tableColumns'
+import { createFormItems } from './formItems'
+
+const tableRef = ref<InstanceType<typeof SuperTable>>()
+// 查询条件配置
+const formItems: any = createFormItems()
+
+// 表头配置
+const tableColumns: any = createTableColumns({
+  onDelete,
+})
+
+const setting = useLocalStorage('super-table-example-config', {
+  enableScene: false,
+  enableTableConfig: false,
+  sortable: false,
+  showRefreshButton: false,
+  showSceneAddonBefore: false,
+  showSceneAddonAfter: false,
+  showExtra: false,
+  showTableHead: false,
+  showToolBar: false,
+  showTableFoot: false,
+  formItemColSpan: 6,
+})
+
+// 表单项变更事件处理
+function onFormItemChange(name: string, value: any, formItem: any, formOperations: any, tableOperations: any) {
+  console.log('form-item-change 事件触发:', {
+    name,
+    value,
+    formItem,
+    formOperations: {
+      // 验证表单操作方法是否可用
+      hasGetFormItem: typeof formOperations.getFormItem === 'function',
+      hasSetFormItem: typeof formOperations.setFormItem === 'function',
+      hasGetFormValues: typeof formOperations.getFormValues === 'function',
+      hasSetFormValues: typeof formOperations.setFormValues === 'function',
+      hasGetFormValue: typeof formOperations.getFormValue === 'function',
+      hasSetFormValue: typeof formOperations.setFormValue === 'function',
+    },
+    tableOperations: {
+      // 验证表格操作方法是否可用
+      hasGetTableData: typeof tableOperations.getTableData === 'function',
+      hasSetTableData: typeof tableOperations.setTableData === 'function',
+      hasSetTableDataItem: typeof tableOperations.setTableDataItem === 'function',
+    },
+  })
+
+  // 演示使用表单操作方法
+  if (formOperations.getFormValue) {
+    const currentValue = formOperations.getFormValue(name)
+    console.log(`当前 ${name} 的值:`, currentValue)
+  }
+
+  // 演示使用表格操作方法
+  if (tableOperations.getTableData) {
+    const tableData = tableOperations.getTableData()
+    console.log('当前表格数据条数:', tableData.length)
+  }
+}
+
+// 自定义生成中文段落
+const randomParagraph = () => Mock.mock('@cword(10, 15)、@cword(10, 20)、@cword(3, 40)。')
+
+// 数据查询方法
+async function onRequest(options: Record<string, any>) {
+  console.log('onRequest', options)
+  await new Promise(resolve => {
+    setTimeout(resolve, 300)
+  })
+  const { pageSize } = options
+
+  const imageList = [
+    'https://aliyuncdn.antdv.com/vue.png',
+    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    '',
+  ]
+  return Promise.resolve({
+    total: pageSize * 4 + 12,
+    data: Array.from({
+      length: pageSize,
+    }).map((_, index) => ({
+      id: index,
+      text: randomParagraph(),
+      textList: [randomParagraph(), randomParagraph(), randomParagraph()],
+      imageSrc: imageList[index % imageList.length],
+      imageList: Array.from({
+        length: Mock.Random.natural(0, 6),
+      }).map((_, index) => imageList[index % imageList.length]),
+    })),
+  })
+}
+
+// 删除
+function onDelete() {
+  Modal.confirm({
+    title: '提示',
+    content: '确定删除？',
+    onOk: () => {
+      console.log('删除')
+    },
+  })
+}
+
+// 运行时设置查询项,以修改select options为例
+const handleUpdateSelectOptions = () => {
+  if (!tableRef.value) return
+
+  const { setFormItem, setFormValue } = tableRef.value
+
+  // 修改可选项
+  setFormItem('select', 'props.options', [
+    {
+      label: '色情',
+      value: 100,
+    },
+    {
+      label: '涉政',
+      value: 500,
+    },
+  ])
+
+  // 修改查询详对应的值
+  setFormValue('select', 100)
+}
+
+onMounted(() => {
+  handleUpdateSelectOptions()
+
+  // 监听组件初始化完成
+  const checkInitialized = () => {
+    if (tableRef.value?.isInitialized) {
+      console.log('SuperTable 组件已初始化完成')
+    } else {
+      // 如果还没初始化完成，继续检查
+      setTimeout(checkInitialized, 100)
+    }
+  }
+  checkInitialized()
+})
+</script>
+
+<template>
+  <div>
+    <a-form
+      layout="inline"
+      :class="$style.form"
+    >
+      <a-form-item label="场景">
+        <a-switch
+          v-model:checked="setting.enableScene"
+          checked-children="开启"
+          un-checked-children="关闭"
+        />
+      </a-form-item>
+      <a-form-item label="排序">
+        <a-switch
+          v-model:checked="setting.sortable"
+          checked-children="开启"
+          un-checked-children="关闭"
+        />
+      </a-form-item>
+      <a-form-item label="刷新按钮">
+        <a-switch
+          v-model:checked="setting.showRefreshButton"
+          :disabled="!setting.enableScene"
+          checked-children="展示"
+          un-checked-children="隐藏"
+        />
+      </a-form-item>
+      <a-form-item label="配置按钮">
+        <a-switch
+          v-model:checked="setting.enableTableConfig"
+          checked-children="开启"
+          un-checked-children="关闭"
+        />
+      </a-form-item>
+      <a-form-item label="sceneAddonBefore">
+        <a-switch
+          v-model:checked="setting.showSceneAddonBefore"
+          checked-children="展示"
+          un-checked-children="隐藏"
+        />
+      </a-form-item>
+      <a-form-item label="sceneAddonAfter">
+        <a-switch
+          v-model:checked="setting.showSceneAddonAfter"
+          checked-children="展示"
+          un-checked-children="隐藏"
+        />
+      </a-form-item>
+      <a-form-item label="extra">
+        <a-switch
+          v-model:checked="setting.showExtra"
+          checked-children="展示"
+          un-checked-children="隐藏"
+        />
+      </a-form-item>
+      <a-form-item label="tableHead">
+        <a-switch
+          v-model:checked="setting.showTableHead"
+          checked-children="展示"
+          un-checked-children="隐藏"
+        />
+      </a-form-item>
+      <a-form-item label="toolBar">
+        <a-switch
+          v-model:checked="setting.showToolBar"
+          checked-children="展示"
+          un-checked-children="隐藏"
+        />
+      </a-form-item>
+      <a-form-item label="tableFoot">
+        <a-switch
+          v-model:checked="setting.showTableFoot"
+          checked-children="展示"
+          un-checked-children="隐藏"
+        />
+      </a-form-item>
+      <a-form-item label="formItemColSpan">
+        <a-radio-group v-model:value="setting.formItemColSpan">
+          <a-radio :value="4">4</a-radio>
+          <a-radio :value="6">6</a-radio>
+          <a-radio :value="8">8</a-radio>
+          <a-radio :value="12">12</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+    <super-table
+      ref="tableRef"
+      scene-type="super-table-example"
+      :form-items="formItems"
+      :columns="tableColumns"
+      :request="onRequest"
+      :sortable="setting.sortable"
+      :enable-table-config="setting.enableTableConfig"
+      :enable-scene="setting.enableScene"
+      :show-refresh-button="setting.showRefreshButton"
+      :form-item-col-span="setting.formItemColSpan"
+      :table-props="{
+        scroll: {
+          y: 600,
+        },
+      }"
+      @form-item-change="onFormItemChange"
+    >
+      <template
+        v-if="setting.showSceneAddonBefore"
+        #sceneAddonBefore
+      >
+        <div :class="$style.block">sceneAddonBefore</div>
+      </template>
+      <template
+        v-if="setting.showSceneAddonAfter"
+        #sceneAddonAfter
+      >
+        <div :class="$style.block">sceneAddonAfter</div>
+      </template>
+      <template
+        v-if="setting.showExtra"
+        #extra
+      >
+        <div :class="$style.block">extra</div>
+      </template>
+      <template
+        v-if="setting.showTableHead"
+        #tableHead
+      >
+        <div :class="$style.block">tableHead</div>
+      </template>
+      <template
+        v-if="setting.showToolBar"
+        #toolBarExtra
+      >
+        <div :class="$style.block">toolBarExtra</div>
+      </template>
+      <template
+        v-if="setting.showTableFoot"
+        #tableFoot
+      >
+        <div :class="$style.block">tableFoot</div>
+      </template>
+    </super-table>
+  </div>
+</template>
+
+<style module lang="scss">
+.block {
+  height: 32px;
+  background-color: #fafafa;
+  border: 1px dashed #ededed;
+  padding: 0 16px;
+  line-height: 32px;
+}
+
+.form {
+  padding: 16px;
+  background-color: #fafafa;
+  border-bottom: 1px solid #ededed;
+}
+</style>

package/example/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import Example from './index.vue'
+import Antd from 'ant-design-vue'
+
+createApp(Example).use(Antd).mount('#app')

package/example/tableColumns.ts

@@ -0,0 +1,183 @@
+import { Input, message } from 'ant-design-vue'
+import Mock from 'mockjs'
+
+/**
+ * @description 初始化表单配置，操作类方法可通过参数传递进来
+ * @param { object } options 一些提供给表格内置组件使用的扩展
+ *
+ * */
+export const createTableColumns = (options: {
+  onDelete: (record: Record<string, any>) => void
+}) => {
+  return [
+    {
+      key: 'id',
+      title: 'ID',
+      type: 'text',
+      content: 'id',
+      width: 80,
+      fixed: 'left',
+    },
+    {
+      key: 'index',
+      title: '序号',
+      type: 'text',
+      content: (record: any, index: number) => index + 1,
+      width: 80,
+      fixed: 'left',
+    },
+    {
+      key: 'text',
+      title: '文本',
+      type: 'text',
+      content: 'text',
+      width: 150,
+      titleTooltip: '标题提示信息',
+    },
+    {
+      key: 'textList',
+      title: '文本列表',
+      content: 'textList',
+      width: 150,
+    },
+    {
+      key: 'image',
+      type: 'image',
+      title: '图片',
+      content: 'imageSrc',
+    },
+    {
+      key: 'imageList',
+      type: 'image',
+      title: '图片列表',
+      content: 'imageList',
+      width: 200,
+      visible: false,
+    },
+    {
+      key: 'tag',
+      type: 'tag',
+      title: '标签',
+      width: 120,
+      content() {
+        return {
+          label: '标签',
+          color: 'blue',
+        }
+      },
+    },
+    {
+      key: 'tagList',
+      type: 'tag',
+      title: '标签列表',
+      width: 200,
+      content() {
+        return [
+          {
+            label: '色情',
+            color: 'red',
+          },
+          {
+            label: '违禁',
+            color: 'blue',
+          },
+          {
+            label: '暴恐',
+            color: '#f00',
+          },
+          {
+            label: '涉政',
+            color: 'pink',
+          },
+        ]
+      },
+    },
+    {
+      key: 'button',
+      type: 'button',
+      title: '按钮',
+      content() {
+        return {
+          label: Mock.mock('@cword(2, 4)'),
+          onClick() {
+            message.info('click')
+          },
+        }
+      },
+    },
+    {
+      key: 'link',
+      type: 'link',
+      title: '链接',
+      content() {
+        return {
+          label: Mock.mock('@cword(2,8)'),
+          to: location.href,
+        }
+      },
+    },
+    {
+      key: 'custom',
+      title: '自定义组件',
+      type: 'component',
+      component: Input,
+      width: 200,
+      props: {
+        placeholder: '请输入',
+        style: {
+          width: '120px',
+        },
+        onChange() {
+          console.log('change')
+        },
+      },
+    },
+    {
+      key: 'status',
+      title: '状态',
+      type: 'text',
+      content: () => Mock.mock('@pick(["启用", "禁用", "待审核"])'),
+      width: 100,
+      fixed: 'right',
+    },
+    {
+      key: 'createTime',
+      title: '创建时间',
+      type: 'text',
+      content: () => Mock.mock('@datetime'),
+      width: 180,
+      fixed: 'right',
+    },
+    {
+      key: 'actions',
+      type: 'button',
+      title: '操作',
+      fixed: 'right',
+      width: 200,
+      configurable: false,
+      content() {
+        return [
+          {
+            label: '编辑',
+          },
+          {
+            label: '删除',
+            onClick: options.onDelete,
+          },
+          {
+            label: '详情',
+            onClick() {
+              window.open(location.href)
+            },
+          },
+          {
+            label: '上线',
+          },
+          {
+            label: '下线',
+          },
+        ]
+      },
+    },
+  ]
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@yidun/antd-super-table",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "example",
     "example.png",
     "README.md"
   ],
@@ -14,7 +15,8 @@
     "build": "vite build --mode lib && tsc --emitDeclarationOnly && cp src/typings.ts dist/",
     "preview": "vite preview",
     "tsc": "tsc --noEmit --project tsconfig.json",
-    "lint": "eslint src --fix",
+    "lint": "eslint src --ext .js,.ts,.vue",
+    "lint:fix": "eslint src --fix",
     "format": "prettier --write src/"
   },
   "optionalDependencies": {