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. 14
      src/components/DesignForm/formControlPropertiNew.vue
  2. 9
      src/widget/lowcodetransfer/index.vue
  3. 200
      src/widget/lowcodetransfer/lowcodeTransfer.vue

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

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(()=>{

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

@ -1,4 +1,8 @@
<template>
<!-- {{ 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>
@ -13,23 +17,26 @@
</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)">
<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
}}[{{
@ -64,21 +71,57 @@ const props = defineProps({
})
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() {
@ -108,6 +151,12 @@ function waitAndReGet(){
}
}, 2000)
}
/*
*/
const selectedValueCompu = computed({
get() {
@ -138,23 +187,23 @@ const selectedValueCompu = computed({
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==="数据源"){
if (transferConfig.value.transferDataSource === "数据源") {
getDetail().then(({ data }) => {
//console.log(`获取穿梭框接口数据`);
let resData = ref(data.children)
resData.value = data.children
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
@ -364,14 +413,14 @@ watch(keyword, (newVal) => {
//获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){
if (transferConfig.value.transferDataSource === "固定选项") {
setTimeout(() => {
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: fixedOptions
children: props.data?.control.fixedOptions
}]
//console.log(treeRef)
/* console.log(checkedIdList.value) */
@ -397,16 +446,18 @@ if(transferConfig.transferDataSource==="固定选项"){
});
}, 50);
}, 50);
dataFinished = true
dataFinished.value = true
} else {
getDetail
dataFinished = true
dataFinished.value = true
}
onMounted(() => {
})
/* setTimeout(()=>{
console.log("setTimeout")
if(props.data?.config.transferDataSource==="数据源"){
//emits('reRenderComponent');
count1.value++
}
},1500) */
@ -416,19 +467,105 @@ watch(checkedIdList, (newValue, oldValue) => {
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==="固定选项"){
if (transferConfig.value.transferDataSource === "固定选项") {
setTimeout(() => {
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: fixedOptions
children: props.data?.control.fixedOptions
}]
//console.log(treeRef)
/* console.log(checkedIdList.value) */
@ -454,10 +591,10 @@ if(transferConfig.transferDataSource==="固定选项"){
});
}, 50);
}, 50);
dataFinished = true
dataFinished.value = true
} else {
getDetail
dataFinished = true
dataFinished.value = true
}
//emits('updateModel',newValue);
}, { deep: true });
@ -516,4 +653,5 @@ if(transferConfig.transferDataSource==="固定选项"){
height: 456px;
background-color: white;
}</style>
}
</style>

Write Preview
Loading…
Cancel
Save