@javaguns/flow-ui
Version:
``` <template> <a-spin :spinning="loading"> <FlowDesigner ref="flowDesigner" top="50px"> </FlowDesigner> </a-spin> </template> <script lang="ts" setup> import { ref, provide, onMounted } from 'vue'; import { FlowDesigner, LoadingKey } from '@j
262 lines (261 loc) • 9.79 kB
JavaScript
import { defineComponent as U, reactive as re, getCurrentInstance as ue, ref as u, computed as x, nextTick as P, onMounted as ce, openBlock as I, createBlock as k, unref as o, withCtx as m, createVNode as c, createElementVNode as K, withKeys as de, createCommentVNode as z, createTextVNode as T, createElementBlock as ie } from "vue";
import { pluginManager as p } from "@javaguns/utils";
import { IconSearchOutline as pe } from "@javaguns/icon";
import { getPageRole as ge } from "../../utils/adminApi.mjs";
import { radioSelect as me, checkBox as D } from "./common.mjs";
import ve from "./selected-list.vue.mjs";
const fe = { class: "flow-select-user-table-card" }, he = { class: "search" }, we = { class: "user-table" }, Ce = {
key: 0,
class: "guns-flow-pagination"
}, Re = U({ name: "flow-selection-role" }), xe = /* @__PURE__ */ U({
...Re,
props: {
isRadio: { type: Boolean, default: !0 },
selectData: {}
},
emits: ["selectedChange"],
setup(E, { expose: G, emit: $ }) {
const H = p.getComponent("Row"), V = p.getComponent("Col"), L = p.getComponent("InputSearch"), M = p.getComponent("Table"), y = p.getComponent("TableColumn"), O = p.getComponent("Radio"), J = p.getComponent("Button"), Q = p.getComponent("Pagination"), r = E, i = re({
selectedRowKeys: r.selectData ? r.selectData.map((e) => e.id) : [],
loading: !1
}), { appContext: j } = ue(), n = j.app.config.globalProperties.$flowUI, S = u(null), q = u(n == "arco-design" ? "columns" : "default"), l = u(r.selectData ? r.selectData : []), A = u(), v = u([]), b = u(!1), f = u(10), N = u(0), g = u(1), F = [
{
title: "角色名",
dataIndex: "roleName"
},
{
title: "角色编码",
dataIndex: "roleCode"
}
], C = u({
orgId: null,
realName: null
}), W = x(() => ({
y: "calc(100vh - 500px)"
})), X = x(() => {
const e = {
onChange: (a, t) => {
i.selectedRowKeys = a;
},
type: r.isRadio ? "radio" : "checkbox",
selectedRowKeys: i.selectedRowKeys,
onSelect: _,
onSelectAll: ee,
getCheckboxProps: (a) => ({
props: {
disabled: a.name === "Disabled User",
// Column configuration not to be checked
name: a.name
}
})
};
return n == "arco-design" && delete e.selectedRowKeys, e;
}), Y = x(() => ({
total: N.value,
current: g.value,
pageSize: f.value,
showTotal: n == "arco-design" ? !0 : (e) => `总共 ${e} 项`,
defaultPageSize: 10,
pageSizeOptions: ["5", "10", "15", "20"],
// 可不设置使用默认
showSizeChanger: !0,
// 是否显示pagesize选择
showQuickJumper: !1,
// 是否显示跳转窗
onChange: (e, a) => {
g.value = e, f.value = a, w();
}
})), h = $, Z = (e) => e.roleId, _ = (e, a) => {
r.isRadio ? (l.value = [], me(a, e, l.value, "roleId", "roleName")) : D(a, [e], l.value, "roleId", "roleName"), h("selectedChange", l.value);
}, ee = (e, a, t) => {
let s = [];
a && a.forEach((d) => {
let R = { name: d.roleName, id: d.roleId };
s.push(R);
}), l.value = s, h("selectedChange", l.value);
}, B = (e) => {
n === "element-plus" && (r.isRadio ? _(Array.isArray(e) ? e[0] : e, !0) : _(e, !0));
}, ae = (e, a) => {
if (n === "element-plus")
D(!0, e, l.value, "roleId", "roleName");
else if (n === "arco-design") {
const t = v.value, s = [];
r.isRadio && (l.value = [], i.selectedRowKeys = []);
for (let d = 0; d < t.length; d++) {
const R = t[d];
e.includes(R.roleId) && (s.push(R), i.selectedRowKeys.push(R.roleId));
}
D(!0, s, l.value, "roleId", "roleName");
}
h("selectedChange", l.value);
}, le = (e) => {
let a = [];
e.forEach((t) => {
let s = { name: t.roleName, id: t.roleId };
a.push(s);
}), l.value = a, h("selectedChange", l.value);
}, te = (e) => {
P(() => {
i.selectedRowKeys.splice(
i.selectedRowKeys.findIndex((a) => a.id === e.id),
1
), n == "element-plus" && v.value.filter((a) => {
a.roleId == e.id && S.value.toggleRowSelection(a, !1);
}), l.value.splice(
l.value.findIndex((a) => a.id === e.id),
1
), h("selectedChange", l.value);
});
}, oe = () => {
l.value = [], i.selectedRowKeys = [], n == "element-plus" && S.value.clearSelection(), h("selectedChange", l.value);
}, ne = (e) => {
f.value = e, g.value = 1, w();
}, se = (e) => {
g.value = e, w();
}, w = async () => {
b.value = !0;
const e = {
...C.value,
pageNo: g.value,
pageSize: f.value
}, a = await ge(e);
v.value = a.data.data.rows, N.value = a.data.data.totalRows, g.value = a.data.data.pageNo, f.value = a.data.data.pageSize, n == "element-plus" && P(() => {
var t;
(t = r.selectData) == null || t.forEach((s) => {
v.value.filter((d) => {
d.roleId == s.id && S.value.toggleRowSelection(d, !0);
});
});
}), b.value = !1;
};
return ce(w), G({
// setData,
}), (e, a) => (I(), k(o(H), {
class: "flow-select-user",
gutter: 16
}, {
default: m(() => [
c(o(V), {
span: 12,
class: "height100"
}, {
default: m(() => [
K("div", fe, [
K("div", he, [
c(o(L), {
value: C.value.realName,
"onUpdate:value": a[0] || (a[0] = (t) => C.value.realName = t),
modelValue: C.value.realName,
"onUpdate:modelValue": a[1] || (a[1] = (t) => C.value.realName = t),
clearable: "",
allowClear: "",
"enter-button": "",
placeholder: "请输入全名搜索",
onSearch: w,
onKeyup: de(w, ["enter"])
}, {
append: m(() => [
c(o(J), { icon: o(pe) }, null, 8, ["icon"])
]),
_: 1
}, 8, ["value", "modelValue"])
]),
K("div", we, [
c(o(M), {
ref_key: "tableRef",
ref: S,
"row-key": o(n) === "arco-design" ? "roleId" : Z,
"row-selection": X.value,
selectedKeys: i.selectedRowKeys,
"data-source": v.value,
data: v.value,
columns: F,
pagination: Y.value,
height: "calc(100% - 30px)",
scroll: W.value,
loading: b.value,
"highlight-current-row": "",
onSelectionChange: B,
onSelect: ae,
onSelectAll: le
}, {
[q.value]: m(() => [
!r.isRadio && o(n) == "element-plus" ? (I(), k(o(y), {
key: 0,
type: "selection",
width: "55"
})) : z("", !0),
e.isRadio && o(n) == "element-plus" ? (I(), k(o(y), {
key: 1,
label: "选择",
width: "55"
}, {
default: m((t) => [
T(" "),
c(o(O), {
modelValue: A.value,
"onUpdate:modelValue": a[2] || (a[2] = (s) => A.value = s),
label: t.row.roleId,
onChange: (s) => B(t.row)
}, {
default: m(() => [
T(" ")
]),
_: 2
}, 1032, ["modelValue", "label", "onChange"])
]),
_: 1
})) : z("", !0),
c(o(y), {
prop: "roleName",
label: "角色名",
title: "角色名",
"data-index": "roleName"
}),
c(o(y), {
prop: "roleCode",
label: "编码",
title: "编码",
"data-index": "roleCode"
})
]),
_: 2
}, 1032, ["row-key", "row-selection", "selectedKeys", "data-source", "data", "pagination", "scroll", "loading"]),
o(n) == "element-plus" ? (I(), ie("div", Ce, [
c(o(Q), {
onSizeChange: ne,
onCurrentChange: se,
"current-page": g.value,
"page-sizes": [10, 20, 50, 100],
"page-size": f.value,
total: N.value,
background: "",
layout: "total, prev, pager, next"
}, null, 8, ["current-page", "page-size", "total"])
])) : z("", !0)
])
])
]),
_: 1
}),
c(o(V), {
span: 12,
class: "height100"
}, {
default: m(() => [
c(ve, {
datas: l.value,
onDelete: te,
onDeleteAll: oe
}, null, 8, ["datas"])
]),
_: 1
})
]),
_: 1
}));
}
});
export {
xe as default
};