hs-admin-ui 1.0.0

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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,113 @@
+<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

@@ -0,0 +1,104 @@
+<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

@@ -0,0 +1,154 @@
+<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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,92 @@
+<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>