From baf5b5a057d970dc890b681d0c2c9165b92f5e30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=BF=E5=91=BD=E7=9A=84=E9=A3=8E?= <115224070@qq.com> Date: Sun, 20 Apr 2025 18:06:20 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=B5=81=E7=A8=8B=E8=A1=A8=E5=8D=95=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E9=83=A8=E9=97=A8=E6=9C=BA=E6=9E=84=E6=A0=91=E9=80=89?= =?UTF-8?q?=E6=8B=A9=202.=E6=96=B0=E5=A2=9E=E5=B2=97=E4=BD=8D=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=203.=E7=94=A8=E6=88=B7=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E5=99=A8=EF=BC=8C=E9=83=A8=E9=97=A8=E9=80=89=E6=8B=A9=E5=99=A8?= =?UTF-8?q?=EF=BC=8C=E5=AD=97=E5=85=B8=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E9=80=89=E6=8B=A9=E5=99=A8=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=204.?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E9=83=A8?= =?UTF-8?q?=E9=97=A8=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E5=AD=97=E5=85=B8?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E6=8E=A5=E5=8F=A3=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=E8=8E=B7=E5=8F=96=E6=95=B0=E6=8D=AE=E5=90=8E?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=BA=86=E5=85=A8=E5=B1=80=E5=8F=98=E9=87=8F?= =?UTF-8?q?=EF=BC=8C=E5=90=8E=E7=BB=AD=E5=8F=AF=E5=9C=A8=E6=B5=81=E7=A8=8B?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=80=9A=E8=BF=87=20console.log(api.getData(?= =?UTF-8?q?$inject.self.field))=20=E8=8E=B7=E5=8F=96=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=80=89=E9=A1=B9=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/DeptTreeSelect.vue | 3 +- .../FormCreate/src/components/DictSelect.vue | 21 +++--- .../src/components/useApiSelect.tsx | 5 ++ .../src/config/useDictSelectRule.ts | 2 + .../FormCreate/src/useFormCreateDesigner.ts | 24 +++++-- src/plugins/formCreate/index.ts | 65 ++++++++++++++++++- 6 files changed, 104 insertions(+), 16 deletions(-) diff --git a/src/components/FormCreate/src/components/DeptTreeSelect.vue b/src/components/FormCreate/src/components/DeptTreeSelect.vue index 1b2d5ba16..12961601c 100644 --- a/src/components/FormCreate/src/components/DeptTreeSelect.vue +++ b/src/components/FormCreate/src/components/DeptTreeSelect.vue @@ -39,12 +39,13 @@ const props = withDefaults(defineProps(), { const deptList = ref([]) // 树形结构 onMounted(async () => { - console.log('Props',props) + const rule = props.formCreateInject.rule const data = await DeptApi.getSimpleDeptList() //1.调用后端接口获取数据 if (!data || data.length === 0) { return } deptList.value = handleTree(data) + rule.options= data }) diff --git a/src/components/FormCreate/src/components/DictSelect.vue b/src/components/FormCreate/src/components/DictSelect.vue index 204746d17..d5f535eab 100644 --- a/src/components/FormCreate/src/components/DictSelect.vue +++ b/src/components/FormCreate/src/components/DictSelect.vue @@ -45,15 +45,18 @@ const props = withDefaults(defineProps(), { // 获得字典配置 const getDictOptions = computed(() => { - switch (props.valueType) { - case 'str': - return getStrDictOptions(props.dictType) - case 'int': - return getIntDictOptions(props.dictType) - case 'bool': - return getBoolDictOptions(props.dictType) - default: - return [] + const rule = props.formCreateInject.rule + let options + if(props.valueType === 'str'){ + options = getStrDictOptions(props.dictType) + }else if(props.valueType === 'int'){ + options = getIntDictOptions(props.dictType) + }else if(props.valueType === 'bool'){ + options = getBoolDictOptions(props.dictType) + }else { + options = [] } + rule.options= options + return options }) diff --git a/src/components/FormCreate/src/components/useApiSelect.tsx b/src/components/FormCreate/src/components/useApiSelect.tsx index c02e79719..e6d9c50e1 100644 --- a/src/components/FormCreate/src/components/useApiSelect.tsx +++ b/src/components/FormCreate/src/components/useApiSelect.tsx @@ -2,6 +2,7 @@ import request from '@/config/axios' import { isEmpty } from '@/utils/is' import { ApiSelectProps } from '@/components/FormCreate/src/type' import { jsonParse } from '@/utils' +import { object } from 'vue-types' export const useApiSelect = (option: ApiSelectProps) => { return defineComponent({ @@ -95,6 +96,9 @@ export const useApiSelect = (option: ApiSelectProps) => { } function parseOptions(data: any) { + const api = props.formCreateInject.api + api.setData(props.formCreateInject.field,data) + // 情况一：如果有自定义解析函数优先使用自定义解析 if (!isEmpty(props.parseFunc)) { options.value = parseFunc()?.(data) @@ -111,6 +115,7 @@ export const useApiSelect = (option: ApiSelectProps) => { parseOptions0(data) return } + // 情况三：不是 yudao-vue-pro 标准返回 console.warn( `接口[${props.url}] 返回结果不是 yudao-vue-pro 标准返回建议采用自定义解析函数处理` diff --git a/src/components/FormCreate/src/config/useDictSelectRule.ts b/src/components/FormCreate/src/config/useDictSelectRule.ts index f232f486b..98d2c7770 100644 --- a/src/components/FormCreate/src/config/useDictSelectRule.ts +++ b/src/components/FormCreate/src/config/useDictSelectRule.ts @@ -12,6 +12,7 @@ export const useDictSelectRule = () => { const name = 'DictSelect' const rules = cloneDeep(selectRule) const dictOptions = ref<{ label: string; value: string }[]>([]) // 字典类型下拉数据 + const event = ['click','change','visibleChange','clear','blur','focus'] onMounted(async () => { const data = await DictDataApi.getSimpleDictTypeList() if (!data || data.length === 0) { @@ -27,6 +28,7 @@ export const useDictSelectRule = () => { icon: 'icon-doc-text', label, name, + event: event, rule() { return { type: name, diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts index dff1333b3..8589a4bfc 100644 --- a/src/components/FormCreate/src/useFormCreateDesigner.ts +++ b/src/components/FormCreate/src/useFormCreateDesigner.ts @@ -1,10 +1,12 @@ import { useDictSelectRule, + useDeptTreeSelectRule, useEditorRule, useSelectRule, useUploadFileRule, useUploadImgRule, - useUploadImgsRule + useUploadImgsRule, + useTreeSelectRule } from './config' import { Ref } from 'vue' import { Menu } from '@/components/FormCreate/src/type' @@ -19,6 +21,8 @@ import { apiSelectRule } from '@/components/FormCreate/src/config/selectRule' * - 字典选择器 * - 用户选择器 * - 部门选择器 + * - 部门树选择器 + * - 岗位选择器 * - 富文本 */ export const useFormCreateDesigner = async (designer: Ref) => { @@ -48,23 +52,33 @@ export const useFormCreateDesigner = async (designer: Ref) => { }) } + const event = ['click','change','visibleChange','clear','blur','focus'] const userSelectRule = useSelectRule({ name: 'UserSelect', label: '用户选择器', - icon: 'icon-user-o' + icon: 'icon-user-o', + event: event, }) const deptSelectRule = useSelectRule({ name: 'DeptSelect', label: '部门选择器', - icon: 'icon-address-card-o' + icon: 'icon-address-card-o', + event: event, }) const dictSelectRule = useDictSelectRule() + const deptTreeSelectRule = useDeptTreeSelectRule() const apiSelectRule0 = useSelectRule({ name: 'ApiSelect', label: '接口选择器', icon: 'icon-server', props: [...apiSelectRule], - event: ['click', 'change', 'visibleChange', 'clear', 'blur', 'focus'] + event: event, + }) + const postSelectRule = useSelectRule({ + name: 'PostSelect', + label: '岗位选择器', + icon: 'icon-address-card-o', + event: event, }) /** @@ -75,7 +89,7 @@ export const useFormCreateDesigner = async (designer: Ref) => { // designer.value?.removeMenuItem('select') // designer.value?.removeMenuItem('radio') // designer.value?.removeMenuItem('checkbox') - const components = [userSelectRule, deptSelectRule, dictSelectRule, apiSelectRule0] + const components = [userSelectRule, deptSelectRule, dictSelectRule, apiSelectRule0,deptTreeSelectRule,postSelectRule] const menu: Menu = { name: 'system', title: '系统字段', diff --git a/src/plugins/formCreate/index.ts b/src/plugins/formCreate/index.ts index 07d2c51fe..c1ef2fa58 100644 --- a/src/plugins/formCreate/index.ts +++ b/src/plugins/formCreate/index.ts @@ -1,5 +1,7 @@ import type { App } from 'vue' -// 👇使用 form-create 需额外全局引入 element plus 组件 +import { getAccessToken, getTenantId } from '@/utils/auth' +import { config } from '@/config/axios/config' +// 使用 form-create 需额外全局引入 element plus 组件 import { // ElAutocomplete, // ElButton, @@ -67,6 +69,7 @@ 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', @@ -84,6 +87,13 @@ const ApiSelect = useApiSelect({ name: 'ApiSelect' }) +const PostSelect = useApiSelect({ + name: 'PostSelect', + labelField: 'name', + valueField: 'id', + url: '/system/post/simple-list' +}) + const components = [ ElAlert, ElTransfer, @@ -113,6 +123,7 @@ const components = [ UploadImgs, UploadFile, DictSelect, + DeptTreeSelect, UserSelect, DeptSelect, ApiSelect, @@ -120,6 +131,7 @@ const components = [ ElCollapse, ElCollapseItem, ElCard, + PostSelect, ] // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档 @@ -131,3 +143,54 @@ export const setupFormCreate = (app: App) => { 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); // 失败回调 + } + }); +};