feat(TinyTabs): 选项卡组件配置项的modelValue改为select组件，且其options随着选项卡而变化

mockServer/assets/json/bundle.json

@@ -4318,7 +4318,7 @@
                 "defaultValue": ""
               }
             },
-            "onBeforeMount": "console.log('table on load'); this.options = source.data"
+            "onBeforeMount": "this.options = source.data"
           },
           "configure": {
             "loop": true,
@@ -5832,6 +5832,7 @@
                     "required": true,
                     "readOnly": false,
                     "disabled": false,
+                    "onChange": "function(val) { this.setPropertyProps('modelValue', { 'options': val }) }",
                     "defaultValue": "",
                     "cols": 12,
                     "bindState": false,
@@ -5842,7 +5843,7 @@
                     "description": {
                       "zh_CN": "tabs"
                     },
-                    "labelPosition": "none"
+                    "labelPosition": "top"
                   },
                   {
                     "property": "modelValue",
@@ -5856,13 +5857,25 @@
                     "disabled": false,
                     "cols": 12,
                     "widget": {
-                      "component": "MetaInput",
-                      "props": {}
+                      "component": "MetaSelect",
+                      "props": {
+                        "clearable": false,
+                        "options": [
+                          {
+                            "label": "标签页1",
+                            "value": "first"
+                          },
+                          {
+                            "label": "标签页2",
+                            "value": "second"
+                          }
+                        ]
+                      }
                     },
                     "description": {
                       "zh_CN": "绑定值，选中选项卡的 name"
                     },
-                    "labelPosition": "left"
+                    "labelPosition": "top"
                   },
                   {
                     "property": "with-add",
@@ -7536,7 +7549,7 @@
             "contentMenu": {
               "actions": ["create symbol"]
             },
-            "onBeforeMount": "console.log('table on load'); this.pager = source.pager; this.fetchData = source.fetchData; this.data = source.data ;this.columns = source.columns"
+            "onBeforeMount": "this.pager = source.pager; this.fetchData = source.fetchData; this.data = source.data ;this.columns = source.columns"
           },
           "configure": {
             "loop": true,
@@ -9819,7 +9832,17 @@
               "schema": {
                 "componentName": "TinyTabs",
                 "props": {
-                  "modelValue": "first"
+                  "modelValue": "first",
+                  "tabs": [
+                    {
+                      "label": "标签页1",
+                      "value": "first"
+                    },
+                    {
+                      "label": "标签页2",
+                      "value": "second"
+                    }
+                  ]
                 },
                 "children": [
                   {

packages/common/component/ConfigItem.vue

@@ -364,7 +364,7 @@ export default {
 
     const executeRelationAction = (value, preValue) => {
       const { onChange, rules } = props.property
-      const { setProp, delProp } = useProperties()
+      const { setProp, delProp, setPropertyProps } = useProperties()
 
       // 关联
       if (onChange && propsObj) {
@@ -374,6 +374,7 @@ export default {
             config: {
               ...widget.value?.props
             },
+            setPropertyProps,
             setProp: setProp,
             delProp
           })

packages/common/component/MetaContainer.vue

@@ -4,7 +4,7 @@
       <template #content="{ data }">
         <div class="item-text">
           <div class="tiny-input">
-            <input v-model="data.props.title" class="tiny-input__inner" />
+            <input v-model="data.props.title" @input="labelChange" class="tiny-input__inner" />
           </div>
         </div>
       </template>
@@ -20,7 +20,7 @@
   </div>
 </template>
 <script>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import MetaListItems from './MetaListItems.vue'
 import { useProperties, useResource, useHistory } from '@opentiny/tiny-engine-controller'
 import { utils } from '@opentiny/tiny-engine-utils'
@@ -31,7 +31,13 @@ export default {
     MetaListItems,
     IconDel: iconDel()
   },
-  setup() {
+  props: {
+    modelValue: Array,
+    default: () => []
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const tabsOptions = ref([])
     const { children: schemaChildren, componentName } = useProperties().getSchema()
     const configureMap = useResource().getConfigureMap()
     const childComponentName =
@@ -63,6 +69,7 @@ export default {
 
     const delChildren = (data) => {
       schemaChildren.splice(children.value.indexOf(data), 1)
+      tabsOptions.value = tabsOptions.value.filter((option) => option.value !== data.props.name)
       children.value = [...schemaChildren]
       useHistory().addHistory()
     }
@@ -81,7 +88,29 @@ export default {
       children.value = [...list]
     }
 
-    return { children, addChildren, delChildren, dragEnd }
+    const updateTabsOptions = (schema) => {
+      tabsOptions.value = schema.map((item) => {
+        return {
+          label: item.props.title,
+          value: item.props.name
+        }
+      })
+      emit('update:modelValue', tabsOptions.value)
+    }
+
+    const labelChange = () => {
+      updateTabsOptions(children.value)
+    }
+
+    watch(
+      () => children.value,
+      (value) => {
+        updateTabsOptions(value)
+      },
+      { deep: true, immediate: true }
+    )
+
+    return { children, addChildren, delChildren, labelChange, dragEnd }
   }
 }
 </script>

packages/common/component/MetaSelect.vue

@@ -4,7 +4,7 @@
     :multiple="multi"
     :is-drop-inherit-width="true"
     :show-alloption="false"
-    :clearable="true"
+    :clearable="clearable"
     @change="handleChange"
   >
     <template v-if="groups?.length">
@@ -70,6 +70,10 @@ export default {
     options: {
       type: Array,
       default: () => []
+    },
+    clearable: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue'],

packages/controller/src/useProperties.js

@@ -11,12 +11,13 @@
  */
 
 import { toRaw, nextTick, shallowReactive, ref } from 'vue'
-import { constants } from '@opentiny/tiny-engine-utils'
+import { constants, utils } from '@opentiny/tiny-engine-utils'
 import useCanvas from './useCanvas'
 import useResource from './useResource'
 import useTranslate from './useTranslate'
 
 const { COMPONENT_NAME } = constants
+const { delNullKey } = utils
 const propsUpdateKey = ref(0)
 
 const otherBaseKey = {
@@ -153,6 +154,90 @@ const properties = shallowReactive({
 
 const isPageOrBlock = (schema) => [COMPONENT_NAME.Block, COMPONENT_NAME.Page].includes(schema?.componentName)
 
+const getPropertyItem = (propertyName, properties) => {
+  const { pageState } = useCanvas()
+
+  if (!properties) {
+    properties = pageState.properties
+  }
+  let propertyItem = null
+  properties.some((property) => {
+    return property.content.some((item) => {
+      if (item.property === propertyName) {
+        propertyItem = item
+        return true
+      }
+      if (item.properties) {
+        propertyItem = getPropertyItem(propertyName, item.properties)
+        return propertyItem
+      }
+      return false
+    })
+  })
+  return propertyItem
+}
+
+/**
+ * get property value
+ * @param {string} propertyName
+ * @returns any
+ */
+const getPropertyValue = (propertyName) => {
+  const propertyItem = getPropertyItem(propertyName)
+  return propertyItem?.widget?.props?.modelValue
+}
+
+/**
+ * set property value
+ * @param {string} propertyName
+ * @param {any} value
+ */
+const setPropertyValue = async (propertyName, value) => {
+  const propertyItem = getPropertyItem(propertyName)
+  if (propertyItem?.widget?.props) {
+    await nextTick()
+    propertyItem.widget.props.modelValue = value
+  }
+}
+
+/**
+ * get property props
+ * @param {string} propertyName
+ * @returns object
+ */
+const getPropertyProps = (propertyName) => {
+  const propertyItem = getPropertyItem(propertyName)
+  return propertyItem?.widget?.props
+}
+
+/**
+ * set property props
+ * @param {string} propertyName
+ * @param {object} props
+ */
+const setPropertyProps = (propertyName, props = {}) => {
+  const propertyItem = getPropertyItem(propertyName)
+  if (propertyItem?.widget?.props) {
+    const realProps = delNullKey(props, { deep: false, keepRef: true })
+    if (!propertyItem?.widget?.props) {
+      propertyItem.widget.props = {}
+    }
+    Object.assign(propertyItem.widget?.props, realProps)
+  }
+}
+
+const getPropertyHidden = (propertyName) => {
+  const propertyItem = getPropertyItem(propertyName)
+  return propertyItem?.hidden ?? false
+}
+
+const setPropertyHidden = (propertyName, hidden) => {
+  const propertyItem = getPropertyItem(propertyName)
+  if (propertyItem) {
+    propertyItem.hidden = Boolean(hidden)
+  }
+}
+
 const getProps = (schema, parent) => {
   // 1 现在选中的节点和当前节点一样，不需要重新计算, 2 默认进来由于scheme和properities.schema相等，因此判断如果是“页面或者区块”需要进入if判断
   if (schema && (properties.schema !== schema || isPageOrBlock(schema))) {
@@ -219,6 +304,12 @@ const setProps = (schema) => {
 
 export default function () {
   return {
+    getPropertyHidden,
+    setPropertyHidden,
+    getPropertyValue,
+    setPropertyValue,
+    getPropertyProps,
+    setPropertyProps,
     getProps,
     getProp,
     setProps,