206 lines
6.5 KiB
Vue
206 lines
6.5 KiB
Vue
<script>
|
|
// 通用单文件上传字段：模型保存后台 save_name，界面另外保留用户选择的原始文件名。
|
|
import "~/assets/styles/UploadField.BbTCTv6C.css";
|
|
import { toDisplayString } from "vue";
|
|
import { mergeModels } from "vue";
|
|
import { useModel } from "vue";
|
|
import { useId } from "vue";
|
|
import { ref } from "vue";
|
|
import { createCommentVNode } from "vue";
|
|
import { createElementBlock } from "vue";
|
|
import { Fragment } from "vue";
|
|
import { createElementVNode } from "vue";
|
|
import { createTextVNode } from "vue";
|
|
import { unref } from "vue";
|
|
import { defineComponent } from "vue";
|
|
import { openBlock } from "vue";
|
|
import { useApi } from "~/lib/auth.js";
|
|
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
|
var m = {
|
|
class: `field`,
|
|
},
|
|
g = {
|
|
class: `row`,
|
|
},
|
|
_ = [`id`, `accept`, `disabled`],
|
|
v = {
|
|
key: 0,
|
|
class: `state`,
|
|
},
|
|
y = {
|
|
class: `state ok`,
|
|
},
|
|
b = {
|
|
key: 2,
|
|
class: `state`,
|
|
},
|
|
x = {
|
|
key: 1,
|
|
class: `err`,
|
|
},
|
|
S = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `UploadField`,
|
|
props: mergeModels(
|
|
{
|
|
label: {},
|
|
hint: {},
|
|
accept: {},
|
|
},
|
|
{
|
|
modelValue: {
|
|
default: ``,
|
|
},
|
|
modelModifiers: {},
|
|
},
|
|
),
|
|
emits: mergeModels([`uploaded`], [`update:modelValue`]),
|
|
setup(t, { emit: u }) {
|
|
let p = useModel(t, `modelValue`),
|
|
S = u,
|
|
C = useApi(),
|
|
// 每个实例有独立关联 ID，多张证件同时上传时标签仍指向各自的原生输入框。
|
|
L = useId(),
|
|
w = ref(!1),
|
|
T = ref(``),
|
|
E = ref(``);
|
|
// 上传结束后清空原生 input，允许再次选择同一文件；完整响应由 uploaded 事件交给调用方。
|
|
async function D(e) {
|
|
let t = e.target,
|
|
n = t.files?.[0];
|
|
if (n) {
|
|
((w.value = !0), (T.value = ``));
|
|
try {
|
|
let e = await C.upload(n);
|
|
((p.value = e.save_name), (E.value = n.name), S(`uploaded`, e));
|
|
} catch (e) {
|
|
T.value = e instanceof Error ? e.message : `上传失败`;
|
|
} finally {
|
|
((w.value = !1), (t.value = ``));
|
|
}
|
|
}
|
|
}
|
|
// 清除只是取消表单引用，不调用服务器删除文件接口。
|
|
function O() {
|
|
((p.value = ``), (E.value = ``));
|
|
}
|
|
return (n, r) => (
|
|
openBlock(),
|
|
createElementBlock(`div`, m, [
|
|
t.label
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`label`,
|
|
{ key: 0, for: L },
|
|
toDisplayString(t.label),
|
|
9,
|
|
[`for`],
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
createElementVNode(`div`, g, [
|
|
createElementVNode(
|
|
`input`,
|
|
{
|
|
type: `file`,
|
|
id: L,
|
|
accept: t.accept,
|
|
disabled: unref(w),
|
|
onChange: D,
|
|
},
|
|
null,
|
|
40,
|
|
_,
|
|
),
|
|
unref(w)
|
|
? (openBlock(),
|
|
createElementBlock(`span`, v, [
|
|
...(r[0] ||= [
|
|
createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-spin pi-spinner`,
|
|
},
|
|
null,
|
|
-1,
|
|
),
|
|
createTextVNode(` 上传中…`, -1),
|
|
]),
|
|
]))
|
|
: p.value
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
{
|
|
key: 1,
|
|
},
|
|
[
|
|
createElementVNode(`span`, y, [
|
|
(r[1] ||= createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-check-circle`,
|
|
},
|
|
null,
|
|
-1,
|
|
)),
|
|
createTextVNode(
|
|
` ` + toDisplayString(unref(E) || `已上传`),
|
|
1,
|
|
),
|
|
]),
|
|
createElementVNode(
|
|
`button`,
|
|
{
|
|
type: `button`,
|
|
class: `rm`,
|
|
"aria-label": `移除${t.label || `已上传文件`}`,
|
|
onClick: O,
|
|
},
|
|
[
|
|
...(r[2] ||= [
|
|
createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-times`,
|
|
"aria-hidden": `true`,
|
|
},
|
|
null,
|
|
-1,
|
|
),
|
|
]),
|
|
],
|
|
8,
|
|
[`aria-label`],
|
|
),
|
|
],
|
|
64,
|
|
))
|
|
: t.hint
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`span`,
|
|
b,
|
|
toDisplayString(t.hint),
|
|
1,
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
]),
|
|
unref(T)
|
|
? (openBlock(),
|
|
createElementBlock(`span`, x, toDisplayString(unref(T)), 1))
|
|
: createCommentVNode(``, !0),
|
|
])
|
|
);
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-8267b59f`]],
|
|
),
|
|
{
|
|
__name: `UploadField`,
|
|
},
|
|
);
|
|
export {};
|
|
export default S;
|
|
</script>
|