1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
{"version":3,"file":"fs-files-format-ff815381.mjs","sources":["../src/uploader/components/fs-files-format.vue","../src/uploader/components/fs-files-format.vue"],"sourcesContent":["<template>\n <div class=\"fs-files-format\">\n <template v-if=\"computedProps.type === 'text'\">\n <span v-for=\"item in itemsRef\" :key=\"item.url\" class=\"fs-files-item\">\n <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">\n {{ item.name }}\n </a>\n </span>\n </template>\n <template v-else>\n <component\n :is=\"ui.tag.name\"\n v-for=\"item in itemsRef\"\n :key=\"item.url\"\n class=\"fs-tag-item\"\n :color=\"item.color\"\n v-bind=\"computedProps.tag\"\n >\n <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">{{ item.name }}</a>\n </component>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, Ref, ref, watch } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\n/**\n * 文件格式化展示组件\n */\nexport default defineComponent({\n name: \"FsFilesFormat\",\n props: {\n /**\n * 文件列表\n * 支持格式: `url , {url} , [url1,url2] , [{url:url1},{url:url2}]`\n */\n modelValue: {},\n // tag颜色,`【primary, success, warning, danger ,info】`\n color: {\n default: \"\"\n },\n // 展示类型`【text, tag】`\n type: {\n default: \"tag\" // `可选【text,tag】`\n },\n // 链接配置\n a: {},\n // tag配置\n tag: {},\n // 构建下载url方法,支持异步\n buildUrl: {},\n // 批量构建下载url方法,支持异步\n buildUrls: {},\n // 根据value构建文件名\n getFileName: {}\n } as any,\n setup(props: any, ctx) {\n const { ui } = useUi();\n const getFileName = computed(() => {\n return (\n // @ts-ignore\n props.getFileName ||\n function (url: any) {\n if (typeof url !== \"string\") {\n console.warn(\"获取文件名失败,请配置getFileName\");\n return url;\n }\n if (url?.lastIndexOf(\"/\") >= 0) {\n return url.substring(url.lastIndexOf(\"/\") + 1);\n }\n return url;\n }\n );\n });\n function getItem(value: any): any {\n return {\n url: undefined,\n value: value,\n name: getFileName.value(value),\n // @ts-ignore\n color: props.color\n };\n }\n\n async function buildFileListUrls(list: any[]) {\n // @ts-ignore\n if (props.buildUrls) {\n const values = list.map((item) => item.value);\n // @ts-ignore\n const urls = await props.buildUrls(values);\n for (let i = 0; i < list.length; i++) {\n list[i].url = urls[i];\n }\n // @ts-ignore\n } else if (props.buildUrl) {\n for (let item of list) {\n // @ts-ignore\n item.url = await props.buildUrl(item.value);\n }\n } else {\n for (let i = 0; i < list.length; i++) {\n list[i].url = list[i].value;\n }\n }\n }\n\n async function buildItems() {\n // @ts-ignore\n if (props.modelValue == null || props.modelValue === \"\") {\n return [];\n }\n let valueArr = [];\n // @ts-ignore\n if (typeof props.modelValue === \"string\") {\n // @ts-ignore\n valueArr = [getItem(props.modelValue)];\n // @ts-ignore\n } else if (props.modelValue instanceof Array) {\n // 本来就是数组的\n valueArr = [];\n // @ts-ignore\n for (const val of props.modelValue) {\n valueArr.push(getItem(val));\n }\n }\n await buildFileListUrls(valueArr);\n return valueArr;\n }\n const itemsRef: Ref = ref([]);\n watch(\n () => {\n // @ts-ignore\n return props.modelValue;\n },\n async () => {\n itemsRef.value = await buildItems();\n },\n {\n immediate: true\n }\n );\n const computedProps = computed(() => {\n return {\n ...props\n };\n });\n return {\n ui,\n itemsRef,\n computedProps\n };\n }\n});\n</script>\n<style lang=\"less\">\n.fs-files-format {\n display: flex;\n flex-wrap: wrap;\n .fs-form-item,\n .fs-tag-item {\n margin: 1px;\n a {\n text-decoration: none;\n }\n }\n .tag-item {\n margin-right: 10px;\n }\n .el-divider__text,\n .el-link {\n font-size: inherit;\n }\n}\n</style>\n","<template>\n <div class=\"fs-files-format\">\n <template v-if=\"computedProps.type === 'text'\">\n <span v-for=\"item in itemsRef\" :key=\"item.url\" class=\"fs-files-item\">\n <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">\n {{ item.name }}\n </a>\n </span>\n </template>\n <template v-else>\n <component\n :is=\"ui.tag.name\"\n v-for=\"item in itemsRef\"\n :key=\"item.url\"\n class=\"fs-tag-item\"\n :color=\"item.color\"\n v-bind=\"computedProps.tag\"\n >\n <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">{{ item.name }}</a>\n </component>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, Ref, ref, watch } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\n/**\n * 文件格式化展示组件\n */\nexport default defineComponent({\n name: \"FsFilesFormat\",\n props: {\n /**\n * 文件列表\n * 支持格式: `url , {url} , [url1,url2] , [{url:url1},{url:url2}]`\n */\n modelValue: {},\n // tag颜色,`【primary, success, warning, danger ,info】`\n color: {\n default: \"\"\n },\n // 展示类型`【text, tag】`\n type: {\n default: \"tag\" // `可选【text,tag】`\n },\n // 链接配置\n a: {},\n // tag配置\n tag: {},\n // 构建下载url方法,支持异步\n buildUrl: {},\n // 批量构建下载url方法,支持异步\n buildUrls: {},\n // 根据value构建文件名\n getFileName: {}\n } as any,\n setup(props: any, ctx) {\n const { ui } = useUi();\n const getFileName = computed(() => {\n return (\n // @ts-ignore\n props.getFileName ||\n function (url: any) {\n if (typeof url !== \"string\") {\n console.warn(\"获取文件名失败,请配置getFileName\");\n return url;\n }\n if (url?.lastIndexOf(\"/\") >= 0) {\n return url.substring(url.lastIndexOf(\"/\") + 1);\n }\n return url;\n }\n );\n });\n function getItem(value: any): any {\n return {\n url: undefined,\n value: value,\n name: getFileName.value(value),\n // @ts-ignore\n color: props.color\n };\n }\n\n async function buildFileListUrls(list: any[]) {\n // @ts-ignore\n if (props.buildUrls) {\n const values = list.map((item) => item.value);\n // @ts-ignore\n const urls = await props.buildUrls(values);\n for (let i = 0; i < list.length; i++) {\n list[i].url = urls[i];\n }\n // @ts-ignore\n } else if (props.buildUrl) {\n for (let item of list) {\n // @ts-ignore\n item.url = await props.buildUrl(item.value);\n }\n } else {\n for (let i = 0; i < list.length; i++) {\n list[i].url = list[i].value;\n }\n }\n }\n\n async function buildItems() {\n // @ts-ignore\n if (props.modelValue == null || props.modelValue === \"\") {\n return [];\n }\n let valueArr = [];\n // @ts-ignore\n if (typeof props.modelValue === \"string\") {\n // @ts-ignore\n valueArr = [getItem(props.modelValue)];\n // @ts-ignore\n } else if (props.modelValue instanceof Array) {\n // 本来就是数组的\n valueArr = [];\n // @ts-ignore\n for (const val of props.modelValue) {\n valueArr.push(getItem(val));\n }\n }\n await buildFileListUrls(valueArr);\n return valueArr;\n }\n const itemsRef: Ref = ref([]);\n watch(\n () => {\n // @ts-ignore\n return props.modelValue;\n },\n async () => {\n itemsRef.value = await buildItems();\n },\n {\n immediate: true\n }\n );\n const computedProps = computed(() => {\n return {\n ...props\n };\n });\n return {\n ui,\n itemsRef,\n computedProps\n };\n }\n});\n</script>\n<style lang=\"less\">\n.fs-files-format {\n display: flex;\n flex-wrap: wrap;\n .fs-form-item,\n .fs-tag-item {\n margin: 1px;\n a {\n text-decoration: none;\n }\n }\n .tag-item {\n margin-right: 10px;\n }\n .el-divider__text,\n .el-link {\n font-size: inherit;\n }\n}\n</style>\n"],"names":["_sfc_main","defineComponent","props","ctx","ui","useUi","getFileName","computed","url","getItem","value","buildFileListUrls","list","values","item","urls","i","buildItems","valueArr","val","itemsRef","ref","watch","computedProps","_cache","$props","$setup","$data","$options","_hoisted_1","_ctx","_openBlock","_createElementBlock","_Fragment","_renderList","_createElementVNode","_mergeProps","_createBlock","_resolveDynamicComponent","_withCtx"],"mappings":"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"} |