epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
565 lines (564 loc) • 21.3 kB
JavaScript
import { defineComponent as O, ref as w, watch as F, inject as G, computed as R, h as t, nextTick as X } from "vue";
import { ElUpload as q, ElButton as J, ElImageViewer as K, ElMessage as d } from "element-plus";
import { a as U, u as Q } from "./index-B1s67XDZ.js";
const { t: z } = Q(), oe = O({
props: {
modelValue: {
type: Array,
default: () => []
}
},
emits: ["update:modelValue", "update:ocrData"],
setup(L, { emit: I, attrs: e }) {
const a = w([]), v = w(""), j = w(!1), C = w(!1), y = (o) => {
j.value = o;
};
F(a, (o) => {
I("update:modelValue", o);
});
const u = G("disabled", { value: !1 });
F(
() => L.modelValue,
(o) => {
if (o != null && o.length > 0 && a.value != null) {
if (a.value === o) return;
a.value.length = 0, a.value.push(...o);
}
},
{ deep: !0, immediate: !0 }
);
const D = (o, i) => {
X(() => {
k ? (a.value = i.filter(
(n) => {
var c, l;
return ((c = n == null ? void 0 : n.response) == null ? void 0 : c.code) === 200 || ((l = n == null ? void 0 : n.response) == null ? void 0 : l.code) === 201;
}
), k = !1) : a.value = i;
});
}, B = (o) => {
var p, f, g;
let i = o.url || ((f = (p = o == null ? void 0 : o.response) == null ? void 0 : p.data) == null ? void 0 : f.url);
if (!i) return;
const n = [
".jpg",
".jpeg",
".png",
".gif",
".svg",
".bmp",
".webp"
], c = ((g = o.name) == null ? void 0 : g.toLowerCase()) || "", l = n.some((h) => c.endsWith(h)), m = c.endsWith(".pdf");
l ? (v.value = i, C.value = !1, y(!0)) : m ? (v.value = i, C.value = !0, y(!0)) : window.open(i);
}, M = (o) => {
var l, m, p, f, g;
const i = (m = (l = e.componentSchema) == null ? void 0 : l.componentProps) == null ? void 0 : m.accept;
if (i) {
const h = i.split(",").map((s) => s.trim().toLowerCase()).filter((s) => s), x = (((p = o.name) == null ? void 0 : p.toLowerCase()) || "").split("."), b = x.length > 1 ? "." + x.pop() : "", r = o.type || "";
if (!h.some((s) => {
if (s === "*/*")
return !0;
if (s.startsWith("."))
return b === s;
if (s.endsWith("/*")) {
const H = s.split("/")[0];
return r.startsWith(H + "/");
} else return s.includes("/") ? r === s || r.startsWith(s + "/") : b === "." + s;
}))
return d.error(`只能上传${i}类型的文件!`), !1;
}
const n = +(((g = (f = e.componentSchema) == null ? void 0 : f.componentProps) == null ? void 0 : g.maxSize) ?? 10);
return o.size / 1024 / 1024 < n ? !0 : (d.error(`文件大小不能超过 ${n}MB!`), !1);
};
let k = !1;
const V = (o, i, n) => {
o.code !== 200 && o.code !== 201 && (d.error(o.msg || z("uploadFailed")), k = !0), console.log(n);
}, _ = (o, i, n) => {
d.error(z("uploadFailed")), console.error(o);
}, W = (o) => {
var i, n;
return ((n = (i = o.response) == null ? void 0 : i.data) == null ? void 0 : n.url) || "";
}, A = (o) => {
var n;
const i = (n = o.response) == null ? void 0 : n.code;
return o.status === "fail" || i && i !== 200 && i !== 201 ? !1 : o.status === "success" || !!W(o);
}, E = R(() => a.value.some(
(o) => o.status === "ready" || o.status === "uploading"
)), N = (o, i) => {
let { limit: n } = e;
d.warning(`最多只能上传 ${n} 个文件`);
}, T = () => {
var n, c;
if (a.value.length === 0) {
d.warning("请先上传文件");
return;
}
if (!(e != null && e.callBackUrl)) {
d.warning("请先配置回填接口地址");
return;
}
if (E.value) {
d.warning("文件上传中，请稍后再试");
return;
}
if (a.value.filter(
(l) => !A(l)
).length > 0) {
d.warning("存在上传失败的文件，请删除后重新上传");
return;
}
const i = a.value.map(W).filter((l) => l.trim());
if (i.length !== a.value.length) {
d.warning("存在未获取到上传地址的文件，请重新上传");
return;
}
I("update:ocrData", {
url: i,
field: (n = e.componentSchema) == null ? void 0 : n.field,
label: (c = e.componentSchema) == null ? void 0 : c.label,
callBackUrl: e == null ? void 0 : e.callBackUrl,
callBackMethod: e == null ? void 0 : e.callBackMethod,
callBackField: e == null ? void 0 : e.callBackField,
callBackDataPath: e == null ? void 0 : e.callBackDataPath,
validate: e == null ? void 0 : e.validate,
validateParams: e == null ? void 0 : e.validateParams
}), e.componentSchema.componentProps = {
...e.componentSchema.componentProps,
hasAlreadyOcr: !0
};
}, $ = R(() => ({
...e,
"file-list": a.value,
beforeUpload: M,
onChange: D,
onSuccess: V,
onError: _,
onPreview: B,
onExceed: N
}));
return () => t(
"div",
{
class: "epic-ocr-upload",
style: {
padding: "20px",
backgroundColor: "#ffffff",
borderRadius: "8px",
boxShadow: "0 2px 12px 0 rgba(0, 0, 0, 0.08)",
transition: "all 0.3s ease"
}
},
{
default: () => {
var o, i, n, c;
return [
// 提示文案
e.disabled || u.value ? null : t(
"div",
{
style: {
padding: "16px 20px",
backgroundColor: "#f0f9ff",
borderRadius: "6px",
marginBottom: "20px",
border: "1px solid #e0f2fe",
color: "#334155",
fontSize: "14px",
lineHeight: "1.5",
display: "flex",
alignItems: "flex-start",
gap: "8px"
}
},
[
t("span", {
class: "icon--epic icon--epic--error-outline-rounded",
style: {
color: "#3b82f6",
fontSize: "16px",
marginTop: "2px"
}
}),
// "完成文件上传后，点击「回填数据」，系统将自动识别文件内容并填充表单。",
// "操作步骤：① 上传文件 → ② 点击「OCR识别」 → 自动识别并回填信息",
"操作步骤：① 上传文件 → ② 点击「OCR识别」 → 自动识别并回填信息"
]
),
// 上传按钮
t(
q,
{
...$.value,
headers: {
Authorization: `Bearer ${U.get("Admin-Token")}`,
"X-Tenant-Gray": U.get("X-Tenant-Gray")
},
listType: "picture-card",
style: {
marginBottom: e.disabled || u.value ? "0" : "20px"
}
},
{
default: () => [
t(
"div",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100%",
cursor: e.disabled || u.value ? "not-allowed" : "pointer",
opacity: e.disabled || u.value ? 0.6 : 1,
transition: "all 0.3s ease",
borderRadius: "6px",
backgroundColor: "#fafafa"
}
},
[
t("span", {
class: "icon--epic icon--epic--cloud-upload-outlined",
style: {
marginBottom: "8px",
color: "#9ca3af",
fontSize: "28px",
transition: "all 0.3s ease"
}
}),
t(
"span",
{
style: {
fontSize: "14px",
color: "#6b7280",
fontWeight: 500,
marginBottom: "4px"
}
},
z("fileUpload")
),
t(
"span",
{
style: {
fontSize: "12px",
color: "#9ca3af"
}
},
"支持图片和PDF文件"
)
]
)
],
file: ({ file: l }) => {
var S, x, b;
const m = [
".jpg",
".jpeg",
".png",
".gif",
".svg",
".bmp",
".webp"
], p = ((S = l.name) == null ? void 0 : S.toLowerCase()) || "", f = m.some(
(r) => p.endsWith(r)
), g = p.endsWith(".pdf"), h = l.url || ((b = (x = l == null ? void 0 : l.response) == null ? void 0 : x.data) == null ? void 0 : b.url);
return t(
"div",
{
class: "el-upload-list__item",
style: {
backgroundColor: "transparent",
border: "none",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
position: "relative",
cursor: "pointer"
},
onClick: () => B(l)
},
[
// 删除按钮
e.disabled || u.value ? null : t(
"button",
{
type: "button",
class: "el-upload-list__item-delete",
style: {
position: "absolute",
top: "4px",
right: "4px",
width: "20px",
height: "20px",
border: "none",
borderRadius: "50%",
backgroundColor: "rgba(0, 0, 0, 0.6)",
color: "white",
fontSize: "12px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.3s ease",
zIndex: 10
},
onClick: (r) => {
r.stopPropagation();
const P = a.value.findIndex(
(s) => s.uid === l.uid
);
P !== -1 && a.value.splice(P, 1);
},
onMouseenter: (r) => {
r.target && (r.target.style.backgroundColor = "#ff4d4f", r.target.style.transform = "scale(1.1)");
},
onMouseleave: (r) => {
r.target && (r.target.style.backgroundColor = "rgba(0, 0, 0, 0.6)", r.target.style.transform = "scale(1)");
}
},
"×"
),
// 缩略图
t(
"div",
{
style: {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "4px",
overflow: "hidden"
}
},
[
f && h ? t("img", {
src: h,
style: {
width: "100%",
height: "100%",
objectFit: "contain"
}
}) : g && h ? t(
"div",
{
style: {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "white"
}
},
[
t("img", {
src: "https://ess-ds.com/statics/gd-data/images/pdf.png",
style: {
width: "60%",
height: "60%",
objectFit: "contain"
},
alt: l.name
})
]
) : t(
"div",
{
style: {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "white"
}
},
[
t("img", {
src: "https://ess-ds.com/statics/gd-data/images/unknown-file.png",
style: {
width: "60%",
height: "60%",
objectFit: "contain"
},
alt: l.name
})
]
)
]
)
// 文件名
// h(
// "span",
// {
// title: file.name,
// style: {
// marginTop: "4px",
// fontSize: "12px",
// color: "#606266",
// maxWidth: "100%",
// overflow: "hidden",
// textOverflow: "ellipsis",
// whiteSpace: "nowrap",
// textAlign: "center",
// },
// },
// file.name,
// ),
]
);
}
}
),
// 回填数据按钮
e.disabled || u.value ? null : t(
J,
{
disabled: e.disabled || u.value || E.value,
onClick: T,
style: {
marginTop: "0",
width: "100%",
padding: "10px 24px",
fontSize: "14px",
fontWeight: 500,
borderRadius: "6px",
backgroundColor: "#3b82f6",
borderColor: "#3b82f6",
color: "white",
transition: "all 0.3s ease"
}
},
{
default: () => [
// 按钮内容
t("span", {
class: "icon--epic icon--epic--radio-button-checked-outline",
style: {
marginRight: "8px",
fontSize: "16px"
}
}),
"OCR识别"
]
}
),
// 警告信息显示
t(
"div",
{
style: {
marginTop: "8px",
padding: "12px 16px",
backgroundColor: "#ff4d4f",
color: "white",
borderRadius: "6px",
fontSize: "14px",
fontWeight: 500,
textAlign: "left",
boxShadow: "0 2px 8px rgba(255, 77, 79, 0.3)",
display: (i = e.model) != null && i[((o = e.componentSchema) == null ? void 0 : o.field) + "-orcWarningInfo"] ? "block" : "none"
}
},
((c = e.model) == null ? void 0 : c[((n = e.componentSchema) == null ? void 0 : n.field) + "-orcWarningInfo"]) || ""
),
// 预览器
(() => {
if (j.value)
return C.value ? t(
"div",
{
class: "el-image-viewer__wrapper",
style: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 2e3,
backgroundColor: "rgba(0, 0, 0, 0.8)",
display: "flex",
alignItems: "center",
justifyContent: "center"
}
},
[
// 关闭按钮
t(
"button",
{
style: {
position: "absolute",
top: "24px",
right: "24px",
width: "36px",
height: "36px",
border: "none",
borderRadius: "50%",
backgroundColor: "rgba(255, 255, 255, 0.15)",
color: "white",
fontSize: "20px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.3s ease",
backdropFilter: "blur(8px)"
},
onClick: () => y(!1)
},
"×"
),
// PDF预览内容
t(
"div",
{
style: {
width: "90%",
height: "90%",
backgroundColor: "white",
borderRadius: "8px",
overflow: "hidden",
position: "relative",
boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
maxWidth: "1400px",
maxHeight: "900px",
minWidth: "980px",
minHeight: "600px"
}
},
[
t("iframe", {
src: v.value,
style: {
width: "100%",
height: "100%",
border: "none"
},
title: "PDF Preview"
})
]
)
]
) : t(K, {
urlList: [v.value],
onClose: () => {
y(!1);
}
});
})()
];
}
}
);
}
});
export {
oe as default
};