fix🐛: 一些已知错误

Author: 梓安

README.md

@@ -1,5 +1,5 @@
 # lowcode-vue3
-> 简易版低代码平台架子
+> 简易版低代码平台架子（仅供参考和学习）
 
 ## 在线Demo
 [Demo](https://zian502.github.io/lowcode-vue3/#/lowcode/worksheet)

src/core/components/layout/Form.vue

@@ -26,9 +26,11 @@
                 :name="element.options.layouts.formItem.name"
                 :label="element.options.layouts.formItem.label"
                 :rules="element.options.layouts.formItem.rules"
-              >
+                >
                 <renderer layout="form" :type="element.type" :globalOptions="worksheetData.options" :componentOptions="element.options" />
               </a-form-item>
+              <!-- mask layer -->
+              <div class="mask-layer-container" @click="handleSelect(element)"></div>
             </a-col>
           </template>
         </draggable>
@@ -38,6 +40,9 @@
 <script lang="ts">
 import createReactive from '/@/core/utils/createReacitve'
 import draggable from "vuedraggable";
+import { useSchemesStore } from '/@/store/modules/scheme';
+
+const store = useSchemesStore();
 
 export default defineComponent({
   components: {
@@ -62,7 +67,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { compProps, compMock } = props;
+    const { compProps, compMock, child } = props;
+
+    let recordWidget = ref([]);
     let data = createReactive({
       compProps,
       compMock,
@@ -71,6 +78,16 @@ export default defineComponent({
     const handleAdd = (e) => {
       console.log('add')
       console.log(e)
+      const curWidget = e.item._underlying_vm_;
+      recordWidget.value = {...curWidget, ...{ parentId: child.id }};
+      // set recordWidget
+      store.handleSetRecordWidget(recordWidget.value);
+    }
+
+    const handleSelect = (selectd) => {
+      recordWidget.value = selectd;
+      // set recordWidget
+      store.handleSetRecordWidget(recordWidget.value);
     }
 
     return {
@@ -86,6 +103,7 @@ export default defineComponent({
       wrap: toRefs(data).wrap,
       styles: toRefs(data).styles,
       handleAdd,
+      handleSelect,
     }
   },
 })

src/pages/worksheet/components/midAside.vue

@@ -26,13 +26,13 @@
               <a-col :class="classOfAcol(child)" :span="worksheetData.layouts.props.span">
                 <renderer 
                   :type="child.type" 
-                  :worksheetData="worksheetData" 
+                  :worksheetData="worksheetData"
                   :child="child"
                   :globalOptions="worksheetData.options" 
                   :componentOptions="child.options" 
                   />
                   <!-- mask layer -->
-                  <div class="mask-layer-container"></div>
+                  <div v-if="child.type !== 'layout-form'" class="mask-layer-container" @click="handleSelect(child)"></div>
               </a-col>
             </template>
         </draggable>
@@ -92,16 +92,18 @@ export default defineComponent({
       }) => {
         after(result => {
           console.log('name', name)
+          data.recordWidget = store.getRecordWidget
           if(name === 'setFieldValue') {
-            data.recordWidget = store.getRecordWidget
             _updateWorksheetData(data.recordWidget.parentId, data.recordWidget.id, data.recordWidget)
           } else if (name === 'handleSetRecordWidget') {
             // update setters
             // clone deep
             setters.value = _cloneDeep(data.recordWidget.options.setters);
+            console.log('setters', setters)
+            console.log('data.recordWidget', data.recordWidget)
+            console.log('data.worksheetData', data.worksheetData)
             const setterFieldsPath = data.recordWidget.options.mock.setterFieldsPath || [];
             _updateRecordSetters(data.recordWidget.parentId, data.recordWidget.id, setterFieldsPath)
-            console.log('data.recordWidget', data.recordWidget)
           }
         })
 
@@ -228,7 +230,7 @@ export default defineComponent({
       obj.childs.push(widget.value);
       data.worksheetData.widgets.splice(newIndex, 0, obj); //
       // set recordWidget
-      store.handleSetRecordWidget(widget.value);
+      store.handleSetRecordWidget(data.recordWidget);
       _deleteNode();
     }
 
@@ -249,7 +251,6 @@ export default defineComponent({
     }
 
     const classOfAcol = (val) => {
-      console.log('val', val)
       const type = val.type;
       return [
         type === 'layout-form' || type === 'layout-grid' ? 'form-border' : 'border',
@@ -261,6 +262,12 @@ export default defineComponent({
         { 'selected': data.recordWidget.id === val.id }
       ]
     }
+    
+    const handleSelect = (selectd) => {
+      data.recordWidget = selectd;
+      // set recordWidget
+      store.handleSetRecordWidget(data.recordWidget);
+    }
 
     return {
       ...toRefs(data),
@@ -271,6 +278,7 @@ export default defineComponent({
       handleChildAdd,
       handleChildEnd,
       classOfAcol,
+      handleSelect,
     }
   },
 })

src/pages/worksheet/components/rightAside.vue

@@ -28,6 +28,7 @@ export default defineComponent({
           worksheetData.value = store.getWorksheetData
           setterData.value = store.getSetterData
           recordWidget.value = store.getRecordWidget
+          console.log('recordWidget', recordWidget)
         })
 
         onError(error => {