6 changed files with 828 additions and 3 deletions
@ -0,0 +1,181 @@ |
|||
<!-- |
|||
@ 作者: 李文轩 |
|||
@ 时间: 2024-02-07 13:49:57 |
|||
@ 备注: |
|||
--> |
|||
<template> |
|||
<el-form-item |
|||
v-bind="data.item" |
|||
:prop="tProp || data.name" |
|||
:class="config.className" |
|||
:rules="itemRules as any" |
|||
:label="getLabel(data.item as FormItem)" |
|||
> |
|||
<input v-model="value" type="hidden" > |
|||
</el-form-item> |
|||
|
|||
<LowcodeTransfer :data="props.data"></LowcodeTransfer> |
|||
</template> |
|||
<script lang='ts' setup> |
|||
import LowcodeTransfer from './lowcodeTransfer.vue'; |
|||
import { |
|||
constControlChange, |
|||
constFormProps, |
|||
} from '@/api/DesignForm/utils' |
|||
import validate from '@/api/DesignForm/validate' |
|||
import { FormItem, FormList } from '@/api/DesignForm/types' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList |
|||
tablekey: any |
|||
numrun?: number |
|||
modelValue?: any // 子表和弹性布局时时有传 |
|||
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', numVal: any): void |
|||
}>() |
|||
|
|||
const formProps = inject(constFormProps, {}) as any |
|||
const type = computed(() => { |
|||
return formProps.value.type |
|||
}) |
|||
const config = computed(() => { |
|||
return props.data.config || {} |
|||
}) |
|||
|
|||
const changeEvent = inject(constControlChange, '') as any |
|||
|
|||
const value = computed({ |
|||
get() { |
|||
if (props.tProp) { |
|||
// 表格和弹性布局 |
|||
return props.modelValue |
|||
} else { |
|||
return formProps.value.model[props.data.name] |
|||
} |
|||
}, |
|||
set(newVal: any) { |
|||
if (props.tProp) { |
|||
emits('update:modelValue', newVal) |
|||
} |
|||
updateModel(newVal) |
|||
} |
|||
}) |
|||
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 getLabel = (ele: FormItem) => { |
|||
const showColon = formProps.value.showColon ? '：' : '' |
|||
if (ele) { |
|||
return ele.showLabel ? '' : ele.label + showColon |
|||
} else { |
|||
return '' |
|||
} |
|||
} |
|||
|
|||
// 返回当前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 |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</script> |
|||
<style lang='scss' scoped> |
|||
.imgbox{ |
|||
padding: 0 5px; |
|||
max-width: 300px; |
|||
max-height: 200px; |
|||
width: 100%; |
|||
height: 200px; |
|||
.image-slot { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: var(--el-fill-color-light); |
|||
color: var(--el-text-color-secondary); |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,393 @@ |
|||
<template> |
|||
<div v-if="dataFinished" class="transfer"> |
|||
<div class="leftArea"> |
|||
<div class="transferName">穿梭框名</div> |
|||
<div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;"> |
|||
<ElInput v-model="keyword" placeholder="搜索"> |
|||
<template #prefix> |
|||
<ElIcon class="el-input__icon"> |
|||
<Search /> |
|||
</ElIcon> |
|||
</template> |
|||
</ElInput> |
|||
</div> |
|||
<div class="leftScroll"> |
|||
<ElScrollbar height="100%"> |
|||
<ElTree |
|||
ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps" show-checkbox |
|||
highlight-current :default-expand-all="isExpandAll" :filter-node-method="filterNode" |
|||
@check="handleCheckList" @check-change="getCheckedList" /> |
|||
</ElScrollbar> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="rigthArea"> |
|||
<div style="margin-bottom: 8px;"> |
|||
<div class="transferName"><span>已选: {{ checkList.length }}</span><ElButton link style="float: right;margin-right: 5px;" @click="clearCheckList" >清空</ElButton></div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
<ElScrollbar height="calc(100% - 50px)"> |
|||
<ElTag v-for="user in checkList" :key="user.id" style="display: block; font-size: 13px; letter-spacing: 1.5px;text-align: center;margin-top: 8px;height: 30px;width: 75%;margin-left:40px;padding-top: 6px;" closable @close="handleCloseTag(user)"> |
|||
{{ |
|||
user.label |
|||
}}[{{ |
|||
user.parent.data.label |
|||
}}] |
|||
</ElTag> |
|||
|
|||
</ElScrollbar> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="MultiTreeSelector"> |
|||
import { ref, watch, onMounted } from 'vue' |
|||
|
|||
import request from '@/utils/request'; |
|||
|
|||
const props = defineProps({ |
|||
// eslint-disable-next-line vue/require-default-prop |
|||
data: { |
|||
type: Object, |
|||
} |
|||
}) |
|||
const fixedOptions = props.data?.control.fixedOptions |
|||
const transferConfig = props.data?.config |
|||
const treeProps = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled: 'disabled', |
|||
children: 'children' |
|||
} |
|||
let dataFinished = false |
|||
const treeRef = ref() |
|||
const isExpandAll = ref(true) // 是否全展开 |
|||
const keyword = ref('') // 搜索关键字 |
|||
const checkList = ref([]) // 选中的list |
|||
const userList = ref([]) |
|||
let checkedIdList = ["302697","ceshi","301625"]; |
|||
const url = transferConfig.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */ |
|||
|
|||
function getDetail() { |
|||
console.log(11111) |
|||
if(transferConfig.transferDataSource==="数据源"){ |
|||
return request({ |
|||
url: url, |
|||
method: transferConfig.method, |
|||
}); |
|||
} |
|||
|
|||
} |
|||
if(transferConfig.transferDataSource==="数据源"){ |
|||
getDetail().then(({ data }) => { |
|||
console.log(`获取穿梭框接口数据`); |
|||
let resData = ref(data.children) |
|||
// 全选方法2:插入 全选node |
|||
userList.value = [{ |
|||
id: '全选', |
|||
label: '全选', |
|||
children: [...resData.value] |
|||
}] |
|||
treeRef.value.setCheckedKeys(checkedIdList,true) |
|||
setTimeout(() => { |
|||
checkedIdList.forEach(element => { |
|||
const _node = treeRef?.value?.getNode(element) |
|||
if (!_node) return |
|||
const _checkList = checkList.value |
|||
if (_node.checked) { // 勾选时 |
|||
if (_node.checked && _node.childNodes.length === 0) { |
|||
_checkList.push(_node) |
|||
} |
|||
// 通过new Set() 实现数据去重 |
|||
checkList.value = Array.from(new Set(_checkList)) |
|||
// 遍历子级,递归,直到获取最后一级的人员 |
|||
if (_node.childNodes.length > 0) { |
|||
_node.childNodes.map(item => handleCheckList(item.data)) |
|||
} |
|||
} else if (!_node.checked) { // 取消勾选 |
|||
checkList.value = checkList.value.filter(item => item.checked) |
|||
} |
|||
}); |
|||
}, 50); |
|||
|
|||
|
|||
}); |
|||
} |
|||
const getCheckedList = () => { |
|||
checkedIdList = treeRef.value.getCheckedKeys(true) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
let resData1 = ref([ |
|||
{ |
|||
id: '3', |
|||
label: '营销部', |
|||
children: [ |
|||
{ |
|||
id: '3-1', |
|||
label: '威震天' |
|||
}, |
|||
{ |
|||
id: '3-2', |
|||
label: '嫦娥' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: '2', |
|||
label: '业务部', |
|||
children: [ |
|||
{ |
|||
id: '2-1-1', |
|||
label: '业务部子部1', |
|||
children: [ |
|||
{ |
|||
id: '2-1-0001', |
|||
label: '李白' |
|||
}, |
|||
{ |
|||
id: '2-1-0002', |
|||
label: '萧峰' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: '2-2-1', |
|||
label: '业务部子部2', |
|||
children: [ |
|||
{ |
|||
id: '2-2-00006', |
|||
label: '武则天' |
|||
}, |
|||
{ |
|||
id: '2-2-00005', |
|||
label: '拿破仑' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: '4', |
|||
label: '软件开发部', |
|||
children: [ |
|||
{ |
|||
id: '5-3', |
|||
label: '张辽' |
|||
}, |
|||
{ |
|||
id: '5-9', |
|||
label: '吕布' |
|||
}, |
|||
{ |
|||
id: '5-0', |
|||
label: '许褚' |
|||
}, |
|||
] |
|||
} |
|||
]) |
|||
|
|||
|
|||
// 勾选或者取消勾选 |
|||
const handleCheckList = (val) => { |
|||
const valId = val.id; |
|||
|
|||
const _node = treeRef?.value?.getNode(valId) |
|||
|
|||
if (!_node) return |
|||
const _checkList = checkList.value |
|||
if (_node.checked) { // 勾选时 |
|||
if (_node.checked && _node.childNodes.length === 0) { |
|||
_checkList.push(_node) |
|||
} |
|||
// 通过new Set() 实现数据去重 |
|||
checkList.value = Array.from(new Set(_checkList)) |
|||
// 遍历子级,递归,直到获取最后一级的人员 |
|||
if (_node.childNodes.length > 0) { |
|||
_node.childNodes.map(item => handleCheckList(item.data)) |
|||
} |
|||
} else if (!_node.checked) { // 取消勾选 |
|||
checkList.value = checkList.value.filter(item => item.checked) |
|||
} |
|||
} |
|||
|
|||
/* 人员树 父级过滤的递归 |
|||
* @node 当前节点 |
|||
* @result 存结果的数组 |
|||
* @key |
|||
* */ |
|||
const getParentNode = (node, result, key) => { |
|||
let isPass = node?.data?.label?.indexOf(key) !== -1 |
|||
isPass ? result.push(isPass) : '' |
|||
if (!isPass && node.level !== 1 && node.parent) { |
|||
return getParentNode(node.parent, result, key) |
|||
} |
|||
} |
|||
/*人员树过滤 |
|||
* @value 过滤的关键字 |
|||
* @data 被过滤的tree |
|||
* @node |
|||
* */ |
|||
const filterNode = (value, data, node) => { |
|||
if (!value) { |
|||
data.disabled = false |
|||
return true |
|||
} else { |
|||
//带过滤条件时,所有父级都禁止勾选 |
|||
// array.map(k => (!k.disabled) && (_childArr.push(k))) |
|||
(data.children) && (data.disabled = true) |
|||
} |
|||
let _arr = [] |
|||
getParentNode(node, _arr, value) |
|||
let result = false |
|||
_arr.forEach(item => { |
|||
result = result || item |
|||
}) |
|||
return result |
|||
} |
|||
// 通过tag 取消勾选 |
|||
const handleCloseTag = (tag) => { |
|||
|
|||
if (!treeRef?.value) return |
|||
checkList.value = checkList.value.filter(item => { |
|||
treeRef.value.setChecked(tag, false) |
|||
if (!item?.data) return |
|||
return item.data.id !== tag.data.id |
|||
}) |
|||
} |
|||
|
|||
// 清空CheckList |
|||
const clearCheckList = () => { |
|||
if (!treeRef?.value) return |
|||
treeRef.value.setCheckedKeys([]) |
|||
while (checkList.value.length > 0) { |
|||
checkList.value.pop() |
|||
} |
|||
} |
|||
|
|||
// 全选 /全不选 |
|||
const handleCheckAll = (array) => { |
|||
treeRef.value.setCheckedNodes(array) |
|||
array.map(item => { |
|||
handleCheckList(item) |
|||
}) |
|||
} |
|||
|
|||
// 折叠/展开 |
|||
const expandAll = () => { |
|||
const nodesMap = treeRef.value.store.nodesMap |
|||
for (let key in nodesMap) { |
|||
nodesMap[key].expanded = isExpandAll.value |
|||
} |
|||
} |
|||
|
|||
// 执行tree数据过滤 |
|||
watch(keyword, (newVal) => { |
|||
treeRef.value.filter(newVal) |
|||
}) |
|||
|
|||
|
|||
//获取配置接口相应或获取固定选项值 |
|||
if(transferConfig.transferDataSource==="固定选项"){ |
|||
setTimeout(() => { |
|||
|
|||
// 全选方法2:插入 全选node |
|||
userList.value = [{ |
|||
id: '全选', |
|||
label: '全选', |
|||
children: fixedOptions |
|||
}] |
|||
console.log(treeRef) |
|||
|
|||
treeRef.value.setCheckedKeys(checkedIdList,true) |
|||
|
|||
checkedIdList.forEach(element => { |
|||
const _node = treeRef?.value?.getNode(element) |
|||
if (!_node) return |
|||
const _checkList = checkList.value |
|||
if (_node.checked) { // 勾选时 |
|||
if (_node.checked && _node.childNodes.length === 0) { |
|||
_checkList.push(_node) |
|||
} |
|||
// 通过new Set() 实现数据去重 |
|||
checkList.value = Array.from(new Set(_checkList)) |
|||
// 遍历子级,递归,直到获取最后一级的人员 |
|||
if (_node.childNodes.length > 0) { |
|||
_node.childNodes.map(item => handleCheckList(item.data)) |
|||
} |
|||
} else if (!_node.checked) { // 取消勾选 |
|||
checkList.value = checkList.value.filter(item => item.checked) |
|||
} |
|||
}); |
|||
}, 50); |
|||
dataFinished = true |
|||
}else{ |
|||
getDetail |
|||
dataFinished = true |
|||
} |
|||
|
|||
|
|||
onMounted(() => { |
|||
|
|||
}) |
|||
|
|||
</script> |
|||
|
|||
|
|||
|
|||
|
|||
<style scoped> |
|||
.transfer { |
|||
display: flex; |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
.transferName { |
|||
height: 30px; |
|||
padding-top: 8px; |
|||
background-color: #F5F7FA; |
|||
padding-left: 10px; |
|||
border-radius: 5px 5px 0 0; |
|||
border-bottom: 1px solid gainsboro; |
|||
|
|||
} |
|||
|
|||
.buttonArea { |
|||
|
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.buttonArea2 { |
|||
height: 33px; |
|||
} |
|||
|
|||
.leftScroll { |
|||
height: 367px; |
|||
} |
|||
|
|||
.leftArea { |
|||
border: 1px solid gainsboro; |
|||
width: 300px; |
|||
border-radius: 5px; |
|||
height: 456px; |
|||
position: relative; |
|||
background-color: white; |
|||
} |
|||
|
|||
.rigthArea { |
|||
border: 1px solid gainsboro; |
|||
width: 300px; |
|||
border-radius: 5px; |
|||
height: 456px; |
|||
background-color: white; |
|||
|
|||
}</style> |
|||
Loading…
Reference in new issue