wui-components-v2 1.1.70 → 1.1.72

package/components/wui-edit-page/wui-edit-page.vue

@@ -1,793 +1,793 @@
-<script lang="ts" setup>
-import { computed, defineOptions, onBeforeMount, onUnmounted, ref, toRaw } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-import { useRouter } from 'uni-mini-router'
-import FormControl from '../form-control/form-control.vue'
-import { addPageConfig, editPageConfig, editPageDataSave, enums, selectDatas } from '../../api/page'
-import type { Entities, Enums, Groups, dtmplConfig } from '../../type'
-import { useGlobalToast } from '../../composables/useGlobalToast'
-import foldCard from '../fold-card/fold-card.vue'
-import { generateHighResolutionID } from '../../utils/index'
-import TreeSelectControl from '../tree-select/index.vue'
-import batchUploadFile from '../batch-upload-file/batch-upload-file.vue'
-
-defineOptions({
-  name: 'WuiEditPage',
-})
-const props = defineProps<{
-  companyFilter?: boolean
-  companyFieldSourceId?: string
-}>()
-const pageConfig = ref<dtmplConfig>({
-  id: '',
-  title: '',
-  groups: [],
-  entity: {
-    arrayMap: {},
-    code: '',
-    fieldMap: {},
-  },
-  buttons: [],
-  smartPaste: false,
-})
-const tree = ref({ value: '', sourceId: '' })
-const loading = ref(false)
-const globalToast = useGlobalToast()
-const router = useRouter()
-const mainCode = ref('')
-const id = ref('')
-const sourceId = ref('')
-const formControlRef = ref()
-const subLoading = ref(false)
-const Enumcolumn = ref<Enums | undefined>()
-const pageTitle = ref('')
-const pageType = ref('')
-const selectData = ref<{ [key: string]: { loading: boolean, data: string[] } }>({})
-const rowData = ref<{ [key: string]: { [key: string]: any } }>({})
-const action = ref('')
-const hydrocarbonProgramToken = ref('')
-const token = ref('')
-// 全局事件名称
-const SELECTEVENT = generateHighResolutionID()
-const SENDSELECTEVENT = generateHighResolutionID()
-const addEvent = ref('')
-const editEvent = ref('')
-const rowAddEvent = ref('')
-const sendRowAddEvent = ref('')
-const smartPaste=ref(false)
-// 折叠面板
-const collapses = ref('')
-const groupsformat = computed(() => {
-  return pageConfig.value.groups.filter((item: Groups) => {
-    return item.displayConfig.includes('displayed')
-  })
-})
-const canSmartPaste=computed(()=>{
-  return pageConfig.value?.smartPaste??false
-})
-onLoad((option: any) => {
-  sourceId.value = option.sourceId
-  mainCode.value = option.mainCode || ''
-  id.value = option.id || ''
-  pageTitle.value = option.title
-  addEvent.value = option.addEvent
-  editEvent.value = option.editEvent
-  pageType.value = option.pageType || ''
-  rowAddEvent.value = option.rowAddEvent
-  sendRowAddEvent.value = option.sendRowAddEvent
-  getEditPageConfig()
-})
-
-onUnmounted(() => {
-  console.log('页面卸载')
-  // 勿在卸载时 $off 勾选事件：跳转勾选页会触发 onUnmounted，导致 $once(SELECTEVENT) 被提前移除
-  uni.$off(rowAddEvent.value)
-  // uni.$off(addEvent.value)
-  uni.$off(editEvent.value)
-  uni.$off(sendRowAddEvent.value)
-})
-
-onBeforeMount(() => {
-  action.value = uni.getStorageSync('BASE_URL')
-  hydrocarbonProgramToken.value = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN')
-  token.value = uni.getStorageSync('TOKEN')
-})
-// 获取编辑页面配置
-async function getEditPageConfig() {
-  // 判断是否为行新增事件
-  if (sendRowAddEvent.value) {
-    uni.$once(sendRowAddEvent.value, (conf: any) => {
-      console.log('sendRowAddEvent.value', conf)
-      pageConfig.value = {
-        id: '',
-        title: '行添加',
-        groups: conf.groups,
-        entity: conf.entity || {
-          arrayMap: {},
-          code: '',
-          fieldMap: {},
-        },
-        buttons: [],
-      }
-      getEnums()
-      uni.$off(sendRowAddEvent.value)
-    })
-    setTimeout(() => {
-      const visibleGroups = pageConfig.value.groups.filter((item: Groups) => item.displayConfig.includes('displayed'))
-      collapses.value = visibleGroups.length > 0 ? visibleGroups[0].id : ''
-    }, 100)
-
-    return
-  }
-
-  try {
-    let res = null
-    loading.value = true
-    if (id.value) {
-      res = await editPageConfig(sourceId.value, id.value)
-    }
-    else {
-      res = await addPageConfig(sourceId.value)
-    }
-    loading.value = false
-    // 初始化折叠面板
-      if (res.dtmplConfig) {
-        uni.setNavigationBarTitle({
-          title: `${res.dtmplConfig.title}`,
-        })
-        pageConfig.value = res.dtmplConfig
-        const visibleGroups = pageConfig.value.groups.filter((item: Groups) => item.displayConfig.includes('displayed'))
-        collapses.value = visibleGroups.length > 0 ? visibleGroups[0].id : ''
-
-      pageConfig.value.groups.forEach((item: Groups) => {
-        // 初始化勾选数据
-        if (item.type === 'relation' && (item.buttons.includes('dtmplAdd') || item.buttons.includes('selectAdd'))) {
-          selectData.value[item.id] = {
-            data: (pageConfig.value.entity && pageConfig.value.entity.arrayMap[item.id]?.map((sebitem: any) => {
-              return `${sebitem.code}`
-            })) || [],
-            loading: false,
-          }
-        }
-        // 初始化行数据
-        if (item.type === 'relation' && item.buttons.includes('rowAdd')) {
-          rowData.value[item.id] = (pageConfig.value.entity && pageConfig.value.entity.arrayMap[item.id]?.map((sebitem: any) => {
-            return {
-              id: sebitem.code,
-              ...sebitem.fieldMap,
-            }
-          })) || []
-        }
-      })
-      getEnums()
-    }
-  }
-  catch (error) {
-    loading.value = false
-    console.log('error:', error)
-  }
-}
-// 获取枚举
-async function getEnums() {
-  try {
-    const params: string[] = []
-    pageConfig.value.groups?.forEach((item: any) => {
-      item.fields?.forEach((subItem: any) => {
-        if (subItem.extControlType === 'select' || subItem.extControlType === 'multiselect') {
-          params.push(`mstrucIds=${subItem.mstrucId}`)
-        }
-      })
-    })
-    if (!params.length)
-      return
-    const res = await enums(params.join('&'))
-    Enumcolumn.value = res.enumMap || {}
-  }
-  catch (error) {
-    console.log('error:', error)
-  }
-}
-
-// 行添加保存
-async function rowAddSave(all: any) {
-  console.log('行数据', all)
-  router.back()
-  uni.$emit(rowAddEvent.value, all)
-}
-
-// 保存
-async function save() {
-  // 判断是否为树添加
-  if (pageType.value === '树' && !tree.value.value) {
-    return globalToast.warning('请选择分组')
-  }
-
-  try {
-    const formArray: any[] = []
-    formControlRef.value.forEach((element: any) => {
-      formArray.push(element.submit())
-    })
-    const res = await Promise.all(formArray)
-    const beasData = res.reduce((acc, cur) => {
-      return { ...acc, ...cur }
-    }, {})
-    subLoading.value = true
-
-    /**
-     *
-     * 421639572264099847.$$flag$$:true
-       421639572264099847[0].$$relation$$:拥有角色
-       421639572264099847[0].唯一编码:448591711817211909
-     */
-    let all: Record<string, any> = {}
-    for (const key in selectData.value) {
-      if (Object.prototype.hasOwnProperty.call(selectData.value, key)) {
-        const element = selectData.value[key].data
-        if (element) {
-          all[`${key}.$$flag$$`] = true
-          element.forEach((item, index) => {
-            all[`${key}[${index}].$$relation$$`] = pageConfig.value.groups.find(item => item.id === key)?.relationNames[0]
-            if (typeof item === 'string') {
-              all[`${key}[${index}].唯一编码`] = item.split('@R@')[0]
-            }
-          })
-        }
-      }
-    }
-    console.log('rowData.value', rowData.value)
-    for (const key in rowData.value) {
-      if (Object.prototype.hasOwnProperty.call(rowData.value, key)) {
-        const element1 = rowData.value[key]
-        if (element1) {
-          all[`${key}.$$flag$$`] = true
-          element1.forEach((item: any, index: any) => {
-            all[`${key}[${index}].$$relation$$`] = pageConfig.value.groups.find(item => item.id === key)?.relationNames[0]
-            all[`${key}[${index}].唯一编码`] = item.id
-
-            for (const key1 in item) {
-              if (Object.prototype.hasOwnProperty.call(item, key1)) {
-                console.log('item[key1]', item[key1])
-                if (item[key1] && item[key1].response) {
-                  all[`${key}[${index}].${key1}`] = JSON.stringify({
-                    valid: item[key1].disabled ? 'old' : 'new',
-                    fileKey: JSON.parse(item[key1].response).fileKey,
-                    fileName: item[key1].name,
-                  })
-                }
-
-                if (typeof item[key1] === 'string') {
-                  // all[`${key}[${index}].${key1}`] = item[key1].split('@R@')[0]
-                  all[`${key}[${index}].${key1}`] = item[key1]
-                }
-              }
-            }
-          })
-        }
-      }
-    }
-    console.log('all', all, beasData)
-    all = {
-      ...all,
-      ...beasData,
-    }
-
-    // 判断是否为行添加
-    if (rowAddEvent.value) {
-      subLoading.value = false
-      return rowAddSave({ ...all, id: pageConfig.value.entity.code })
-    }
-
-    const newAll: Record<string, any> = {}
-
-    for (const key1 in all) {
-      if (Object.prototype.hasOwnProperty.call(all, key1)) {
-        if (all[key1] && all[key1].response) {
-          newAll[`${key1}`] = JSON.stringify({
-            valid: all[key1].disabled ? 'old' : 'new',
-            fileKey: JSON.parse(all[key1].response).fileKey,
-            fileName: all[key1].name,
-          })
-        }
-        else {
-          newAll[key1] = all[key1]
-        }
-      }
-    }
-
-    editPageDataSave(tree.value.sourceId || sourceId.value, id.value, newAll, tree.value.value || mainCode.value).then((res: any) => {
-      // 发送事件
-      if (addEvent.value)
-        uni.$emit(addEvent.value, { entityCode: res.entityCode, data: newAll })
-      if (editEvent.value)
-        uni.$emit(editEvent.value, res.entityCode)
-
-      // ★ 通知 wui-select-popup 刷新列表数据
-      uni.$emit('selectPopup:refresh', sourceId.value)
-
-      subLoading.value = false
-      router.back()
-    }).catch((error: any) => {
-      subLoading.value = false
-      globalToast.error(error.message)
-    })
-  }
-  catch (error) {
-    console.log('error:', error)
-  }
-}
-
-// 跳转勾选页面
-function gotoSlect(group: Groups) {
-  router.push(`/pages/select-list/index?sourceId=${group.id}&title=${pageTitle.value}&selectEvent=${SELECTEVENT}&sendSelectEvent=${SENDSELECTEVENT}&extControlType=${''}&cardModel=complex`)
-  // 发送数据给选择页面,延迟发送防止页面不刷新
-  setTimeout(() => {
-    console.log('selectData:', selectData.value)
-    uni.$emit(SENDSELECTEVENT, toRaw(selectData.value[group.id].data))
-  }, 100)
-
-  // 接收勾选页面发送过来的数据
-  uni.$once(SELECTEVENT, (data: any) => {
-    selectData.value[group.id].data = data
-    getSelectData(data, group.id)
-    uni.$off(SELECTEVENT)
-  })
-}
-// 获取勾选数据
-async function getSelectData(data: any, relationID: string) {
-  try {
-    // 获取勾选数据
-    let codes = ''
-    data.forEach((item: any) => {
-      codes += `codes=${item.split('@R@')[0]}&`
-    })
-    selectData.value[relationID].loading = true
-    const res = await selectDatas(relationID, codes)
-    if (pageConfig.value.entity) {
-      pageConfig.value.entity.arrayMap[relationID] = res.entities
-    }
-    else {
-      pageConfig.value.entity = { arrayMap: { [relationID]: res.entities }, code: '', fieldMap: {} }
-    }
-
-    selectData.value[relationID].loading = false
-  }
-  catch (error) {
-    console.log('error:', error)
-  }
-}
-
-// 获取添加的行数据
-async function getAddData(data: any, relationID: string) {
-  addEvent.value = ''
-  try {
-    let codes = ''
-    selectData.value[relationID].data = [
-      ...data,
-      ...selectData.value[relationID].data,
-    ]
-    selectData.value[relationID].data.forEach((item: any) => {
-      codes += `codes=${item}&`
-    })
-    selectData.value[relationID].loading = true
-    const res = await selectDatas(relationID, codes)
-    if (pageConfig.value.entity) {
-      if (pageConfig.value.entity.arrayMap) {
-        pageConfig.value.entity.arrayMap[relationID] = res.entities
-      }
-      else {
-        pageConfig.value.entity.arrayMap = { [relationID]: res.entities }
-      }
-    }
-    else {
-      pageConfig.value.entity = { arrayMap: { [relationID]: res.entities }, code: '', fieldMap: {} }
-    }
-
-    selectData.value[relationID].loading = false
-  }
-  catch (error) {
-    console.log('error:', error)
-  }
-}
-
-// 获取编辑数据
-async function getEditData(data: any, relationID: string) {
-  editEvent.value = ''
-  try {
-    let codes = ''
-    selectData.value[relationID].data.forEach((item: any) => {
-      codes += `codes=${item}&`
-    })
-    selectData.value[relationID].loading = true
-    const res = await selectDatas(relationID, codes)
-    pageConfig.value.entity.arrayMap[relationID] = res.entities
-    selectData.value[relationID].loading = false
-  }
-  catch (error) {
-    console.log('error:', error)
-  }
-}
-// 跳转添加页面
-function gotoAdd(group: Groups) {
-  const addEvent = generateHighResolutionID()
-  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=&title=${group.title}&addEvent=${addEvent}`)
-  // 接收添加页面发送过来的数据
-  uni.$once(addEvent, (data: any) => {
-    uni.$off(addEvent)
-    getAddData([data.entityCode], group.id)
-  })
-}
-
-// 跳转编辑页面
-function edit(group: Groups, field: Entities) {
-  const editEvent = generateHighResolutionID()
-  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=${field.code}&title=${group.title}&editEvent=${editEvent}`)
-  // 接收编辑页面发送过来的数据
-  uni.$once(editEvent, (data: any) => {
-    uni.$off(editEvent)
-    getEditData([data], group.id)
-  })
-}
-
-// 跳转行添加页面
-function gotoRowAdd(group: Groups) {
-  const rowAddEvent = generateHighResolutionID()
-  const sendRowAddEvent = generateHighResolutionID()
-  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=&title=${group.title}&rowAddEvent=${rowAddEvent}&sendRowAddEvent=${sendRowAddEvent}`)
-  // 发送数据给行添加页面
-  setTimeout(() => {
-    // groups: conf.groups,
-    //   entity: conf.entity,
-    const groupf = {
-      ...group,
-      type: 'fieldGroup',
-    }
-    uni.$emit(sendRowAddEvent, { groups: [groupf], entity: pageConfig.value?.entity?.arrayMap[group.id] })
-  }, 100)
-
-  // 接收添加页面发送过来的数据
-  uni.$once(rowAddEvent, (data: any) => {
-    const newData: { [key: string]: any } = {}
-    const id = generateHighResolutionID()
-    for (const key in data) {
-      if (Object.prototype.hasOwnProperty.call(data, key)) {
-        newData[key] = data[key]
-      }
-    }
-
-    if (rowData.value[group.id]) {
-      rowData.value[group.id].push({
-        ...newData,
-        id,
-      })
-    }
-    else {
-      rowData.value[group.id] = [{
-        ...newData,
-        id,
-      }]
-    }
-
-    console.log(pageConfig.value.entity)
-    // 显示数据
-    if (pageConfig.value.entity && pageConfig.value.entity.arrayMap[group.id]) {
-      pageConfig.value.entity.arrayMap[group.id].push({
-        arrayMap: {},
-        code: id,
-        fieldMap: {
-          ...data,
-        },
-      })
-    }
-    else {
-      if (pageConfig.value.entity && pageConfig.value.entity.arrayMap) {
-        pageConfig.value.entity = {
-          arrayMap: {
-            ...pageConfig.value.entity.arrayMap,
-            [group.id]: [{
-              arrayMap: {},
-              code: id,
-              fieldMap: {
-                ...data,
-              },
-            }],
-          },
-          code: id,
-          fieldMap: {},
-        }
-      }
-      else {
-        pageConfig.value.entity = {
-          arrayMap: {
-            [group.id]: [{
-              arrayMap: {},
-              code: id,
-              fieldMap: {
-                ...data,
-              },
-            }],
-          },
-          code: id,
-          fieldMap: {},
-        }
-      }
-    }
-
-    console.log(rowData.value, 'rowData.value')
-    uni.$off(rowAddEvent)
-  })
-}
-
-// 跳转编辑行页面
-function rowEdit(group: Groups, field: Entities) {
-  const rowAddEvent = generateHighResolutionID()
-  const sendRowAddEvent = generateHighResolutionID()
-  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=&title=${group.title}&rowAddEvent=${rowAddEvent}&sendRowAddEvent=${sendRowAddEvent}`)
-  // 发送数据给行编辑页面
-  setTimeout(() => {
-    // groups: conf.groups,
-    //   entity: conf.entity,
-    const groupf = {
-      ...group,
-      type: 'fieldGroup',
-    }
-    uni.$emit(sendRowAddEvent, { groups: [groupf], entity: field })
-  }, 100)
-
-  // 接收行编辑页面发送过来的数据
-  uni.$once(rowAddEvent, (data: any) => {
-    console.log('rowAddEvent', data)
-    const newData: { [key: string]: any } = {}
-    for (const key in data) {
-      if (Object.prototype.hasOwnProperty.call(data, key)) {
-        newData[key] = data[key]
-      }
-    }
-
-    if (rowData.value[group.id]) {
-      rowData.value[group.id] = rowData.value[group.id].filter((item: any) => item.id !== newData.id)
-      rowData.value[group.id].push({
-        ...newData,
-      })
-    }
-
-    // 显示数据
-    if (pageConfig.value.entity.arrayMap[group.id]) {
-      const index = pageConfig.value.entity.arrayMap[group.id].findIndex((item: any) => item.code === newData.id)
-      console.log('index', index)
-      pageConfig.value.entity.arrayMap[group.id][index] = {
-        arrayMap: {},
-        code: '',
-        fieldMap: {
-          ...newData,
-        },
-      }
-      // pageConfig.value.entity.arrayMap[group.id] = pageConfig.value.entity.arrayMap[group.id].filter((item: any) => item.code !== newData.id)
-      // pageConfig.value.entity.arrayMap[group.id].push({
-      //   arrayMap: {},
-      //   code: '',
-      //   fieldMap: {
-      //     ...newData,
-      //   },
-      // })
-    }
-
-    console.log(rowData.value, group.id, 'rowData.value')
-    uni.$off(rowAddEvent)
-  })
-}
-
-/**
- * 判断编辑按钮是否可以点击
- */
-function canClick(group: Groups) {
-  if (group.max) {
-    if (pageConfig.value.entity && pageConfig.value.entity.arrayMap[group.id] && pageConfig.value.entity.arrayMap[group.id].length >= group.max) {
-      return true
-    }
-    else {
-      return false
-    }
-  }
-  else {
-    return false
-  }
-}
-
-/**
- * 删除行数据
- */
-function remove(group: Groups, field: Entities) {
-  // 行编辑数据
-  if (rowData.value[group.id]) {
-    rowData.value[group.id] = rowData.value[group.id].filter((item: any) => item.id !== (field.code || field.fieldMap.id))
-  }
-
-  // 显示数据
-  if (pageConfig.value.entity.arrayMap[group.id]) {
-    pageConfig.value.entity.arrayMap[group.id] = pageConfig.value.entity.arrayMap[group.id].filter((item: any) => (item.code || item.fieldMap.id) !== (field.code || field.fieldMap.id))
-  }
-
-  // 行选择数据
-  if (selectData.value[group.id]) {
-    selectData.value[group.id].data = selectData.value[group.id].data.filter((item: any) => item.split('@R@')[0] !== field.code)
-  }
-
-  console.log(rowData.value[group.id], field, '删除行数据')
-}
-/**
- * 批量上传文件
- */
-function handleFileChange(e: any, group: Groups) {
-  console.log(e, group)
-  const newData: { [key: string]: any } = {
-
-  }
-
-  group.fields.forEach((item) => {
-    newData[item.sourceId] = ''
-  })
-  const id = generateHighResolutionID()
-  if (group.batchAddFileField)
-    newData[group.batchAddFileField?.sourceId] = e.file
-
-  if (rowData.value[group.id]) {
-    rowData.value[group.id].push({
-      ...newData,
-      id,
-    })
-  }
-  else {
-    rowData.value[group.id] = [{
-      ...newData,
-      id,
-    }]
-  }
-
-  // 显示数据
-  if (pageConfig.value.entity && pageConfig.value.entity.arrayMap[group.id]) {
-    pageConfig.value.entity.arrayMap[group.id].push({
-      arrayMap: {},
-      code: id,
-      fieldMap: {
-        ...newData,
-      },
-    })
-  }
-  else {
-    if (pageConfig.value.entity && pageConfig.value.entity.arrayMap) {
-      pageConfig.value.entity = {
-        arrayMap: {
-          ...pageConfig.value.entity.arrayMap,
-          [group.id]: [{
-            arrayMap: {},
-            code: id,
-            fieldMap: {
-              ...newData,
-            },
-          }],
-        },
-        code: id,
-        fieldMap: {},
-      }
-    }
-    else {
-      pageConfig.value.entity = {
-        arrayMap: {
-          [group.id]: [{
-            arrayMap: {},
-            code: id,
-            fieldMap: {
-              ...newData,
-            },
-          }],
-        },
-        code: id,
-        fieldMap: {},
-      }
-    }
-  }
-}
-</script>
-
-<template>
-  <view class="relative h-[calc(100vh-44px)] w-100vw overflow-auto bg-[#f8f9fb] dark:bg-[var(--wot-dark-background)]">
-    <view v-if="loading" class="flex justify-center p-3">
-      <wd-loading />
-    </view>
-    <view v-else>
-      <wd-cell v-if="pageType === '树'" title="分组" title-width="100px">
-        <TreeSelectControl
-          v-model="tree" select-mode="single" :source-id="sourceId" title="分组"
-          ext-control-type="relselect " :readonly="false" :clearable="false"
-        />
-      </wd-cell>
-      <wd-collapse v-model="collapses" accordion>
-        <wd-collapse-item v-for="group in groupsformat" :key="group.id"  :name="group.id">
-          <template #title>
-            <view class="flex items-center justify-between">
-              <view class="flex-1 flex items-center  justify-between pr-2">
-                <view>{{ group.title }}</view>
-                <view v-if="group.type === 'relation'">
-                  <view v-if="selectData[group.id]?.loading" class="flex justify-center p-3">
-                    <wd-loading />
-                  </view>
-                  <view v-else>
-                    <view v-if="!group.readOnly" class="w-upload flex justify-center gap-2">
-                      <batchUploadFile
-                        v-if="group.batchAddFileField && group.batchAddFileField.extControlType === 'file'"
-                        @handle-file-change="(e) => { handleFileChange(e, group) }"
-                      />
-                      <wd-button
-                        v-if="group.buttons.includes('selectAdd')" :disabled="canClick(group)" type="info"
-                        size="small" @click.stop="gotoSlect(group)"
-                      >
-                        选择
-                      </wd-button>
-                      <wd-button
-                        v-if="group.buttons.includes('dtmplAdd')" :disabled="canClick(group)" type="primary"
-                        size="small" @click.stop="gotoAdd(group)"
-                      >
-                        新增
-                      </wd-button>
-                      <wd-button
-                        v-if="group.buttons.includes('rowAdd')" :disabled="canClick(group)" type="primary" size="small"
-                        @click.stop="gotoRowAdd(group)"
-                      >
-                        新增
-                      </wd-button>
-                    </view>
-                  </view>
-                </view>
-              </view>
-              <wd-icon :name="collapses === group.id ? 'up' : 'down'" size="24px"></wd-icon>
-            </view>
-          </template>
-
-          <FormControl
-            v-if="group.type === 'fieldGroup'" ref="formControlRef" :field-group="group"
-            :entity="pageConfig?.entity?.fieldMap" :enum-column="Enumcolumn"
-            :company-filter="props.companyFilter"
-            :company-field-source-id="props.companyFieldSourceId"
-            :smart-paste="canSmartPaste"
-          />
-          <view v-if="group.type === 'relation'">
-            <view v-if="selectData[group.id]?.loading" class="flex justify-center p-3">
-              <wd-loading />
-            </view>
-            <view v-else>
-              <view v-for="(field, index) in pageConfig?.entity?.arrayMap[group.id]" :key="field.code">
-                <foldCard
-                  :index="index" :enum-column="{}" :groups="group" :source-id="sourceId" :columns="group.fields"
-                  model="complex" :data="field"
-                >
-                  <template v-if="!group.readOnly" #buttons>
-                    <wd-button v-if="group.buttons.includes('dtmplEdit')" size="small" @click="edit(group, field)">
-                      编辑
-                    </wd-button>
-                    <wd-button v-if="group.buttons.includes('rowEdit')" size="small" @click="rowEdit(group, field)">
-                      编辑
-                    </wd-button>
-                    <wd-button
-                      v-if="group.buttons.includes('singleDelete')" type="danger" size="small"
-                      @click="remove(group, field)"
-                    >
-                      删除
-                    </wd-button>
-                  </template>
-                </foldCard>
-              </view>
-            </view>
-          </view>
-        </wd-collapse-item>
-      </wd-collapse>
-      <view class="h-12" />
-      <view class="fixed bottom-0 left-0 right-0 box-border w-100% flex p-2 bg-white dark:bg-[var(--wot-dark-background)]">
-        <wd-button class="flex-1" :loading="subLoading" @click="save">
-          保存
-        </wd-button>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped></style>
+<script lang="ts" setup>
+import { computed, defineOptions, onBeforeMount, onUnmounted, ref, toRaw } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useRouter } from 'uni-mini-router'
+import FormControl from '../form-control/form-control.vue'
+import { addPageConfig, editPageConfig, editPageDataSave, enums, selectDatas } from '../../api/page'
+import type { Entities, Enums, Groups, dtmplConfig } from '../../type'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import foldCard from '../fold-card/fold-card.vue'
+import { generateHighResolutionID } from '../../utils/index'
+import TreeSelectControl from '../tree-select/index.vue'
+import batchUploadFile from '../batch-upload-file/batch-upload-file.vue'
+
+defineOptions({
+  name: 'WuiEditPage',
+})
+const props = defineProps<{
+  companyFilter?: boolean
+  companyFieldSourceId?: string
+}>()
+const pageConfig = ref<dtmplConfig>({
+  id: '',
+  title: '',
+  groups: [],
+  entity: {
+    arrayMap: {},
+    code: '',
+    fieldMap: {},
+  },
+  buttons: [],
+  smartPaste: false,
+})
+const tree = ref({ value: '', sourceId: '' })
+const loading = ref(false)
+const globalToast = useGlobalToast()
+const router = useRouter()
+const mainCode = ref('')
+const id = ref('')
+const sourceId = ref('')
+const formControlRef = ref()
+const subLoading = ref(false)
+const Enumcolumn = ref<Enums | undefined>()
+const pageTitle = ref('')
+const pageType = ref('')
+const selectData = ref<{ [key: string]: { loading: boolean, data: string[] } }>({})
+const rowData = ref<{ [key: string]: { [key: string]: any } }>({})
+const action = ref('')
+const hydrocarbonProgramToken = ref('')
+const token = ref('')
+// 全局事件名称
+const SELECTEVENT = generateHighResolutionID()
+const SENDSELECTEVENT = generateHighResolutionID()
+const addEvent = ref('')
+const editEvent = ref('')
+const rowAddEvent = ref('')
+const sendRowAddEvent = ref('')
+const smartPaste=ref(false)
+// 折叠面板
+const collapses = ref('')
+const groupsformat = computed(() => {
+  return pageConfig.value.groups.filter((item: Groups) => {
+    return item.displayConfig.includes('displayed')
+  })
+})
+const canSmartPaste=computed(()=>{
+  return pageConfig.value?.smartPaste??false
+})
+onLoad((option: any) => {
+  sourceId.value = option.sourceId
+  mainCode.value = option.mainCode || ''
+  id.value = option.id || ''
+  pageTitle.value = option.title
+  addEvent.value = option.addEvent
+  editEvent.value = option.editEvent
+  pageType.value = option.pageType || ''
+  rowAddEvent.value = option.rowAddEvent
+  sendRowAddEvent.value = option.sendRowAddEvent
+  getEditPageConfig()
+})
+
+onUnmounted(() => {
+  console.log('页面卸载')
+  // 勿在卸载时 $off 勾选事件：跳转勾选页会触发 onUnmounted，导致 $once(SELECTEVENT) 被提前移除
+  uni.$off(rowAddEvent.value)
+  // uni.$off(addEvent.value)
+  uni.$off(editEvent.value)
+  uni.$off(sendRowAddEvent.value)
+})
+
+onBeforeMount(() => {
+  action.value = uni.getStorageSync('BASE_URL')
+  hydrocarbonProgramToken.value = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN')
+  token.value = uni.getStorageSync('TOKEN')
+})
+// 获取编辑页面配置
+async function getEditPageConfig() {
+  // 判断是否为行新增事件
+  if (sendRowAddEvent.value) {
+    uni.$once(sendRowAddEvent.value, (conf: any) => {
+      console.log('sendRowAddEvent.value', conf)
+      pageConfig.value = {
+        id: '',
+        title: '行添加',
+        groups: conf.groups,
+        entity: conf.entity || {
+          arrayMap: {},
+          code: '',
+          fieldMap: {},
+        },
+        buttons: [],
+      }
+      getEnums()
+      uni.$off(sendRowAddEvent.value)
+    })
+    setTimeout(() => {
+      const visibleGroups = pageConfig.value.groups.filter((item: Groups) => item.displayConfig.includes('displayed'))
+      collapses.value = visibleGroups.length > 0 ? visibleGroups[0].id : ''
+    }, 100)
+
+    return
+  }
+
+  try {
+    let res = null
+    loading.value = true
+    if (id.value) {
+      res = await editPageConfig(sourceId.value, id.value)
+    }
+    else {
+      res = await addPageConfig(sourceId.value)
+    }
+    loading.value = false
+    // 初始化折叠面板
+      if (res.dtmplConfig) {
+        uni.setNavigationBarTitle({
+          title: `${res.dtmplConfig.title}`,
+        })
+        pageConfig.value = res.dtmplConfig
+        const visibleGroups = pageConfig.value.groups.filter((item: Groups) => item.displayConfig.includes('displayed'))
+        collapses.value = visibleGroups.length > 0 ? visibleGroups[0].id : ''
+
+      pageConfig.value.groups.forEach((item: Groups) => {
+        // 初始化勾选数据
+        if (item.type === 'relation' && (item.buttons.includes('dtmplAdd') || item.buttons.includes('selectAdd'))) {
+          selectData.value[item.id] = {
+            data: (pageConfig.value.entity && pageConfig.value.entity.arrayMap[item.id]?.map((sebitem: any) => {
+              return `${sebitem.code}`
+            })) || [],
+            loading: false,
+          }
+        }
+        // 初始化行数据
+        if (item.type === 'relation' && item.buttons.includes('rowAdd')) {
+          rowData.value[item.id] = (pageConfig.value.entity && pageConfig.value.entity.arrayMap[item.id]?.map((sebitem: any) => {
+            return {
+              id: sebitem.code,
+              ...sebitem.fieldMap,
+            }
+          })) || []
+        }
+      })
+      getEnums()
+    }
+  }
+  catch (error) {
+    loading.value = false
+    console.log('error:', error)
+  }
+}
+// 获取枚举
+async function getEnums() {
+  try {
+    const params: string[] = []
+    pageConfig.value.groups?.forEach((item: any) => {
+      item.fields?.forEach((subItem: any) => {
+        if (subItem.extControlType === 'select' || subItem.extControlType === 'multiselect') {
+          params.push(`mstrucIds=${subItem.mstrucId}`)
+        }
+      })
+    })
+    if (!params.length)
+      return
+    const res = await enums(params.join('&'))
+    Enumcolumn.value = res.enumMap || {}
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+}
+
+// 行添加保存
+async function rowAddSave(all: any) {
+  console.log('行数据', all)
+  router.back()
+  uni.$emit(rowAddEvent.value, all)
+}
+
+// 保存
+async function save() {
+  // 判断是否为树添加
+  if (pageType.value === '树' && !tree.value.value) {
+    return globalToast.warning('请选择分组')
+  }
+
+  try {
+    const formArray: any[] = []
+    formControlRef.value.forEach((element: any) => {
+      formArray.push(element.submit())
+    })
+    const res = await Promise.all(formArray)
+    const beasData = res.reduce((acc, cur) => {
+      return { ...acc, ...cur }
+    }, {})
+    subLoading.value = true
+
+    /**
+     *
+     * 421639572264099847.$$flag$$:true
+       421639572264099847[0].$$relation$$:拥有角色
+       421639572264099847[0].唯一编码:448591711817211909
+     */
+    let all: Record<string, any> = {}
+    for (const key in selectData.value) {
+      if (Object.prototype.hasOwnProperty.call(selectData.value, key)) {
+        const element = selectData.value[key].data
+        if (element) {
+          all[`${key}.$$flag$$`] = true
+          element.forEach((item, index) => {
+            all[`${key}[${index}].$$relation$$`] = pageConfig.value.groups.find(item => item.id === key)?.relationNames[0]
+            if (typeof item === 'string') {
+              all[`${key}[${index}].唯一编码`] = item.split('@R@')[0]
+            }
+          })
+        }
+      }
+    }
+    console.log('rowData.value', rowData.value)
+    for (const key in rowData.value) {
+      if (Object.prototype.hasOwnProperty.call(rowData.value, key)) {
+        const element1 = rowData.value[key]
+        if (element1) {
+          all[`${key}.$$flag$$`] = true
+          element1.forEach((item: any, index: any) => {
+            all[`${key}[${index}].$$relation$$`] = pageConfig.value.groups.find(item => item.id === key)?.relationNames[0]
+            all[`${key}[${index}].唯一编码`] = item.id
+
+            for (const key1 in item) {
+              if (Object.prototype.hasOwnProperty.call(item, key1)) {
+                console.log('item[key1]', item[key1])
+                if (item[key1] && item[key1].response) {
+                  all[`${key}[${index}].${key1}`] = JSON.stringify({
+                    valid: item[key1].disabled ? 'old' : 'new',
+                    fileKey: JSON.parse(item[key1].response).fileKey,
+                    fileName: item[key1].name,
+                  })
+                }
+
+                if (typeof item[key1] === 'string') {
+                  // all[`${key}[${index}].${key1}`] = item[key1].split('@R@')[0]
+                  all[`${key}[${index}].${key1}`] = item[key1]
+                }
+              }
+            }
+          })
+        }
+      }
+    }
+    console.log('all', all, beasData)
+    all = {
+      ...all,
+      ...beasData,
+    }
+
+    // 判断是否为行添加
+    if (rowAddEvent.value) {
+      subLoading.value = false
+      return rowAddSave({ ...all, id: pageConfig.value.entity.code })
+    }
+
+    const newAll: Record<string, any> = {}
+
+    for (const key1 in all) {
+      if (Object.prototype.hasOwnProperty.call(all, key1)) {
+        if (all[key1] && all[key1].response) {
+          newAll[`${key1}`] = JSON.stringify({
+            valid: all[key1].disabled ? 'old' : 'new',
+            fileKey: JSON.parse(all[key1].response).fileKey,
+            fileName: all[key1].name,
+          })
+        }
+        else {
+          newAll[key1] = all[key1]
+        }
+      }
+    }
+
+    editPageDataSave(tree.value.sourceId || sourceId.value, id.value, newAll, tree.value.value || mainCode.value).then((res: any) => {
+      // 发送事件
+      if (addEvent.value)
+        uni.$emit(addEvent.value, { entityCode: res.entityCode, data: newAll })
+      if (editEvent.value)
+        uni.$emit(editEvent.value, res.entityCode)
+
+      // ★ 通知 wui-select-popup 刷新列表数据
+      uni.$emit('selectPopup:refresh', sourceId.value)
+
+      subLoading.value = false
+      router.back()
+    }).catch((error: any) => {
+      subLoading.value = false
+      globalToast.error(error.message)
+    })
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+}
+
+// 跳转勾选页面
+function gotoSlect(group: Groups) {
+  router.push(`/pages/select-list/index?sourceId=${group.id}&title=${pageTitle.value}&selectEvent=${SELECTEVENT}&sendSelectEvent=${SENDSELECTEVENT}&extControlType=${''}&cardModel=complex`)
+  // 发送数据给选择页面,延迟发送防止页面不刷新
+  setTimeout(() => {
+    console.log('selectData:', selectData.value)
+    uni.$emit(SENDSELECTEVENT, toRaw(selectData.value[group.id].data))
+  }, 100)
+
+  // 接收勾选页面发送过来的数据
+  uni.$once(SELECTEVENT, (data: any) => {
+    selectData.value[group.id].data = data
+    getSelectData(data, group.id)
+    uni.$off(SELECTEVENT)
+  })
+}
+// 获取勾选数据
+async function getSelectData(data: any, relationID: string) {
+  try {
+    // 获取勾选数据
+    let codes = ''
+    data.forEach((item: any) => {
+      codes += `codes=${item.split('@R@')[0]}&`
+    })
+    selectData.value[relationID].loading = true
+    const res = await selectDatas(relationID, codes)
+    if (pageConfig.value.entity) {
+      pageConfig.value.entity.arrayMap[relationID] = res.entities
+    }
+    else {
+      pageConfig.value.entity = { arrayMap: { [relationID]: res.entities }, code: '', fieldMap: {} }
+    }
+
+    selectData.value[relationID].loading = false
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+}
+
+// 获取添加的行数据
+async function getAddData(data: any, relationID: string) {
+  addEvent.value = ''
+  try {
+    let codes = ''
+    selectData.value[relationID].data = [
+      ...data,
+      ...selectData.value[relationID].data,
+    ]
+    selectData.value[relationID].data.forEach((item: any) => {
+      codes += `codes=${item}&`
+    })
+    selectData.value[relationID].loading = true
+    const res = await selectDatas(relationID, codes)
+    if (pageConfig.value.entity) {
+      if (pageConfig.value.entity.arrayMap) {
+        pageConfig.value.entity.arrayMap[relationID] = res.entities
+      }
+      else {
+        pageConfig.value.entity.arrayMap = { [relationID]: res.entities }
+      }
+    }
+    else {
+      pageConfig.value.entity = { arrayMap: { [relationID]: res.entities }, code: '', fieldMap: {} }
+    }
+
+    selectData.value[relationID].loading = false
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+}
+
+// 获取编辑数据
+async function getEditData(data: any, relationID: string) {
+  editEvent.value = ''
+  try {
+    let codes = ''
+    selectData.value[relationID].data.forEach((item: any) => {
+      codes += `codes=${item}&`
+    })
+    selectData.value[relationID].loading = true
+    const res = await selectDatas(relationID, codes)
+    pageConfig.value.entity.arrayMap[relationID] = res.entities
+    selectData.value[relationID].loading = false
+  }
+  catch (error) {
+    console.log('error:', error)
+  }
+}
+// 跳转添加页面
+function gotoAdd(group: Groups) {
+  const addEvent = generateHighResolutionID()
+  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=&title=${group.title}&addEvent=${addEvent}`)
+  // 接收添加页面发送过来的数据
+  uni.$once(addEvent, (data: any) => {
+    uni.$off(addEvent)
+    getAddData([data.entityCode], group.id)
+  })
+}
+
+// 跳转编辑页面
+function edit(group: Groups, field: Entities) {
+  const editEvent = generateHighResolutionID()
+  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=${field.code}&title=${group.title}&editEvent=${editEvent}`)
+  // 接收编辑页面发送过来的数据
+  uni.$once(editEvent, (data: any) => {
+    uni.$off(editEvent)
+    getEditData([data], group.id)
+  })
+}
+
+// 跳转行添加页面
+function gotoRowAdd(group: Groups) {
+  const rowAddEvent = generateHighResolutionID()
+  const sendRowAddEvent = generateHighResolutionID()
+  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=&title=${group.title}&rowAddEvent=${rowAddEvent}&sendRowAddEvent=${sendRowAddEvent}`)
+  // 发送数据给行添加页面
+  setTimeout(() => {
+    // groups: conf.groups,
+    //   entity: conf.entity,
+    const groupf = {
+      ...group,
+      type: 'fieldGroup',
+    }
+    uni.$emit(sendRowAddEvent, { groups: [groupf], entity: pageConfig.value?.entity?.arrayMap[group.id] })
+  }, 100)
+
+  // 接收添加页面发送过来的数据
+  uni.$once(rowAddEvent, (data: any) => {
+    const newData: { [key: string]: any } = {}
+    const id = generateHighResolutionID()
+    for (const key in data) {
+      if (Object.prototype.hasOwnProperty.call(data, key)) {
+        newData[key] = data[key]
+      }
+    }
+
+    if (rowData.value[group.id]) {
+      rowData.value[group.id].push({
+        ...newData,
+        id,
+      })
+    }
+    else {
+      rowData.value[group.id] = [{
+        ...newData,
+        id,
+      }]
+    }
+
+    console.log(pageConfig.value.entity)
+    // 显示数据
+    if (pageConfig.value.entity && pageConfig.value.entity.arrayMap[group.id]) {
+      pageConfig.value.entity.arrayMap[group.id].push({
+        arrayMap: {},
+        code: id,
+        fieldMap: {
+          ...data,
+        },
+      })
+    }
+    else {
+      if (pageConfig.value.entity && pageConfig.value.entity.arrayMap) {
+        pageConfig.value.entity = {
+          arrayMap: {
+            ...pageConfig.value.entity.arrayMap,
+            [group.id]: [{
+              arrayMap: {},
+              code: id,
+              fieldMap: {
+                ...data,
+              },
+            }],
+          },
+          code: id,
+          fieldMap: {},
+        }
+      }
+      else {
+        pageConfig.value.entity = {
+          arrayMap: {
+            [group.id]: [{
+              arrayMap: {},
+              code: id,
+              fieldMap: {
+                ...data,
+              },
+            }],
+          },
+          code: id,
+          fieldMap: {},
+        }
+      }
+    }
+
+    console.log(rowData.value, 'rowData.value')
+    uni.$off(rowAddEvent)
+  })
+}
+
+// 跳转编辑行页面
+function rowEdit(group: Groups, field: Entities) {
+  const rowAddEvent = generateHighResolutionID()
+  const sendRowAddEvent = generateHighResolutionID()
+  router.push(`/pages/edit-page/index?sourceId=${group.id}&id=&title=${group.title}&rowAddEvent=${rowAddEvent}&sendRowAddEvent=${sendRowAddEvent}`)
+  // 发送数据给行编辑页面
+  setTimeout(() => {
+    // groups: conf.groups,
+    //   entity: conf.entity,
+    const groupf = {
+      ...group,
+      type: 'fieldGroup',
+    }
+    uni.$emit(sendRowAddEvent, { groups: [groupf], entity: field })
+  }, 100)
+
+  // 接收行编辑页面发送过来的数据
+  uni.$once(rowAddEvent, (data: any) => {
+    console.log('rowAddEvent', data)
+    const newData: { [key: string]: any } = {}
+    for (const key in data) {
+      if (Object.prototype.hasOwnProperty.call(data, key)) {
+        newData[key] = data[key]
+      }
+    }
+
+    if (rowData.value[group.id]) {
+      rowData.value[group.id] = rowData.value[group.id].filter((item: any) => item.id !== newData.id)
+      rowData.value[group.id].push({
+        ...newData,
+      })
+    }
+
+    // 显示数据
+    if (pageConfig.value.entity.arrayMap[group.id]) {
+      const index = pageConfig.value.entity.arrayMap[group.id].findIndex((item: any) => item.code === newData.id)
+      console.log('index', index)
+      pageConfig.value.entity.arrayMap[group.id][index] = {
+        arrayMap: {},
+        code: '',
+        fieldMap: {
+          ...newData,
+        },
+      }
+      // pageConfig.value.entity.arrayMap[group.id] = pageConfig.value.entity.arrayMap[group.id].filter((item: any) => item.code !== newData.id)
+      // pageConfig.value.entity.arrayMap[group.id].push({
+      //   arrayMap: {},
+      //   code: '',
+      //   fieldMap: {
+      //     ...newData,
+      //   },
+      // })
+    }
+
+    console.log(rowData.value, group.id, 'rowData.value')
+    uni.$off(rowAddEvent)
+  })
+}
+
+/**
+ * 判断编辑按钮是否可以点击
+ */
+function canClick(group: Groups) {
+  if (group.max) {
+    if (pageConfig.value.entity && pageConfig.value.entity.arrayMap[group.id] && pageConfig.value.entity.arrayMap[group.id].length >= group.max) {
+      return true
+    }
+    else {
+      return false
+    }
+  }
+  else {
+    return false
+  }
+}
+
+/**
+ * 删除行数据
+ */
+function remove(group: Groups, field: Entities) {
+  // 行编辑数据
+  if (rowData.value[group.id]) {
+    rowData.value[group.id] = rowData.value[group.id].filter((item: any) => item.id !== (field.code || field.fieldMap.id))
+  }
+
+  // 显示数据
+  if (pageConfig.value.entity.arrayMap[group.id]) {
+    pageConfig.value.entity.arrayMap[group.id] = pageConfig.value.entity.arrayMap[group.id].filter((item: any) => (item.code || item.fieldMap.id) !== (field.code || field.fieldMap.id))
+  }
+
+  // 行选择数据
+  if (selectData.value[group.id]) {
+    selectData.value[group.id].data = selectData.value[group.id].data.filter((item: any) => item.split('@R@')[0] !== field.code)
+  }
+
+  console.log(rowData.value[group.id], field, '删除行数据')
+}
+/**
+ * 批量上传文件
+ */
+function handleFileChange(e: any, group: Groups) {
+  console.log(e, group)
+  const newData: { [key: string]: any } = {
+
+  }
+
+  group.fields.forEach((item) => {
+    newData[item.sourceId] = ''
+  })
+  const id = generateHighResolutionID()
+  if (group.batchAddFileField)
+    newData[group.batchAddFileField?.sourceId] = e.file
+
+  if (rowData.value[group.id]) {
+    rowData.value[group.id].push({
+      ...newData,
+      id,
+    })
+  }
+  else {
+    rowData.value[group.id] = [{
+      ...newData,
+      id,
+    }]
+  }
+
+  // 显示数据
+  if (pageConfig.value.entity && pageConfig.value.entity.arrayMap[group.id]) {
+    pageConfig.value.entity.arrayMap[group.id].push({
+      arrayMap: {},
+      code: id,
+      fieldMap: {
+        ...newData,
+      },
+    })
+  }
+  else {
+    if (pageConfig.value.entity && pageConfig.value.entity.arrayMap) {
+      pageConfig.value.entity = {
+        arrayMap: {
+          ...pageConfig.value.entity.arrayMap,
+          [group.id]: [{
+            arrayMap: {},
+            code: id,
+            fieldMap: {
+              ...newData,
+            },
+          }],
+        },
+        code: id,
+        fieldMap: {},
+      }
+    }
+    else {
+      pageConfig.value.entity = {
+        arrayMap: {
+          [group.id]: [{
+            arrayMap: {},
+            code: id,
+            fieldMap: {
+              ...newData,
+            },
+          }],
+        },
+        code: id,
+        fieldMap: {},
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <view class="relative h-[calc(100vh-44px)] w-100vw overflow-auto bg-[#f8f9fb] dark:bg-[var(--wot-dark-background)]">
+    <view v-if="loading" class="flex justify-center p-3">
+      <wd-loading />
+    </view>
+    <view v-else>
+      <wd-cell v-if="pageType === '树'" title="分组" title-width="100px">
+        <TreeSelectControl
+          v-model="tree" select-mode="single" :source-id="sourceId" title="分组"
+          ext-control-type="relselect " :readonly="false" :clearable="false"
+        />
+      </wd-cell>
+      <wd-collapse v-model="collapses" accordion>
+        <wd-collapse-item v-for="group in groupsformat" :key="group.id"  :name="group.id">
+          <template #title>
+            <view class="flex items-center justify-between">
+              <view class="flex-1 flex items-center  justify-between pr-2">
+                <view>{{ group.title }}</view>
+                <view v-if="group.type === 'relation'">
+                  <view v-if="selectData[group.id]?.loading" class="flex justify-center p-3">
+                    <wd-loading />
+                  </view>
+                  <view v-else>
+                    <view v-if="!group.readOnly" class="w-upload flex justify-center gap-2">
+                      <batchUploadFile
+                        v-if="group.batchAddFileField && group.batchAddFileField.extControlType === 'file'"
+                        @handle-file-change="(e) => { handleFileChange(e, group) }"
+                      />
+                      <wd-button
+                        v-if="group.buttons.includes('selectAdd')" :disabled="canClick(group)" type="info"
+                        size="small" @click.stop="gotoSlect(group)"
+                      >
+                        选择
+                      </wd-button>
+                      <wd-button
+                        v-if="group.buttons.includes('dtmplAdd')" :disabled="canClick(group)" type="primary"
+                        size="small" @click.stop="gotoAdd(group)"
+                      >
+                        新增
+                      </wd-button>
+                      <wd-button
+                        v-if="group.buttons.includes('rowAdd')" :disabled="canClick(group)" type="primary" size="small"
+                        @click.stop="gotoRowAdd(group)"
+                      >
+                        新增
+                      </wd-button>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <wd-icon :name="collapses === group.id ? 'up' : 'down'" size="24px"></wd-icon>
+            </view>
+          </template>
+
+          <FormControl
+            v-if="group.type === 'fieldGroup'" ref="formControlRef" :field-group="group"
+            :entity="pageConfig?.entity?.fieldMap" :enum-column="Enumcolumn"
+            :company-filter="props.companyFilter"
+            :company-field-source-id="props.companyFieldSourceId"
+            :smart-paste="canSmartPaste"
+          />
+          <view v-if="group.type === 'relation'">
+            <view v-if="selectData[group.id]?.loading" class="flex justify-center p-3">
+              <wd-loading />
+            </view>
+            <view v-else>
+              <view v-for="(field, index) in pageConfig?.entity?.arrayMap[group.id]" :key="field.code">
+                <foldCard
+                  :index="index" :enum-column="{}" :groups="group" :source-id="sourceId" :columns="group.fields"
+                  model="complex" :data="field"
+                >
+                  <template v-if="!group.readOnly" #buttons>
+                    <wd-button v-if="group.buttons.includes('dtmplEdit')" size="small" @click="edit(group, field)">
+                      编辑
+                    </wd-button>
+                    <wd-button v-if="group.buttons.includes('rowEdit')" size="small" @click="rowEdit(group, field)">
+                      编辑
+                    </wd-button>
+                    <wd-button
+                      v-if="group.buttons.includes('singleDelete')" type="danger" size="small"
+                      @click="remove(group, field)"
+                    >
+                      删除
+                    </wd-button>
+                  </template>
+                </foldCard>
+              </view>
+            </view>
+          </view>
+        </wd-collapse-item>
+      </wd-collapse>
+      <view class="h-12" />
+      <view class="fixed bottom-0 left-0 right-0 box-border w-100% flex p-2 bg-white dark:bg-[var(--wot-dark-background)]">
+        <wd-button class="flex-1" :loading="subLoading" @click="save">
+          保存
+        </wd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped></style>