@xclqmc/base-form 1.0.0

package/src/components/base/BasePopup.vue

@@ -0,0 +1,366 @@
+<template>
+	<div class="popup-dialog">
+		<el-dialog v-model="tempShow" :title="title" :draggable="draggable" :fullscreen="params.fullScreen"
+			:close-on-click-modal="false" :width="props.width" @close="cancel" :destroy-on-close="props.destroy"
+			:append-to-body="props.appendToBody" :top="top" :class="{ 'fullscreen-dialog': params.fullScreen }"
+			:style="{ height: props.height || undefined, borderRadius: !params.fullScreen ? props.radius : '0' }" class="form-popup-dialog-custom">
+			<!-- 标题 -->
+			<template #header>
+				<div class="title">
+					<slot name="title">
+						<div>
+							{{ title }}
+						</div>
+					</slot>
+					<div class="full" @click="openFull">
+						<el-icon>
+							<FullScreen />
+						</el-icon>
+					</div>
+				</div>
+			</template>
+
+			<!-- 内容 -->
+			<template #default>
+				<el-scrollbar :style="scrollbarStyle">
+					<div :style="{ padding: props.padding }">
+						<div v-loading="props.loading">
+							<div :style="{ opacity: props.loading ? 0 : 1 }">
+								<slot></slot>
+							</div>
+						</div>
+					</div>
+				</el-scrollbar>
+			</template>
+
+			<!-- 底部 -->
+			<template #footer>
+				<div class="foot">
+					<slot name="foot-left"></slot>
+					<el-button @click="cancel" v-if="showCancel" class="btn">取消</el-button>
+					<el-button type="primary" @click="submit" v-if="showSubmit" :disabled="disabledSubmit || loading"
+						class="btn">
+						确认
+					</el-button>
+					<el-button type="primary" @click="cancel" v-if="showClose" class="btn">关闭</el-button>
+					<slot name="foot-right"></slot>
+					<slot name="footer"></slot>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ElButton } from 'element-plus';
+import { FullScreen } from '@element-plus/icons-vue';
+import { computed, reactive, ref, watch } from 'vue';
+
+//==========================================================================================================数据
+const emit = defineEmits(['cancel', 'submit', 'update:show', 'close']);
+const props = defineProps({
+	// 显示状态
+	show: {
+		type: Boolean,
+		default: false,
+	},
+	// 宽度
+	width: {
+		type: String,
+		default: '1000px',
+	},
+	// 标题
+	title: {
+		type: String,
+		default: '标题',
+	},
+	// 显示状态
+	draggable: {
+		type: Boolean,
+		default: true,
+	},
+	// 显示取消
+	showCancel: {
+		type: Boolean,
+		default: true,
+	},
+	//显示确认
+	showSubmit: {
+		type: Boolean,
+		default: true,
+	},
+	//自动取消
+	autoCancel: {
+		type: Boolean,
+		default: true,
+	},
+	//最大高度
+	maxHeight: {
+		type: String,
+		default: '90vh',
+	},
+	//加载中
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+	//高度
+	top: {
+		type: String,
+		default: '5vh',
+	},
+	// 弹窗高度：缺省 null（不限制，内容自适应）；传入如 '70vh' / '500px' 则固定弹窗高度，内容区滚动
+	height: {
+		type: String,
+		default: null,
+	},
+	//关闭后销毁
+	destroy: {
+		type: Boolean,
+		default: true,
+	},
+	//内边距
+	padding: {
+		type: String,
+		default: '10px 15px 20px 15px',
+	},
+	//显示关闭按钮
+	showClose: {
+		type: Boolean,
+		default: false,
+	},
+	//是否警用提交按钮
+	disabledSubmit: {
+		type: Boolean,
+		default: false,
+	},
+	//是否内嵌
+	appendToBody: {
+		type: Boolean,
+		default: false,
+	},
+	//全屏
+	fullScreen: {
+		type: Boolean,
+		default: false,
+	},
+	//圆角
+	radius: {
+		type: String,
+		default: '5px',
+	},
+});
+
+const tempShow = ref<any>(false);
+watch(
+	() => props.show,
+	() => {
+		tempShow.value = props.show;
+	},
+	{
+		immediate: true,
+	}
+);
+
+//参数
+const params = reactive({
+	fullScreen: false,
+});
+
+//计算滚动区域样式
+const scrollbarStyle = computed(() => {
+	// 固定高度模式（height 有值）：内容区充满弹窗 body 并滚动
+	if (props.height) {
+		return {
+			'max-height': '100%',
+			height: '100%',
+			'overflow-y': 'auto',
+		};
+	}
+	const maxHeight = params.fullScreen ? '100vh' : props.maxHeight;
+	return {
+		'max-height': `calc(${maxHeight} - 90px)`,
+		height: 'auto', // 改为auto让内容自适应
+		'overflow-y': 'auto',
+	};
+});
+
+//==========================================================================================================方法
+//取消
+function cancel() {
+	emit('close');
+	if (props.autoCancel) {
+		emit('update:show', false);
+		tempShow.value = false;
+	}
+}
+
+//提交
+function submit() {
+	emit('submit');
+}
+
+watch(
+	() => props.fullScreen,
+	() => {
+		params.fullScreen = props.fullScreen;
+	},
+	{
+		immediate: true,
+	}
+);
+
+//打开全屏
+function openFull() {
+	params.fullScreen = !params.fullScreen;
+}
+</script>
+
+<style lang="scss">
+.form-popup-dialog-custom {
+	padding: 0;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+
+	.el-dialog__header {
+		width: 100%;
+		height: 40px;
+		line-height: 40px;
+		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
+		box-sizing: border-box;
+		padding: 0 20px;
+		font-size: 16px;
+		position: relative;
+		display: flex;
+		flex-shrink: 0;
+
+		.el-dialog__headerbtn {
+			height: 40px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.title {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.full {
+				height: 40px;
+				position: absolute;
+				top: 0%;
+				right: 30px;
+				font-size: var(--el-message-close-size, 16px);
+				color: gray;
+				cursor: pointer;
+				padding-right: 20px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&:hover {
+					color: #409eff;
+				}
+			}
+		}
+	}
+
+	.el-dialog__body {
+		padding: 0;
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&.is-fullscreen {
+		.el-dialog__body {
+			max-height: calc(100vh - 90px) !important;
+		}
+	}
+
+	.el-dialog__footer {
+		width: 100%;
+		padding: 0px 20px;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		text-align: center;
+		border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
+		z-index: 99;
+		flex-shrink: 0;
+
+		.foot {
+			width: 100%;
+			height: 100%;
+			z-index: 99;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+		}
+
+		.el-button {
+			height: 28px;
+			padding: 0 20px;
+		}
+
+		.btn {
+			height: 28px;
+			padding: 0 20px;
+		}
+	}
+}
+
+.fullscreen-dialog {
+	.el-dialog__body {
+		max-height: calc(100vh - 90px) !important;
+	}
+}
+
+/* 全局覆盖 */
+.dialog-fade-enter-active .el-dialog,
+.dialog-fade-leave-active .el-dialog {
+	animation-fill-mode: forwards;
+}
+
+/* 进入动画：缩放+淡入 */
+.dialog-fade-enter-active .el-dialog {
+	animation-duration: 0.2s;
+	animation-name: anim-open;
+	animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
+}
+
+/* 离开动画：缩小+淡出 */
+.dialog-fade-leave-active .el-dialog {
+	animation-duration: 0.25s;
+	animation-name: anim-close;
+}
+
+@keyframes anim-open {
+	0% {
+		opacity: 0;
+		transform: scale3d(0, 0, 1);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes anim-close {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: scale3d(0.5, 0.5, 1);
+	}
+}
+</style>

package/src/components/base/BaseRadio.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-radio-group
+    v-model="data.valueCopy"
+    @change="change"
+    @click="(e: any) => emit('click', e)"
+    :disabled="disabled"
+  >
+    <el-radio
+      v-for="item in tempList"
+      :key="item.value"
+      :value="item[value]"
+      border
+      class="mr10"
+    >
+      {{ item[label] }}
+    </el-radio>
+  </el-radio-group>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, inject } from "vue";
+const emit = defineEmits(["update:modelValue", "change", "click"]);
+
+//==============================================================================数据
+const props = defineProps({
+  //选择的数据
+  modelValue: {
+    type: [String, Number],
+    default: null,
+  },
+  //选项数据：数组直接用；字符串视为字典 code，经 BaseForm 注入的 api.dict 拉取
+  format: {
+    type: [Array, String],
+    default: () => {
+      return [];
+    },
+  },
+  //提示信息
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  //label
+  label: {
+    type: String,
+    default: "label",
+  },
+  //value
+  value: {
+    type: String,
+    default: "value",
+  },
+  //是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const data = reactive<any>({
+  valueCopy: "",
+});
+//选项列表
+const tempList = ref<any[]>([]);
+//字典拉取函数（由 BaseForm provide；单独使用控件且无 BaseForm 时为 null，字符串 format 解析为空）
+const dictFetch = inject<((code: string) => Promise<any[]>) | null>(
+  "baseFormDict",
+  null,
+);
+
+//==============================================================================监听
+//选择数据
+watch(
+  () => props.modelValue,
+  () => {
+    data.valueCopy = props.modelValue;
+  },
+  {
+    immediate: true,
+  },
+);
+
+//选项数据：数组直接用；字符串为字典 code，经注入的 api.dict 拉取（结果仅接受数组）
+watch(
+  () => props.format,
+  async (fmt) => {
+    if (Array.isArray(fmt)) {
+      tempList.value = fmt;
+      return;
+    }
+    if (typeof fmt !== "string") {
+      tempList.value = [];
+      return;
+    }
+    try {
+      const res = await dictFetch?.(fmt);
+      if (props.format !== fmt) return; //拉取期间 format 已变，丢弃过期结果
+      tempList.value = Array.isArray(res) ? res : [];
+    } catch (err) {
+      console.error(`获取字典 ${fmt} 选项失败:`, err);
+      tempList.value = [];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+//==============================================================================方法
+function change() {
+  emit("update:modelValue", data.valueCopy);
+  emit("change", data.valueCopy);
+}
+</script>

package/src/components/base/BaseSelect.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-select
+    v-model="data.valueCopy"
+    :placeholder="placeholder"
+    @change="change"
+    @click="(e: any) => emit('click', e)"
+    :disabled="disabled"
+    filterable
+    clearable
+    :multiple="multiple"
+    :max-collapse-tags="maxCollapseTags"
+    :collapse-tags="props.maxCollapseTags != null"
+    :collapse-tags-tooltip="props.maxCollapseTags != null"
+  >
+    <el-option
+      v-for="item in tempList"
+      :key="item[value]"
+      :label="item[label]"
+      :value="item[value]"
+      :disabled="item[disabledName]"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch, inject } from "vue";
+
+const emit = defineEmits(["update:modelValue", "change", "click"]);
+
+//=====================================================================================数据
+const props = defineProps({
+  //选择的数据
+  modelValue: {
+    type: [String, Array],
+    default: null,
+  },
+  //选项数据：数组直接用；字符串视为字典 code，经 BaseForm 注入的 api.dict 拉取
+  format: {
+    type: [Array, String],
+    default: () => [],
+  },
+  //是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  //是否多选
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  //提示信息
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  //label
+  label: {
+    type: String,
+    default: "label",
+  },
+  //value
+  value: {
+    type: String,
+    default: "value",
+  },
+  //禁用名称
+  disabledName: {
+    type: String,
+    default: "disabled",
+  },
+  //标签折叠数量
+  maxCollapseTags: {
+    type: Number,
+    default: null,
+  },
+});
+
+const data = reactive<any>({
+  valueCopy: "",
+});
+
+//选项列表
+const tempList = ref<any[]>([]);
+//字典拉取函数（由 BaseForm provide；单独使用控件且无 BaseForm 时为 null，字符串 format 解析为空）
+const dictFetch = inject<((code: string) => Promise<any[]>) | null>(
+  "baseFormDict",
+  null,
+);
+
+//==============================================================================监听
+//选择数据
+watch(
+  () => props.modelValue,
+  () => {
+    data.valueCopy = props.modelValue;
+  },
+  {
+    immediate: true,
+  },
+);
+
+//选项数据：数组直接用；字符串为字典 code，经注入的 api.dict 拉取（结果仅接受数组）
+watch(
+  () => props.format,
+  async (fmt) => {
+    if (Array.isArray(fmt)) {
+      tempList.value = fmt;
+      return;
+    }
+    if (typeof fmt !== "string") {
+      tempList.value = [];
+      return;
+    }
+    try {
+      const res = await dictFetch?.(fmt);
+      if (props.format !== fmt) return; //拉取期间 format 已变，丢弃过期结果
+      tempList.value = Array.isArray(res) ? res : [];
+    } catch (err) {
+      console.error(`获取字典 ${fmt} 选项失败:`, err);
+      tempList.value = [];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+//=====================================================================================方法
+function change() {
+  const val = props.multiple ? (data.valueCopy ?? []) : (data.valueCopy ?? "");
+  emit("update:modelValue", val);
+  emit("change", val);
+}
+</script>

package/src/components/base/registry.ts

@@ -0,0 +1,39 @@
+/**
+ * 字段组件注册表：内置控件（input/radio/select/editor）+ 宿主按 type 注入的自定义组件。
+ * 解析优先级：宿主注入 > 内置（type 重复时以最后一次注入为准，覆盖内置渲染）。
+ */
+import { shallowReactive } from "vue";
+import type { Component } from "vue";
+import BaseInput from "./BaseInput.vue";
+import BaseRadio from "./BaseRadio.vue";
+import BaseSelect from "./BaseSelect.vue";
+import BaseEditor from "./BaseEditor.vue";
+
+/** 内置字段控件 */
+const builtinComponents: Record<string, Component> = {
+  input: BaseInput,
+  radio: BaseRadio,
+  select: BaseSelect,
+  editor: BaseEditor,
+};
+
+/** 宿主注入表（key 为字段 type） */
+const fieldComponents = shallowReactive(new Map<string, Component>());
+
+/** 注入单个字段组件：type 与字段配置的 field.type 对应；与内置/已注入重复时覆盖 */
+export function registerField(type: string, component: Component) {
+  if (!type || !component) return;
+  fieldComponents.set(type, component);
+}
+
+/** 批量注入字段组件：形如 { rate: RateField, input: MyInput } */
+export function registerFields(map: Record<string, Component> = {}) {
+  Object.entries(map).forEach(([type, component]) =>
+    registerField(type, component),
+  );
+}
+
+/** 按字段 type 解析渲染组件：注入优先，未注入回落内置；两者皆无返回 undefined */
+export function resolveFieldComponent(type: string): Component | undefined {
+  return fieldComponents.get(type) ?? builtinComponents[type];
+}