diff --git a/package.json b/package.json index 488b562..d1c064e 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,9 @@ "@types/node": "^20.3.1", "@vitejs/plugin-vue": "^4.1.0", "@vitejs/plugin-vue-jsx": "^3.0.1", + "@vue-office/docx": "^1.2.0", + "@vue-office/excel": "^1.2.2", + "@vue-office/pdf": "^1.2.0", "@vue/tsconfig": "^0.4.0", "@vueuse/core": "^10.2.0", "co": "^4.6.0", @@ -88,6 +91,8 @@ "vite-plugin-eslint": "^1.8.1", "vite-plugin-libcss": "^1.1.0", "vite-plugin-vue-setup-extend": "^0.4.0", + "vue-cropper": "1.0.8", + "vue-demi": "^0.13.11", "vue-router": "^4.2.2", "vue-tsc": "^1.4.2" } diff --git a/packages/preview-office-view/index.vue b/packages/preview-office-view/index.vue new file mode 100644 index 0000000..c7a50fc --- /dev/null +++ b/packages/preview-office-view/index.vue @@ -0,0 +1,42 @@ + + + + + + + + + + + 暂不支持.{{ extension }}格式的文件 + + + + + + diff --git a/packages/preview-office/index.vue b/packages/preview-office/index.vue new file mode 100644 index 0000000..3573f76 --- /dev/null +++ b/packages/preview-office/index.vue @@ -0,0 +1,37 @@ + + + + + + + diff --git a/packages/select-table-modal/index.vue b/packages/select-table-modal/index.vue new file mode 100644 index 0000000..6d59ae7 --- /dev/null +++ b/packages/select-table-modal/index.vue @@ -0,0 +1,8 @@ + + + SelectTableModal + + + + diff --git a/packages/upload-avatar/index.vue b/packages/upload-avatar/index.vue new file mode 100644 index 0000000..0e8ea03 --- /dev/null +++ b/packages/upload-avatar/index.vue @@ -0,0 +1,239 @@ + + + + + + + + + + + + 单张图片不大于{{ fileSize }}MB,且格式为jpeg、jpg、png或bmp,只可上传1张 + + + + + + + + + + + + + + + + + + + + 选择 + + + + + + + + + + + + + + + + + + + + 提 交 + + + + + + + + + diff --git a/packages/upload-table/index.vue b/packages/upload-table/index.vue new file mode 100644 index 0000000..6eac134 --- /dev/null +++ b/packages/upload-table/index.vue @@ -0,0 +1,122 @@ + + + + + + {{ row.name }} + + + + + + + + {{ row.name }} + + onChange($event, row.id)" @on-success="$event => onSuccess($event, row, $index)" + @on-error="onError(row.id)" + /> + + + + + + + + 删除 + + + + + + 保存 + + + 取消 + + + + + + + + diff --git a/stories/PreviewOffice.stories.ts b/stories/PreviewOffice.stories.ts new file mode 100644 index 0000000..7ebb83f --- /dev/null +++ b/stories/PreviewOffice.stories.ts @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import ThPreviewOffice from '../packages/preview-office/index.vue' + +const meta = { + title: '数据展示/Office预览/PreviewOffice', + component: ThPreviewOffice, + tags: ['autodocs'], +} satisfies Meta +export default meta + +type Story = StoryObj + +export const Base: Story = {} diff --git a/stories/PreviewOfficeView.stories.ts b/stories/PreviewOfficeView.stories.ts new file mode 100644 index 0000000..d1886c6 --- /dev/null +++ b/stories/PreviewOfficeView.stories.ts @@ -0,0 +1,22 @@ +/* + * @Author: zhaojinfeng 121016171@qq.com + * @Date: 2023-07-18 12:22:11 + * @LastEditors: zhaojinfeng 121016171@qq.com + * @LastEditTime: 2023-07-18 12:39:40 + * @FilePath: \vue3\stories\PreviewOfficeView.stories.ts + * @Description: + * + */ +import type { Meta, StoryObj } from '@storybook/vue3' +import ThPreviewOfficeView from '../packages/preview-office-view/index.vue' + +const meta = { + title: '数据展示/Office预览/PreviewOfficeView', + component: ThPreviewOfficeView, + tags: ['autodocs'], +} satisfies Meta +export default meta + +type Story = StoryObj + +export const Base: Story = {} diff --git a/stories/SelectTableModal.stories.ts b/stories/SelectTableModal.stories.ts new file mode 100644 index 0000000..7385e11 --- /dev/null +++ b/stories/SelectTableModal.stories.ts @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import ThSelectTableModal from '../packages/select-table-modal/index.vue' + +const meta = { + title: '表单组件/SelectTableModal', + component: ThSelectTableModal, + tags: ['autodocs'], +} satisfies Meta +export default meta + +type Story = StoryObj + +export const Base: Story = {} diff --git a/stories/UploadAvatar.stories.ts b/stories/UploadAvatar.stories.ts new file mode 100644 index 0000000..e203f9f --- /dev/null +++ b/stories/UploadAvatar.stories.ts @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import ThUploadAvatar from '../packages/upload-avatar/index.vue' + +const meta = { + title: '表单组件/UploadAvatar', + component: ThUploadAvatar, + tags: ['autodocs'], +} satisfies Meta +export default meta + +type Story = StoryObj + +export const Base: Story = {} diff --git a/stories/UploadTable.stories.ts b/stories/UploadTable.stories.ts new file mode 100644 index 0000000..e481088 --- /dev/null +++ b/stories/UploadTable.stories.ts @@ -0,0 +1,32 @@ +/* + * @Author: zhaojinfeng 121016171@qq.com + * @Date: 2023-07-18 12:23:37 + * @LastEditors: zhaojinfeng 121016171@qq.com + * @LastEditTime: 2023-07-18 16:11:39 + * @FilePath: \vue3\stories\UploadTable.stories.ts + * @Description: + * + */ +import type { Meta, StoryObj } from '@storybook/vue3' +import ThUploadTable from '../packages/upload-table/index.vue' + +const meta = { + title: '表单组件/UploadTable', + component: ThUploadTable, + tags: ['autodocs'], + args: { + accept: '.jpeg,.jpg,.png,.bmp', + label1: '文件名称', + label2: '图片上传', + label3: '操作', + fileList: [], + }, + argTypes: { + label1: { control: 'select', options: ['small', 'medium', 'large'] }, + }, +} satisfies Meta +export default meta + +type Story = StoryObj + +export const Base: Story = {} diff --git a/types/components.d.ts b/types/components.d.ts index ae70f69..26fe334 100644 --- a/types/components.d.ts +++ b/types/components.d.ts @@ -8,8 +8,23 @@ export {} declare module 'vue' { export interface GlobalComponents { Button: typeof import('./../packages/button/index.vue')['default'] + ElButton: typeof import('element-plus/es')['ElButton'] + ElCol: typeof import('element-plus/es')['ElCol'] + ElDialog: typeof import('element-plus/es')['ElDialog'] + ElEmpty: typeof import('element-plus/es')['ElEmpty'] + ElIcon: typeof import('element-plus/es')['ElIcon'] + ElInput: typeof import('element-plus/es')['ElInput'] + ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] + ElRow: typeof import('element-plus/es')['ElRow'] + ElTable: typeof import('element-plus/es')['ElTable'] + ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] Header: typeof import('./../packages/header/index.vue')['default'] + PreviewOffice: typeof import('./../packages/preview-office/index.vue')['default'] + PreviewOfficeView: typeof import('./../packages/preview-office-view/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + SelectTableModal: typeof import('./../packages/select-table-modal/index.vue')['default'] + UploadAvatar: typeof import('./../packages/upload-avatar/index.vue')['default'] + UploadTable: typeof import('./../packages/upload-table/index.vue')['default'] } } diff --git a/types/file.d.ts b/types/file.d.ts new file mode 100644 index 0000000..5f7166e --- /dev/null +++ b/types/file.d.ts @@ -0,0 +1,27 @@ +declare interface FileVO { + /** + * 文件VO + * + */ + id?: number + /** + * 文件名称 + * + */ + name?: string + /** + * 文件大小(字节) + * + */ + size?: number + /** + * 文件扩展名 + * + */ + extension?: string + /** + * 文件url + * + */ + url?: string +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 0645e03..29a25d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3480,6 +3480,21 @@ "@volar/typescript" "1.4.1-patch.2" "@volar/vue-language-core" "1.6.5" +"@vue-office/docx@^1.2.0": + version "1.2.0" + resolved "https://registry.npmmirror.com/@vue-office/docx/-/docx-1.2.0.tgz#7b490cbfd4f37c33bc8bd12c2a64f4a989dee1a0" + integrity sha512-aeWr/q+mRFtfaLpz94uZ4RkxAhwUGCJsDfLQQ76n5g2dgVbZPbXx3eKxGuw/1B+phm88bJNLYbT7Onbjs+j9fg== + +"@vue-office/excel@^1.2.2": + version "1.2.2" + resolved "https://registry.npmmirror.com/@vue-office/excel/-/excel-1.2.2.tgz#345b9b0b3c70a9abb31f1054f949249c2a71566b" + integrity sha512-Zei6fF7Nb/j1CNfKsJuE9Yubck3UEuw9HwVVf++atKpgRpKYMlEBV/yDJ5aHhKiW2Do6nuitH4eGqmjpluZ4Lg== + +"@vue-office/pdf@^1.2.0": + version "1.2.0" + resolved "https://registry.npmmirror.com/@vue-office/pdf/-/pdf-1.2.0.tgz#0abdbf2ed18bb9094a78f441ff659ac4e6fc200e" + integrity sha512-1tCl7Oq9lu6JnqB+4zVdIDsvrsQT/tTb5Nv8d6UCWx7S7KBcEjmjHCM+XVEfbr0JPP4c6IRAbNe+Hs+EZMX2aw== + "@vue/babel-helper-vue-transform-on@^1.0.2": version "1.0.2" resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc" @@ -9419,11 +9434,21 @@ vue-component-type-helpers@^1.6.5: resolved "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz#ff6b75529063744b0966655725f3e02f30d97cd7" integrity sha512-iGdlqtajmiqed8ptURKPJ/Olz0/mwripVZszg6tygfZSIL9kYFPJTNY6+Q6OjWGznl2L06vxG5HvNvAnWrnzbg== +vue-cropper@1.0.8: + version "1.0.8" + resolved "https://registry.npmmirror.com/vue-cropper/-/vue-cropper-1.0.8.tgz#05853bb7702557d05a4784a8d0cd072b57dd8e4f" + integrity sha512-EX9XoT5a/PQ62J6KDZz8hhaFi9ME1k2yBZlRfYCm8iySzTcjw0nDBq8Y65HtyHaH2jJwUKgYfD6mdFCE0GhUzA== + vue-demi@*, vue-demi@>=0.14.5: version "0.14.5" resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9" integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA== +vue-demi@^0.13.11: + version "0.13.11" + resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99" + integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A== + vue-docgen-api@^4.40.0: version "4.72.5" resolved "https://registry.npmmirror.com/vue-docgen-api/-/vue-docgen-api-4.72.5.tgz#446bd2b98ee858740302ec7aaffdb3b1b1e8ca80"