skyline-vue-admin 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/avatar-input/index.cjs +1 -1
- package/dist/components/avatar-input/index.cjs.map +1 -1
- package/dist/components/avatar-input/index.mjs +46 -36
- package/dist/components/avatar-input/index.mjs.map +1 -1
- package/dist/components/file-multiple-input/index.cjs +1 -1
- package/dist/components/file-multiple-input/index.cjs.map +1 -1
- package/dist/components/file-multiple-input/index.mjs +58 -46
- package/dist/components/file-multiple-input/index.mjs.map +1 -1
- package/dist/provides/dataProvider.d.ts +5 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const t=require("vue"),C=require("../../icons/EpPlus.cjs"),l=require("element-plus"),E=require("@vueuse/core"),F=require("vue-router");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");const R=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const L=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const P=require("../../hooks/useUpload.cjs"),y=require("../../setup/index.cjs"),V=require("../can-access/index.cjs"),x=t.defineComponent({name:"SkyAvatarInput",inheritAttrs:!1,props:{reference:{type:String,required:!0},source:{type:String,required:!0},label:String,rules:Object,dataId:{type:String,default:"id"},dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"},fileList:{type:Array,default:()=>[]}},setup(a,{slots:n,attrs:h}){const S=F.useRoute(),b=L.useFormGrid(),{formData:i,editData:o}=R.useForm(),w=t.computed(()=>a.label||a.source),{fileList:u}=P.useUpload(a.fileList),d=t.useTemplateRef("uploadRef"),U=S.meta;o.value&&(i[a.source]=o.value[a.source]);const I=async r=>{d.value?.clearFiles();const e=r[0];e.uid=l.genFileId(),d.value?.handleStart(e),d.value?.submit()},N=()=>{const r=u.value[0]?.id;if(r)i[a.source]=r;else{const e=u.value[0]?.raw;e?.data?.id&&(i[a.source]=e.data.id)}};let s;const{isLoading:c}=E.useAsyncState(async()=>{const r=i[a.source];if(r){s=new AbortController;const e=await y.skyConfig.dataProvider?.getOne?.(a.reference,{id:r,signal:s.signal});if(e?.data)return u.value=[{id:e.data[a.dataId],name:e.data[a.dataName],url:e.data[a.dataUrl]}],e}},void 0,{immediate:!0}),f=t.ref(""),v=t.shallowRef(),m=t.shallowRef(),q=t.ref(),g=t.ref(),k=async r=>{const e=await y.skyConfig.dataProvider?.getUploadConfig?.({file:r});e?.data&&(f.value=e.data.action,v.value=e.data.data,m.value=e.data.headers,q.value=e.data.method,g.value=e.data.name,r.data={id:e.data.file[a.dataId],name:e.data.file[a.dataName],url:e.data.file[a.dataUrl]})};return()=>t.createVNode(V.SkyCanAccess,{resource:U.resource,action:["create","edit"],column:a.source},{default:()=>[t.createVNode(l.ElFormItem,{class:"sky-avatar-input",label:w.value,prop:a.source,rules:a.rules,style:b?`grid-area: ${a.source}`:""},{default:()=>[t.createVNode(l.ElUpload,t.mergeProps({ref:"uploadRef",action:f.value,method:q.value,name:g.value,withCredentials:a.withCredentials,multiple:a.multiple,limit:1,beforeUpload:k,onSuccess:N,onExceed:I,headers:m.value,data:v.value,listType:"picture-card",fileList:u.value,"onUpdate:file-list":r=>u.value=r,autoUpload:!0,showFileList:!1,disabled:c.value,accept:"image/*"},h),{default:()=>u.value.length?t.withDirectives(t.createVNode("div",{class:"sky-avatar-input__preview",style:{backgroundImage:`url(${u.value[0].url})`}},null),[[l.ElLoadingDirective,c.value||u.value[0].status!=="success"]]):t.createVNode(l.ElIcon,null,{default:()=>[t.createVNode(C.EpPlus,null,null)]}),file:r=>{if(n.default){const e=n.default();return t.h(t.Fragment,e.map(A=>t.cloneVNode(A,{...r})))}}})]})]})}});exports.SkyAvatarInput=x;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n const id = fileList.value[0]?.id\r\n if (id) {\r\n formData[props.source] = id\r\n } else {\r\n const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n formData[props.source] = raw.data.id\r\n }\r\n }\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetOneResult | undefined>(\r\n async () => {\r\n const id = formData[props.source]\r\n if (id) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\r\n id: id as Identifier,\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = [\r\n {\r\n id: res.data[props.dataId!] as Identifier,\r\n name: res.data[props.dataName!] as string,\r\n url: res.data[props.dataUrl!] as string,\r\n },\r\n ]\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file[props.dataId!] as Identifier,\r\n name: res.data.file[props.dataName!] as string,\r\n url: res.data.file[props.dataUrl!] as string,\r\n }\r\n }\r\n }\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class=\"sky-avatar-input\"\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={name.value}\r\n withCredentials={props.withCredentials}\r\n multiple={props.multiple}\r\n limit={1}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType=\"picture-card\"\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={true}\r\n showFileList={false}\r\n disabled={isLoading.value}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={'image/*'}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n fileList.value.length ? (\r\n withDirectives(\r\n <div\r\n class=\"sky-avatar-input__preview\"\r\n style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\r\n ></div>,\r\n [\r\n [\r\n ElLoadingDirective,\r\n isLoading.value || fileList.value[0]!.status !== 'success',\r\n ],\r\n ],\r\n )\r\n ) : (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","id","raw","controller","isLoading","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"snCA2CAA,EAAAC,EAAAA,gBAAA,CACEC,KAAAA,iBACAC,aAAAA,GACAC,MAAAA,CACEC,UAAAA,CACEC,KAAAA,OACAC,SAAAA,IAEFC,OAAAA,CACEF,KAAAA,OACAC,SAAAA,IAEFE,MAAAA,OACAC,MAAAA,OACAC,OAAAA,CACEL,KAAAA,OACAM,QAAAA,MAEFC,SAAAA,CACEP,KAAAA,OACAM,QAAAA,QAEFE,QAAAA,CACER,KAAAA,OACAM,QAAAA,OAEFG,SAAAA,CACET,KAAAA,oBAEF,oBAEoBU,MAAAA,CAAM,EAAA,CAC1B,MAAAC,EAAAC,EAAAA,SAAA,EACAC,EAAAC,EAAAA,YAAA,cACkBC,SAAAA,eAClBC,EAAAC,EAAAA,SAAA,IAAAnB,EAAA,OAAAA,EAAA,MAAA,GAEQW,SAAAA,CAAS,EAAAS,EAAAA,UAAApB,EAAA,QAAA,EACjBqB,EAAAC,EAAAA,eAAA,WAAA,EACAC,EAAAV,EAAA,eAGEW,EAAAA,EAAAA,MAAAA,EAAAA,EAAAA,MAAAA,EAAAA,MAAAA,GAGF,MAAAC,EAAA,MAAAC,GAAA,CACEL,EAAAA,OAAAA,WAAAA,EACA,MAAAM,EAAAD,EAAA,CAAA,EACAC,EAAAA,IAAAA,YAAAA,EACAN,EAAAA,OAAAA,YAAAA,CAAAA,EACAA,EAAAA,OAAAA,OAAAA,iCAKA,GAAAO,EACEJ,EAAAA,EAAAA,MAAAA,EAAAA,MACF,yBAEEK,GAAA,MAAA,2BAGF,GAGF,IAAAC,QACQC,UAAAA,6BAEJ,MAAAH,EAAAJ,EAAAxB,EAAA,MAAA,EACA,GAAA4B,EAAA,CACEE,EAAAA,IAAAA,gBACA,MAAAE,EAAA,MAAAC,EAAAA,UAAA,cAAA,SAAAjC,EAAA,UAAA,CACE4B,GAAAA,iBAEF,CAAA,0EAOMM,IAAAA,EAAAA,KAAAA,EAAAA,OAAAA,CACF,CAAA,EAEFF,CAEJ,WAIAG,UAAAA,EACF,CAAA,EAGFC,EAAAC,EAAAA,IAAA,EAAA,EACAC,EAAAC,EAAAA,WAAA,EACAC,EAAAD,EAAAA,WAAA,EACAE,EAAAJ,EAAAA,IAAA,EACAvC,EAAAuC,EAAAA,IAAA,EACAK,EAAA,MAAAC,GAAA,4DAEIhB,KAAAA,CACF,CAAA,YAEES,EAAAA,MAAAA,EAAAA,KAAAA,OACAE,EAAAA,MAAAA,EAAAA,KAAAA,KACAE,EAAAA,MAAAA,EAAAA,KAAAA,QACAC,EAAAA,MAAAA,EAAAA,KAAAA,OACA3C,EAAAA,MAAAA,EAAAA,KAAAA,6JAUwC,OAAA,CAAA,SAAA,MAAA,EAA4B,OAAAE,EAAA,MAAsB,EAAA,CAAAQ,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,aAAAA,CAAA,MAAA,6DAKtE,MAAAO,EAAA,cAAAf,EAAA,MAAA,GAAA,EACiC,EAAA,CAAAQ,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,SAAAA,EAAAA,WAAAA,CAAA,IAAA,6GAQzB,MAAA,EAChB,aAAAkC,EACkB,UAAAE,EACN,SAAAnB,+BAGJ,SAAA,gCAEQ,qBAAAoB,GAAAlC,EAAA,MAAAkC,EAC8C,WAAA,GACtD,aAAA,oCAIC,EAAAjC,CAAA,EAAA,kEAMG,MAAA,2EAGiD,uGAQ9DJ,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,EAAAA,OAAAA,KAAAA,IAAAA,CAAAA,2BAQD,MAAAsC,EAAAC,EAAA,QAAA,EACA,OAAAC,EAAAA,EAAAC,EAAAA,SAAAH,EAAA,IAAAI,GAAAC,EAAAA,WAAAD,EAAA,SAIF,CACF,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,GAMb,CACF,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "element-plus/es/components/form-item/style/css";
|
|
2
2
|
import "element-plus/es/components/icon/style/css";
|
|
3
3
|
import "element-plus/es/components/upload/style/css";
|
|
4
|
-
import { defineComponent as
|
|
4
|
+
import { defineComponent as L, computed as F, useTemplateRef as R, ref as u, shallowRef as y, createVNode as i, mergeProps as N, withDirectives as D, h as P, Fragment as x, cloneVNode as q } from "vue";
|
|
5
5
|
import { EpPlus as G } from "../../icons/EpPlus.mjs";
|
|
6
6
|
import { ElFormItem as O, ElUpload as T, ElLoadingDirective as V, ElIcon as _, genFileId as $ } from "element-plus";
|
|
7
7
|
import { useAsyncState as j } from "@vueuse/core";
|
|
@@ -25,7 +25,7 @@ import "../../hooks/useReferenceArrayInput.mjs";
|
|
|
25
25
|
import { useUpload as H } from "../../hooks/useUpload.mjs";
|
|
26
26
|
import { skyConfig as h } from "../../setup/index.mjs";
|
|
27
27
|
import { SkyCanAccess as J } from "../can-access/index.mjs";
|
|
28
|
-
const we = /* @__PURE__ */
|
|
28
|
+
const we = /* @__PURE__ */ L({
|
|
29
29
|
name: "SkyAvatarInput",
|
|
30
30
|
inheritAttrs: !1,
|
|
31
31
|
props: {
|
|
@@ -56,69 +56,79 @@ const we = /* @__PURE__ */ F({
|
|
|
56
56
|
default: () => []
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
|
-
setup(
|
|
60
|
-
slots:
|
|
59
|
+
setup(t, {
|
|
60
|
+
slots: d,
|
|
61
61
|
attrs: S
|
|
62
62
|
}) {
|
|
63
63
|
const b = M(), w = B(), {
|
|
64
|
-
formData:
|
|
65
|
-
editData:
|
|
66
|
-
} = z(), U =
|
|
64
|
+
formData: l,
|
|
65
|
+
editData: n
|
|
66
|
+
} = z(), U = F(() => t.label || t.source), {
|
|
67
67
|
fileList: r
|
|
68
|
-
} = H(
|
|
69
|
-
|
|
68
|
+
} = H(t.fileList), o = R("uploadRef"), I = b.meta;
|
|
69
|
+
n.value && (l[t.source] = n.value[t.source]);
|
|
70
70
|
const k = async (a) => {
|
|
71
71
|
o.value?.clearFiles();
|
|
72
|
-
const
|
|
73
|
-
|
|
72
|
+
const e = a[0];
|
|
73
|
+
e.uid = $(), o.value?.handleStart(e), o.value?.submit();
|
|
74
74
|
}, A = () => {
|
|
75
|
-
|
|
75
|
+
const a = r.value[0]?.id;
|
|
76
|
+
if (a)
|
|
77
|
+
l[t.source] = a;
|
|
78
|
+
else {
|
|
79
|
+
const e = r.value[0]?.raw;
|
|
80
|
+
e?.data?.id && (l[t.source] = e.data.id);
|
|
81
|
+
}
|
|
76
82
|
};
|
|
77
83
|
let s;
|
|
78
84
|
const {
|
|
79
85
|
isLoading: c
|
|
80
86
|
} = j(async () => {
|
|
81
|
-
const a =
|
|
87
|
+
const a = l[t.source];
|
|
82
88
|
if (a) {
|
|
83
89
|
s = new AbortController();
|
|
84
|
-
const
|
|
90
|
+
const e = await h.dataProvider?.getOne?.(t.reference, {
|
|
85
91
|
id: a,
|
|
86
92
|
signal: s.signal
|
|
87
93
|
});
|
|
88
|
-
if (
|
|
94
|
+
if (e?.data)
|
|
89
95
|
return r.value = [{
|
|
90
|
-
id:
|
|
91
|
-
name:
|
|
92
|
-
url:
|
|
93
|
-
}],
|
|
96
|
+
id: e.data[t.dataId],
|
|
97
|
+
name: e.data[t.dataName],
|
|
98
|
+
url: e.data[t.dataUrl]
|
|
99
|
+
}], e;
|
|
94
100
|
}
|
|
95
101
|
}, void 0, {
|
|
96
102
|
immediate: !0
|
|
97
103
|
}), m = u(""), f = y(), v = y(), p = u(), g = u(), C = async (a) => {
|
|
98
|
-
const
|
|
104
|
+
const e = await h.dataProvider?.getUploadConfig?.({
|
|
99
105
|
file: a
|
|
100
106
|
});
|
|
101
|
-
|
|
107
|
+
e?.data && (m.value = e.data.action, f.value = e.data.data, v.value = e.data.headers, p.value = e.data.method, g.value = e.data.name, a.data = {
|
|
108
|
+
id: e.data.file[t.dataId],
|
|
109
|
+
name: e.data.file[t.dataName],
|
|
110
|
+
url: e.data.file[t.dataUrl]
|
|
111
|
+
});
|
|
102
112
|
};
|
|
103
|
-
return () =>
|
|
113
|
+
return () => i(J, {
|
|
104
114
|
resource: I.resource,
|
|
105
115
|
action: ["create", "edit"],
|
|
106
|
-
column:
|
|
116
|
+
column: t.source
|
|
107
117
|
}, {
|
|
108
|
-
default: () => [
|
|
118
|
+
default: () => [i(O, {
|
|
109
119
|
class: "sky-avatar-input",
|
|
110
120
|
label: U.value,
|
|
111
|
-
prop:
|
|
112
|
-
rules:
|
|
113
|
-
style: w ? `grid-area: ${
|
|
121
|
+
prop: t.source,
|
|
122
|
+
rules: t.rules,
|
|
123
|
+
style: w ? `grid-area: ${t.source}` : ""
|
|
114
124
|
}, {
|
|
115
|
-
default: () => [
|
|
125
|
+
default: () => [i(T, N({
|
|
116
126
|
ref: "uploadRef",
|
|
117
127
|
action: m.value,
|
|
118
128
|
method: p.value,
|
|
119
129
|
name: g.value,
|
|
120
|
-
withCredentials:
|
|
121
|
-
multiple:
|
|
130
|
+
withCredentials: t.withCredentials,
|
|
131
|
+
multiple: t.multiple,
|
|
122
132
|
limit: 1,
|
|
123
133
|
beforeUpload: C,
|
|
124
134
|
onSuccess: A,
|
|
@@ -133,18 +143,18 @@ const we = /* @__PURE__ */ F({
|
|
|
133
143
|
disabled: c.value,
|
|
134
144
|
accept: "image/*"
|
|
135
145
|
}, S), {
|
|
136
|
-
default: () => r.value.length ?
|
|
146
|
+
default: () => r.value.length ? D(i("div", {
|
|
137
147
|
class: "sky-avatar-input__preview",
|
|
138
148
|
style: {
|
|
139
149
|
backgroundImage: `url(${r.value[0].url})`
|
|
140
150
|
}
|
|
141
|
-
}, null), [[V, c.value || r.value[0].status !== "success"]]) :
|
|
142
|
-
default: () => [
|
|
151
|
+
}, null), [[V, c.value || r.value[0].status !== "success"]]) : i(_, null, {
|
|
152
|
+
default: () => [i(G, null, null)]
|
|
143
153
|
}),
|
|
144
154
|
file: (a) => {
|
|
145
|
-
if (
|
|
146
|
-
const
|
|
147
|
-
return P(x,
|
|
155
|
+
if (d.default) {
|
|
156
|
+
const e = d.default();
|
|
157
|
+
return P(x, e.map((E) => q(E, {
|
|
148
158
|
...a
|
|
149
159
|
})));
|
|
150
160
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n if (fileList.value[0]?.id) {\r\n formData[props.source] = fileList.value[0].id\r\n }\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetOneResult | undefined>(\r\n async () => {\r\n const id = formData[props.source]\r\n if (id) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\r\n id: id as Identifier,\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = [\r\n {\r\n id: res.data[props.dataId!] as Identifier,\r\n name: res.data[props.dataName!] as string,\r\n url: res.data[props.dataUrl!] as string,\r\n },\r\n ]\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: UploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n }\r\n }\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class=\"sky-avatar-input\"\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={name.value}\r\n withCredentials={props.withCredentials}\r\n multiple={props.multiple}\r\n limit={1}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType=\"picture-card\"\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={true}\r\n showFileList={false}\r\n disabled={isLoading.value}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={'image/*'}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n fileList.value.length ? (\r\n withDirectives(\r\n <div\r\n class=\"sky-avatar-input__preview\"\r\n style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\r\n ></div>,\r\n [\r\n [\r\n ElLoadingDirective,\r\n isLoading.value || fileList.value[0]!.status !== 'success',\r\n ],\r\n ],\r\n )\r\n ) : (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","controller","isLoading","id","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useRoute } from 'vue-router'\r\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\n\r\nexport interface SkyOssAvatarInputProps {\r\n reference: string\r\n source: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n fileList?: SkyUploadUserFile[]\r\n}\r\n\r\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\r\n name: 'SkyAvatarInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n label: String,\r\n rules: Object,\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const { fileList } = useUpload(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = async (files: File[]) => {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n uploadRef.value?.submit()\r\n }\r\n\r\n const onSuccess = () => {\r\n const id = fileList.value[0]?.id\r\n if (id) {\r\n formData[props.source] = id\r\n } else {\r\n const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n formData[props.source] = raw.data.id\r\n }\r\n }\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetOneResult | undefined>(\r\n async () => {\r\n const id = formData[props.source]\r\n if (id) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\r\n id: id as Identifier,\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = [\r\n {\r\n id: res.data[props.dataId!] as Identifier,\r\n name: res.data[props.dataName!] as string,\r\n url: res.data[props.dataUrl!] as string,\r\n },\r\n ]\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file[props.dataId!] as Identifier,\r\n name: res.data.file[props.dataName!] as string,\r\n url: res.data.file[props.dataUrl!] as string,\r\n }\r\n }\r\n }\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class=\"sky-avatar-input\"\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={name.value}\r\n withCredentials={props.withCredentials}\r\n multiple={props.multiple}\r\n limit={1}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType=\"picture-card\"\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={true}\r\n showFileList={false}\r\n disabled={isLoading.value}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={'image/*'}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n fileList.value.length ? (\r\n withDirectives(\r\n <div\r\n class=\"sky-avatar-input__preview\"\r\n style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\r\n ></div>,\r\n [\r\n [\r\n ElLoadingDirective,\r\n isLoading.value || fileList.value[0]!.status !== 'success',\r\n ],\r\n ],\r\n )\r\n ) : (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","id","raw","controller","isLoading","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/dialog/style/css");require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const e=require("vue"),L=require("../../icons/EpPlus.cjs"),u=require("element-plus"),x=require("vue-router"),M=require("@vueuse/core");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");const _=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const A=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/dialog/style/css");require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const e=require("vue"),L=require("../../icons/EpPlus.cjs"),u=require("element-plus"),x=require("vue-router"),M=require("@vueuse/core");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");const _=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const A=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const h=require("../../setup/index.cjs"),D=require("../can-access/index.cjs"),T=require("../../icons/EpUploadFilled.cjs"),G=require("vue-i18n"),$=e.defineComponent({name:"SkyFileMultipleInput",inheritAttrs:!1,props:{reference:{type:String,required:!0},source:{type:String,required:!0},type:{type:String,default:"file"},dataId:{type:String,default:"id"},dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"},label:String,rules:Object,limit:{type:Number,default:1},fileList:{type:Array,default:()=>[]},autoUpload:{type:Boolean,default:!0}},setup(t,{slots:c,attrs:N}){const{t:s}=G.useI18n(),S=x.useRoute(),U=A.useFormGrid(),{formData:d,editData:f}=_.useForm(),w=e.computed(()=>t.label||t.source),r=e.shallowRef(t.fileList),n=e.useTemplateRef("uploadRef"),V=S.meta;f.value&&(d[t.source]=f.value[t.source]);const F=l=>{if(t.limit===1){n.value?.clearFiles();const a=l[0];a.uid=u.genFileId(),n.value?.handleStart(a),t.autoUpload&&n.value?.submit()}},E=()=>{const l=[];for(const a of r.value)if(a.id)l.push(a.id);else{const i=a.raw;i?.data?.id&&(a.id=i.data.id,l.push(i.data.id))}d[t.source]=l},o=e.ref(!1),m=e.ref(),I=l=>{m.value=l.url,o.value=!0};let v;const{isLoading:b}=M.useAsyncState(async()=>{const l=d[t.source];if(l){v=new AbortController;const a=await h.skyConfig.dataProvider?.getMany?.(t.reference,{ids:l,signal:v.signal});if(a?.data)return r.value=a.data.map(i=>({id:i[t.dataId],name:i[t.dataName],url:i[t.dataUrl]})),a}},void 0,{immediate:!0}),y=e.ref(""),g=e.shallowRef(),q=e.shallowRef(),p=e.ref(),k=e.ref(),P=async l=>{const a=await h.skyConfig.dataProvider?.getUploadConfig?.({file:l});a?.data&&(y.value=a.data.action,g.value=a.data.data,q.value=a.data.headers,p.value=a.data.method,k.value=a.data.name,l.data={id:a.data.file[t.dataId],name:a.data.file[t.dataName],url:a.data.file[t.dataUrl]})},R=e.computed(()=>t.type==="image"?"image/*":void 0),C=e.computed(()=>t.type==="image"?"picture-card":"text");return()=>e.createVNode(D.SkyCanAccess,{resource:V.resource,action:["create","edit"],column:t.source},{default:()=>[e.createVNode(u.ElFormItem,{class:["sky-file-multiple-input",`is-${t.type}`],label:w.value,prop:t.source,rules:t.rules,style:U?`grid-area: ${t.source}`:""},{default:()=>[e.createVNode(u.ElUpload,e.mergeProps({ref:"uploadRef",action:y.value,method:p.value,name:t.name,withCredentials:t.withCredentials,multiple:t.limit>1,limit:t.limit,beforeUpload:P,onSuccess:E,onExceed:F,headers:q.value,data:g.value,listType:C.value,fileList:r.value,"onUpdate:file-list":l=>r.value=l,autoUpload:t.autoUpload,drag:t.type==="file",showFileList:!0,onPreview:I,accept:R.value},N),{default:()=>t.type==="image"?e.createVNode(u.ElIcon,null,{default:()=>[e.createVNode(L.EpPlus,null,null)]}):e.createVNode(e.Fragment,null,[e.createVNode(u.ElIcon,{class:"sky-file-multiple-input__icon"},{default:()=>[e.createVNode(T.EpUploadFilled,null,null)]}),e.createVNode("div",{class:"sky-file-multiple-input__text"},[s("upload.drop"),e.createVNode("em",null,[s("upload.click")])])]),file:l=>{if(c.default){const a=c.default();return e.withDirectives(e.h(e.Fragment,a.map(i=>e.cloneVNode(i,{...l}))),[[u.ElLoadingDirective,b.value]])}}}),e.createVNode(u.ElDialog,{appendToBody:!0,modelValue:o.value,"onUpdate:modelValue":l=>o.value=l},{default:()=>[e.createVNode("img",{class:"sky-file-multiple-input__img",src:m.value},null)]})]})]})}});exports.SkyFileMultipleInput=$;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n formData[props.source] = fileList.value.map((f) => f.id!)\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: UploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","default","dataId","dataName","dataUrl","label","rules","limit","fileList","autoUpload","attrs","t","route","useRoute","formGrid","useFormGrid","editData","title","computed","shallowRef","uploadRef","useTemplateRef","routeMeta","formData","file","files","preview","ref","previewUrl","controller","isLoading","ids","res","skyConfig","id","url","immediate","action","data","headers","method","beforeUpload","rawFile","accept","listType","onSuccess","onExceed","fs","onPreview","_createVNode","_Fragment","ElIcon","vnodes","slots","withDirectives","h","Fragment","vnode","cloneVNode","ElLoadingDirective","v"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n const ids: Identifier[] = []\r\n for (const fl of fileList.value) {\r\n if (fl.id) {\r\n ids.push(fl.id as Identifier)\r\n } else {\r\n const raw = fl.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n fl.id = raw.data.id as Identifier\r\n ids.push(raw.data.id as Identifier)\r\n }\r\n }\r\n }\r\n formData[props.source] = ids\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file[props.dataId!] as Identifier,\r\n name: res.data.file[props.dataName!] as string,\r\n url: res.data.file[props.dataUrl!] as string,\r\n }\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","default","dataId","dataName","dataUrl","label","rules","limit","fileList","autoUpload","attrs","t","route","useRoute","formGrid","useFormGrid","editData","title","computed","shallowRef","uploadRef","useTemplateRef","routeMeta","formData","file","files","fl","ids","raw","preview","ref","previewUrl","controller","isLoading","res","skyConfig","id","url","immediate","action","data","headers","method","beforeUpload","rawFile","accept","listType","onSuccess","onExceed","fs","onPreview","_createVNode","_Fragment","ElIcon","vnodes","slots","withDirectives","h","Fragment","vnode","cloneVNode","ElLoadingDirective","v"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import "element-plus/es/components/icon/style/css";
|
|
|
4
4
|
import "element-plus/es/components/upload/style/css";
|
|
5
5
|
import { defineComponent as T, computed as m, shallowRef as c, useTemplateRef as V, ref as o, createVNode as l, mergeProps as q, withDirectives as B, h as G, Fragment as w, cloneVNode as $ } from "vue";
|
|
6
6
|
import { EpPlus as j } from "../../icons/EpPlus.mjs";
|
|
7
|
-
import { ElFormItem as O, ElUpload as z, ElLoadingDirective as H, ElIcon as
|
|
7
|
+
import { ElFormItem as O, ElUpload as z, ElLoadingDirective as H, ElIcon as b, ElDialog as J, genFileId as K } from "element-plus";
|
|
8
8
|
import { useRoute as Q } from "vue-router";
|
|
9
9
|
import { useAsyncState as W } from "@vueuse/core";
|
|
10
10
|
import "../../hooks/useUser.mjs";
|
|
@@ -23,11 +23,11 @@ import "../../hooks/useReferenceArrayField.mjs";
|
|
|
23
23
|
import "../../hooks/useTreeWithDetails.mjs";
|
|
24
24
|
import { useFormGrid as Y } from "../../hooks/useFormGrid.mjs";
|
|
25
25
|
import "../../hooks/useReferenceArrayInput.mjs";
|
|
26
|
-
import { skyConfig as
|
|
26
|
+
import { skyConfig as k } from "../../setup/index.mjs";
|
|
27
27
|
import { SkyCanAccess as Z } from "../can-access/index.mjs";
|
|
28
28
|
import { EpUploadFilled as ee } from "../../icons/EpUploadFilled.mjs";
|
|
29
29
|
import { useI18n as te } from "vue-i18n";
|
|
30
|
-
const
|
|
30
|
+
const Re = /* @__PURE__ */ T({
|
|
31
31
|
name: "SkyFileMultipleInput",
|
|
32
32
|
inheritAttrs: !1,
|
|
33
33
|
props: {
|
|
@@ -72,52 +72,64 @@ const _e = /* @__PURE__ */ T({
|
|
|
72
72
|
},
|
|
73
73
|
setup(e, {
|
|
74
74
|
slots: s,
|
|
75
|
-
attrs:
|
|
75
|
+
attrs: E
|
|
76
76
|
}) {
|
|
77
77
|
const {
|
|
78
78
|
t: f
|
|
79
|
-
} = te(),
|
|
79
|
+
} = te(), F = Q(), I = Y(), {
|
|
80
80
|
formData: r,
|
|
81
81
|
editData: p
|
|
82
|
-
} = X(), C = m(() => e.label || e.source), u = c(e.fileList),
|
|
82
|
+
} = X(), C = m(() => e.label || e.source), u = c(e.fileList), d = V("uploadRef"), L = F.meta;
|
|
83
83
|
p.value && (r[e.source] = p.value[e.source]);
|
|
84
|
-
const
|
|
84
|
+
const N = (a) => {
|
|
85
85
|
if (e.limit === 1) {
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
|
|
86
|
+
d.value?.clearFiles();
|
|
87
|
+
const t = a[0];
|
|
88
|
+
t.uid = K(), d.value?.handleStart(t), e.autoUpload && d.value?.submit();
|
|
89
89
|
}
|
|
90
|
-
},
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
}, P = () => {
|
|
91
|
+
const a = [];
|
|
92
|
+
for (const t of u.value)
|
|
93
|
+
if (t.id)
|
|
94
|
+
a.push(t.id);
|
|
95
|
+
else {
|
|
96
|
+
const i = t.raw;
|
|
97
|
+
i?.data?.id && (t.id = i.data.id, a.push(i.data.id));
|
|
98
|
+
}
|
|
99
|
+
r[e.source] = a;
|
|
100
|
+
}, n = o(!1), v = o(), R = (a) => {
|
|
101
|
+
v.value = a.url, n.value = !0;
|
|
94
102
|
};
|
|
95
103
|
let y;
|
|
96
104
|
const {
|
|
97
|
-
isLoading:
|
|
105
|
+
isLoading: _
|
|
98
106
|
} = W(async () => {
|
|
99
|
-
const
|
|
100
|
-
if (
|
|
107
|
+
const a = r[e.source];
|
|
108
|
+
if (a) {
|
|
101
109
|
y = new AbortController();
|
|
102
|
-
const
|
|
103
|
-
ids:
|
|
110
|
+
const t = await k.dataProvider?.getMany?.(e.reference, {
|
|
111
|
+
ids: a,
|
|
104
112
|
signal: y.signal
|
|
105
113
|
});
|
|
106
|
-
if (
|
|
107
|
-
return u.value =
|
|
114
|
+
if (t?.data)
|
|
115
|
+
return u.value = t.data.map((i) => ({
|
|
108
116
|
id: i[e.dataId],
|
|
109
117
|
name: i[e.dataName],
|
|
110
118
|
url: i[e.dataUrl]
|
|
111
|
-
})),
|
|
119
|
+
})), t;
|
|
112
120
|
}
|
|
113
121
|
}, void 0, {
|
|
114
122
|
immediate: !0
|
|
115
|
-
}), g = o(""), h = c(),
|
|
116
|
-
const
|
|
117
|
-
file:
|
|
123
|
+
}), g = o(""), h = c(), U = c(), S = o(), x = o(), A = async (a) => {
|
|
124
|
+
const t = await k.dataProvider?.getUploadConfig?.({
|
|
125
|
+
file: a
|
|
118
126
|
});
|
|
119
|
-
|
|
120
|
-
|
|
127
|
+
t?.data && (g.value = t.data.action, h.value = t.data.data, U.value = t.data.headers, S.value = t.data.method, x.value = t.data.name, a.data = {
|
|
128
|
+
id: t.data.file[e.dataId],
|
|
129
|
+
name: t.data.file[e.dataName],
|
|
130
|
+
url: t.data.file[e.dataUrl]
|
|
131
|
+
});
|
|
132
|
+
}, D = m(() => e.type === "image" ? "image/*" : void 0), M = m(() => e.type === "image" ? "picture-card" : "text");
|
|
121
133
|
return () => l(Z, {
|
|
122
134
|
resource: L.resource,
|
|
123
135
|
action: ["create", "edit"],
|
|
@@ -133,46 +145,46 @@ const _e = /* @__PURE__ */ T({
|
|
|
133
145
|
default: () => [l(z, q({
|
|
134
146
|
ref: "uploadRef",
|
|
135
147
|
action: g.value,
|
|
136
|
-
method:
|
|
148
|
+
method: S.value,
|
|
137
149
|
name: e.name,
|
|
138
150
|
withCredentials: e.withCredentials,
|
|
139
151
|
multiple: e.limit > 1,
|
|
140
152
|
limit: e.limit,
|
|
141
|
-
beforeUpload:
|
|
142
|
-
onSuccess:
|
|
143
|
-
onExceed:
|
|
144
|
-
headers:
|
|
153
|
+
beforeUpload: A,
|
|
154
|
+
onSuccess: P,
|
|
155
|
+
onExceed: N,
|
|
156
|
+
headers: U.value,
|
|
145
157
|
data: h.value,
|
|
146
158
|
listType: M.value,
|
|
147
159
|
fileList: u.value,
|
|
148
|
-
"onUpdate:file-list": (
|
|
160
|
+
"onUpdate:file-list": (a) => u.value = a,
|
|
149
161
|
autoUpload: e.autoUpload,
|
|
150
162
|
drag: e.type === "file",
|
|
151
163
|
showFileList: !0,
|
|
152
|
-
onPreview:
|
|
153
|
-
accept:
|
|
154
|
-
},
|
|
155
|
-
default: () => e.type === "image" ? l(
|
|
164
|
+
onPreview: R,
|
|
165
|
+
accept: D.value
|
|
166
|
+
}, E), {
|
|
167
|
+
default: () => e.type === "image" ? l(b, null, {
|
|
156
168
|
default: () => [l(j, null, null)]
|
|
157
|
-
}) : l(w, null, [l(
|
|
169
|
+
}) : l(w, null, [l(b, {
|
|
158
170
|
class: "sky-file-multiple-input__icon"
|
|
159
171
|
}, {
|
|
160
172
|
default: () => [l(ee, null, null)]
|
|
161
173
|
}), l("div", {
|
|
162
174
|
class: "sky-file-multiple-input__text"
|
|
163
175
|
}, [f("upload.drop"), l("em", null, [f("upload.click")])])]),
|
|
164
|
-
file: (
|
|
176
|
+
file: (a) => {
|
|
165
177
|
if (s.default) {
|
|
166
|
-
const
|
|
167
|
-
return B(G(w,
|
|
168
|
-
...
|
|
169
|
-
}))), [[H,
|
|
178
|
+
const t = s.default();
|
|
179
|
+
return B(G(w, t.map((i) => $(i, {
|
|
180
|
+
...a
|
|
181
|
+
}))), [[H, _.value]]);
|
|
170
182
|
}
|
|
171
183
|
}
|
|
172
184
|
}), l(J, {
|
|
173
185
|
appendToBody: !0,
|
|
174
|
-
modelValue:
|
|
175
|
-
"onUpdate:modelValue": (
|
|
186
|
+
modelValue: n.value,
|
|
187
|
+
"onUpdate:modelValue": (a) => n.value = a
|
|
176
188
|
}, {
|
|
177
189
|
default: () => [l("img", {
|
|
178
190
|
class: "sky-file-multiple-input__img",
|
|
@@ -184,6 +196,6 @@ const _e = /* @__PURE__ */ T({
|
|
|
184
196
|
}
|
|
185
197
|
});
|
|
186
198
|
export {
|
|
187
|
-
|
|
199
|
+
Re as SkyFileMultipleInput
|
|
188
200
|
};
|
|
189
201
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n formData[props.source] = fileList.value.map((f) => f.id!)\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: UploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","default","dataId","dataName","dataUrl","label","rules","limit","fileList","autoUpload","attrs","t","route","useRoute","formGrid","useFormGrid","editData","title","computed","shallowRef","uploadRef","useTemplateRef","routeMeta","formData","file","files","preview","ref","previewUrl","controller","isLoading","ids","res","skyConfig","id","url","immediate","action","data","headers","method","beforeUpload","rawFile","accept","listType","onSuccess","onExceed","fs","onPreview","_createVNode","_Fragment","ElIcon","vnodes","slots","withDirectives","h","Fragment","vnode","cloneVNode","ElLoadingDirective","v"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/components/file-multiple-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\r\nimport type { GetManyResult, Identifier, SkyUploadRawFile } from '@/provides'\r\nimport {\r\n ElDialog,\r\n ElFormItem,\r\n ElIcon,\r\n ElLoadingDirective,\r\n ElUpload,\r\n genFileId,\r\n type FormItemRule,\r\n type UploadFile,\r\n type UploadInstance,\r\n type UploadProps,\r\n type UploadRawFile,\r\n} from 'element-plus'\r\nimport {\r\n cloneVNode,\r\n computed,\r\n defineComponent,\r\n Fragment,\r\n h,\r\n ref,\r\n shallowRef,\r\n useTemplateRef,\r\n withDirectives,\r\n} from 'vue'\r\nimport { useRoute } from 'vue-router'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport { useForm, useFormGrid, type SkyUploadUserFile } from '@/hooks'\r\nimport { skyConfig } from '@/setup'\r\nimport type { SkyLayoutRouteMeta } from '@/router'\r\nimport { SkyCanAccess } from '../can-access'\r\nimport { EpUploadFilled } from '@/icons/EpUploadFilled'\r\nimport { useI18n } from 'vue-i18n'\r\n\r\nexport interface SkyFileMultipleInputProps {\r\n reference: string\r\n source: string\r\n type?: 'file' | 'image'\r\n dataId?: string\r\n dataName?: string\r\n dataUrl?: string\r\n label?: string\r\n rules?: FormItemRule | FormItemRule[]\r\n name?: string\r\n withCredentials?: boolean\r\n limit?: number\r\n fileList?: SkyUploadUserFile[]\r\n autoUpload?: UploadProps['autoUpload']\r\n}\r\n\r\nexport const SkyFileMultipleInput = defineComponent<\r\n SkyFileMultipleInputProps & Partial<UploadProps>\r\n>({\r\n name: 'SkyFileMultipleInput',\r\n inheritAttrs: false,\r\n props: {\r\n reference: {\r\n type: String,\r\n required: true,\r\n },\r\n source: {\r\n type: String,\r\n required: true,\r\n },\r\n type: {\r\n type: String,\r\n default: 'file',\r\n },\r\n dataId: {\r\n type: String,\r\n default: 'id',\r\n },\r\n dataName: {\r\n type: String,\r\n default: 'name',\r\n },\r\n dataUrl: {\r\n type: String,\r\n default: 'url',\r\n },\r\n label: String,\r\n rules: Object,\r\n limit: {\r\n type: Number,\r\n default: 1,\r\n },\r\n fileList: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n autoUpload: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props, { slots, attrs }) {\r\n const { t } = useI18n()\r\n const route = useRoute()\r\n const formGrid = useFormGrid()\r\n const { formData, editData } = useForm()!\r\n const title = computed<string>(() => props.label || props.source)\r\n // init fileList\r\n const fileList = shallowRef<SkyUploadUserFile[]>(props.fileList!)\r\n const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\r\n const routeMeta = route.meta as SkyLayoutRouteMeta\r\n\r\n if (editData.value) {\r\n formData[props.source] = editData.value[props.source]\r\n }\r\n\r\n const onExceed = (files: File[]) => {\r\n if (props.limit === 1) {\r\n uploadRef.value?.clearFiles()\r\n const file = files[0] as UploadRawFile\r\n file.uid = genFileId()\r\n uploadRef.value?.handleStart(file)\r\n if (props.autoUpload) {\r\n uploadRef.value?.submit()\r\n }\r\n }\r\n }\r\n\r\n const onSuccess = () => {\r\n const ids: Identifier[] = []\r\n for (const fl of fileList.value) {\r\n if (fl.id) {\r\n ids.push(fl.id as Identifier)\r\n } else {\r\n const raw = fl.raw as SkyUploadRawFile | undefined\r\n if (raw?.data?.id) {\r\n fl.id = raw.data.id as Identifier\r\n ids.push(raw.data.id as Identifier)\r\n }\r\n }\r\n }\r\n formData[props.source] = ids\r\n }\r\n\r\n const preview = ref(false)\r\n const previewUrl = ref<string>()\r\n const onPreview = (file: UploadFile) => {\r\n previewUrl.value = file.url\r\n preview.value = true\r\n }\r\n\r\n let controller: AbortController | undefined\r\n const { isLoading } = useAsyncState<GetManyResult | undefined>(\r\n async () => {\r\n const ids = formData[props.source]\r\n if (ids) {\r\n controller = new AbortController()\r\n const res = await skyConfig.dataProvider?.getMany?.(props.reference, {\r\n ids: ids as Identifier[],\r\n signal: controller.signal,\r\n })\r\n\r\n if (res?.data) {\r\n fileList.value = res.data.map((d) => ({\r\n id: d[props.dataId!] as Identifier,\r\n name: d[props.dataName!] as string,\r\n url: d[props.dataUrl!] as string,\r\n }))\r\n return res\r\n }\r\n }\r\n },\r\n undefined,\r\n {\r\n immediate: true,\r\n },\r\n )\r\n\r\n const action = ref('')\r\n const data = shallowRef<Record<string, unknown>>()\r\n const headers = shallowRef<Record<string, unknown>>()\r\n const method = ref()\r\n const name = ref<string>()\r\n const beforeUpload = async (rawFile: SkyUploadRawFile) => {\r\n const res = await skyConfig.dataProvider?.getUploadConfig?.({\r\n file: rawFile,\r\n })\r\n if (res?.data) {\r\n action.value = res.data.action\r\n data.value = res.data.data\r\n headers.value = res.data.headers\r\n method.value = res.data.method\r\n name.value = res.data.name\r\n rawFile.data = {\r\n id: res.data.file[props.dataId!] as Identifier,\r\n name: res.data.file[props.dataName!] as string,\r\n url: res.data.file[props.dataUrl!] as string,\r\n }\r\n }\r\n }\r\n\r\n const accept = computed(() => (props.type === 'image' ? 'image/*' : undefined))\r\n const listType = computed(() => (props.type === 'image' ? 'picture-card' : 'text'))\r\n\r\n return () => (\r\n <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\r\n <ElFormItem\r\n class={['sky-file-multiple-input', `is-${props.type}`]}\r\n label={title.value}\r\n prop={props.source}\r\n rules={props.rules}\r\n style={formGrid ? `grid-area: ${props.source}` : ''}\r\n >\r\n <ElUpload\r\n ref=\"uploadRef\"\r\n action={action.value}\r\n method={method.value}\r\n name={props.name}\r\n withCredentials={props.withCredentials}\r\n multiple={props.limit! > 1}\r\n limit={props.limit}\r\n beforeUpload={beforeUpload}\r\n onSuccess={onSuccess}\r\n onExceed={onExceed}\r\n headers={headers.value}\r\n data={data.value}\r\n listType={listType.value}\r\n fileList={fileList.value}\r\n onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\r\n autoUpload={props.autoUpload}\r\n drag={props.type === 'file'}\r\n showFileList\r\n onPreview={onPreview}\r\n // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\r\n accept={accept.value}\r\n {...attrs}\r\n >\r\n {{\r\n default: () =>\r\n props.type === 'image' ? (\r\n <ElIcon>\r\n <EpPlus />\r\n </ElIcon>\r\n ) : (\r\n <>\r\n <ElIcon class=\"sky-file-multiple-input__icon\">\r\n <EpUploadFilled />\r\n </ElIcon>\r\n <div class=\"sky-file-multiple-input__text\">\r\n {t('upload.drop')}\r\n <em>{t('upload.click')}</em>\r\n </div>\r\n </>\r\n ),\r\n file: (scope: { file: UploadFile; index: number }) => {\r\n if (slots.default) {\r\n const vnodes = slots.default()\r\n return withDirectives(\r\n h(\r\n Fragment,\r\n vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\r\n ),\r\n [[ElLoadingDirective, isLoading.value]],\r\n )\r\n }\r\n },\r\n }}\r\n </ElUpload>\r\n <ElDialog\r\n appendToBody\r\n modelValue={preview.value}\r\n onUpdate:modelValue={(v) => (preview.value = v)}\r\n >\r\n <img class=\"sky-file-multiple-input__img\" src={previewUrl.value} />\r\n </ElDialog>\r\n </ElFormItem>\r\n </SkyCanAccess>\r\n )\r\n },\r\n})\r\n"],"names":["SkyFileMultipleInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","default","dataId","dataName","dataUrl","label","rules","limit","fileList","autoUpload","attrs","t","route","useRoute","formGrid","useFormGrid","editData","title","computed","shallowRef","uploadRef","useTemplateRef","routeMeta","formData","file","files","fl","ids","raw","preview","ref","previewUrl","controller","isLoading","res","skyConfig","id","url","immediate","action","data","headers","method","beforeUpload","rawFile","accept","listType","onSuccess","onExceed","fs","onPreview","_createVNode","_Fragment","ElIcon","vnodes","slots","withDirectives","h","Fragment","vnode","cloneVNode","ElLoadingDirective","v"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAAA,KAAA,gBAAAC,EAAA;AAAA,EAGEC,MAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,IACEC,WAAAA;AAAAA,MACEC,MAAAA;AAAAA,MACAC,UAAAA;AAAAA;IAEFC,QAAAA;AAAAA,MACEF,MAAAA;AAAAA,MACAC,UAAAA;AAAAA;IAEFD,MAAAA;AAAAA,MACEA,MAAAA;AAAAA,MACAG,SAAAA;AAAAA;IAEFC,QAAAA;AAAAA,MACEJ,MAAAA;AAAAA,MACAG,SAAAA;AAAAA;IAEFE,UAAAA;AAAAA,MACEL,MAAAA;AAAAA,MACAG,SAAAA;AAAAA;IAEFG,SAAAA;AAAAA,MACEN,MAAAA;AAAAA,MACAG,SAAAA;AAAAA;IAEFI,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,MACET,MAAAA;AAAAA,MACAG,SAAAA;AAAAA;IAEFO,UAAAA;AAAAA,MACEV,MAAAA;AAAAA;;IAGFW,YAAAA;AAAAA,MACEX,MAAAA;AAAAA,MACAG,SAAAA;AAAAA,IACF;AAAA;;;IAEoBS,OAAAA;AAAAA,EAAM,GAAA;;MAClBC,GAAAA;AAAAA,cACRC,IAAAC,EAAA,GACAC,IAAAC,EAAA;;MACkBC,UAAAA;AAAAA,aAClBC,IAAAC,EAAA,MAAAtB,EAAA,SAAAA,EAAA,MAAA,GAEAY,IAAAW,EAAAvB,EAAA,QAAA,GACAwB,IAAAC,EAAA,WAAA,GACAC,IAAAV,EAAA;gBAGEW,EAAAA,EAAAA,MAAAA,IAAAA,EAAAA,MAAAA,EAAAA,MAAAA;;AAIA,UAAA3B,EAAA,UAAA,GAAA;AACEwB,QAAAA,EAAAA,OAAAA,WAAAA;AACA,cAAAI,IAAAC,EAAA,CAAA;AACAD,QAAAA,EAAAA,MAAAA,EAAAA,GACAJ,EAAAA,OAAAA,YAAAA,CAAAA,mBAEEA,EAAAA,OAAAA,OAAAA;AAAAA,MAEJ;AAAA;;AAKA,iBAAAM,KAAAlB,EAAA;;AAEImB,UAAAA,EAAAA,KAAAA,EAAAA,EAAAA;AAAAA,aACF;AACE,gBAAAC,IAAAF,EAAA;AACA,UAAAE,GAAA,MAAA,OACEF,EAAAA,KAAAA,EAAAA,KAAAA;QAGJ;AAEFH,MAAAA,EAAAA,EAAAA,MAAAA,IAAAA;AAAAA,OAGFM,IAAAC,EAAA,EAAA,GACAC,IAAAD,EAAA;AAEEC,MAAAA,EAAAA,QAAAA,EAAAA;;AAIF,QAAAC;;MACQC,WAAAA;AAAAA;AAEJ,YAAAN,IAAAJ,EAAA3B,EAAA,MAAA;AACA,UAAA+B,GAAA;AACEK,QAAAA,IAAAA,IAAAA,gBAAAA;AACA,cAAAE,IAAA,MAAAC,EAAA,cAAA,UAAAvC,EAAA,WAAA;AAAA,UACE+B,KAAAA;AAAAA;QAEF,CAAA;;;YAIIS,IAAAA,EAAAA,EAAAA,MAAAA;AAAAA,YACA1C,MAAAA,EAAAA,EAAAA,QAAAA;AAAAA,YACA2C,KAAAA,EAAAA,EAAAA,OAAAA;AAAAA,UACF,EAAA,GACAH;AAAA,MAEJ;AAAA;MAIAI,WAAAA;AAAAA,IACF,CAAA,GAGFC,IAAAT,EAAA,EAAA,GACAU,IAAArB,EAAA,GACAsB,IAAAtB,EAAA,GACAuB,IAAAZ,EAAA,GACApC,IAAAoC,EAAA,GACAa,IAAA,OAAAC,MAAA;;QAEIpB,MAAAA;AAAAA,MACF,CAAA;kBAEEe,EAAAA,QAAAA,EAAAA,KAAAA,QACAC,EAAAA,QAAAA,EAAAA,KAAAA,MACAC,EAAAA,QAAAA,EAAAA,KAAAA,SACAC,EAAAA,QAAAA,EAAAA,KAAAA,QACAhD,EAAAA,QAAAA,EAAAA,KAAAA;;;;;OASJmD,IAAA3B,EAAA,MAAAtB,EAAA,SAAA,UAAA,YAAA,MAAA,GACAkD,IAAA5B,EAAA,MAAAtB,EAAA,SAAA,UAAA,iBAAA,MAAA;;;MAG4C,QAAA,CAAA,UAAA,MAAA;AAAA,MAA4B,QAAAA,EAAA;AAAA,IAAsB,GAAA;AAAA,MAAAK,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA;AAAAA;;;;QAKtE,OAAAa,IAAA,cAAAlB,EAAA,MAAA,KAAA;AAAA,MACiC,GAAA;AAAA,QAAAK,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,EAAAA;AAAAA,UAAA,KAAA;AAAA;;;;UAOX,UAAAL,EAAA,QAAA;AAAA;UAEpB,cAAA+C;AAAA,UACQ,WAAAI;AAAA,UACN,UAAAC;AAAA;;;;UAKI,sBAAA,CAAAC,MAAAzC,EAAA,QAAAyC;AAAA;UAEI,MAAArD,EAAA,SAAA;AAAA,UACD,cAAA;AAAA,UAAA,WAAAsD;AAAA,UAEP,QAAAL,EAAA;AAAA,QAEA,GAAAnC,CAAA,GAAA;AAAA;YAKMT,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,MAAAA,IAAAA,CAAAA;AAAAA,UAAA,CAAA,IAAAkD,EAAAC,GAAA,MAAA,CAAAD,EAAAE,GAAA;AAAA,YAAA,OAAA;AAAA,UAAA,GAAA;AAAA,YAAApD,SAAAA,MAAAA,CAAAA,EAAAA,IAAAA,MAAAA,IAAAA,CAAAA;AAAAA,UAAA,CAAA,GAAAkD,EAAA,OAAA;AAAA,YAAA,OAAA;AAAA;;;AAiBpB,oBAAAG,IAAAC,EAAA,QAAA;AACA,qBAAAC,EAAAC,EAAAC,GAAAJ,EAAA,IAAA,CAAAK,MAAAC,EAAAD,GAAA;AAAA;cAGuD,CAAA,CAAA,CAAA,GAAA,CAAA,CAAAE,GAAA5B,EAAA,KAAA,CAAA,CAAA;AAAA,YAIzD;AAAA,UACF;AAAA;UAAC,cAAA;AAAA;UAKsB,uBAAA,CAAA6B,MAAAjC,EAAA,QAAAiC;AAAA,QACsB,GAAA;AAAA;YAAA,OAAA;AAAA,YAAA,KAAA/B,EAAA;AAAA,UAEgB,GAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAAA;EAKzE;AACF,CAAA;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { UploadRawFile } from 'element-plus';
|
|
1
2
|
/**
|
|
2
3
|
* 所有的AJAX网络请求都是通过 dataProvider.ts 来实现：
|
|
3
4
|
* 1. 登录 login
|
|
@@ -75,6 +76,9 @@ export interface GetManyParams extends ParamBase {
|
|
|
75
76
|
export interface GetManyResult {
|
|
76
77
|
data?: Array<Record<string, unknown>>;
|
|
77
78
|
}
|
|
79
|
+
export type SkyUploadRawFile = UploadRawFile & {
|
|
80
|
+
data?: Record<string, unknown>;
|
|
81
|
+
};
|
|
78
82
|
export interface GetUploadConfigResult {
|
|
79
83
|
data: {
|
|
80
84
|
action: string;
|
|
@@ -83,6 +87,7 @@ export interface GetUploadConfigResult {
|
|
|
83
87
|
data?: Record<string, unknown>;
|
|
84
88
|
headers?: Record<string, unknown>;
|
|
85
89
|
withCredentials?: boolean;
|
|
90
|
+
file: Record<string, unknown>;
|
|
86
91
|
};
|
|
87
92
|
}
|
|
88
93
|
export interface UploadFileParams {
|