diff --git a/run.bat b/run.bat new file mode 100644 index 0000000000000000000000000000000000000000..4adb79e22d494024edefeb9e8b5875247fd73a9e --- /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 0000000000000000000000000000000000000000..12961601c1c6e2a229e08d9bb36f0c6eff39ffc5 --- /dev/null +++ b/src/components/FormCreate/src/components/DeptTreeSelect.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/FormCreate/src/components/DictSelect.vue b/src/components/FormCreate/src/components/DictSelect.vue index 204746d17d56d0660366b0cd00b151f2f3e6dcff..d5f535eab917fbb715036818e946da83c1b08cc4 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 c02e79719df4a3a977cf111d47594832d2f0a99a..e6d9c50e1a04fcca733e115dc4fb5f0f0b469e36 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/index.ts b/src/components/FormCreate/src/config/index.ts index b1e2ddea58881566a880a09f0ab8d992bdcd6831..9188f533e821b93562db11ea853ecf54cf3d2336 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 0000000000000000000000000000000000000000..7ea5414cc22a6f43589fdf40d84f80a32fc745db --- /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 + ]) + } + } +} diff --git a/src/components/FormCreate/src/config/useDictSelectRule.ts b/src/components/FormCreate/src/config/useDictSelectRule.ts index f232f486ba41eb9cfdd1e0ee2efad5aa5a056840..98d2c77701d07ee9e228ece5c1f86fd16b47a0fb 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 dff1333b3799a2d3f8da3e3d186001de01315779..8589a4bfcba9e5efab7b9296cfa06970a3e2d6ab 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 07d2c51fe9f3756fbbd5b401252c1abf6f9e1c45..c1ef2fa5829d5cfbe4f662be14bae2c4f24c6068 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); // 失败回调 + } + }); +};