@wlydfe/pro-ui 0.2.21 → 0.2.24

package/docs/examples/search/basic.vue

@@ -1,162 +0,0 @@
-<template>
-  <el-card>
-    <PlusSearch
-      v-model="state"
-      :columns="columns"
-      :show-number="2"
-      @change="handleChange"
-      @search="handleSearch"
-      @reset="handleReset"
-    />
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import type { PlusColumn } from 'plus-pro-components'
-
-const state = ref({
-  status: '0',
-  time: new Date().toString()
-})
-
-const columns: PlusColumn[] = [
-  {
-    label: '名称',
-    prop: 'name',
-    valueType: 'copy',
-    tooltip: '名称最多显示6个字符'
-  },
-  {
-    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')
-}
-</script>

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

@@ -1,100 +0,0 @@
-<template>
-  <div>
-    <PlusSearch
-      v-model="state"
-      :columns="columns"
-      :default-values="defaultValues"
-      :has-unfold="false"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PlusColumn } from 'plus-pro-components'
-import { ref } from 'vue'
-
-const defaultValues = {
-  name: 'name',
-  time: new Date()
-}
-
-const state = ref({
-  name: 'name',
-  status: '0',
-  progress: '0',
-  tag: '0-0-0',
-  time: new Date()
-})
-
-const columns: 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: '时间',
-    prop: 'time',
-    valueType: 'date-picker'
-  }
-]
-</script>

package/docs/examples/search/hide-label.vue

@@ -1,56 +0,0 @@
-<template>
-  <el-card>
-    <PlusSearch v-model="state" :columns="columns" :has-label="false" :has-unfold="false" />
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import type { PlusColumn } from 'plus-pro-components'
-
-const state = ref({
-  status: '0',
-  time: new Date().toString()
-})
-
-const columns: PlusColumn[] = [
-  {
-    label: '名称',
-    prop: 'name',
-    valueType: 'copy',
-    tooltip: '名称最多显示6个字符'
-  },
-  {
-    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'
-  }
-]
-</script>

package/docs/examples/search/hide-unfold.vue

@@ -1,135 +0,0 @@
-<template>
-  <el-card>
-    <PlusSearch
-      v-model="state"
-      :columns="columns"
-      :has-unfold="false"
-      @change="handleChange"
-      @search="handleSearch"
-      @reset="handleReset"
-    />
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import type { PlusColumn } from 'plus-pro-components'
-
-const state = ref({
-  status: '0',
-  time: new Date().toString()
-})
-
-const columns: PlusColumn[] = [
-  {
-    label: '名称',
-    prop: 'name',
-    valueType: 'copy',
-    tooltip: '名称最多显示6个字符'
-  },
-  {
-    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: '万柏林区'
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-]
-
-const handleChange = (values: any) => {
-  console.log(values, 'change')
-}
-const handleSearch = (values: any) => {
-  console.log(values, 'search')
-}
-const handleReset = () => {
-  console.log('handleReset')
-}
-</script>

package/docs/examples/search/search-footer.vue

@@ -1,175 +0,0 @@
-<template>
-  <div>
-    <PlusSearch v-model="state" :columns="columns">
-      <template #footer="{ handleReset, handleSearch, handleUnfold, isShowUnfold }">
-        <div style="display: flex">
-          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
-          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
-          <el-button :icon="isShowUnfold ? ArrowUp : ArrowDown" @click="handleUnfold">
-            {{ isShowUnfold ? '收起' : '展开' }}
-          </el-button>
-        </div>
-      </template>
-    </PlusSearch>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PlusColumn } from 'plus-pro-components'
-/**
- * @wlydfe/pro-ui-utils 是辅助plus-pro-components的工具包，如果需要使用，需要单独安装
- * 参考文档 https://plus-pro-components.com/api/utils/
- */
-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 { Search, Refresh, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
-
-const state = ref({
-  status: '0',
-  async: '0',
-  promise: '0-0-0',
-  time: new Date().toString()
-})
-
-const columns: 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: '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, () => '点击上传')
-        )
-      ])
-    }
-  },
-  {
-    label: '时间',
-    prop: 'time',
-    valueType: 'date-picker',
-    hideInForm: true
-  }
-]
-</script>