gr_report_web/src/views/lowdesign/reportDesign/index.vue

<template>
  <ContentWrap>
    <div class="flex gap-x-10px">
      <div class="flex-basis-180px flex-shrink-0">
        <avue-tree
          ref="treeRef"
          v-model="treeForm"
          :option="treeOption"
          :data="treeData"
          :permission="treePermission"
          :before-open="treeBeforeOpen"
          @node-contextmenu="treeNodeContextmenu"
          @node-click="treeNodeClick"
          @update="treeUpdate"
          @save="treeSave"
          @del="treeDel"
        >
        </avue-tree>
      </div>
      <avue-crud
        class="table-content flex-1"
        ref="crudRef"
        v-model="tableForm"
        v-model:page="tablePage"
        v-model:search="tableSearch"
        :table-loading="loading"
        :data="tableData"
        :option="tableOption"
        :permission="permission"
        :before-open="beforeOpen"
        :before-close="beforeClose"
        @search-change="searchChange"
        @search-reset="resetChange"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @refresh-change="getTableData"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template #menu="{ size, row }">
          <div class="flex justify-center flex-items-center">
            <el-button
              type="primary"
              text
              :size="size"
              v-hasPermi="['lideeyunji:report:update']"
              @click="menuHandle({ type: 'edit', row, index: row.$index })"
            >
              <Icon :size="14" icon="ep:edit-pen"></Icon>
              <span>编辑</span>
            </el-button>
            <span
              v-if="checkPermi(['lideeyunji:report:update'])"
              class="ml-8px mr-8px mt-2px inline-block h-16px w-1px bg-#e8e8e8 .dark:bg-[var(--el-border-color-dark)]"
            ></span>
            <el-dropdown @command="menuHandle">
              <div class="mt--2px cursor-pointer">
                <el-text :size="size" type="primary">
                  更多
                  <Icon :size="16" icon="iconamoon:arrow-down-2-light" />
                </el-text>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <template v-for="item in menuMoreList" :key="item.type">
                    <el-dropdown-item
                      v-if="!item.isShow || item.isShow()"
                      :command="{ type: item.type, row }"
                    >
                      {{ item.label }}
                    </el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <template #menu-form-before="{ disabled, size, type }">
          <el-button
            v-if="type == 'edit'"
            type="primary"
            :size="size"
            :disabled="disabled"
            :loading="saveLoading"
            @click="rowUpdate(tableForm)"
          >
            <Icon :size="14" icon="ep:circle-check"></Icon>
            <span>修改</span>
          </el-button>
        </template>
        <template #custom_form-form>
          <avue-form
            class="table-design-custom-form"
            ref="customFormRef"
            :option="customFormOption"
            v-model="tableForm"
          >
            <template #originButton>
              <div>
                <el-button
                  type="primary"
                  class="ml-2px"
                  @click="openDataOrigin"
                  :disabled="!tableForm.dataOrigin"
                >
                  <Icon :size="14" icon="lucide:text-search"></Icon> <span>数据源SQL配置</span>
                </el-button>
                <el-button
                  type="primary"
                  class="ml-2px"
                  @click="analysisDataOrigin"
                  :loading="analysisLoading"
                  :disabled="!tableForm.originButton"
                >
                  <Icon v-if="!analysisLoading" :size="14" icon="streamline:code-analysis"></Icon>
                  <span>解析配置生成字段</span>
                </el-button>
              </div>
            </template>
            <template #dataConfig="scope">
              <div class="flex">
                <avue-checkbox
                  class="flex-basis-60px flex-shrink-0"
                  v-model="tableForm.dataConfig"
                  :dic="scope.column.dicData"
                ></avue-checkbox>
                <avue-select
                  class="flex-basis-160px flex-shrink-0"
                  v-model="authValue"
                  :dic="dicObj.dataConfigSelect"
                  :clearable="false"
                ></avue-select>
              </div>
            </template>
          </avue-form>
        </template>

        <template #custom_info-form="scope">
          <TableInfo
            v-if="isTableInfo"
            ref="tableInfoRef"
            :formType="scope.type"
            :editInfoData="editInfoData"
            :size="scope.size"
          ></TableInfo>
        </template>
      </avue-crud>
    </div>

    <DesignPopup
      v-model="dataOriginPopup.show"
      title="数据源SQL配置"
      width="90%"
      :isBodyFull="true"
      :dialogParams="{ top: '5vh' }"
      :handleClose="(done) => handlePopupClose(done, 'originButton')"
    >
      <template #default>
        <DataOriginOption
          :ref="(el) => (optionRef.originButton = el)"
          v-model="tableForm.originButton"
          :show="dataOriginPopup.show"
          :tableList="dataOriginPopup.tableList"
          :viewField="dataOriginPopup.viewField"
          :dbCode="tableForm.dataSourcesCode"
        ></DataOriginOption>
      </template>
    </DesignPopup>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { TableInfo } from './components'
import { DataOriginOption } from '../tableDesign/components'
import * as TableApi from '@/api/design/table'
import * as ReportApi from '@/api/design/report'
import { pageOption, tableInfoOption, dicObj, getDataOriginDicData } from './designData'
import { formattingLengStr } from '@/utils/lowDesign'
import { ElMessage, ElButton, ElLoading } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import useCopyText from '@/hooks/design/useCopyText'
import { useRenderVxeColumn } from '../general/components/useRenderVxeColumn'
import { useGroup } from '@/hooks/design/useGroup'
import { checkPermi } from '@/utils/permission'

defineOptions({ name: 'TableDesign' })

const { copyText } = useCopyText()
useRenderVxeColumn()

const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
const { t } = useI18n() // 国际化
const { getCurrPermi } = useCrudPermi()

const loading = ref(true) // 列表的加载中
const saveLoading = ref(false)
const isTableInfo = ref(false)
const analysisLoading = ref(false)

//表格配置
const tableOption = reactive({
  align: 'center',
  headerAlign: 'center',
  searchMenuSpan: 6,
  searchMenuPosition: 'left',
  searchIndex: 3,
  searchIcon: true,
  labelSuffix: ' ',
  span: 8,
  dialogWidth: '100%',
  dialogFullscreen: true,
  editBtn: false,
  delBtn: false,
  border: true,
  index: true,
  menuWidth: 150,
  updateBtnText: '修改并关闭',
  column: pageOption.tableOptionColumn
})

const tableForm = ref<any>({})
const tableData = ref([])
const authValue = ref('')
const tableSearch = ref({})
const tablePage = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const customFormOption = ref({
  labelWidth: 120,
  span: 8,
  menuBtn: false,
  column: pageOption.customFormColumn
})

const editInfoData = ref({})
const apiDetailData = ref<any>({})
const dataOriginPopup = ref({
  show: false,
  tableList: [] as any[],
  viewField: [] as any[]
})

const crudRef = ref()
const tableInfoRef = ref()
const customFormRef = ref()
const treeRef = ref()
const optionRef = ref<any>({})
const isUnload = ref(false)

const permission = getCurrPermi(['lideeyunji:report'])

const menuMoreList = [
  { label: '功能测试', type: 'test' },
  { label: '路由地址', type: 'address' },
  { label: '接口地址', type: 'apiUrl' },
  { label: '复制报表', type: 'copy', isShow: () => checkPermi(['lideeyunji:report:create']) },
  { label: '删除', type: 'del', isShow: () => checkPermi(['lideeyunji:report:delete']) }
]

useCrudHeight(crudRef)
const {
  treeForm,
  treeOption,
  treeData,
  groupValue,
  treePermission,
  treeBeforeOpen,
  treeNodeContextmenu,
  treeNodeClick,
  getTreeData,
  treeUpdate,
  treeSave,
  treeDel
} = useGroup(treeRef, ReportApi, () => resetChange())

const openDataOrigin = () => {
  dataOriginPopup.value.tableList = []
  const dataOriginObj = pageOption.dataOriginObj[tableForm.value.dataSourcesCode]
  tableForm.value.dataOrigin.split(',').forEach((key) => {
    const tableItem = dataOriginObj[key]
    if (tableItem) dataOriginPopup.value.tableList.push(tableItem)
  })
  const filedData = [...tableInfoRef.value.infoData.basics, ...tableInfoRef.value.tableInfoDefault]
  dataOriginPopup.value.viewField = filedData.map((item) => {
    return { label: item.fieldName, value: item.fieldCode }
  })
  dataOriginPopup.value.show = true
}

watch(
  () => authValue.value,
  () => {
    if (tableForm.value.dataConfig) {
      tableForm.value.dataConfig = tableForm.value.dataConfig.filter(
        (key) => !['authFalse', 'authTrue', 'authOpen', ''].includes(key)
      )
    }
    if (authValue.value) tableForm.value.dataConfig.push(authValue.value)
  }
)

watch(
  () => tableForm.value.dataSourcesCode,
  async (newVal, oldVal) => {
    if (newVal && oldVal) tableForm.value.dataOrigin = []
    if (newVal) {
      customFormRef.value?.updateDic('dataOrigin', [])
      const dicData = await getDataOriginDicData(newVal, oldVal === undefined)
      setTimeout(() => {
        customFormRef.value.updateDic('dataOrigin', dicData)
      }, 300)
    }
  }
)

const tableFormVerify = (type) => {
  return new Promise((resolve, reject) => {
    customFormRef.value.validate((bool, done, msg) => {
      done()
      if (!bool) return reject(msg)

      let infoData = {}
      let errText = ''
      let fieldCodeArr: any[string] = []
      const filedData = [...tableInfoRef.value.infoData.basics]
      tableInfoRef.value.tableInfoDefault.forEach((item) => {
        filedData.splice(item.sortNum || 999, 0, item)
      })

      // 先进行hasChildren一致性检查
      filedData.forEach(currentItem => {
        if (currentItem.hasChildren === 'Y') {
          // 检查是否存在子字段（parentFieldCode等于当前字段的fieldCode）
          const hasChildFields = filedData.some(childItem => 
            childItem.parentFieldCode === currentItem.fieldCode
          )
          
          // 如果没有子字段，则将hasChildren设为'N'
          if (!hasChildFields) {
            currentItem.hasChildren = 'N'
          }
        }
      })

      for (const i in filedData) {
        const index = Number(i)
        const item = filedData[index]
        item.sortNum = index + 1

        let messageText = ''
        let tabKey = 'mysql'
        // 子字段不能再包含子字段
        if (item.isSubField && item.hasChildren === 'Y') {
          debugger
          messageText = `<div style="line-height:24px">
              <div>子字段不能包含子字段</div>
              <div>序号：${index + 1}</div>
            </div>`
        }
        // 当不包含子字段时，字段编码和字段名称必须填写
        else if (item.hasChildren !== 'Y') {
          if (!item.fieldCode || !item.fieldName) {
            messageText = `<div style="line-height:24px">
                <div>${!item.fieldCode ? '字段编码' : '字段名称'}必须填写</div>
                <div>序号：${index + 1}</div>
              </div>`
          }
        } else {
          // 包含子字段时，字段名称必须填写
          if (!item.fieldName) {
            messageText = `<div style="line-height:24px">
                <div>字段名称必须填写</div>
                <div>序号：${index + 1}</div>
              </div>`
          }
        }
        if (fieldCodeArr.includes(item.fieldCode)) {
          messageText = `<div style="line-height:24px">
            <div>
              <span>字段编码重复：</span>
              <span style="color:red">${item.fieldCode}</span>
            </div>
            <div>序号：${index + 1}</div>
          </div>`
        }
        fieldCodeArr.push(item.fieldCode)
        // 当不包含子字段时才验证字段编码格式
        if (item.hasChildren !== 'Y' && item.fieldCode) {
          if (!/(^[a-zA-Z]{2}(_?[a-zA-Z0-9])*_?$)/.test(item.fieldCode)) {
            messageText = `<div style="line-height:24px">
              <div>
                <span>字段编码不符合规范</span>
                <span style="color:red">${item.fieldCode}</span>
              </div>
              <div>命名规则：只能由字母、数字、下划线组成;必须以字母开头;不能以单个字母加下滑线开头</div>
              <div>序号：${index + 1}</div>
            </div>`
          }
        }

        if (messageText) {
          handleVerifyError(tabKey, item._X_ROW_KEY, index)
          ElMessage({ dangerouslyUseHTMLString: true, message: messageText })
          errText = 'message'
          break
        }

        for (let key in pageOption.infoApiKey) {
          if (!infoData[key]) infoData[key] = []
          let itemObj: any = {}
          pageOption.infoApiKey[key].forEach((prop) => {
            itemObj[prop] = item[prop] !== undefined ? item[prop] : ''
          })
          if (key == 'fieldList') {
            itemObj.labelI18n = formattingLengStr(itemObj.labelI18n, itemObj.fieldName)
            // 为子字段添加父字段编码信息
            if (item.isSubField && item.parentFieldId) {
              // 查找父字段的编码
              const parentField = filedData.find(field => field._X_ROW_KEY === item.parentFieldId)
              if (parentField && parentField.fieldCode) {
                itemObj.parentFieldCode = parentField.fieldCode
              }
            }
            // 为父字段添加是否包含子字段的标识
            if (item.hasChildren === 'Y') {
              itemObj.hasChildren = 'Y'
            } else {
              itemObj.hasChildren = 'N'
            }
          }
          if (type == 'edit' && item[`${key}_id`]) itemObj['id'] = item[`${key}_id`]
          infoData[key].push(itemObj)
        }
      }

      if (errText) return reject(errText)

      if (type == 'edit') {
        infoData['delIdVo'] = {}
        contrastEditData(infoData)
      }
      resolve(infoData)
    })
  })
}

const contrastEditData = (infoData) => {
  for (const key in infoData) {
    if (!apiDetailData.value[key] || key == 'delIdVo') break
    infoData.delIdVo[key] = cloneDeep(apiDetailData.value.delIdVo[key])
    infoData[key] = infoData[key].map((item) => {
      const contrastObj = apiDetailData.value[key][item.id]
      if (item.id) {
        const index = infoData.delIdVo[key].indexOf(item.id)
        if (index != -1) infoData.delIdVo[key].splice(index, 1)
        if (contrastObj) {
          for (const k in item) {
            if (item[k] != contrastObj[k]) {
              item.isModify = 'Y'
              // console.log(key, k, '修改了','原：'+contrastObj[k], '新：'+item[k], )
              break
            }
          }
        }
      }
      return item
    })
  }
}

const setApiDetailData = (data) => {
  apiDetailData.value = { delIdVo: {} }
  for (const key in data) {
    let listKey = key
    if (listKey != 'report') {
      if (!apiDetailData.value[listKey]) apiDetailData.value[listKey] = {}
      if (!apiDetailData.value.delIdVo[listKey]) apiDetailData.value.delIdVo[listKey] = []
      data[key]?.forEach((item) => {
        if (item.id) {
          apiDetailData.value[listKey][item.id] = item
          apiDetailData.value.delIdVo[listKey].push(item.id)
        }
      })
    }
  }
  for (const key in apiDetailData.value) {
    if (key == 'delIdVo') break
    if (!Object.keys(apiDetailData.value[key]).length) delete apiDetailData.value[key]
  }
}

const handleVerifyError = (key, rowId, index) => {
  const tabKey = `tab_${key}`
  const vxeTableRef = tableInfoRef.value.tableRefObj[tabKey]?.vxeTableRef
  if (vxeTableRef) {
    tableInfoRef.value.setTabsValue(tabKey)
    setTimeout(() => {
      vxeTableRef.setEditRow(vxeTableRef.getRowById(rowId))
      tableInfoRef.value.tableScrollIndex(key, index, index)
    }, 300)
  }
}

const menuHandle = async ({ type, row, index }) => {
  if (type == 'edit') crudRef.value.rowEdit(row, index)
  else if (type == 'test') router.push({ path: '/low/report/test/' + row.reportCode })
  else if (type == 'address') showAddress(row)
  else if (type == 'apiUrl') showApiUrl(row)
  else if (type == 'copy') copyReport(row)
  else if (type == 'del') rowDel(row)
}

const showAddress = (row) => {
  const url = `report/view/` + row.reportCode
  message.alert(`路由地址：</br>${url}`, '菜单的路由地址', {
    confirmButtonText: '复制',
    dangerouslyUseHTMLString: true,
    callback: (action) => {
      if (action == 'confirm') copyText(url)
    }
  })
}

const showApiUrl = async (row) => {
  loading.value = true
  const detailData = await ReportApi.getDbDetail(row.id).finally(() => (loading.value = false))
  const isOpen = detailData.report.dataConfig.indexOf('authOpen') != -1
  const apiList = [
    {
      label: '获取报表数据[post]',
      value: `/lideeyunji/report-data/list/${row.reportCode}`
    },
    {
      label: '批量获取报表数据[post]',
      value: `/lideeyunji/report-data/batch/list/报表code,报表code,...`
    }
  ]
  if (isOpen) {
    apiList.push({
      label: '未登录时获取报表数据[post]',
      value: `/lideeyunji/open/report/list/${row.reportCode}`
    })
  }

  let list: VNode[] = []
  apiList.forEach((item) => {
    list.push(
      h('div', { style: { marginBottom: '10px', border: ' 1px solid #eee', padding: '10px' } }, [
        h('div', [
          h('span', { style: { fontWeight: 600, fontSize: '14px' } }, item.label + '：'),
          h(
            ElButton,
            { size: 'small', type: 'primary', onClick: () => copyText(item.value) },
            () => '复制'
          )
        ]),
        h('div', { style: { fontSize: '12px' } }, item.value)
      ])
    )
  })
  message.alert('', '接口地址', {
    message: () => {
      return h('div', { width: '360px' }, list)
    },
    confirmButtonText: '关闭',
    dangerouslyUseHTMLString: true,
    customStyle: { width: '384px' }
  })
}

const copyReport = (row) => {
  message
    .prompt('新报表编码', '复制报表', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: '',
      inputValidator: (value) => {
        if (!value) return '请输入报表编码'
        let RExp = /([a-zA-Z_$][a-zA-Z\d_$]*\.)*[a-zA-Z_$][a-zA-Z\d_$]*/
        if (!RExp.test(value)) return '报表编码格式错误！'
      }
    })
    .then(async ({ value }) => {
      loading.value = true
      const bool = await ReportApi.verifyReportCode(value)
      if (bool) {
        loading.value = false
        return message.info('报表编码已存在')
      }
      await ReportApi.copyReportData(row.reportCode, value)
      message.success('复制成功')
      resetChange()
    })
}

const handlePopupClose = (done, prop) => {
  const str = optionRef.value[prop]?.getOptionStr() || ''
  done()
  setTimeout(() => {
    tableForm.value[prop] = str
  }, 30)
}

const setInfoBasics = (infoData) => {
  const basics_id: any[] = []
  const basics_defaule: any[] = []
  tableInfoRef.value.infoData.basics.forEach((item) => {
    if (item.only) {
      if (item.fieldCode == 'id') basics_id.push(item)
      else basics_defaule.push(item)
    }
  })
  tableInfoRef.value.infoData.basics = [...basics_id, ...infoData, ...basics_defaule]
}

const analysisDataOrigin = async () => {
  await message.confirm('解析后将会覆盖现有的字段配置，是否确定解析？')
  analysisLoading.value = true
  const dataOption = JSON.parse(tableForm.value.originButton)
  const apiData: any = {}
  if (dataOption.typeKey == 'custom' || tableForm.value.dataSourcesCode !== 'master') {
    apiData.explainSql =
      dataOption.typeKey == 'custom' ? dataOption.customSql : dataOption.executeSql
    apiData.dataSourcesCode = tableForm.value.dataSourcesCode
  } else {
    apiData.modelList = dataOption.optionObj.select
  }
  TableApi.viewDataOriginAnalysis(apiData)
    .then((analysisData) => {
      for (const key in analysisData) {
        analysisData[key] = analysisData[key]?.map((item) => {
          delete item.id
          delete item.dbformId
          return item
        })
      }
      let { infoData } = tableInfoOption.formattingInitData(analysisData)
      infoData = infoData.map((item) => {
        for (const key in item) {
          if (item[key] === null || item[key] === undefined || key == 'fieldList_id') {
            delete item[key]
          }
        }
        return { ...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item }
      })
      setInfoBasics(infoData)
      message.success('解析成功')
    })
    .finally(() => (analysisLoading.value = false))
}

/** 查询列表 */
const getTableData = async () => {
  loading.value = true
  let searchObj = {
    ...tableSearch.value,
    pageNo: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize
  }
  if (groupValue.value) searchObj['groupReportId'] = groupValue.value
  for (const key in searchObj) if (searchObj[key] === '') delete searchObj[key]
  try {
    const data = await ReportApi.getDbList(searchObj)

    tableData.value = data.records
    tablePage.value.total = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const searchChange = (params, done) => {
  if (Object.keys(params).length && groupValue.value) {
    treeRef.value.setCurrentKey(0)
    groupValue.value = 0
  }
  tablePage.value.currentPage = 1
  getTableData().finally(() => {
    done()
  })
}

/** 清空按钮操作 */
const resetChange = () => {
  searchChange({}, () => {})
}

const sizeChange = (pageSize) => {
  tablePage.value.pageSize = pageSize
  resetChange()
}

const currentChange = (currentPage) => {
  tablePage.value.currentPage = currentPage
  getTableData()
}

/** 表单打开前 */
const beforeOpen = async (done, type) => {
  isTableInfo.value = false
  const groupData = cloneDeep(treeData.value)
  customFormOption.value.column.groupReportId.dicData = groupData[0].children
  const { reportCode } = customFormOption.value.column
  if (['edit', 'view'].includes(type) && tableForm.value.id) {
    loading.value = true
    const data = await ReportApi.getDbDetail(tableForm.value.id)
    setApiDetailData(cloneDeep(data))
    data.report.tableConfig = data.report.tableConfig?.split(',') || []
    data.report.dataConfig = data.report.dataConfig?.split(',') || []
    editInfoData.value = data
    tableForm.value = { ...data.report }
    reportCode['disabled'] = true
    reportCode['rules'] = []
    if (tableForm.value.dataSourcesConfig) {
      const dataSourcesConfig = JSON.parse(tableForm.value.dataSourcesConfig)
      delete tableForm.value.dataSourcesConfig
      tableForm.value.dataOrigin = dataSourcesConfig.dataOrigin
      tableForm.value.originButton = JSON.stringify({
        ...dataSourcesConfig.optionData,
        executeSql: dataSourcesConfig.executeSql
      })
    }

    const dataConfig = tableForm.value.dataConfig
    dicObj.dataConfigSelect.forEach((item) => {
      if (dataConfig.includes(item.value)) authValue.value = item.value
    })

    loading.value = false
  } else {
    tableForm.value = { ...tableForm.value, dataConfig: ['page', 'authFalse'] }
    reportCode['disabled'] = false
    reportCode['rules'] = [{ validator: pageOption.reportCode_required, trigger: 'blur' }] as any
    if (groupValue.value) tableForm.value.groupReportId = groupValue.value
    authValue.value = ''
  }
  if (!authValue.value) authValue.value = 'authFalse'
  isUnload.value = ['edit', 'add'].includes(type)
  done()
  //延迟显示
  setTimeout(() => (isTableInfo.value = true), 300)
}

const beforeClose = async (done, type) => {
  isUnload.value = false
  done()
}

const handleApiFormData = (formData) => {
  const form = cloneDeep(formData)
  form.dataConfig = form.dataConfig.join(',')
  form.groupReportId = form.groupReportId || ''
  if (form.dataOrigin || form.originButton) {
    const dataSourcesConfig = {
      dataOrigin: form.dataOrigin || '',
      executeSql: '',
      optionData: {}
    }
    if (form.originButton) {
      const originButton = JSON.parse(form.originButton)
      if (form.dataOrigin) dataSourcesConfig.executeSql = originButton.executeSql
      delete originButton.executeSql
      dataSourcesConfig.optionData = originButton
    }
    delete form.dataOrigin
    delete form.originButton
    form.dataSourcesConfig = JSON.stringify(dataSourcesConfig)
  } else form.dataSourcesConfig = ''
  return form
}

/** 新增操作 */
const rowSave = async (formData, done, loading) => {
  const form = handleApiFormData(formData)
  tableFormVerify('add')
    .then(async (infoData: object) => {
      const elLoading = ElLoading.service({ fullscreen: true })
      let bool = await ReportApi.saveDbData({ report: { ...form }, ...infoData }).catch(() => false)
      if (bool) {
        message.success(t('common.createSuccess'))
        resetChange()
        done()
      } else loading()
      elLoading.close()
    })
    .catch((error) => {
      if (typeof error == 'object') {
        let key = Object.keys(error)[0]
        message.info(error[key][0].message)
      } else if (error !== 'message') {
        message.alert(error, '请修改', { dangerouslyUseHTMLString: true })
      }
      loading()
    })
}

/** 编辑操作 */
const rowUpdate = async (formData, index?, done?, loading?) => {
  let isGetDetail = false
  if (!loading || !done) {
    saveLoading.value = true
    loading = () => (saveLoading.value = false)
    done = () => (saveLoading.value = false)
    isGetDetail = true
  }
  const form = handleApiFormData(formData)
  tableFormVerify('edit')
    .then(async (infoData: object) => {
      let bool = await ReportApi.updateDbData({ report: { ...form }, ...infoData }).catch(
        () => false
      )
      if (bool) {
        if (isGetDetail) {
          const data = await ReportApi.getDbDetail(form.id)
          setApiDetailData(cloneDeep(data))
          editInfoData.value = data
          setTimeout(() => {
            tableInfoRef.value.initEditInfoData()
          }, 30)
        }
        message.success(t('common.updateSuccess'))
        getTableData()
        done()
      } else loading()
    })
    .catch((error) => {
      if (typeof error == 'object') {
        let key = Object.keys(error)[0]
        message.info(error[key][0].message)
      } else if (error !== 'message') {
        message.alert(error, '请修改', { dangerouslyUseHTMLString: true })
      }
      loading()
    })
}

/** 删除按钮操作 */
const rowDel = async (form) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    loading.value = true
    // 发起删除
    await ReportApi.deleteDbData([form.id])
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getTableData()
  } catch {}
}

const beforeUnload = (event) => {
  if (isUnload.value) return (event.returnValue = '您确定要关闭页面吗？')
}

onMounted(async () => {
  window.addEventListener('beforeunload', beforeUnload)
  getTableData()
  getTreeData()
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', beforeUnload)
})
</script>
<style lang="scss" scoped>
.table-content {
  max-width: calc(100% - 190px);
}
</style>
<style lang="scss">
.table-design-custom-form {
  .el-form-item {
    margin-bottom: 18px !important;

    .el-form-item {
      margin-bottom: 0 !important;
    }
  }
}

.dark {
  .table-design-option {
    .view-field-content {
      .content-item {
        color: var(--el-text-color-seconda) !important;
        background-color: var(--el-fill-color-light) !important;
      }
    }

    .integrality-content,
    .left-tree,
    .option-content,
    .view-field,
    .view-field .title,
    .alias-item {
      border-color: var(--el-border-color-dark) !important;
    }

    .integrality-content > div {
      background-color: var(--el-fill-color-light) !important;
    }
  }
}
</style>