@wlydfe/pro-ui 0.2.21 → 0.2.23

package/docs/examples/form/group-header.vue

@@ -1,307 +0,0 @@
-<template>
-  <div>
-    <PlusForm
-      v-model="state"
-      :group="group"
-      :rules="rules"
-      @change="handleChange"
-      @submit="handleSubmit"
-      @submit-error="handleSubmitError"
-      @reset="handleReset"
-    >
-      <template #group-header="{ title, icon }">
-        <div class="custom-group-header">
-          <span>
-            {{ title }}
-            <el-icon> <component :is="icon" /> </el-icon>
-          </span>
-          <el-button type="primary"> 添加</el-button>
-        </div>
-      </template>
-    </PlusForm>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import type { FieldValues, PlusColumn, PlusFormGroupRow } from 'plus-pro-components'
-import { CreditCard, Calendar, Soccer } from '@element-plus/icons-vue'
-
-const state = ref({
-  status: '0',
-  name: '',
-  rate: 4,
-  progress: 100,
-  switch: true,
-  time: new Date().toString(),
-  img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-})
-
-const rules = {
-  name: [
-    {
-      required: true,
-      message: '请输入名称'
-    }
-  ],
-  tag: [
-    {
-      required: true,
-      message: '请输入标签'
-    }
-  ]
-}
-
-const group: PlusFormGroupRow[] = [
-  {
-    title: '第一分组',
-    icon: CreditCard,
-    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'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    title: '第二分组',
-    icon: Calendar,
-    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'
-      }
-    ]
-  },
-  {
-    title: '第三分组',
-    icon: Soccer,
-    columns: [
-      {
-        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: 'lng',
-        tooltip: '请保留两位小数'
-      },
-      {
-        label: '纬度',
-        prop: 'lat',
-        tooltip: '请保留两位小数'
-      },
-      {
-        label: '要求',
-        prop: 'demand',
-        valueType: 'checkbox',
-        options: [
-          {
-            label: '四六级',
-            value: '0'
-          },
-          {
-            label: '计算机二级证书',
-            value: '1'
-          },
-          {
-            label: '普通话证书',
-            value: '2'
-          }
-        ]
-      },
-      {
-        label: '梦想',
-        prop: 'gift',
-        valueType: 'radio',
-        options: [
-          {
-            label: '诗',
-            value: '0'
-          },
-          {
-            label: '远方',
-            value: '1'
-          },
-          {
-            label: '美食',
-            value: '2'
-          }
-        ]
-      },
-      {
-        label: '到期时间',
-        prop: 'endTime',
-        valueType: 'date-picker',
-        fieldProps: {
-          type: 'datetimerange',
-          startPlaceholder: '请选择开始时间',
-          endPlaceholder: '请选择结束时间'
-        }
-      },
-      {
-        label: '奖励',
-        prop: 'price'
-      },
-      {
-        label: '提成',
-        prop: 'percentage'
-      },
-      {
-        label: '说明',
-        prop: 'desc',
-        valueType: 'textarea',
-        fieldProps: {
-          maxlength: 10,
-          showWordLimit: true,
-          autosize: { minRows: 2, maxRows: 4 }
-        }
-      }
-    ]
-  }
-]
-
-const handleChange = (values: FieldValues, prop: PlusColumn) => {
-  console.log(values, prop, 'change')
-}
-const handleSubmit = (values: FieldValues) => {
-  console.log(values, 'Submit')
-}
-const handleSubmitError = (err: any) => {
-  console.log(err, 'err')
-}
-const handleReset = () => {
-  console.log('handleReset')
-}
-</script>
-
-<style lang="scss" scoped>
-.custom-group-header {
-  display: flex;
-  align-items: center;
-  color: var(--el-color-primary);
-  justify-content: space-between;
-  .el-icon {
-    margin-right: 5px;
-  }
-}
-</style>

package/docs/examples/form/group-hide.vue

@@ -1,261 +0,0 @@
-<template>
-  <div>
-    <el-button type="primary" style="margin-bottom: 10px" @click="toggleHideInGroup">
-      动态隐藏分组表单
-    </el-button>
-    <PlusForm v-model="state" :group="group" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-import type { PlusFormGroupRow } from 'plus-pro-components'
-import { CreditCard, Calendar, Soccer } from '@element-plus/icons-vue'
-
-const state = ref({
-  status: '0',
-  name: '',
-  rate: 4,
-  progress: 100,
-  switch: true,
-  time: new Date().toString(),
-  img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-})
-const isHideInGroup = ref(false)
-
-const group: PlusFormGroupRow[] = [
-  {
-    title: '第一分组',
-    icon: CreditCard,
-    hideInGroup: true,
-    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'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    title: '第二分组',
-    icon: Calendar,
-    hideInGroup: computed(() => {
-      return isHideInGroup.value
-    }),
-    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'
-      }
-    ]
-  },
-  {
-    title: '第三分组',
-    icon: Soccer,
-    columns: [
-      {
-        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: 'lng',
-        tooltip: '请保留两位小数'
-      },
-      {
-        label: '纬度',
-        prop: 'lat',
-        tooltip: '请保留两位小数'
-      },
-      {
-        label: '要求',
-        prop: 'demand',
-        valueType: 'checkbox',
-        options: [
-          {
-            label: '四六级',
-            value: '0'
-          },
-          {
-            label: '计算机二级证书',
-            value: '1'
-          },
-          {
-            label: '普通话证书',
-            value: '2'
-          }
-        ]
-      },
-      {
-        label: '梦想',
-        prop: 'gift',
-        valueType: 'radio',
-        options: [
-          {
-            label: '诗',
-            value: '0'
-          },
-          {
-            label: '远方',
-            value: '1'
-          },
-          {
-            label: '美食',
-            value: '2'
-          }
-        ]
-      },
-      {
-        label: '到期时间',
-        prop: 'endTime',
-        valueType: 'date-picker',
-        fieldProps: {
-          type: 'datetimerange',
-          startPlaceholder: '请选择开始时间',
-          endPlaceholder: '请选择结束时间'
-        }
-      },
-      {
-        label: '奖励',
-        prop: 'price'
-      },
-      {
-        label: '提成',
-        prop: 'percentage'
-      },
-      {
-        label: '说明',
-        prop: 'desc',
-        valueType: 'textarea',
-        fieldProps: {
-          maxlength: 10,
-          showWordLimit: true,
-          autosize: { minRows: 2, maxRows: 4 }
-        }
-      }
-    ]
-  }
-]
-
-const toggleHideInGroup = () => {
-  isHideInGroup.value = !isHideInGroup.value
-}
-</script>