@wlydfe/pro-ui 0.2.21 → 0.2.24

package/docs/examples/table/custom-content.vue

@@ -1,257 +0,0 @@
-<template>
-  <div>
-    <PlusTable
-      ref="plusTable"
-      row-key="id"
-      size="small"
-      :loading-status="loadingStatus"
-      :columns="tableConfig"
-      :table-data="tableData"
-      has-index-column
-      is-selection
-      :drag-sort="true"
-      table-title="表格"
-      :pagination="{ total, modelValue: pageInfo }"
-      :action-bar="{
-        buttons,
-        type: 'link',
-        showNumber: 3,
-        width: 200
-      }"
-      @paginationChange="handlePaginationChange"
-      @clickAction="handleClickButton"
-      @dragSortEnd="handleSortEnd"
-      @formChange="handleChange"
-    >
-      <el-table-column
-        v-for="item in tableConfig"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        show-overflow-tooltip
-      />
-    </PlusTable>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { useTable } from 'plus-pro-components'
-import type {
-  PlusTableInstance,
-  ButtonsCallBackParams,
-  PageInfo,
-  PlusColumn
-} from 'plus-pro-components'
-
-defineOptions({
-  name: 'PlusTableAdvancedTest'
-})
-
-interface TableRow {
-  index: number
-  id: number
-  name: string
-  status: string
-  tag: string
-  progress: number
-  rate: number
-  switch: boolean
-  img: string
-  code: string
-  time: Date
-  custom: string
-}
-
-const TestServe = {
-  getList: async () => {
-    const data = Array.from({ length: 20 }).map((item, index) => {
-      return {
-        index,
-        id: index,
-        name: index + 'name',
-        status: String(index % 3),
-        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
-        progress: Math.ceil(Math.random() * index * 10),
-        rate: index > 3 ? 2 : 3.5,
-        switch: index % 2 === 0 ? true : false,
-        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        time: new Date(),
-        code: `
-          const getData = async params => {
-            const data = await getData(params)
-            return { list: data.data, ...data }
-          }`,
-        custom: 'custom' + index,
-        level: {
-          state: {
-            value: 'level' + index
-          }
-        }
-      }
-    })
-    return {
-      data: data as TableRow[],
-      total: data.length
-    }
-  }
-}
-
-const plusTable = ref<PlusTableInstance>()
-
-const { tableData, pageInfo, total, buttons, loadingStatus } = useTable<TableRow[]>()
-
-buttons.value = [
-  {
-    // 查看
-    text: '查看',
-    props: {
-      type: 'primary'
-    }
-  },
-  {
-    // 修改
-    text: '修改',
-    props: {
-      type: 'success'
-    }
-  },
-  {
-    // 删除
-    text: '删除',
-    props: {
-      type: 'warning'
-    },
-    confirm: {}
-  },
-  {
-    text: '复制',
-    props: {
-      type: 'primary'
-    },
-    confirm: {}
-  }
-]
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '名称',
-    tooltip: '名称最多显示6个字符',
-    width: 120,
-    prop: 'name',
-    tableColumnProps: {
-      showOverflowTooltip: true
-    }
-  },
-  {
-    label: '多级数据',
-    width: 120,
-    prop: 'level.state.value'
-  },
-  {
-    label: '状态',
-    width: 120,
-    prop: 'status',
-    valueType: 'select',
-    options: [
-      {
-        label: '未解决',
-        value: '0',
-        type: 'warning'
-      },
-      {
-        label: '已解决',
-        value: '1',
-        type: 'success'
-      },
-      {
-        label: '解决中',
-        value: '2',
-        type: 'primary'
-      },
-      {
-        label: '失败',
-        value: '3',
-        type: 'danger'
-      }
-    ]
-  },
-  {
-    label: '标签',
-    width: 120,
-    prop: 'tag',
-    valueType: 'tag'
-  },
-  {
-    label: '执行进度',
-    width: 200,
-    prop: 'progress',
-    valueType: 'progress'
-  },
-  {
-    label: '代码块',
-    width: 250,
-    prop: 'code',
-    valueType: 'code'
-  },
-  {
-    label: '评分',
-    width: 200,
-    prop: 'rate',
-    valueType: 'rate',
-    editable: true
-  },
-  {
-    label: '开关',
-    width: 100,
-    prop: 'switch',
-    valueType: 'switch',
-    editable: true
-  },
-  {
-    label: '图片',
-    prop: 'img',
-    width: 100,
-    valueType: 'img'
-  },
-  {
-    label: '时间',
-    prop: 'time',
-    width: 180,
-    valueType: 'date-picker'
-  }
-]
-
-const getList = async () => {
-  try {
-    loadingStatus.value = true
-
-    const { data, total: dataTotal } = await TestServe.getList()
-    tableData.value = data || []
-    total.value = dataTotal
-  } catch (error) {}
-  loadingStatus.value = false
-}
-getList()
-
-const handlePaginationChange = (_pageInfo: PageInfo): void => {
-  pageInfo.value = _pageInfo
-  getList()
-}
-const handleClickButton = (data: ButtonsCallBackParams) => {
-  console.log(data.buttonRow.text)
-}
-const handleSortEnd = (newIndex: number, oldIndex: number) => {
-  const currRow = tableData.value.splice(oldIndex, 1)[0]
-  tableData.value.splice(newIndex, 0, currRow)
-}
-const handleChange = (data: {
-  value: any
-  prop: string
-  row: TableRow
-  index: number
-  column: any
-}) => {
-  console.log(data)
-}
-</script>

package/docs/examples/table/custom-header-slot.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <PlusTable :columns="tableConfig" :table-data="tableData">
-      <!--这里的plus-header-name 插槽没有生效，因为它的优先级低于renderHeader函数 -->
-      <template #plus-header-name="scoped">
-        <span style="color: yellow">{{ scoped.label }}</span>
-      </template>
-
-      <template #plus-header-status="scoped">
-        <span style="color: red">插槽- {{ scoped.label }}</span>
-      </template>
-    </PlusTable>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { h } from 'vue'
-import { useTable } from 'plus-pro-components'
-import type { PlusColumn } from 'plus-pro-components'
-
-const TestServe = {
-  getList: async () => {
-    const data = Array.from({ length: 3 }).map((item, index) => {
-      return {
-        name: index + 'name',
-        status: String(index % 2),
-        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
-        time: new Date()
-      }
-    })
-    return {
-      data
-    }
-  }
-}
-
-const { tableData } = useTable()
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '名称',
-    prop: 'name',
-    // renderHeader 的优先级比 插槽 plus-header-name 的高
-    renderHeader(label) {
-      return h(
-        'div',
-        {
-          style: {
-            color: 'red'
-          }
-        },
-        `render ${label}`
-      )
-    }
-  },
-  {
-    label: '状态',
-    prop: 'status',
-    valueType: 'select',
-    options: [
-      {
-        label: '未解决',
-        value: '0',
-        type: 'primary'
-      },
-      {
-        label: '已解决',
-        value: '1',
-        type: 'success'
-      }
-    ]
-  }
-]
-
-const getList = async () => {
-  try {
-    const { data } = await TestServe.getList()
-    tableData.value = data || []
-  } catch (error) {}
-}
-getList()
-</script>

package/docs/examples/table/custom-header-tsx.vue

@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <PlusTable :columns="tableConfig" :table-data="tableData" />
-  </div>
-</template>
-
-<script lang="tsx" setup>
-//  `lang ` 设置为 `jsx`或者`tsx`
-import { useTable } from 'plus-pro-components'
-import type { PlusColumn } from 'plus-pro-components'
-import { ElButton } from 'element-plus'
-
-const TestServe = {
-  getList: async () => {
-    const data = Array.from({ length: 4 }).map((item, index) => {
-      return {
-        name: index + 'name',
-        status: String(index % 4),
-        data: String(index % 4)
-      }
-    })
-    return {
-      data
-    }
-  }
-}
-
-const { tableData } = useTable()
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '名称',
-    prop: 'name',
-    // jsx 中值使用单花括号
-    renderHeader(label) {
-      return <div style={{ color: 'green' }}> {label}</div>
-    }
-  },
-  {
-    label: '按钮',
-    prop: 'data',
-    renderHeader(label) {
-      return <ElButton type="primary"> {label}</ElButton>
-    }
-  },
-  {
-    label: '状态',
-    prop: 'status',
-    // jsx 中style使用单花括号，里面还有一个花括号表示对象
-    renderHeader(label) {
-      return <p style={{ padding: 10, color: 'red' }}> {label}</p>
-    }
-  }
-]
-
-const getList = async () => {
-  try {
-    const { data } = await TestServe.getList()
-    tableData.value = data || []
-  } catch (error) {}
-}
-getList()
-</script>

package/docs/examples/table/custom-header.vue

@@ -1,93 +0,0 @@
-<template>
-  <div>
-    <PlusTable
-      :columns="tableConfig"
-      :table-data="tableData"
-      table-title="表格"
-      :pagination="{ total, modelValue: pageInfo }"
-      @paginationChange="handlePaginationChange"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { Component } from 'vue'
-import { h } from 'vue'
-import { useTable } from 'plus-pro-components'
-import type { PageInfo, PlusColumn } from 'plus-pro-components'
-import { ElButton, ElAlert } from 'element-plus'
-
-defineOptions({
-  name: 'CustomCell'
-})
-
-interface TableRow {
-  index: number
-  id: number
-  name: string
-  status: string
-  custom: string
-}
-
-const TestServe = {
-  getList: async () => {
-    const data = Array.from({ length: 3 }).map((item, index) => {
-      return {
-        index,
-        id: index,
-        name: index + 'name',
-        status: String(index % 3),
-        custom: 'custom' + index
-      }
-    })
-    return {
-      data: data as TableRow[],
-      total: data.length
-    }
-  }
-}
-
-const { tableData, pageInfo, total, loadingStatus } = useTable<TableRow[]>()
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '自定义表头 div',
-    tooltip: '名称最多显示6个字符',
-    width: 200,
-    prop: 'name',
-    // 返回一个标签字符串
-    renderHeader: label => h('div', null, label)
-  },
-  {
-    label: '自定义表头 ElButton',
-    width: 200,
-    prop: 'status',
-    // 返回一个组件
-    renderHeader: label => h(ElButton, null, () => label)
-  },
-  {
-    label: '自定义组件ElAlert',
-    prop: 'custom',
-    // 返回一个VNode
-    renderHeader: label => {
-      return h(ElAlert as unknown as Component, null, () => label)
-    }
-  }
-]
-
-const getList = async () => {
-  try {
-    loadingStatus.value = true
-    const { data, total: dataTotal } = await TestServe.getList()
-    tableData.value = data || []
-    total.value = dataTotal
-  } catch (error) {}
-  loadingStatus.value = false
-}
-getList()
-
-const handlePaginationChange = (_pageInfo: PageInfo): void => {
-  pageInfo.value = _pageInfo
-  getList()
-}
-</script>

package/docs/examples/table/drag-sort-column.vue

@@ -1,119 +0,0 @@
-<template>
-  <el-divider style="margin-top: 10px"> 可通过列设置拖拽排序列</el-divider>
-  <PlusTable
-    :columns="tableConfig"
-    :table-data="tableData"
-    :title-bar="{
-      columnSetting: {
-        dragSort: {
-          animation: 180,
-          delay: 0
-        }
-      }
-    }"
-  />
-
-  <el-divider style="margin: 24px 0 10px"> 去除了列设置拖拽排序列</el-divider>
-  <PlusTable
-    :columns="tableConfig"
-    :table-data="tableData"
-    :title-bar="{
-      columnSetting: {
-        dragSort: false
-      }
-    }"
-  />
-</template>
-
-<script lang="ts" setup>
-import { useTable } from 'plus-pro-components'
-import type { PlusColumn } from 'plus-pro-components'
-
-interface TableRow {
-  id: number
-  name: string
-  status: string
-  tag: string
-  time: Date
-}
-
-const TestServe = {
-  getList: async () => {
-    const data = Array.from({ length: 3 }).map((item, index) => {
-      return {
-        id: index,
-        name: index + 'name',
-        status: String(index % 3),
-        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
-        time: new Date()
-      }
-    })
-    return {
-      data: data as TableRow[]
-    }
-  }
-}
-
-const { tableData } = useTable<TableRow[]>()
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '名称',
-    prop: 'name',
-    disabledHeaderFilter: true,
-    tooltip: '名称',
-    tableColumnProps: {
-      align: 'center',
-      showOverflowTooltip: true
-    }
-  },
-  {
-    label: '状态',
-    prop: 'status',
-    valueType: 'select',
-    options: [
-      {
-        label: '未解决',
-        value: '0',
-        color: 'red'
-      },
-      {
-        label: '已解决',
-        value: '1',
-        color: 'blue'
-      },
-      {
-        label: '解决中',
-        value: '2',
-        color: 'yellow'
-      },
-      {
-        label: '失败',
-        value: '3',
-        color: 'red'
-      }
-    ]
-  },
-  {
-    label: '标签',
-    prop: 'tag',
-    valueType: 'tag',
-    fieldProps: (value: string) => {
-      return { type: value }
-    }
-  },
-  {
-    label: '时间',
-    prop: 'time',
-    valueType: 'date-picker'
-  }
-]
-
-const getList = async () => {
-  try {
-    const { data } = await TestServe.getList()
-    tableData.value = data
-  } catch (error) {}
-}
-getList()
-</script>

package/docs/examples/table/drag-sort.vue

@@ -1,104 +0,0 @@
-<template>
-  <div>
-    <PlusTable
-      drag-sortable
-      :columns="tableConfig"
-      :table-data="tableData"
-      @dragSortEnd="handleSortEnd"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useTable } from 'plus-pro-components'
-import type { PlusColumn } from 'plus-pro-components'
-
-interface TableRow {
-  id: number
-  name: string
-  status: string
-  tag: string
-  time: Date
-}
-
-const TestServe = {
-  getList: async () => {
-    const data = Array.from({ length: 3 }).map((item, index) => {
-      return {
-        id: index,
-        name: index + 'name',
-        status: String(index % 3),
-        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
-        time: new Date()
-      }
-    })
-    return {
-      data: data as TableRow[]
-    }
-  }
-}
-
-const { tableData } = useTable<TableRow[]>()
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '名称',
-    prop: 'name',
-    valueType: 'copy'
-  },
-  {
-    label: '状态',
-    prop: 'status',
-    valueType: 'select',
-    options: [
-      {
-        label: '未解决',
-        value: '0',
-        color: 'red'
-      },
-      {
-        label: '已解决',
-        value: '1',
-        color: 'blue'
-      },
-      {
-        label: '解决中',
-        value: '2',
-        color: 'yellow'
-      },
-      {
-        label: '失败',
-        value: '3',
-        color: 'red'
-      }
-    ]
-  },
-  {
-    label: '标签',
-    prop: 'tag',
-    valueType: 'tag',
-    fieldProps: (value: string) => {
-      return { type: value }
-    }
-  },
-  {
-    label: '时间',
-    prop: 'time',
-    valueType: 'date-picker'
-  }
-]
-
-const getList = async () => {
-  try {
-    const { data } = await TestServe.getList()
-    tableData.value = data
-  } catch (error) {}
-}
-
-const handleSortEnd = (newIndex: number, oldIndex: number) => {
-  const currRow = tableData.value.splice(oldIndex, 1)[0]
-  tableData.value.splice(newIndex, 0, currRow)
-}
-
-getList()
-</script>