diff --git a/packages/ui-vue/components/rate/index.ts b/packages/ui-vue/components/rate/index.ts index 51b621dc498924c0a71f0df2d0054a70789a5304..f05b2a1403cfb3168ad246ea297d0b46988b6cb4 100644 --- a/packages/ui-vue/components/rate/index.ts +++ b/packages/ui-vue/components/rate/index.ts @@ -19,12 +19,14 @@ import FRate from './src/rate.component'; import FRateDesign from './src/designer/rate.design.component'; import { propsResolver } from './src/rate.props'; import { withInstall } from '@farris/ui-vue/components/common'; +import { RateProperty } from './src/property-config/rate.property-config'; export * from './src/rate.props'; FRate.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { componentMap.rate = FRate; propsResolverMap.rate = propsResolver; + }; FRate.registerDesigner = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record) => { componentMap.rate = FRateDesign; diff --git a/packages/ui-vue/components/rate/src/designer/rate.design.component.tsx b/packages/ui-vue/components/rate/src/designer/rate.design.component.tsx index 3bf4142b77c8bf33cb415bab98434c7fb0b1a1e8..abc44575be92a382761638ab5d95d9c1310cb281 100644 --- a/packages/ui-vue/components/rate/src/designer/rate.design.component.tsx +++ b/packages/ui-vue/components/rate/src/designer/rate.design.component.tsx @@ -16,8 +16,9 @@ */ import { computed, defineComponent, SetupContext, ref, withModifiers, onMounted, inject } from 'vue'; import { RateProps, rateProps } from '../rate.props'; -import { DesignerItemContext } from '../../../designer-canvas/src/types'; +import { ComponentSchema, DesignerItemContext } from '../../../designer-canvas/src/types'; import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component'; +import { useDesignerRules } from './use-designer-rules'; export default defineComponent({ name: 'FRateDesign', @@ -25,7 +26,7 @@ export default defineComponent({ emits: ['selectedValue'] as (string[] & ThisType) | undefined, setup(props: RateProps, context: SetupContext) { /** 星星大小 */ - const size = ref(props.size); + const size = computed(() => props.size); /** 启用半颗星模式 */ const enableHalf = ref(props.enableHalf); /** 启用再次点击后清除 */ @@ -72,8 +73,10 @@ export default defineComponent({ const distance = 4; const elementRef = ref(); + const designerHostService = inject('designer-host-service') const designItemContext = inject('design-item-context') as DesignerItemContext; - const componentInstance = useDesignerComponent(elementRef, designItemContext); + const designerRulesComposition = useDesignerRules(designItemContext.schema, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext,designerRulesComposition); onMounted(() => { elementRef.value.componentInstance = componentInstance; @@ -273,3 +276,7 @@ export default defineComponent({ }; } }); +function useRateDesignerRules(schema: ComponentSchema, schema1: ComponentSchema | undefined) { + throw new Error('Function not implemented.'); +} + diff --git a/packages/ui-vue/components/rate/src/designer/use-designer-rules.ts b/packages/ui-vue/components/rate/src/designer/use-designer-rules.ts new file mode 100644 index 0000000000000000000000000000000000000000..e53cbbd9fb81d04adeef9266a37e04dab677f64a --- /dev/null +++ b/packages/ui-vue/components/rate/src/designer/use-designer-rules.ts @@ -0,0 +1,41 @@ +import { DraggingResolveContext, UseDesignerRules } from "../../../designer-canvas/src/composition/types"; +import { ComponentSchema } from "../../../designer-canvas/src/types"; +import { RateProperty } from "../property-config/rate.property-config"; + +/** + * 评分组件设计时的规则定义 + */ +export function useDesignerRules(schema: ComponentSchema, designerHostService): UseDesignerRules { + /** + * 判断是否可以接收子组件(评分组件是叶子组件,不接收子元素) + */ + function canAccepts(draggingContext: DraggingResolveContext): boolean { + return false; + } + function checkCanDeleteComponent() { + return true; + } + + function checkCanMoveComponent() { + return true; + } + function hideNestedPaddingInDesginerView() { + return true; + } + + /** + * 返回右侧属性面板配置 + */ + function getPropsConfig(componentId: string) { + const rateProp = new RateProperty(componentId, designerHostService); + return rateProp.getPropertyConfig(schema); + } + + return { + canAccepts, + hideNestedPaddingInDesginerView, + getPropsConfig, + checkCanDeleteComponent, + checkCanMoveComponent, + }; +} diff --git a/packages/ui-vue/components/rate/src/property-config/rate.property-config.json b/packages/ui-vue/components/rate/src/property-config/rate.property-config.json index 6be5bac5dad6a26e73469e153a827e076b70a140..b369fd36db506f74423b6f22b231e20775e100aa 100644 --- a/packages/ui-vue/components/rate/src/property-config/rate.property-config.json +++ b/packages/ui-vue/components/rate/src/property-config/rate.property-config.json @@ -11,14 +11,15 @@ "description": "组件标识", "title": "标识", "type": "string", - "readonly": true + "readonly": true, + "defaut":"rate" }, "type": { "description": "组件类型", "title": "控件类型", "type": "select", "editor": { - "type": "waiting for modification", + "type": "select", "enum": [] } } diff --git a/packages/ui-vue/components/rate/src/property-config/rate.property-config.ts b/packages/ui-vue/components/rate/src/property-config/rate.property-config.ts new file mode 100644 index 0000000000000000000000000000000000000000..ca5a397e19d04af2f1a629552719c808487c5d44 --- /dev/null +++ b/packages/ui-vue/components/rate/src/property-config/rate.property-config.ts @@ -0,0 +1,156 @@ + +import { valueObjectSchemaRepositorySymbol } from "@/demos/schema-selector/mock_repository"; +import { BaseControlProperty } from "../../../property-panel/src/composition/entity/base-property"; + + +export class RateProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + + /** + * 获取评分组件属性配置 + */ + getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + this.propertyConfig.categories['appearance'] = this.getAppearanceProperties(propertyData); + this.propertyConfig.categories['behavior'] = this.getBehaviorConfig(propertyData); + return this.propertyConfig; + } + + /** + * 外观配置 + */ + private getAppearanceProperties(propertyData: any) { + return { + title: '外观', + description: '', + properties: { + size: { + title: '组件大小', + type: 'enum', + description: '设置组件显示尺寸', + default:'large', + editor: { + type: 'combo-list', + textField: 'value', + valueField: 'key', + idField: 'key', + editable: false, + data: [ + { + key: 'small', + value: '小号' + }, + { + key: 'mid', + value: '中号' + }, + { + key: 'large', + value: '大号' + }, + { + key: 'extraLarge', + value: '超大号' + } + ] + } + +}, + +// 注释示例: +// 此处配置控制组件的基本显示属性 +// 修改后需要刷新页面才能生效, + numOfStar: { + title: '星星数量', + type: 'number', + minimum: 1, + maximum: 5, + default: 5, + description: '设置评分组件的总星星数量' + }, + enableHalf: { + title: '允许半星', + type: 'boolean', + default: true, + description: '是否支持半星评分' + }, + disabled: { + title: '禁用评分', + type: 'boolean', + default: false, + description: '是否禁用评分' + }, + pointSystem: { + title: '分制系统', + type: 'number', + default: 5, + description: '分制系统' + }, + enableClear: { + title: '清除评分', + type: 'boolean', + default: false, + description: '是否启用再次点击后清除' + }, + lightColor: { + title: '星星亮色', + type: 'string', + default: '', + description:'星星亮色' + }, + darkColor: { + title: '星星暗色', + type: 'string', + default: '', + description: '星星暗色' + }, + iconClass: { + title: '评分图标样式', + type: 'string', + default: 'f-icon-star', + description: '设置评分图标样式' + }, + toolTipContents: { + title: '满意度', + type: 'Array as PropType', + default: ['很不满意', '不满意', '一般', '满意', '非常满意'], + description: '默认满意度文案' + }, + enableSatisfaction:{ + title:'显示满意度文案', + type: 'boolean', + default: false, + description: '是否显示满意度文案' + }, + modelValue: { + title: '绑定值', + type: 'number', + default: 0, + description: '绑定值' + }, + enableScore: { + title: '启用评分', + type: 'boolean', + default: true, + description: '启用评分' + } + + }, + /** + * 响应属性变化时的行为设置 + */ + setPropertyRelates(changeObject, prop) { + if (!changeObject) {return}; + switch (changeObject.propertyID) { + case 'numOfStar': + case 'size': + changeObject.needRefreshControlTree = true; + break; + } + } + }; + } +} diff --git a/packages/ui-vue/components/rate/src/rate.props.ts b/packages/ui-vue/components/rate/src/rate.props.ts index a10474f564390f7e9fec5ab7ada8e2d0fe667bed..8d0440a03c95dccb0d7db07c3e75e911f88fe67a 100644 --- a/packages/ui-vue/components/rate/src/rate.props.ts +++ b/packages/ui-vue/components/rate/src/rate.props.ts @@ -18,7 +18,7 @@ import { createPropsResolver } from '../../dynamic-resolver/src/props-resolver'; import { schemaMapper } from './schema/schema-mapper'; import { schemaResolver } from './schema/schema-resolver'; import rateSchema from './schema/rate.schema.json'; -import propertyConfig from './property-config/rate.property-config.json'; +// import propertyConfig from './property-config/rate.property-config.json'; const toolTipContents = ['很不满意', '不满意', '一般', '满意', '非常满意']; @@ -26,7 +26,7 @@ export const rateProps = { /** 星星大小 */ size: { type: String, default: 'large' }, /** 启用半颗星模式 */ - enableHalf: { type: Boolean, default: false }, + enableHalf: { type: Boolean, default: true }, /** 启用再次点击后清除 */ enableClear: { type: Boolean, default: false }, /** 只读 */ @@ -34,9 +34,9 @@ export const rateProps = { /** 分制 */ pointSystem: { type: Number, default: 5 }, /** 星星亮色 */ - lightColor: { type: String, default: '' }, - /** 星星暗色(底色) */ - darkColor: { type: String, default: '' }, + lightColor: {type: String,default: '#ffd700' }, + darkColor: {type: String,default: '#dcdcdc'}, + /** 图案样式 */ iconClass: { type: String, default: 'f-icon-star' }, /** 星星个数 */ @@ -44,7 +44,7 @@ export const rateProps = { /** 禁用单个星星的文字提示 */ toolTipDisabled: { type: Boolean, default: true }, /** 默认的满意度文案 */ - toolTipContents: { type: Array as PropType, default: toolTipContents }, + toolTipContents: { type: Array as PropType, default: ['很不满意', '不满意', '一般', '满意', '非常满意'] }, /** 启用评分 */ enableScore: { type: Boolean, default: true }, /** 启用满意度 */ @@ -57,4 +57,4 @@ export const rateProps = { } as Record; export type RateProps = ExtractPropTypes; -export const propsResolver = createPropsResolver(rateProps, rateSchema, schemaMapper, schemaResolver, propertyConfig); +export const propsResolver = createPropsResolver(rateProps, rateSchema, schemaMapper, schemaResolver); diff --git a/packages/ui-vue/components/rate/src/schema/rate.schema.json b/packages/ui-vue/components/rate/src/schema/rate.schema.json index 312d00b3f4e98dd8842832e2ae6230ac0ba66d1e..c2d8f738b3c0c3df896e84d3852cdf815e1cab28 100644 --- a/packages/ui-vue/components/rate/src/schema/rate.schema.json +++ b/packages/ui-vue/components/rate/src/schema/rate.schema.json @@ -32,9 +32,10 @@ "type": "object", "default": {} }, - "disable": { - "type": "string", - "default": false + "disabled": { + "type": "boolean", + "default": false, + "description": "" }, "editable": { "description": "", @@ -65,7 +66,85 @@ "description": "", "type": "boolean", "default": true - } + }, + "size": { + "title": "组件大小", + "type": "string", + "description": "", + "default": "large", + "enum": ["small", "middle", "large", "extraLarge"], + "x-display-value": { + "small": "小号", + "middle": "中号", + "large": "大号", + "extraLarge": "超大号" + } + }, + "numOfStar": { + "type": "number", + "minimum": 1, + "maximum": 5, + "default": 5, + "description": "" + }, + "pointSystem": { + "type": "number", + "default": 5, + "description": "" + }, + "enableClear": { + "type": "boolean", + "default": false, + "description": "" + }, + "lightColor": { + "type": "string", + "default": "", + "description": "" + }, + "darkColor": { + "type": "string", + "default": "", + "description": "" + }, + "iconClass": { + "type": "string", + "default": "f-icon-star", + "description": "" + }, + "toolTipContents": { + "type": "array", + "items": { "type": "string" }, + "default": ["很不满意", "不满意", "一般", "满意", "非常满意"], + "description": "" + }, + "enableSatisfaction":{ + "type": "boolean", + "default": false, + "description": "" + }, + "modelValue": { + "type": "number", + "default": 0, + "description": "" + }, + "enableScore": { + "type": "boolean", + "default": true, + "description": "" + }, + "enableHalf":{ + "type":"boolean", + "default": true, + "description": "" + }, + "disable": { + "type": "boolean", + "default": false, + "description": "" + } + + }, "required": [ "id",