web_dist/src/views/utilities/page-editor-help/PageEditorHelp.vue

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {collapseData, generateRandomString} from "../../../components/query-components/page-help.ts";
import XcQuery from "../../../components/query-components/XcQuery.vue";
import {componentType, headerType} from "../../../components/query-components/page-help-type";
import PageEditotInfo from "./PageEditorInfo.vue";
import {clone} from "xe-utils";
import PageForm from "../../../views/utilities/page-editor-help/PageForm.vue";
import XcTable from "../../../components/query-components/XcPageTable.vue";

const activeNames = ref(['1', '2', '3'])
const infoRef = ref()
const tabs = ref('form')

const addEl = (val: headerType) => {
  let key = generateRandomString(5)
  let data = val
  if (!val.bind) {
    data['bind'] = {}
  }
  data.key = key
  pageJson.value.header.push(clone(data, true))
  pageJson.value.queryParam[key] = val.defaultValue
}

const pageJson = ref<componentType>({
  header: [],
  querySql: "",
  queryParam: {},
  formConfig: {
    inline: true
  },
  submitEvent: `function func(queryData,config,axios){

}`,
  tableConfig: {
    border: true,
  }
})

const theCurrentComponent = ref(-1)
const itemClick = (data: headerType, index) => {
  infoRef.value.editComp(data)
  theCurrentComponent.value = index
}

onMounted(() => {
  // addEl(collapseData[0].children[0])
  // addEl(collapseData[0].children[1])
  // addEl(collapseData[1].children[0])
  addEl(collapseData[1].children[1])
  addEl(collapseData[2].children[0])
})

</script>

<template>
  <el-container style="background-color: white">
    <el-aside>
      <el-collapse v-model="activeNames">
        <el-collapse-item :title="item.title"
                          :name="item.name"
                          v-for="item in collapseData">
          <el-row :gutter="6"
                  style="margin: 5px">
            <el-col :span="12"
                    @contextmenu.prevent="addEl(child)"
                    v-for="child in item.children"
                    class="field-widget-item">
              {{ child.label }}
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-aside>
    <el-main>
      <el-auto-resizer>
        <template #default="{ height, width }">
          <div style="display: flex; overflow-y: auto" :style="{height: height -50 +'px'}">
            <div style="flex: 1; box-sizing: border-box">
              <xc-query v-model:testJson="pageJson"
                        @delClick="infoRef.setShow(false)"
                        v-model:current-index="theCurrentComponent"
                        @item-click="itemClick"/>
              <xc-table :test-json="pageJson"/>
            </div>
            <div class="right_box">
              <el-tabs v-model="tabs">
                <el-tab-pane label="组件配置" name="subassembly">
                  <page-editot-info ref="infoRef"
                                    :page-json="pageJson"
                                    v-model:data="pageJson.header[theCurrentComponent]"/>
                </el-tab-pane>
                <el-tab-pane label="表单配置" name="form">
                  <page-form :page-json="pageJson"/>
                </el-tab-pane>
                <el-tab-pane label="表单配置" name="table">

                </el-tab-pane>
              </el-tabs>

            </div>
          </div>
        </template>
      </el-auto-resizer>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
.field-widget-item {
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e9eb;
  border-radius: 4px;
  text-align: center;
}

.right_box {
  width: 320px;
  border: 1px solid #e8e9eb;
  padding: 5px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>