You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
7.6 KiB
309 lines
7.6 KiB
3 weeks ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 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>
|