@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
292 lines (291 loc) • 7.53 kB
JavaScript
import { defineComponent as x, ref as o, watch as g, createVNode as u, inject as v } from "vue";
import V from "../button-edit/index.esm.js";
import { F_NOTIFY_SERVICE_TOKEN as B } from "../notify/index.esm.js";
import { FTreeGrid as M } from "../tree-grid/index.esm.js";
import { FormSchemaEntityField$Type as R } from "../common/index.esm.js";
import { createPropsResolver as w } from "../dynamic-resolver/index.esm.js";
const I = "https://json-schema.org/draft/2020-12/schema", $ = "https://farris-design.gitee.io/field-selector.schema.json", k = "field-selector", N = "A Farris Input Component", P = "object", A = {
disabled: {
description: "",
type: "boolean",
default: !1
},
readonly: {
description: "",
type: "boolean",
default: "false"
},
modelValue: {
description: "",
type: "object",
default: null
},
data: {
description: "",
type: "array",
default: []
},
idField: {
description: "",
type: "string",
default: "id"
},
columns: {
description: "",
type: "array",
default: []
},
title: {
description: "",
type: "string",
default: "字段选择器"
},
modalWidth: {
description: "",
type: "number",
default: 800
},
modalHeight: {
description: "",
type: "number",
default: 600
},
multiSelect: {
description: "",
type: "boolean",
default: !1
},
separator: {
description: "",
type: "string",
default: ","
},
bindingData: {
description: "",
type: "array",
default: []
},
textField: {
description: "",
type: "string",
default: "code"
},
beforeOpenDialog: {
description: "",
type: "object",
default: null
},
editorParams: {
description: "",
type: "object",
default: null
},
onSubmitModal: {
description: "",
type: "object",
default: null
},
onFieldSelected: {
description: "",
type: "object",
default: null
},
repositoryToken: {
description: "",
type: "object",
default: null
}
}, E = {
$schema: I,
$id: $,
title: k,
description: N,
type: P,
properties: A
}, H = [
{ field: "code", title: "绑定字段" },
{ field: "name", title: "名称" },
{ field: "fieldType", title: "字段类型" }
], q = Symbol("Field_Selector Component Repository Service Token"), h = {
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
modelValue: { type: [String, Array], default: null },
data: { type: Array, default: [] },
idField: { type: String, default: "id" },
columns: { type: Array, default: H },
title: { type: String, default: "字段选择器" },
modalWidth: { type: Number, default: 800 },
modalHeight: { type: Number, default: 600 },
multiSelect: { type: Boolean, default: !1 },
/**
* 可选，分隔符
* 默认`,`
*/
separator: { type: String, default: "," },
bindingData: { type: Array, default: [] },
textField: { type: String, default: "code" },
beforeOpenDialog: { type: Function, default: null },
editorParams: { type: Object, default: null },
onSubmitModal: { type: Function, default: null },
onFieldSelected: { type: Function, default: null },
repositoryToken: { type: Symbol, default: null }
}, W = w(h, E), S = /* @__PURE__ */ x({
name: "FFieldSelectorContainer",
props: h,
emits: ["selected", "bindingTypeChange"],
setup(e, m) {
var y, s;
const c = o(e.data), l = o(e.bindingData), a = o();
g(() => e.data, (n) => {
c.value = n, a.value.updateDataSource(n), e.modelValue && a.value.selectItemById(e.modelValue);
});
const p = {
"f-utils-fill": !0,
"m-2": (y = e.bindingType) == null ? void 0 : y.enable,
"mx-2": !((s = e.bindingType) != null && s.enable),
border: !0
};
function i(n) {
l.value = n, m.emit("selected", n);
}
const d = {
customRowStatus: (n) => (n.raw.$type !== R.SimpleField && (n.disabled = !0), n)
};
function r() {
return u(M, {
ref: a,
fit: !0,
data: c.value,
idField: e.idField,
columns: e.columns,
rowNumber: {
enable: !1
},
columnOption: {
fitColumns: !0
},
onSelectionChange: i,
rowOption: d
}, null);
}
return () => u("div", {
class: "h-100 d-flex flex-column"
}, [u("div", {
class: p,
style: "position:relative;border-radius:10px;"
}, [r()])]);
}
}), b = /* @__PURE__ */ x({
name: "FFieldSelector",
props: h,
emits: ["selected"],
setup(e, m) {
const c = '<i class="f-icon f-icon-lookup"></i>', l = o(e.bindingData), a = o(e.data), p = o(), i = v(B);
i && (i.globalConfig = {
position: "top-center"
});
const d = v(e.repositoryToken);
g(() => e.data, (t) => {
a.value = t;
});
const r = o(e.modelValue);
function y(t) {
l.value = t;
}
function s() {
let t = "";
l.value && l.value.length && (t = l.value.map((f) => f[e.textField]).join(e.separator)), r.value = t;
}
g(() => e.modelValue, (t) => {
typeof t == "string" ? r.value = t : s();
});
function n(t) {
a.value = t;
}
function T() {
return u(S, {
ref: p,
data: a.value,
columns: e.columns,
onSelected: y,
modelValue: e.modelValue,
idField: e.idField,
bindingData: l.value
}, null);
}
function C() {
return !l.value || !l.value.length ? (i.warning({
message: "请先选择一条数据！"
}), !1) : !0;
}
const D = {
title: e.title,
fitContent: !1,
height: e.modalHeight,
width: e.modalWidth,
minWidth: 300,
minHeight: 200,
showMaxButton: !0,
buttons: [{
name: "cancel",
text: "取消",
class: "btn btn-secondary",
handle: (t) => !0
}, {
name: "accept",
text: "确定",
class: "btn btn-primary",
handle: (t) => C() ? (s(), e.onSubmitModal && typeof e.onSubmitModal == "function" && !e.onSubmitModal(l.value) || e.onFieldSelected && typeof e.onFieldSelected == "function" && e.onFieldSelected(l.value), !0) : !1
}],
resizeable: !0,
draggable: !0
};
function O() {
var f, F;
if (!((F = (f = e.editorParams) == null ? void 0 : f.propertyData) == null ? void 0 : F.helpId))
return i == null || i.warning({
message: "请先配置数据源！"
}), !1;
if (e.beforeOpenDialog) {
e.beforeOpenDialog({
instance: {
loadData: n
}
});
return;
}
d && (d == null || d.getData(e.editorParams).then((j) => n(j)));
}
return () => u(V, {
modelValue: r.value,
"onUpdate:modelValue": (t) => r.value = t,
editable: !1,
disable: e.disabled,
readonly: e.readonly,
inputType: "text",
enableClear: !1,
buttonContent: c,
buttonBehavior: "Modal",
modalOptions: D,
beforeOpen: O
}, {
default: () => [u("div", {
class: "h-100 d-flex flex-column"
}, [T()])]
});
}
}), J = {
install(e) {
e.component(b.name, b), e.component(S.name, S);
},
register(e, m, c, l) {
e["field-selector"] = b, m["field-selector"] = W;
}
};
export {
b as FieldSelector,
q as FieldSelectorRepositoryToken,
J as default,
h as fieldSelectorProps,
W as propsResolver
};