quick-admin-vue3-core
Version:
以快（计算机执行效率、开发效率）为核心的后台管理系统开发模板
710 lines (709 loc) • 19.8 kB
JavaScript
import { defineComponent as A, reactive as V, ref as c, watch as D, resolveComponent as b, resolveDirective as W, createElementBlock as v, openBlock as n, createCommentVNode as F, Fragment as x, renderList as E, unref as l, createBlock as k, withCtx as h, createTextVNode as L, toDisplayString as P, withDirectives as B, normalizeStyle as j, isRef as C, nextTick as M, computed as R, createVNode as q, createElementVNode as U, vModelText as $ } from "vue";
import { v as O } from "./index-C0qRtkRj.js";
import { _ as I } from "./BaseIcon.vue_vue_type_style_index_0_scope_true_lang-CYfFG7mj.js";
import { v as J, b as G, l as H, aL as K, W as Q } from "./platform-DsTwHxm6.js";
import X from "./CustomPopover-CXpItz0c.js";
import { n as Y } from "./index-D-KS7NhM.js";
const Z = { class: "add-del-tags f-fs-fs-w" }, ee = /* @__PURE__ */ A({
__name: "AddDelTags",
props: {
modelValue: { default: () => V([]) },
maxNum: { default: 3 },
maxlength: { default: 6 }
},
emits: ["update:modelValue"],
setup(w, { emit: f }) {
const _ = { small: "default", default: "large", large: "large" }, { formItem: o } = J(), y = w, t = f, m = c(), r = c(""), p = c(y.modelValue), u = c(!1);
D(
p,
(e) => {
t("update:modelValue", JSON.parse(JSON.stringify(e))), o == null || o.validate("change");
},
{ deep: !0 }
);
function g(e, a) {
p.value.splice(a, 1);
}
function s() {
if (r.value === "") {
u.value = !1;
return;
}
if (p.value.find((e) => e === r.value))
return G(r.value + "已添加"), M(() => m.value.focus());
p.value.push(r.value), u.value = !1, r.value = "";
}
return (e, a) => {
const i = b("el-tag"), T = b("el-input"), z = b("el-button"), N = W("focus");
return n(), v("div", Z, [
(n(!0), v(x, null, E(l(p), (d, S) => (n(), k(i, {
class: "mr-h",
size: _[l(o).size],
onClose: (re) => g(d, S),
key: d,
closable: ""
}, {
default: h(() => [
L(P(d), 1)
]),
_: 2
}, 1032, ["size", "onClose"]))), 128)),
l(p).length < e.maxNum ? (n(), v(x, { key: 0 }, [
l(u) ? B((n(), k(T, {
key: 0,
modelValue: l(r),
"onUpdate:modelValue": a[0] || (a[0] = (d) => C(r) ? r.value = d : null),
style: j({ width: e.maxlength + 3 + "em" }),
closable: "",
placeholder: "请输入",
autofocus: "",
clearable: "",
maxlength: e.maxlength,
onBlur: s,
ref_key: "inpRef",
ref: m
}, null, 8, ["modelValue", "style", "maxlength"])), [
[N]
]) : (n(), k(z, {
key: 1,
icon: l(Y),
type: "primary",
plain: "",
onClick: a[1] || (a[1] = (d) => u.value = !0)
}, null, 8, ["icon"]))
], 64)) : F("", !0)
]);
};
}
}), le = [
{
value: "1",
label: "Level one 1",
children: [
{
value: "1-1",
label: "Level two 1-1",
children: [
{
value: "1-1-1",
label: "Level three 1-1-1"
}
]
}
]
},
{
value: "2",
label: "Level one 2",
children: [
{
value: "2-1",
label: "Level two 2-1",
children: [
{
value: "2-1-1",
label: "Level three 2-1-1"
}
]
},
{
value: "2-2",
label: "Level two 2-2",
children: [
{
value: "2-2-1",
label: "Level three 2-2-1"
}
]
}
]
},
{
value: "3",
label: "Level one 3",
children: [
{
value: "3-1",
label: "Level two 3-1",
children: [
{
value: "3-1-1",
label: "Level three 3-1-1"
}
]
},
{
value: "3-2",
label: "Level two 3-2",
children: [
{
value: "3-2-1",
label: "Level three 3-2-1"
}
]
}
]
}
], te = [
{
label: "省1",
value: "1",
children: [
{
label: "市1-1",
value: "1-1",
children: [
{ label: "县1-1-1", value: "1-1-1" },
{ label: "县1-1-2", value: "1-1-2" }
]
},
{
label: "市1-2",
value: "1-2",
children: [
{ label: "县1-2-1", value: "1-2-1" },
{ label: "县1-2-2", value: "1-2-2" }
]
},
{
label: "市1-3",
value: "1-3",
children: [
{ label: "县1-3-1", value: "1-3-1" },
{ label: "县1-3-2", value: "1-3-2" }
]
}
]
},
{
label: "省2",
value: "2",
children: [
{ label: "市2-1", value: "2-1" },
{ label: "市2-2", value: "2-2" },
{ label: "市2-3", value: "2-3" }
]
}
], ae = { class: "q-page-view" }, de = /* @__PURE__ */ A({
name: "DemoCenterCompsFormBaseForm",
__name: "index",
setup(w) {
const f = [
{
prop: "one",
label: "一",
required: !0,
labelWidth: "0",
quickAttrs: {
// grid: 12,
}
},
{
prop: "two",
label: "二",
required: !0,
labelWidth: "0",
quickAttrs: {
// grid: 12,
}
}
], _ = [
{
prop: "one",
label: "一",
required: !0,
labelWidth: "0",
// attrs: { style: "width:120px" },
quickAttrs: {
grid: 12
}
},
{
prop: "two",
label: "二",
required: !0,
labelWidth: "0",
// attrs: { style: "width:120px" },
quickAttrs: {
grid: 12
}
}
], o = {
// activeValue: 1,
// inactiveValue: 0,
// inlinePrompt: true,
activeText: "支持",
inactiveText: "不支持",
style: "width: 5em"
}, y = [
{
prop: "isSupportEmail",
label: "邮箱认证",
type: "switch",
labelWidth: "6em",
attrs: o
},
{
prop: "isSupportPerson",
label: "人工认证",
type: "switch",
labelWidth: "6em",
attrs: o
},
{
prop: "isSupportDingTalk",
label: "钉钉认证",
type: "switch",
labelWidth: "6em",
attrs: o
},
{
prop: "isSupportFeiShu",
label: "飞书认证",
type: "switch",
labelWidth: "6em",
attrs: o
}
];
let t = V({
widget_size: H,
label_position: "right",
inner_obj: {
one: "嵌套对象必填项一",
two: "嵌套对象必填项二"
},
inner_arr: [{ one: "1", two: "2" }],
user_name: "张三",
phone: "18483221518",
password: "abc123456",
gender: 1,
time: ["2023-04-02", "2023-04-07"],
diff_type: 1,
row_show_2: 1,
channel_source: [1, 2],
join_ways: 2,
num_min: 1,
num_max: 2
// is_remember: true,
});
const m = R(() => {
const { diff_type: s } = t;
return [
{
prop: "widget_size",
label: "组件尺寸",
type: "radio-group",
attrs: {
options: [
{ label: "大型", value: "large" },
{ label: "默认", value: "default" },
{ label: "小型", value: "small" }
]
}
},
{
prop: "label_position",
label: "标签所处位置",
type: "radio-group",
attrs: {
options: [
{ label: "左侧", value: "left" },
{ label: "右侧", value: "right" },
{ label: "上方", value: "top" }
]
}
},
{
prop: "inner_obj",
label: "嵌套（对象）",
type: "BaseAnyEleList",
// type: 'slot',
required: !0,
attrs: {
fields: f,
hideLabel: !0
}
},
{
prop: "inner_arr",
label: "嵌套（数组）",
type: "BaseAddDelList",
// type: 'slot',
required: !0,
attrs: {
fields: _
}
},
{
prop: "inner_tags",
label: "标签",
type: "slot",
quickAttrs: {
tips: "最多添加3个标签"
}
},
{
prop: "user_name",
label: "姓名",
required: !0,
quickAttrs: {
tips: "最少传入prop，label两个属性；tips属性设置表单项下方提示信息;设置required: true, 设为必填；设置attrs属性，完全继承于ElementPlus的表单控件属性；"
},
attrs: {
maxlength: 30
}
},
{
prop: "gender",
label: "性别",
type: "select",
attrs: {
options: [
{ label: "男", value: 1 },
{ label: "女", value: 2 }
]
},
quickAttrs: {
// explain: h("div", { style: "color:red" }, "这是内容"), // 暂时不要用h函数写，会报错
// explain: ["div", { style: "color:red" }, "这是内容"],
explain: X,
// [CustomPopover],
tips: [
"div",
{ style: "color:red;line-height:1.4;margin-top:0.5em;" },
"自定义explain（鼠标放在左侧的问号图标上可查看自定义explain的效果）；传入自定义tips，通过BaseRender渲染"
]
}
},
{
prop: "rate",
label: "评分",
type: "rate",
attrs: {}
},
{
prop: "tree_select",
label: "树形选择器",
type: "tree-select",
attrs: {
data: le
},
quickAttrs: {
tips: '<span style="color:blue;">支持html字符串渲染 <b>tips</b> 文本内容</span>'
}
},
{
tpl: "T_Identity",
prop: "identity",
label: "身份证号",
quickAttrs: {
tips: "explain设置弹出层提示；设置valid，内置身份证、密码等校验；添加example属性，拼接在placeholder后面，作为输入示例",
explain: "这是explain提示",
example: "这是拼接在placeholder后面的输入示例"
}
},
{
tpl: "T_Phone",
prop: "phone",
label: "电话号码",
// required: true,
attrs: {
placeholder: "电话号码（这是自定义的placeholder）",
slots: {
prefix: "Tel"
}
},
quickAttrs: {
tips: "prefix插槽插入图标（传入文本）；内置电话号码校验；自定义placeholder"
}
},
{
tpl: "T_Password",
prop: "password",
label: "密码",
attrs: {
slots: {
// prefix: h(BaseIcon, { name: "Lock" }),
// prefix: h(ElButton, {type: "primary" },'按钮'),
prefix: [I, { name: "Lock" }]
// prefix: [ElButton, { type: "primary" }, { default: "按钮" }],
}
},
quickAttrs: {
tips: "prefix插槽插入图标（传入组件）；内置密码校验；"
}
},
{
prop: "time",
label: "日期(单prop)",
type: "date-picker",
quickAttrs: {
tips: "默认类型是daterange；prop为字符串时，提交表单时是一个数组"
}
},
{
prop: ["start_time", "end_time"],
label: "日期(双prop)",
type: "date-picker",
quickAttrs: {
tips: "props传入数组，提交表单数据时，会被拆成两个字段"
}
},
{
prop: "birthday",
label: "出生日期",
type: "date-picker",
attrs: {
type: "date"
}
},
{
prop: "zdbqsrk",
label: "自动补全输入框",
type: "autocomplete",
attrs: {}
},
{
tpl: "T_Age",
prop: "age",
label: "年龄",
rules: [{ validator: p, trigger: "blur" }],
quickAttrs: {
tips: "tpl模板规则（最小值、最大值）和自定义校验规则（必须大于18岁）同时使用；设置after属性，往表单项后面添加内容【岁】（可以是文本或组件）"
}
},
{ tpl: "T_Number", quickAttrs: { tips: "输入框类型的数值" } },
{
prop: "height",
label: "身高",
type: "slider",
attrs: {
min: 100,
max: 200
}
},
{
prop: "status",
label: "是否启用",
type: "switch",
attrs: {},
quickAttrs: {
tips: "考虑【启用/禁用】用的多，故设为内置switch样式，可通过设置attrs覆盖内置默认样式"
}
},
{
prop: "channel_source",
label: "渠道来源",
type: "checkbox-group",
attrs: {
options: [
{ label: "来源1", value: 1 },
{ label: "来源2", value: 2 },
{ label: "来源3", value: 3 }
]
}
},
{
prop: "is_remember",
label: "是否记住我",
type: "checkbox",
attrs: {
slots: "记住我"
// slots: {
// default: "记住我",
// },
},
quickAttrs: {
tips: "用slots.default改变多选框右侧的文字（默认跟label一样）"
}
},
{
prop: "region",
label: "省市区",
type: "cascader",
attrs: {
options: te
}
},
{
prop: "join_ways",
label: "参与方式",
labelWidth: "15em",
type: "radio-group",
attrs: {
type: "",
options: [
{ label: "方式1", value: 1 },
{ label: "方式2", value: 2 },
{ label: "方式3", value: 3 }
]
},
quickAttrs: {
tips: "手动指定label宽度，覆盖自动计算宽度"
}
},
{
prop: "row_show_1",
label: "并排展示1",
quickAttrs: {
grid: 12,
tips: "表单项禁用"
},
attrs: {
disabled: !0
}
},
{
prop: "row_show_2",
label: "并排展示2",
type: "select",
attrs: {
options: [
{ label: "并排展示选项1", value: 1 },
{ label: "并排展示选项2", value: 2 }
]
},
quickAttrs: {
tips: "纯文本展示",
grid: 12,
pureText: !0
}
},
{
prop: "remark",
label: "备注",
attrs: {
type: "textarea"
}
},
// { tpl: "T_Remark" }, // 备注也可以像这样用模板进行简写
{
prop: ["num_min", "num_max"],
label: "内置常用组件",
type: "BaseNumberRange",
quickAttrs: {
explain: "内置常用组件BaseNumberRange"
}
},
{
prop: "img",
label: "上传图片",
type: "BaseUpload"
// required: true,
},
{
prop: "custom_slot",
label: "自定义组件",
type: "slot",
quickAttrs: {
tips: "只会自定义表单控件（被el-form-item包裹），设置type:'slot'，通过插槽加入"
}
},
{
type: "custom",
renderData: "这是完全自定义的表单项（不被el-form-item包裹）。设置type:'custom'，然后通过插槽加入",
// renderData: ["div", { style: "color:green" }, "这是完全自定义的表单项（不被el-form-item包裹）。设置type:'custom'，然后通过插槽加入"],
attrs: {
style: "font-weight:bolder;font-size:var(--font-size-heavy)"
}
},
{
prop: "open_time",
label: "开幕时间",
type: "time-picker"
},
{
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: y.slice(...s === 1 ? [0, 2] : [2])
}
}
];
});
function r(s, e) {
e === "diff_type" && (t.diff_type = s);
}
const p = (s, e, a) => {
e < 18 ? a(new Error("年龄必须大于18岁")) : a();
};
function u(s, e) {
K({
noValid: () => g()
}, s);
}
function g() {
Q.warning("validateForm: false，不触发表单校验");
}
return (s, e) => {
const a = b("BaseForm");
return n(), v("div", ae, [
q(a, {
modelValue: l(t),
"onUpdate:modelValue": e[2] || (e[2] = (i) => C(t) ? t.value = i : t = i),
style: { width: "600px" },
fetch: l(O),
fields: l(m),
size: l(t).widget_size,
labelPosition: l(t).label_position,
pureText: !1,
moreBtns: [
{ name: "reject", popconfirm: !1 },
{
name: "noValid",
text: "不触发表单校验",
validateForm: !1,
attrs: { type: "primary", plain: !0 }
},
{
name: "jump",
text: "回到首页",
to: { name: "home" },
attrs: { type: "primary", link: !0 }
}
],
onMoreBtns: u,
onChange: r
}, {
inner_tags: h(() => [
q(ee, {
modelValue: l(t).inner_tags,
"onUpdate:modelValue": e[0] || (e[0] = (i) => l(t).inner_tags = i)
}, null, 8, ["modelValue"])
]),
custom_slot: h(() => [
B(U("input", {
placeholder: "请输入（自定义组件示例）",
"onUpdate:modelValue": e[1] || (e[1] = (i) => l(t).custom_slot = i)
}, null, 512), [
[$, l(t).custom_slot]
])
]),
custom_item: h(() => e[3] || (e[3] = [
L(" 完全自定义内容（不会渲染el-form-item） ")
])),
_: 1
}, 8, ["modelValue", "fetch", "fields", "size", "labelPosition"])
]);
};
}
});
export {
de as default
};