1.流程表单信息部门机构树选择

2.新增岗位选择器
3.用户选择器,部门选择器,字典选择器,接口选择器新增事件配置功能
4.用户选择器,部门选择器,字典选择器,接口选择器获取数据后设置了全局变量,后续可在流程表单通过 console.log(api.getData($inject.self.field)) 获取下拉列表选项数据
pull/763/head
宿命的风 2025-04-20 18:06:20 +08:00
parent 3b6ef1d9c0
commit baf5b5a057
6 changed files with 104 additions and 16 deletions

View File

@ -39,12 +39,13 @@ const props = withDefaults(defineProps<Props>(), {
const deptList = ref<Tree[]>([]) //
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
})
</script>

View File

@ -45,15 +45,18 @@ const props = withDefaults(defineProps<Props>(), {
//
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
})
</script>

View File

@ -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 标准返回建议采用自定义解析函数处理`

View File

@ -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,

View File

@ -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: '系统字段',

View File

@ -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'
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>使用 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<Element>) => {
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); // 失败回调
}
});
};