@gct-paas/render-web 0.1.6-dev.9 → 6.0.0-dev.10

package/es/components/collapse-detail/index.vue_vue_type_style_index_0_scoped_b4b9903c_lang.css

@@ -0,0 +1,83 @@
+.collapse-detail-wrap[data-v-b4b9903c] .btn-text.ant-btn {
+  padding: 4px 12px;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .btn-text.ant-btn > .anticon + span {
+  margin-left: 8px;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  flex-wrap: wrap;
+  padding: 0 !important;
+  background-color: #fff;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .ant-collapse > .ant-collapse-item > .ant-collapse-header > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding-top: 16px;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .ant-collapse-item {
+  border-bottom: none;
+}
+.collapse-detail-wrap .header[data-v-b4b9903c] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16px;
+  padding-bottom: 12px;
+}
+.collapse-detail-wrap .header .header-title[data-v-b4b9903c] {
+  font-size: 16px;
+}
+.collapse-detail-wrap .header .action-wrap .ant-btn[data-v-b4b9903c] {
+  position: absolute;
+  right: 0;
+  top: 12px;
+  z-index: 9;
+  height: 28px;
+  line-height: 18px;
+  padding: 4px 12px;
+}
+.collapse-detail-wrap .header .action-wrap .ant-btn .iconfont[data-v-b4b9903c] {
+  font-size: 14px;
+}
+.collapse-detail-wrap .description[data-v-b4b9903c] {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  border-radius: 4px;
+  background-color: #f7f8fa;
+}
+.collapse-detail-wrap .description.desc-expand[data-v-b4b9903c] {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.collapse-detail-wrap .description .item[data-v-b4b9903c] {
+  padding: 0 20px;
+}
+.collapse-detail-wrap .description[data-v-b4b9903c] .ant-descriptions-row td {
+  padding-bottom: 0;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .ant-collapse.ant-collapse-borderless {
+  background: transparent;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .ant-collapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content {
+  border-radius: 0 0 4px 4px;
+  background-color: #f7f8fa;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .ant-collapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box {
+  padding: 0 20px !important;
+}
+.collapse-detail-wrap[data-v-b4b9903c] .ant-descriptions-item-container .ant-descriptions-item-label {
+  color: #797a7d;
+}
+.collapse-detail-wrap .desc-area[data-v-b4b9903c] {
+  color: #333;
+  font-family: PingFangSC-Regular, 'PingFang SC';
+  font-size: 14px;
+  font-weight: 400;
+}
+.collapse-detail-wrap .desc-area[data-v-b4b9903c] .ant-descriptions-row td {
+  padding-bottom: 20px;
+}

package/es/components/collapse-detail/typing.d.ts

@@ -0,0 +1,44 @@
+export interface TagItem {
+    name: string;
+    key: string | number;
+    color?: string;
+    customColor?: string;
+}
+export interface CollapseItem {
+    label: string;
+    name: string;
+    key?: string;
+    hasTag?: boolean;
+    isCopy?: boolean;
+    render?: string;
+    tagList?: TagItem[];
+    ellipsis?: boolean;
+    hidden?: boolean;
+    handle?: Fn;
+    span?: number;
+    useSlot?: boolean;
+    slotName?: string;
+    slotData?: IObject;
+    model: string;
+}
+export interface LabelTagItem {
+    key: string;
+    value: string;
+    label: string;
+    labelStyle: string;
+    labelColor: string;
+    valueColor: string;
+}
+/** 表单类型 */
+export declare enum FormTypeEnum {
+    /** 基础表单 */
+    BASE = "BASE",
+    /** 流程表单 */
+    PROCESS = "PROCESS",
+    /** 视图表单 */
+    VIEW = "VIEW",
+    /** 文本表单 */
+    TEXT = "TEXT",
+    /** 文件表单 */
+    FILE = "FILE"
+}

package/es/components/collapse-detail/typing.mjs

@@ -0,0 +1,17 @@
+//#region src/components/collapse-detail/typing.ts
+/** 表单类型 */
+var FormTypeEnum = /* @__PURE__ */ function(FormTypeEnum) {
+	/** 基础表单 */
+	FormTypeEnum["BASE"] = "BASE";
+	/** 流程表单 */
+	FormTypeEnum["PROCESS"] = "PROCESS";
+	/** 视图表单 */
+	FormTypeEnum["VIEW"] = "VIEW";
+	/** 文本表单 */
+	FormTypeEnum["TEXT"] = "TEXT";
+	/** 文件表单 */
+	FormTypeEnum["FILE"] = "FILE";
+	return FormTypeEnum;
+}({});
+//#endregion
+export { FormTypeEnum };

package/es/components/field-search-cascader/field-cascader.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    value: string;
+    modelKey?: string;
+    isField?: boolean;
+    rootRef?: IObject;
+    noShowName?: boolean;
+    btnTitle?: string;
+    filterFunc?: (item: IObject) => boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    fieldCascaderName: import('vue').Ref<string | undefined, string | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:value": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/field-search-cascader/field-cascader.vue.mjs

@@ -0,0 +1,8 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import field_cascader_vue_vue_type_script_setup_true_lang_default from "./field-cascader.vue_vue_type_script_setup_true_lang.mjs";
+import './field-cascader.vue_vue_type_style_index_1_lang.css';import './field-cascader.vue_vue_type_style_index_0_scoped_cb5e4d67_lang.css';/* empty css                                                                     */
+/* empty css                                                     */
+//#region src/components/field-search-cascader/field-cascader.vue
+var field_cascader_default = /* @__PURE__ */ _plugin_vue_export_helper_default(field_cascader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-cb5e4d67"]]);
+//#endregion
+export { field_cascader_default as default };

package/es/components/field-search-cascader/field-cascader.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,297 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, vShow, watch, withCtx, withDirectives } from "vue";
+import { FIELD_TYPE, t } from "@gct-paas/core";
+import { message } from "ant-design-vue";
+import { cloneDeep } from "lodash-es";
+import { watchDebounced } from "@vueuse/core";
+//#region src/components/field-search-cascader/field-cascader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "field-search-cascader-wrap" };
+var _hoisted_2 = { class: "field-cascader-pop-content flex" };
+var _hoisted_3 = { class: "field-cascader-list-box" };
+var _hoisted_4 = ["onClick"];
+var _hoisted_5 = ["title"];
+var _hoisted_6 = { class: "search-name" };
+var _hoisted_7 = ["title"];
+var _hoisted_8 = { class: "field-name-show" };
+var field_cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-cascader",
+	props: {
+		value: {},
+		modelKey: {},
+		isField: { type: Boolean },
+		rootRef: {},
+		noShowName: { type: Boolean },
+		btnTitle: {},
+		filterFunc: { type: Function }
+	},
+	emits: ["update:value"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const optionsMap = /* @__PURE__ */ new Map();
+		const visible = ref(false);
+		const fieldCascaderName = ref();
+		const fullName = ref();
+		const fieldType = ref();
+		const showTypes = [
+			FIELD_TYPE.REF,
+			FIELD_TYPE.REF_MULTI,
+			FIELD_TYPE.RDO_REF,
+			FIELD_TYPE.MASTERSLAVE
+		];
+		const originData = ref({
+			left: {
+				title: "",
+				search: "",
+				fieldKey: "",
+				options: []
+			},
+			center: {
+				title: "",
+				search: "",
+				fieldKey: "",
+				options: []
+			},
+			right: {
+				title: "",
+				search: "",
+				fieldKey: "",
+				options: []
+			}
+		});
+		const NO_SHOW_FIELDTYPES = [FIELD_TYPE.IMAGE, FIELD_TYPE.ATTACHMENT];
+		watchDebounced(() => props.modelKey, async () => {
+			if (props.modelKey) {
+				originData.value["left"].options = await getFieldlist(props.modelKey);
+				if (props.value) dataToShow();
+			}
+		}, {
+			immediate: true,
+			debounce: 300
+		});
+		watch(() => visible.value, () => {
+			if (!visible.value && props.noShowName) Object.keys(originData.value).forEach((i) => {
+				originData.value[i].fieldKey = "";
+				originData.value[i].title = "";
+				originData.value[i].search = "";
+				if (i !== "left") originData.value[i].options = [];
+			});
+		});
+		const dataToShow = async () => {
+			const fieldKeys = props.value.split(".");
+			let leftItem;
+			let centerItem;
+			let rightItem;
+			originData.value.left.fieldKey = fieldKeys[0];
+			leftItem = originData.value["left"].options.find((i) => i.key === fieldKeys[0]);
+			originData.value.left.title = leftItem?.title;
+			fieldCascaderName.value = leftItem?.title;
+			fieldType.value = leftItem?.fieldType;
+			if (fieldKeys.length > 1) {
+				originData.value.center.fieldKey = fieldKeys[1] || "";
+				if (leftItem?.bindInfo) {
+					originData.value["center"].options = await getFieldlist(leftItem?.bindInfo);
+					centerItem = originData.value["center"].options.find((i) => i.key === fieldKeys[1]);
+					originData.value.center.title = centerItem?.title;
+					fieldCascaderName.value = centerItem?.title;
+					fieldType.value = centerItem?.fieldType;
+				}
+			}
+			if (fieldKeys.length > 2) {
+				originData.value.right.fieldKey = fieldKeys[2] || "";
+				if (centerItem?.bindInfo) {
+					originData.value["right"].options = await getFieldlist(centerItem?.bindInfo);
+					rightItem = originData.value["right"].options.find((i) => i.key === fieldKeys[2]);
+					originData.value.right.title = rightItem?.title;
+					fieldCascaderName.value = rightItem?.title;
+					fieldType.value = rightItem?.fieldType;
+				}
+			}
+		};
+		const handleClick = (_e) => {
+			if (!props.modelKey) {
+				message.error(t("sys.checkBarcodeFieldTip"));
+				return;
+			}
+			visible.value = !visible.value;
+		};
+		const onChange = (e) => {
+			if (!e.target?.value) {
+				fullName.value = "";
+				fieldType.value = "";
+				fieldCascaderName.value = "";
+				fieldCascaderValue.value = "";
+				emit("update:value", "");
+				for (let key in originData.value) originData.value[key].fieldKey = "";
+			}
+		};
+		async function getFieldlist(modelKey) {
+			return (await _api.apaas.fieldMeta.getList({ modelKey }) || []).filter((v) => !NO_SHOW_FIELDTYPES.includes(v.type)).filter((v) => !props.filterFunc || props.filterFunc(v)).map((i) => {
+				return {
+					id: i.id,
+					title: i.name,
+					key: i.key,
+					bindInfo: i.bindInfo,
+					fieldType: i.type
+				};
+			});
+		}
+		const fieldCascaderValue = computed({
+			get() {
+				return props.value;
+			},
+			set(value) {
+				emit("update:value", value, {
+					type: fieldType.value,
+					name: fullName.value,
+					key: value
+				});
+			}
+		});
+		const selectOptions = computed(() => {
+			return (direction) => {
+				const orgItem = originData.value?.[direction];
+				return orgItem.search?.trim() ? orgItem.options?.filter((e) => e.title.indexOf(orgItem.search?.trim()) > -1) : cloneDeep(orgItem.options);
+			};
+		});
+		watch(() => originData.value.left?.search, async (val) => {
+			if (!(val?.trim() ? originData.value.left.options.filter((e) => e.title.indexOf(val.trim()) > -1) : cloneDeep(originData.value.left.options)).map((i) => i.key).includes(originData.value.left.fieldKey)) Object.keys(originData.value).forEach((i) => {
+				originData.value[i].fieldKey = "";
+				originData.value[i].title = "";
+				if (i !== "left") originData.value[i].options = [];
+			});
+		}, { deep: true });
+		watch(() => originData.value.center?.search, async (val) => {
+			if (!(val?.trim() ? originData.value.center.options.filter((e) => e.title.indexOf(val.trim()) > -1) : cloneDeep(originData.value.center.options)).map((i) => i.key).includes(originData.value.center.fieldKey)) Object.keys(originData.value).forEach((i) => {
+				if (i !== "left") {
+					originData.value[i].fieldKey = "";
+					originData.value[i].title = "";
+				}
+				if (i === "right") originData.value[i].options = [];
+			});
+		}, { deep: true });
+		const setSelectedKey = async (value, direction = "left") => {
+			originData.value[direction].fieldKey = value.key;
+			originData.value[direction].title = value.title;
+			fieldCascaderName.value = value.title;
+			fieldType.value = value.fieldType;
+			if (direction == "left") {
+				if (showTypes.includes(value.type) || showTypes.includes(value.fieldType)) {
+					originData.value["center"].options = await getOptions(value) || [];
+					originData.value["center"].search = "";
+					originData.value["right"].options = [];
+					if (originData.value["center"].options?.length) return;
+				}
+				fullName.value = value.title;
+				fieldCascaderValue.value = value.key;
+			}
+			if (direction == "center") {
+				const list = await getOptions(value) || [];
+				originData.value["right"].options = value.key !== "parent_id_" ? list : [];
+				originData.value["right"].search = "";
+				if (originData.value["right"].options?.length) return;
+				fullName.value = `${originData.value["left"].title}.${value.title}`;
+				fieldCascaderValue.value = `${originData.value["left"].fieldKey}.${value.key}`;
+			}
+			if (direction == "right") {
+				if (showTypes.includes(value.fieldType)) return;
+				fullName.value = `${originData.value["left"].title}.${originData.value["center"].title}.${value.title}`;
+				fieldCascaderValue.value = `${originData.value["left"].fieldKey}.${originData.value["center"].fieldKey}.${value.key}`;
+			}
+			visible.value = false;
+		};
+		const getOptions = async (value) => {
+			let list = [];
+			if (value.bindInfo && ![FIELD_TYPE.ENUM, FIELD_TYPE.ENUM_MULTI].includes(value.fieldType)) {
+				const options = optionsMap.get(value.id);
+				if (options?.length) list = cloneDeep(options);
+				else {
+					list = await getFieldlist(value.bindInfo);
+					optionsMap.set(value.id, cloneDeep(list));
+				}
+			}
+			return list;
+		};
+		__expose({ fieldCascaderName });
+		return (_ctx, _cache) => {
+			const _component_a_input = resolveComponent("a-input");
+			const _component_a_form_item_rest = resolveComponent("a-form-item-rest");
+			const _component_right_outlined = resolveComponent("right-outlined");
+			const _component_a_button = resolveComponent("a-button");
+			const _component_a_popover = resolveComponent("a-popover");
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_a_popover, {
+				visible: visible.value,
+				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+				trigger: "click",
+				"overlay-style": { minWidth: "150px" },
+				"overlay-class-name": "field-search-cascader-pop"
+			}, {
+				content: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(originData.value), (orgKey, _index) => {
+					return withDirectives((openBlock(), createElementBlock("div", {
+						key: orgKey + _index,
+						class: "field-cascader-item-box px-12px py-8px serial-num-no-error"
+					}, [createVNode(_component_a_form_item_rest, null, {
+						default: withCtx(() => [createVNode(_component_a_input, {
+							value: originData.value[orgKey].search,
+							"onUpdate:value": ($event) => originData.value[orgKey].search = $event,
+							class: "tree-search",
+							placeholder: _ctx.$t("sys.pageDesigner.searchField"),
+							"allow-clear": ""
+						}, {
+							suffix: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("i", { class: "iconfont icon-sousuo1" }, null, -1)])]),
+							_: 1
+						}, 8, [
+							"value",
+							"onUpdate:value",
+							"placeholder"
+						])]),
+						_: 2
+					}, 1024), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(selectOptions.value(orgKey), (item) => {
+						return openBlock(), createElementBlock("div", {
+							key: item.key,
+							class: normalizeClass(["field-cascader-item", { "field-cascader-item-selected": item.key == originData.value[orgKey].fieldKey }]),
+							onClick: ($event) => setSelectedKey(item, orgKey)
+						}, [item["title"].indexOf(originData.value[orgKey].search) > -1 ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							title: item["title"]
+						}, [
+							createElementVNode("span", null, toDisplayString(item["title"].substr(0, item["title"].indexOf(originData.value[orgKey].search))), 1),
+							createElementVNode("span", _hoisted_6, toDisplayString(originData.value[orgKey].search), 1),
+							createElementVNode("span", null, toDisplayString(item["title"].substr(item["title"].indexOf(originData.value[orgKey].search) + originData.value[orgKey].search?.length)), 1)
+						], 8, _hoisted_5)) : (openBlock(), createElementBlock("span", {
+							key: 1,
+							title: item["title"]
+						}, toDisplayString(item["title"]), 9, _hoisted_7)), item.bindInfo && showTypes.includes(item.fieldType) && orgKey !== "right" && item.key !== "parent_id_" ? (openBlock(), createBlock(_component_right_outlined, {
+							key: 2,
+							class: "right-icon"
+						})) : createCommentVNode("", true)], 10, _hoisted_4);
+					}), 128))])], 512)), [[vShow, originData.value[orgKey].options.length]]);
+				}), 128))], 512), [[vShow, visible.value]])]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_8, [!__props.noShowName ? (openBlock(), createBlock(_component_a_form_item_rest, { key: 0 }, {
+					default: withCtx(() => [createVNode(_component_a_input, {
+						value: fieldCascaderName.value,
+						"onUpdate:value": _cache[0] || (_cache[0] = ($event) => fieldCascaderName.value = $event),
+						class: normalizeClass(["field-search-cascader-input", fieldCascaderName.value ? "clear-icon" : ""]),
+						readonly: "",
+						placeholder: _ctx.$t("sys.pageDesigner.dataLinkage.rootSelectPlaceholder2"),
+						onClick: handleClick,
+						onChange
+					}, null, 8, [
+						"value",
+						"class",
+						"placeholder"
+					])]),
+					_: 1
+				})) : (openBlock(), createBlock(_component_a_button, {
+					key: 1,
+					type: "link"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.btnTitle || unref(t)("sys.message.metaFiled")), 1)]),
+					_: 1
+				}))])]),
+				_: 1
+			}, 8, ["visible"])]);
+		};
+	}
+});
+//#endregion
+export { field_cascader_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/field-search-cascader/field-cascader.vue_vue_type_style_index_0_scoped_cb5e4d67_lang.css

@@ -0,0 +1,52 @@
+.field-search-cascader-wrap[data-v-cb5e4d67] {
+  position: relative;
+}
+.field-search-cascader-wrap[data-v-cb5e4d67] .field-search-cascader-input:hover.clear-icon .anticon.ant-input-clear-icon-hidden {
+  visibility: visible !important;
+}
+.field-cascader-pop-content[data-v-cb5e4d67] {
+  margin-top: 4px;
+  z-index: 1011;
+  background: #fff;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.field-cascader-pop-content .field-cascader-item-box[data-v-cb5e4d67] {
+  border-right: 1px solid #e0e3ea;
+  width: 150px;
+}
+.field-cascader-pop-content .field-cascader-item-box[data-v-cb5e4d67]:last-child {
+  border-right: 0;
+}
+.field-cascader-pop-content .field-cascader-list-box[data-v-cb5e4d67] {
+  margin-top: 4px;
+  height: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.field-cascader-pop-content .field-cascader-list-box .search-name[data-v-cb5e4d67] {
+  color: var(--ant-primary-color) !important;
+}
+.field-cascader-pop-content .field-cascader-item[data-v-cb5e4d67] {
+  cursor: pointer;
+  line-height: 24px;
+  margin-bottom: 4px;
+  padding: 0 6px;
+  border-radius: 4px 4px 4px 4px;
+  position: relative;
+  padding-right: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.field-cascader-pop-content .field-cascader-item .right-icon[data-v-cb5e4d67] {
+  position: absolute;
+  right: 0;
+  top: 6px;
+  font-size: 12px;
+}
+.field-cascader-pop-content .field-cascader-item[data-v-cb5e4d67]:hover {
+  background: #f5f5f5;
+}
+.field-cascader-pop-content .field-cascader-item-selected[data-v-cb5e4d67] {
+  background: #e6eeff !important;
+}

package/es/components/field-search-cascader/field-cascader.vue_vue_type_style_index_1_lang.css

@@ -0,0 +1,3 @@
+.field-search-cascader-pop .ant-popover-inner-content {
+  padding: 0;
+}

package/es/components/field-search-cascader/index.d.ts

@@ -0,0 +1,2 @@
+import { default as fieldCascader } from './field-cascader.vue';
+export { fieldCascader as FieldSearchCascader };

package/es/components/field-search-cascader/index.mjs

@@ -0,0 +1 @@
+import "./field-cascader.vue.mjs";

package/es/components/form-component/FieldSelect.css

@@ -0,0 +1,22 @@
+.ant-select-selector {
+  height: 100%;
+}
+.multiple {
+  height: 100%;
+}
+.ant-select-multiple .ant-select-selector {
+  align-items: flex-start;
+}
+.select-render .ant-select-selection-overflow {
+  padding-top: 3px;
+}
+.select-render.ant-select-multiple .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+  margin-top: -1px;
+}
+.select-render.ant-select-multiple .ant-select-selection-placeholder {
+  top: 6px;
+  transform: translateY(0);
+}
+.ant-checkbox-group {
+  width: 100%;
+}

package/es/components/form-component/FieldSelect.d.ts

@@ -40,6 +40,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     selectOptionLabel: {
         type: StringConstructor;
     };
+    selectorWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     design: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -70,11 +74,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     selectOptionLabel: {
         type: StringConstructor;
     };
+    selectorWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & Readonly<{}>, {
     design: boolean;
     disabled: boolean;
     readonly: boolean;
     maxTagCount: string | number;
     maxTagTextLength: number;
+    selectorWidth: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/components/form-component/FieldSelect.mjs

@@ -1,10 +1,12 @@
 import tag_label_default from "./field-label/tag-label.vue.mjs";
 import selectTag_default from "./field-label/selectTag.vue.mjs";
 import field_readonly_default from "./field-readonly.vue.mjs";
-import './index.css';/* empty css            */
+import './index.css';import './FieldSelect.css';/* empty css                  */
+/* empty css            */
 import { computed, createVNode, defineComponent, h, mergeProps } from "vue";
-import { FormComponents, transformUrl } from "@gct-paas/core";
+import { FormComponents, measureText, transformUrl, truncateText } from "@gct-paas/core";
 import { Avatar, Select } from "ant-design-vue";
+import { typePadding } from "@gct-paas/core-web";
 import { pick } from "lodash-es";
 //#region src/components/form-component/FieldSelect.tsx
 var FieldSelect_default = /* @__PURE__ */ defineComponent({
@@ -40,9 +42,13 @@ var FieldSelect_default = /* @__PURE__ */ defineComponent({
 			type: Number,
 			default: 6
 		},
-		selectOptionLabel: { type: String }
+		selectOptionLabel: { type: String },
+		selectorWidth: {
+			type: Number,
+			default: 1400
+		}
 	},
-	setup(props, { emit }) {
+	setup(props, { emit, slots }) {
 		const currentValue = computed({
 			get() {
 				return props.value;
@@ -67,7 +73,7 @@ var FieldSelect_default = /* @__PURE__ */ defineComponent({
 				"type": props.fieldType,
 				"label": name,
 				"avatar": avatar,
-				"title": title?.length > props.maxTagTextLength ? title : null,
+				"title": title?.length > props.maxTagTextLength || measureText(title) > measureText(name) ? title : null,
 				"disabled": props.disabled,
 				"iconExtraProps": iconExtraProps
 			}, otherParams), null);
@@ -97,6 +103,7 @@ var FieldSelect_default = /* @__PURE__ */ defineComponent({
 			if (props.readonly) {
 				const list = options.value?.filter((item) => {
 					if (props.selectExtraProps?.mode === "multiple") return Array.isArray(currentValue.value) && currentValue.value.includes(item.value);
+					return item.value === currentValue.value;
 				}) ?? [];
 				const icons = Object.fromEntries(list?.map((item) => {
 					return [item.label, pick(item?._item || {}, [
@@ -136,9 +143,9 @@ var FieldSelect_default = /* @__PURE__ */ defineComponent({
 			const { label, option, closable, onClose } = data;
 			const { _item = {} } = option || {};
 			return renderSelectTag({
-				name: label,
+				name: truncateText(label.slice(0, props.maxTagTextLength + 3), props.selectorWidth - typePadding(option || data)),
 				title: option?.label,
-				avatar: option?._item?.avatar,
+				avatar: props.selectorWidth > 73 ? option?._item?.avatar : "",
 				iconExtraProps: { [label]: pick(_item, [
 					"iconColor",
 					"icon",
@@ -147,10 +154,13 @@ var FieldSelect_default = /* @__PURE__ */ defineComponent({
 				otherParams: {
 					closable,
 					"onOn-close": onClose,
-					style: "margin-right: 4px"
+					style: "margin-right: 3px"
 				}
 			});
 		};
+		const dropdownRender = () => {
+			return slots.dropdownRender?.();
+		};
 		return () => {
 			return props.readonly ? renderTag(field_readonly_default, {
 				name: selectInfo.value?.labels,
@@ -164,6 +174,7 @@ var FieldSelect_default = /* @__PURE__ */ defineComponent({
 				"optionLabelProp": "titleLabel",
 				"tagRender": tagRender,
 				"showArrow": true,
+				"dropdownRender": slots.dropdownRender ? dropdownRender : void 0,
 				"maxTagCount": props.maxTagCount,
 				"maxTagTextLength": props.maxTagTextLength,
 				"dropdownMatchSelectWidth": 180,

package/es/components/form-component/field-label/tag-label.vue.d.ts

@@ -20,6 +20,7 @@ export interface Props {
         iconColor: string;
         textColor: string;
     };
+    title?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "on-close": (...args: any[]) => void;