herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

穿梭框编辑固定选项时，修改的节点无法立即预览到，需保存后退出重进才能预览到修改后的----bug

lwx_v11
liwenxuan 1 year ago
parent
93c1c741d9
commit
093db03ab3
3 changed files with 315 additions and 176 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      src/components/DesignForm/formControlPropertiNew.vue
  2. 9
      src/widget/lowcodetransfer/index.vue
  3. 458
      src/widget/lowcodetransfer/lowcodeTransfer.vue

24
src/components/DesignForm/formControlPropertiNew.vue
View File

@ -1261,26 +1261,20 @@ const getPropByPath = (obj: any, path: string, val: any) => {
}
// 属性设置相关结束
const showAssociatedFormsFillRole = ref(true)
//关联表单数据填充时无法获取当前表单新增且保存的字段，只有关闭重启后方能获取----bug修改
const saveRefreshFormControlAttr = () => {
//啊啊啊
//setTimeout(() => {
getAssociatedFormsCurrentFieldTree1()
//穿梭框编辑固定选项时，修改的节点无法立即预览到，需保存后退出重进才能预览到修改后的----bug修改
const showAssociatedFormsFillRole = ref(true)
const saveRefreshFormControlAttr = () => {
getAssociatedFormsCurrentFieldTree1()
showAssociatedFormsFillRole.value = false;
// 等待一个短时间的延迟，确保组件卸载完成
setTimeout(() => {
showAssociatedFormsFillRole.value = true;
}, 200);
//}, 13000);
setTimeout(() => {
showAssociatedFormsFillRole.value = true;
}, 200);
};
// 多选固定选项删除

9
src/widget/lowcodetransfer/index.vue
View File

@ -14,7 +14,7 @@
<input v-model="value" type="hidden" >
</el-form-item>
<LowcodeTransfer :data="props.data" :selected-value="value" @checked-id-list-changed="checkedIdListChangedIndex" @update-model="updateModel" ></LowcodeTransfer>
<LowcodeTransfer :key="componentKey" :data="props.data" :selected-value="value" @checked-id-list-changed="checkedIdListChangedIndex" @update-model="updateModel" @re-render-component="reRenderComponent"></LowcodeTransfer>
</template>
<script lang='ts' setup>
import LowcodeTransfer from './lowcodeTransfer.vue';
@ -89,6 +89,13 @@ const value = computed({
updateModel(newVal)
}
})
let componentKey = 0
function reRenderComponent() {
componentKey++;
}
function waitModelHasValue(){
//console.log("waitModelHasValue")
setTimeout(()=>{

458
src/widget/lowcodetransfer/lowcodeTransfer.vue
View File

@ -1,5 +1,9 @@
<template>
<div v-if="dataFinished" class="transfer"><!-- {{props.selectedValue}} -->
<!-- {{ props.data?.control.fixedOptions }} --><!-- {{transferConfig}} --><!-- {{ resData }} --><!-- {{ count1 }} -->
<!-- <hr>
<hr>
<hr> -->
<div v-if="dataFinished" class="transfer"><!-- {{props.selectedValue}} -->
<div class="leftArea"><!-- {{ selectedValueCompu }}{{checkedIdList}} -->
<div class="transferName">{{ transferConfig.transferName }}</div>
<div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;">
@ -13,30 +17,33 @@
</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" />
<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 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
}}[{{
<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>
@ -48,141 +55,183 @@ import { ref, watch, onMounted } from 'vue'
import request from '@/utils/request';
const props = defineProps({
// eslint-disable-next-line vue/require-default-prop
// eslint-disable-next-line vue/require-default-prop
data: {
type: Object,
default() {
return {};
},
},
type: Object,
default() {
return {};
},
},
selectedValue: {
type: Array,
default() {
return [];
},
},
type: Array,
default() {
return [];
},
},
})
const emits = defineEmits(['checkedIdListChanged','updateModel']);
const fixedOptions = props.data?.control.fixedOptions
const transferConfig = props.data?.config
const emits = defineEmits(['checkedIdListChanged', 'updateModel','reRenderComponent']);
/* const fixedOptions = ref([]) */
/* fixedOptions.value = props.data?.control.fixedOptions */
//const transferConfig = props.data?.config
const transferConfig = computed({
set(){
},
get(){
return props.data?.config
}
})
const treeProps = {
value: 'id',
label: 'label',
disabled: 'disabled',
children: 'children'
}
let dataFinished = false
let dataFinished = ref(false)
const treeRef = ref()
const isExpandAll = ref(false) // 是否全展开
const keyword = ref('') // 搜索关键字
const checkList = ref([]) // 选中的list
const userList = ref([])
const userList = computed({
get(){
if (transferConfig.value.transferDataSource === "数据源") {
return [{
id: '全选',
label: '全选',
children: [...resData.value]
}]
}else{
return [{
id: '全选',
label: '全选',
children: props.data?.control.fixedOptions
}]
}
},
set(){
}
})
let checkedIdList = ref([]);
let count = 0
function waitAndReGet(){
function waitAndReGet() {
/* console.log("waitAndReGet")
console.log(props.selectedValue)
console.log(props.selectedValue.value) */
setTimeout(()=>{
setTimeout(() => {
let values = props.selectedValue.map(item => {
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
return item;
});
if(props.selectedValue&&values){
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
return item;
});
if (props.selectedValue && values) {
/* console.log("有值")
console.log(props.selectedValue)
console.log(values) */
//return props.selectedValue.value
//return props.selectedValue.value
checkedIdList.value = values
}else{
if(count<3){
} else {
if (count < 3) {
count++
waitAndReGet()
}
/* console.log("waitAndReGet---else") */
}
},2000)
}, 2000)
}
/*
*/
const selectedValueCompu = computed({
get() {
//console.log("get")
//nextTick(()=>{
let values = props.selectedValue.map(item => {
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
return item;
});
if(props.selectedValue&&values){
/* console.log(props.selectedValue.value)
console.log("computed---if") */
return values
}else{
waitAndReGet()
/* console.log("computed---else") */
return []
}
//})
let values = props.selectedValue.map(item => {
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
return item;
});
if (props.selectedValue && values) {
/* console.log(props.selectedValue.value)
console.log("computed---if") */
return values
} else {
waitAndReGet()
/* console.log("computed---else") */
return []
}
//})
},
set(){}
set() { }
})
/* console.log(props.selectedValue) */
const url = transferConfig.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */
const url = transferConfig.value.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */
let resData = ref([])
function getDetail() {
//console.log(11111)
if(transferConfig.transferDataSource==="数据源"){
if (transferConfig.value.transferDataSource === "数据源") {
return request({
url: url,
method: transferConfig.method,
method: transferConfig.value.method,
});
}
}
if(transferConfig.transferDataSource==="数据源"){
getDetail().then(({ data }) => {
if (transferConfig.value.transferDataSource === "数据源") {
getDetail().then(({ data }) => {
//console.log(`获取穿梭框接口数据`);
let resData = ref(data.children)
resData.value = data.children
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: [...resData.value]
}]
treeRef.value.setCheckedKeys(checkedIdList.value,true)
treeRef.value.setCheckedKeys(checkedIdList.value, true)
setTimeout(() => {
checkedIdList.value.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))
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)
}
} else if (!_node.checked) { // 取消勾选
checkList.value = checkList.value.filter(item => item.checked)
}
});
}, 50);
});
}
@ -192,7 +241,7 @@ const getCheckedList = () => {
let resData1 = ref([
{
@ -261,15 +310,15 @@ let resData1 = ref([
},
]
}
])
])
// 勾选或者取消勾选
const handleCheckList = (val) => {
const valId = val.id;
const _node = treeRef?.value?.getNode(valId)
if (!_node) return
const _checkList = checkList.value
if (_node.checked) { // 勾选时
@ -323,7 +372,7 @@ const filterNode = (value, data, node) => {
}
// 通过tag 取消勾选
const handleCloseTag = (tag) => {
if (!treeRef?.value) return
checkList.value = checkList.value.filter(item => {
treeRef.value.setChecked(tag, false)
@ -364,103 +413,191 @@ watch(keyword, (newVal) => {
//获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){
if (transferConfig.value.transferDataSource === "固定选项") {
setTimeout(() => {
// 全选方法2:插入 全选node
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: fixedOptions
children: props.data?.control.fixedOptions
}]
//console.log(treeRef)
/* console.log(checkedIdList.value) */
treeRef.value.setCheckedKeys(checkedIdList.value,true)
treeRef.value.setCheckedKeys(checkedIdList.value, true)
setTimeout(() => {
checkedIdList.value.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))
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)
}
} else if (!_node.checked) { // 取消勾选
checkList.value = checkList.value.filter(item => item.checked)
}
});
}, 50);
}, 50);
dataFinished = true
}else{
getDetail
dataFinished = true
}, 50);
dataFinished.value = true
} else {
getDetail
dataFinished.value = true
}
/* setTimeout(()=>{
console.log("setTimeout")
if(props.data?.config.transferDataSource==="数据源"){
//emits('reRenderComponent');
count1.value++
}
onMounted(() => {
})
},1500) */
// 监听 checkedIdList 的变化
watch(checkedIdList, (newValue, oldValue) => {
//console.log('checkedIdList 发生了变化', newValue);
emits('checkedIdListChanged',newValue);
},{deep:true});
emits('checkedIdListChanged', newValue);
}, { deep: true });
let count1 = ref(0);
/* onBeforeMount(() => {
console.log('onBeforeMount: 组件即将挂载');
});
onMounted(() => {
console.log('onMounted: 组件已挂载');
});
onBeforeUpdate(() => {
console.log('onBeforeUpdate: 数据即将更新到 DOM');
});
onUpdated(() => {
console.log('onUpdated: DOM 已更新');
if(props.data?.config.transferDataSource==="数据源"){
console.log("emits('reRenderComponent');")
emits('reRenderComponent');
}
});
onBeforeUnmount(() => {
console.log('onBeforeUnmount: 组件即将卸载，清除定时器');
});
onUnmounted(() => {
console.log('onUnmounted: 组件已卸载');
}); */
watch(transferConfig, (newValue, oldValue) => {
count1.value++
//emits('reRenderComponent', newValue);
try {
count1.value++
if (newValue.transferDataSource === "数据源") {
emits('reRenderComponent');
getDetail().then(({ data }) => {
//console.log(`获取穿梭框接口数据`);
resData.value = data.children
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: [...resData.value]
}]
treeRef.value.setCheckedKeys(checkedIdList.value, true)
setTimeout(() => {
checkedIdList.value.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);
});
}
} catch (error) {
console.error('Error :', error);
// 可以在这里进行一些错误处理，比如设置默认值或其他操作
//parsedData.value = null;
}
}, { deep: true });
watch(selectedValueCompu, (newValue, oldValue) => {
//console.log('selectedValueCompu 发生了变化', newValue);
checkedIdList.value = selectedValueCompu.value
//获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){
setTimeout(() => {
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: fixedOptions
}]
//console.log(treeRef)
/* console.log(checkedIdList.value) */
treeRef.value.setCheckedKeys(checkedIdList.value,true)
if (transferConfig.value.transferDataSource === "固定选项") {
setTimeout(() => {
checkedIdList.value.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);
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: props.data?.control.fixedOptions
}]
//console.log(treeRef)
/* console.log(checkedIdList.value) */
treeRef.value.setCheckedKeys(checkedIdList.value, true)
setTimeout(() => {
checkedIdList.value.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{
dataFinished.value = true
} else {
getDetail
dataFinished = true
dataFinished.value = true
}
//emits('updateModel',newValue);
},{deep:true});
}, { deep: true });
</script>
@ -482,7 +619,7 @@ if(transferConfig.transferDataSource==="固定选项"){
padding-left: 10px;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid gainsboro;
}
.buttonArea {
@ -515,5 +652,6 @@ if(transferConfig.transferDataSource==="固定选项"){
border-radius: 5px;
height: 456px;
background-color: white;
}</style>
}
</style>

Write Preview
Loading…
Cancel
Save