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
Unified 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修改 //关联表单数据填充时无法获取当前表单新增且保存的字段，只有关闭重启后方能获取----bug修改
const saveRefreshFormControlAttr = () => { //穿梭框编辑固定选项时，修改的节点无法立即预览到，需保存后退出重进才能预览到修改后的----bug修改
//啊啊啊 const showAssociatedFormsFillRole = ref(true)
//setTimeout(() => {
getAssociatedFormsCurrentFieldTree1()
const saveRefreshFormControlAttr = () => {
getAssociatedFormsCurrentFieldTree1()
showAssociatedFormsFillRole.value = false; showAssociatedFormsFillRole.value = false;
// 等待一个短时间的延迟，确保组件卸载完成 // 等待一个短时间的延迟，确保组件卸载完成
setTimeout(() => { setTimeout(() => {
showAssociatedFormsFillRole.value = true; showAssociatedFormsFillRole.value = true;
}, 200); }, 200);
//}, 13000);
}; };
// 多选固定选项删除 // 多选固定选项删除

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

@ -14,7 +14,7 @@
<input v-model="value" type="hidden" > <input v-model="value" type="hidden" >
</el-form-item> </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> </template>
<script lang='ts' setup> <script lang='ts' setup>
import LowcodeTransfer from './lowcodeTransfer.vue'; import LowcodeTransfer from './lowcodeTransfer.vue';
@ -89,6 +89,13 @@ const value = computed({
updateModel(newVal) updateModel(newVal)
} }
}) })
let componentKey = 0
function reRenderComponent() {
componentKey++;
}
function waitModelHasValue(){ function waitModelHasValue(){
//console.log("waitModelHasValue") //console.log("waitModelHasValue")
setTimeout(()=>{ setTimeout(()=>{

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

@ -1,5 +1,9 @@
<template> <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="leftArea"><!-- {{ selectedValueCompu }}{{checkedIdList}} -->
<div class="transferName">{{ transferConfig.transferName }}</div> <div class="transferName">{{ transferConfig.transferName }}</div>
<div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;"> <div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;">
@ -13,30 +17,33 @@
</div> </div>
<div class="leftScroll"> <div class="leftScroll">
<ElScrollbar height="100%"> <ElScrollbar height="100%">
<ElTree <ElTree ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps"
ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps" show-checkbox show-checkbox highlight-current :default-expand-all="isExpandAll"
highlight-current :default-expand-all="isExpandAll" :filter-node-method="filterNode" :filter-node-method="filterNode" @check="handleCheckList" @check-change="getCheckedList" />
@check="handleCheckList" @check-change="getCheckedList" />
</ElScrollbar> </ElScrollbar>
</div> </div>
</div> </div>
<div class="rigthArea"> <div class="rigthArea">
<div style="margin-bottom: 8px;"> <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> </div>
<ElScrollbar height="calc(100% - 50px)"> <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)"> <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;"
user.label closable @close="handleCloseTag(user)">
}}[{{ {{
user.label
}}[{{
user.parent.data.label user.parent.data.label
}}] }}]
</ElTag> </ElTag>
</ElScrollbar> </ElScrollbar>
</div> </div>
</div> </div>
@ -48,141 +55,183 @@ import { ref, watch, onMounted } from 'vue'
import request from '@/utils/request'; import request from '@/utils/request';
const props = defineProps({ const props = defineProps({
// eslint-disable-next-line vue/require-default-prop // eslint-disable-next-line vue/require-default-prop
data: { data: {
type: Object, type: Object,
default() { default() {
return {}; return {};
}, },
}, },
selectedValue: { selectedValue: {
type: Array, type: Array,
default() { default() {
return []; return [];
}, },
}, },
}) })
const emits = defineEmits(['checkedIdListChanged','updateModel']); const emits = defineEmits(['checkedIdListChanged', 'updateModel','reRenderComponent']);
const fixedOptions = props.data?.control.fixedOptions /* const fixedOptions = ref([]) */
const transferConfig = props.data?.config /* fixedOptions.value = props.data?.control.fixedOptions */
//const transferConfig = props.data?.config
const transferConfig = computed({
set(){
},
get(){
return props.data?.config
}
})
const treeProps = { const treeProps = {
value: 'id', value: 'id',
label: 'label', label: 'label',
disabled: 'disabled', disabled: 'disabled',
children: 'children' children: 'children'
} }
let dataFinished = false let dataFinished = ref(false)
const treeRef = ref() const treeRef = ref()
const isExpandAll = ref(false) // 是否全展开 const isExpandAll = ref(false) // 是否全展开
const keyword = ref('') // 搜索关键字 const keyword = ref('') // 搜索关键字
const checkList = ref([]) // 选中的list 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 checkedIdList = ref([]);
let count = 0 let count = 0
function waitAndReGet(){ function waitAndReGet() {
/* console.log("waitAndReGet") /* console.log("waitAndReGet")
console.log(props.selectedValue) console.log(props.selectedValue)
console.log(props.selectedValue.value) */ console.log(props.selectedValue.value) */
setTimeout(()=>{ setTimeout(() => {
let values = props.selectedValue.map(item => { let values = props.selectedValue.map(item => {
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整 // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
return item; return item;
}); });
if(props.selectedValue&&values){ if (props.selectedValue && values) {
/* console.log("有值") /* console.log("有值")
console.log(props.selectedValue) console.log(props.selectedValue)
console.log(values) */ console.log(values) */
//return props.selectedValue.value //return props.selectedValue.value
checkedIdList.value = values checkedIdList.value = values
}else{ } else {
if(count<3){ if (count < 3) {
count++ count++
waitAndReGet() waitAndReGet()
} }
/* console.log("waitAndReGet---else") */ /* console.log("waitAndReGet---else") */
} }
},2000) }, 2000)
} }
/*
*/
const selectedValueCompu = computed({ const selectedValueCompu = computed({
get() { get() {
//console.log("get") //console.log("get")
//nextTick(()=>{ //nextTick(()=>{
let values = props.selectedValue.map(item => { let values = props.selectedValue.map(item => {
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整 // 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整
return item; return item;
}); });
if(props.selectedValue&&values){ if (props.selectedValue && values) {
/* console.log(props.selectedValue.value) /* console.log(props.selectedValue.value)
console.log("computed---if") */ console.log("computed---if") */
return values return values
}else{ } else {
waitAndReGet() waitAndReGet()
/* console.log("computed---else") */ /* console.log("computed---else") */
return [] return []
} }
//}) //})
}, },
set(){} set() { }
}) })
/* console.log(props.selectedValue) */ /* 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() { function getDetail() {
//console.log(11111) //console.log(11111)
if(transferConfig.transferDataSource==="数据源"){ if (transferConfig.value.transferDataSource === "数据源") {
return request({ return request({
url: url, url: url,
method: transferConfig.method, method: transferConfig.value.method,
}); });
} }
} }
if(transferConfig.transferDataSource==="数据源"){ if (transferConfig.value.transferDataSource === "数据源") {
getDetail().then(({ data }) => { getDetail().then(({ data }) => {
//console.log(`获取穿梭框接口数据`); //console.log(`获取穿梭框接口数据`);
let resData = ref(data.children) resData.value = data.children
// 全选方法2:插入 全选node // 全选方法2:插入 全选node
userList.value = [{ userList.value = [{
id: '全选', id: '全选',
label: '全选', label: '全选',
children: [...resData.value] children: [...resData.value]
}] }]
treeRef.value.setCheckedKeys(checkedIdList.value,true) treeRef.value.setCheckedKeys(checkedIdList.value, true)
setTimeout(() => { setTimeout(() => {
checkedIdList.value.forEach(element => { checkedIdList.value.forEach(element => {
const _node = treeRef?.value?.getNode(element) const _node = treeRef?.value?.getNode(element)
if (!_node) return if (!_node) return
const _checkList = checkList.value const _checkList = checkList.value
if (_node.checked) { // 勾选时 if (_node.checked) { // 勾选时
if (_node.checked && _node.childNodes.length === 0) { if (_node.checked && _node.childNodes.length === 0) {
_checkList.push(_node) _checkList.push(_node)
} }
// 通过new Set() 实现数据去重 // 通过new Set() 实现数据去重
checkList.value = Array.from(new Set(_checkList)) checkList.value = Array.from(new Set(_checkList))
// 遍历子级,递归,直到获取最后一级的人员 // 遍历子级,递归,直到获取最后一级的人员
if (_node.childNodes.length > 0) { if (_node.childNodes.length > 0) {
_node.childNodes.map(item => handleCheckList(item.data)) _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);
}); });
} }
@ -192,7 +241,7 @@ const getCheckedList = () => {
let resData1 = ref([ let resData1 = ref([
{ {
@ -261,15 +310,15 @@ let resData1 = ref([
}, },
] ]
} }
]) ])
// 勾选或者取消勾选 // 勾选或者取消勾选
const handleCheckList = (val) => { const handleCheckList = (val) => {
const valId = val.id; const valId = val.id;
const _node = treeRef?.value?.getNode(valId) const _node = treeRef?.value?.getNode(valId)
if (!_node) return if (!_node) return
const _checkList = checkList.value const _checkList = checkList.value
if (_node.checked) { // 勾选时 if (_node.checked) { // 勾选时
@ -323,7 +372,7 @@ const filterNode = (value, data, node) => {
} }
// 通过tag 取消勾选 // 通过tag 取消勾选
const handleCloseTag = (tag) => { const handleCloseTag = (tag) => {
if (!treeRef?.value) return if (!treeRef?.value) return
checkList.value = checkList.value.filter(item => { checkList.value = checkList.value.filter(item => {
treeRef.value.setChecked(tag, false) treeRef.value.setChecked(tag, false)
@ -364,103 +413,191 @@ watch(keyword, (newVal) => {
//获取配置接口相应或获取固定选项值 //获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){ if (transferConfig.value.transferDataSource === "固定选项") {
setTimeout(() => { setTimeout(() => {
// 全选方法2:插入 全选node // 全选方法2:插入 全选node
userList.value = [{ userList.value = [{
id: '全选', id: '全选',
label: '全选', label: '全选',
children: fixedOptions children: props.data?.control.fixedOptions
}] }]
//console.log(treeRef) //console.log(treeRef)
/* console.log(checkedIdList.value) */ /* console.log(checkedIdList.value) */
treeRef.value.setCheckedKeys(checkedIdList.value,true) treeRef.value.setCheckedKeys(checkedIdList.value, true)
setTimeout(() => { setTimeout(() => {
checkedIdList.value.forEach(element => { checkedIdList.value.forEach(element => {
const _node = treeRef?.value?.getNode(element) const _node = treeRef?.value?.getNode(element)
if (!_node) return if (!_node) return
const _checkList = checkList.value const _checkList = checkList.value
if (_node.checked) { // 勾选时 if (_node.checked) { // 勾选时
if (_node.checked && _node.childNodes.length === 0) { if (_node.checked && _node.childNodes.length === 0) {
_checkList.push(_node) _checkList.push(_node)
} }
// 通过new Set() 实现数据去重 // 通过new Set() 实现数据去重
checkList.value = Array.from(new Set(_checkList)) checkList.value = Array.from(new Set(_checkList))
// 遍历子级,递归,直到获取最后一级的人员 // 遍历子级,递归,直到获取最后一级的人员
if (_node.childNodes.length > 0) { if (_node.childNodes.length > 0) {
_node.childNodes.map(item => handleCheckList(item.data)) _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);
}, 50); }, 50);
dataFinished = true dataFinished.value = true
}else{ } else {
getDetail getDetail
dataFinished = true dataFinished.value = true
}
/* setTimeout(()=>{
console.log("setTimeout")
if(props.data?.config.transferDataSource==="数据源"){
//emits('reRenderComponent');
count1.value++
} }
},1500) */
onMounted(() => {
})
// 监听 checkedIdList 的变化 // 监听 checkedIdList 的变化
watch(checkedIdList, (newValue, oldValue) => { watch(checkedIdList, (newValue, oldValue) => {
//console.log('checkedIdList 发生了变化', newValue); //console.log('checkedIdList 发生了变化', newValue);
emits('checkedIdListChanged',newValue); emits('checkedIdListChanged', newValue);
},{deep:true}); }, { 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) => { watch(selectedValueCompu, (newValue, oldValue) => {
//console.log('selectedValueCompu 发生了变化', newValue); //console.log('selectedValueCompu 发生了变化', newValue);
checkedIdList.value = selectedValueCompu.value checkedIdList.value = selectedValueCompu.value
//获取配置接口相应或获取固定选项值 //获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){ if (transferConfig.value.transferDataSource === "固定选项") {
setTimeout(() => {
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: fixedOptions
}]
//console.log(treeRef)
/* console.log(checkedIdList.value) */
treeRef.value.setCheckedKeys(checkedIdList.value,true)
setTimeout(() => { setTimeout(() => {
checkedIdList.value.forEach(element => {
const _node = treeRef?.value?.getNode(element) // 全选方法2:插入 全选node
if (!_node) return userList.value = [{
const _checkList = checkList.value id: '全选',
if (_node.checked) { // 勾选时 label: '全选',
if (_node.checked && _node.childNodes.length === 0) { children: props.data?.control.fixedOptions
_checkList.push(_node) }]
} //console.log(treeRef)
// 通过new Set() 实现数据去重 /* console.log(checkedIdList.value) */
checkList.value = Array.from(new Set(_checkList)) treeRef.value.setCheckedKeys(checkedIdList.value, true)
// 遍历子级,递归,直到获取最后一级的人员 setTimeout(() => {
if (_node.childNodes.length > 0) { checkedIdList.value.forEach(element => {
_node.childNodes.map(item => handleCheckList(item.data)) const _node = treeRef?.value?.getNode(element)
} if (!_node) return
} else if (!_node.checked) { // 取消勾选 const _checkList = checkList.value
checkList.value = checkList.value.filter(item => item.checked) if (_node.checked) { // 勾选时
} if (_node.checked && _node.childNodes.length === 0) {
}); _checkList.push(_node)
}, 50); }
// 通过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); }, 50);
dataFinished = true dataFinished.value = true
}else{ } else {
getDetail getDetail
dataFinished = true dataFinished.value = true
} }
//emits('updateModel',newValue); //emits('updateModel',newValue);
},{deep:true}); }, { deep: true });
</script> </script>
@ -482,7 +619,7 @@ if(transferConfig.transferDataSource==="固定选项"){
padding-left: 10px; padding-left: 10px;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
border-bottom: 1px solid gainsboro; border-bottom: 1px solid gainsboro;
} }
.buttonArea { .buttonArea {
@ -515,5 +652,6 @@ if(transferConfig.transferDataSource==="固定选项"){
border-radius: 5px; border-radius: 5px;
height: 456px; height: 456px;
background-color: white; background-color: white;
}</style> }
</style>

Write Preview
Loading…
Cancel
Save