@fangzhongya/fang-ui 0.0.14 → 0.0.15

package/dist/components/user-select/src/index.vue

@@ -0,0 +1,410 @@
+<template>
+	<div :class="cs.z()">
+		<SelectDialog
+			:get-name="getName"
+			:get-name-explain="getNameExplain"
+			:disabled="propss.disabled"
+			:placeholder="propss.placeholder"
+			:appendToBody="propss.appendToBody"
+			ref="refSelectDialog"
+			v-model="list"
+			:value="propss.modelValue"
+			:width="propss.width"
+			:title="propss.title"
+			@dialog="onDialog"
+			@confirm="onDialogffirm"
+		>
+			<div :class="[cs.z('dialog-div'), cs.z('dialog-tabs')]">
+				<Tabs
+					v-model="tabName"
+					stretch
+					:class="cs.z('dialog-li-tabs')"
+					@tab-click="onTabClick"
+				>
+					<TabPane label="部门" name="1"> </TabPane>
+					<TabPane label="角色" name="2"> </TabPane>
+				</Tabs>
+				<div :class="[cs.z('dialog-tabs-tree')]">
+					<div :class="[cs.z('dialog-div-tree')]">
+						<Tree
+							:data="propss.options"
+							highlight-current
+							:default-expand-all="propss.expandAll"
+							:node-key="psprops.value"
+							:show-checkbox="propss.multiple"
+							check-strictly
+							ref="refTree"
+							:props="{
+								isLeaf: 'leaf',
+								value: psprops.value,
+								label: psprops.label,
+								disabled: psprops.disabled,
+								children: psprops.children,
+							}"
+							@node-click="handleTreeClick"
+						/>
+					</div>
+				</div>
+			</div>
+			<div>
+				<div :class="cs.z('dialog-li-top')">
+					<bv-input
+						:placeholder="psprops.searchPlaceholder"
+						clearable
+						v-model="search"
+						@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> -->
+					</bv-input>
+				</div>
+				<div :class="cs.z('dialog-gap')"></div>
+				<div :class="[cs.z('dialog-div'), cs.z('dialog-personnel')]">
+					<template v-if="psprops.multiple">
+						<CheckboxGroup :model-value="list">
+							<template
+								v-for="(item, index) in listData"
+								:key="index"
+							>
+								<div
+									v-if="item[psprops.label]"
+									:class="cs.z('dialog-personnel-top')"
+								>
+									<div
+										:class="
+											cs.z('dialog-personnel-top-userbg')
+										"
+									>
+										{{
+											(
+												item[psprops.label] || ''
+											).substring(0, 1)
+										}}
+									</div>
+									<div
+										:class="
+											cs.z('dialog-personnel-top-rfont')
+										"
+									>
+										<div
+											:class="
+												cs.z('dialog-personnel-top-p1')
+											"
+										>
+											{{ item[psprops.label] }}
+										</div>
+										<div
+											v-if="psprops.explain"
+											:class="
+												cs.z('dialog-personnel-top-p2')
+											"
+										>
+											{{ item[psprops.explain] }}
+										</div>
+									</div>
+								</div>
+								<div
+									:class="cs.z('dialog-personnel-checkboxs')"
+								>
+									<Checkbox
+										v-for="(obj, key) in item[psprops.yhs]"
+										:key="key"
+										:label="obj[psprops.yhid]"
+										@change="
+											(is: boolean) => {
+												onChangeCheckbox(is, obj);
+											}
+										"
+									>
+										{{ obj[psprops.yhmc] }}
+									</Checkbox>
+								</div>
+							</template>
+						</CheckboxGroup>
+					</template>
+					<template v-else>
+						<RadioGroup :model-value="list[0]">
+							<template
+								v-for="(item, index) in listData"
+								:key="index"
+							>
+								<div
+									v-if="item[psprops.label]"
+									:class="cs.z('dialog-personnel-top')"
+								>
+									<div
+										:class="
+											cs.z('dialog-personnel-top-userbg')
+										"
+									>
+										{{
+											(
+												item[psprops.label] || ''
+											).substring(0, 1)
+										}}
+									</div>
+									<div
+										:class="
+											cs.z('dialog-personnel-top-rfont')
+										"
+									>
+										<div
+											:class="
+												cs.z('dialog-personnel-top-p1')
+											"
+										>
+											{{ item[psprops.label] }}
+										</div>
+										<div
+											v-if="psprops.explain"
+											:class="
+												cs.z('dialog-personnel-top-p2')
+											"
+										>
+											{{ item[psprops.explain] }}
+										</div>
+									</div>
+								</div>
+								<div
+									:class="cs.z('dialog-personnel-checkboxs')"
+								>
+									<Radio
+										v-for="(obj, key) in item[psprops.yhs]"
+										:key="key"
+										:label="obj[psprops.yhid]"
+										@change="
+											(is: boolean) => {
+												onChangeCheckbox(is, obj);
+											}
+										"
+									>
+										{{ obj[psprops.yhmc] }}
+									</Radio>
+								</div>
+							</template>
+						</RadioGroup>
+					</template>
+				</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 Tabs from '../../tabs/index';
+	import TabPane from '../../tab-pane/index';
+	import Input from '../../input/index';
+	import CheckboxGroup from '../../checkbox-group/index';
+	import Checkbox from '../../checkbox/index';
+	import RadioGroup from '../../radio-group/index';
+	import Radio from '../../radio/index';
+	import Tree from '../../tree/index';
+	import SelectDialog from '../../select-dialog/index';
+	import { computed, nextTick, ref, watch } from 'vue';
+	// 获取国际化字段
+	const { getLocale } = useLocale();
+	// 样式设置方法
+	const cs = useCssName('user-select');
+	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 treeObj = ref<ObjStrAny>({});
+
+	const tabName = ref('1');
+
+	const nodes = ref<{
+		[key: ModelValue]: ObjStrAny;
+	}>({});
+
+	const list = ref<ModelValue[]>([]);
+
+	watch(
+		() => propss.modelValue,
+		() => {
+			if (propss.modelValue) {
+				list.value = [...propss.modelValue];
+			} else {
+				list.value = [];
+			}
+		},
+		{ immediate: true, deep: true },
+	);
+
+	const listData = ref<ObjStrAny[]>([]);
+
+	/**
+	 * 搜索值
+	 */
+	function onInput() {
+		if (psprops.value.lazyLoad) {
+			const prop = psprops.value.value;
+			const val = treeObj.value[prop];
+			psprops.value.lazyLoad(
+				{ search: search.value, type: tabName.value, value: val },
+				(
+					v: ObjStrAny[],
+					node: {
+						[key: ModelValue]: ObjStrAny;
+					},
+				) => {
+					const prop = psprops.value.yhid;
+					const yhs = psprops.value.yhs;
+					if (node) {
+						Object.keys(node).forEach((key: ModelValue) => {
+							nodes.value[key] = node[key];
+						});
+					} else {
+						v.forEach((zs) => {
+							const ss = zs[yhs] || [];
+							ss.forEach((o: any) => {
+								const id = o[prop];
+								nodes.value[id] = o;
+							});
+						});
+					}
+					listData.value = v;
+				},
+			);
+		}
+	}
+
+	function onChangeCheckbox(is: boolean, data: ObjStrAny) {
+		let id = data[psprops.value.yhid];
+		if (!psprops.value.multiple) {
+			list.value = [id];
+		} else {
+			if (is) {
+				list.value.push(id);
+			} else {
+				list.value = list.value.filter((o) => {
+					return o != id;
+				});
+			}
+		}
+	}
+
+	/**
+	 * 获取对应的名称
+	 * @param key
+	 */
+	function getName(key: ModelValue) {
+		const name = psprops.value.yhmc;
+		let obj = nodes.value[key] || {};
+		return obj[name];
+	}
+
+	function getNameExplain(key: ModelValue) {
+		const name = psprops.value.explain;
+		if (name) {
+			let obj = nodes.value[key] || {};
+			return obj[name];
+		}
+	}
+
+	watch(
+		() => propss.options,
+		() => {
+			if (propss.options && propss.options.length > 0) {
+				setCurrentNode();
+			}
+		},
+		{
+			immediate: true,
+		},
+	);
+
+	function setCurrentNode() {
+		nextTick(() => {
+			if (propss.options[0] && refTree.value && refTree.value.refEl) {
+				refTree.value.refEl.setCurrentNode(propss.options[0], true);
+				handleTreeClick(propss.options[0]);
+			}
+		});
+	}
+	function onTabClick() {
+		nextTick(() => {
+			emit('tab-click', tabName.value);
+		});
+	}
+
+	function onDialog(v: boolean) {
+		if (v) {
+			if (propss.modelValue) {
+				list.value = [...propss.modelValue];
+			} else {
+				list.value = [];
+			}
+			search.value = '';
+			tabName.value = '1';
+			listData.value = [];
+			setCurrentNode();
+		}
+	}
+
+	function onDialogffirm(val: ModelValue[]) {
+		emit('update:modelValue', val);
+		emit('change', val);
+	}
+	function handleTreeClick(data: any) {
+		treeObj.value = data;
+		onInput();
+	}
+	/**
+	 * 设置默认显示值
+	 */
+	function setNodesObj(node: { [key: ModelValue]: ObjStrAny } | ObjStrAny[]) {
+		if (node) {
+			if (node instanceof Array) {
+				const prop = psprops.value.yhid;
+				node.forEach((o) => {
+					const id = o[prop];
+					nodes.value[id] = o;
+				});
+			} else {
+				Object.keys(node).forEach((key: ModelValue) => {
+					nodes.value[key] = node[key];
+				});
+			}
+		}
+	}
+	defineExpose({
+		...dataExpose,
+		setNodesObj: setNodesObj,
+		getInputName() {
+			return refSelectDialog.value.inputName;
+		},
+	});
+</script>
+<style lang="scss"></style>

package/dist/components/vxe-tables/index.css

@@ -1,23 +1,23 @@
 :root {
-  --el-icon-picker-on: rgb(91, 189, 246);
-  --el-icon-picker-border: #eee;
-  --el-color-primary: #409eff;
-  --el-bag-primary: #409eff;
-  --el-bag-primary-text: #fff;
-  --el-border: #eee;
-  --el-layout-panel-gap: 10px;
-  --el-layout-panel-padding: 20px;
-  --el-layout-form-item-padding-right: var(
-  	--el-layout-panel-gap
+  --icon-picker-on: rgb(91, 189, 246);
+  --icon-picker-border: #eee;
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
   );
-  --el-g-main-bg: var(--el-bg-color-page);
+  --g-main-bg: var(--bg-color-page);
 }
 
-.el-com {
+.com {
   font-size: 20px;
 }
 
-.el-vtables {
+.vtables {
   width: 100%;
   min-height: 100px;
   position: relative;
@@ -25,35 +25,35 @@
   display: flex;
   flex-direction: column;
 }
-.el-vtables-table {
+.vtables-table {
   background-color: transparent;
 }
-.el-vtables-table.is-absolute {
+.vtables-table.is-absolute {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.el-vtables-table .vxe-body--column {
+.vtables-table .vxe-body--column {
   overflow: hidden;
   padding: 8px 0;
 }
-.el-vtables-table .col--checkbox .vxe-checkbox--label {
+.vtables-table .col--checkbox .vxe-checkbox--label {
   padding-left: 0;
 }
-.el-vtables .fv-custom-checkbox {
+.vtables .fv-custom-checkbox {
   cursor: pointer;
   position: relative;
 }
-.el-vtables .fv-custom-checkbox.is-disabled {
+.vtables .fv-custom-checkbox.is-disabled {
   cursor: not-allowed;
 }
-.el-vtables .fv-custom-checkbox .el-checkbox__label {
+.vtables .fv-custom-checkbox .el-checkbox__label {
   color: var(--vxe-table-header-font-color);
   font-weight: var(--vxe-table-header-font-weight);
 }
-.el-vtables .fv-custom-checkbox .fv-custom-checkbox-mask {
+.vtables .fv-custom-checkbox .fv-custom-checkbox-mask {
   position: absolute;
   top: 0;
   right: 0;
@@ -62,31 +62,31 @@
   z-index: 1;
   opacity: 0;
 }
-.el-vtables .fv-custom-radio {
+.vtables .fv-custom-radio {
   cursor: pointer;
   position: relative;
 }
-.el-vtables .fv-custom-radio.is-disabled {
+.vtables .fv-custom-radio.is-disabled {
   cursor: not-allowed;
 }
-.el-vtables .fv-custom-radio .el-radio {
+.vtables .fv-custom-radio .el-radio {
   height: auto;
 }
-.el-vtables .fv-custom-radio.center .el-radio {
+.vtables .fv-custom-radio.center .el-radio {
   text-align: center;
   display: table-cell;
 }
-.el-vtables .fv-custom-radio.center .el-radio__label {
+.vtables .fv-custom-radio.center .el-radio__label {
   display: none;
 }
-.el-vtables .fv-custom-radio.right .el-radio {
+.vtables .fv-custom-radio.right .el-radio {
   text-align: right;
   display: table-cell;
 }
-.el-vtables .fv-custom-radio.right .el-radio__label {
+.vtables .fv-custom-radio.right .el-radio__label {
   display: none;
 }
-.el-vtables .fv-custom-radio .fv-custom-radio-mask {
+.vtables .fv-custom-radio .fv-custom-radio-mask {
   position: absolute;
   top: 0;
   right: 0;

package/dist/components/vxe-tables/index.d.ts

@@ -1,7 +1,9 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, Component, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
+import { DefaultSort } from './src/data';
 declare const VxeTables: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         defaultSort: {
-            type: () => import('./src/data').DefaultSort;
+            type: () => DefaultSort;
             default(): {};
         };
         height: {
@@ -64,14 +66,14 @@ declare const VxeTables: {
         };
         compons: {
             type: () => {
-                [key: string]: import('vue').Component;
+                [key: string]: Component;
             };
             default(): {};
         };
     }>> & Readonly<{}>, {
         clearSelection: () => void;
         clearRadioRow: () => void;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         size: string;
         value: ObjAny[];
         list: ListObj[];
@@ -79,22 +81,22 @@ declare const VxeTables: {
         options: Record<string, any>;
         height: string | number;
         compons: {
-            [key: string]: import('vue').Component;
+            [key: string]: Component;
         };
-        defaultSort: import('./src/data').DefaultSort;
+        defaultSort: DefaultSort;
         adaptive: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {
         tableRef: unknown;
-    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+    }, HTMLDivElement, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         defaultSort: {
-            type: () => import('./src/data').DefaultSort;
+            type: () => DefaultSort;
             default(): {};
         };
         height: {
@@ -157,7 +159,7 @@ declare const VxeTables: {
         };
         compons: {
             type: () => {
-                [key: string]: import('vue').Component;
+                [key: string]: Component;
             };
             default(): {};
         };
@@ -172,17 +174,17 @@ declare const VxeTables: {
         options: Record<string, any>;
         height: string | number;
         compons: {
-            [key: string]: import('vue').Component;
+            [key: string]: Component;
         };
-        defaultSort: import('./src/data').DefaultSort;
+        defaultSort: DefaultSort;
         adaptive: boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     defaultSort: {
-        type: () => import('./src/data').DefaultSort;
+        type: () => DefaultSort;
         default(): {};
     };
     height: {
@@ -245,14 +247,14 @@ declare const VxeTables: {
     };
     compons: {
         type: () => {
-            [key: string]: import('vue').Component;
+            [key: string]: Component;
         };
         default(): {};
     };
 }>> & Readonly<{}>, {
     clearSelection: () => void;
     clearRadioRow: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     size: string;
     value: ObjAny[];
     list: ListObj[];
@@ -260,13 +262,13 @@ declare const VxeTables: {
     options: Record<string, any>;
     height: string | number;
     compons: {
-        [key: string]: import('vue').Component;
+        [key: string]: Component;
     };
-    defaultSort: import('./src/data').DefaultSort;
+    defaultSort: DefaultSort;
     adaptive: boolean;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: Partial<Record<string, (_: any) => any>> & {
         'no-data'?(_: {}): any;
     };
-}) & import('vue').Plugin;
+}) & Plugin;
 export { VxeTables, VxeTables as default };

package/dist/components/vxe-tables/index.ts

@@ -0,0 +1,8 @@
+import './index.scss';
+import { withInstall } from '../../utils/vues/withInstall'
+import SrcVue from './src/index.vue'
+const VxeTables = withInstall(SrcVue, 'VxeTables');
+export {
+   VxeTables,
+   VxeTables as default
+};