@epic-designer/antd 1.0.5

package/src/time-picker/index.ts

@@ -0,0 +1,192 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).TimePicker,
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'time',
+      },
+      {
+        field: 'componentProps.placeholder',
+        label: '占位内容',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.format',
+        label: '显示格式',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.valueFormat',
+        label: '数据格式',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.hourStep',
+        label: '小时选项间隔',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.minuteStep',
+        label: '分钟选项间隔',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.secondStep',
+        label: '秒选项间隔',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'bottomLeft',
+              value: 'bottomLeft',
+            },
+            {
+              label: 'bottomRight',
+              value: 'bottomRight',
+            },
+            {
+              label: 'topLeft',
+              value: 'topLeft',
+            },
+            {
+              label: 'topRight',
+              value: 'topRight',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.placement',
+        label: '弹出框位置',
+        type: 'select',
+      },
+      {
+        changeSync: true,
+        field: 'componentProps.use12Hours',
+        label: '12小时制',
+        onChange({ value, values }) {
+          values.componentProps.defaultValue = null;
+          if (value) {
+            values.componentProps.format = 'h:mm:ss a';
+            values.componentProps.valueFormat = 'h:mm:ss a';
+          } else {
+            values.componentProps.format = 'HH:mm:ss';
+            values.componentProps.valueFormat = 'HH:mm:ss';
+          }
+        },
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: 'componentProps.bordered',
+        label: '无边框',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.inputReadOnly',
+        label: '禁止键盘输入',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.allowClear',
+        label: '可清空',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+      {
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '值变化时',
+        type: 'change',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      format: 'HH:mm:ss',
+      placeholder: '请输入',
+      valueFormat: 'HH:mm:ss',
+    },
+    field: 'time',
+    input: true,
+    label: '时间选择器',
+    type: 'time',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--time-line',
+  sort: 920,
+} as ComponentConfigModel;

package/src/upload-file/index.ts

@@ -0,0 +1,90 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'modelValue',
+  component: () => import('./uploadFile.vue'),
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.action',
+        label: '请求地址',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'text',
+              value: 'text',
+            },
+            {
+              label: 'picture',
+              value: 'picture',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.listType',
+        label: '列表样式',
+        type: 'select',
+      },
+      {
+        field: 'componentProps.multiple',
+        label: '多选',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          min: 0,
+          placeholder: '请输入',
+        },
+        field: 'componentProps.maxCount',
+        label: '允许上传最大数量',
+        type: 'number',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          ruleType: 'string',
+        },
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      action: 'https://examples.epicjs.cn/epic-mock/common/upload',
+    },
+    field: 'uploadFile',
+    input: true,
+    label: '上传文件',
+    type: 'upload-file',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--upload-rounded',
+  sort: 920,
+} as ComponentConfigModel;

package/src/upload-file/uploadFile.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type {
+  UploadChangeParam,
+  UploadFile,
+  UploadProps,
+} from 'ant-design-vue';
+
+import { computed, nextTick, ref, useAttrs, watch } from 'vue';
+
+import { pluginManager } from '@epic-designer/manager';
+import { getUUID } from '@epic-designer/utils';
+import { Button, Form, message, Upload } from 'ant-design-vue';
+
+const props = withDefaults(
+  defineProps<{
+    maxCount?: number;
+    modelValue?: string;
+  }>(),
+  {
+    maxCount: 99,
+    modelValue: '',
+  },
+);
+
+const emits = defineEmits(['update:modelValue', 'change']);
+const formItemContext = Form.useInjectFormItemContext();
+const attrs = useAttrs();
+const fileList = ref<UploadProps['fileList']>([]);
+let urlString = '';
+
+watch(
+  () => fileList.value,
+  (list) => {
+    urlString = list!
+      .filter((file) => file.status === 'done')
+      .map((file) => file.url)
+      .join(',');
+    emits('update:modelValue', urlString);
+    emits('change', urlString);
+    formItemContext.onFieldChange();
+  },
+);
+// 处理传递进来的值
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    // urlString 等于 data 不进行处理
+    if (urlString === modelValue) return;
+
+    if (modelValue === '') {
+      fileList.value = [];
+      return;
+    }
+
+    if (modelValue && fileList.value) {
+      fileList.value = modelValue.split(',').map((url) => ({
+        name: url,
+        status: 'done',
+        uid: getUUID() as string,
+        url,
+      }));
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+function handleUpdate(e: UploadProps['fileList']): void {
+  nextTick(() => {
+    fileList.value = e;
+  });
+}
+
+// 处理数据结果
+const handleChange = (info: UploadChangeParam): void => {
+  if (info.file.status === 'uploading') {
+    return;
+  }
+
+  if (info.file.status === 'done') {
+    // Get this url from response in real world.
+    const url: string | undefined = info.file.response?.data?.url;
+    if (!info.file.url && !url) {
+      info.file.status = 'error';
+      message.error('上传失败');
+      return;
+    }
+    // 赋值url
+    info.file.url = url;
+    info.file.thumbUrl = url;
+  }
+
+  if (info.file.status === 'error') {
+    message.error('upload error');
+  }
+};
+
+// 上传前处理
+const beforeUpload = (): void => {
+  // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  // if (!isJpgOrPng) {
+  //   message.error('您只能上传JPG/PNG文件!');
+  // }
+  // const isLt2M = file.size / 1024 / 1024 < 2;
+  // if (!isLt2M) {
+  //   message.error('图片大小超过 2MB!');
+  // }
+  // return isJpgOrPng && isLt2M;
+};
+
+const getUploadProps = computed<UploadProps>(() => ({
+  ...attrs,
+  headers: pluginManager.global.axiosConfig?.headers,
+  'onBefore-upload': beforeUpload,
+  onChange: handleChange,
+  onPreview: handlePreview,
+  'file-list': fileList.value,
+  'onUpdate:file-list': handleUpdate,
+}));
+
+/**
+ * 预览功能
+ * @param {*} e
+ */
+function handlePreview(e: UploadFile): void {
+  console.log(e);
+  if (!e.url) return;
+  window.open(e.url, '_blank');
+}
+</script>
+
+<template>
+  <div class="epic-upload-file">
+    <Upload v-bind="getUploadProps">
+      <Button
+        class="flex items-center"
+        v-if="(fileList?.length ?? 0) < props.maxCount"
+      >
+        <span
+          class="icon--epic icon--epic--cloud-upload-outlined text-lg"
+        ></span>
+        <div class="ant-upload-text">上传文件</div>
+      </Button>
+    </Upload>
+  </div>
+</template>

package/src/upload-image/index.ts

@@ -0,0 +1,71 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'modelValue',
+  component: () => import('./uploadImage.vue'),
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.action',
+        label: '请求地址',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.multiple',
+        label: '多选',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          min: 0,
+          placeholder: '请输入',
+        },
+        field: 'componentProps.maxCount',
+        label: '允许上传最大数量',
+        type: 'number',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          ruleType: 'string',
+        },
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      action: 'https://examples.epicjs.cn/epic-mock/common/upload',
+    },
+    field: 'uploadImage',
+    input: true,
+    label: '上传图片',
+    type: 'upload-image',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--imagesmode-outline-rounded',
+  sort: 920,
+} as ComponentConfigModel;

package/src/upload-image/uploadImage.vue

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import type {
+  UploadChangeParam,
+  UploadFile,
+  UploadProps,
+} from 'ant-design-vue';
+
+import { computed, nextTick, ref, useAttrs, watch } from 'vue';
+
+import { pluginManager } from '@epic-designer/manager';
+import { getUUID } from '@epic-designer/utils';
+import { Form, Image, message, Upload } from 'ant-design-vue';
+
+const props = withDefaults(
+  defineProps<{
+    maxCount?: number;
+    modelValue?: string;
+  }>(),
+  {
+    maxCount: 99,
+    modelValue: '',
+  },
+);
+
+const emits = defineEmits(['update:modelValue', 'change']);
+const formItemContext = Form.useInjectFormItemContext();
+const attrs = useAttrs();
+const fileList = ref<UploadProps['fileList']>([]);
+let urlString = '';
+
+const imgUrl = ref('');
+const visible = ref(false);
+const setVisible = (value: boolean): void => {
+  visible.value = value;
+};
+
+watch(
+  () => fileList.value,
+  (list) => {
+    urlString = list!
+      .filter((file) => file.status === 'done')
+      .map((file) => file.url)
+      .join(',');
+    emits('update:modelValue', urlString);
+    emits('change', urlString);
+    formItemContext.onFieldChange();
+  },
+);
+// 处理传递进来的值
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    // urlString 等于 data 不进行处理
+    if (urlString === modelValue) return;
+
+    if (modelValue === '') {
+      fileList.value = [];
+      return;
+    }
+
+    if (modelValue && fileList.value) {
+      fileList.value = modelValue.split(',').map((url) => ({
+        name: url,
+        status: 'done',
+        uid: getUUID() as string,
+        url,
+      }));
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+function handleUpdate(e: UploadProps['fileList']): void {
+  nextTick(() => {
+    fileList.value = e;
+  });
+}
+
+// 处理数据结果
+const handleChange = (info: UploadChangeParam): void => {
+  if (info.file.status === 'uploading') {
+    return;
+  }
+
+  if (info.file.status === 'done') {
+    // Get this url from response in real world.
+    const url: string | undefined = info.file.response?.data?.url;
+    if (!info.file.url && !url) {
+      info.file.status = 'error';
+      message.error('上传失败');
+      return;
+    }
+    // 赋值url
+    info.file.url = url;
+    info.file.thumbUrl = url;
+  }
+
+  if (info.file.status === 'error') {
+    message.error('upload error');
+  }
+};
+
+// 上传前处理
+const beforeUpload = (): void => {
+  // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  // if (!isJpgOrPng) {
+  //   message.error('您只能上传JPG/PNG文件!');
+  // }
+  // const isLt2M = file.size / 1024 / 1024 < 2;
+  // if (!isLt2M) {
+  //   message.error('图片大小超过 2MB!');
+  // }
+  // return isJpgOrPng && isLt2M;
+};
+
+const getUploadProps = computed<UploadProps>(() => ({
+  ...attrs,
+  accept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+  headers: pluginManager.global.axiosConfig?.headers,
+  'onBefore-upload': beforeUpload,
+  onChange: handleChange,
+  onPreview: handlePreview,
+  'file-list': fileList.value,
+  'list-type': 'picture-card',
+  'onUpdate:file-list': handleUpdate,
+}));
+
+/**
+ * 预览功能
+ * @param {*} e
+ */
+function handlePreview(e: UploadFile): void {
+  if (!e.url) return;
+  imgUrl.value = e.url;
+  setVisible(true);
+}
+
+/**
+ * 预览异常处理
+ */
+function previewError(): void {
+  if (!imgUrl.value) return;
+  message.error('图片地址无法访问!');
+}
+</script>
+
+<template>
+  <div class="epic-upload-image">
+    <Upload v-bind="getUploadProps">
+      <div v-if="(fileList?.length ?? 0) < props.maxCount">
+        <span
+          class="icon--epic icon--epic--cloud-upload-outlined mr-2px text-$epic-text-main text-lg"
+        ></span>
+        <div class="ant-upload-text">点击上传</div>
+      </div>
+    </Upload>
+    <Image
+      style="display: none"
+      :src="imgUrl"
+      :preview="{
+        visible,
+        onVisibleChange: setVisible,
+      }"
+      @error="previewError"
+    />
+  </div>
+</template>