From 3b6ef1d9c0e6f4bb0ede83f9d2f01faa0a376ee0 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: Mon, 14 Apr 2025 15:45:12 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=83=A8=E9=97=A8=E6=9C=BA=E6=9E=84=E6=A0=91?= =?UTF-8?q?=E9=80=89=E6=8B=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- run.bat | 2 + .../src/components/DeptTreeSelect.vue | 50 +++++++++++++++++++ src/components/FormCreate/src/config/index.ts | 2 + .../src/config/useDeptTreeSelectRule.ts | 36 +++++++++++++ 4 files changed, 90 insertions(+) create mode 100644 run.bat create mode 100644 src/components/FormCreate/src/components/DeptTreeSelect.vue create mode 100644 src/components/FormCreate/src/config/useDeptTreeSelectRule.ts diff --git a/run.bat b/run.bat new file mode 100644 index 000000000..4adb79e22 --- /dev/null +++ b/run.bat @@ -0,0 +1,2 @@ +title Ç°¶Ë·þÎñ +npm run dev \ No newline at end of file diff --git a/src/components/FormCreate/src/components/DeptTreeSelect.vue b/src/components/FormCreate/src/components/DeptTreeSelect.vue new file mode 100644 index 000000000..1b2d5ba16 --- /dev/null +++ b/src/components/FormCreate/src/components/DeptTreeSelect.vue @@ -0,0 +1,50 @@ + + + diff --git a/src/components/FormCreate/src/config/index.ts b/src/components/FormCreate/src/config/index.ts index b1e2ddea5..9188f533e 100644 --- a/src/components/FormCreate/src/config/index.ts +++ b/src/components/FormCreate/src/config/index.ts @@ -2,6 +2,7 @@ import { useUploadFileRule } from './useUploadFileRule' import { useUploadImgRule } from './useUploadImgRule' import { useUploadImgsRule } from './useUploadImgsRule' import { useDictSelectRule } from './useDictSelectRule' +import { useDeptTreeSelectRule } from './useDeptTreeSelectRule' import { useEditorRule } from './useEditorRule' import { useSelectRule } from './useSelectRule' @@ -10,6 +11,7 @@ export { useUploadImgRule, useUploadImgsRule, useDictSelectRule, + useDeptTreeSelectRule, useEditorRule, useSelectRule } diff --git a/src/components/FormCreate/src/config/useDeptTreeSelectRule.ts b/src/components/FormCreate/src/config/useDeptTreeSelectRule.ts new file mode 100644 index 000000000..7ea5414cc --- /dev/null +++ b/src/components/FormCreate/src/config/useDeptTreeSelectRule.ts @@ -0,0 +1,36 @@ +import { generateUUID } from '@/utils' +import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils' +import { selectRule } from '@/components/FormCreate/src/config/selectRule' +import { cloneDeep } from 'lodash-es' + +/** + * 部门树选择器规则，如果规则使用到动æ€æ•°æ®åˆ™éœ€è¦å•ç‹¬é…ç½®ä¸èƒ½ä½¿ç”¨ useSelectRule + */ +export const useDeptTreeSelectRule = () => { + const label = '部门树选择' + const name = 'DeptTreeSelect' + const event = ['click','change','visibleChange','clear','blur','focus'] + const rules = cloneDeep(selectRule) + return { + icon: 'icon-doc-text', + label, + name, + event: event, + rule() { + return { + type: name, + field: generateUUID(), + title: label, + info: '', + $required: false + } + }, + props(_, { t }) { + return localeProps(t, name + '.props', [ + makeRequiredRule(), + { type: 'switch', field: 'showCheckbox', title: '是å¦æ˜¾ç¤ºå¤é€‰æ¡†' }, + ...rules + ]) + } + } +} -- Gitee 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 2/2] =?UTF-8?q?1.=E6=B5=81=E7=A8=8B=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=83=A8=E9=97=A8=E6=9C=BA=E6=9E=84=E6=A0=91?= =?UTF-8?q?=E9=80=89=E6=8B=A9=202.=E6=96=B0=E5=A2=9E=E5=B2=97=E4=BD=8D?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=203.=E7=94=A8=E6=88=B7=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=EF=BC=8C=E9=83=A8=E9=97=A8=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E5=99=A8=EF=BC=8C=E5=AD=97=E5=85=B8=E9=80=89=E6=8B=A9=E5=99=A8?= =?UTF-8?q?=EF=BC=8C=E6=8E=A5=E5=8F=A3=E9=80=89=E6=8B=A9=E5=99=A8=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E4=BA=8B=E4=BB=B6=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=204.=E7=94=A8=E6=88=B7=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C?= =?UTF-8?q?=E9=83=A8=E9=97=A8=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E5=AD=97?= =?UTF-8?q?=E5=85=B8=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E8=8E=B7=E5=8F=96=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=90=8E=E8=AE=BE=E7=BD=AE=E4=BA=86=E5=85=A8=E5=B1=80=E5=8F=98?= =?UTF-8?q?=E9=87=8F=EF=BC=8C=E5=90=8E=E7=BB=AD=E5=8F=AF=E5=9C=A8=E6=B5=81?= =?UTF-8?q?=E7=A8=8B=E8=A1=A8=E5=8D=95=E9=80=9A=E8=BF=87=20console.log(api?= =?UTF-8?q?.getData($inject.self.field))=20=E8=8E=B7=E5=8F=96=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=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); // 失败回调 + } + }); +}; -- Gitee