hs-admin-ui 1.0.0

package/src/views/system/form/data.json

@@ -0,0 +1,360 @@
+{
+	"config_name": "GSP",
+	"config_unique_id": "1709538684267",
+	"attrs": {
+		"labelWidth": "100",
+		"labelPosition": "left",
+		"size": "small",
+		"requireAsteriskPosition": "left",
+		"statusIcon": false,
+		"validateOnRuleChange": true,
+		"scrollToError": false
+	},
+	"data": {
+		"baseInfo": {
+			"commonName": "",
+			"DI": "",
+			"commodityName": "",
+			"retrievalCode": ""
+		},
+		"relevantLicenses": {},
+		"other": {
+			"vendor": "",
+			"information": ""
+		}
+	},
+	"form": [
+		{
+			"label": "基本信息",
+			"fieldID": "baseInfo",
+			"grid": 3,
+			"formItemType": "form",
+			"config": [
+				{
+					"label": "通用名称",
+					"config": [
+						{
+							"baseData": {
+								"label": "通用名称",
+								"prop": "commonName",
+								"el": "hs-input",
+								"isSlot": false,
+								"isApply": true,
+								"isShow": true,
+								"baseType": "string"
+							},
+							"elData": {
+								"attrs": {
+									"size": "small",
+									"type": "text",
+									"clearable": false,
+									"show-password": false,
+									"disabled": false,
+									"autosize": false,
+									"autocomplete": "off",
+									"autofocus": false,
+									"validate-event": true
+								},
+								"rules": {
+									"required": false
+								}
+							}
+						}
+					],
+					"layoutData": {
+						"rowSpan": 1,
+						"colSpan": 1,
+						"labelBg": "#F5F5F5",
+						"labelColor": "#606266"
+					}
+				},
+				{
+					"label": "医疗器械DI",
+					"config": [
+						{
+							"baseData": {
+								"label": "医疗器械DI",
+								"prop": "DI",
+								"el": "hs-input",
+								"isSlot": false,
+								"isApply": true,
+								"isShow": true,
+								"baseType": "string"
+							},
+							"elData": {
+								"attrs": {
+									"size": "small",
+									"type": "text",
+									"clearable": false,
+									"show-password": false,
+									"disabled": false,
+									"autosize": false,
+									"autocomplete": "off",
+									"autofocus": false,
+									"validate-event": true
+								},
+								"rules": {
+									"required": false
+								}
+							}
+						}
+					],
+					"layoutData": {
+						"rowSpan": 1,
+						"colSpan": 1,
+						"labelBg": "#F5F5F5",
+						"labelColor": "#606266"
+					}
+				},
+				{
+					"label": "商品名称",
+					"config": [
+						{
+							"baseData": {
+								"label": "商品名称",
+								"prop": "commodityName",
+								"el": "hs-input",
+								"isSlot": false,
+								"isApply": true,
+								"isShow": true,
+								"baseType": "string"
+							},
+							"elData": {
+								"attrs": {
+									"size": "small",
+									"type": "text",
+									"clearable": false,
+									"show-password": false,
+									"disabled": false,
+									"autosize": false,
+									"autocomplete": "off",
+									"autofocus": false,
+									"validate-event": true
+								},
+								"rules": {
+									"required": false
+								}
+							}
+						}
+					],
+					"layoutData": {
+						"rowSpan": 1,
+						"colSpan": 1,
+						"labelBg": "#F5F5F5",
+						"labelColor": "#606266"
+					}
+				},
+				{
+					"label": "检索码",
+					"config": [
+						{
+							"baseData": {
+								"label": "检索码",
+								"prop": "retrievalCode",
+								"el": "hs-input",
+								"isSlot": false,
+								"isApply": true,
+								"isShow": true,
+								"baseType": "string"
+							},
+							"elData": {
+								"attrs": {
+									"size": "small",
+									"type": "text",
+									"clearable": false,
+									"show-password": false,
+									"disabled": true,
+									"autosize": false,
+									"autocomplete": "off",
+									"autofocus": false,
+									"validate-event": true,
+									"readonly": true
+								},
+								"rules": {
+									"required": false
+								}
+							}
+						},
+						{
+							"baseData": {
+								"label": "参数名称",
+								"el": "hs-button",
+								"isSlot": false,
+								"isApply": true,
+								"isShow": true
+							},
+							"elData": {
+								"attrs": {
+									"autofocus": false,
+									"bg": false,
+									"circle": false,
+									"dark": false,
+									"link": false,
+									"loading": false,
+									"loading-icon": "Loading",
+									"name": "按钮测试",
+									"native-type": "button",
+									"plain": false,
+									"round": false,
+									"size": "small",
+									"tag": "button",
+									"text": false
+								},
+								"groupAttrs": {}
+							}
+						}
+					],
+					"layoutData": {
+						"rowSpan": 1,
+						"colSpan": 1,
+						"labelBg": "#F5F5F5",
+						"labelColor": "#606266"
+					}
+				}
+			],
+			"attrs": {
+				"rowGap": 0,
+				"columnGap": 0,
+				"bg": "#F4EEEE"
+			}
+		},
+		{
+			"label": "相关证照",
+			"fieldID": "relevantLicenses",
+			"grid": 3,
+			"formItemType": "slot",
+			"config": {
+				"name": "relevantLicenses"
+			}
+		},
+		{
+			"label": "其他",
+			"fieldID": "other",
+			"grid": 3,
+			"formItemType": "form",
+			"config": [
+				{
+					"label": "供应商",
+					"config": [
+						{
+							"baseData": {
+								"label": "供应商",
+								"prop": "vendor",
+								"el": "hs-select",
+								"isSlot": false,
+								"isApply": true,
+								"isShow": true,
+								"baseType": "string"
+							},
+							"elData": {
+								"attrs": {
+									"size": "small",
+									"multiple": false,
+									"disabled": false,
+									"value-key": "value",
+									"clearable": true,
+									"collapse-tags": false,
+									"collapse-tags-tooltip": false,
+									"multiple-limit": 0,
+									"effect": "light",
+									"autocomplete": "off",
+									"filterable": true,
+									"allow-create": false,
+									"remote": false,
+									"remote-show-suffix": false,
+									"loading": false,
+									"reserve-keyword": true,
+									"default-first-option": false,
+									"teleported": true,
+									"persistent": true,
+									"automatic-dropdown": true,
+									"fit-input-width": false,
+									"tag-type": "info",
+									"validate-event": true,
+									"placement": "bottom-start",
+									"max-collapse-tags": 1,
+									"options": "string="
+								},
+								"groupAttrs": {
+									"disabled": false,
+									"isGroupEnabled": false
+								},
+								"optionAttrs": {
+									"value": "value",
+									"label": "label",
+									"disabled": false
+								},
+								"rules": {}
+							}
+						}
+					],
+					"layoutData": {
+						"rowSpan": 1,
+						"colSpan": 1,
+						"labelBg": "#F5F5F5",
+						"labelColor": "#606266"
+					}
+				},
+				{
+					"label": "资料",
+					"config": [
+						{
+							"baseData": {
+								"label": "资料",
+								"prop": "information",
+								"el": "hs-checkbox",
+								"isSlot": false,
+								"isApply": true,
+								"isShow": true,
+								"baseType": "string",
+								"complexType": "Array"
+							},
+							"elData": {
+								"attrs": {
+									"size": "small",
+									"disabled": false,
+									"border": false,
+									"checked": false,
+									"indeterminate": false,
+									"validate-event": true
+								},
+								"groupAttrs": {
+									"disabled": false,
+									"text-color": "#ffffff",
+									"fill": "#409EFF",
+									"tag": "div",
+									"validate-event": true
+								},
+								"buttonAttrs": {
+									"disabled": false,
+									"checked": false
+								},
+								"rules": {}
+							}
+						}
+					],
+					"layoutData": {
+						"rowSpan": 1,
+						"colSpan": 1,
+						"labelBg": "#F5F5F5",
+						"labelColor": "#606266"
+					}
+				}
+			],
+			"attrs": {
+				"rowGap": 0,
+				"columnGap": 0,
+				"bg": "#F2F3C3"
+			}
+		},
+		{
+			"label": "相关证照",
+			"fieldID": "relevantLicenses",
+			"grid": 3,
+			"formItemType": "component",
+			"config": {
+				"name": "hs-upload"
+			}
+		}
+	]
+}

package/src/views/system/form/index.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="system-menu-container layout-padding">
+		<div class="h-full bg-white">
+			<bc-form :data="formData">
+				<template #relevantLicenses>自定义插槽显示信息</template>
+			</bc-form>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="formComponent">
+import { ref, onMounted } from 'vue';
+import IFormData from '/@/types/form';
+import { getFormData } from '/@parseTable';
+import data from './data.json';
+
+const formData = ref(<IFormData.Form>{});
+
+// 页面加载时
+onMounted(async () => {
+	formData.value = getFormData(data);
+});
+</script>
+<style scoped lang="scss"></style>

package/src/views/system/formSetting/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/system/formSetting/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/formTable';
+
+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/system/formSetting/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/system/formSetting/components/hsBtn/useAttrBtn.ts

@@ -0,0 +1,129 @@
+import { ref, Ref, watch } from 'vue';
+import ComponentAttr from '/@/types/components';
+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 };
+}