引用元素表回显

src/global/components/hc-table/index.vue

@@ -1,8 +1,16 @@
 <template>
     <div class="hc-table-ref-box" :class="ui">
-        <el-table ref="tableRef" hc :data="tableData" height="100%" v-loading="isLoading" stripe :row-key="rowKey" :border="isBorder" @selection-change="tableSelectionChange"
-                  @row-click="tableRowClick" @row-dblclick="tableRowDblClick" @row-contextmenu="tableRowContextmenu" @cell-click="tableCellClick" @cell-dblclick="tableCellDblClick"
-                  @cell-contextmenu="tableCellContextmenu" style="width: 100%;">
+        <el-table ref="tableRef" hc :data="tableData" height="100%" v-loading="isLoading" stripe :row-key="rowKey" :border="isBorder"
+                  @selection-change="tableSelectionChange"
+                  @select="tableSelect"
+                  @select-all="tableSelectAll"
+                  @row-click="tableRowClick"
+                  @row-dblclick="tableRowDblClick"
+                  @row-contextmenu="tableRowContextmenu"
+                  @cell-click="tableCellClick"
+                  @cell-dblclick="tableCellDblClick"
+                  @cell-contextmenu="tableCellContextmenu"
+                  style="width: 100%;">
             <el-table-column type="selection" width="50" v-if="isCheck"/>
             <el-table-column type="index" prop="num" label="序号" width="80" v-if="isIndex"/>
             <template v-for="item in columns">
@@ -124,6 +132,14 @@ const tableSelectionChange = (rows) => {
     emit('selection-change', tableRows)
 }
 
+const tableSelect = (selection, row) => {
+    emit('select', {selection, row})
+}
+
+const tableSelectAll = (rows) => {
+    emit('select-all', rows)
+}
+
 //当某一行被点击时会触发该事件
 const tableRowClick = (row, column, event) => {
     emit('row-click', {row, column, event})

src/views/data-fill/division.vue

@@ -27,7 +27,7 @@
                     <HcTable :column="tableBasicColumn" :datas="tableBasicData" :isIndex="false" border>
                         <template #type="{row}">{{getRowType(row['type'])}}</template>
                         <template #majorDataType="{row}">{{getRowMajorType(row['majorDataType'])}}</template>
-                      
+
                     </HcTable>
                 </HcCard>
             </div>
@@ -49,7 +49,7 @@
                                         <span>删除</span>
                                     </el-button>
                                 </HcTooltip>
-                        </template>    
+                        </template>
                     </HcTable>
                 </HcCard>
             </div>
@@ -277,7 +277,10 @@
                             @select="searchTreeSelect"/>
                     </div>
                     <div class="dialog-table">
-                        <HcTable ref="dialogTableRef" :loading="dialogTableLoading" :column="dialogTableColumn" :datas="dialogTableData" isCheck @selection-change="dialogTableSelection"/>
+                        <HcTable ref="dialogTableRef" :loading="dialogTableLoading" :column="dialogTableColumn" :datas="dialogTableData" isCheck
+                                 @select="dialogTableSelect"
+                                 @select-all="dialogTableSelectAll"
+                        />
                     </div>
                     <div class="dialog-pages">
                         <HcPages :pages="searchFormPage" @change="searchFormPageChange"/>
@@ -448,7 +451,7 @@ const tableBasicColumn = ref([
     {key:'partitionCode', name: '划分编号'},
     {key:'type', name: '节点类型'},
     {key:'majorDataType', name: '资料类型'},
-    
+
 ])
 const tableBasicData = ref([])
 
@@ -1057,13 +1060,14 @@ const addingFormTreeClick = async (data, node) => {
     console.log(addingFormTreeItem.value.primaryKeyId,'addingFormTreeItem.value');
     if (node?.level === 1) {
         getDialogTableData().then()
-       
+
     } else if (node?.level === 2) {
         searchFormPage.value.total = 1
         dialogTableData.value = [data]
         nextTick(()=>{
             dialogTableRef.value?.toggleRowSelection(data,true);
         })
+        selectItems.value.push(data)
     }
 }
 
@@ -1086,6 +1090,7 @@ const querySearchTree = async (key, resolve) => {
     }
 }
 const searchTreeSelect = (item) => {
+    console.log("searchTreeSelect")
     dialogTableRef.value?.clearSelection()
     dialogTableKeys.value = []
     dialogTableData.value = [item]
@@ -1126,11 +1131,25 @@ const getDialogTableData = async () => {
     //获取数据
     const resData = await tabTypeLazyTree(primaryKeyId, searchTitle, true, true)
     const records = getArrValue(resData?.data)
+
     //处理返回的数据
     dialogTableData.value = records
     dialogTableLoading.value = false
     if (records.length > 0) {
         searchFormPage.value.total = resData.total || 0
+
+        //表格勾选回显
+        selectItems.value.forEach((item)=>{
+            dialogTableData.value.forEach((item1)=>{
+                if(item.id===item1.id){
+                    nextTick(()=>{
+                        dialogTableRef.value?.toggleRowSelection(item1,true);
+                    })
+
+                }
+            })
+        })
+
     } else {
         searchFormPage.value.total = 0
     }
@@ -1138,20 +1157,44 @@ const getDialogTableData = async () => {
 
 //多选
 const dialogTableKeys = ref([]);
-const dialogTableSelection = (rows) => {
-    console.log(rows,'rows');
-     dialogTableKeys.value = rows
-    //   selectItem.value.rows=rows;
-    //   selectItem.value.type=addingFormTreeItem.value.primaryKeyId
-    //   console.log(rows,'rows');
-    //     if(selectItem.value.rows.length>0){
-    //         selectItems.value.push(selectItem.value)
-    //           var newArr = [...new Set(selectItems.value)];
-    //           selectItems.value=newArr
-    //     } 
-    //  setStoreData('selectItems',rows)
+
+// 全选
+const dialogTableSelectAll = (rows) => {
+    if (rows.length) { /* 全选 */
+        if (selectItems.value.length <= 0) {
+            rows.forEach(row => {
+                selectItems.value.push(row)
+            })
+        } else {
+            rows.forEach(row => {
+                const flag = selectItems.value.filter(e => e.id === row.id)
+                if (flag.length <= 0) {
+                    selectItems.value.push(row)
+                }
+            })
+        }
+    } else { /* 反选-清空当前列表数据 */
+        dialogTableData.value.forEach(row => {
+            // 取消选中时过滤
+            selectItems.value = selectItems.value.filter(e => e.id !== row.id)
+        })
+    }
+
+    console.log(selectItems.value, "dialogTableSelectAll selectItems")
 }
 
+const dialogTableSelect = ({selection, row}) => {
+    dialogTableKeys.value = selection
+    const flag = selectItems.value.filter(e => e.id === row.id)
+    if (flag.length <= 0) { /* 不存在表示是选中，勾选时添加 */
+        selectItems.value.push(row)
+    } else {
+        // 取消选中时过滤
+        selectItems.value = selectItems.value.filter(e => e.id !== row.id)
+    }
+
+    console.log(selectItems.value, "dialogTableSelect selectItems")
+}
 //获取数据
 const tabTypeLazyTree = async (parentId = '12345678910', titleName = '', search = false, form = {},size) => {
     let obj = {}, searchObj = {}
@@ -1176,7 +1219,9 @@ const tabTypeLazyTree = async (parentId = '12345678910', titleName = '', search
 //保存
 const addingFormLoading = ref(false)
 const addingFormSave = async () => {
-    const rows = dialogTableKeys.value
+    // const rows = dialogTableKeys.value
+    console.log(dialogTableKeys.value, "addingFormSave")
+    const rows = selectItems.value
     if (rows.length > 0) {
         addingFormLoading.value = true
         const { primaryKeyId } = treeItemInfo.value