@fangzhongya/fang-ui 0.0.14 → 0.0.15

package/dist/components/tree-select-box/src/data.js

@@ -1,5 +1,3 @@
-import { buildProps } from "../../../utils/vues/buildProps.js";
-import { definePropType } from "../../../utils/vues/definePropType.js";
 import "vue";
 import "@fangzhongya/utils/basic/string/splitUpper";
 import "@fangzhongya/utils/basic/array/isArray";
@@ -13,7 +11,10 @@ import "@fangzhongya/utils/name/humpToLine";
 import "@fangzhongya/utils/basic/object/deepCopy";
 import "@fangzhongya/utils/basic/Array/toggleArray";
 import "@fangzhongya/utils/basic/object/objValue";
+import { buildProps } from "../../../utils/vues/buildProps.js";
+import { definePropType } from "../../../utils/vues/definePropType.js";
 import "../../../utils/vues/getBuildProps.js";
+import "../../../utils/vues/withInstall.js";
 import "@fangzhongya/utils/css/setObjStyle";
 import "@fangzhongya/utils/css/getCss";
 const roleSelect = {

package/dist/components/tree-select-box/src/data.ts

@@ -0,0 +1,148 @@
+import type { ExtractPropTypes } from 'vue';
+
+import { buildProps } from '../../../utils/index';
+
+import { definePropType } from '../../../utils/index';
+
+export type ModelValue = string | number;
+
+export type ObjStrAny = {
+	[key: string]: any;
+};
+
+export const roleSelect = {
+	searchPlaceholder: '请输入字段进行查询',
+	value: 'value',
+	//指定选项标签为选项对象的某个属性值
+	label: 'label',
+	//指定选项的子选项为选项对象的某个属性值
+	children: 'children',
+	//指定选项的禁用为选项对象的某个属性值
+	disabled: 'disabled',
+	// 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组
+	// 若设置 false，则只返回该节点的值
+	emitPath: true,
+	// 是否严格的遵守父子节点不互相关联
+	checkStrictly: true,
+	// 是否动态加载子节点，需与 lazyLoad 方法结合使用
+	lazy: false,
+	// // 是否多选
+	// multiple: false,
+};
+
+export type RoleSelect = {
+	searchPlaceholder?: string;
+	father?: string;
+	// 选择框中展示的字段
+	inpuIabel?: string;
+	//
+	explain?: string;
+	//指定选项的值为选项对象的某个属性值
+	value: string;
+	//指定选项标签为选项对象的某个属性值
+	label: string;
+	//指定选项的子选项为选项对象的某个属性值
+	children: string;
+	//指定选项的禁用为选项对象的某个属性值
+	disabled: string;
+	// 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+	emitPath: boolean;
+	// 是否动态加载子节点，需与 lazyLoad 方法结合使用
+	lazy: boolean;
+	// 加载动态数据的方法，仅在 lazy 为 true 时有效
+	lazyLoad: Function;
+	// 是否多选
+	multiple: boolean;
+	// 是否严格的遵守父子节点不互相关联
+	checkStrictly: boolean;
+};
+
+export const dataProps = buildProps({
+	/**
+	 * @props { Boolean } searchlist= ( )
+	 * 搜索结果用列表展示
+	 */
+	searchlist: {
+		type: Boolean,
+	},
+	/**
+	 * @props { String} title= ( )
+	 * 弹框标题
+	 */
+	title: {
+		type: [String],
+		default: '选择',
+	},
+	placeholder: {
+		type: String,
+	},
+	/**
+	 * @props { Array} modelValue=
+	 * 值
+	 */
+	modelValue: {
+		type: [Array<ModelValue>],
+	},
+	appendToBody: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * @props { String, Number} width= ( )
+	 * 弹框宽度
+	 */
+	width: {
+		type: [String, Number],
+	},
+	/**
+	 * @props { Boolean } disabled= ( )
+	 * 是否禁用
+	 */
+	disabled: {
+		type: [Boolean],
+	},
+
+	/**
+	 * @props { Array } options=[] ( )
+	 * 选项的数据源， value 和 label 可以通过 props 自定义.
+	 */
+	options: {
+		type: Array<ObjStrAny>,
+		default() {
+			return [];
+		},
+	},
+	/**
+	 * @props { Object } props={} ( )
+	 * 配置选项
+	 */
+	props: {
+		type: definePropType<RoleSelect>(Object),
+		default() {
+			return {};
+		},
+	},
+});
+
+export type DataProps = ExtractPropTypes<typeof dataProps>;
+
+/**
+ * @emits change (val:[String, Array])
+ * 选择的时间
+ */
+export const dataEmits = ['change', 'update:modelValue'];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ * @slot default 默认插槽
+ */
+export const dataSlot = {
+	default: 'default',
+};
+
+/**
+ * @expose setValue (val:<string>设置的数据 )
+ * 设置值
+ */
+export const dataExpose = {};

package/dist/components/tree-select-box/src/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const data = require("./data.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 require("@fangzhongya/utils/basic/string/splitUpper");
@@ -18,12 +18,13 @@ require("@fangzhongya/utils/basic/object/objValue");
 require("../../../hooks/global-config/index.cjs");
 const index = require("../../../hooks/locale/index.cjs");
 require("../../../utils/vues/getBuildProps.cjs");
+require("../../../utils/vues/withInstall.cjs");
 require("@fangzhongya/utils/css/setObjStyle");
 require("@fangzhongya/utils/css/getCss");
 const index$3 = require("../../input/index.cjs");
 const index$4 = require("../../tree/index.cjs");
 const index$2 = require("../../select-dialog/index.cjs");
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
@@ -32,15 +33,15 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
     const cs = index$1.useCssName("tree-select-box");
     const propss = __props;
     const emit = __emit;
-    const refSelectDialog = require$$0.ref();
-    const refTree = require$$0.ref();
-    const psprops = require$$0.computed(() => {
+    const refSelectDialog = vue.ref();
+    const refTree = vue.ref();
+    const psprops = vue.computed(() => {
       return Object.assign({}, data.roleSelect, propss.props);
     });
-    const search = require$$0.ref("");
-    const nodes = require$$0.ref({});
-    const list = require$$0.ref([]);
-    require$$0.watch(
+    const search = vue.ref("");
+    const nodes = vue.ref({});
+    const list = vue.ref([]);
+    vue.watch(
       () => propss.modelValue,
       () => {
         if (propss.modelValue) {
@@ -52,7 +53,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       },
       { immediate: true, deep: true }
     );
-    const listData = require$$0.ref([]);
+    const listData = vue.ref([]);
     function lazyLoad(data2, callback) {
       onInput(data2, callback);
     }
@@ -185,10 +186,10 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("div", {
-        class: require$$0.normalizeClass(require$$0.unref(cs).z())
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(cs).z())
       }, [
-        require$$0.createVNode(require$$0.unref(index$2.SelectDialog), {
+        vue.createVNode(vue.unref(index$2.SelectDialog), {
           "get-name": getName,
           "get-name-explain": getNameExplain,
           placeholder: propss.placeholder,
@@ -206,34 +207,34 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
           onDialog,
           onConfirm: onDialogffirm
         }, {
-          suffix: require$$0.withCtx(() => [
-            require$$0.renderSlot(_ctx.$slots, "suffix")
+          suffix: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "suffix")
           ]),
-          default: require$$0.withCtx(() => [
-            require$$0.createElementVNode("div", {
-              class: require$$0.normalizeClass(require$$0.unref(cs).z("dialog-li"))
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("dialog-li"))
             }, [
-              require$$0.createElementVNode("div", {
-                class: require$$0.normalizeClass(require$$0.unref(cs).z("dialog-li-top"))
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("dialog-li-top"))
               }, [
-                require$$0.createVNode(require$$0.unref(index$3.Input), {
+                vue.createVNode(vue.unref(index$3.Input), {
                   placeholder: psprops.value.searchPlaceholder,
                   modelValue: search.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
                   clearable: "",
-                  onKeyup: require$$0.withKeys(onInput, ["enter", "native"])
+                  onKeyup: vue.withKeys(onInput, ["enter", "native"])
                 }, null, 8, ["placeholder", "modelValue"])
               ], 2),
-              require$$0.createElementVNode("div", {
-                class: require$$0.normalizeClass(require$$0.unref(cs).z("dialog-gap"))
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("dialog-gap"))
               }, null, 2),
-              require$$0.createElementVNode("div", {
-                class: require$$0.normalizeClass([require$$0.unref(cs).z("dialog-li-div"), require$$0.unref(cs).z("dialog-li-tree")])
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([vue.unref(cs).z("dialog-li-div"), vue.unref(cs).z("dialog-li-tree")])
               }, [
-                require$$0.createElementVNode("div", {
-                  class: require$$0.normalizeClass([require$$0.unref(cs).z("dialog-div-tree")])
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass([vue.unref(cs).z("dialog-div-tree")])
                 }, [
-                  require$$0.createVNode(require$$0.unref(index$4.Tree), {
+                  vue.createVNode(vue.unref(index$4.Tree), {
                     data: listData.value,
                     "highlight-current": "",
                     "node-key": psprops.value.value,

package/dist/components/tree-select-box/src/index.js

@@ -16,6 +16,7 @@ import "@fangzhongya/utils/basic/object/objValue";
 import "../../../hooks/global-config/index.js";
 import { useLocale } from "../../../hooks/locale/index.js";
 import "../../../utils/vues/getBuildProps.js";
+import "../../../utils/vues/withInstall.js";
 import "@fangzhongya/utils/css/setObjStyle";
 import "@fangzhongya/utils/css/getCss";
 import { Input } from "../../input/index.js";

package/dist/components/tree-select-box/src/index.vue

@@ -0,0 +1,289 @@
+<template>
+	<div :class="cs.z()">
+		<SelectDialog
+			:get-name="getName"
+			:get-name-explain="getNameExplain"
+			:placeholder="propss.placeholder"
+			:setInputName="setInputName"
+			:disabled="propss.disabled"
+			:appendToBody="propss.appendToBody"
+			ref="refSelectDialog"
+			v-model="list"
+			:value="propss.modelValue"
+			:width="propss.width"
+			:title="propss.title"
+			@change="onChange"
+			@dialog="onDialog"
+			@confirm="onDialogffirm"
+		>
+			<div :class="cs.z('dialog-li')">
+				<div :class="cs.z('dialog-li-top')">
+					<Input
+						:placeholder="psprops.searchPlaceholder"
+						v-model="search"
+						clearable
+						@keyup.enter.native="onInput"
+					>
+						<!-- <template #suffix>
+							<i>
+								<svg
+									viewBox="0 0 1024 1024"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										fill="currentColor"
+										d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"
+									></path>
+								</svg>
+							</i>
+						</template> -->
+					</Input>
+				</div>
+				<div :class="cs.z('dialog-gap')"></div>
+				<div :class="[cs.z('dialog-li-div'), cs.z('dialog-li-tree')]">
+					<div :class="[cs.z('dialog-div-tree')]">
+						<Tree
+							:data="listData"
+							highlight-current
+							:node-key="psprops.value"
+							:show-checkbox="psprops.multiple"
+							:check-strictly="psprops.checkStrictly"
+							ref="refTree"
+							:lazy="psprops.lazy"
+							:load="lazyLoad"
+							:props="{
+								isLeaf: 'leaf',
+								value: psprops.value,
+								label: psprops.label,
+								disabled: psprops.disabled,
+								children: psprops.children,
+							}"
+							@node-click="handleTreeClick"
+							@check="handleTreeChange"
+						/>
+					</div>
+					<!-- <div></div> -->
+				</div>
+			</div>
+			<template #suffix>
+				<slot name="suffix"> </slot>
+			</template>
+		</SelectDialog>
+	</div>
+</template>
+<script lang="ts" setup>
+	import {
+		dataProps,
+		dataEmits,
+		dataExpose,
+		roleSelect,
+		type ModelValue,
+		type ObjStrAny,
+	} from './data';
+	import { useCssName, useLocale } from '../../../hooks/index';
+	import Input from '../../input/index';
+	import Tree from '../../tree/index';
+	import SelectDialog from '../../select-dialog/index';
+	import { computed, ref, watch } from 'vue';
+
+	// 获取国际化字段
+	const { getLocale } = useLocale();
+	// 样式设置方法
+	const cs = useCssName('tree-select-box');
+	const propss = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+
+	const refSelectDialog = ref();
+
+	const refTree = ref();
+
+	const psprops = computed(() => {
+		return Object.assign({}, roleSelect, propss.props);
+	});
+
+	const search = ref('');
+
+	const nodes = ref<{
+		[key: ModelValue]: ObjStrAny;
+	}>({});
+
+	const list = ref<ModelValue[]>([]);
+
+	watch(
+		() => propss.modelValue,
+		() => {
+			if (propss.modelValue) {
+				list.value = [...propss.modelValue];
+			} else {
+				list.value = [];
+			}
+			setTreeVale();
+		},
+		{ immediate: true, deep: true },
+	);
+
+	const listData = ref<ObjStrAny[]>([]);
+
+	function lazyLoad(data: any, callback: (data: any[]) => {}) {
+		onInput(data, callback);
+	}
+
+	/**
+	 * 搜索值
+	 */
+	function onInput(data = {}, callback: (data: ObjStrAny[]) => {}) {
+		if (psprops.value.lazyLoad) {
+			psprops.value.lazyLoad(
+				data,
+				(
+					v: ObjStrAny[],
+					node: {
+						[key: ModelValue]: ObjStrAny;
+					},
+				) => {
+					const prop = psprops.value.value;
+					if (node) {
+						Object.keys(node).forEach((key: ModelValue) => {
+							setNodes(key, node[key]);
+						});
+					} else {
+						v.forEach((o) => {
+							const id = o[prop];
+							// nodes.value[id] = o;
+							setNodes(id, o);
+						});
+					}
+					if (psprops.value.lazy && callback) {
+						callback(v);
+					} else {
+						listData.value = v;
+					}
+				},
+				search.value,
+			);
+		} else {
+			listData.value = propss.options;
+		}
+	}
+
+	function setNodes(key: string | number, obj: ObjAny) {
+		nodes.value[key] = Object.assign(nodes.value[key] || {}, obj);
+	}
+
+	/**
+	 * 获取对应的名称
+	 * @param key
+	 */
+	function getName(key: ModelValue) {
+		const name = psprops.value.label;
+		let obj = nodes.value[key] || {};
+		return obj[name];
+	}
+
+	function setInputName(key: ModelValue) {
+		const name = psprops.value.inpuIabel;
+		if (name) {
+			let obj = nodes.value[key] || {};
+			return obj[name];
+		} else {
+			return getName(key);
+		}
+	}
+
+	function getNameExplain(key: ModelValue) {
+		const name = psprops.value.explain;
+		if (name) {
+			let obj = nodes.value[key] || {};
+			return obj[name];
+		}
+	}
+
+	function onDialogffirm(val: ModelValue[]) {
+		emit('update:modelValue', val);
+		emit('change', val);
+	}
+	function handleTreeClick(data: any) {
+		const prop = psprops.value.value;
+		const d = data[prop];
+		// 做层级是否可选判定，checkStrictly 为 false 时只能选择叶子节点
+		if (!propss.props.checkStrictly) {
+			if (nodes.value[d].leaf === false) {
+				return;
+			}
+		}
+
+		const disabledname = psprops.value.disabled;
+		if (psprops.value.multiple) {
+			if (!data[disabledname]) {
+				if (list.value.includes(d)) {
+					list.value = list.value.filter((o) => {
+						return o != d;
+					});
+				} else {
+					list.value.push(d);
+				}
+				setTreeVale();
+			}
+		} else {
+			if (!data[disabledname]) {
+				list.value = [d];
+			}
+		}
+	}
+
+	function handleTreeChange(data: any, node: any) {
+		list.value = node.checkedKeys;
+	}
+
+	function onChange() {
+		setTreeVale();
+	}
+	function onDialog(is: boolean) {
+		if (is) {
+			if (propss.modelValue) {
+				list.value = [...propss.modelValue];
+			} else {
+				list.value = [];
+			}
+			search.value = '';
+			onInput({}, (v) => (listData.value = v));
+			setTreeVale();
+		}
+	}
+
+	function setTreeVale() {
+		if (refTree.value && refTree.value.refEl) {
+			refTree.value.refEl.setCheckedKeys(list.value, true);
+		}
+	}
+
+	onInput({}, (v) => (listData.value = v));
+
+	/**
+	 * 设置默认显示值
+	 */
+	function setNodesObj(node: { [key: ModelValue]: ObjStrAny } | ObjStrAny[]) {
+		if (node) {
+			if (node instanceof Array) {
+				const prop = psprops.value.value;
+				node.forEach((o) => {
+					const id = o[prop];
+					setNodes(id, o);
+				});
+			} else {
+				Object.keys(node).forEach((key: ModelValue) => {
+					setNodes(key, node[key]);
+				});
+			}
+		}
+	}
+
+	defineExpose({
+		...dataExpose,
+		setNodesObj,
+		getInputName() {
+			return refSelectDialog.value.inputName;
+		},
+	});
+</script>
+<style lang="scss"></style>