gy-ui-plus 1.0.6 → 1.0.8

package/packages/gy-table/src/operator.vue

@@ -1,246 +0,0 @@
-<template>
-	<!-- 操作按钮 -->
-	<el-table-column
-		v-if="table.operator"
-		v-bind="{
-			fixed: table.operatorConfig?.fixed,
-			label: table.operatorConfig?.label || '操作',
-			'min-width': table.operatorConfig?.minWidth,
-			width: table.operatorConfig?.width,
-			align: table.operatorConfig?.align || align,
-			...table.operatorConfig?.bind,
-		}"
-		class-name="operator"
-	>
-		<template #default="scope">
-			<div class="operator_btn" :style="table.operatorConfig?.style">
-				<template v-for="(item, index) in table.operator">
-					<template v-if="!item.isMore">
-						<el-button
-							:key="index"
-							@click="
-								item.fun &&
-									item.fun(scope.row, scope.$index, tableData)
-							"
-							v-bind="{
-								type: 'primary',
-								link: true,
-								text: true,
-								size: 'small',
-								...item.bind,
-							}"
-							:disabled="
-								item.isDisabled &&
-								item.isDisabled(scope.row, item)
-							"
-							v-if="checkIsShow(scope, item)"
-						>
-							<template v-if="item.render">
-								<render-col
-									:column="item"
-									:row="scope.row"
-									:render="item.render"
-									:index="scope.$index"
-								/>
-							</template>
-							<span v-if="!item.render">{{ item.text }}</span>
-						</el-button>
-					</template>
-				</template>
-				<template v-if="hasMoreOper()">
-					<el-dropdown
-						v-bind="hasMoreBind"
-						class="oper_more_dropdown"
-					>
-						<span class="more_dropdown-link">
-							<el-button
-								v-bind="{
-									type: 'primary',
-									link: true,
-									text: true,
-									size: 'small',
-									...hasMoreBind.btnBind,
-								}"
-							>
-								{{ hasMoreBind.btnTxt || "更多" }}
-								<el-icon v-if="hasMoreBind.isShowArrwIcon">
-									<ArrowDown />
-								</el-icon>
-							</el-button>
-						</span>
-						<template #dropdown>
-							<el-dropdown-menu
-								v-bind="hasMoreBind.menuBind"
-								class="oper_more_dropdown_menu"
-							>
-								<template
-									v-for="(item, index) in table.operator"
-								>
-									<el-dropdown-item
-										v-if="item.isMore"
-										@click="
-											item.fun &&
-												item.fun(
-													scope.row,
-													scope.$index,
-													tableData
-												)
-										"
-										:key="'more_' + index"
-										v-bind="{
-											disabled:
-												item.isDisabled &&
-												item.isDisabled(
-													scope.row,
-													item
-												),
-											...item.itemBind,
-										}"
-									>
-										<el-button
-											:key="index"
-											v-bind="{
-												link: true,
-												text: true,
-												size: 'small',
-												disabled:
-													item.isDisabled &&
-													item.isDisabled(
-														scope.row,
-														item
-													),
-												...item.bind,
-											}"
-											v-if="checkIsShow(scope, item)"
-										>
-											<template v-if="item.render">
-												<render-col
-													:column="item"
-													:row="scope.row"
-													:render="item.render"
-													:index="scope.$index"
-												/>
-											</template>
-											<span v-if="!item.render">{{
-												item.text
-											}}</span>
-										</el-button>
-									</el-dropdown-item>
-								</template>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
-				</template>
-			</div>
-		</template>
-	</el-table-column>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { ArrowDown } from "@element-plus/icons-vue";
-import RenderCol from "./renderCol.vue";
-const props = defineProps({
-	tableData: {
-		type: Array,
-		default: () => [],
-	},
-	table: { type: Object, default: () => {} },
-	btnPermissions: {
-		type: Array,
-		default: () => [],
-	},
-	align: {
-		type: String,
-		default: "center",
-	},
-});
-defineOptions({
-	name: "Operator",
-});
-
-// 是否显示表格操作按钮
-const checkIsShow = (
-	scope: { row: { [s: string]: unknown } | ArrayLike<unknown> | any },
-	item: {
-		noshow: any;
-		show: { val: string | any[]; key: string | number };
-		hasPermi: any;
-		field: string | number;
-		isField: string | number;
-	}
-) => {
-	let isNoshow = false;
-	if (item.noshow) {
-		// 解决双重判断循环递归
-		let nushowFun = JSON.parse(JSON.stringify(item.noshow));
-		// 双重判断
-		nushowFun.map(
-			(rs: {
-				isShow: string;
-				val: string | any[];
-				key: string | number;
-			}) => {
-				rs.isShow =
-					typeof rs.val === "string"
-						? rs.val === "isHasVal"
-							? scope.row[rs.key]
-								? "true"
-								: "false"
-							: "true"
-						: rs.val.includes(scope.row[rs.key])
-						? "false"
-						: "true";
-			}
-		);
-		isNoshow = nushowFun.every((key: { isShow: string }) => {
-			return key.isShow === "true";
-		});
-	} else {
-		isNoshow = true;
-	}
-	// 单独判断
-	let isShow = !item.show || item.show.val.includes(scope.row[item.show.key]);
-	// 按钮权限
-	let isPermission = item.hasPermi
-		? props.btnPermissions?.includes(item.hasPermi)
-		: true;
-	// table页面合计
-	let totalTxt = Object.values(scope.row).every((key) => {
-		return key !== "当页合计";
-	});
-	// table页面合计
-	let totalTxt1 = Object.values(scope.row).every((key) => {
-		return key !== "全部合计";
-	});
-	return (
-		isShow &&
-		isNoshow &&
-		!scope.row[item.field] &&
-		(item.isField ? scope.row[item.isField] : true) &&
-		totalTxt &&
-		totalTxt1 &&
-		isPermission
-	);
-};
-// 更多下拉配置
-const $attrs = useAttrs();
-const hasMoreBind: any = computed(() => {
-	const btnBind = { type: "primary", link: true, text: true, size: "small" }; // 按钮属性
-	const menuBind = {}; // 下拉menu属性
-	const setBind = {
-		btnTxt: "更多",
-		isShowArrwIcon: true, // 是否显示下拉箭头
-		...menuBind, // 下拉menu属性
-		...btnBind, // 按钮属性
-		...props.table.operatorConfig.dropdownBind, // 下拉属性
-	};
-	return { ...$attrs, ...setBind };
-});
-// 判断操作是否显示最多
-const hasMoreOper = () => {
-	return props.table.operator.some(
-		(item: { isMore: boolean }) => item.isMore === true
-	);
-};
-</script>

package/packages/gy-table/src/renderCol.vue

@@ -1,24 +0,0 @@
-<template>
-	<component :is="renderComponent" />
-</template>
-<script lang="ts" setup>
-defineOptions({
-	name: "RenderCol",
-});
-const props: any = defineProps({
-	row: Object,
-	render: Function,
-	index: Number,
-	column: {
-		type: Object,
-		default: null,
-	},
-});
-const renderComponent = () => {
-	return props.render(
-		props?.row[props?.column?.prop],
-		props.row,
-		props.index
-	);
-};
-</script>

package/packages/gy-table/src/renderHeader.vue

@@ -1,18 +0,0 @@
-<template>
-	<component :is="renderComponent" />
-</template>
-<script lang="ts" setup>
-defineOptions({
-	name: "RenderHeader",
-});
-const props: any = defineProps({
-	render: Function,
-	column: {
-		type: Object,
-		default: null,
-	},
-});
-const renderComponent = () => {
-	return props.render(props?.column);
-};
-</script>

package/packages/gy-table/src/singleEdit.vue

@@ -1,406 +0,0 @@
-<template>
-	<div @click="onFieldClick" class="single_edit_cell">
-		<div class="cell-content" v-if="!editMode">
-			<el-tooltip
-				v-if="configEdit.isShowTips"
-				class="item"
-				v-bind="{
-					effect: 'light',
-					content: '单击可编辑',
-					placement: 'top',
-					...configEdit.tipbind,
-				}"
-			>
-				<div v-if="childCom.includes(configEdit.type)">
-					{{ childVal }}&nbsp;
-				</div>
-				<div v-else>{{ model }}&nbsp;</div>
-				<slot name="content"></slot>
-			</el-tooltip>
-			<template v-else>
-				<div v-if="childCom.includes(configEdit.type)">
-					{{ childVal }}&nbsp;
-				</div>
-				<div v-else>{{ model }}&nbsp;</div>
-				<slot name="content"></slot>
-			</template>
-		</div>
-		<template v-if="editMode">
-			<template v-if="configEdit.editSlotName">
-				<div :class="[prop, 'slot_edit_name']">
-					<slot :name="configEdit.editSlotName" :scope="scope" />
-				</div>
-			</template>
-			<template v-if="configEdit.isSelfCom">
-				<component
-					v-if="configEdit.editComponent === 't-select-table'"
-					:ref="(el:any) => handleRef(el)"
-					:is="configEdit.editComponent"
-					:placeholder="
-						configEdit.placeholder || getPlaceholder(configEdit)
-					"
-					v-bind="
-						typeof configEdit.bind == 'function'
-							? configEdit.bind(scope)
-							: {
-									clearable: true,
-									filterable: true,
-									...configEdit.bind,
-							  }
-					"
-					:style="{ width: configEdit.width || '100%' }"
-					v-on="cEvent(configEdit, 't-select-table')"
-				/>
-				<component
-					v-else
-					:is="configEdit.editComponent"
-					v-model="model"
-					:type="configEdit.type"
-					:placeholder="
-						configEdit.placeholder || getPlaceholder(configEdit)
-					"
-					ref="parentCom"
-					v-bind="
-						typeof configEdit.bind == 'function'
-							? configEdit.bind(scope)
-							: {
-									clearable: true,
-									filterable: true,
-									...configEdit.bind,
-							  }
-					"
-					@change="
-						handleEvent(configEdit.event, model, configEdit.type)
-					"
-					:style="{ width: configEdit.width || '100%' }"
-					v-on="cEvent(configEdit)"
-				/>
-			</template>
-			<component
-				v-if="!configEdit.editSlotName && !configEdit.isSelfCom"
-				:is="configEdit.editComponent || 'el-input'"
-				v-model="model"
-				:type="configEdit.type"
-				:placeholder="
-					configEdit.placeholder || getPlaceholder(configEdit)
-				"
-				:class="prop"
-				ref="parentCom"
-				@change="handleEvent(configEdit.event, model, configEdit.type)"
-				@keyup.enter.native="onInputExit"
-				@blur="onInputExit"
-				v-bind="
-					typeof configEdit.bind == 'function'
-						? configEdit.bind(scope)
-						: {
-								clearable: true,
-								filterable: true,
-								...configEdit.bind,
-						  }
-				"
-				:style="{ width: configEdit.width || '100%' }"
-				v-on="cEvent(configEdit)"
-			>
-				<template v-for="(_index, name) in slots" v-slot:[name]="data">
-					<slot :name="name" v-bind="data"></slot>
-				</template>
-				<template #prepend v-if="configEdit.prepend">{{
-					configEdit.prepend
-				}}</template>
-				<template #append v-if="configEdit.append">{{
-					configEdit.append
-				}}</template>
-				<slot name="editChild" />
-				<div v-if="!$slots.editChild">
-					<component
-						:is="compChildName(configEdit)"
-						v-for="(value, key) in listTypeInfo[configEdit.list]"
-						:key="key"
-						:disabled="value.disabled"
-						:label="compChildLabel(configEdit, value)"
-						:value="compChildValue(configEdit, value, key)"
-						>{{ compChildShowLabel(configEdit, value) }}</component
-					>
-				</div>
-			</component>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, ref, watch, useSlots } from "vue";
-defineOptions({
-	name: "SingleEdit",
-});
-const props = defineProps({
-	/** 编辑配置项说明
-	 * label: '爱好', // placeholder显示
-	 * editComponent: 'el-select', // 组件
-	 * type: 'select-arr', // option显示
-	 * list: 'hobbyList', // 下拉选择数据源
-	 * arrLabel: 'label', // 下拉选择中文显示
-	 * arrKey: 'value' // 下拉选择number显示（最终传后台）
-	 * bind:{} // 组件衍生属性（即第三方组件属性）
-	 */
-	configEdit: {
-		type: Object as any,
-		default: () => ({}),
-	},
-	// 下拉选择数据源
-	listTypeInfo: {
-		type: Object,
-		default: () => ({}),
-	},
-	scope: {
-		type: Object,
-		default: () => ({}),
-	},
-	prop: {
-		type: String,
-		default: "prop",
-	},
-	// 是否开启单击编辑
-	isClickEdit: {
-		type: Boolean,
-		default: false,
-	},
-	modelValue: {
-		type: [String, Number, Object, Array, Date],
-	},
-	// 列for index
-	indexColumns: [String, Number],
-});
-// 抛出事件
-const emits = defineEmits(["handleEvent", "update:modelValue"]);
-const slots = useSlots();
-const childCom = ref([
-	"select-arr",
-	"checkbox",
-	"radio",
-	"select-obj",
-	"el-select-multiple",
-]);
-const editMode = ref(false);
-// 下拉选择表格组件 ref
-const tselecttableref: any = ref({});
-// 下拉选择表格组件 动态ref
-const handleRef = (el: any) => {
-	if (el) {
-		tselecttableref.value[`tselecttableref-${props.indexColumns}`] = el;
-	}
-};
-// 重置下拉表格
-const resetClickTselectTable = () => {
-	// 获取所有下拉选择表格组件
-	const refList = Object.keys(tselecttableref.value).filter((item) =>
-		item.includes("tselecttableref")
-	);
-	if (refList.length > 0 && tselecttableref.value) {
-		refList.map((val) => {
-			tselecttableref.value[val].clear();
-		});
-	}
-};
-let model: any = computed({
-	get() {
-		return props?.modelValue;
-	},
-	set(val) {
-		emits("update:modelValue", val);
-	},
-});
-watch(
-	() => props.modelValue,
-	(data) => {
-		model.value = data;
-	}
-);
-// 引用第三方事件
-const cEvent: any = computed(() => {
-	return ({ eventHandle }: any, type = "") => {
-		let event = { ...eventHandle };
-		let changeEvent = {} as any;
-		Object.keys(event).forEach((v) => {
-			changeEvent[v] = (e: any, ids: any) => {
-				if (type === "t-select-table") {
-					const argument = {
-						row: e,
-						ids: ids,
-						prop: props.prop,
-						scope: props.scope,
-					};
-					event[v] && event[v](argument);
-				} else {
-					if ((typeof e === "number" && e === 0) || e) {
-						event[v] &&
-							event[v]({
-								val: e,
-								prop: props.prop,
-								scope: props.scope,
-							});
-					} else {
-						event[v] &&
-							event[v]({ prop: props.prop, scope: props.scope });
-					}
-				}
-			};
-		});
-		return { ...changeEvent };
-	};
-});
-const childVal = computed({
-	get() {
-		let valLabel;
-		let checkboxVal = [] as any;
-		let selcetMultiple = [] as any;
-		props.listTypeInfo[props.configEdit.list] &&
-			props.listTypeInfo[props.configEdit.list].map((val: any) => {
-				switch (props.configEdit.type) {
-					case "checkbox":
-					case "radio":
-						if (model.value.join(",").includes(val.value)) {
-							checkboxVal.push(val.label);
-						}
-						valLabel = checkboxVal.join(",");
-						break;
-					case "select-arr":
-						// eslint-disable-next-line eqeqeq
-						if (model.value == val[props.configEdit.arrKey]) {
-							valLabel = val[props.configEdit.arrLabel];
-						}
-						break;
-					case "el-select-multiple":
-						if (
-							model.value &&
-							model.value
-								.join(",")
-								.includes(val[props.configEdit.arrKey])
-						) {
-							selcetMultiple.push(val[props.configEdit.arrLabel]);
-						}
-						valLabel = selcetMultiple.join(",");
-						break;
-					case "select-obj":
-						valLabel = val;
-						break;
-				}
-			});
-		return valLabel;
-	},
-	set(val) {
-		return val;
-	},
-});
-// 子组件名称
-const compChildName = computed(() => {
-	return (configEdit: { type: any }) => {
-		switch (configEdit.type) {
-			case "checkbox":
-				return "el-checkbox";
-			case "radio":
-				return "el-radio";
-			case "el-select-multiple":
-			case "select-arr":
-			case "select-obj":
-				return "el-option";
-		}
-	};
-});
-// 子子组件label
-const compChildLabel = computed(() => {
-	return (
-		configEdit: { type: any; arrLabel: any },
-		value: { [x: string]: any; value: any }
-	) => {
-		switch (configEdit.type) {
-			case "radio":
-			case "checkbox":
-				return value[configEdit.arrLabel || "label"];
-			case "el-select-multiple":
-			case "select-arr":
-				return value[configEdit.arrLabel || "label"];
-			case "select-obj":
-				return value;
-		}
-	};
-});
-// 子子组件value
-const compChildValue = computed(() => {
-	return (
-		configEdit: { type: any; arrKey: any },
-		value: { [x: string]: any; value: any },
-		key: any
-	) => {
-		switch (configEdit.type) {
-			case "radio":
-			case "checkbox":
-				return value[configEdit.arrKey || "key"];
-			case "el-select-multiple":
-			case "select-arr":
-				return value[configEdit.arrKey || "key"];
-			case "select-obj":
-				return key;
-		}
-	};
-});
-// 子子组件文字展示
-const compChildShowLabel = computed(() => {
-	return (
-		configEdit: { type: any; arrLabel: any },
-		value: { [x: string]: any; label: any }
-	) => {
-		switch (configEdit.type) {
-			case "radio":
-			case "checkbox":
-				return value[configEdit.arrLabel || "label"];
-			case "el-select-multiple":
-			case "select-arr":
-				return value[configEdit.arrLabel || "label"];
-			case "select-obj":
-				return value;
-		}
-	};
-});
-const parentCom = ref<null | any>();
-// 点击外层开启编辑focus
-const onFieldClick = () => {
-	if (props.isClickEdit) {
-		editMode.value = true;
-		nextTick(() => {
-			let parentRef = parentCom.value;
-			if (parentRef && parentRef.focus) {
-				parentRef.focus();
-			}
-		});
-	}
-};
-const onInputExit = () => {
-	editMode.value = false;
-};
-// placeholder的显示
-const getPlaceholder = (row: any) => {
-	if (!row.editComponent || typeof row.editComponent !== "string") {
-		return row.label;
-	}
-	const componentType = row.editComponent.toLowerCase();
-	if (componentType.includes("input")) {
-		return "请输入";
-	} else if (
-		componentType.includes("select") ||
-		componentType.includes("date")
-	) {
-		return "请选择";
-	}
-	return row.label;
-};
-// 绑定的相关事件
-const handleEvent = (type, val, comType) => {
-	// console.log("type---comType", comType)
-	if (comType === "datetime") onInputExit();
-	setTimeout(() => {
-		// console.log("组件", type, childValue.value)
-		emits("handleEvent", { type, val });
-	}, 0);
-};
-defineExpose({ resetClickTselectTable });
-</script>