13 changed files with 1323 additions and 232 deletions
@ -0,0 +1,14 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-03-18 11:32:14 |
||||
|
@ 备注: 自定义表单列表 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<div></div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,181 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 李文轩 |
||||
|
@ 时间: 2024-03-14 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> |
||||
|
|
||||
|
<LowcodeImage :data="props.data"></LowcodeImage> |
||||
|
</template> |
||||
|
<script lang='ts' setup> |
||||
|
import LowcodeImage from './lowcodeImage.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,147 @@ |
|||||
|
<template> |
||||
|
|
||||
|
|
||||
|
<img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" /> |
||||
|
|
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script setup > |
||||
|
|
||||
|
import errimg from '@/assets/404_images/imgNotFound.png' |
||||
|
|
||||
|
|
||||
|
const props = defineProps({ |
||||
|
// eslint-disable-next-line vue/require-default-prop |
||||
|
data: { |
||||
|
type: Object, |
||||
|
} |
||||
|
}) |
||||
|
/* |
||||
|
|
||||
|
*/ |
||||
|
let styleObject = { |
||||
|
|
||||
|
} |
||||
|
let url = props.data?.control.imgUrl |
||||
|
if(props.data?.control.imgUrl===''){ |
||||
|
url = errimg |
||||
|
}else{ |
||||
|
url = props.data?.control.imgUrl |
||||
|
} |
||||
|
|
||||
|
const fitNum = props.data?.control.fit |
||||
|
|
||||
|
|
||||
|
let fit= '' |
||||
|
|
||||
|
switch (fitNum) { |
||||
|
case 1: |
||||
|
fit = "fill"; |
||||
|
break; |
||||
|
case 2: |
||||
|
fit = "contain"; |
||||
|
break; |
||||
|
case 3: |
||||
|
fit = "cover"; |
||||
|
break; |
||||
|
case 4: |
||||
|
fit = "none"; |
||||
|
break; |
||||
|
case 5: |
||||
|
fit = "scale-down"; |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
const showMode = props.data?.control.showMode |
||||
|
|
||||
|
if (showMode==='自定义像素值') { |
||||
|
const pxWidth = props.data?.control.pxWidth |
||||
|
const pxHeight = props.data?.control.pxHeight |
||||
|
styleObject.width = pxWidth+'px'; |
||||
|
styleObject.height = pxHeight+'px'; |
||||
|
}else{ |
||||
|
const widthPercent = props.data?.control.widthPercent |
||||
|
const heightPercent = props.data?.control.heightPercent |
||||
|
styleObject.width = widthPercent+'%'; |
||||
|
styleObject.height = heightPercent+'%'; |
||||
|
} |
||||
|
|
||||
|
const radius = props.data?.control.radius |
||||
|
const radiusClass = ref(''); |
||||
|
let radiusClassIsActive = false |
||||
|
let radiusNum = props.data?.control.radiusNum+'px' |
||||
|
if(radius === true ){ |
||||
|
radiusClass.value = 'radius' |
||||
|
radiusClassIsActive = true |
||||
|
} |
||||
|
|
||||
|
const mt = props.data?.control.mt+'px' |
||||
|
const mb = props.data?.control.mb+'px' |
||||
|
const ml = props.data?.control.ml+'px' |
||||
|
const mr = props.data?.control.mr+'px' |
||||
|
const pt = props.data?.control.pt+'px' |
||||
|
const pb = props.data?.control.pb+'px' |
||||
|
const pl = props.data?.control.pl+'px' |
||||
|
const pr = props.data?.control.pr+'px' |
||||
|
const mp = ref('mp') |
||||
|
|
||||
|
const floatStyle = ref('floatStyle') |
||||
|
const floatFlag = props.data?.control.floatFlag |
||||
|
const floatValue = props.data?.control.floatValue |
||||
|
|
||||
|
const boderAndShadowClass = ref(''); |
||||
|
const boderAndShadow = props.data?.control.boderAndShadow |
||||
|
let boderAndShadowClassIsActive = false |
||||
|
if(boderAndShadow === true ){ |
||||
|
boderAndShadowClass.value = 'boderAndShadow' |
||||
|
boderAndShadowClassIsActive = true |
||||
|
} |
||||
|
|
||||
|
function handleLink(item){ |
||||
|
console.log("handleLink") |
||||
|
let url = ""; |
||||
|
let urlStart = 'http://' |
||||
|
// http:// 7 |
||||
|
//https:// 8 |
||||
|
if (item.link.length < 7) { |
||||
|
if (item.link == '') { |
||||
|
alert("未配置跳转地址") |
||||
|
return |
||||
|
} |
||||
|
url = urlStart + "" + item.link |
||||
|
} else { |
||||
|
const linkStartComplete1 = item.link.startsWith("http://") |
||||
|
const linkStartComplete2 = item.link.startsWith("https://") |
||||
|
if (linkStartComplete1 || linkStartComplete2) { |
||||
|
url = item.link |
||||
|
} else { |
||||
|
url = urlStart + "" + item.link |
||||
|
} |
||||
|
} |
||||
|
window.open(url, '_blank') |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.boderAndShadow { |
||||
|
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; |
||||
|
} |
||||
|
.radius { |
||||
|
border-radius: v-bind(radiusNum); |
||||
|
} |
||||
|
.mp { |
||||
|
margin-top: v-bind(mt); |
||||
|
margin-bottom: v-bind(mb); |
||||
|
margin-left:v-bind(ml); |
||||
|
margin-right:v-bind(mr); |
||||
|
padding-top: v-bind(pt); |
||||
|
padding-bottom: v-bind(pb); |
||||
|
padding-left: v-bind(pl); |
||||
|
padding-right: v-bind(pr); |
||||
|
} |
||||
|
.floatStyle { |
||||
|
float: v-bind(floatValue); |
||||
|
} |
||||
|
</style> |
||||
@ -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,394 @@ |
|||||
|
<template> |
||||
|
<div v-if="dataFinished" class="transfer"> |
||||
|
<div class="leftArea"> |
||||
|
<div class="transferName">{{ transferConfig.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"]; |
||||
|
checkedIdList = []; |
||||
|
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) |
||||
|
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); |
||||
|
}, 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