@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/play/src/views/page.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <PlusPage ref="plusPageRef" :columns="tableConfig" :search="{ hasSearchIcon: false, buttonOrder: ['search','reset'] }" :request="getList" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PlusColumn, PageInfo } from '@wlydfe/pro-ui-types'
+import { fileToDataURL } from '@wlydfe/pro-ui-utils'
+import type { UploadFile } from 'element-plus'
+import { ElUpload, ElButton, ElImage } from 'element-plus'
+import { h, Fragment, ref } from 'vue'
+import type { PlusPageInstance } from '@wlydfe/pro-ui-components'
+
+const getList = async (
+  query: Partial<PageInfo> & {
+    status?: string
+    name?: string
+  }
+) => {
+  console.log(query)
+
+  const { page = 1, pageSize = 20, status, name } = query || {}
+  const total = 1000
+  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 mockList = List.filter(item => {
+    if (status && status !== item.status) {
+      return false
+    }
+    if (name && name !== item.name) {
+      return false
+    }
+
+    return true
+  })
+
+  const pageList = mockList.filter(
+    (item, index) => index < pageSize * page && index >= pageSize * (page - 1)
+  )
+
+  // 等待2s
+  await new Promise(resolve => {
+    setTimeout(() => {
+      resolve('')
+    }, 2000)
+  })
+
+  return { data: pageList, success: true, total: mockList.length }
+}
+
+const plusPageRef = ref<PlusPageInstance>()
+const tableConfig: PlusColumn[] = [
+  {
+    label: '名称',
+    tooltip: '名称最多显示6个字符',
+    width: 120,
+    hideInSearch: false,
+    prop: 'name',
+    tableColumnProps: {
+      showOverflowTooltip: true
+    },
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    hideInSearch: false,
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ],
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    },
+    fieldProps: {
+      onChange: async (value: string | number) => {
+        plusPageRef.value?.setSearchFieldsValue?.({
+          'name': ''
+        })
+        console.log('value=============', value)
+      }
+    }
+  },
+  {
+    label: '标签',
+    width: 120,
+    hideInSearch: false,
+    prop: 'tag',
+    valueType: 'tag',
+    fieldProps: (value: string) => {
+      return { type: value }
+    },
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  },
+  {
+    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
+    },
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  },
+  {
+    label: '代码块',
+    width: 250,
+    prop: 'code',
+    hideInSearch: true,
+    valueType: 'code',
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  },
+  {
+    label: '评分',
+    width: 200,
+    prop: 'rate',
+    valueType: 'rate',
+    hideInSearch: false,
+    editable: true,
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  },
+  {
+    label: '开关',
+    width: 100,
+    prop: 'switch',
+    hideInSearch: true,
+    valueType: 'switch',
+    editable: true,
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  },
+  {
+    label: '图片',
+    prop: 'img',
+    width: 100,
+    hideInSearch: true,
+    valueType: 'img',
+    renderField(value, onChange) {
+      // 自定义上传
+      const handleHttpRequest = async ({ file, onError, onSuccess }: any) => {
+        try {
+          onSuccess(file)
+        } catch (error: any) {
+          onError(error)
+        }
+        return file
+      }
+
+      return h(Fragment, [
+        h(ElImage as any, {
+          src: value,
+          previewSrcList: [value],
+          style: value
+            ? {
+                width: '60px',
+                marginRight: '10px'
+              }
+            : {}
+        }),
+        h(
+          ElUpload,
+          {
+            action: '',
+            httpRequest: handleHttpRequest,
+            onChange: async (data: UploadFile) => {
+              const base64 = await fileToDataURL(data.raw as File)
+              // 调用 renderField 的onChange 回调把值传给表单
+              onChange(base64)
+            }
+          },
+          () => h(ElButton, () => '点击上传')
+        )
+      ])
+    },
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  },
+  {
+    label: '时间',
+    prop: 'time',
+    valueType: 'date-picker',
+    hideInForm: true,
+    colProps: {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      xl: 3
+    }
+  }
+]
+</script>

package/packages/play/src/views/pagination.vue

@@ -0,0 +1,10 @@
+<template>
+  <PlusPagination v-model="page" :total="100" />
+  {{ page }}
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const page = ref()
+</script>

package/packages/play/src/views/popover.vue

@@ -0,0 +1,46 @@
+<template>
+  <PlusPopover placement="top-start" trigger="hover" title="Title" :width="200">
+    this is content, this is content, this is content
+    <template #reference>
+      <el-button>Hover to activate</el-button>
+    </template>
+  </PlusPopover>
+
+  <PlusPopover
+    placement="bottom"
+    title="Title"
+    :width="200"
+    trigger="click"
+    content="this is content, this is content, this is content"
+  >
+    <template #reference>
+      <el-button style="margin-left: 20px">Click to activate</el-button>
+    </template>
+  </PlusPopover>
+
+  <PlusPopover
+    title="Title"
+    :width="200"
+    trigger="contextmenu"
+    content="this is content, this is content, this is content"
+  >
+    <template #reference>
+      <el-button style="margin-left: 20px">Contextmenu to activate</el-button>
+    </template>
+  </PlusPopover>
+
+  <PlusPopover :visible="visible" placement="bottom" title="Title" trigger="click" :width="200">
+    this is content, this is content, this is content
+    <template #reference>
+      <el-button style="margin-left: 20px" @click="visible = !visible"
+        >Manual to activate</el-button
+      >
+    </template>
+  </PlusPopover>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/packages/play/src/views/radio.vue

@@ -0,0 +1,32 @@
+<template>
+  <PlusRadio v-model="state.value" :options="state.options" @change="change" />
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import type { OptionsRow, RecordType } from 'plus-pro-components'
+
+type State = {
+  options: OptionsRow<RecordType>[]
+  value: number
+}
+
+const state = reactive<State>({
+  options: [
+    { label: '选项一', value: 1 },
+    { label: '选项二', value: 2 }
+  ],
+  value: 1
+})
+
+watch(
+  () => state.value,
+  val => {
+    console.log(val)
+  },
+  { immediate: true }
+)
+const change = (val: string | number | boolean) => {
+  console.log(val)
+}
+</script>

package/packages/play/src/views/render.vue

@@ -0,0 +1 @@
+<template>render</template>

package/packages/play/src/views/search.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-card>
+    <PlusSearch
+      v-model="state"
+      :columns="columns"
+      :show-number="4"
+      @change="handleChange"
+      @search="handleSearch"
+      @reset="handleReset"
+      @collapse="onCollapse"
+    />
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import type { PlusColumn } from '@wlydfe/pro-ui-types'
+
+const state = ref({
+  status: '0',
+  time: new Date().toString()
+})
+
+const columns: PlusColumn[] = [
+  {
+    label: '名称',
+    prop: 'name',
+    valueType: 'copy',
+    tooltip: '名称最多显示6个字符',
+    hideInSearch: computed(() => 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: 'time',
+    valueType: 'date-picker'
+  },
+  {
+    label: '数量',
+    prop: 'number',
+    valueType: 'input-number',
+    fieldProps: {
+      precision: 2,
+      step: 2
+    }
+  },
+  {
+    label: '城市',
+    prop: 'city',
+    valueType: 'cascader',
+
+    options: [
+      {
+        value: '0',
+        label: '陕西',
+        children: [
+          {
+            value: '0-0',
+            label: '西安',
+            children: [
+              {
+                value: '0-0-0',
+                label: '新城区'
+              },
+              {
+                value: '0-0-1',
+                label: '高新区'
+              },
+              {
+                value: '0-0-2',
+                label: '灞桥区'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: '1',
+        label: '山西',
+        children: [
+          {
+            value: '1-0',
+            label: '太原',
+            children: [
+              {
+                value: '1-0-0',
+                label: '小店区'
+              },
+              {
+                value: '1-0-1',
+                label: '古交市'
+              },
+              {
+                value: '1-0-2',
+                label: '万柏林区'
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: '地区',
+    prop: 'place',
+    tooltip: '请精确到门牌号',
+    fieldProps: {
+      placeholder: '请精确到门牌号'
+    }
+  },
+  {
+    label: '到期时间',
+    prop: 'endTime',
+    valueType: 'date-picker',
+    fieldProps: {
+      type: 'datetimerange',
+      startPlaceholder: '请选择开始时间',
+      endPlaceholder: '请选择结束时间'
+    }
+  },
+  {
+    label: '奖励',
+    prop: 'price'
+  },
+  {
+    label: '提成',
+    prop: 'percentage'
+  }
+]
+
+const handleChange = (values: any) => {
+  console.log(values, 'change')
+}
+const handleSearch = (values: any) => {
+  console.log(values, 'search')
+}
+const handleReset = () => {
+  console.log('handleReset')
+}
+const onCollapse = (isShowUnfold: boolean) => {
+  console.log('onCollapse', isShowUnfold)
+}
+</script>

package/packages/play/src/views/sidebar.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="sidebar">
+    <PlusSidebar :routes="routes" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { routes } from '../router/index'
+</script>
+
+<style lang="scss">
+.sidebar {
+  .plus-sidebar.el-menu--vertical {
+    height: 100vh;
+  }
+}
+</style>