MOM-UI/src/views/tool/draggable/formBoard.vue

<script lang="ts">
import hwInputView from './viewElements/hw-input-view.vue';
import hwFormView from './viewElements/hw-form-view.vue';
import hwTableView from './viewElements/hw-table-view.vue';

export default {
  name: 'hw-form',
  components: {
    hwInputView,
    hwFormView,
    hwTableView
  }
};
</script>

<template>
  <div class="hw-form">
    <div v-for="i in widgetList" :key="i.uuid">
      <component :is="i.type+'-view'" :options="i.options" :tasks="i.tasks" :formData="formData" />
    </div>
  </div>

</template>

<script lang="ts" setup>

const props = defineProps({
  widgetList: Object
});

const { widgetList } = toRefs(props);

const formData = ref({ pageVariable: {} });
provide('globalFormData', formData);
const formDataOperation = {
  get: (key) => {
    return formData.value.pageVariable[key];
  },
  set: (key, value) => {
    formData.value.pageVariable[key] = value;
  }
};
provide('formDataOperation', formDataOperation);
</script>
<style scoped lang="less">
.hw-form {
  min-height: 20px;
  border: 1px dashed #ccc;
  margin: 2px;
  padding: 2px;
  position: relative;

  &:hover {
    background-color: #0001;
    border-color: #00afff;
  }
}
</style>