hs-admin-ui 1.0.0 → 1.0.2

package/src/components/business/bcBtn/bcBtn.vue

@@ -1,40 +0,0 @@
-<template>
-	<hs-button class="bc-button" v-bind="getBtnData(data)" @click="$emit('click')" :style="{ '--text-color': data.textColor }">
-		<template v-if="data.iconPosition === 'right'">
-			<span class="mr-1">{{ data.name }}</span>
-			<template v-if="data.btnIcon">
-				<i v-if="data.btnIcon.indexOf('iconfont') > -1" :class="[data.btnIcon]" />
-				<el-icon v-else class="mx-1"><component :is="data.btnIcon" /></el-icon>
-			</template>
-		</template>
-		<template v-else>
-			<template v-if="data.btnIcon">
-				<i v-if="data.btnIcon.indexOf('iconfont') > -1" :class="[data.btnIcon]" />
-				<el-icon v-else class="mx-1"><component :is="data.btnIcon" /></el-icon>
-			</template>
-			<span class="ml-1">{{ data.name }}</span>
-		</template>
-	</hs-button>
-</template>
-<script lang="ts" setup name="bcBtn">
-import ICustomData from '/@/types/customData';
-import _ from 'lodash';
-
-interface Props {
-	data: ICustomData.BtnData;
-}
-defineEmits(['click']);
-defineProps<Props>();
-
-function getBtnData(data: ICustomData.BtnData) {
-	return _.omit(data, ['fnName', 'icon', 'name', 'btnIcon', 'textColor', 'isApply', 'iconPosition']);
-}
-</script>
-<style scoped lang="scss">
-:global(.bc-button > span) {
-	color: var(--text-color) !important;
-}
-:global(.bc-button.is-disabled > span) {
-	color: #a8abb2 !important;
-}
-</style>

package/src/components/business/bcForm/bcForm.vue

@@ -1,113 +0,0 @@
-<template>
-	<hs-form :model="data.data" v-bind="data.attrs">
-		<div class="form-wrap p-5 rounded-md mb-2" v-for="(form, keys) in data.form" :key="keys" :style="{ '--bg-color': form?.attrs?.bg }">
-			<!-- form 表单 -->
-			<div v-if="form.formItemType === 'form'">
-				<div class="title h-4 flex items-center relative mb-4 font-bold">{{ form.label }}</div>
-				<div
-					class="grid"
-					:style="{
-						'grid-template-columns': `repeat(${form.grid}, minmax(0, 1fr))`,
-						'column-gap': form.attrs.columnGap + 'px',
-						'row-gap': form.attrs.rowGap + 'px',
-					}"
-				>
-					<hs-form-item
-						v-for="(formItem, key) in getFormConfig(form)"
-						:label="formItem.label"
-						:key="key"
-						:style="{
-							'--form-item-lable-bg': formItem.layoutData.labelBg,
-							'--form-item-lable-text': formItem.layoutData.labelColor,
-							'grid-row': `span ${formItem.layoutData.rowSpan}/span ${formItem.layoutData.rowSpan}`,
-							'grid-column': `span ${formItem.layoutData.colSpan}/span ${formItem.layoutData.colSpan}`,
-						}"
-					>
-						<div class="flex items-center w-full" v-for="(i, k) in formItem.config" :key="k">
-							<slot v-if="i.baseData.isSlot" :name="i.baseData.prop"></slot>
-							<bc-btn v-else-if="i.baseData.el === 'hs-button'" :data="getBindComponentData(i)" />
-							<component v-else :is="getRender(i.baseData.el)" v-bind="getBindComponentData(i)" />
-						</div>
-					</hs-form-item>
-				</div>
-			</div>
-			<!-- 自定义插槽 -->
-			<div v-if="form.formItemType === 'slot'">
-				<div class="title h-4 flex items-center relative mb-4 font-bold">{{ form.label }}</div>
-				<slot :name="getSlotConfig(form).name" v-bind="getBindData(form)"></slot>
-			</div>
-			<!-- 自定义组件 -->
-			<div v-if="form.formItemType === 'component'">
-				<div class="title h-4 flex items-center relative mb-4 font-bold">{{ form.label }}</div>
-				<component :is="getComponentConfig(form).name" v-bind="getBindData(form)" />
-			</div>
-		</div>
-	</hs-form>
-</template>
-<script lang="ts" setup name="bcForm">
-import IFormData from '/@/types/form';
-import ICustomData from '/@/types/customData';
-import { getRender } from '/@parseTable';
-import _ from 'lodash';
-
-interface Props {
-	data: IFormData.Form;
-}
-
-const props = defineProps<Props>();
-
-function getFormConfig(form: IFormData.FormConfig) {
-	return form.config as IFormData.ConfigFormItem[];
-}
-function getSlotConfig(form: IFormData.FormConfig) {
-	return form.config as IFormData.ConfigSlotItem;
-}
-function getComponentConfig(form: IFormData.FormConfig) {
-	return form.config as IFormData.ConfigComponentItem;
-}
-function getBindData(form: IFormData.FormConfig) {
-	return {
-		...form,
-		data: props.data,
-	};
-}
-function getBindComponentData(data: ICustomData.FormItemConfigData) {
-	return {
-		...data.baseData,
-		...data.elData.attrs,
-		..._.omit(data.elData, ['attrs', 'rules']),
-	};
-}
-</script>
-<style scoped lang="scss">
-.title {
-	&::after {
-		content: '';
-		position: absolute;
-		left: -10px;
-		top: 0;
-		width: 5px;
-		bottom: 0;
-		background-color: #1890ff;
-	}
-}
-:deep(.el-date-editor) {
-	width: 100%;
-}
-.form-wrap {
-	background-color: var(--bg-color);
-	&:last-of-type {
-		margin-bottom: 0;
-	}
-}
-:deep(.el-form-item) {
-	margin-bottom: 0 !important;
-}
-:deep(.el-form-item__label) {
-	background-color: var(--form-item-lable-bg);
-	color: var(--form-item-lable-text);
-}
-:deep(.el-form-item__content) {
-	flex-wrap: nowrap !important;
-}
-</style>

package/src/components/business/bcForm/bcFormDrag.vue

@@ -1,104 +0,0 @@
-<template>
-	<hs-form v-bind="baseData" :model="formData">
-		<VueDraggable ref="dragRef" handle=".el-form-item__label" ghostClass="ghost" v-model="formItemList" :animation="150" class="bc-form bg-white p-4">
-			<hs-form-item v-for="item in formItemList" :key="item.id" v-bind="getLabel(item.data)">
-				<component
-					ref="componentRef"
-					class="pointer-events-none"
-					v-if="item.data.baseData.prop && !item.data.baseData.isSlot && item.data.baseData.el"
-					v-model="(formData as any)[item.data.baseData.prop]"
-					:is="item.data.baseData.el"
-					v-bind="_.omit(item.data.elData, 'rules')"
-				></component>
-				<slot v-if="item.data.baseData.isSlot" :name="item.data.baseData.prop"></slot>
-			</hs-form-item>
-		</VueDraggable>
-	</hs-form>
-</template>
-<script lang="ts" setup name="bcFormDrag">
-import { ref, computed } from 'vue';
-import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus';
-import ICustomData from '/@/types/customData';
-import _ from 'lodash';
-
-interface Props {
-	baseData: ICustomData.FormBaseConfig;
-	formData: ICustomData.Data;
-	formConfig: ICustomData.FormItemConfig[];
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits(['update:formConfig']);
-const dragRef = ref<UseDraggableReturn>();
-const componentRef = ref(null);
-
-const formItemList = computed({
-	get() {
-		return props.formConfig;
-	},
-	set(val) {
-		emit('update:formConfig', val);
-	},
-});
-
-function getLabel(data: ICustomData.FormItemConfigData) {
-	return {
-		..._.omit(data.baseData, ['el', 'isSlot', 'isAuth', 'isApply', 'isShow']),
-		...data.elData.rules,
-	};
-}
-
-defineExpose({
-	componentRef,
-});
-</script>
-<style scoped lang="scss">
-:deep(.el-form-item) {
-	box-shadow: inset 0 0 0px 1px #c8ebfb;
-	border-radius: 4px;
-}
-:deep(.el-form-item__label) {
-	font-weight: 700;
-	margin-left: 10px;
-	cursor: move;
-}
-:deep(.el-select__wrapper) {
-	padding: 0;
-}
-:deep(.el-select__wrapper),
-:deep(.el-input__wrapper) {
-	box-shadow: none;
-	background-color: transparent;
-}
-:deep(.el-date-editor) {
-	--el-date-editor-width: 100% !important;
-}
-:deep(.el-date-editor .el-range__icon) {
-	display: none;
-}
-:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
-	box-shadow: none;
-}
-:deep(.el-select__suffix) {
-	background-color: #f5f5f5;
-	justify-content: center;
-	margin-right: 1px;
-}
-:deep(.el-form-item--small .el-select__suffix) {
-	padding: 4px;
-}
-:deep(.el-form-item--default .el-select__suffix) {
-	padding: 7px;
-}
-:deep(.el-select__caret) {
-	color: #2f2f2f;
-}
-:deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before),
-:deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before) {
-	margin-right: 0;
-}
-.ghost {
-	opacity: 0.5;
-	background: #c8ebfb;
-}
-</style>

package/src/components/business/bcForm/bcFormSearch.vue

@@ -1,154 +0,0 @@
-<template>
-	<div ref="wrapRef">
-		<div class="bc-form__wrapper px-4 pt-4 bg-white flex">
-			<hs-form v-bind="baseData" :model="formData" class="bc-form">
-				<hs-form-item v-for="item in formItemList" :key="item.id" v-bind="getLabel(item.data)">
-					<component
-						ref="componentRef"
-						v-if="item.data.baseData.prop && !item.data.baseData.isSlot && item.data.baseData.el"
-						v-model="(formData as any)[item.data.baseData.prop]"
-						:is="item.data.baseData.el"
-						v-bind="_.omit(item.data.elData, 'rules')"
-					></component>
-					<slot v-if="item.data.baseData.isSlot" :name="`hs_query_${item.data.baseData.prop}`"></slot>
-				</hs-form-item>
-			</hs-form>
-			<div class="bc-form__btn flex items-start justify-end mt-1 mx-2">
-				<hs-button v-if="formItemList.length !== formConfig.length" size="small" type="primary" :icon="ArrowUpBold" circle @click="toggleShowAll" />
-				<hs-button
-					v-if="formItemList.length === formConfig.length && showAll"
-					size="small"
-					type="primary"
-					:icon="ArrowDownBold"
-					circle
-					@click="toggleShowAll"
-				/>
-			</div>
-		</div>
-		<div class="h-4"></div>
-	</div>
-</template>
-<script lang="ts" setup name="bcFormSearch">
-import { ref, computed, nextTick } from 'vue';
-import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';
-import { useElementSize } from '@vueuse/core';
-import ICustomData from '/@/types/customData';
-import _ from 'lodash';
-
-interface Props {
-	baseData: ICustomData.FormBaseConfig;
-	formConfig: Array<ICustomData.FormItemConfig>;
-	formData: ICustomData.Data;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits(['heightChange']);
-const wrapRef = ref(null);
-const componentRef = ref(null);
-const showAll = ref(false);
-const { width } = useElementSize(wrapRef);
-const xl = 1280;
-const lg = 1024;
-const md = 768;
-const sm = 640;
-
-const formItemList = computed(() => {
-	if (showAll.value) return props.formConfig;
-	if (width.value > xl) {
-		return props.formConfig.slice(0, 5);
-	}
-	if (width.value > lg && width.value <= xl) {
-		return props.formConfig.slice(0, 4);
-	}
-	if (width.value > md && width.value <= lg) {
-		return props.formConfig.slice(0, 3);
-	}
-	if (width.value > sm && width.value <= md) {
-		return props.formConfig.slice(0, 2);
-	}
-	return props.formConfig.slice(0, 1);
-});
-
-function getLabel(data: ICustomData.FormItemConfigData) {
-	return {
-		..._.omit(data.baseData, ['el', 'isSlot', 'isAuth', 'isApply', 'isShow']),
-		...data.elData.rules,
-	};
-}
-
-function toggleShowAll() {
-	emit('heightChange');
-	nextTick(() => {
-		showAll.value = !showAll.value;
-	});
-}
-
-function getComponents() {
-	return componentRef.value || [];
-}
-
-defineExpose({
-	componentRef,
-	getComponents,
-});
-</script>
-<style scoped lang="scss">
-@media (max-width: 640px) {
-	.bc-form__wrapper {
-		flex-direction: column;
-	}
-}
-:deep(.el-form-item) {
-	box-shadow: inset 0 0 0px 1px #cfd0d0;
-	border-radius: 4px;
-}
-:deep(.el-form-item__label) {
-	font-weight: 700;
-	margin-left: 10px;
-}
-:deep(.el-select__wrapper) {
-	padding: 0;
-}
-:deep(.el-select__wrapper),
-:deep(.el-input__wrapper),
-:deep(.el-date-editor.el-input__wrapper:hover) {
-	box-shadow: none;
-	background-color: transparent;
-}
-:deep(.el-date-editor) {
-	--el-date-editor-width: 100% !important;
-}
-
-:deep(.el-date-editor .el-range__icon) {
-	display: none;
-}
-:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
-	box-shadow: none;
-}
-:deep(.el-select__suffix) {
-	background-color: #f5f5f5;
-	justify-content: center;
-	margin-right: 1px;
-}
-:deep(.el-form-item--small .el-select__suffix) {
-	padding: 4px;
-}
-:deep(.el-form-item--default .el-select__suffix) {
-	padding: 7px;
-}
-:deep(.el-select__caret) {
-	color: #2f2f2f;
-}
-:deep(.el-form-item.is-error .el-input__wrapper),
-:deep(.el-form-item.is-error .el-select__wrapper),
-:deep(.el-form-item.is-error .el-textarea__inner) {
-	box-shadow: none;
-}
-:deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before),
-:deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before) {
-	margin-right: 0;
-}
-:deep(.el-form-item.is-error) {
-	box-shadow: 0 0 0 1px var(--el-color-danger) inset;
-}
-</style>

package/src/components/business/bcForm/components/sortForm/index.ts

@@ -1,18 +0,0 @@
-import { showPopup } from '/@/utils/showPopup';
-import SortForm from './sortForm.vue';
-
-/** 自定义列排序高级设置 */
-export function setSortPopup<T>(id: string): Promise<T> {
-	return new Promise((reslove) => {
-		showPopup(
-			SortForm,
-			{ id },
-			{
-				title: '高级设置',
-				success(params: T) {
-					reslove(params);
-				},
-			}
-		);
-	});
-}

package/src/components/business/bcForm/components/sortForm/sortForm.vue

@@ -1,92 +0,0 @@
-<template>
-	<div class="h-full flex flex-col">
-		<div class="flex-1 overflow-hidden border-bottom-1">
-			<div class="w-full h-full">
-				<ul class="head flex items-center list-none">
-					<li class="w-[50px] px-2">拖动</li>
-					<li class="flex-1 pl-6">列名称</li>
-					<li class="flex-1 px-2">显示状态</li>
-					<li class="flex-1 px-2">排序值</li>
-				</ul>
-				<VueDraggable
-					v-model="list"
-					ghostClass="ghost"
-					handle=".sort-target"
-					animation="150"
-					class="overflow-y-auto border-1"
-					style="height: calc(100% - 34px)"
-				>
-					<div v-for="(item, index) in list" :key="item.id" class="flex items-center w-full px-2 border-bottom-1">
-						<span class="sort-target w-[50px] cursor-move px-2">
-							<el-icon class="rotate-90" size="14"><MoreFilled /></el-icon>
-						</span>
-						<span class="flex-1 px-2"><hs-input v-model="item.data.baseData.prop" /></span>
-						<span class="flex-1 px-2"><hs-switch v-model="item.data.baseData.isShow" /></span>
-						<span class="flex-1 px-2">{{ index + 1 }}</span>
-					</div>
-				</VueDraggable>
-			</div>
-		</div>
-		<div class="footer h-12 mt-2 flex items-center justify-end">
-			<hs-button size="small" @click="$emit('success')">取消</hs-button>
-			<hs-button type="primary" size="small" @click="submit">保存</hs-button>
-		</div>
-	</div>
-</template>
-<script lang="ts" setup name="sortColumn">
-import { MoreFilled } from '@element-plus/icons-vue';
-import ICustomData from '/@/types/customData';
-import { ref } from 'vue';
-import { formStore } from '/@/utils/storage';
-import { VueDraggable } from 'vue-draggable-plus';
-
-interface Props {
-	id: string;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits(['success']);
-const list = ref<ICustomData.FormItemConfig[]>([]);
-
-getList(props.id);
-
-function getList(id: string) {
-	return formStore.get<ICustomData.FormTable>(id).then((res) => {
-		list.value = res.form?.formConfig || [];
-	});
-}
-
-function submit() {
-	formStore.get<ICustomData.FormTable>(props.id).then((cache) => {
-		// 序列化掉代理数据，获取源数据
-		cache.form!.formConfig = JSON.parse(JSON.stringify([...list.value]));
-		formStore.set(props.id, cache).then(() => {
-			emit('success', cache);
-		});
-	});
-}
-</script>
-<style scoped lang="scss">
-.ghost {
-	opacity: 0.5;
-	background: #48c9b0;
-}
-:deep(.el-input__wrapper) {
-	box-shadow: none;
-	background-color: transparent;
-}
-:deep(.el-input__wrapper.is-focus) {
-	box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
-}
-ul {
-	&.head {
-		background-color: #f5f5f5;
-		border: 1px solid #f5f5f5;
-	}
-	li {
-		height: 34px;
-		display: flex;
-		align-items: center;
-	}
-}
-</style>