hs-admin-ui 1.0.5 → 1.0.8

package/src/views/test/table/formate.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const fs = require('fs');
+const _ = require('lodash');
+
+// 读取本地json文件
+fs.readFile(path.resolve(__dirname, './data.json'), 'utf-8', function (err, data) {
+	if (err) return;
+	const data1 = JSON.parse(data);
+	const data2 = setPropertyData(data1);
+	// 写入本地json文件
+	fs.writeFile(path.resolve(__dirname, './data.json'), JSON.stringify(data2, null, 2), 'utf-8', function (err) {
+		if (err) return;
+		console.log('写入成功');
+	});
+});
+
+function setPropertyData(params) {
+	const string = /string=/;
+	function setProperty(property) {
+		if (property.editRender) {
+			if (property.editRender?.enabled) {
+				delete property.cellRender;
+			} else if (property.editRender) {
+				delete property.editRender;
+			}
+		}
+		for (let i in property) {
+			if (_.isObject(property[i]) && _.isEmpty(property[i])) {
+				delete property[i];
+			}
+			if (string.test(property[i])) {
+				if (property[i].split('=')[1]) {
+					property[i] = new Function('return ' + property[i].split('=')[1])();
+				} else {
+					property[i] = [];
+				}
+			}
+			if (_.isString(property[i]) && property[i].trim() === '' && !['btnIcon'].includes(i)) {
+				delete property[i];
+			}
+			if (_.isObject(property[i]) && !_.isEmpty(property[i])) {
+				setProperty(property[i]);
+			}
+		}
+	}
+	setProperty(params);
+
+	return params;
+}

package/src/views/test/table/index.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="system-menu-container layout-padding">
+		<bc-form-table :data="formTableData">
+			<!-- 编辑 -->
+			<template #edit="{ row, column }">
+				<hs-input type="text" size="default" v-model="row[column.field]" clearable />
+			</template>
+
+			<!-- 筛选 -->
+			<template #filter="{ $panel, column }">
+				<hs-input
+					type="number"
+					size="small"
+					v-for="(option, index) in column.filters"
+					:key="index"
+					v-model="option.data"
+					@input="$panel.changeOption($event, !!option.data, option)"
+				/>
+			</template>
+
+			<!-- 表体自定义插槽 -->
+			<template #field2="{ row, column }">
+				<hs-button size="small">表体自定义插槽 - {{ row[column.field] }}</hs-button>
+			</template>
+
+			<!-- 表体自定义插槽 -->
+			<template #btns="{ row, column }">
+				<hs-button type="primary" size="small">按钮1</hs-button>
+			</template>
+		</bc-form-table>
+	</div>
+</template>
+
+<script setup lang="ts" name="tableComponent">
+import { ref, onMounted } from 'vue';
+import { ICustomData } from '/@/types';
+import { getLoadData } from '/@parseTable';
+import data from './data.json';
+
+const formTableData = ref<ICustomData.FormTable>();
+
+// 页面加载时
+onMounted(async () => {
+	formTableData.value = await getLoadData(data);
+});
+</script>
+<style scoped lang="scss">
+.system-menu-container {
+	.system-menu-padding {
+		padding: 15px;
+	}
+}
+</style>

package/src/views/test/test/components/hsBtn/src/hsAttrBtn.vue

@@ -0,0 +1,58 @@
+<template>
+	<div class="bg-blue-200 h-full flex flex-col">
+		<div style="height: calc(100% -50px)" class="overflow-y-auto flex-1">
+			<component :is="hsExpand" v-model="visible" :expandConfig="{ subTitle: '按钮项代码' }"></component>
+			<div v-if="visible">
+				{{ btnItemConfig }}
+			</div>
+			<template v-if="(btnItemConfig.config.list || []).length > 0">
+				<component :is="hsExpand" v-model="btnItemConfig.config.visible" :expandConfig="btnItemConfig.config.title"></component>
+				<component
+					ref="baseConfigRef"
+					v-show="btnItemConfig.config.visible"
+					:parentConfig="parentConfig"
+					:is="'bc-form-config'"
+					:data="btnItemConfig.data"
+					:config="btnItemConfig.config.list"
+					:rules="btnBaseRule"
+				>
+					<template #name>
+						<hs-autocomplete
+							v-model="btnItemConfig.data.name"
+							clearable
+							class="inline-input w-50"
+							placeholder="请输入"
+							ref="hsAutocompleteRef"
+							:fetch-suggestions="querySearchAsync"
+							@select="handleSelect"
+						></hs-autocomplete>
+					</template>
+				</component>
+			</template>
+		</div>
+
+		<div class="text-center grow-0" style="height: 50rpx">
+			<hs-button @click="saveData" type="primary">保存</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import { btnBaseRule } from '../../../default/baseBtnConfig';
+import { useHsAttrBtn } from './../useAttrBtn';
+
+const props = defineProps({
+	current: {
+		type: Object,
+		default: () => {},
+	},
+});
+const baseConfigRef = ref();
+
+const { parentConfig, visible, btnItemConfig, saveData, handleSelect, querySearchAsync } = useHsAttrBtn(props, baseConfigRef);
+</script>
+
+<style lang="scss" scoped></style>
+<!--  -->

package/src/views/test/test/components/hsBtn/src/hsBtnConfigList.vue

@@ -0,0 +1,45 @@
+<!-- 
+  desc: 表单配置项集合
+  author: lvling
+ -->
+<template>
+	<div>
+		<div class="flex flex-wrap">
+			<div class="p-2 relative" v-for="(item, index) in btnsModel" :key="index" @click="choseTagItem(item)">
+				<div class="border border-solid border-zinc-300 hover:bg-blue-200 p-2 rounded" :class="current['id'] == item['id'] ? 'bg-blue-200' : ''">
+					{{ item['data'] && item['data']['name'] }}
+				</div>
+				<div
+					v-if="current['id'] == item['id']"
+					@click.stop.prevent="deleteTagItem(item)"
+					style="position: absolute; top: 0px; right: 5px; cursor: pointer"
+				>
+					✖️
+				</div>
+			</div>
+			<div class="p-2">
+				<div @click="appendField" class="p-2 bg-pink-200 w-10 h-10 flex justify-center align-center rounded-full">+</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PropType, defineModel } from 'vue';
+import { useHsBtnListConfig } from './../useBtnConfigList';
+import { IFormTable } from '/@/types';
+
+const emit = defineEmits(['chose']);
+
+const btnsModel = defineModel<Array<IFormTable.BtnItem>>([]);
+const props = defineProps({
+	current: {
+		type: Object as PropType<Record<'id', string>>,
+		default: () => {},
+	},
+});
+
+const { appendField, deleteTagItem, choseTagItem } = useHsBtnListConfig(emit, props, btnsModel);
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/test/test/components/hsBtn/src/hsBtnPanel.vue

@@ -0,0 +1,51 @@
+<!-- 
+	desc: 配置按钮面板
+	author: 吕玲
+ -->
+<template>
+	<div class="mx-auto flex flex-row h-full">
+		<div class="flex-1 grow overflow-y-auto">
+			<!-- 按钮配置 -->
+			<hsExpand v-model="btnTitleConfig.visible" :expandConfig="btnTitleConfig"></hsExpand>
+			<component v-if="btnTitleConfig.visible" :is="hsBtnConfigList" v-model="btnsConfig" :current="currentItem" @chose="onChoseItem"></component>
+			<div v-if="btnTitleConfig.visible">{{ btnsConfig }}</div>
+		</div>
+		<div v-if="(btnsConfig || []).length > 0 && !!currentItem.id" class="flex-none basis-1/4 ml-4">
+			<component :is="hsAttrBtn" :current="currentItem"></component>
+		</div>
+	</div>
+</template>
+<script setup lang="ts" name="formPanel">
+import { defineModel, ref } from 'vue';
+import hsBtnConfigList from './hsBtnConfigList.vue';
+import hsAttrBtn from './hsAttrBtn.vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+// import { emptyFormItemData } from ''
+import { emptyBtnItemData } from './../../../default/baseBtnConfig';
+
+import _ from 'lodash';
+
+const btnsConfig = defineModel<Array<IFormTable.BtnItem>>();
+const btnTitleConfig = ref({
+	visible: true,
+	subTitle: '按钮配置',
+	class: 'font-bold my-3',
+	iconSize: 20,
+});
+// // 当前选中项配置
+let currentItem = ref(_.cloneDeep(emptyBtnItemData));
+// let oldId = ref<String>('');
+// // let newId = ref
+
+/**
+ * 选择某配置回调
+ */
+const onChoseItem = (item: IFormTable.BtnItem) => {
+	console.log('item', item);
+
+	currentItem.value = item;
+	// currentItem.value.elConfig.visible = true;
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/views/test/test/components/hsBtn/useAttrBtn.ts

@@ -0,0 +1,130 @@
+import { ref, Ref, watch } from 'vue';
+import { ComponentAttr } from '/@/types';
+import hsAttrBtn from './src/hsAttrBtn.vue';
+import _ from 'lodash';
+
+interface BcFormRef {
+	getSubmitData: () => boolean;
+}
+export function useHsAttrBtn(props: ComponentAttr.Props<typeof hsAttrBtn>, baseConfigRef: Ref<BcFormRef>) {
+	// 原始数据
+	let oldItem = ref(props.current);
+	// 当前项绑定数据
+	let btnItemConfig = ref(_.cloneDeep(props.current));
+	// let formData = ref(props.data);
+	/**
+	 * 监听当前项
+	 */
+	watch(
+		() => props.current,
+		(value) => {
+			// 解决切换不同表单项不及时更新数据问题
+			if (value.id != btnItemConfig.value.id) {
+				console.log('value', value);
+				// value.elConfig.visible = false;
+				oldItem.value = value;
+				btnItemConfig.value = _.cloneDeep(value);
+				// formData.value = props.data;
+			}
+		},
+		{ deep: true }
+	);
+
+	// 表单配置项
+	const parentConfig = ref({
+		labelWidth: 150,
+		span: 24,
+		style: 'padding:5px 10px',
+	});
+	// 控制表单项属性的展开关闭
+	const visible = ref(false);
+	// 基本配置属性实例
+	/**
+	 * 保存功能
+	 */
+	const saveData = async function () {
+		try {
+			// 校验表单项属性
+			let flag = await baseConfigRef.value.getSubmitData();
+			if (!flag) return;
+			// // 将默认值根据key值赋值给data中
+			// let oldKey = oldItem.value.data.baseData.prop; // 表单项【old】key值
+			// let newKey = btnItemConfig.value.data.baseData.prop; // 表单项【new】key值
+			// let value = btnItemConfig.value.data.elData?.attrs?.defaultValue || ''; // 表单项【new】value值
+			// // 如果修改过key后，修改后的key不能formData中的key重复
+			// if (_.has(formData.value, newKey) && newKey != oldKey) {
+			// 	return ElMessage.warning(`查询参数重复，请修改`);
+			// }
+			// // 如果修改了表单中字段的key值
+			// if (_.has(formData.value, oldKey) && oldKey != newKey) {
+			// 	delete formData.value[oldKey]; // 删除原来的key值
+			// }
+			// // 更新formData数据
+			// formData.value = Object.assign(formData.value, {
+			// 	[newKey]: value,
+			// });
+			// 保存表单配置
+			oldItem.value = Object.assign(oldItem.value, _.cloneDeep(btnItemConfig.value));
+		} catch (err) {
+			console.log('er', err);
+		}
+	};
+
+	// ======================================================================== 自动完成 start ================================================================
+	interface RestaurantItem {
+		value: string;
+		key: string;
+	}
+	interface LinkItem {
+		value: string;
+		key: string;
+	}
+	// 数据
+	const data = ref<LinkItem[]>([
+		{ value: '新增', key: 'add' },
+		{ value: '查询', key: 'search' },
+		{ value: '刷新', key: 'refresh' },
+		{ value: '充值', key: 'recharge' },
+		{ value: '重制', key: 'reset' },
+		{ value: '一键解析', key: 'analysis' },
+		{ value: '开始接诊', key: 'clinical_reception' },
+	]);
+	// 定时器实例
+	let timeout: ReturnType<typeof setTimeout>;
+	/**
+	 * 查询方法
+	 * @param queryString
+	 * @returns
+	 */
+	const createFilter = (queryString: string) => {
+		return (restaurant: LinkItem) => {
+			return restaurant.value.indexOf(queryString) === 0;
+		};
+	};
+	/**
+	 * 查询按钮函数回调
+	 * @param queryString
+	 * @param cb
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+		// 执行查询方法
+		const results = queryString ? data.value.filter(createFilter(queryString)) : data.value;
+		cb(results);
+		// 清除定时器
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {}, 1000 * Math.random());
+	};
+	/**
+	 * 切换选择按钮事件
+	 * @param item
+	 */
+	const handleSelect = (item: RestaurantItem) => {
+		console.debug('handleSelect', item);
+		btnItemConfig.value.data.name = item.value || '';
+		btnItemConfig.value.data.key = item.key || '';
+	};
+	// ======================================================================== 自动完成 end ==================================================================
+
+	return { parentConfig, visible, btnItemConfig, saveData, handleSelect, querySearchAsync };
+}

package/src/views/test/test/components/hsBtn/useBtnConfigList.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IFormTable } from '/@/types';
+import { Ref } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { btnItemConfig, emptyBtnItemData } from '../../default/baseBtnConfig';
+
+import _ from 'lodash';
+export function useHsBtnListConfig(
+	emit: (event: 'chose', ...args: any[]) => void,
+	props: any, // ComponentAttr.Props<typeof hsFormConfigList>,
+	btnsModel: Ref<IFormTable.BtnItem[]>
+) {
+	// ModelRef<Array<IFormTable.BtnItem>>
+	/**
+	 * 选择配置项
+	 * @param item
+	 */
+	const choseTagItem = (item: IFormTable.BtnItem) => {
+		// 获取操作项
+		let current = item.id == props.current?.id ? _.cloneDeep(emptyBtnItemData) : item;
+		console.log('current', current);
+
+		emit('chose', current);
+	};
+
+	/**
+	 * 添加字段
+	 * @returns
+	 */
+	const appendField = () => {
+		// 用时间戳设置唯一id
+		let defaultItemConfig: IFormTable.BtnItem = _.cloneDeep(btnItemConfig);
+		defaultItemConfig.id = new Date().getTime().toString();
+		console.log('btnsModel', btnsModel.value, defaultItemConfig);
+
+		// 追加字段配置项
+		btnsModel.value.push(defaultItemConfig);
+		// 获取新增的配置对象
+		let obj = btnsModel.value[btnsModel.value.length - 1]; // || _.cloneDeep(emptyBtnItemData);
+		// 设置默认选中
+		choseTagItem(obj);
+	};
+
+	/**
+	 * 删除配置
+	 * @param item
+	 */
+	const deleteTagItem = (item: IFormTable.BtnItem) => {
+		ElMessageBox.confirm(`确定删除“${item['data'] && item['data']['name']}”字段吗？`, '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		})
+			.then(() => {
+				// 获取被删除的配置所在id
+				_.remove(btnsModel.value || [], item);
+				// 更新当前选中配置
+				choseTagItem(item);
+				// 给出操作成功提示
+				ElMessage.success('删除成功');
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+
+	return {
+		// configList,
+		choseTagItem,
+		appendField,
+		deleteTagItem,
+	};
+}

package/src/views/test/test/components/hsExpand/src/hsExpand.vue

@@ -0,0 +1,27 @@
+<template>
+	<div @click="toggleExpand" class="flex align-center cursor-pointer hover:bg-red-200" :class="expandConfig.class" >
+		<svgIcon class="pt-1" :name="visible? 'ele-CaretBottom': 'ele-CaretRight'" :size="expandConfig.iconSize || 18"></svgIcon>
+		<div>{{expandConfig['subTitle']}}</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {defineModel} from 'vue';
+import {useExpand} from '../useExpand';
+defineProps({
+  expandConfig:{
+    type: Object,
+    default:()=>{
+      return {
+        iconSize: 18,
+        subTitle:'',
+        class:''
+      }
+    }
+  }
+})
+const visible = defineModel()
+const {toggleExpand } = useExpand(visible);
+</script>
+
+<style scoped></style>

package/src/views/test/test/components/hsExpand/useExpand.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useExpand (visible:any) {
+  const toggleExpand = ()=>{
+    visible.value = !visible.value;
+  }
+  return {
+    toggleExpand,
+  }
+}

package/src/views/test/test/components/hsForm/src/hsAttrForm.vue

@@ -0,0 +1,124 @@
+<template>
+	<div class="bg-blue-200 h-full flex flex-col">
+		<div style="height: calc(100% -50px)" class="overflow-y-auto flex-1">
+			<component :is="hsExpand" v-model="visible" :expandConfig="{ subTitle: '表单项代码' }"></component>
+			<div v-if="visible">
+				<!-- {{ formItemConfig?.data }} -->
+			</div>
+			<template v-if="formItemConfig?.baseConfig && (formItemConfig?.baseConfig.list || []).length > 0">
+				<el-tabs type="border-card" editable @edit="handleTabsEdit" class="w-full" v-model="editableTabsValue">
+					<el-tab-pane v-for="(item, index) in formItemConfig?.data.elementItem" :label="'子项' + (index + 1)" :key="index" :name="index">
+						<!-- 表单项属性 -->
+						<component :is="hsExpand" v-model="formItemConfig.baseConfig.visible" :expandConfig="formItemConfig.baseConfig.title"></component>
+						<component
+							ref="baseConfigRef"
+							v-show="formItemConfig.baseConfig.visible"
+							:parentConfig="parentConfig"
+							:is="'bc-form-config'"
+							:data="formItemConfig?.data.elementItem[index].baseData"
+							:config="index === 0 ? formItemConfig.baseConfig.list : formItemConfig.baseConfig2.list"
+							:rules="formBaseRule"
+							@change="(value: string, item: string) => onChange(value, item, index)"
+						/>
+						<template v-if="formItemConfig?.data.elementItem[index].baseData.el">
+							<!-- 元素项属性 -->
+							<component :is="hsExpand" v-model="formItemConfig.elConfig.visible" :expandConfig="formItemConfig.elConfig.title"></component>
+							<component
+								v-if="formItemConfig.elConfig.visible"
+								:data="formItemConfig?.data.elementItem[index].elData"
+								:is="elComName[index]"
+								ref="elRef"
+								isVModel
+							></component>
+						</template>
+					</el-tab-pane>
+				</el-tabs>
+				<!-- 表单项属性 -->
+				<!-- <component :is="hsExpand" v-model="formItemConfig.baseConfig.visible" :expandConfig="formItemConfig.baseConfig.title"></component>
+				<component
+					ref="baseConfigRef"
+					v-show="formItemConfig.baseConfig.visible"
+					:parentConfig="parentConfig"
+					:is="'bc-form-config'"
+					:data="formItemConfig?.data.elementItem[0].baseData"
+					:config="formItemConfig.baseConfig.list"
+					:rules="formBaseRule"
+					@change="(value: string, item: string) => onChange(value, item, 0)"
+				/> -->
+			</template>
+			<!-- <template v-if="formItemConfig?.data.elementItem[0].baseData.el"> -->
+			<!-- 元素项属性 -->
+			<!-- <component :is="hsExpand" v-model="formItemConfig.elConfig.visible" :expandConfig="formItemConfig.elConfig.title"></component>
+				<component
+					v-if="formItemConfig.elConfig.visible"
+					:data="formItemConfig?.data.elementItem[0].elData"
+					:is="elComName"
+					ref="elRef"
+					isVModel
+				></component>
+			</template> -->
+			<template v-if="formItemConfig?.layoutConfig && (formItemConfig?.layoutConfig.list || []).length > 0">
+				<component :is="hsExpand" v-model="formItemConfig.layoutConfig.visible" :expandConfig="formItemConfig.layoutConfig.title"></component>
+				<component
+					v-if="formItemConfig.layoutConfig.visible"
+					:parentConfig="parentConfig"
+					:is="'bc-form-config'"
+					:data="formItemConfig?.data.layoutData"
+					:config="formItemConfig?.layoutConfig.list"
+				/>
+			</template>
+
+			<!-- <template v-if="formItemConfig?.data.baseData.el">
+				<component :is="hsExpand" v-model="formItemConfig.defaultConfig.visible" :expandConfig="formItemConfig.defaultConfig.title"></component>
+				<component
+					v-if="formItemConfig.defaultConfig.visible"
+					:parentConfig="parentConfig"
+					:is="'bc-form-config'"
+					:data="formItemConfig?.data.defaultData"
+					:config="formItemConfig?.defaultConfig.list"
+				/>
+			</template> -->
+		</div>
+
+		<div class="text-center grow-0">
+			<hs-button @click="saveData(editableTabsValue)" type="primary">保存</hs-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import hsExpand from '../../hsExpand/src/hsExpand.vue';
+import { formBaseRule } from '../../../default/baseFormConfig';
+import { useHsAttrForm } from './../useAttrForm';
+
+const props = defineProps({
+	current: {
+		type: Object,
+		default: () => {},
+	},
+	data: {
+		type: Object,
+		default: () => {},
+	},
+});
+// const baseConfigRef = ref();
+// baseConfigRef是在循环中使用的，所以需要使用ref()包裹
+const baseConfigRef = ref([]);
+const editableTabsValue = ref(0);
+onMounted(() => {
+	console.log('baseConfigRef===.>>>', baseConfigRef);
+});
+const { parentConfig, visible, formItemConfig, elComName, onChange, saveData, handleTabsEdit } = useHsAttrForm(props, baseConfigRef);
+watch(
+	() => props.current,
+	(newVal, oldVal) => {
+		if (newVal.id !== oldVal.id) {
+			editableTabsValue.value = 0;
+		}
+	},
+	{ deep: true }
+);
+</script>
+
+<style lang="scss" scoped></style>