@wlydfe/pro-ui 0.2.19 → 0.2.21

package/docs/examples/table/row-edit.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <el-button type="primary" @click="handleAdd">新增数据</el-button>
+    <el-button type="danger" @click="handleDelete">移除数据</el-button>
+
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableData"
+      :action-bar="{ buttons, width: 140 }"
+      @formChange="formChange"
+      @clickAction="handleClickButton"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ButtonsCallBackParams, TableFormRefRow, PlusColumn } from 'plus-pro-components'
+import { useTable } from 'plus-pro-components'
+import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
+import { set } from 'lodash-es'
+
+interface TableRow {
+  id: number
+  name: {
+    name: string
+  }
+  status: string
+  rate: number
+  switch: boolean
+  time: string
+}
+
+const TestServe = {
+  getList: async () => {
+    const data = Array.from({ length: 4 }).map((item, index) => {
+      return {
+        id: index,
+        name: {
+          name: index < 2 ? '' : index + 'name'
+        },
+        status: String(index % 3),
+        rate: index > 3 ? 2 : 3.5,
+        switch: index % 2 === 0 ? true : false,
+        time: index < 2 ? '' : new Date()
+      }
+    })
+    return { data: data as TableRow[] }
+  }
+}
+const { tableData, buttons } = useTable<TableRow[]>()
+
+const show = ref<boolean[]>([])
+
+buttons.value = [
+  {
+    text: '取消编辑',
+    code: 'cancel',
+    props: {
+      type: 'warning'
+    },
+    show: (_, index) => !!show.value[index]
+  },
+  {
+    // 保存
+    text: '保存',
+    code: 'save',
+    props: {
+      type: 'primary'
+    },
+    show: (_, index) => !!show.value[index]
+  },
+  {
+    text: '编辑',
+    code: 'edit',
+    props: {
+      type: 'primary'
+    },
+    show: (_, index) => !show.value[index]
+  },
+  {
+    text: '删除',
+    code: 'delete',
+    props: {
+      type: 'danger'
+    },
+    confirm: {},
+    show: (_, index) => !show.value[index]
+  }
+]
+
+const tableConfig = ref<PlusColumn[]>([
+  {
+    label: '名称',
+    prop: 'name.name',
+    width: 120,
+    formProps: {
+      // 添加校验
+      rules: {
+        'name.name': [
+          {
+            required: true,
+            message: '请输入名称'
+          }
+        ]
+      }
+    }
+  },
+  {
+    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'
+      }
+    ],
+    formProps: {
+      // 添加校验
+      rules: {
+        status: [
+          {
+            required: true,
+            trigger: 'change',
+            message: '请选择状态'
+          }
+        ]
+      }
+    }
+  },
+  {
+    label: '评分',
+    width: 200,
+    prop: 'rate',
+    valueType: 'rate'
+  },
+  {
+    label: '开关',
+    width: 100,
+    prop: 'switch',
+    valueType: 'switch'
+  },
+  {
+    label: '日期',
+    prop: 'time',
+    valueType: 'date-picker',
+    width: 250,
+    fieldProps: {
+      type: 'date',
+      placeholder: '请选择日期',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD'
+    },
+    formProps: {
+      // 添加校验
+      rules: {
+        time: [
+          {
+            required: true,
+            message: '请选择日期'
+          }
+        ]
+      }
+    }
+  }
+])
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    tableData.value = data.map(item => ({ ...item }))
+  } catch (error) {}
+}
+getList()
+
+const handleAdd = () => {
+  const index = ((tableData.value.at(-1)?.id as number) || 0) + 1
+  tableData.value.push({
+    id: index,
+    name: {
+      name: index < 2 ? '' : index + 'name'
+    },
+    status: String(index % 3),
+    rate: index > 3 ? 2 : 3.5,
+    switch: index % 2 === 0 ? true : false,
+    time: index < 2 ? '' : new Date().toString()
+  })
+}
+
+const handleDelete = () => {
+  tableData.value.pop()
+}
+
+const formChange = ({ value, prop, index }) => {
+  // 同步表单数据到表格
+  set(tableData.value[index], prop, value)
+  console.log(tableData.value, 'tableData.value')
+}
+
+const handleSave = async (data: ButtonsCallBackParams) => {
+  try {
+    if (data.formRefs) {
+      const da = await Promise.all(
+        data.formRefs?.map((item: TableFormRefRow) => item.formInstance.value?.validate())
+      )
+      console.log(da, 'da')
+    }
+  } catch (errors: any) {
+    console.log(errors, 'errors')
+    ElMessage.closeAll()
+    const values: any[] = Object.values(errors)
+    ElMessage.warning(values[0]?.[0]?.message || '请完整填写表单并再次提交！')
+  }
+}
+
+const handleClickButton = async (data: ButtonsCallBackParams) => {
+  if (data.buttonRow.code === 'edit') {
+    tableData.value.forEach(item => {
+      if (item.id === data.row.id) {
+        show.value[data.index] = true
+      }
+    })
+
+    data.formRefs?.forEach((item: TableFormRefRow) => {
+      item.startCellEdit()
+    })
+  } else if (data.buttonRow.code === 'cancel') {
+    tableData.value.forEach(item => {
+      if (item.id === data.row.id) {
+        show.value[data.index] = false
+      }
+    })
+    data.formRefs?.forEach((item: TableFormRefRow) => {
+      item.stopCellEdit()
+    })
+  } else if (data.buttonRow.code === 'save') {
+    handleSave(data)
+  } else {
+    ElMessage.success('删除成功')
+  }
+}
+</script>

package/docs/examples/table/show-number.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <PlusTable
+      key="1"
+      :columns="tableConfig"
+      :table-data="tableData"
+      :action-bar="{
+        showNumber: 3,
+        buttons
+      }"
+      @clickAction="handleClickButton"
+    />
+
+    <PlusTable
+      key="2"
+      :columns="tableConfig"
+      :table-data="tableData"
+      :action-bar="{
+        showNumber,
+        buttons,
+        width: 230
+      }"
+      @clickAction="handleClickButton"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useTable } from 'plus-pro-components'
+import type { ButtonsCallBackParams, PlusColumn } from 'plus-pro-components'
+import { View, Edit, Delete, DocumentCopy } from '@element-plus/icons-vue'
+
+interface TableRow {
+  id: number
+  name: string
+  status: string
+  tag: string
+  time: Date
+}
+
+const TestServe = {
+  getList: async () => {
+    const data = Array.from({ length: 4 }).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, buttons } = useTable<TableRow[]>()
+
+buttons.value = [
+  {
+    // v0.0.8开始支持 text支持函数类型
+    text: row => (row.status === '1' ? '开启' : '关闭'),
+    code: 'status',
+    icon: View,
+    props: {
+      type: 'primary'
+    }
+  },
+  {
+    // 查看
+    text: '查看',
+    code: 'view',
+    props: (row: any) => ({
+      type: 'info',
+      disabled: row.status === '1'
+    }),
+    icon: View
+  },
+  {
+    // 修改
+    text: '修改',
+    code: 'edit',
+    // props v0.1.16 版本新增函数类型
+    props: (row: any) => ({
+      type: 'primary',
+      disabled: row.status === '1'
+    }),
+    show: computed(() => true),
+    icon: Edit
+  },
+  {
+    // 删除
+    text: '删除',
+    code: 'delete',
+    // props v0.1.16 版本新增计算属性支持
+    props: computed(() => ({ type: 'danger' })),
+    confirm: {
+      options: { draggable: true }
+    },
+    icon: Delete
+  },
+  {
+    text: '复制',
+    code: 'copy',
+    props: {
+      type: 'success'
+    },
+    icon: DocumentCopy
+  }
+]
+
+const tableConfig: PlusColumn[] = [
+  {
+    label: '名称',
+    prop: 'name'
+  },
+  {
+    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'
+  }
+]
+
+// v0.1.23版本新增函数类型
+const showNumber = (row: any, index: number) => {
+  return index + 1
+}
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    tableData.value = data || []
+  } catch (error) {}
+}
+getList()
+
+const handleClickButton = (data: ButtonsCallBackParams) => {
+  console.log(data.buttonRow.text)
+}
+</script>

package/docs/examples/table/status.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <PlusTable :columns="tableConfig" :table-data="tableData" />
+  </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: 5 }).map((item, index) => {
+      return {
+        id: index,
+        name: index + 'name',
+        status: String(index % 5),
+        status1: String(index % 5),
+        status2: String(index % 5),
+        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'
+  },
+  {
+    label: '状态',
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        type: 'primary'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        type: 'success'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        type: 'info'
+      },
+      {
+        label: '失败',
+        value: '3',
+        type: 'danger'
+      },
+      {
+        label: '审核中',
+        value: '4',
+        type: 'warning'
+      }
+    ],
+    customGetStatus: ({ options, value, row }) => {
+      const data = options?.find(item => item.value === value && row.id === 0)
+      return data
+    }
+  },
+  {
+    label: '状态1',
+    prop: 'status1',
+    valueType: 'radio',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: '#68228B'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: '#00ff66'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: '#C2C2C2'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: '#ff3366'
+      },
+      {
+        label: '审核中',
+        value: '4',
+        color: '#ffff99'
+      }
+    ]
+  },
+  {
+    label: '状态2',
+    prop: 'status2',
+    valueType: 'checkbox',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        type: 'primary',
+        color: '#68228B'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        type: 'success',
+        color: '#00ff66'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        type: 'info',
+        color: '#C2C2C2'
+      },
+      {
+        label: '失败',
+        value: '3',
+        type: 'danger',
+        color: '#ff3366'
+      },
+      {
+        label: '审核中',
+        value: '4',
+        type: 'warning',
+        color: '#ffff99'
+      }
+    ]
+  }
+]
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    tableData.value = data
+  } catch (error) {}
+}
+getList()
+</script>

package/docs/examples/table/title-bar-filter.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <PlusTable
+      ref="plusTableInstance"
+      editable
+      :columns="tableConfig"
+      :table-data="tableData"
+      @filterTableHeader="filterTableHeader"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PlusColumn, PlusTableInstance } from 'plus-pro-components'
+import { useTable } from 'plus-pro-components'
+import { ref, onMounted } from 'vue'
+
+interface TableRow {
+  id: number
+  name: string
+  status: string
+  rate: number
+  switch: boolean
+  time: string
+  tag: string
+}
+
+const localKey = 'filter-table-header'
+
+const TestServe = {
+  getList: async () => {
+    const data = Array.from({ length: 4 }).map((item, index) => {
+      return {
+        id: index,
+        name: index < 2 ? '' : index + 'name',
+        status: String(index % 3),
+        rate: index > 3 ? 2 : 3.5,
+        switch: index % 2 === 0 ? true : false,
+        time: index < 2 ? '' : new Date(),
+        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : ''
+      }
+    })
+
+    return { data: data as TableRow[] }
+  }
+}
+const { tableData } = useTable<TableRow[]>()
+
+const plusTableInstance = ref<PlusTableInstance | null>(null)
+
+const tableConfig = ref<PlusColumn[]>([
+  {
+    label: '名称',
+    prop: 'name',
+    width: 120,
+    //  列设置中此列不选中
+    headerIsChecked: false
+  },
+  {
+    label: '状态',
+    prop: 'status',
+    disabledHeaderFilter: true,
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '评分',
+    width: 200,
+    prop: 'rate',
+    valueType: 'rate'
+  },
+  {
+    label: '标签',
+    width: 200,
+    prop: 'tag',
+    valueType: 'tag'
+  },
+  {
+    label: '开关',
+    width: 100,
+    prop: 'switch',
+    valueType: 'switch'
+  },
+  {
+    label: '日期',
+    prop: 'time',
+    valueType: 'date-picker',
+    width: 250
+  }
+])
+
+onMounted(() => {
+  // 此方法适应于简单数据，如果tableConfig有复杂数据，如计算属性函数等，可以考虑只保存关键字段 prop、label、headerIsChecked 、disabledHeaderFilter等
+  const data = localStorage.getItem(localKey)
+    ? JSON.parse(localStorage.getItem(localKey) as string)
+    : null
+
+  if (data) {
+    tableConfig.value = data
+  }
+})
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    tableData.value = data.map(item => ({ ...item }))
+  } catch (error) {}
+}
+getList()
+
+const filterTableHeader = (columns: PlusColumn[]) => {
+  // 此方法适应于简单数据，如果tableConfig有复杂数据，如计算属性函数等，可以考虑只保存关键字段 prop、label、headerIsChecked 、disabledHeaderFilter等
+  localStorage.setItem(localKey, JSON.stringify(columns))
+}
+</script>