分类分级任务-tree滚动
Showing
3 changed files
with
42 additions
and
25 deletions
| ... | @@ -45,10 +45,6 @@ const resetForm = (formEl: FormInstance | undefined) => { | ... | @@ -45,10 +45,6 @@ const resetForm = (formEl: FormInstance | undefined) => { |
| 45 | }) | 45 | }) |
| 46 | } | 46 | } |
| 47 | 47 | ||
| 48 | defineExpose({ | ||
| 49 | formInline, | ||
| 50 | formRef, | ||
| 51 | }) | ||
| 52 | const setFormFields = (list: any) => { | 48 | const setFormFields = (list: any) => { |
| 53 | let obj = {} | 49 | let obj = {} |
| 54 | list.map((item: any) => { | 50 | list.map((item: any) => { |
| ... | @@ -99,6 +95,12 @@ const inputChange = (val) => { | ... | @@ -99,6 +95,12 @@ const inputChange = (val) => { |
| 99 | onSubmit() | 95 | onSubmit() |
| 100 | } | 96 | } |
| 101 | const formCascaderRef = ref() | 97 | const formCascaderRef = ref() |
| 98 | |||
| 99 | defineExpose({ | ||
| 100 | formInline, | ||
| 101 | formRef, | ||
| 102 | getCascaderCheckedData | ||
| 103 | }) | ||
| 102 | onMounted(() => { | 104 | onMounted(() => { |
| 103 | props.init && onSubmit() | 105 | props.init && onSubmit() |
| 104 | }) | 106 | }) | ... | ... |
| ... | @@ -57,14 +57,8 @@ const cascaderChange = (val, item) => { | ... | @@ -57,14 +57,8 @@ const cascaderChange = (val, item) => { |
| 57 | emits("cascaderChange", val, item); | 57 | emits("cascaderChange", val, item); |
| 58 | } | 58 | } |
| 59 | 59 | ||
| 60 | const getCascaderCheckedData = () => { | ||
| 61 | const toolSearchForm = toolSearch.value.formRef[0] || toolSearch.value.formRef; | ||
| 62 | return toolSearchForm.getCascaderCheckedData(); | ||
| 63 | } | ||
| 64 | |||
| 65 | defineExpose({ | 60 | defineExpose({ |
| 66 | toolSearch, | 61 | toolSearch |
| 67 | getCascaderCheckedData | ||
| 68 | }) | 62 | }) |
| 69 | 63 | ||
| 70 | </script> | 64 | </script> | ... | ... |
| ... | @@ -39,11 +39,12 @@ const gradeList = ref([]); | ... | @@ -39,11 +39,12 @@ const gradeList = ref([]); |
| 39 | const treeData = ref([ | 39 | const treeData = ref([ |
| 40 | { | 40 | { |
| 41 | classifyName: "全部", | 41 | classifyName: "全部", |
| 42 | classifyDetailGuid: "all", | 42 | classifyDetailGuid: "", |
| 43 | guid: 'all', | ||
| 43 | children: [], | 44 | children: [], |
| 44 | }, | 45 | }, |
| 45 | ]); | 46 | ]); |
| 46 | const currTreeNode = ref({ classifyName: "全部", classifyDetailGuid: "all" }) | 47 | |
| 47 | const treeInfoRef = ref(); | 48 | const treeInfoRef = ref(); |
| 48 | const treeInfo: any = ref({ | 49 | const treeInfo: any = ref({ |
| 49 | id: "data-pickup-tree", | 50 | id: "data-pickup-tree", |
| ... | @@ -53,7 +54,7 @@ const treeInfo: any = ref({ | ... | @@ -53,7 +54,7 @@ const treeInfo: any = ref({ |
| 53 | props: { | 54 | props: { |
| 54 | label: "classifyName", | 55 | label: "classifyName", |
| 55 | }, | 56 | }, |
| 56 | nodeKey: 'classifyDetailGuid', | 57 | nodeKey: 'guid', |
| 57 | expandedKey: [], | 58 | expandedKey: [], |
| 58 | expandOnNodeClick: false, | 59 | expandOnNodeClick: false, |
| 59 | data: [], | 60 | data: [], |
| ... | @@ -513,22 +514,21 @@ const tabChange = (val) => { | ... | @@ -513,22 +514,21 @@ const tabChange = (val) => { |
| 513 | } | 514 | } |
| 514 | 515 | ||
| 515 | const nodeClick = (data, node) => { | 516 | const nodeClick = (data, node) => { |
| 516 | currTreeNode.value = data; | ||
| 517 | if (data.classifyDetailGuid == 'all') { | 517 | if (data.classifyDetailGuid == 'all') { |
| 518 | fieldItemList.value[4].default = ''; | 518 | fieldItemList.value[4].default = ''; |
| 519 | fieldItemList.value[5].default = []; | 519 | fieldItemList.value[5].default = []; |
| 520 | promiseList( | ||
| 521 | getFieldTableData() | ||
| 522 | ) | ||
| 523 | } else { | 520 | } else { |
| 524 | const parentGuids = data.parentGuids || []; | 521 | const nodeData = JSON.parse(JSON.stringify(data)); |
| 525 | parentGuids.push(data.classifyDetailGuid) | 522 | let parentGuids = nodeData.parentGuids || []; |
| 523 | parentGuids.push(nodeData.guid) | ||
| 526 | fieldItemList.value[4].default = 'Y'; | 524 | fieldItemList.value[4].default = 'Y'; |
| 527 | fieldItemList.value[5].default = parentGuids; | 525 | fieldItemList.value[5].default = parentGuids; |
| 526 | } | ||
| 527 | nextTick(() => { | ||
| 528 | promiseList( | 528 | promiseList( |
| 529 | getFieldTableData() | 529 | getFieldTableData() |
| 530 | ) | 530 | ) |
| 531 | } | 531 | }) |
| 532 | } | 532 | } |
| 533 | 533 | ||
| 534 | // 获取库表数据 | 534 | // 获取库表数据 |
| ... | @@ -565,10 +565,8 @@ const getFieldTableData = () => { | ... | @@ -565,10 +565,8 @@ const getFieldTableData = () => { |
| 565 | isMergeClassify: checked1.value ? 'Y' : 'N' | 565 | isMergeClassify: checked1.value ? 'Y' : 'N' |
| 566 | } | 566 | } |
| 567 | const cascaderData = fieldSearchRef.value.toolSearch.getCascaderCheckedData(); | 567 | const cascaderData = fieldSearchRef.value.toolSearch.getCascaderCheckedData(); |
| 568 | debugger | 568 | if (cascaderData.length) { |
| 569 | const classifyName = params.classifyName?.at(-1) || undefined; | 569 | params.classifyDetail = cascaderData[0].data.classifyDetailGuid; |
| 570 | if (classifyName && classifyName != 'unclassified') { | ||
| 571 | params.classifyDetail = classifyName; | ||
| 572 | } | 570 | } |
| 573 | delete params.classifyName | 571 | delete params.classifyName |
| 574 | return execTaskFieldList(params).then((res: any) => { | 572 | return execTaskFieldList(params).then((res: any) => { |
| ... | @@ -617,6 +615,11 @@ const tableBtnClick = (scope, btn) => { | ... | @@ -617,6 +615,11 @@ const tableBtnClick = (scope, btn) => { |
| 617 | treeInfo.value.expandedKey = ['all']; | 615 | treeInfo.value.expandedKey = ['all']; |
| 618 | treeInfoRef.value.setCurrentKey('all'); | 616 | treeInfoRef.value.setCurrentKey('all'); |
| 619 | getSheetFieldList({ type: 2, dbGuid: row.databaseGuid }, row.tableGuid); | 617 | getSheetFieldList({ type: 2, dbGuid: row.databaseGuid }, row.tableGuid); |
| 618 | nextTick(() => { | ||
| 619 | const treeRef = treeInfoRef.value.treeRef; | ||
| 620 | const container = treeRef.$el; | ||
| 621 | container.scrollTo({ top: 0, behavior: 'smooth' }); | ||
| 622 | }) | ||
| 620 | } else if (type == "edit") { | 623 | } else if (type == "edit") { |
| 621 | row.STATE = 'Running'; | 624 | row.STATE = 'Running'; |
| 622 | } else if (type == 'save') { | 625 | } else if (type == 'save') { |
| ... | @@ -795,6 +798,11 @@ const searchField = (val: any, clear: boolean = false) => { | ... | @@ -795,6 +798,11 @@ const searchField = (val: any, clear: boolean = false) => { |
| 795 | fieldItemList.value.map(item => item.default = '') | 798 | fieldItemList.value.map(item => item.default = '') |
| 796 | treeInfo.value.expandedKey = ['all']; | 799 | treeInfo.value.expandedKey = ['all']; |
| 797 | treeInfoRef.value.setCurrentKey('all'); | 800 | treeInfoRef.value.setCurrentKey('all'); |
| 801 | nextTick(() => { | ||
| 802 | const treeRef = treeInfoRef.value.treeRef; | ||
| 803 | const container = treeRef.$el; | ||
| 804 | container.scrollTo({ top: 0, behavior: 'smooth' }); | ||
| 805 | }) | ||
| 798 | } | 806 | } |
| 799 | fieldParams.value = Object.assign({}, { ...fieldParams.value }, { ...val }); | 807 | fieldParams.value = Object.assign({}, { ...fieldParams.value }, { ...val }); |
| 800 | promiseList( | 808 | promiseList( |
| ... | @@ -814,9 +822,16 @@ const cascaderChange = (val, info) => { | ... | @@ -814,9 +822,16 @@ const cascaderChange = (val, info) => { |
| 814 | } else { | 822 | } else { |
| 815 | treeInfoRef.value.expandedKey = val || ['all']; | 823 | treeInfoRef.value.expandedKey = val || ['all']; |
| 816 | treeInfoRef.value.setCurrentKey(val?.at(-1) || 'all'); | 824 | treeInfoRef.value.setCurrentKey(val?.at(-1) || 'all'); |
| 825 | val && (fieldItemList.value[4].default = 'Y'); | ||
| 817 | promiseList( | 826 | promiseList( |
| 818 | getFieldTableData() | 827 | getFieldTableData() |
| 819 | ) | 828 | ) |
| 829 | setTimeout(() => { | ||
| 830 | const treeRef = treeInfoRef.value.treeRef; | ||
| 831 | const container = treeRef.$el; | ||
| 832 | const currentNode = container.querySelector('.el-tree-node.is-current'); | ||
| 833 | currentNode && container.scrollTo({ top: currentNode.offsetTop, behavior: 'smooth' }); | ||
| 834 | }, 300) | ||
| 820 | } | 835 | } |
| 821 | } | 836 | } |
| 822 | }; | 837 | }; |
| ... | @@ -894,9 +909,15 @@ const selectChange = (val, item, scope = null) => { | ... | @@ -894,9 +909,15 @@ const selectChange = (val, item, scope = null) => { |
| 894 | treeInfo.value.expandedKey = ['all']; | 909 | treeInfo.value.expandedKey = ['all']; |
| 895 | treeInfoRef.value.setCurrentKey('all'); | 910 | treeInfoRef.value.setCurrentKey('all'); |
| 896 | fieldItemList.value[4].default = val || ''; | 911 | fieldItemList.value[4].default = val || ''; |
| 912 | nextTick(() => { | ||
| 897 | promiseList( | 913 | promiseList( |
| 898 | getFieldTableData() | 914 | getFieldTableData() |
| 899 | ) | 915 | ) |
| 916 | const treeRef = treeInfoRef.value.treeRef; | ||
| 917 | const container = treeRef.$el; | ||
| 918 | container.scrollTo({ top: 0, behavior: 'smooth' }); | ||
| 919 | }) | ||
| 920 | |||
| 900 | } | 921 | } |
| 901 | } | 922 | } |
| 902 | 923 | ... | ... |
-
Please register or sign in to post a comment