@wlydfe/pro-ui 0.2.19 → 0.2.21

package/docs/examples/table/multiple-level-header.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <PlusTable
+      ref="plusTableInstance"
+      :columns="tableConfig"
+      :table-data="tableData"
+      :title-bar="false"
+    >
+      <template #plus-header-summarize="scoped">
+        <span style="color: red"> {{ scoped.label }}</span>
+      </template>
+      <template #plus-header-expertRating="scoped">
+        <span style="color: red"> {{ scoped.label }}</span>
+      </template>
+    </PlusTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PlusColumn, PlusTableInstance } from 'plus-pro-components'
+import { useTable } from 'plus-pro-components'
+import { ref } from 'vue'
+
+interface TableRow {
+  id: number
+  name: string
+  status: string
+  popularRating: number
+  expertRating: number
+  switch: boolean
+  time: Date
+  result: string
+}
+
+const TestServe = {
+  getList: async () => {
+    const data = Array.from({ length: 3 }).map((item, index) => {
+      return {
+        id: index,
+        name: 'name-' + index,
+        status: String(index % 3),
+        popularRating: Math.ceil(Math.random() * 5),
+        expertRating: Math.ceil(Math.random() * 5),
+        switch: index % 2 === 0 ? true : false,
+        time: new Date(),
+        result: ['晋级', '淘汰'][index % 2]
+      }
+    })
+
+    return { data: data as TableRow[] }
+  }
+}
+const { tableData } = useTable<TableRow[]>()
+
+const plusTableInstance = ref<PlusTableInstance | null>(null)
+
+const tableConfig = ref<PlusColumn[]>([
+  {
+    label: '名称',
+    prop: 'name',
+    width: 120,
+    tableColumnProps: { align: 'center' }
+  },
+  {
+    label: '状态',
+    prop: 'status',
+    valueType: 'select',
+    tableColumnProps: { align: 'center' },
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '日期',
+    prop: 'time',
+    valueType: 'date-picker',
+    fieldProps: {
+      format: 'YYYY-MM-DD HH:mm'
+    }
+  },
+  {
+    label: '总结',
+    prop: 'summarize',
+    tableColumnProps: { align: 'center' },
+    children: [
+      {
+        label: '评分',
+        width: 200,
+        prop: 'rate',
+        tableColumnProps: { align: 'center' },
+        children: [
+          {
+            label: '大众评分',
+            width: 200,
+            prop: 'popularRating',
+            editable: true,
+            valueType: 'rate'
+          },
+          {
+            label: '专家评分',
+            width: 200,
+            prop: 'expertRating',
+            editable: true,
+            valueType: 'rate'
+          }
+        ]
+      },
+      {
+        label: '结果',
+        width: 200,
+        prop: 'result',
+        valueType: 'tag',
+        tableColumnProps: { align: 'center' },
+        fieldProps: (value: string) => {
+          return { type: value === '晋级' ? 'primary' : 'danger' }
+        }
+      }
+    ]
+  }
+])
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    tableData.value = data.map(item => ({ ...item }))
+  } catch (error) {}
+}
+getList()
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <PlusTable :table-data="tableData">
+    <el-table-column prop="date" label="Date" width="150" />
+    <el-table-column label="Delivery Info">
+      <el-table-column prop="name" label="Name" width="120" />
+      <el-table-column label="Address Info">
+        <el-table-column prop="state" label="State" width="120" />
+        <el-table-column prop="city" label="City" width="120" />
+        <el-table-column prop="address" label="Address" />
+        <el-table-column prop="zip" label="Zip" width="120" />
+      </el-table-column>
+    </el-table-column>
+  </PlusTable>
+</template>
+
+<script lang="ts" setup>
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036'
+  }
+]
+</script>

package/docs/examples/table/multiple.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableData"
+      :is-selection="true"
+      @selection-change="handleSelectionChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+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 multipleSelection = ref<TableRow[]>([])
+const { tableData } = useTable<TableRow[]>()
+
+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'
+  }
+]
+
+const handleSelectionChange = (val: TableRow[]) => {
+  multipleSelection.value = val
+}
+
+const getList = async () => {
+  try {
+    const { data } = await TestServe.getList()
+    tableData.value = data
+  } catch (error) {}
+}
+getList()
+</script>

package/docs/examples/table/pagination.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableData"
+      has-index-column
+      :pagination="{
+        total,
+        modelValue: pageInfo,
+        pageSizeList: [10, 20, 50],
+        align: 'right'
+      }"
+      @paginationChange="handlePaginationChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTable } from 'plus-pro-components'
+import type { PageInfo, 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 % 3),
+        tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
+        time: new Date()
+      }
+    })
+    return {
+      data: data as TableRow[],
+      total: data.length
+    }
+  }
+}
+
+const { tableData, total, pageInfo } = useTable<TableRow[]>()
+
+pageInfo.value.pageSize = 5
+
+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'
+  }
+]
+
+const getList = async () => {
+  try {
+    const { data, total: dataTotal } = await TestServe.getList()
+    tableData.value = data
+    total.value = dataTotal
+  } catch (error) {}
+}
+const handlePaginationChange = (_pageInfo: PageInfo): void => {
+  pageInfo.value = _pageInfo
+
+  getList()
+}
+
+getList()
+</script>

package/docs/examples/table/radio.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <PlusTable
+      ref="plusTableInstance"
+      is-radio
+      :columns="tableConfig"
+      :table-data="tableData"
+      :default-selected-radio-row="defaultSelectedRadioRow"
+      @radioChange="handleRadioChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PlusColumn, PlusTableInstance } from 'plus-pro-components'
+import { useTable } from 'plus-pro-components'
+import { ref } from 'vue'
+
+interface TableRow {
+  id: number
+  name: string
+  status: string
+  rate: number
+  switch: boolean
+  time: string
+  tag: string
+}
+
+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 defaultSelectedRadioRow = ref()
+
+const tableConfig = ref<PlusColumn[]>([
+  {
+    label: '名称',
+    prop: 'name',
+    width: 120,
+    formProps: {
+      // 添加校验
+      rules: {
+        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: 200,
+    prop: 'tag',
+    valueType: 'tag'
+  },
+  {
+    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 }))
+    defaultSelectedRadioRow.value = tableData.value[0]
+  } catch (error) {}
+}
+getList()
+
+/**
+ *
+ * @param row
+ * @param index
+ * @param value  value（是否选中）参数为 v0.1.24 新增
+ */
+const handleRadioChange = (row: any, index: number, value: boolean) => {
+  console.log(row, index, value, 'handleRadioChange')
+}
+</script>