hs-admin-ui 1.0.8 → 1.0.9

package/src/views/system/formSetting/components/hsPageTree/src/hsPageTree.vue

@@ -1,30 +0,0 @@
-<template>
-	<!-- {{ menuData }} -->
-	<hs-tree :data="menuData" :props="defaultProps" highlight-current :show-checkbox="showCheckbox" @node-click="handleNodeClick" />
-	<el-button @click="demoMenu">使用模拟菜单</el-button>
-</template>
-
-<script lang="ts" setup>
-import { usePageTree } from '../usePageTree';
-type Menu = Record<'value' | 'label' | 'name', string>;
-const props = defineProps({
-	// 点击节点的时候是否只触发子节点
-	onlyChild: {
-		type: Boolean,
-		default: true,
-	},
-	// 是否显示复选框
-	showCheckbox: {
-		type: Boolean,
-		default: false,
-	},
-	menu: {
-		type: Array<Menu>,
-		default: () => [],
-	},
-});
-
-const emits = defineEmits(['change']);
-const { handleNodeClick, demoMenu, menuData, defaultProps } = usePageTree(emits, props);
-</script>
-../../usePageTree

package/src/views/system/formSetting/components/hsPageTree/usePageTree.ts

@@ -1,50 +0,0 @@
-// 树结构接口
-import { ref, watch } from 'vue';
-import { PageData } from './configData';
-import { ComponentAttr } from '/@/types';
-import hsPageTree from './src/hsPageTree.vue';
-import IMenuType from '../../menuType';
-import _ from 'lodash';
-
-export function usePageTree(emits: (event: 'change', ...args: any[]) => void, props: ComponentAttr.Props<typeof hsPageTree>) {
-	/**
-	 * 节点点击回调
-	 * @param data
-	 */
-	const handleNodeClick = (data: IMenuType.Menu) => {
-		if (props.onlyChild) {
-			// 只处理最终子节点
-			if (!data.children || (data.children && data.children.length <= 0)) {
-				emits('change', data);
-			}
-		} else {
-			// 处理每个节点
-			emits('change', data);
-		}
-	};
-	// 树结构数据
-	// _.cloneDeep(props.menu)
-	const menuData = ref<IMenuType.Menu[]>([]);
-	watch(
-		() => props.menu,
-		(value) => {
-			menuData.value = _.cloneDeep(value);
-		},
-		{
-			deep: true,
-			immediate: true,
-		}
-	);
-	// 树结构绑定字段
-	const defaultProps = {
-		children: 'children',
-		label: 'label',
-	};
-	/**
-	 * 使用模拟菜单
-	 */
-	const demoMenu = () => {
-		menuData.value = PageData;
-	};
-	return { handleNodeClick, demoMenu, menuData, defaultProps };
-}

package/src/views/system/formSetting/components/hsSaveForm/saveFormConfig.ts

@@ -1,98 +0,0 @@
-import _ from 'lodash';
-// ============================= 新配置 start ==============================
-// 表单绑定值
-let formData = {
-	config_name: '',
-	config_unique_id: new Date().getTime().toString(), // new Date().getTime().toString(),
-};
-// 表单校验规则
-const formRule = {
-	config_name: [{ required: true, message: '请输入配置名称' }],
-	config_unique_id: [{ required: true, message: '请输入配置标识' }],
-};
-// 表单配置项
-const formConfig = [
-	{
-		prop: 'config_name',
-		label: '配置名称',
-		el: 'hs-input',
-		required: true,
-	},
-	{
-		prop: 'config_unique_id',
-		label: '配置标识',
-		el: 'hs-input',
-		show: false,
-		required: true,
-	},
-];
-const newConfig = {
-	formData,
-	formRule,
-	formConfig,
-};
-// ============================= 新配置 end ==============================
-// ============================= 选择配置 start ==============================
-// 表单绑定值
-let selectFormData = {
-	name: '',
-	config_name: '',
-	config_unique_id: '', // new Date().getTime().toString(),
-};
-// 表单配置项
-const selectFormConfig = [
-	{
-		prop: 'name',
-		label: '配置',
-		el: 'hs-select',
-		cel: 'hs-option',
-		multiple: false,
-		clearable: false,
-		op: [
-			// { label: ' 配置1', value: 'left' },
-			// { label: '配置2', value: 'right' },
-			// { label: '配置3', value: 'top' },
-		],
-	},
-];
-
-const selectConfig = {
-	formData: selectFormData,
-	formRule: formRule,
-	formConfig: _.concat(selectFormConfig, formConfig),
-};
-const initData = {
-	config_unique_id: '', // 配置唯一标识
-	config_name: '', // 配置名称
-	BaseForm: {
-		labelWidth: '120', // 表单域标签的宽度
-		labelPosition: 'left', // 表单域标签的位置
-		size: 'small', // 表单内组件的尺寸
-		labelSuffix: '', // 表单域标签的后缀
-		requireAsteriskPosition: 'left', // 必填字段标签位置
-		statusIcon: false, // 是否在输入框中显示校验结果反馈图标
-		validateOnRuleChange: true, // 是否在规则改变的时候立即触发校验
-		scrollToError: false, // 是否在输入的时候滚动到错误的地方
-	},
-	forms: [
-		{
-			id: 'form_1',
-			base: { label: '表单配置名称', fieldID: '', grid: 3 },
-			form: {
-				baseData: { rowGap: 0, columnGap: 0 },
-				formConfig: [],
-				formData: [],
-			},
-			component: {
-				baseData: {},
-			},
-			slot: {
-				baseData: {},
-			},
-			formItemType: 'form',
-		},
-	],
-};
-// ============================= 选择配置 end ==============================
-
-export { newConfig, selectConfig, initData };

package/src/views/system/formSetting/components/hsSaveForm/src/saveForm.vue

@@ -1,52 +0,0 @@
-<template>
-	<div class="flex justify-around items-center">
-		<component
-			class="basis-3/4"
-			ref="saveFormRef"
-			:parentConfig="parentConfig"
-			:is="'bc-form-config'"
-			:data="formConfig.formData"
-			:config="formConfig.formConfig"
-			:rules="formConfig.formRule"
-			:watchConfig="true"
-			@change="changeConfig"
-		></component>
-
-		<div class="basis-1/4 flex justify-end">
-			<hs-button v-if="!isEdit || (isEdit && formConfig.formData.config_name)" @click="saveConfig" type="primary">保存配置</hs-button>
-			<hs-button v-if="isEdit" @click="addConfig" type="primary">新增配置</hs-button>
-			<hs-button v-if="isEdit && formConfig.formData.name" @click="deleteConfig">删除配置</hs-button>
-			<hs-button v-if="!isEdit" @click="cancel">取消</hs-button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { IFormTable } from '/@/types';
-import { useSaveForm } from './../useSaveForm';
-
-defineOptions({
-	inheritAttrs: false,
-});
-const props = defineProps({
-	configs: {
-		type: Array<IFormTable.FormConfig>,
-		default: [],
-	},
-});
-
-const saveFormRef = ref();
-
-const emits = defineEmits(['save', 'change', 'delete']);
-
-const { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initConfig, addConfig, cancel, deleteConfig } = useSaveForm(
-	emits,
-	saveFormRef,
-	props
-);
-// 暴露内部方法
-defineExpose({
-	initConfig,
-});
-</script>

package/src/views/system/formSetting/components/hsSaveForm/useSaveForm.ts

@@ -1,190 +0,0 @@
-import { Ref, ref } from 'vue';
-import _ from 'lodash';
-import { IFormTable, ComponentAttr } from '/@/types';
-import { newConfig, selectConfig } from './saveFormConfig';
-import saveForm from './src/saveForm.vue';
-interface BcFormRef {
-	getSubmitData: () => boolean;
-}
-
-export function useSaveForm(
-	emits: (event: 'save' | 'change' | 'delete', ...args: any[]) => void,
-	saveFormRef: Ref<BcFormRef>,
-	props: ComponentAttr.Props<typeof saveForm>
-) {
-	const parentConfig = ref({
-		showColon: true,
-		xs: 8,
-		sm: 8,
-		md: 8,
-		lg: 8,
-		xl: 8,
-	});
-	// 区分当前是新增还是修改
-	let isEdit = ref(true);
-	// 配置表单
-	let formConfig = ref(
-		_.assign(_.cloneDeep(selectConfig), {
-			formData: {
-				name: '',
-				config_name: '',
-				config_unique_id: new Date().getTime().toString(),
-			},
-		})
-	);
-	// formConfig.value.formData.config_unique_id = new Date().getTime().toString();
-	/**
-	 * 切换配置方法
-	 * @param value
-	 * @param type
-	 */
-	const changeConfig = (value: string, type: string) => {
-		// 初始化表单配置
-		if (type == 'name') {
-			let config = _.cloneDeep(props.configs).find((item: IFormTable.FormTable) => item.config_unique_id == value);
-			formConfig.value.formData = _.assign(formConfig.value.formData, {
-				config_name: config.config_name,
-				config_unique_id: config.config_unique_id,
-				id: config.id,
-				update_time: config.update_time,
-			});
-			// 编辑类型 改为true
-			isEdit.value = true;
-			emits('change', JSON.parse(config['field_json']));
-		}
-	};
-	/**
-	 * 初始化配置
-	 * @param configList
-	 */
-	const initConfig = (configList: any) => {
-		// 更新表单数据
-		let tempFormConfig = _.cloneDeep(selectConfig);
-		tempFormConfig.formData.name = (configList[0] && configList[0].config_name) || '';
-		tempFormConfig.formData.config_name = (configList[0] && configList[0].config_name) || '';
-		tempFormConfig.formData.config_unique_id = (configList[0] && configList[0].config_unique_id) || new Date().getTime().toString();
-		tempFormConfig.formData.id = (configList[0] && configList[0].id) || '';
-		tempFormConfig.formData.update_time = (configList[0] && configList[0].update_time) || '';
-		// 更新表单配置
-		if (configList.length > 0) {
-			let list = configList.map((item: any) => {
-				return { label: item.config_name, value: item.config_unique_id, id: item.id, update_time: item.update_time };
-			});
-			let item = _.assign(tempFormConfig.formConfig[0], {
-				op: list,
-			});
-			tempFormConfig.formConfig.splice(0, 1, item);
-		}
-		formConfig.value = tempFormConfig;
-		// 编辑类型 改为true
-		isEdit.value = true;
-		// 初始化表格配置
-		let initConfig = {
-			config_unique_id: '', // 配置唯一标识
-			config_name: '', // 配置名称
-			BaseForm: {
-				labelWidth: '120', // 表单域标签的宽度
-				labelPosition: 'left', // 表单域标签的位置
-				size: 'small', // 表单内组件的尺寸
-				labelSuffix: '', // 表单域标签的后缀
-				requireAsteriskPosition: 'left', // 必填字段标签位置
-				statusIcon: false, // 是否在输入框中显示校验结果反馈图标
-				validateOnRuleChange: true, // 是否在规则改变的时候立即触发校验
-				scrollToError: false, // 是否在输入的时候滚动到错误的地方
-			},
-			btns: [],
-			forms: [
-				{
-					id: 'form_1',
-					base: { label: '表单配置名称', fieldID: '', grid: 3 },
-					form: {
-						baseData: { rowGap: 0, columnGap: 0 },
-						formConfig: [],
-						formData: [],
-					},
-					component: {
-						baseData: {},
-					},
-					slot: {
-						baseData: {},
-					},
-					formItemType: 'form',
-				},
-			],
-		};
-		// 初始化表单配置
-		emits('change', configList.length ? JSON.parse(configList[0]['field_json']) : initConfig);
-	};
-
-	/**
-	 * 保存配置
-	 */
-	const saveConfig = async () => {
-		let flag = await saveFormRef.value.getSubmitData();
-		if (flag) {
-			emits('save', formConfig.value.formData);
-		}
-	};
-	/**
-	 * 新增配置
-	 */
-	const addConfig = () => {
-		// 将编辑类型改为false
-		isEdit.value = false;
-
-		// 更新保存配置
-		formConfig.value = _.cloneDeep(newConfig);
-		formConfig.value.formData.config_unique_id = new Date().getTime().toString();
-
-		// 初始化表单配置
-		let initConfig = {
-			config_unique_id: '', // 配置唯一标识
-			config_name: '', // 配置名称
-			BaseForm: {
-				labelWidth: '120', // 表单域标签的宽度
-				labelPosition: 'left', // 表单域标签的位置
-				size: 'small', // 表单内组件的尺寸
-				labelSuffix: '', // 表单域标签的后缀
-				requireAsteriskPosition: 'left', // 必填字段标签位置
-				statusIcon: false, // 是否在输入框中显示校验结果反馈图标
-				validateOnRuleChange: true, // 是否在规则改变的时候立即触发校验
-				scrollToError: false, // 是否在输入的时候滚动到错误的地方
-			},
-			btns: [],
-			forms: [
-				{
-					id: 'form_1',
-					base: { label: '表单配置名称', fieldID: '', grid: 3 },
-					form: {
-						baseData: { rowGap: 0, columnGap: 0 },
-						formConfig: [],
-						formData: [],
-					},
-					component: {
-						baseData: {},
-					},
-					slot: {
-						baseData: {},
-					},
-					formItemType: 'form',
-				},
-			],
-		};
-		// 初始化表单配置
-		emits('change', initConfig);
-	};
-	/**
-	 * 取消新增配置
-	 */
-	const cancel = () => {
-		// 初始化配置
-		initConfig(_.cloneDeep(props.configs));
-		isEdit.value = true;
-		return;
-	};
-	const deleteConfig = () => {
-		emits('delete', formConfig.value.formData.id);
-	};
-
-	return { parentConfig, formConfig, isEdit, saveConfig, changeConfig, initConfig, addConfig, cancel, deleteConfig };
-}