quick-admin-vue3-core
Version:
以快（计算机执行效率、开发效率）为核心的后台管理系统开发模板
916 lines (915 loc) • 28.8 kB
JavaScript
import { defineComponent as R, computed as X, resolveComponent as b, createElementBlock as a, openBlock as s, Fragment as g, createElementVNode as o, normalizeClass as S, unref as c, createVNode as n, toDisplayString as D, createCommentVNode as C, createTextVNode as T, ref as w, reactive as Z, h as m, onMounted as ee, createBlock as A, isRef as te, withCtx as l, renderList as N, mergeProps as F } from "vue";
import { u as se, n as ae, M as U, v as L } from "./index-C0qRtkRj.js";
import { _ as oe } from "./AddEdit.vue_vue_type_script_setup_true_lang-C39KZYjn.js";
import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
import { u as le } from "./index-CCwfAkxj.js";
import { aL as E } from "./platform-DsTwHxm6.js";
import { u as ne } from "./dict-C-wULPWV.js";
import { u as re } from "./vue-router-CAs1aAcA.js";
import { D as pe, E as ie } from "./index-D-KS7NhM.js";
import { _ as ce } from "./Index.vue_vue_type_script_setup_true_lang-Jn_i5JeS.js";
import { _ as de } from "./Index.vue_vue_type_script_setup_true_lang-BLq8Ki8B.js";
import me from "./CustomColHead-L0t8Dfro.js";
import y from "./CustomPopover-CiYtXrdn.js";
const ue = { class: "f-0 text" }, _e = {
key: 0,
class: "f-0 text"
}, fe = {
key: 1,
class: "f-0 text"
}, ye = {
key: 0,
class: "f-0 text"
}, be = {
key: 1,
class: "f-0 text"
}, he = /* @__PURE__ */ R({
name: "InfoSteps",
__name: "InfoSteps",
props: {
data: { default: () => ({}) }
},
setup($) {
const i = {
0: {
text: "已完善 - 已通过",
class: "success"
},
1: {
text: "已完善 - 未通过",
class: "danger"
},
2: {
text: "已完善 - 待审核",
class: "primary"
},
3: {
text: "未完善",
class: "warning"
}
}, v = $, d = X(() => {
const { infoStatus: q = "", idCardStatus: r, company_status: p, school_status: x } = v.data;
return {
hasRealName: r === 0,
hasAuth: p === 0 || x === 0,
info: i[q] || {}
};
});
return (q, r) => {
var x, k;
const p = b("BaseIcon");
return s(), a(g, null, [
o("div", {
class: S([(x = c(d).info) == null ? void 0 : x.class, "f-fs-c step-item"])
}, [
r[0] || (r[0] = o("div", { class: "f-0 num" }, "1", -1)),
o("div", ue, D(((k = c(d).info) == null ? void 0 : k.text) || "-"), 1),
n(p, {
class: "icon",
size: "1.5em",
name: "CircleCheckFilled"
})
], 2),
o("div", {
class: S([{ success: c(d).hasRealName }, "f-fs-c step-item"])
}, [
r[1] || (r[1] = o("div", { class: "f-0 num" }, "2", -1)),
c(d).hasRealName ? (s(), a("div", _e, "已实名")) : (s(), a("div", fe, "未实名")),
n(p, {
class: "icon",
size: "1.5em",
name: "CircleCheckFilled"
})
], 2),
o("div", {
class: S([{ success: c(d).hasAuth }, "f-fs-c step-item"])
}, [
r[2] || (r[2] = o("div", { class: "f-0 num" }, "3", -1)),
c(d).hasAuth ? (s(), a("div", ye, "已认证")) : (s(), a("div", be, "未认证")),
n(p, {
class: "icon",
size: "1.5em",
name: "CircleCheckFilled"
})
], 2)
], 64);
};
}
}), j = /* @__PURE__ */ M(he, [["__scopeId", "data-v-eececd07"]]), xe = { class: "auth-info" }, ke = {
key: 0,
class: "f-c-c-c item-box"
}, ge = { class: "text-tag" }, ve = { class: "text-tag" }, Te = {
key: 1,
class: "f-c-c-c item-box"
}, Ce = { class: "text-tag" }, Be = /* @__PURE__ */ R({
name: "AuthInfo",
__name: "AuthInfo",
props: {
data: { default: () => ({}) }
},
setup($) {
return (i, v) => {
const d = b("BaseTag");
return s(), a("div", xe, [
i.data.school_status === 0 ? (s(), a("div", ke, [
n(d, {
name: "D_AuthCase",
value: "2"
}),
o("div", ge, D(i.data.labelSchool || "-"), 1),
o("div", ve, D(i.data.school_name || "-"), 1)
])) : C("", !0),
i.data.company_status === 0 ? (s(), a("div", Te, [
n(d, {
name: "D_AuthCase",
value: "3"
}),
o("div", Ce, D(i.data.labelCompany || "-"), 1)
])) : C("", !0),
i.data.school_status !== 0 && i.data.company_status !== 0 ? (s(), a(g, { key: 2 }, [
T("-")
], 64)) : C("", !0)
]);
};
}
}), Ae = /* @__PURE__ */ M(Be, [["__scopeId", "data-v-fe3ecd27"]]), De = { class: "f-sb-c" }, qe = {
key: 0,
class: "f-c-c-c"
}, Ie = { key: 1 }, $e = /* @__PURE__ */ R({
name: "DemoCenterCrudComplexBaseCrud",
__name: "index",
setup($) {
const { getOpts: i } = ne(), { openPopup: v } = se(), d = re(), q = w(null), r = w(0), p = w(0), { getSearchOpts: x } = le();
let k = Z({
user_name: "张三",
multi_tag: [0],
date_range_def_val: ["2023-08-19", "2023-08-27"],
num_range_def_val: [10, 20]
});
const B = [
{
prop: "user_name",
label: "姓名"
},
{
prop: "status",
label: "启用状态",
type: "select",
attrs: {
options: "D_EnableStatus"
}
},
{
prop: "text_opts",
label: "文本下拉",
type: "select",
attrs: {
options: "D_TestText"
}
},
{
prop: "multi_tag",
label: "多标签",
type: "select",
attrs: {
options: "D_RoleType",
multiple: !0
}
},
{
prop: "text_opts",
label: "文本下拉",
type: "select",
attrs: {
options: "D_TestText"
}
},
{
prop: "arr_opts",
label: "数组下拉",
type: "select",
attrs: {
options: "D_TestArray"
}
},
{
prop: "obj_opts",
label: "对象下拉",
type: "select",
attrs: {
options: "D_TestObj"
}
},
{
prop: "function_opts",
label: "函数下拉",
type: "select",
attrs: {
options: "D_TestFunction"
}
},
{
prop: "promise_opts_arr",
label: "Pro下拉数组",
type: "select",
attrs: {
options: "D_TestPromiseArray"
},
quickAttrs: {
explain: "Promise返回一个数组"
}
},
{
prop: "promise_opts_obj",
label: "Pro下拉对象",
type: "select",
attrs: {
options: "D_TestPromiseObject"
},
quickAttrs: {
explain: "Promise返回一个对象"
}
},
{
prop: "fetch_opts",
label: "直接请求下拉",
type: "select",
attrs: {
options: "D_TestFetch"
},
quickAttrs: {
explain: "系统刚初始化时，就会发送请求"
}
},
{
prop: "async_function_opts",
label: "按需请求下拉",
type: "select",
attrs: {
options: "D_TestFetchLazy"
},
quickAttrs: {
explain: "当用到字典数据时才会发送请求"
}
},
{
prop: "batch_opts_1",
label: "批量下拉1",
type: "select",
attrs: {
options: "D_BatchInsert_1"
},
quickAttrs: {
explain: "通过接口一次性请求很多下拉项"
}
},
{
prop: "batch_opts_2",
label: "批量下拉2",
type: "select",
attrs: {
options: "D_BatchInsert_2"
}
},
x("school", {
prop: "schoolId",
label: "学校",
quickAttrs: {
explain: "hooks远程搜索下拉"
}
}),
x("company", {
prop: "companyId",
label: "公司",
quickAttrs: {
explain: "hooks远程搜索下拉，并自定义el-option样式"
}
}),
{
prop: "local_cascader",
label: "写死级联",
type: "cascader",
attrs: {
options: "D_TestCascader"
}
},
{
prop: "live_city",
label: "居住地址",
type: "cascader",
attrs: {
options: "C_Region",
filterable: !0
}
},
{
prop: "tree_opts",
label: "树形下拉",
type: "tree-select",
attrs: {
options: "D_TestTree"
}
},
{
prop: "num_range_arr",
label: "数字(数组)",
type: "BaseNumberRange"
},
{
prop: ["num_range_min", "num_range_max"],
label: "数字(对象)",
type: "BaseNumberRange"
},
{
prop: "num_range_def_val",
label: "数字(默值)",
type: "BaseNumberRange"
},
{
prop: "date_range",
label: "日期(数组)",
type: "date-picker"
},
{
prop: ["date_range_min", "date_range_max"],
label: "日期(对象)",
type: "date-picker"
},
{
prop: "date_range_def_val",
label: "日期(默值)",
type: "date-picker"
},
{
prop: "custom_form_item",
label: "自定义",
type: "slot",
quickAttrs: {
explain: "在搜索表单中一般几乎用不到自定义特性，此处用作示例"
}
}
], z = [
{ title: "基础", fields: B.slice(0, 2) },
{ title: "下拉", fields: B.slice(2, 13) },
{ title: "区间", fields: B.slice(13, 19) },
{ title: "其他", fields: B.slice(19) }
], O = [
{ tpl: "T_Selection" },
{
prop: "insertCols",
label: "外部插入列",
fixed: "left",
quickAttrs: {
explain: "外部插入列实例：内嵌、custom自定义"
},
children: [
{
tpl: "T_UserInfo",
// prop: "user_data", //T_UserInfo 中的默认值为 user_data
label: "用户信息",
quickAttrs: {
explain: {
title: "业务内嵌组件 - UserInfo",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: ["单个项目的常用组件，采用内嵌至系统的方式。", "预设了列宽，prop等属性", "可通过attrs传入UserInfo组件的props属性"]
},
{ name: "设置", desc: '{tpl: "T_UserInfo"}' }
]
})
}
}
},
attrs: {
simple: !!p.value
}
},
//注意观察下面的关于是否显示的多种写法
!p.value && {
prop: "info_complete_children",
label: "资料完善状态",
width: 170,
type: "slot",
quickAttrs: {
// explain: `需设置 {type: "slot"}`,
explain: {
title: "自定义组件 - InfoSteps",
slots: {
default: m(y, {
sections: [
{ name: "描述", desc: "项目中的不常用组件，采用自定义方式插入" },
{ name: "设置", desc: '{type: "slot"}' }
]
})
}
}
}
}
]
},
{
prop: "info_complete",
label: "资料完善状态",
width: 170,
type: "slot",
quickAttrs: {
explain: "不放在children中进行展示"
}
},
{
prop: "sysCols",
label: "系统内置列",
children: [
{
prop: "avatar",
label: "头像",
tpl: "T_BaseImg",
quickAttrs: {
// explain: "内置图片组件 [BaseImg]，含列宽、图片大小、圆角样式、预览等功能；设置{minWidth: 160} 覆盖默认宽度",
explain: {
title: "系统内置组件 - BaseImg",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: [
"任意项目的常用组件，采用内置至系统的方式。",
"预设了含列宽、图片大小、圆角样式、图片预览等功能。",
"设置{minWidth: 160} 覆盖默认宽度"
]
},
{ name: "设置", desc: '{tpl: "T_BaseImg"}' }
]
})
}
}
}
},
{
prop: "produce",
label: "自我介绍",
tpl: "T_BaseText",
attrs: {
maxLine: 3
},
quickAttrs: {
explain: {
title: "系统内置组件 - BaseText",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: [
"任意项目的常用组件，采用内置至系统的方式。",
"内置列宽；超出文本后自动省略，且可点击后弹出弹窗查看完整内容",
"可通过attrs传入BaseText的props属性"
]
},
{ name: "设置", desc: '{tpl: "T_BaseText"}' }
]
})
}
}
}
},
{
prop: "avatar",
label: "头像路径",
tpl: "T_BaseCopy",
quickAttrs: {
explain: {
title: "系统内置组件 - BaseCopy",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: ["任意项目的常用组件，采用内置至系统的方式。", "点击整个文本域进行复制", "可通过attrs传入BaseCopy的props属性"]
},
{ name: "设置", desc: '{tpl: "T_BaseCopy"}' }
]
})
}
}
}
},
{
prop: "userCode",
label: "userCode",
tpl: "T_BaseCopy",
attrs: {
// to: (row: CommonObj) => `/common-center/user/detail?id=${row.userCode}`,
// 暂时没有实现，检测到绑定了onClick事件后，就将clickIconCopy设为true
clickIconCopy: !0,
onClick(u) {
d.push(`/common-center/user/detail?id=${u.userCode}`);
}
},
quickAttrs: {
// explain: `文本复制，支持跳转`,
explain: {
title: "系统内置组件 - BaseCopy",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: ["任意项目的常用组件，采用内置至系统的方式。", "点击文本跳转页面，点击图标进行复制", "可通过attrs传入BaseCopy的props属性"]
},
{ name: "设置", desc: '{tpl: "T_BaseCopy"}' }
]
})
}
}
}
},
{
prop: "type_text",
label: "$自定义多维度$",
// label: h(CustomColHead),
minWidth: 210,
quickAttrs: {
// explain: "这是自定义explain示例（传入字符串）",
// explain: { title: "这是标题", width: 320, content: "这是自定义explain示例（传入属性对象）" },
// explain: h(CustomColHead, { type: "explain" }),
// explain: [CustomColHead],
explain: {
title: "自定义【格头 + explain + formatter】",
width: 400,
slots: {
default: m(y, {
sections: [
{ name: "自定义表格头", desc: "展示如何自定义表格头" },
{ name: "自定义explain", desc: "展示如何自定义explain" },
{ name: "formatter", desc: "展示如何用继承自ElementPlus的formatter方法处理数据" }
]
})
}
}
},
formatter(u, t, _, f = 0) {
return `自定义第${f}行：表格头 + explain + formatter`;
},
slots: {
header: m(me)
}
},
p.value ? {
prop: "is_proxy",
label: "标签(自定义，simple可见)",
width: 220,
type: "slot"
} : {
prop: "status",
label: "启/禁用状态",
width: 150,
tpl: "T_BaseTag",
attrs: {
name: "D_EnableStatus"
},
quickAttrs: {
explain: {
title: "系统内置组件 - BaseTag",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: ["任意项目的常用组件，采用内置至系统的方式。", "非simple可见"]
},
{ name: "设置", desc: '{tpl: "T_BaseTag"}' }
]
})
}
}
}
},
{
prop: "status",
label: "请求状态",
width: 150,
tpl: "T_BaseTag",
attrs: {
name: "D_TestFetchLazy"
},
quickAttrs: {
explain: {
title: "系统内置组件 - BaseTag",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: ["测试请求到的下拉项的解析情况"]
},
{ name: "设置", desc: '{tpl: "T_BaseTag"}' }
]
})
}
}
}
}
]
},
!1,
{
prop: "timeCols",
label: "时间列",
children: [
!p.value && {
prop: "create_time",
label: "注册时间",
// formatter: true,
formatter: "YYYY/MM/DD HH:mm:ss",
quickAttrs: {
explain: {
title: "时间处理",
slots: {
default: m(y, {
sections: [
{
name: "描述",
desc: [
"不设置 tpl 属性。会根据 label 中带时间二字，自动确定该列的宽度；",
"增强了日期的formatter处理，可传入true（会转成默认日期格式）或日期格式字符串，例：YYYY/MM/DD HH:mm:ss，也可传入函数（element-plus本身就支持）"
]
}
]
})
}
}
}
},
{
tpl: "T_Create",
label: "创建时间",
quickAttrs: {
explain: '只设置 {tpl: "T_Create"}，便会默认区创建时间、创建人两个字段的 prop '
}
},
{
tpl: "T_Update",
prop: "update_time",
label: "修改时间",
quickAttrs: {
explain: '设置 {tpl: "T_Update", prop: "update_time"}，只会显示 update_time 属性的值'
}
}
]
},
// 设置tpl模板可以省略其他模板配置内的参数不写
{
tpl: "T_Remark",
// tpl: "T_Remark",
// label: "备注",
quickAttrs: {
explain: '设置{tpl: "T_Remark"}，内置列宽度、label文案'
}
},
// 未设置tpl时，因label中含有备注字样，就被推断为type为remark类型，故也可以获得跟上面写法一样的配置
// {
// prop: "remark",
// label: "备注",
// quickAttrs: {
// explain: `设置{tpl: "T_Remark"}，内置列宽度、label文案`,
// },
// },
{
prop: "user_data.nickname",
label: "多级prop",
minWidth: 100,
quickAttrs: {
explain: "可传入任意多级的prop，例：user.data.info.age"
}
},
{
prop: "wltl",
label: "未联调列",
minWidth: 120,
quickAttrs: {
explain: "未联调的列，表格头右侧会新增一个标红的感叹号图标"
}
}
];
function H(u, t, _) {
const { selectedKeys: f } = _;
E(
{
add: () => V(null, t),
delete: () => U({ ids: f }).then(() => t()),
import: () => G(),
dialog: () => v("这是一个dialog列表示例", ce),
drawer: () => v("这是一个drawer表单示例", de, "drawer")
},
u
);
}
function W(u, t, _) {
const { id: f } = t;
E(
{
edit: () => V(t, _),
delete: () => U({ id: f }).then(() => _()),
forbid: () => L({ id: f, status: 0 }).then(() => _()),
enable: () => L({ id: f, status: 1 }).then(() => _())
},
u
);
}
async function V(u, t) {
v(
`${u ? "编辑" : "新增"}`,
[oe, { data: u, refreshList: t }]
// "drawer" //传入第三个参数drawer，可打开抽屉，不传则默认为dialog
);
}
function G() {
console.log("点击了导入----------");
}
return ee(() => {
}), (u, t) => {
const _ = b("el-radio"), f = b("el-radio-group"), P = b("el-form-item"), Y = b("BaseTag"), K = b("BaseIcon"), J = b("el-tag"), Q = b("BaseCrud");
return s(), A(Q, {
modelValue: c(k),
"onUpdate:modelValue": t[2] || (t[2] = (e) => te(k) ? k.value = e : k = e),
cols: O,
fields: B,
sections: r.value ? z : void 0,
extraBtns: [
"add",
"delete",
{ name: "import", handleClickType: "common" },
{ name: "export", handleClickType: "common" },
"enable",
"forbid",
"repeal",
"upload",
"download",
"pass",
"reject",
{ name: "link", text: "前往详情页" },
{
name: "drawer",
text: "打开drawer表单",
attrs: { type: "primary", icon: c(pe) }
},
{
name: "view",
text: "url跳转",
to: "/common-center/user/detail?id=12",
order: 50,
attrs: { icon: "Link" }
},
{
name: "custom_btn",
text: "自定义按钮",
attrs: { type: "primary", icon: c(ie) }
}
],
operateBtns: (e, h) => {
const { id: I } = e;
return h % 2 === 0 ? [
"edit",
"delete",
"reject",
"repeal",
"pass",
"download",
"log",
"audit",
"reset",
h % 3 === 0 ? "forbid" : "enable",
{ name: "view", text: "查看", to: `/common-center/user/detail?id=${I}` }
] : [
"edit",
"audit",
"reject",
"delete",
"download",
"pass",
"repeal",
"reset",
"log",
{ name: "view", to: { path: "/common-center/user/detail", query: { id: I } } }
];
},
pageSizeNum: 10,
fetch: c(ae),
onExtraBtns: H,
onOperateBtns: W,
key: `${r.value}-${p.value}`,
ref_key: "baseCrudRef",
ref: q
}, {
custom_form_item: l(() => t[3] || (t[3] = [
T("【这是自定义的搜索项】")
])),
middle: l(() => [
o("div", De, [
t[4] || (t[4] = o("div", { class: "ml-r" }, "这是中间插槽（middle）用法示例，也用作查询条件是否按分块显示示例（注意观察查询条件的样式变化）", -1)),
n(P, {
class: "f-0",
label: "是否分块展示查询条件",
style: { "margin-bottom": "0" }
}, {
default: l(() => [
n(f, {
modelValue: r.value,
"onUpdate:modelValue": t[0] || (t[0] = (e) => r.value = e)
}, {
default: l(() => [
(s(!0), a(g, null, N(c(i)("D_YesNoStatus"), (e, h) => (s(), A(_, F({ ref_for: !0 }, e, { key: h }), null, 16))), 128))
]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
}),
n(P, {
class: "f-0",
label: "是否简化展示表格列",
style: { "margin-bottom": "0" }
}, {
default: l(() => [
n(f, {
modelValue: p.value,
"onUpdate:modelValue": t[1] || (t[1] = (e) => p.value = e),
disabled: ""
}, {
default: l(() => [
(s(!0), a(g, null, N(c(i)("D_YesNoStatus"), (e, h) => (s(), A(_, F({ ref_for: !0 }, e, { key: h }), null, 16))), 128))
]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
})
])
]),
info_complete_children: l(({ row: e }) => [
n(j, { data: e }, null, 8, ["data"])
]),
info_complete: l(({ row: e }) => [
n(j, { data: e }, null, 8, ["data"])
]),
info_status: l(({ row: e }) => t[5] || (t[5] = [
T("这是自定义组件 - 信息状态")
])),
auth_info: l(({ row: e }) => [
n(Ae, { data: e }, null, 8, ["data"])
]),
relation_tag: l(({ row: e }) => [
(s(!0), a(g, null, N(e.relationTag, (h, I) => (s(), A(Y, {
name: "User",
class: "mb-q",
value: h.tagCode,
key: I
}, null, 8, ["value"]))), 128)),
e.relationTag.length ? C("", !0) : (s(), a(g, { key: 0 }, [
T("-")
], 64))
]),
is_proxy: l(({ row: e }) => [
n(Y, {
name: "YesNo",
value: e.agentId === 0 ? 1 : 0
}, null, 8, ["value"])
]),
business: l(({ row: e }) => [
e.vipLevel === 1 || e.rechargeMoney ? (s(), a("div", qe, [
e.vipLevel === 1 ? (s(), A(J, {
key: 0,
type: "warning",
effect: "dark"
}, {
default: l(() => [
n(K, { name: "StarFilled" }),
t[6] || (t[6] = T(" 脱单特权 "))
]),
_: 1
})) : C("", !0),
e.rechargeMoney ? (s(), a("div", Ie, "RMB充值：" + D(e.rechargeMoney) + "元", 1)) : C("", !0)
])) : (s(), a(g, { key: 1 }, [
T("-")
], 64))
]),
bottom: l(() => t[7] || (t[7] = [
o("div", { class: "f-sb-c" }, [
o("span", null, "这是底部插槽（bottom）的用法示例。"),
o("span", null, "这是底部插槽（bottom）的用法示例。"),
o("span", null, "这是底部插槽（bottom）的用法示例。")
], -1)
])),
_: 1
}, 8, ["modelValue", "sections", "extraBtns", "operateBtns", "fetch"]);
};
}
}), ze = /* @__PURE__ */ M($e, [["__scopeId", "data-v-ec86ec9b"]]);
export {
ze as default
};