@fangzhongya/fang-ui 0.0.13 → 0.0.15

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

@@ -0,0 +1,295 @@
+import { h, computed, reactive, resolveComponent } from 'vue';
+import {
+	isArray,
+	setHide,
+	setMinWidth,
+	firstLower,
+	lineToLargeHump,
+} from '../../../utils/index';
+import { ElTableColumn, ElFormItem } from 'element-plus';
+
+const noProps = ['children', 'class', 'minWidth', 'label'];
+
+export function setProps(obj: ObjAny, table: ObjAny) {
+	const robj: ObjAny = {};
+	const issort = table['sort'];
+	robj['header-align'] = table['align'];
+	robj['align'] = obj['header-align'] || table['align'];
+	Object.keys(obj).forEach((key) => {
+		if (!noProps.includes(key)) {
+			if (obj[key] !== '') {
+				robj[key] = obj[key];
+				if (key == 'sortable') {
+					if (issort && obj[key]) {
+						robj[key] = 'custom';
+					}
+				}
+			}
+		}
+	});
+	return robj;
+}
+
+export function getOnObjs(list: ObjAny, scope: any, emit: any) {
+	const obj: {
+		[key: string]: () => void;
+	} = {};
+	const es = list.events || {};
+	Object.keys(es).forEach((key) => {
+		let ml = key;
+		if (!/on[A-Z]/.test(key)) {
+			ml = 'on' + lineToLargeHump(key);
+		}
+		ml = firstLower(lineToLargeHump(ml));
+		obj[ml] = (...data: any[]) => {
+			if (es[key] && typeof es[key] == 'function') {
+				es[key](...data, scope, list);
+			} else {
+				emit('list-events', key, ...data, scope, list);
+			}
+		};
+	});
+	return obj;
+}
+
+function getFormValue(obj: any, scope: any) {
+	const prop = obj.prop || '';
+	const row = scope.row;
+	const cellValue = row[prop];
+	if (obj.formvalue) {
+		return obj.formvalue(row, scope.column, cellValue, scope.$index);
+	} else if (obj.formatter) {
+		return obj.formatter(row, scope.column, cellValue, scope.$index);
+	} else {
+		return cellValue;
+	}
+}
+
+function setSslot(
+	obj: ObjAny,
+	scope: ObjAny,
+	emit: any,
+	table: ObjAny,
+	index: number,
+	form: ObjAny,
+	formValue: ObjAny,
+) {
+	if (obj.isform) {
+		const prop = form.prop;
+		const defaultFormfilter = () => {
+			return obj.compon && prop && scope.row[prop];
+		};
+		const formfilter = obj.formfilter || defaultFormfilter;
+		if (formfilter(scope, obj, form, formValue)) {
+			const key = scope.row[prop];
+			const fv = { ...scope, row: formValue[key] || {} };
+			const componValueName = obj.componValueName || 'modelValue';
+			const componObj = {
+				...obj.config,
+				...getOnObjs(obj, fv, emit),
+				[componValueName]: getFormValue(obj, fv),
+				'onUpdate:modelValue': (value: any) => {
+					formValue[key] = formValue[key] || {};
+					formValue[key][obj.prop] = value;
+				},
+				tableList: obj,
+				tableScope: fv,
+			};
+			let rules = obj.rules || [];
+			if (!(rules instanceof Array)) {
+				rules = [rules];
+			}
+			if (obj.required) {
+				rules.unshift({
+					required: true,
+					message: obj.label + '不能为空',
+					trigger: ['blur', 'change'],
+				});
+			}
+			return h(
+				ElFormItem,
+				{
+					class: 'table-form-item',
+					'inline-message': true,
+					prop: key + '.' + obj.prop,
+					rules: rules,
+				},
+				{
+					default: () => {
+						if (typeof obj.compon == 'string') {
+							return h(resolveComponent(obj.compon), componObj);
+						} else {
+							return h(obj.compon, componObj);
+						}
+					},
+				},
+			);
+		} else {
+			return defaultDom(obj, scope, table, index);
+		}
+	} else if (obj.compon) {
+		const componValueName = obj.componValueName || 'modelValue';
+		const componObj = {
+			...obj.config,
+			...getOnObjs(obj, scope, emit),
+			[componValueName]: getValue(obj, scope),
+			'onUpdate:modelValue': (value: any) =>
+				(scope.row[obj.prop] = value),
+			tableList: obj,
+			tableScope: scope,
+		};
+		if (typeof obj.compon == 'string') {
+			return h(resolveComponent(obj.compon), componObj);
+		} else {
+			return h(obj.compon, componObj);
+		}
+	} else {
+		return defaultDom(obj, scope, table, index);
+	}
+}
+
+function getValue(obj: any, scope: any) {
+	const prop = obj.prop || '';
+	const row = scope.row;
+	const cellValue = row[prop];
+	if (obj.formatter) {
+		return obj.formatter(row, scope.column, cellValue, scope.$index);
+	} else {
+		return cellValue;
+	}
+}
+
+function defaultDom(obj: ObjAny, scope: ObjAny, table: ObjAny, index: number) {
+	let domValue: any = '';
+	const prop = obj.prop || '';
+	const row = scope.row;
+	const cellValue = row[prop];
+	if (obj.type == 'index') {
+		if (obj.index) {
+			domValue = obj.index(scope.$index, table.paginat);
+		} else {
+			if (table.paginat && table.paginat.current && table.paginat.size) {
+				domValue =
+					(table.paginat.current - 1) * table.paginat.size +
+					scope.$index +
+					1;
+			} else {
+				domValue = scope.$index + 1;
+			}
+		}
+	} else if (obj.type == 'selection') {
+		return;
+	} else if (obj.formatter) {
+		domValue = obj.formatter(row, scope.column, cellValue, scope.$index);
+	} else if (obj.asynccall) {
+		const key = '_async_' + (prop || '_' + index);
+		if (!row[key] || typeof row[key].value == 'undefined') {
+			row[key] = reactive({
+				value: cellValue || '',
+			});
+			obj.asynccall(scope, (v: string) => {
+				row[key].value = v;
+			});
+		}
+		return h(
+			'span',
+			{
+				class: 'text',
+			},
+			row[key].value,
+		);
+	} else {
+		domValue = cellValue;
+	}
+	domValue = domValue ?? '';
+	return h(
+		'span',
+		{
+			class: 'text',
+			onClick(event: Event) {
+				if (obj.click) {
+					obj.click(event, scope, obj);
+				}
+			},
+		},
+		domValue,
+	);
+}
+
+export function setHeader(obj: any) {
+	if (isArray(obj.label)) {
+		return h(
+			'span',
+			{
+				class:
+					'th-header ' +
+					(obj.required ? 'is-required ' : '') +
+					(obj.class || ''),
+			},
+			obj.label.map((v: string) => {
+				return h('span', { class: 'th-header-span' }, v);
+			}),
+		);
+	} else if (obj.required) {
+		return h(
+			'span',
+			{ class: 'th-header is-required ' + (obj.class || '') },
+			obj.label,
+		);
+	} else {
+		return obj.label;
+	}
+}
+
+function getDom(
+	obj: ObjAny,
+	emit: any,
+	table: ObjAny,
+	index: number,
+	form: ObjAny,
+	formValue: ObjAny,
+) {
+	if (setHide(obj)) {
+		const props = setProps(obj, table);
+		return h(
+			ElTableColumn,
+			{
+				...props,
+				className: obj.class,
+				minWidth: setMinWidth(obj),
+			},
+			{
+				default: (scope: any) => {
+					if (obj.compon) {
+						return setSslot(
+							obj,
+							scope,
+							emit,
+							table,
+							index,
+							form,
+							formValue,
+						);
+					}
+					return defaultDom(obj, scope, table, index);
+				},
+				header: () => {
+					return setHeader(obj);
+				},
+			},
+		);
+	} else {
+		return;
+	}
+}
+
+export function columnRender(
+	obj: ObjAny,
+	emit: any,
+	table: ObjAny,
+	index: number,
+	form: ObjAny,
+	formValue: ObjAny,
+) {
+	return getDom(obj, emit, table, index, form, formValue);
+}

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const columns = require("./columns3.cjs");
-const _sfc_main = require$$0.defineComponent({
+const _sfc_main = vue.defineComponent({
   emits: ["list-events"],
   expose: [],
   props: {
@@ -37,7 +37,7 @@ const _sfc_main = require$$0.defineComponent({
     }
   },
   setup(props, { emit }) {
-    const v = require$$0.computed(() => {
+    const v = vue.computed(() => {
       return props;
     });
     return () => columns.render(v, emit);

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 = {};