@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
317 lines (316 loc) • 11.5 kB
JavaScript
import { defineComponent as A, reactive as ue, getCurrentInstance as re, ref as d, computed as x, nextTick as B, onMounted as ce, openBlock as S, createBlock as K, unref as s, withCtx as m, createVNode as c, createElementVNode as k, withKeys as de, createCommentVNode as z, createTextVNode as P, createElementBlock as ie } from "vue";
import { pluginManager as v } from "@javaguns/utils";
import { IconSearchOutline as ge } from "@javaguns/icon";
import { getPageUser as pe } from "../../utils/adminApi.mjs";
import { radioSelect as me, checkBox as D } from "./common.mjs";
import ve from "./org-tree.vue.mjs";
import fe from "./selected-list.vue.mjs";
const he = { class: "flow-select-user-table-card" }, we = { class: "search" }, Ce = { class: "user-table" }, ye = {
key: 0,
class: "guns-flow-pagination"
}, Ie = A({ name: "flow-selection-user" }), ke = /* @__PURE__ */ A({
...Ie,
props: {
isRadio: { type: Boolean, default: !0 },
selectData: {}
},
emits: ["selectedChange"],
setup(E, { expose: O, emit: $ }) {
const G = v.getComponent("Row"), N = v.getComponent("Col"), H = v.getComponent("InputSearch"), L = v.getComponent("Table"), I = v.getComponent("TableColumn"), M = v.getComponent("Radio"), J = v.getComponent("Button"), Q = v.getComponent("Pagination"), i = E, r = ue({
selectedRowKeys: i.selectData ? i.selectData.map((e) => e.id) : [],
loading: !1
}), { appContext: j } = re(), n = j.app.config.globalProperties.$flowUI, R = d(null), q = d(n == "arco-design" ? "columns" : "default"), t = d(i.selectData ? i.selectData : []), V = d(), f = d([]), _ = d(!1), y = d(10), b = d(0), g = d(1), F = [
{
title: "账号",
key: "account",
dataIndex: "account"
},
{
title: "名称",
key: "realName",
dataIndex: "realName"
},
{
title: "部门",
key: "orgName",
dataIndex: "orgName"
}
], h = d({
orgId: null,
realName: null
}), W = x(() => n == "arco-design" ? {
y: "calc(100vh - 400px)"
} : {
y: "calc(100vh - 500px)"
}), X = x(() => {
const e = {
onChange: (a, l) => {
r.selectedRowKeys = a;
},
type: i.isRadio ? "radio" : "checkbox",
showCheckedAll: !0,
selectedRowKeys: r.selectedRowKeys,
onSelect: U,
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: b.value,
current: g.value,
pageSize: y.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, y.value = a, p();
},
change: (e) => {
g.value = e, y.value = 10, p();
}
})), w = $, Z = (e) => e.userId, U = (e, a) => {
i.isRadio ? (t.value = [], me(a, e, t.value, "userId", "realName")) : D(a, [e], t.value, "userId", "realName"), w("selectedChange", t.value);
}, ee = (e, a, l) => {
let o = [];
a && a.forEach((u) => {
let C = { name: u.realName, id: u.userId };
o.push(C);
}), t.value = o, w("selectedChange", t.value);
}, T = (e) => {
if (n === "element-plus") {
let l = t.value.filter((o) => o.id == e.id).length > 0;
U(e, l);
}
}, ae = (e, a) => {
if (console.log("state.selectedRowKeys", r.selectedRowKeys), n === "element-plus") {
let o = e.filter((u) => u.userId == a.userId).length > 0;
D(o, e, t.value, "userId", "realName"), w("selectedChange", t.value);
} else if (n === "arco-design") {
if (e && e.length > 0) {
const l = f.value, o = [];
t.value = [], r.selectedRowKeys = [];
for (let u = 0; u < l.length; u++) {
const C = l[u];
e.includes(C.userId) && (o.push(C), r.selectedRowKeys.push(C.userId));
}
D(!0, o, t.value, "userId", "realName");
} else
t.value = [], r.selectedRowKeys = [];
w("selectedChange", t.value);
}
}, le = (e) => {
let a = [];
if (n === "element-plus")
e.forEach((l) => {
let o = { name: l.realName, id: l.userId };
a.push(o);
}), t.value = a;
else if (n === "arco-design")
if (e == !0) {
r.selectedRowKeys = [];
const l = f.value;
for (let o = 0; o < l.length; o++) {
const u = l[o];
let C = { name: u.realName, id: u.userId };
r.selectedRowKeys.push(u.userId), a.push(C);
}
t.value = a;
} else
r.selectedRowKeys = [], t.value = [];
w("selectedChange", t.value);
}, te = (e) => {
B(() => {
r.selectedRowKeys.splice(
r.selectedRowKeys.findIndex((a) => a.id === e.id),
1
), n == "element-plus" && f.value.filter((a) => {
a.userId == e.id && R.value.toggleRowSelection(a, !1);
}), t.value.splice(
t.value.findIndex((a) => a.id === e.id),
1
), w("selectedChange", t.value);
});
}, oe = () => {
t.value = [], r.selectedRowKeys = [], n == "element-plus" && R.value.clearSelection(), w("selectedChange", t.value);
}, se = (e) => {
y.value = e, g.value = 1, p();
}, ne = (e) => {
g.value = e, p();
}, p = async () => {
_.value = !0;
const e = {
...h.value,
pageNo: g.value,
pageSize: y.value || 10
}, a = await pe(e);
f.value = a.data.data.rows, b.value = a.data.data.totalRows, g.value = a.data.data.pageNo, n == "element-plus" && B(() => {
var l;
(l = i.selectData) == null || l.forEach((o) => {
f.value.filter((u) => {
u.userId == o.id && R.value.toggleRowSelection(u, !0);
});
});
}), _.value = !1;
};
return ce(p), O({
// setData,
}), (e, a) => (S(), K(s(G), {
class: "flow-select-user",
gutter: 16
}, {
default: m(() => [
c(s(N), {
span: 6,
class: "height100"
}, {
default: m(() => [
c(ve, {
"header-title": "所属组织",
currentSelectOrgId: h.value.orgId,
"onUpdate:currentSelectOrgId": a[0] || (a[0] = (l) => h.value.orgId = l),
onTreeSelect: p
}, null, 8, ["currentSelectOrgId"])
]),
_: 1
}),
c(s(N), {
span: 12,
class: "height100"
}, {
default: m(() => [
k("div", he, [
k("div", we, [
c(s(H), {
value: h.value.realName,
"onUpdate:value": a[1] || (a[1] = (l) => h.value.realName = l),
modelValue: h.value.realName,
"onUpdate:modelValue": a[2] || (a[2] = (l) => h.value.realName = l),
clearable: "",
allowClear: "",
"enter-button": "",
placeholder: "请输入全名搜索",
onSearch: p,
onKeyup: de(p, ["enter"])
}, {
append: m(() => [
c(s(J), { icon: s(ge) }, null, 8, ["icon"])
]),
_: 1
}, 8, ["value", "modelValue"])
]),
k("div", Ce, [
c(s(L), {
ref_key: "tableRef",
ref: R,
"row-key": s(n) === "arco-design" ? "userId" : Z,
"row-selection": X.value,
selectedKeys: r.selectedRowKeys,
"data-source": f.value,
data: f.value,
columns: F,
pagination: Y.value,
height: "calc(100% - 30px)",
scroll: W.value,
loading: _.value,
"highlight-current-row": "",
onSelectionChange: T,
onSelect: ae,
onSelectAll: le
}, {
[q.value]: m(() => [
!i.isRadio && s(n) == "element-plus" ? (S(), K(s(I), {
key: 0,
type: "selection",
width: "55"
})) : z("", !0),
e.isRadio && s(n) == "element-plus" ? (S(), K(s(I), {
key: 1,
label: "选择",
width: "55"
}, {
default: m((l) => [
P(" "),
c(s(M), {
modelValue: V.value,
"onUpdate:modelValue": a[3] || (a[3] = (o) => V.value = o),
label: l.row.userId,
onChange: (o) => T(l.row)
}, {
default: m(() => [
P(" ")
]),
_: 2
}, 1032, ["modelValue", "label", "onChange"])
]),
_: 1
})) : z("", !0),
c(s(I), {
prop: "account",
label: "账号",
title: "账号",
"data-index": "account"
}),
c(s(I), {
prop: "realName",
label: "名称",
title: "名称",
"data-index": "realName"
}),
c(s(I), {
prop: "orgName",
label: "部门",
title: "部门",
"data-index": "orgName"
})
]),
_: 2
}, 1032, ["row-key", "row-selection", "selectedKeys", "data-source", "data", "pagination", "scroll", "loading"]),
s(n) == "element-plus" ? (S(), ie("div", ye, [
c(s(Q), {
onSizeChange: se,
onCurrentChange: ne,
"current-page": g.value,
"page-sizes": [10, 20, 50, 100],
"page-size": y.value,
total: b.value,
background: "",
layout: "total, prev, pager, next"
}, null, 8, ["current-page", "page-size", "total"])
])) : z("", !0)
])
])
]),
_: 1
}),
c(s(N), {
span: 6,
class: "height100"
}, {
default: m(() => [
c(fe, {
datas: t.value,
onDelete: te,
onDeleteAll: oe
}, null, 8, ["datas"])
]),
_: 1
})
]),
_: 1
}));
}
});
export {
ke as default
};