epic-designer-dev/dist/ui/elementPlus/upload-image/uploadImage.cjs

基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器

"use strict";const r=require("vue");;/* empty css                                       */require("vuedraggable");const w=require("../../../utils/src/common/string.cjs");require("@vueuse/core");require("../../../hooks/src/store/index.cjs");require("../../../utils/src/manager/pluginManager.cjs");const l=require("element-plus"),x=r.defineComponent({emits:["update:modelValue","change"],props:{modelValue:{default:"",type:String}},setup(d,{attrs:g,emit:s}){const u=r.ref([]);let a="";const i=r.ref(""),n=r.ref(!1),o=e=>{n.value=e};r.watch(()=>u.value,e=>{a=e.filter(t=>t.status==="success").map(t=>t.url).join(","),s("update:modelValue",a),s("change",a)}),r.watch(()=>d.modelValue,e=>{if(a!==e){if(e===""){u.value=[];return}e&&u.value&&(u.value=e.split(",").map(t=>({name:t,status:"success",uid:Number(w.getUUID(10,"number")),url:t})))}},{deep:!0,immediate:!0});const m=(e,t)=>{u.value=t},f=e=>{e.url&&(i.value=e.url,o(!0))},v=(e,t,b)=>{u.value=b.map(c=>{var p;return{...c,url:(p=c.response.data)==null?void 0:p.url}})},h=e=>{l.ElMessage.error("上传失败"),console.error(e)},q=()=>{},U=r.computed(()=>({...g,accept:"image/gif,image/jpeg,image/jpg,image/png,image/svg",onBeforeUpload:q,onError:h,onPreview:f,onRemove:m,onSuccess:v,"file-list":u.value,"list-type":"picture-card"}));return()=>r.h("div",{class:"epic-upload-image"},{default:()=>[r.h(l.ElUpload,U.value,{default:()=>[r.h("div",{style:{"text-align":"center"}},{default:()=>[r.h("span",{class:"icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg"}),r.h("div",{class:"ant-upload-text"},{default:()=>"点击上传"})]})]}),(()=>{if(n.value)return r.h(l.ElImageViewer,{onClose:()=>{o(!1)},urlList:[i.value]})})()]})}});module.exports=x;