@wlydfe/pro-ui 0.2.21 → 0.2.23

package/docs/examples/page/crud.vue

@@ -1,316 +0,0 @@
-<template>
-  <div class="table">
-    <PlusPage
-      ref="plusPageInstance"
-      :request="GroupServe.getList"
-      :columns="columns"
-      :params="state.query"
-      :search="{ labelWidth: '100px', colProps: { span: 8 } }"
-      :table="{
-        isSelection: true,
-        actionBar: { buttons, width: 140 },
-        onClickAction: handleTableOption,
-        onSelectionChange: handleSelect
-      }"
-    >
-      <template #table-title>
-        <el-row class="button-row">
-          <el-button type="primary" :icon="Plus" @click="handleCreate"> 添加 </el-button>
-          <el-button :icon="Delete" type="danger" @click="handleBatchDelete"> 批量删除 </el-button>
-        </el-row>
-      </template>
-    </PlusPage>
-  </div>
-
-  <!-- 弹窗编辑 -->
-  <PlusDialogForm
-    v-model:visible="visible"
-    v-model="form"
-    :form="{ columns, labelPosition: 'top', rules }"
-    :dialog="{ title: dialogTitle + '用户组', width: '540px', top: '12vh', confirmLoading }"
-    @confirm="handleSubmit"
-    @cancel="handleCancel"
-  />
-
-  <!-- 查看弹窗 -->
-  <PlusDialog
-    v-model="detailsVisible"
-    width="600px"
-    title="用户组详情"
-    top="26vh"
-    :has-footer="false"
-  >
-    <PlusDescriptions :column="2" :columns="columns" :data="currentRow" />
-  </PlusDialog>
-</template>
-
-<script lang="ts" setup>
-import { computed, reactive, toRefs, ref } from 'vue'
-import type { FormRules } from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Delete } from '@element-plus/icons-vue'
-import type { ButtonsCallBackParams, PlusPageInstance, PlusColumn } from 'plus-pro-components'
-import { useTable } from 'plus-pro-components'
-import axios from 'axios'
-
-interface TableRow {
-  id: number
-  groupName: string | null
-  createBy: string | null
-  createTime: string | null
-  updateBy: string | null
-  updateTime: string | null
-  code: string | null
-}
-
-interface State {
-  /**
-   * 检索数据
-   */
-  query?: any
-  /**
-   * 当前选择的行数据
-   */
-  currentRow: Partial<TableRow>
-  /**
-   * 表单弹窗是否可见
-   */
-  visible: boolean
-  /**
-   * 详情弹窗是否可见
-   */
-  detailsVisible: boolean
-  /**
-   * 当前选择多行的id集合
-   */
-  selectedIds: number[]
-  /**
-   *  提交loading
-   */
-  confirmLoading: boolean
-  /**
-   * 是否是创建
-   */
-  isCreate: boolean
-  /**
-   * 是否批量
-   */
-  isBatch: boolean
-  /**
-   * 表单
-   */
-  form: {
-    groupName: string
-    remark: string
-    userGroupId?: number
-  }
-  /**
-   * 校验
-   */
-  rules: FormRules
-}
-
-/**
- * API
- */
-const url = 'https://web-1252186245.cos.ap-beijing.myqcloud.com/group.json'
-const GroupServe = {
-  async getList(query: Record<string, any>) {
-    const { data } = await axios.get(url, { params: query })
-    const { page = 1, pageSize = 10 } = query
-    const list = (data.data.result as TableRow[]).filter(
-      (_, index) => index < pageSize * page && index >= pageSize * (page - 1)
-    )
-    return { data: list, total: data.data.total }
-  },
-  async create(data: Record<string, any>) {
-    return data
-  },
-  async update(data: Record<string, any>) {
-    return data
-  },
-  async delete(ids: number[]) {
-    return ids
-  }
-}
-
-const plusPageInstance = ref<PlusPageInstance | null>(null)
-const state = reactive<State>({
-  query: { groupName: '' },
-  currentRow: {},
-  visible: false,
-  detailsVisible: false,
-  confirmLoading: false,
-  isCreate: true,
-  isBatch: false,
-  selectedIds: [],
-  form: {
-    groupName: '',
-    remark: '',
-    userGroupId: undefined
-  },
-  rules: {
-    groupName: [
-      {
-        required: true,
-        message: '请输入',
-        trigger: 'blur'
-      }
-    ]
-  }
-})
-
-const dialogTitle = computed(() => (state.isCreate ? '新增' : '编辑'))
-const { buttons } = useTable()
-const columns: PlusColumn[] = [
-  {
-    label: '用户组名称',
-    width: 100,
-    prop: 'groupName'
-  },
-  {
-    label: '创建者',
-    width: 100,
-    prop: 'createBy'
-  },
-  {
-    label: '创建时间',
-    width: 170,
-    prop: 'createTime',
-    valueType: 'date-picker'
-  },
-  {
-    label: '更新者',
-    width: 100,
-    prop: 'updateBy',
-    hideInSearch: true
-  },
-  {
-    label: '更新时间',
-    width: 170,
-    prop: 'updateTime',
-    valueType: 'date-picker',
-    hideInSearch: true
-  },
-  {
-    label: '备注',
-    minWidth: 120,
-    hideInSearch: true,
-    valueType: 'textarea',
-    tableColumnProps: {
-      showOverflowTooltip: true
-    },
-    prop: 'code'
-  }
-]
-// 按钮
-buttons.value = [
-  {
-    text: '编辑',
-    code: 'update',
-    props: { type: 'success' }
-  },
-  {
-    text: '删除',
-    code: 'delete',
-    confirm: true,
-    props: { type: 'warning' }
-  },
-  {
-    text: '查看',
-    code: 'view',
-    props: { type: 'info' }
-  }
-]
-
-// 按钮操作
-const handleTableOption = ({ row, buttonRow }: ButtonsCallBackParams): void => {
-  state.currentRow = { ...row }
-  switch (buttonRow.code) {
-    case 'update':
-      state.form = { ...row } as any
-      state.isCreate = false
-      state.visible = true
-      break
-    case 'delete':
-      state.isBatch = false
-      handleDelete()
-      break
-    case 'view':
-      state.detailsVisible = true
-      break
-  }
-}
-
-// 重新请求列表接口
-const refresh = () => {
-  plusPageInstance.value?.getList()
-}
-
-// 删除
-const handleDelete = async (): Promise<void> => {
-  try {
-    const params = state.isBatch ? state.selectedIds : [state.currentRow.id as number]
-    await GroupServe.delete(params)
-    ElMessage.success('删除成功')
-    refresh()
-  } catch (error) {}
-}
-
-// 批量删除
-const handleBatchDelete = async () => {
-  if (!state.selectedIds.length) {
-    ElMessage.warning('请选择数据！')
-    return
-  }
-  try {
-    await ElMessageBox.confirm('确定删除所选数据', '提示')
-    state.isBatch = true
-    handleDelete()
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-// 选择
-const handleSelect = (data: any) => {
-  state.selectedIds = [...data].map(item => item.id)
-}
-
-// 创建
-const handleCreate = (): void => {
-  state.currentRow = {}
-  state.form = {
-    groupName: '',
-    remark: '',
-    userGroupId: undefined
-  }
-  state.isCreate = true
-  state.visible = true
-}
-
-// 取消
-const handleCancel = () => {
-  state.visible = false
-}
-
-// 提交表单成功
-const handleSubmit = async () => {
-  try {
-    state.confirmLoading = true
-    const params = { ...state.form, remark: state.form.remark || '' }
-    if (state.isCreate) {
-      await GroupServe.create(params)
-      ElMessage.success('创建成功')
-    } else {
-      await GroupServe.update(params)
-      ElMessage.success('更新成功')
-    }
-    handleCancel()
-    refresh()
-  } catch (error) {}
-  state.confirmLoading = false
-}
-
-const { form, confirmLoading, rules, currentRow, visible, detailsVisible } = toRefs(state)
-</script>

package/docs/examples/page/default-page.vue

@@ -1,160 +0,0 @@
-<template>
-  <div>
-    <PlusPage
-      :columns="tableConfig"
-      :request="getList"
-      :default-page-info="defaultPageInfo"
-      :default-page-size-list="[5, 20, 50]"
-      :pagination="{
-        background: true
-      }"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PlusColumn, PageInfo } from 'plus-pro-components'
-
-const getList = async (
-  query: PageInfo & {
-    status?: string
-    name?: string
-  }
-) => {
-  const { page = 1, pageSize = 5 } = query || {}
-  const total = 30
-  const List = Array.from({ length: total }).map((item, index) => {
-    return {
-      id: index,
-      name: index === 0 ? 'name'.repeat(20) : index + 'name',
-      status: String(index % 3),
-      tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
-      progress: 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
-    }
-  })
-
-  const pageList = List.filter(
-    (item, index) => index < pageSize * page && index >= pageSize * (page - 1)
-  )
-
-  // 等待2s
-  await new Promise(resolve => {
-    setTimeout(() => {
-      resolve('')
-    }, 2000)
-  })
-
-  return { data: pageList, success: true, total: List.length }
-}
-
-const defaultPageInfo = {
-  page: 1,
-  pageSize: 5
-}
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '名称',
-    tooltip: '名称最多显示6个字符',
-    width: 120,
-    prop: 'name',
-    tableColumnProps: {
-      showOverflowTooltip: true
-    }
-  },
-  {
-    label: '状态',
-    width: 120,
-    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: '标签',
-    width: 120,
-    prop: 'tag',
-    valueType: 'tag',
-    fieldProps: (value: string) => {
-      return { type: value }
-    }
-  },
-  {
-    label: '执行进度',
-    width: 200,
-    prop: 'progress',
-    valueType: 'progress',
-    fieldProps: (value: number) => {
-      const data =
-        value === 0
-          ? { status: 'exception' }
-          : value > 5
-          ? { status: 'warning' }
-          : value > 3
-          ? { status: 'success' }
-          : { status: 'exception' }
-
-      return data
-    }
-  },
-  {
-    label: '代码块',
-    width: 250,
-    prop: 'code',
-    hideInSearch: true,
-    valueType: 'code'
-  },
-  {
-    label: '评分',
-    width: 200,
-    prop: 'rate',
-    valueType: 'rate',
-    hideInSearch: true,
-    editable: true
-  },
-  {
-    label: '开关',
-    width: 100,
-    prop: 'switch',
-    hideInSearch: true,
-    valueType: 'switch',
-    editable: true
-  },
-  {
-    label: '时间',
-    prop: 'time',
-    valueType: 'date-picker',
-    hideInForm: true
-  }
-]
-</script>

package/docs/examples/page/default-search-values.vue

@@ -1,154 +0,0 @@
-<template>
-  <div>
-    <PlusPage :columns="tableConfig" :request="getList" :search="{ defaultValues }" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PlusColumn, PageInfo } from 'plus-pro-components'
-
-const getList = async (
-  query: PageInfo & {
-    status?: string
-    name?: string
-  }
-) => {
-  const { page = 1, pageSize = 20 } = query || {}
-  const total = 30
-  const List = Array.from({ length: total }).map((item, index) => {
-    return {
-      id: index,
-      name: index === 0 ? 'name'.repeat(20) : index + 'name',
-      status: String(index % 3),
-      tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
-      progress: 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
-    }
-  })
-
-  const pageList = List.filter(
-    (item, index) => index < pageSize * page && index >= pageSize * (page - 1)
-  )
-
-  // 等待2s
-  await new Promise(resolve => {
-    setTimeout(() => {
-      resolve('')
-    }, 2000)
-  })
-
-  return { data: pageList, success: true, total: List.length }
-}
-
-const defaultValues = {
-  name: 'name',
-  status: '0',
-  time: new Date()
-}
-
-const tableConfig: PlusColumn[] = [
-  {
-    label: '名称',
-    tooltip: '名称最多显示6个字符',
-    width: 120,
-    prop: 'name',
-    tableColumnProps: {
-      showOverflowTooltip: true
-    }
-  },
-  {
-    label: '状态',
-    width: 120,
-    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: '标签',
-    width: 120,
-    prop: 'tag',
-    valueType: 'tag',
-    fieldProps: (value: string) => {
-      return { type: value }
-    }
-  },
-  {
-    label: '执行进度',
-    width: 200,
-    prop: 'progress',
-    valueType: 'progress',
-    fieldProps: (value: number) => {
-      const data =
-        value === 0
-          ? { status: 'exception' }
-          : value > 5
-          ? { status: 'warning' }
-          : value > 3
-          ? { status: 'success' }
-          : { status: 'exception' }
-
-      return data
-    }
-  },
-  {
-    label: '代码块',
-    width: 250,
-    prop: 'code',
-    hideInSearch: true,
-    valueType: 'code'
-  },
-  {
-    label: '评分',
-    width: 200,
-    prop: 'rate',
-    valueType: 'rate',
-    hideInSearch: true,
-    editable: true
-  },
-  {
-    label: '开关',
-    width: 100,
-    prop: 'switch',
-    hideInSearch: true,
-    valueType: 'switch',
-    editable: true
-  },
-
-  {
-    label: '时间',
-    prop: 'time',
-    valueType: 'date-picker',
-    hideInForm: true
-  }
-]
-</script>