quick-admin-vue3-core
Version:
以快（计算机执行效率、开发效率）为核心的后台管理系统开发模板
292 lines (291 loc) • 7.88 kB
JavaScript
import { defineComponent as c, reactive as m, computed as b, resolveComponent as f, createBlock as g, openBlock as y, unref as l, isRef as h, withCtx as i, createVNode as x, withDirectives as k, createElementVNode as a, vModelText as _ } from "vue";
import { S as q } from "./SectionForm-DWafmnWV.js";
import { v as A } from "./index-C0qRtkRj.js";
import { I as v } from "./IconBtns-UjS1rDpw.js";
import { b as w } from "./platform-DsTwHxm6.js";
const F = /* @__PURE__ */ c({
name: "DemoCenterCompsFormSectionForm",
__name: "index",
setup(T) {
const p = {
activeValue: 1,
inactiveValue: 0,
activeText: "支持",
inactiveText: "不支持",
inlinePrompt: !0,
style: "width: 5em"
}, s = [
{
prop: "isSupportEmail",
label: "邮箱认证",
type: "switch",
// labelWidth: "6em",
attrs: p
},
{
prop: "isSupportPerson",
label: "人工认证",
type: "switch",
// labelWidth: "6em",
attrs: p
},
{
prop: "isSupportDingTalk",
label: "钉钉认证",
type: "switch",
// labelWidth: "6em",
attrs: p
},
{
prop: "isSupportFeiShu",
label: "飞书认证",
type: "switch",
// labelWidth: "6em",
attrs: p
}
];
let t = m({
age: 24,
diff_type: 1
});
const n = b(() => {
const { diff_type: o } = t;
return [
{
// prop: "jcxx",
title: "基础信息",
explain: "纯文本展示和禁用展示",
fields: [
{
prop: "user_name",
label: "姓名",
quickAttrs: {
grid: 8,
pureText: !0
}
},
{
prop: "gender",
label: "性别",
type: "select",
attrs: {
options: "D_Gender"
},
quickAttrs: {
grid: 8,
pureText: !0
}
},
{
tpl: "T_Age",
prop: "age",
label: "年龄",
type: "input-number",
labelWidth: "4em",
quickAttrs: {
grid: 8,
pureText: !0
}
},
{
tpl: "T_Price",
prop: "price",
label: "价格",
labelWidth: "4em",
attrs: {
disabled: !0
},
quickAttrs: {
grid: 12
}
},
{
tpl: "T_Phone",
prop: "phone",
label: "电话",
labelWidth: "4em",
attrs: {
disabled: !0
},
quickAttrs: {
grid: 12
}
}
]
},
{
prop: "debf",
title: "第二部分",
explain: "属性嵌套，数据会挂载在debf属性下",
fields: [
{
tpl: "T_Identity",
prop: "sfzh",
label: "身份证号",
quickAttrs: {
grid: 12
}
},
{
prop: "zsbh",
label: "证书证号",
quickAttrs: {
grid: 12
},
attrs: {
maxlength: 11
}
},
{
prop: "address",
label: "地址",
type: "cascader",
attrs: {
options: "C_Region"
}
},
{
prop: "after_fix",
label: "后缀",
// attrs: {
// style: "50%",
// },
quickAttrs: {
// before: "第",
// after: h(IconBtns, { tpl: "add" }),
after: [
v,
{
tpl: "add",
onClick(e) {
w(`点击了${e}按钮`, "info");
}
}
]
}
},
{
prop: "remark",
label: "备注",
quickAttrs: {
grid: 24
},
attrs: {
type: "textarea"
}
}
]
},
{
// prop: "dsbf",
title: "第三部分",
explain: "正常表单配置",
fields: [
{
prop: "zdy",
label: "自定义组件",
type: "slot",
quickAttrs: {
tips: "这是自定义组件，临时用el-input代替"
}
},
{
prop: "tx",
label: "头像",
required: !1,
type: "BaseUpload",
quickAttrs: {
grid: 12
}
},
{
prop: "zs",
label: "证书",
required: !1,
type: "BaseUpload",
quickAttrs: {
grid: 12
}
},
{
prop: "diff_type",
label: "差异显示类型",
type: "radio-group",
attrs: {
options: [
{ label: "认证方式有prop", value: 1 },
{ label: "认证方式无prop", value: 2 }
]
},
quickAttrs: {
tips: "radio-group控件，默认为button样式",
explain: "点击提交按钮时，有prop，可看到提交参数多嵌套了一层并包裹在prop中，无prop，子级children散开在外层"
}
},
{
prop: "auth_ways",
label: "认证方式",
type: "BaseAnyEleList",
attrs: {
fields: s.slice(...o === 1 ? [0, 2] : [2])
}
},
{
prop: "edit_content",
label: "编辑内容",
type: "slot",
rules: [{ maxlength: 10, message: "不能超过10个字符", trigger: "change" }],
quickAttrs: {
explain: "不能超过最大字符数校验"
}
},
{
prop: "remark",
label: "备注",
attrs: {
type: "textarea",
maxlength: 100
}
}
]
}
];
});
function d(o) {
return A(o);
}
return (o, e) => {
const u = f("BaseEditor");
return y(), g(q, {
class: "q-page-view",
modelValue: l(t),
"onUpdate:modelValue": e[2] || (e[2] = (r) => h(t) ? t.value = r : t = r),
fetch: d,
sections: l(n)
}, {
"head-right-0": i(() => e[3] || (e[3] = [
a("div", { class: "ml-a" }, "这是标题右侧的插槽", -1)
])),
zdy: i(() => [
k(a("input", {
placeholder: "这是自定义组件",
"onUpdate:modelValue": e[0] || (e[0] = (r) => l(t).zdy = r),
style: { border: "1px solid purple" }
}, null, 512), [
[_, l(t).zdy]
])
]),
edit_content: i(() => [
x(u, {
modelValue: l(t).edit_content,
"onUpdate:modelValue": e[1] || (e[1] = (r) => l(t).edit_content = r)
}, null, 8, ["modelValue"])
]),
_: 1
}, 8, ["modelValue", "sections"]);
};
}
});
export {
F as default
};