@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/tables-form/src/columns.ts

@@ -0,0 +1,58 @@
+import { h } from 'vue';
+import { useHide } from '../../common/use';
+import { setMinWidth } from '../../tables/common/util';
+import { ElTableColumn } from 'element-plus';
+import type { ObjAny } from '../../../types/index';
+import { columnRender, setHeader, setProps } from './column';
+
+function getLists(
+	arrs: Array<ObjAny> | undefined,
+	emit: any,
+	table: ObjAny,
+	form: ObjAny,
+	formValue: ObjAny,
+) {
+	const arr: any[] = [];
+	arrs?.forEach((obj, index) => {
+		if (obj.children && obj.children.length > 0) {
+			if (useHide(obj)) {
+				arr.push(
+					h(
+						ElTableColumn,
+						{
+							...setProps(obj, table),
+							className: obj.class,
+							minWidth: setMinWidth(obj),
+						},
+						{
+							default: () => {
+								return getLists(
+									obj.children,
+									emit,
+									table,
+									form,
+									formValue,
+								);
+							},
+							header: () => {
+								return setHeader(obj);
+							},
+						},
+					),
+				);
+			}
+		} else {
+			const dom = columnRender(obj, emit, table, index, form, formValue);
+			if (dom) {
+				index++;
+				arr.push(dom);
+			}
+		}
+	});
+	return arr;
+}
+
+export function render(this: any, p: any, emit: any) {
+	const porps = p.value;
+	return getLists(porps.list, emit, porps.table, porps.form, porps.formValue);
+}

package/dist/components/tables-form/src/columns.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { computed, defineComponent } from 'vue';
+	import { render } from './columns';
+	export default defineComponent({
+		emits: ['list-events'],
+		expose: [],
+		props: {
+			list: Array, //展示数据列表
+
+			/**
+			 * @props { Array } value table列表数据
+			 */
+			data: {
+				type: Array,
+				default() {
+					return [];
+				},
+			},
+			/**
+			 * @props {String} selectionAll 支持横排全部的列
+			 */
+			selectionAll: {
+				type: String,
+			},
+			/**
+			 * table的配置
+			 */
+			table: {
+				type: [Object],
+			},
+			form: {
+				type: [Object],
+			},
+			formValue: {
+				type: [Object],
+			},
+		},
+		setup(props, { emit }) {
+			// 样式设置方法
+			const v = computed(() => {
+				return props;
+			});
+			return () => render(v, emit);
+		},
+		// render,
+		methods: {},
+	});
+</script>
+<style scoped></style>

package/dist/components/tables-form/src/columns3.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require$$0 = require("vue");
+const vue = require("vue");
 const use = require("../../common/use.cjs");
 const util = require("../../tables/common/util.cjs");
 const elementPlus = require("element-plus");
@@ -11,7 +11,7 @@ function getLists(arrs, emit, table, form, formValue) {
     if (obj.children && obj.children.length > 0) {
       if (use.useHide(obj)) {
         arr.push(
-          require$$0.h(
+          vue.h(
             elementPlus.ElTableColumn,
             {
               ...column.setProps(obj, table),

package/dist/components/tables-form/src/data.d.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 import { ObjAny } from '../../../types/index';
 export type DefaultSort = {
     prop: string;
@@ -9,7 +9,7 @@ export declare const dataProps: {
      * @props { Object } defaultSort 排序
      */
     defaultSort: {
-        type: import('vue').PropType<DefaultSort>;
+        type: PropType<DefaultSort>;
         default(): {};
     };
     /**

package/dist/components/tables-form/src/data.ts

@@ -0,0 +1,131 @@
+import type { ExtractPropTypes } from 'vue';
+import { buildProps } from '../../../utils/vues/buildProps';
+import { definePropType } from '../../../utils/vues/definePropType';
+import type { ObjAny } from '../../../types/index';
+export type DefaultSort = {
+	prop: string;
+	order: 'ascending' | 'descending';
+};
+/**
+ * @title FTable 表格
+ * @author 方忠亚
+ * @description 对el-table进行二次封装，减少写html，自适应自身高度
+ * @date 2022年11月21日19点34分
+ */
+
+/**
+ * 分页数据
+ */
+type Paginat = {
+	// 当前页
+	current: number;
+	// 每页数量
+	size: number;
+};
+
+export const dataProps = buildProps({
+	/**
+	 * @props { Object } defaultSort 排序
+	 */
+	defaultSort: {
+		type: definePropType<DefaultSort>(Object),
+		default() {
+			return {};
+		},
+	},
+	/**
+	 * {String} selectionAll 支持横排全部的列
+	 */
+	selectionAll: {
+		type: String,
+	},
+
+	/**
+	 * @props { Array<Object> } list table展示的列
+	 * @props { String } list.class table展示的列class
+	 * @props { String } list.label table展示的列头名称
+	 * @props { Array<Object> } list.children 用来展示多级头
+	 * @props { boolean } list.hide=false 当前列是否隐藏
+	 * @props { function } list.sethide 当前列是否隐藏方法模式
+	 * @props { function } list.formatter (row, column, cellValue, index) 用来格式化内容
+	 * @props { String } list.align=left (left , center , right) 对齐方式
+	 * @props { string , number } list.width table展示的宽度
+	 * @props { string , number } list.minWidth table展示的最小宽度
+	 * @props { string , boolean } list.fixed (true , 'left' , 'right') 列是否固定在左侧或者右侧。 true 表示固定在左侧
+	 * @props { String } list.compon (component, color, list, but) table的扩展组件配置
+	 * @props { Object } list.config table的扩展组件的配置对象
+	 */
+	list: {
+		type: Array<ObjAny>,
+		default() {
+			return [];
+		},
+	},
+	/**
+	 * @props { Array } value table列表数据
+	 */
+	value: {
+		type: Array<ObjAny>,
+		default() {
+			return [];
+		},
+	},
+
+	form: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	formValue: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	/**
+	 * 行高度
+	 */
+	lineHeight: {
+		type: Number,
+	},
+	/**
+	 * 分页数据
+	 */
+	// paginat: {
+	// 	type: definePropType<Paginat>(Object),
+	// },
+});
+
+export type DataProps = ExtractPropTypes<typeof dataProps>;
+
+/**
+ * @emits scroll-bottom 滚动到列表底部触发事件
+ */
+export const dataEmits = [
+	'submit',
+	'sort-change',
+	'scroll-bottom',
+	'scope-click',
+	'selection-list',
+	'list-events',
+];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ * @slot empty 没有数据的插槽
+ */
+export const dataSlot = {
+	empty: 'empty',
+};
+
+/**
+ * @expose clearSelection ( ) 清除多选
+ * @expose toggleRowSelectionList (row, selected, key ) 切换选择
+ * @expose clearSelectionList ( ) 清空选中
+ * @expose { Object: {  value: 值,
+                    list: 当前列,
+                    key: key的名称,} } getRowSelectionsCheckList (row, key ) 获取选中的值
+ */
+export const dataExpose = {};

package/dist/components/tables-form/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 elementPlus = require("element-plus");
 const columns_vue_vue_type_script_lang = require("./columns.cjs");
@@ -22,7 +22,7 @@ require("../../../hooks/global-config/index.cjs");
 const index$2 = require("../../../hooks/locale/index.cjs");
 const index = require("../../../hooks/inherit/index.cjs");
 const index$3 = require("../../../directives/scroll/index.cjs");
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
@@ -31,11 +31,11 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
     const cs = index$1.useCssName("tables-form");
     index$2.useLocale();
     const props = __props;
-    const tableRef = require$$0.ref();
-    const formRef = require$$0.ref();
-    const refFTableColumns = require$$0.ref();
-    const dataFormValue = require$$0.ref({});
-    require$$0.watch(
+    const tableRef = vue.ref();
+    const formRef = vue.ref();
+    const refFTableColumns = vue.ref();
+    const dataFormValue = vue.ref({});
+    vue.watch(
       () => props.formValue,
       () => {
         dataFormValue.value = props.formValue || {};
@@ -47,14 +47,14 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
     setTimeout(() => {
       isSort = false;
     }, 400);
-    const tableDefaultSort = require$$0.computed(() => {
+    const tableDefaultSort = vue.computed(() => {
       var _a, _b;
       return {
         prop: (_a = props.defaultSort) == null ? void 0 : _a.prop,
         order: (_b = props.defaultSort) == null ? void 0 : _b.order
       };
     });
-    const rowStyle = require$$0.computed(() => {
+    const rowStyle = vue.computed(() => {
       const height = props.lineHeight;
       const rowStyle2 = attrs.assem["row-style"];
       if (height) {
@@ -77,7 +77,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         };
       }
     });
-    const rowClassName = require$$0.computed(() => {
+    const rowClassName = vue.computed(() => {
       const rowStyle2 = attrs.assem["row-class-name"];
       if (rowStyle2) {
         return rowStyle2;
@@ -103,12 +103,12 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         }
       });
     }
-    const lists = require$$0.computed(() => {
+    const lists = vue.computed(() => {
       const arr = [];
       setList(props.list, arr);
       return arr;
     });
-    const cellClassName = require$$0.computed(() => {
+    const cellClassName = vue.computed(() => {
       const rowStyle2 = attrs.assem["cell-class-name"];
       if (rowStyle2) {
         return rowStyle2;
@@ -129,7 +129,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         };
       }
     });
-    require$$0.watch(tableDefaultSort, (newValue, oldValue) => {
+    vue.watch(tableDefaultSort, (newValue, oldValue) => {
       let prop = tableDefaultSort.value.prop;
       let order = tableDefaultSort.value.order;
       if (tableRef.value) {
@@ -190,23 +190,23 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       getRowSelectionsCheckList
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("div", require$$0.mergeProps({
-        class: [require$$0.unref(cs).z()]
-      }, require$$0.unref(attrs).root), [
-        require$$0.createVNode(require$$0.unref(elementPlus.ElForm), {
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: [vue.unref(cs).z()]
+      }, vue.unref(attrs).root), [
+        vue.createVNode(vue.unref(elementPlus.ElForm), {
           inline: true,
           ref_key: "formRef",
           ref: formRef,
           model: dataFormValue.value,
           "label-width": "0"
         }, {
-          default: require$$0.withCtx(() => [
-            require$$0.withDirectives((require$$0.openBlock(), require$$0.createBlock(require$$0.unref(elementPlus.ElTable), require$$0.mergeProps({
+          default: vue.withCtx(() => [
+            vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTable), vue.mergeProps({
               height: "100%",
-              class: [require$$0.unref(cs).z("table")],
+              class: [vue.unref(cs).z("table")],
               ref_key: "tableRef",
               ref: tableRef
-            }, require$$0.unref(attrs).assem, {
+            }, vue.unref(attrs).assem, {
               "row-class-name": rowClassName.value,
               "cell-class-name": cellClassName.value,
               "scroll-selector": ".el-scrollbar .el-scrollbar__wrap",
@@ -216,19 +216,19 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
               onSortChange: sortChange,
               "default-sort": tableDefaultSort.value
             }), {
-              empty: require$$0.withCtx(() => [
-                require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).empty, {}, () => [
-                  _cache[0] || (_cache[0] = require$$0.createElementVNode("div", { style: { "width": "217px", "height": "154px", "line-height": "20px" } }, [
-                    require$$0.createElementVNode("span", { style: { "line-height": "20px" } }, "暂无数据")
+              empty: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).empty, {}, () => [
+                  _cache[0] || (_cache[0] = vue.createElementVNode("div", { style: { "width": "217px", "height": "154px", "line-height": "20px" } }, [
+                    vue.createElementVNode("span", { style: { "line-height": "20px" } }, "暂无数据")
                   ], -1))
                 ])
               ]),
-              default: require$$0.withCtx(() => [
-                require$$0.createVNode(columns_vue_vue_type_script_lang.default, {
+              default: vue.withCtx(() => [
+                vue.createVNode(columns_vue_vue_type_script_lang.default, {
                   "selection-all": props.selectionAll,
                   ref_key: "refFTableColumns",
                   ref: refFTableColumns,
-                  table: require$$0.unref(attrs).assem,
+                  table: vue.unref(attrs).assem,
                   form: props.form,
                   formValue: dataFormValue.value,
                   data: props.value,
@@ -238,7 +238,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
               ]),
               _: 3
             }, 16, ["class", "row-class-name", "cell-class-name", "row-style", "data", "default-sort"])), [
-              [require$$0.unref(index$3.default), onScroll]
+              [vue.unref(index$3.default), onScroll]
             ])
           ]),
           _: 3

package/dist/components/tables-form/src/index.vue

@@ -0,0 +1,265 @@
+<!-- @format -->
+
+<template>
+	<div :class="[cs.z()]" v-bind="attrs.root">
+		<ElForm
+			:inline="true"
+			ref="formRef"
+			:model="dataFormValue"
+			label-width="0"
+		>
+			<ElTable
+				height="100%"
+				:class="[cs.z('table')]"
+				ref="tableRef"
+				v-bind="attrs.assem"
+				:row-class-name="rowClassName"
+				:cell-class-name="cellClassName"
+				v-scroll="onScroll"
+				scroll-selector=".el-scrollbar .el-scrollbar__wrap"
+				@row-click="onRowClick"
+				:row-style="rowStyle"
+				:data="props.value"
+				@sort-change="sortChange"
+				:default-sort="tableDefaultSort"
+			>
+				<TableColumns
+					:selection-all="props.selectionAll"
+					ref="refFTableColumns"
+					:table="attrs.assem"
+					:form="props.form"
+					:formValue="dataFormValue"
+					:data="props.value"
+					:list="props.list"
+					@list-events="onListEvents"
+				></TableColumns>
+				<template #empty>
+					<slot :name="dataSlot.empty">
+						<div
+							style="
+								width: 217px;
+								height: 154px;
+								line-height: 20px;
+							"
+						>
+							<span style="line-height: 20px">暂无数据</span>
+						</div>
+					</slot>
+				</template>
+			</ElTable>
+		</ElForm>
+	</div>
+</template>
+<script lang="ts" setup>
+	import {
+		dataProps,
+		dataEmits,
+		dataExpose,
+		dataSlot,
+		type DefaultSort,
+	} from './data';
+	import { ElTable, ElForm, type ColumnStyle } from 'element-plus';
+	import TableColumns from './columns.vue';
+	import { useHide } from '../../common/use';
+	import { watch, ref, reactive, computed, onMounted } from 'vue';
+	import { useCssName, useLocale, useInherit } from '../../../hooks/index';
+	import vScroll from '../../../directives/scroll';
+	import type { ObjAny } from '../../../types/index';
+
+	type RowStyle = ColumnStyle<any>;
+
+	const attrs = useInherit();
+	// 样式设置方法
+	const cs = useCssName('tables-form');
+	// 获取国际化字段
+	const { getLocale } = useLocale();
+	const props = defineProps(dataProps);
+
+	const tableRef = ref();
+	const formRef = ref();
+	const refFTableColumns = ref();
+	const dataFormValue = ref<ObjAny>({});
+
+	watch(
+		() => props.formValue,
+		() => {
+			dataFormValue.value = props.formValue || {};
+		},
+		{ immediate: true, deep: true },
+	);
+
+	const emit = defineEmits(dataEmits);
+
+	// 排序
+	let isSort = false;
+	setTimeout(() => {
+		isSort = false;
+	}, 400);
+
+	const tableDefaultSort = computed<DefaultSort>(() => {
+		return {
+			prop: props.defaultSort?.prop,
+			order: props.defaultSort?.order,
+		};
+	});
+
+	const rowStyle = computed<RowStyle>(() => {
+		const height = props.lineHeight;
+		const rowStyle = attrs.assem['row-style'] as RowStyle;
+		if (height) {
+			if (rowStyle) {
+				if (typeof rowStyle == 'object') {
+					// @ts-ignore
+					rowStyle['height'] = height + 'px';
+					return rowStyle;
+				} else {
+					return rowStyle;
+				}
+			} else {
+				return {
+					height: height + 'px',
+				} as RowStyle;
+			}
+		} else {
+			return {
+				height: '',
+				...rowStyle,
+			};
+		}
+	});
+
+	type ClassNameFun = (scope: ObjAny) => string;
+
+	const rowClassName = computed<string | ClassNameFun>(() => {
+		const rowStyle = attrs.assem['row-class-name'];
+		if (rowStyle) {
+			return rowStyle as string | ClassNameFun;
+		} else {
+			return (scope: ObjAny): string => {
+				const prop = props.form.prop;
+				if (scope.row[prop]) {
+					return 'row-form-item';
+				} else {
+					return '';
+				}
+			};
+		}
+	});
+
+	function setList(arr: ObjAny[], list: ObjAny[]) {
+		arr.forEach((obj) => {
+			if (obj.children && obj.children.length > 0) {
+				setList(obj.children, list);
+			} else {
+				if (useHide(obj)) {
+					list.push(obj);
+				}
+			}
+		});
+	}
+
+	const lists = computed(() => {
+		const arr: ObjAny[] = [];
+		setList(props.list, arr);
+		return arr;
+	});
+
+	const cellClassName = computed<string | ClassNameFun>(() => {
+		const rowStyle = attrs.assem['cell-class-name'];
+		if (rowStyle) {
+			return rowStyle as string | ClassNameFun;
+		} else {
+			return (scope: ObjAny): string => {
+				const prop = props.form?.prop;
+				const obj = lists.value[scope.columnIndex];
+				const defaultFormfilter = () => {
+					return obj.isform && obj.compon && prop && scope.row[prop];
+				};
+				const formfilter = obj.formfilter || defaultFormfilter;
+				if (formfilter(scope, obj, props.form, dataFormValue.value)) {
+					return 'cell-form-item';
+				} else {
+					return '';
+				}
+			};
+		}
+	});
+
+	watch(tableDefaultSort, (newValue, oldValue) => {
+		let prop = tableDefaultSort.value.prop;
+		let order = tableDefaultSort.value.order;
+		if (tableRef.value) {
+			if (prop) {
+				isSort = true;
+				tableRef.value.sort(prop, order);
+			} else {
+				tableRef.value.clearSort();
+			}
+		}
+	});
+
+	function validate() {
+		formRef.value?.validate((valid: boolean) => {
+			if (valid) {
+				emit('submit', dataFormValue.value);
+			}
+		});
+	}
+
+	function sortChange(obj: DefaultSort) {
+		if (isSort) {
+			isSort = false;
+			return false;
+		}
+		emit('sort-change', obj);
+	}
+	function onListEvents(...arr: any[]) {
+		emit('list-events', ...arr);
+	}
+
+	function onRowClick(row: any) {
+		toggleRowSelection(row);
+	}
+
+	function toggleRowSelection(row: any) {
+		tableRef.value.toggleRowSelection(row);
+	}
+
+	function toggleRowSelectionList(...arr: any[]) {
+		refFTableColumns.value.toggleRowSelection(...arr);
+	}
+
+	function clearSelection() {
+		tableRef.value.clearSelection();
+	}
+
+	function clearSelectionList() {
+		refFTableColumns.value.clearSelection();
+	}
+
+	function getRowSelectionsCheckList(...arr: any[]) {
+		return refFTableColumns.value.getRowSelectionsCheck(...arr);
+	}
+
+	function onScroll() {
+		emit('scroll-bottom');
+	}
+
+	function onScopeClick(...arr: any[]) {
+		emit('scope-click', ...arr);
+	}
+	function onSelectionList(...arr: any[]) {
+		emit('selection-list', ...arr);
+	}
+
+	defineExpose({
+		...dataExpose,
+		form: formRef,
+		validate,
+		clearSelection,
+		toggleRowSelectionList,
+		clearSelectionList,
+		getRowSelectionsCheckList,
+	});
+</script>
+<style lang="scss" scoped></style>