Signed-off-by: chy <chy@163.com>

src/views/lowdesign/reportDesign/components/TableInfo.vue

@@ -0,0 +1,246 @@
+<template>
+  <avue-tabs ref="tabsRef" :option="tabsOption" @change="tabsHandleChange"></avue-tabs>
+  <InfoVxeTopBtn
+    v-show="tabsValue.edit"
+    :selectNum="tabsValue.dataKey ? infoSelect[tabsValue.dataKey].length : 0"
+    :tabItem="tabsValue"
+    :size="size"
+    @cell-add="cellAddData"
+    @del-data="delTableInfoData"
+    @order-data="setInfoOrder"
+  />
+  <template v-for="tab in tabsOption.column" :key="tab.prop">
+    <div v-show="tabsValue.prop === tab.prop">
+      <InfoVxeTable
+        v-model="infoData[tab.dataKey]"
+        :ref="(el) => (tableRefObj[tab.prop] = el)"
+        :tabItem="tab"
+        :column="tableInfoOption.infoColumn[`${tab.key}Column`]"
+        @selection-change="infoSelectionChange"
+        @cell-click="cellClick"
+        @dropdown-command="dorpdownHandleCommand"
+      ></InfoVxeTable>
+    </div>
+  </template>
+  <DesignPopup
+    v-model="optionsDialog.dialog.value"
+    v-bind="optionsDialog.dialog"
+    :isBodyFull="true"
+  >
+    <template #default>
+      <template v-for="(control, key) in optionComponents" :key="key">
+        <component
+          :ref="(el) => (optionRef[key] = el)"
+          v-if="key == optionsDialog.controlType"
+          :is="control"
+          v-model="optionsDialog.controlValue"
+          v-bind="optionsDialog.controlData"
+          :show="optionsDialog.dialog.value"
+        ></component>
+      </template>
+    </template>
+  </DesignPopup>
+</template>
+
+<script setup lang="ts">
+import { SqlOption, InfoVxeTable, InfoVxeTopBtn } from '../../tableDesign/components'
+import { MonacoEditor } from '@/components/MonacoEditor/index'
+import { tableInfoOption } from '../designData'
+import { formattingLengStr } from '@/utils/lowDesign'
+import { cloneDeep } from 'lodash-es'
+import * as DictDataApi from '@/api/system/dict/dict.type'
+
+defineOptions({ name: 'TableInfo' })
+const message = useMessage()
+
+interface Props {
+  formType: string
+  editInfoData: any
+  size: any
+}
+const props = withDefaults(defineProps<Props>(), {
+  formType: ''
+})
+const tabsOption = ref({
+  column: [{ label: '字段属性', prop: 'tab_field', key: 'field', dataKey: 'basics', edit: true }]
+})
+const tabsValue = ref(tabsOption.value.column[0])
+
+const infoData = ref({
+  basics: [] as any[]
+})
+const infoSelect = ref({
+  basics: []
+})
+const tableInfoDefault = ref<any[]>([])
+const optionsDialog = ref<any>({ dialog: {}, controlData: {} })
+const tableRefObj = ref({})
+
+const optionComponents = markRaw({
+  sqlOption: SqlOption,
+  meditor: MonacoEditor
+})
+const optionRef = ref({})
+const tabsRef = ref()
+
+const fieldList = computed(() => {
+  let dicData: Array<{ label: string; value: string; type: string }> = []
+  infoData.value.basics.forEach((item) => {
+    if (item.fieldCode && item.isDb == 'Y')
+      dicData.push({
+        label: `${item.fieldCode}${item.fieldName ? '（' + item.fieldName + '）' : ''}`,
+        value: item.fieldCode,
+        type: item.fieldType
+      })
+  })
+  return dicData
+})
+
+watch(
+  () => fieldList.value,
+  (dicData: any) => {
+    const dicDataObj = {}
+    dicData.forEach(({ value, label }) => (dicDataObj[value] = label))
+  }
+)
+
+const dorpdownHandleCommand = (command) => {
+  let { dataKey } = tabsValue.value
+  if (!dataKey) return
+  let { index, type } = command
+  if (type == 'up' || type == 'down') {
+    const delItem = infoData.value[dataKey].splice(index, 1)[0]
+    nextTick(() => infoData.value[dataKey].splice(type == 'up' ? index - 1 : index + 1, 0, delItem))
+  } else if (type == 'add') cellAddData(index + 1)
+}
+const setInfoOrder = () => {
+  let { dataKey } = tabsValue.value
+  if (!dataKey) return
+  message
+    .prompt('请输入序号（格式：原序号/最终序号）', '调整排序', { inputValue: '/', type: '' })
+    .then(({ value }) => {
+      let orderArr = value.split('/')
+      if (orderArr.length == 2) {
+        const delItem = infoData.value[dataKey].splice(Number(orderArr[0].trim()) - 1, 1)[0]
+        nextTick(() => infoData.value[dataKey].splice(Number(orderArr[1].trim()) - 1, 0, delItem))
+      } else message.error('请输入正确的格式，如：2/3')
+    })
+    .catch(() => {})
+}
+
+const infoSelectionChange = (selectObj) => {
+  let { dataKey } = tabsValue.value
+  if (!dataKey) return
+  infoSelect.value[dataKey] = selectObj.records
+}
+
+const delTableInfoData = () => {
+  let { dataKey, prop } = tabsValue.value
+  if (!dataKey) return
+  const keyArr = infoSelect.value[dataKey].map((item) => item._X_ROW_KEY)
+  infoData.value[dataKey] = infoData.value[dataKey].filter(
+    (item) => !keyArr.includes(item._X_ROW_KEY)
+  )
+  tableRefObj.value[prop].vxeTableRef.clearCheckboxRow()
+  infoSelect.value[dataKey] = []
+}
+
+const tabsHandleChange = (column) => {
+  tabsValue.value = column
+}
+
+const setTabsValue = (prop) => {
+  tabsOption.value.column.forEach((item, index) => {
+    if (item.prop == prop) {
+      tabsRef.value.changeTabs(index)
+    }
+  })
+}
+
+const cellAddData = (addIndex) => {
+  let { key, dataKey } = tabsValue.value
+  if (!dataKey) return
+  let addData = cloneDeep(tableInfoOption.infoDefaultData[dataKey]) || {}
+  let index = infoData.value[dataKey].length
+  infoData.value[dataKey].splice(addIndex === undefined ? index : addIndex, 0, addData)
+  tableScrollIndex(key, index, addIndex)
+}
+
+const tableScrollIndex = (key, index, addIndex?) => {
+  setTimeout(() => {
+    const tableBodyDom = document.querySelector(`.${key}-vxe-table .vxe-table--body-wrapper`)
+    if (tableBodyDom) {
+      const bool = addIndex === undefined
+      tableBodyDom.scrollTop =
+        (bool ? index : addIndex) * 40 - (bool ? 0 : tableBodyDom['offsetHeight'] / 2)
+    }
+    tableRefObj.value[`tab_${key}`].vxeTableRef.setEditRow(
+      tableRefObj.value[`tab_${key}`].vxeTableRef.getData(addIndex ? addIndex : index)
+    )
+  }, 300)
+}
+
+const cellClick = ({ rowIndex }) => {
+  let { prop } = tabsValue.value
+  tableRefObj.value[prop].vxeTableRef.setEditRow(
+    tableRefObj.value[prop].vxeTableRef.getData(rowIndex)
+  )
+}
+
+const initEditInfoData = () => {
+  const data = tableInfoOption.formattingInitData(props.editInfoData)
+  const fieldList: any[] = []
+  tableInfoDefault.value = data.infoData.filter((item) => {
+    fieldList.push(cloneDeep(item))
+    return false
+  })
+  infoData.value.basics = fieldList
+}
+
+onMounted(() => {
+  tableInfoDefault.value = []
+  infoData.value.basics = []
+  if (props.formType != 'add') initEditInfoData()
+  const { fieldColumn } = tableInfoOption.infoColumn
+  fieldColumn.labelI18n.editRender.events = {
+    click: (row) => {
+      nextTick(() => {
+        tableRefObj.value['tab_field'].vxeTableRef.setRow(row, {
+          labelI18n: formattingLengStr(row.labelI18n, row.fieldName)
+        })
+      })
+    }
+  }
+  DictDataApi.getSimpleDictTypeList().then((dicData) => {
+    const dicObj = {}
+    dicData = dicData.map(({ type, name }) => {
+      dicObj[type] = `${type}（${name}）`
+      return { label: dicObj[type], value: type }
+    })
+    Object.assign(fieldColumn.dictCode.editRender, { dicData, dicObj })
+  })
+})
+
+defineExpose({
+  infoData,
+  tableInfoDefault,
+  fieldList,
+  tableRefObj,
+  setTabsValue,
+  tableScrollIndex,
+  initEditInfoData
+})
+</script>
+
+<style lang="scss">
+.low-summary-buttom-sql__popover {
+  .el-popper__arrow {
+    left: 20px !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+::v-deep(.virtual-hide-row) {
+  display: none;
+}
+</style>

src/views/lowdesign/reportDesign/components/index.ts

@@ -0,0 +1,5 @@
+import TableInfo from './TableInfo.vue'
+
+export {
+  TableInfo
+}

src/views/lowdesign/reportDesign/designData.ts

@@ -0,0 +1,223 @@
+import { verifyReportCode } from '@/api/design/report';
+import { getAllDbDicData } from '@/api/design/table';
+import { cloneDeep } from 'lodash-es';
+// 数据字典
+export const dicObj = {
+  dic_whether: [
+    { label: '是', value: 'Y' },
+    { label: '否', value: 'N' },
+  ],
+  tableSelect: [
+    { label: '多选', value: 'multiple' },
+    { label: '单选', value: 'radio' },
+    { label: '禁用', value: 'disabled' },
+  ],
+  dataConfig: [
+    { label: '分页', value: 'page' },
+  ],
+  dataConfigSelect: [
+    { label: '需登录', value: 'authFalse', desc: '访问该表接口：需登录' },
+    { label: '需登录、鉴权', value: 'authTrue', desc: '访问该表接口：需登录并且需要配置菜单权限' },
+    { label: '不登录可查询数据', value: 'authOpen', desc: '访问该表查询接口：不需要登录' },
+  ],
+  tableConfig: [
+    { label: '固定表格高度', value: 'height' },
+    { label: '序号列', value: 'index' },
+    { label: '纵向边框', value: 'border' },
+    { label: '斑马纹样式', value: 'stripe' },
+    { label: '隐藏导出按钮', value: 'hideExport' },
+  ],
+  fieldType: [
+    { label: '字符串 String', value: 'String' },
+    { label: '整数 Integer', value: 'Integer' },
+    { label: '大整数 BigInt', value: 'BigInt' },
+    { label: '小数 BigDecimal', value: 'BigDecimal' },
+    { label: '日期 Date', value: 'Date' },
+    { label: '时间 Time', value: 'Time' },
+    { label: '日期时间 DateTime', value: 'DateTime' },
+    { label: '文本 Text', value: 'Text' },
+    { label: '大文本 LongText', value: 'LongText' },
+    { label: '二进制 Blob', value: 'Blob' },
+  ],
+  cellWidthType: [
+    { label: '固定', value: 'fixed' },
+    { label: '最小', value: 'min' },
+  ],
+  queryMode: [
+    { label: '精确查询', value: 'EQ' },
+    { label: '模糊查询', value: 'LIKE' },
+    { label: '范围查询（仅适用于日期、时间、数字）', value: 'RANGE' },
+    { label: '包含查询（in）', value: 'IN' },
+    { label: '多选查询（in）', value: 'MORE_IN' },
+    { label: '不等于（!=）', value: 'NE' },
+  ],
+}
+export const getDicObj = (key) => {
+  const obj = {}
+  if (dicObj[key]) dicObj[key].forEach(item => obj[item.value] = item.label)
+  return obj
+}
+
+const rules_required = (label, type = '') => [{ required: true, message: `${['select'].includes(type) ? '请选择' : '请输入'} ${label}`, trigger: "blur" }]
+const reportCode_required = async (rule, value, callback) => {
+  if (value === '') callback(new Error('请输入 报表编码'));
+  else {
+    const bool = await verifyReportCode(value)
+    if (bool) callback(new Error('报表编码已存在，请修改'));
+    else callback()
+  }
+};
+
+const dataSourcesCode_dicFormatter = (data) => {
+  data = data.map(item => {
+    if (item.id === 0) {
+      item.dbCode = 'master'
+      item.name = `${item.name}（本地数据源）`
+    }
+    else item.name = `${item.name}（${item.dbType}）`
+    return item
+  })
+  return data.filter(item => item.dbCode)
+}
+
+const dataOriginDicObj = {}
+
+export const getDataOriginDicData = (dbCode, isReacquire?) => {
+  return new Promise(async resolve => {
+    if (isReacquire) for (const key in dataOriginDicObj) delete dataOriginDicObj[key]
+    if (dataOriginDicObj[dbCode]) return resolve(dataOriginDicObj[dbCode])
+    let data = []
+    if (dbCode == 'master') data = await getAllDbDicData({ systemFlag: 'Y' })
+    else data = await getAllDbDicData({ dataSourcesCode: dbCode })
+    dataOriginDicObj[dbCode] = dataOrigin_dicFormatter(data, dbCode)
+    resolve(dataOriginDicObj[dbCode])
+  })
+
+}
+
+const dataOriginObj = {}
+const dataOrigin_dicFormatter = (data, dbCode) => {
+  const sysList: any[] = []
+  const dbList: any[] = []
+  data.forEach(item => {
+    const row = {
+      label: `${item.tableName}（${item.tableDescribe}）`,
+      tableText: item.tableDescribe,
+      tableName: item.tableName,
+      value: item.tableId,
+      type: 'table',
+      fieldList: item.fieldModelList.map(child => {
+        let label = child.fieldCode
+        if (child.fieldName) label = `${label}（${child.fieldName}）`
+        return { label, value: child.fieldCode, tableName: item.tableName, type: 'field', fieldType: child.fieldType }
+      })
+    }
+    if (item.tableId == item.tableName) sysList.push(row)
+    else if (item.tableClassify !== 2) dbList.push(row)
+    if (!dataOriginObj[dbCode]) dataOriginObj[dbCode] = {}
+    dataOriginObj[dbCode][item.tableId] = row
+  })
+  const dicData: any[] = []
+  if (sysList.length) dicData.push({ label: '系统表', value: 'sys', disabled: true, children: sysList })
+  if (dbList.length) dicData.push({ label: '表单开发', value: 'dbForm', disabled: true, children: dbList })
+  return dicData
+}
+
+//表格配置
+const tableOptionColumn = {
+  reportName: { label: '报表名称', display: false, search: true, minWidth: 140 },
+  reportCode: { label: '报表编码', display: false, search: true, minWidth: 140, overHidden: true },
+  javaConfig: { label: 'JAVA类路径', display: false, search: true, minWidth: 140, overHidden: true, searchLabelWidth: 100, },
+  createTime: { label: '创建时间', type: 'datetime', format: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'x', display: false, width: 160 },
+  custom_form: { label: '', labelWidth: 0, span: 24, hide: true, showColumn: false },
+  custom_info: { label: '', labelWidth: 0, span: 24, hide: true, showColumn: false }
+}
+// 表单配置
+const customFormColumn = {
+  reportName: { label: '报表名称', rules: rules_required('报表名称') },
+  reportCode: { label: '报表编码', rules: [...rules_required('报表编码'), { validator: reportCode_required, trigger: 'blur', required: true }] },
+  groupReportId: { label: '分组类型', type: 'tree', value: '', dicData: [], filterable: true, defaultExpandAll: true, props: { label: 'name', value: 'id' } },
+  dataSourcesCode: { label: '数据源', type: 'select', value: 'master', span: 6, clearable: false, dicUrl: '/infra/data-source-config/list', props: { label: 'name', value: 'dbCode' }, dicFormatter: dataSourcesCode_dicFormatter },
+  dataOrigin: { label: '数据表', type: 'tree', value: '', span: 8, dataType: 'string', multiple: true, filterable: true, parent: false, defaultExpandAll: true, dicData: [] },
+  originButton: { label: '', labelWidth: 0, },
+  javaConfig: { label: 'JAVA类路径', span: 12 },
+  dataConfig: { label: '数据配置', type: 'checkbox', span: 24, dicData: dicObj.dataConfig, dataType: 'string', value: ['page', 'authFalse'] },
+  tableConfig: { label: '表格配置', type: 'checkbox', span: 24, dicData: dicObj.tableConfig, dataType: 'string', value: ['height', 'header', 'menu', 'index', 'border'] },
+}
+
+const infoColumn = {
+  fieldColumn: {
+    fieldCode: { title: '字段编码', minWidth: 120, editRender: { name: 'LowInput', verifyEdit: true } },
+    fieldName: { title: '字段名称', minWidth: 120, editRender: { name: 'LowInput' } },
+    labelI18n: { title: '国际化配置', width: 140, editRender: { name: 'LowMonacoEditorInput', events: {} } },
+    fieldType: { title: '字段类型', minWidth: 100, editRender: { name: 'LowSelect', verifyEdit: true, dicData: dicObj.fieldType, dicObj: getDicObj('fieldType') } },
+    queryIsDb: { title: '接口查询', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
+    queryIsWeb: { title: '查询控件', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
+    queryMode: { title: '查询模式', width: 130, editRender: { name: 'LowSelect', verifyEdit: true, dicData: dicObj.queryMode, dicObj: getDicObj('queryMode') } },
+    dictCode: { title: '字典Code', width: 180, editRender: { name: 'LowSelect', verifyEdit: true, filterable: true, noStop: true, dicData: [] } },
+    isExport: { title: '是否可导出', width: 90, align: "center", editRender: { name: 'LowCheckbox' } },
+    isSort: { title: '是否合计', width: 75, align: "center", editRender: { name: 'LowCheckboxSum' } },
+    isShowSort: { title: '是否排序', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
+  },
+}
+
+const infoApiKey = {}
+const apiKey = { fieldColumn: 'fieldList' }
+for (const key in infoColumn) {
+  if (apiKey[key]) {
+    const keys = Object.keys(infoColumn[key])
+    if (key == 'fieldColumn') keys.push('sortNum')
+    infoApiKey[apiKey[key]] = keys
+  }
+}
+
+//默认值
+const infoDefaultData = {
+  basics: {
+    fieldCode: '', fieldName: '', labelI18n: '', fieldType: 'String', queryIsDb: 'N', queryIsWeb: 'N', queryMode: 'LIKE', dictCode: '', isExport: 'Y', isShowSort: 'N',isSort:''
+  },
+}
+
+
+//格式化接口初始数据
+const formattingInitData = (editInfoData) => {
+  const optionObj = {}
+
+  for (const apiKey in infoApiKey) {
+    const key = apiKey
+    optionObj[key] = {}
+    editInfoData[key]?.forEach(item => optionObj[key][item.fieldCode] = item)
+  }
+
+  const infoData = [] as any
+  editInfoData.fieldList.forEach(fieldItem => {
+    const fieldCode = fieldItem.fieldCode
+    const infoItem: any = {}
+
+    for (const apiKey in infoApiKey) {
+      const dataKey = apiKey
+      if (!optionObj[dataKey]) continue
+      const editItem = optionObj[dataKey][fieldCode] || cloneDeep(infoDefaultData)
+
+      infoItem[`${apiKey}_id`] = editItem.id
+      for (const i in infoApiKey[apiKey]) {
+        const key = infoApiKey[apiKey][i]
+        if (apiKey != 'fieldList' && ['fieldCode', 'fieldName'].includes(key)) continue
+        infoItem[key] = editItem[key]
+      }
+    }
+    infoData.push(infoItem)
+  })
+  return { infoData }
+}
+
+export const pageOption = {
+  tableOptionColumn, customFormColumn, dataOriginObj,
+  infoApiKey,
+  reportCode_required
+}
+export const tableInfoOption = {
+  infoColumn,
+  infoDefaultData,
+  formattingInitData,
+}

src/views/lowdesign/reportDesign/index.vue

@@ -0,0 +1,857 @@
+<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)
+      })
+
+      for (const i in filedData) {
+        const index = Number(i)
+        const item = filedData[index]
+        item.sortNum = index + 1
+
+        let messageText = ''
+        let tabKey = 'mysql'
+        if (!item.fieldCode || !item.fieldName) {
+          messageText = `<div style="line-height:24px">
+              <div>${!item.fieldCode ? '字段编码' : '字段名称'}必须填写</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 (!/(^[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 (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>