@wlydfe/pro-ui 0.2.19 → 0.2.21

package/docs/examples/steps-form/step-slots.vue

@@ -0,0 +1,134 @@
+<template>
+  <PlusStepsForm v-model="active" direction="vertical" :space="120" :data="stepForm" @next="next">
+    <template #step-1>
+      <h3>自定义第一步内容</h3>
+    </template>
+  </PlusStepsForm>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const stepForm = ref([
+  {
+    title: '第一步',
+    description: '这是第一步的描述内容'
+  },
+  {
+    title: '第二步',
+    description: '这是第二步的描述内容',
+    form: {
+      modelValue: {},
+      columns: [
+        {
+          label: '标签',
+          width: 120,
+          prop: 'tag'
+        },
+        {
+          label: '执行进度',
+          width: 200,
+          prop: 'progress'
+        },
+        {
+          label: '评分',
+          width: 200,
+          prop: 'rate',
+          valueType: 'rate'
+        },
+        {
+          label: '是否显示',
+          width: 100,
+          prop: 'switch',
+          valueType: 'switch'
+        }
+      ],
+      rules: {
+        tag: [
+          {
+            required: true,
+            message: '请输入标签'
+          }
+        ],
+        progress: [
+          {
+            required: true,
+            message: '请输入执行进度'
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: '第三步',
+    description: '这是第三步的描述内容',
+    form: {
+      modelValue: {},
+      columns: [
+        {
+          label: '时间',
+          prop: 'time',
+          valueType: 'date-picker'
+        },
+        {
+          label: '要求',
+          prop: 'demand',
+          valueType: 'checkbox',
+          options: [
+            {
+              label: '四六级',
+              value: '0'
+            },
+            {
+              label: '计算机二级证书',
+              value: '1'
+            },
+            {
+              label: '普通话证书',
+              value: '2'
+            }
+          ]
+        },
+        {
+          label: '奖励',
+          prop: 'price'
+        },
+        {
+          label: '提成',
+          prop: 'percentage'
+        },
+        {
+          label: '说明',
+          prop: 'desc',
+          valueType: 'textarea',
+          fieldProps: {
+            maxlength: 10,
+            showWordLimit: true,
+            autosize: { minRows: 2, maxRows: 4 }
+          }
+        }
+      ],
+      rules: {
+        time: [
+          {
+            required: true,
+            trigger: 'change',
+            message: '请选择时间'
+          }
+        ],
+        demand: [
+          {
+            required: true,
+            trigger: 'change',
+            message: '请选择要求'
+          }
+        ]
+      }
+    }
+  }
+])
+const active = ref(1)
+const next = (actives: number, values: any) => {
+  active.value = actives
+  console.log(actives, values, stepForm.value)
+}
+</script>

package/docs/examples/steps-form/vertical-stepsform.vue

@@ -0,0 +1,180 @@
+<template>
+  <PlusStepsForm v-model="active" direction="vertical" :space="120" :data="stepForm" @next="next" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const stepForm = ref([
+  {
+    title: '第一步',
+    description: '这是第一步的描述内容',
+    form: {
+      modelValue: {},
+      columns: [
+        {
+          label: '名称',
+          width: 120,
+          prop: 'name',
+          valueType: 'copy',
+          tooltip: '名称最多显示6个字符'
+        },
+        {
+          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'
+            }
+          ]
+        }
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入名称'
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: '第二步',
+    description: '这是第二步的描述内容',
+    form: {
+      labelWidth: '100',
+      modelValue: {},
+      columns: [
+        {
+          label: '标签',
+          width: 120,
+          prop: 'tag'
+        },
+        {
+          label: '执行进度',
+          width: 200,
+          prop: 'progress'
+        },
+        {
+          label: '评分',
+          width: 200,
+          prop: 'rate',
+          valueType: 'rate'
+        },
+        {
+          label: '是否显示',
+          width: 100,
+          prop: 'switch',
+          valueType: 'switch'
+        }
+      ],
+      rules: {
+        tag: [
+          {
+            required: true,
+            message: '请输入标签'
+          }
+        ],
+        progress: [
+          {
+            required: true,
+            message: '请输入执行进度'
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: '第三步',
+    description: '这是第三步的描述内容',
+    form: {
+      modelValue: {},
+      columns: [
+        {
+          label: '时间',
+          prop: 'time',
+          valueType: 'date-picker'
+        },
+        {
+          label: '要求',
+          prop: 'demand',
+          valueType: 'checkbox',
+          options: [
+            {
+              label: '四六级',
+              value: '0'
+            },
+            {
+              label: '计算机二级证书',
+              value: '1'
+            },
+            {
+              label: '普通话证书',
+              value: '2'
+            }
+          ]
+        },
+        {
+          label: '奖励',
+          prop: 'price'
+        },
+        {
+          label: '提成',
+          prop: 'percentage'
+        },
+        {
+          label: '说明',
+          prop: 'desc',
+          valueType: 'textarea',
+          fieldProps: {
+            maxlength: 10,
+            showWordLimit: true,
+            autosize: { minRows: 2, maxRows: 4 }
+          }
+        }
+      ],
+      rules: {
+        time: [
+          {
+            required: true,
+            trigger: 'change',
+            message: '请选择时间'
+          }
+        ],
+        demand: [
+          {
+            required: true,
+            trigger: 'change',
+            message: '请选择要求'
+          }
+        ]
+      }
+    }
+  }
+])
+const active = ref(1)
+const next = (actives: number, values: any) => {
+  active.value = actives
+  console.log(actives, values, stepForm.value)
+}
+</script>

package/docs/examples/table/action-bar-directives.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <PlusTable
+      key="1"
+      :columns="tableConfig"
+      :table-data="tableData"
+      :action-bar="{ buttons, showNumber: 4 }"
+      @clickAction="handleClickButton"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { resolveDirective } from 'vue'
+import { useTable } from 'plus-pro-components'
+import type { PlusColumn, ButtonsCallBackParams } 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 { tableData, buttons } = useTable<TableRow[]>()
+
+const permissionList = ['sys.view', 'sys.edit', 'sys.copy']
+
+/**
+ * 正常可引用（导入）写法
+ */
+const permission = {
+  mounted(el: HTMLElement, binding) {
+    const { value } = binding
+
+    const hasButtonPermission = permissionList.includes(value)
+    !hasButtonPermission && el.parentElement?.removeChild(el)
+  }
+}
+
+/**
+ * 如果 指令已经在全局注册，app.directive('copy',.....)，则需要使用resolveDirective解析出指令
+ *
+ * copy  指令已经在全局注册
+ */
+const copy = resolveDirective('copy')
+
+buttons.value = [
+  {
+    // 查看
+    text: '查看',
+    code: 'view',
+    props: {
+      type: 'info'
+    },
+    //  show 字段控制权限
+    show: () => permissionList.includes('sys.view')
+  },
+  {
+    // 修改
+    text: '修改',
+    code: 'edit',
+    props: {
+      type: 'primary'
+    },
+    directives: [
+      // 相当于 v-permission="'sys.edit'"
+      [permission, 'sys.edit']
+    ]
+  },
+  {
+    // 删除
+    text: '删除',
+    code: 'delete',
+    props: {
+      type: 'danger'
+    },
+    confirm: {
+      options: { draggable: true }
+    },
+    directives: [
+      // 相当于 v-permission="'sys.del'"
+      [permission, 'sys.del']
+    ]
+  },
+  {
+    text: '复制',
+    code: 'copy',
+    props: {
+      type: 'success'
+    },
+    directives: [
+      // 相当于 v-permission="'sys.del'"
+      [permission, 'sys.copy'],
+      // 相当于 v-copy="'v-copy 复制的值'"
+      [copy, 'v-copy 复制的值']
+    ]
+  }
+]
+
+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 } = await TestServe.getList()
+    tableData.value = data || []
+  } catch (error) {}
+}
+getList()
+
+const handleClickButton = (data: ButtonsCallBackParams) => {
+  console.log(data.buttonRow.text)
+}
+</script>

package/docs/examples/table/action-bar-event.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <PlusTable
+      :columns="tableConfig"
+      :table-data="tableData"
+      :action-bar="{ buttons, width: '100px' }"
+      @clickAction="handleClickButton"
+      @clickActionConfirmCancel="handleClickCancel"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { computed } from 'vue'
+import { useTable } from 'plus-pro-components'
+import type { PlusColumn, ButtonsCallBackParams } 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 { tableData, buttons } = useTable<TableRow[]>()
+
+buttons.value = [
+  {
+    // 修改
+    text: '修改',
+    code: 'edit',
+    props: {
+      type: 'primary'
+    },
+    show: computed(() => true),
+    onClick(params: ButtonsCallBackParams) {
+      if (params?.formRefs) {
+        // isEdit v0.1.8 新增
+        const isEdit = params.formRefs[0].isEdit.value
+        isEdit ? params.formRefs[0]?.stopCellEdit() : params.formRefs[0]?.startCellEdit()
+      }
+    }
+  },
+  {
+    // 删除
+    text: '删除',
+    code: 'delete',
+    props: {
+      type: 'danger'
+    },
+    confirm: {
+      options: { draggable: true }
+    },
+    onClick(params: ButtonsCallBackParams) {
+      console.log(params, 'onClick')
+    },
+    onConfirm(params: ButtonsCallBackParams) {
+      console.log(params, 'onConfirm')
+    },
+    onCancel(params: ButtonsCallBackParams) {
+      console.log(params, 'onCancel')
+    }
+  }
+]
+
+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 } = await TestServe.getList()
+    tableData.value = data || []
+  } catch (error) {}
+}
+getList()
+
+const handleClickButton = (params: ButtonsCallBackParams) => {
+  console.log(params, 'handleClickButton')
+}
+const handleClickCancel = (params: ButtonsCallBackParams) => {
+  console.log(params, 'handleClickCancel')
+}
+</script>