hs-admin-ui 1.0.0 → 1.0.2

package/src/components/config/baseForm.vue

@@ -1,175 +0,0 @@
-<template>
-	<div class="h-full" :class="{ 'overflow-y-auto': !isRecursive }">
-		<hs-form :model="formData" label-width="146px" label-position="right" ref="formRef">
-			<hs-row :gutter="0" justify="start" class="hs-row">
-				<hs-col
-					v-for="(item, index) in formConfig"
-					:key="index"
-					:xs="!isRecursive ? 24 : xs"
-					:sm="!isRecursive ? 24 : sm"
-					:md="!isRecursive ? 24 : md"
-					:lg="!isRecursive ? 24 : lg"
-					:xl="!isRecursive ? 24 : xl"
-					class="mb-[20px]"
-				>
-					<hs-form-item v-bind="item" v-if="item['el'] != 'title'">
-						<template #label>
-							<span class="text-[#606266]">&nbsp; {{ item['label'] }} &nbsp;</span>
-							<el-tooltip class="box-item" effect="dark" :content="item['tooltip'] || item['label']" placement="top">
-								<div>
-									<el-icon><ele-Warning /></el-icon>
-								</div>
-							</el-tooltip>
-						</template>
-						<component
-							:is="item['el']"
-							v-model="formData[item.prop]"
-							:clearable="item.clearable != false"
-							placeholder="请输入"
-							v-bind="item['attrs'] || {}"
-						>
-							<component
-								v-if="item['op']"
-								:is="item['cel']"
-								v-for="(value, idx) in item['op'] || []"
-								:key="idx"
-								:label="value['label']"
-								:value="value['value']"
-							></component>
-						</component>
-					</hs-form-item>
-					<div v-else>
-						<div class="mb-[10px]">
-							<hs-alert :title="item['label']" type="info" :closable="false" />
-						</div>
-						<base-form
-							:data="formData[item.prop]"
-							:config="item['children']"
-							:isRecursive="true"
-							v-if="item['children']"
-							:xs="xs"
-							:sm="sm"
-							:md="md"
-							:lg="lg"
-							:xl="xl"
-						></base-form>
-					</div>
-				</hs-col>
-			</hs-row>
-		</hs-form>
-		<footer class="flex justify-center align-middle mt-[10px]" v-if="!isRecursive && !isVModel">
-			<hs-button type="primary" @click="submitForm">保存</hs-button>
-		</footer>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { formConfigItemType } from '/@/components/config/type/formType';
-import type { FormInstance } from 'element-plus';
-import _ from 'lodash';
-const props = defineProps({
-	data: {
-		// 表单数据
-		type: Object,
-		default: () => {},
-	},
-	config: {
-		// 表单配置项
-		type: Array<formConfigItemType>,
-		default: () => [],
-	},
-	isRecursive: {
-		// 是否为递归
-		type: Boolean,
-		default: false,
-	},
-	isVModel: {
-		// 是否为v-model
-		type: Boolean,
-		default: false,
-	},
-	xs: {
-		type: Number,
-		default: 24,
-	},
-	sm: {
-		type: Number,
-		default: 24,
-	},
-	md: {
-		type: Number,
-		default: 24,
-	},
-	lg: {
-		type: Number,
-		default: 24,
-	},
-	xl: {
-		type: Number,
-		default: 24,
-	},
-});
-// 表单实例
-const formRef = ref<FormInstance>();
-// 保留原始数据
-const oldData = ref(props.data);
-// 表单数据
-// 克隆 props.data 用于表单数据
-let formData = ref(props.isRecursive || props.isVModel ? props.data : _.cloneDeep(props.data));
-// 配置项
-let formConfig = ref(props.config);
-/**
- * 获取表单数据
- */
-const submitForm = () => {
-	console.log('submitForm');
-	if (!formRef.value) return;
-	formRef.value.validate((valid) => {
-		if (valid) {
-			console.log('submit!', formData.value);
-			oldData.value = Object.assign(oldData.value, formData.value);
-		} else {
-			console.log('error submit!', formData.value);
-			return false;
-		}
-	});
-};
-/**
- * 校验表单
- */
-const validForm = () => {
-	return new Promise((resolve) => {
-		if (!formRef.value) {
-			resolve(false);
-			return;
-		}
-		formRef.value.validate((valid: 'undefined' | boolean) => {
-			if (valid) {
-				resolve(true);
-			} else {
-				resolve(false);
-			}
-		});
-	});
-};
-
-defineExpose({ validForm });
-</script>
-
-<style lang="scss" scoped>
-.hs-row {
-	:deep(.el-form-item) {
-		border: 1px solid #e7eaf2;
-		background-color: #f2f5f9;
-	}
-	:deep(.el-form-item__content) {
-		border-left: 1px solid #e7eaf2;
-		background-color: #fff;
-		.el-switch {
-			margin-left: 10px;
-		}
-	}
-}
-//
-</style>

package/src/components/config/buttonAttrConfig/buttonAttrConfig.vue

@@ -1,26 +0,0 @@
-<template>
-	<div class="p-[10px] h-full">
-		<base-form v-model:data="data" :config="buttonAttrConfig" :isVModel="isVModel"></base-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="buttonAttrConfig">
-import baseForm from '../baseForm.vue';
-import { ref } from 'vue';
-import { buttonAttrConfig, buttonAttrConfigMap } from './config';
-import _ from 'lodash';
-const props = defineProps({
-	data: {
-		type: Object,
-		default: () => {},
-	},
-	isVModel: {
-		type: Boolean,
-		default: false,
-	},
-});
-// lodash判断对象是否为空
-const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, _.cloneDeep(buttonAttrConfigMap)) : props.data);
-</script>
-
-<style scoped lang="scss"></style>

package/src/components/config/buttonAttrConfig/config.ts

@@ -1,261 +0,0 @@
-export const buttonAttrConfig = [
-	{
-		prop: 'attrs',
-		label: '按钮属性',
-		tooltip: '按钮属性',
-		type: 'object',
-		el: 'title',
-		children: [
-			{
-				prop: 'operate',
-				label: '操作',
-				tooltip: '操作',
-				type: 'enum',
-				el: 'hs-select',
-				op: [
-					{ label: 'query', value: 'query' },
-					{ label: 'reset', value: 'reset' },
-					{ label: 'add', value: 'add' },
-					{ label: 'edit', value: 'edit' },
-					{ label: 'delete', value: 'delete' },
-					{ label: 'export', value: 'export' },
-					{ label: 'import', value: 'import' },
-				],
-				cel: 'hs-option',
-				attrs: {
-					filterable: true,
-					'allow-create': true,
-					'default-first-option': true,
-				},
-			},
-			{
-				prop: 'type',
-				label: '类型',
-				tooltip: '类型',
-				type: 'enum',
-				el: 'hs-select',
-				op: [
-					{ label: 'primary', value: 'primary' },
-					{ label: 'success', value: 'success' },
-					{ label: 'warning', value: 'warning' },
-					{ label: 'danger', value: 'danger' },
-					{ label: 'info', value: 'info' },
-				],
-				cel: 'hs-option',
-			},
-			{
-				prop: 'name',
-				label: '按钮文本内容',
-				tooltip: '按钮文本内容',
-				type: 'string',
-				el: 'hs-input',
-			},
-			{
-				prop: 'disabled',
-				label: '按钮是否禁用',
-				tooltip: '按钮是否为禁用状态',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'size',
-				label: '尺寸',
-				tooltip: '尺寸',
-				type: 'enum',
-				el: 'hs-select',
-				op: [
-					{ label: 'large', value: 'large' },
-					{ label: 'default', value: 'default' },
-					{ label: 'small', value: 'small' },
-				],
-				cel: 'hs-option',
-			},
-			{
-				prop: 'plain',
-				label: '是否为朴素按钮',
-				tooltip: '是否为朴素按钮',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'text',
-				label: '是否为文字按钮',
-				tooltip: '是否为文字按钮',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'bg',
-				label: '是否显示背景色',
-				tooltip: '是否显示文字按钮背景颜色',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'color',
-				label: '自定义颜色',
-				el: 'hs-color-picker',
-			},
-			{
-				prop: 'textColor',
-				label: '按钮文本色',
-				el: 'hs-color-picker',
-			},
-			{
-				prop: 'round',
-				label: '圆角按钮',
-				tooltip: '是否为圆角按钮',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'circle',
-				label: '圆形按钮',
-				tooltip: '是否为圆形按钮',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'fnName',
-				label: '方法名称',
-				el: 'hs-input',
-				attrs: {
-					type: 'textarea',
-				},
-			},
-			{
-				prop: 'loading',
-				label: '是否为加载中',
-				tooltip: '是否为加载中状态',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'loading-icon',
-				label: '加载中图标',
-				tooltip: '自定义加载中状态图标组件',
-				type: 'string / Component',
-				el: 'hs-input',
-			},
-			{
-				prop: 'icon',
-				label: '图标组件',
-				tooltip: '图标组件',
-				type: 'string / Component',
-				el: 'hs-input',
-			},
-			{
-				prop: 'link',
-				label: '链接按钮',
-				tooltip: '是否为链接按钮',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'autofocus',
-				label: 'autofocus',
-				tooltip: '原生 autofocus 属性',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'native-type',
-				label: '原生 type 属性',
-				tooltip: '原生 type 属性',
-				type: 'enum',
-				el: 'hs-select',
-				op: [
-					{ label: 'button', value: 'button' },
-					{ label: 'submit', value: 'submit' },
-					{ label: 'reset', value: 'reset' },
-				],
-				cel: 'hs-option',
-			},
-			{
-				prop: 'auto-insert-space',
-				label: '自动插入空格',
-				tooltip: '自动在两个中文字符之间插入空格',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'dark',
-				label: 'dark 模式',
-				tooltip: 'dark 模式, 意味着自动设置 color 为 dark 模式的颜色',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'tag',
-				label: '自定义元素标签',
-				tooltip: '自定义元素标签',
-				type: 'string / Component',
-				el: 'hs-input',
-			},
-		],
-	},
-	{
-		prop: 'groupAttrs',
-		label: 'buttonGroupAttrs',
-		tooltip: 'buttonGroupAttrs',
-		type: 'object',
-		el: 'title',
-		children: [
-			{
-				prop: 'isGroupEnabled',
-				label: '是否启用分组',
-				tooltip: '是否启用分组',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'size',
-				label: '按钮组内按钮大小',
-				tooltip: '用于控制该按钮组内按钮的大小',
-				type: 'enum',
-				el: 'hs-select',
-				op: [
-					{ label: 'large', value: 'large' },
-					{ label: 'default', value: 'default' },
-					{ label: 'small', value: 'small' },
-				],
-				cel: 'hs-option',
-			},
-			{
-				prop: 'type',
-				label: '按钮组内按钮类型',
-				tooltip: '用于控制该按钮组内按钮的类型',
-				type: 'enum',
-				el: 'hs-select',
-				op: [
-					{ label: 'primary', value: 'primary' },
-					{ label: 'success', value: 'success' },
-					{ label: 'warning', value: 'warning' },
-					{ label: 'danger', value: 'danger' },
-					{ label: 'info', value: 'info' },
-				],
-				cel: 'hs-option',
-			},
-		],
-	},
-];
-
-export const buttonAttrConfigMap = {
-	// 默认配置项
-	attrs: {
-		size: 'small',
-		plain: false, // 是否为朴素按钮
-		text: false, // 是否为文字按钮
-		bg: false, // 是否显示背景色
-		link: false, // 是否为链接按钮
-		round: false, // 是否为圆角按钮
-		circle: false, // 是否为圆形按钮
-		loading: false, // 是否为加载中状态
-		'loading-icon': 'Loading', // 自定义加载中状态图标组件
-		autofocus: false, // 原生 autofocus 属性
-		'native-type': 'button', // 原生 type 属性
-		dark: false, // dark 模式, 意味着自动设置 color 为 dark 模式的颜色
-		tag: 'button', // 自定义元素标签
-	},
-	groupAttrs: {},
-};

package/src/components/config/cascaderAttrConfig/cascaderAttrConfig.vue

@@ -1,26 +0,0 @@
-<template>
-	<div class="p-[10px] h-full">
-		<base-form v-model:data="data" :config="cascaderAttrConfig" :isVModel="isVModel"></base-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="cascaderAttrConfig">
-import baseForm from '../baseForm.vue';
-import { ref } from 'vue';
-import { cascaderAttrConfig, cascaderAttrConfigMap } from './config';
-import _ from 'lodash';
-const props = defineProps({
-	data: {
-		type: Object,
-		default: () => {},
-	},
-	isVModel: {
-		type: Boolean,
-		default: false,
-	},
-});
-// lodash判断对象是否为空
-const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, _.cloneDeep(cascaderAttrConfigMap)) : props.data);
-</script>
-
-<style scoped lang="scss"></style>