feat linkage

packages/elements/Cascader/attrSchema.ts

@@ -3,8 +3,59 @@ import type { FormSchema } from '@vue-form-craft/types'
 export default {
   size: 'small',
   labelAlign: 'top',
+  initialValues: {
+    label: '级联选择器',
+    props: {
+      placeholder: '请选择...',
+      mode: 'static',
+      options: [
+        {
+          label: '选项1',
+          value: 'value1',
+          children: [
+            {
+              label: '选项1-1',
+              value: 'value1-1'
+            },
+            {
+              label: '选项1-2',
+              value: 'value1-2'
+            },
+            {
+              label: '选项1-3',
+              value: 'value1-2'
+            }
+          ]
+        },
+        {
+          label: '选项2',
+          value: 'value2',
+          children: [
+            {
+              label: '选项2-1',
+              value: 'value2-1'
+            },
+            {
+              label: '选项2-2',
+              value: 'value2-2'
+            },
+            {
+              label: '选项2-3',
+              value: 'value2-2'
+            }
+          ]
+        },
+        {
+          label: '选项3',
+          value: 'value3'
+        }
+      ],
+      labelKey: 'label',
+      valueKey: 'value'
+    }
+  },
   items: [
-    { label: '标签', component: 'Input', name: 'label', initialValue: '级联选择器' },
+    { label: '标签', component: 'Input', name: 'label' },
     {
       label: '唯一标识',
       component: 'Input',
@@ -16,8 +67,7 @@ export default {
       label: '占位提示',
       component: 'Input',
       name: 'props.placeholder',
-      designKey: 'form-ekRL',
-      initialValue: '请选择...'
+      designKey: 'form-ekRL'
     },
     {
       component: 'Grid',
@@ -33,8 +83,7 @@ export default {
         'column-gap': 20
       },
       designKey: 'form-R003',
-      name: 'cNmCuu',
-
+      name: 'cNmCuu'
     },
     {
       label: '选择模式',
@@ -47,6 +96,13 @@ export default {
       designKey: 'form-eTxc'
     },
 
+    {
+      label: '显示每一级',
+      component: 'Switch',
+      name: 'props.showAllLevels',
+      initialValue: true
+    },
+
     {
       component: 'Divider',
       props: {
@@ -63,15 +119,13 @@ export default {
       label: '标签key',
       component: 'Input',
       name: 'props.labelKey',
-      designKey: 'form-X6hs',
-      initialValue: 'label'
+      designKey: 'form-X6hs'
     },
     {
       label: '值Key',
       component: 'Input',
       name: 'props.valueKey',
-      designKey: 'form-STkl',
-      initialValue: 'value'
+      designKey: 'form-STkl'
     },
     {
       label: '数据模式',
@@ -99,49 +153,7 @@ export default {
       label: '静态选项',
       name: 'props.options',
       component: 'JsonEdit',
-      dialog: true,
-      initialValue: [
-        {
-          label: '选项1',
-          value: 'value1',
-          children: [
-            {
-              label: '选项1-1',
-              value: 'value1-1'
-            },
-            {
-              label: '选项1-2',
-              value: 'value1-2'
-            },
-            {
-              label: '选项1-3',
-              value: 'value1-2'
-            }
-          ]
-        },
-        {
-          label: '选项2',
-          value: 'value2',
-          children: [
-            {
-              label: '选项2-1',
-              value: 'value2-1'
-            },
-            {
-              label: '选项2-2',
-              value: 'value2-2'
-            },
-            {
-              label: '选项2-3',
-              value: 'value2-2'
-            }
-          ]
-        },
-        {
-          label: '选项3',
-          value: 'value3'
-        }
-      ]
+      dialog: true
     },
     {
       component: 'Card',

packages/elements/FormList/FormList.vue

@@ -180,7 +180,6 @@ const formatter = (row: any, column: TableColumnCtx<any>, cellValue: any, index:
 
 // formList 值联动
 watch(list, (newVal, oldVal) => {
-  console.log(newVal, oldVal)
 
   const changeIndex = newVal.reduce((acc, cur, index) => {
     if (!isEqual(cur, oldVal[index])) {

packages/form-design/Right/AttrEdit/LinkageConfig/Config.vue

@@ -1,15 +1,64 @@
 <template>
-  <el-dialog destroy-on-close v-model="visible" top="3vh"  title="配置级联动" width="70vw">
-    <FormRender v-model="designInstance.current!" :schema="configSchema" />
+  <el-dialog
+    destroy-on-close
+    v-model="visible"
+    top="3vh"
+    :title="`${designInstance.current?.label} - 配置级联动`"
+    width="70vw"
+    center
+  >
+    <div class="config-linkages">
+      <div class="quick">
+        <FormRender v-model="quickValues" :schema="quickSchema(designInstance.schema)" />
+        <el-button
+          v-if="quickValues.quick?.length"
+          @click="handleUseQuick"
+          style="margin-bottom: 20px"
+          type="primary"
+          >应用快速配置</el-button
+        >
+      </div>
+      <FormRender v-model="designInstance.current!" :schema="editSchema" class="edit" />
+    </div>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
 import FormRender from '@vue-form-craft/form-render'
-import configSchema from './configSchema'
+import { quickSchema, editSchema } from './configSchema'
 import { useDesignInstance } from '@vue-form-craft/hooks'
+import { ref } from 'vue'
+import { setDataByPath } from '@vue-form-craft/utils'
 
 const designInstance = useDesignInstance()
 
 const visible = defineModel<boolean>()
+
+const quickValues = ref<Record<string, any>>({})
+
+const handleUseQuick = () => {
+  console.log(quickValues.value.quick);
+  
+  quickValues.value.quick.map((item) => {
+    const { name, type, variable } = item
+
+    if (type === 'var') {
+      const newCurrent = setDataByPath(designInstance.current!, name, `{{ ${variable.slice(1).join('.')} }}`)
+      designInstance.updateCurrent(newCurrent)
+    }
+  })
+}
 </script>
+
+<style lang="scss" scoped>
+.config-linkages{
+  display: flex;
+  gap: 20px;
+  .quick{
+    width: 50%;
+  }
+  .edit{
+    width: 50%;
+  }
+}
+</style>