admin-vue3/src/plugins/formCreate/index.ts

import type { App } from 'vue'
import { getAccessToken,  getTenantId } from '@/utils/auth'
import { config } from '@/config/axios/config'
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>使用 form-create 需额外全局引入 element plus 组件
import {
  // ElAutocomplete,
  // ElButton,
  // ElCascader,
  // ElCheckbox,
  // ElCheckboxButton,
  // ElCheckboxGroup,
  // ElCol,
  // ElColorPicker,
  // ElDatePicker,
  // ElDialog,
  // ElForm,
  // ElInput,
  // ElInputNumber,
  // ElPopover,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  // ElRow,
  // ElSelect,
  // ElSlider,
  // ElSwitch,
  // ElTimePicker,
  // ElTooltip,
  // ElTree,
  // ElUpload,
  // ElIcon,
  // ElProgress,
  // 以上会由 @form-create/element-ui/auto-import 自动引入
  ElAlert,
  ElTransfer,
  ElAside,
  ElContainer,
  ElDivider,
  ElHeader,
  ElMain,
  ElPopconfirm,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTabs,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElBadge,
  ElTag,
  ElText,
  ElMenu,
  ElMenuItem,
  ElFooter,
  ElMessage,
  ElCollapse,
  ElCollapseItem,
  ElCard,
  // ElFormItem,
  // ElOption
} from 'element-plus'
import FcDesigner from '@form-create/designer'
import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'

//======================= 自定义组件 =======================
import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
import { useApiSelect } from '@/components/FormCreate'
import { Editor } from '@/components/Editor'
import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'
import DeptTreeSelect from '@/components/FormCreate/src/components/DeptTreeSelect.vue'

const UserSelect = useApiSelect({
  name: 'UserSelect',
  labelField: 'nickname',
  valueField: 'id',
  url: '/system/user/simple-list'
})
const DeptSelect = useApiSelect({
  name: 'DeptSelect',
  labelField: 'name',
  valueField: 'id',
  url: '/system/dept/simple-list'
})
const ApiSelect = useApiSelect({
  name: 'ApiSelect'
})

const PostSelect = useApiSelect({
  name: 'PostSelect',
  labelField: 'name',
  valueField: 'id',
  url: '/system/post/simple-list'
})

const components = [
  ElAlert,
  ElTransfer,
  ElAside,
  ElContainer,
  ElDivider,
  ElHeader,
  ElMain,
  ElPopconfirm,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTabs,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElBadge,
  ElTag,
  ElText,
  ElMenu,
  ElMenuItem,
  ElFooter,
  ElMessage,
  // ElFormItem,
  // ElOption,
  UploadImg,
  UploadImgs,
  UploadFile,
  DictSelect,
  DeptTreeSelect,
  UserSelect,
  DeptSelect,
  ApiSelect,
  Editor,
  ElCollapse,
  ElCollapseItem,
  ElCard,
  PostSelect,
]

// 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
export const setupFormCreate = (app: App<Element>) => {
  components.forEach((component) => {
    app.component(component.name, component)
  })
  formCreate.use(install)
  app.use(formCreate)
  app.use(FcDesigner)
}

formCreate.setData('globalToken',getAccessToken())
formCreate.setData('tenantId',getTenantId())

const { default_headers } = config

// 重写 formCreate 的内置 fetch 方法
formCreate.fetch = (options) => {
  const { dataType } = options
  // 获取或生成 Token
  const token = getAccessToken(); // 这里的 token 可以从 Vuex、localStorage 或其他地方获取
  const tenantId = getTenantId()
  let headers = {}
// 设置请求头，附加 Authorization token
  const action = options.action.trim().toLowerCase()
  if(action.startsWith('http://') || action.startsWith('https://') )
  {
    console.log("URL带有http:// 或 https:// 开头，无需进行处理")
    headers = {
      'Content-Type': dataType || default_headers,
      ...options.headers,
    };
  }else
  {
    options.action = config.base_url+action
    headers = {
        'Content-Type': dataType || default_headers,
        ...options.headers,
        Authorization: `Bearer ${token}`,
        'tenant-id': tenantId
    };
  }

// 发起请求
  fetch(options.action, {
      method: options.method || 'GET', // 默认请求方法为 GET
      headers: headers,                 // 包含 Authorization 的请求头
      body: options.method !== 'GET' ? JSON.stringify(options.data) : null, // 如果是 POST 或其他方法，添加请求体
  })
  .then(response => response.json())  // 解析响应为 JSON
  .then(data => {
      if (options.onSuccess) {
          options.onSuccess(data);  // 成功回调
      }
  })
  .catch(error => {
      if (options.onError) {
          options.onError(error);  // 失败回调
      }
  });
};