SMDocEditor/src/views/Home/subCom/MainWrapper.vue

<script setup lang="ts">
import { provide, inject } from 'vue'
import { reactive } from 'vue'
import type { IWidgetJson } from '@/types/widgetsConfigInterface'
import RendererDom from '@/components/RendererDom.vue'

// 文书结构
const widgetJson = inject<IWidgetJson>('widgetJson')!

// 文书表单
const docForm = reactive({})
provide('docForm', docForm)
</script>

<template>
  <section class="editWrapper">
    <h1 class="text-sky-300">{{ widgetJson }}</h1>
    <el-form :model="docForm" label-width="80px">
      <template v-for="item in widgetJson['subDomList']" :key="item['id']">
        <RendererDom :itemData="item" />
      </template>
    </el-form>
  </section>
</template>


<style lang="scss" scoped>
.editWrapper {
  --active-color: #409EFF;

  :deep(.table-container) {
    box-sizing: border-box;
    padding: 8px;
    border: 1px dashed var(--el-color-primary);

    table {
      border: none;

      td {
        border: 1px dashed var(--el-color-primary);
      }
    }

    &.activeDom,
    .activeDom {
      outline: 2px solid var(--active-color);
      padding: 16px;
      position: relative;
    }

    &.activeDomWrapper,
    .activeDomWrapper {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0px 12px;
      background-color: var(--active-color);
      color: #fff;
      font-size: 13px;
    }

    &.fnArea,
    .fnArea {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 2px 4px;
      background-color: var(--active-color);
      color: #fff;
      font-size: 18px;
      display: flex;
      align-items: center;

      div {
        margin: 0 4px;
        cursor: pointer;
      }
    }
  }
}
</style>