herenshan112
3 weeks ago
12 changed files with 922 additions and 68 deletions
@ -0,0 +1,309 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-11-17 15:51:05 |
|||
@ 备注: 所属部门 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
|||
import { |
|||
constControlChange, |
|||
constFormProps, |
|||
} from '@/api/lowCode/utils'; |
|||
import validate from "@/api/lowCode/form/validate" |
|||
import { getPeopleKey,getUserCont } from '@/api/hr/user/index' |
|||
import { orgAndPeople } from '@/api/hr/org/type' |
|||
import { getOrgEveryonePeople,getOrgTreeList } from '@/api/hr/org/index' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList |
|||
tablekey: any |
|||
numrun?: number |
|||
modelValue?: any // 子表和弹性布局时时有传 |
|||
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|||
types?: string |
|||
}>(), |
|||
{} |
|||
) |
|||
const orgPeople = ref<orgAndPeople[]>() |
|||
const formProps = inject(constFormProps, {}) as any |
|||
const config = computed(() => { |
|||
return props.data.config || {} |
|||
}) |
|||
const type = computed(() => { |
|||
return formProps.value.type |
|||
}) |
|||
// 返回当前item项的校验规则 |
|||
const itemRules = computed(() => { |
|||
let temp |
|||
const itemR: any = props.data.item?.rules || [] |
|||
const customR = formatCustomRules() |
|||
// 如果三个都没有设置，则返回undefined |
|||
if (itemR?.length || customR?.length) { |
|||
temp = [...customR, ...itemR] |
|||
} |
|||
return temp |
|||
}) |
|||
// 处理自定义校验规则，将customRules转换后追加到rules里 |
|||
const formatCustomRules = () => { |
|||
const rulesReg: any = {} |
|||
validate && |
|||
validate.forEach(item => { |
|||
rulesReg[item.type] = item.regExp |
|||
}) |
|||
|
|||
// 获取校验方法 父级使用provide方法注入 |
|||
const temp: any = [] |
|||
props.data.customRules?.forEach((item: any) => { |
|||
if (!item.message && item.type !== 'methods') { |
|||
return // 方法时允许提示信息为空 |
|||
} |
|||
let obj = {} |
|||
if (item.type === 'required') { |
|||
obj = { required: true } |
|||
} else if (item.type === 'rules') { |
|||
// 自定义表达式 |
|||
obj = { pattern: item.rules } |
|||
} else if (item.type === 'methods') { |
|||
// 方法时 |
|||
const methods: any = item.methods |
|||
if (methods) { |
|||
obj = { validator: inject(methods, {}) } |
|||
} |
|||
} else if (item.type) { |
|||
obj = { pattern: rulesReg[item.type as string] } |
|||
} |
|||
// 这里判断下防某些条件下重复push的可能或存重复校验类型 |
|||
let message: any = { message: item.message } |
|||
if (!item.message) { |
|||
// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示 |
|||
message = {} |
|||
} |
|||
temp.push( |
|||
Object.assign( |
|||
{ |
|||
trigger: item.trigger || 'blur' |
|||
}, |
|||
obj, |
|||
message |
|||
) |
|||
) |
|||
}) |
|||
return temp |
|||
} |
|||
const getLabel = (ele: FormItem) => { |
|||
const showColon = formProps.value.showColon ? '：' : '' |
|||
if (ele) { |
|||
return ele.showLabel ? '' : ele.label + showColon |
|||
} else { |
|||
return '' |
|||
} |
|||
} |
|||
//组件css部分 |
|||
const configStyle = computed(() => { |
|||
return props.data.styles || {} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-01 09:07:11 |
|||
@ 功能: 布局处理 |
|||
*/ |
|||
const getFormItemLableStyle = (ele: any) => { |
|||
if(ele?.labelStyle){ |
|||
// console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle)) |
|||
return AnalysisCss(ele?.labelStyle) |
|||
} |
|||
} |
|||
const getFormItemInputStyle = (ele: any,sty:number) => { |
|||
if(ele?.inputStyle){ |
|||
// console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) |
|||
return AnalysisInputCss(ele?.inputStyle,sty) |
|||
} |
|||
} |
|||
|
|||
const value = computed({ |
|||
get() { |
|||
if (props.modelValue != "" && props.modelValue != undefined){ |
|||
// 表格和弹性布局 |
|||
return props.modelValue*1 |
|||
} else { |
|||
return formProps.value.model[props.data.name] |
|||
} |
|||
}, |
|||
set(newVal: any) { |
|||
if (props.tProp) { |
|||
emits('update:modelValue', newVal) |
|||
} |
|||
updateModel(newVal) |
|||
} |
|||
}) |
|||
const changeEvent = inject(constControlChange, '') as any |
|||
const updateModel = (val: any) => { |
|||
let controlAttribute = "" |
|||
if(props.data.control){ |
|||
if(props.data.control.type){ |
|||
controlAttribute = props.data.control.type |
|||
} |
|||
} |
|||
changeEvent && |
|||
changeEvent({ |
|||
key: props.data.name, |
|||
value: val, |
|||
data: props.data, |
|||
tProp: props.tProp, |
|||
type: props.data.type, |
|||
attribute: controlAttribute |
|||
}) |
|||
} |
|||
const peopleLoading = ref(false) |
|||
const selectList = ref<TreeNodeInfo[]>([]); |
|||
onMounted(()=>{ |
|||
peopleLoading.value = true |
|||
getUserCont() |
|||
.then((data:any)=>{ |
|||
// myconfig.value = data.data |
|||
selectList.value=[]; |
|||
if(data.data.organization != "" && data.data.organizationgname != ""){ |
|||
selectList.value.push({ |
|||
value: data.data.organization, |
|||
label: data.data.organizationgname, |
|||
}) |
|||
value.value = data.data.organization |
|||
}else if(data.data.department != "" && data.data.departmentname != ""){ |
|||
selectList.value.push({ |
|||
value: data.data.department, |
|||
label: data.data.departmentname, |
|||
}) |
|||
value.value = data.data.department |
|||
}else if(data.data.company != "" && data.data.companyname != ""){ |
|||
selectList.value.push({ |
|||
value: data.data.company, |
|||
label: data.data.companyname, |
|||
}) |
|||
value.value = data.data.company |
|||
} |
|||
|
|||
let orgId = data.data.company |
|||
let userId = data.data.organization*1 |
|||
if(orgId == null || orgId == ""){ |
|||
orgId = "309" |
|||
} |
|||
|
|||
// nextTick(()=>{ |
|||
// getOrgTreeList({"orgid":orgId*1}) |
|||
// // getOrgEveryonePeople({"id":orgId.toString()}) |
|||
// .then(({data})=>{ |
|||
// orgPeople.value = data |
|||
// if(value.value == null || value.value == "" || value.value == undefined){ |
|||
// nextTick(()=>{ |
|||
// value.value = userId |
|||
// }) |
|||
// } |
|||
// }) |
|||
// .finally(()=>{ |
|||
// peopleLoading.value = false |
|||
// }) |
|||
// }); |
|||
}) |
|||
|
|||
}); |
|||
const orgTreeProps ={ |
|||
label: 'name', |
|||
children:'child', |
|||
} |
|||
|
|||
interface TreeNodeInfo { |
|||
value: number; |
|||
label: string; |
|||
} |
|||
|
|||
|
|||
function treeData(node: orgInfo[],title: TreeNodeInfo[]){ |
|||
|
|||
// let title = new Array |
|||
if(Array.isArray(node)){ |
|||
node.forEach((item:TreeNode) => { |
|||
if(Array.isArray(title)){ |
|||
title.push({ |
|||
value:item.id, |
|||
label:item.name |
|||
}); |
|||
}else{ |
|||
title =[{ |
|||
value:item.id, |
|||
label:item.name |
|||
}]; |
|||
} |
|||
if (item.child) { |
|||
|
|||
if(Array.isArray(item.child)){ |
|||
treeData(item.child,title) |
|||
// for (const child of item.children) { |
|||
// treeData(child,title) |
|||
// } |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return title; |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-10 11:13:06 |
|||
@ 功能: 输出结果 |
|||
*/ |
|||
const valPrint = (val:any,orgList:orgInfo[]) => { |
|||
let titlaAry = new Array |
|||
// console.log(val,"=======>orgList------------>",orgList) |
|||
// if(Array.isArray(orgList)){ |
|||
// console.log(val,"=======>orgList-------2----->",orgList) |
|||
// orgList.forEach((item: any) => { |
|||
// console.log(val,"=======>orgList-----3------->",item.id) |
|||
// if(item.id==val){ |
|||
// console.log(val,"=======>orgList----1-------->",orgList) |
|||
// title = item.name |
|||
// } |
|||
// }) |
|||
// } |
|||
if(val != "" && val != undefined){ |
|||
let orgAry = treeData(orgList) |
|||
console.log(val,"=======>orgList------------>",orgAry) |
|||
if(Array.isArray(orgAry)){ |
|||
orgAry.forEach((item:orgInfo) => { |
|||
if(item.value == val){ |
|||
titlaAry.push(item.label) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
return titlaAry.join("、") |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="inputbox" v-if="props.types!=3"> |
|||
{{ myconfig }} |
|||
<el-tree-select |
|||
v-loading="peopleLoading" |
|||
element-loading-text="Loading..." |
|||
v-model="value" |
|||
:data="orgPeople" |
|||
:props="orgTreeProps" |
|||
:render-after-expand="false" |
|||
:filterable="true" |
|||
node-key="id" |
|||
clearable |
|||
disabled |
|||
/> |
|||
</div> |
|||
<el-text v-else class="wordColor">{{valPrint(value,orgPeople)}}</el-text> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.inputbox{ |
|||
width:100%; |
|||
} |
|||
.wordColor{ |
|||
color:#000000; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue