mock 表格选择数据

src/views/chartRelevance_manage/relevance/components/batchSelectTable.vue

@@ -37,8 +37,8 @@
                 @handleCurrentChange="pageNumberChange"
             />
         </div>
-        <el-button type="primary">加入已选指标</el-button>
-        <div class="select-box">
+        <el-button type="primary" @click="handleAddSelectData">加入已选指标</el-button>
+        <div class="select-box" style="align-self: flex-start;">
             <el-table
                 border height="500px"
                 ref="selectRef" 
@@ -46,15 +46,15 @@
             >
             <el-table-column
                 align="center"
-                label="指标全称"
-                props="name"
+                :label="tableColumns[0].label"
+                :prop="tableColumns[0].key"
              />
              <el-table-column width="50px" align="center" v-if="selectData.length">
-                <template slot="header">
-                    <img @click="handleDelSelect('all')" style="width:15px;height:15px;cursor: pointer;" src="~@/assets/img/ai_m/delete.png" alt="">
+                <template slot="header" slot-scope="scope">
+                    <img @click="handleDelSelect(_,'all')" style="width:15px;height:15px;cursor: pointer;" src="~@/assets/img/ai_m/delete.png" alt="">
                 </template>
-                <template slot-scope="{row}">
-                    <img @click="handleDelSelect(row)" style="width:15px;height:15px;cursor: pointer;" src="~@/assets/img/ai_m/delete.png" alt="">
+                <template slot-scope="{row,index}">
+                    <img @click="handleDelSelect(index,'')" style="width:15px;height:15px;cursor: pointer;" src="~@/assets/img/ai_m/delete.png" alt="">
                 </template>
             </el-table-column>
         </el-table>
@@ -110,8 +110,8 @@ export default {
     },
     data() {
         return {
-            selectList:[],
-            selectData:[],
+            selectList:[],//左侧表格已选择/已剔除的数据
+            selectData:[],//右侧表格的数据
             selectionReactCancel:false,
         };
     },
@@ -203,7 +203,22 @@ export default {
         pageNumberChange(page){
             this.$emit('pageChange',page)
         },
-        handleDelSelect(data){},
+        handleAddSelectData(){
+            //外层组件处理校验和添加逻辑
+            this.$emit('addSelectData',{selectList:this.selectList,selectData:this.selectData})
+
+        },
+        //外层组件调用
+        addSelectData(data){
+            this.selectData = [...this.selectData,...data]
+            
+        },
+        handleDelSelect(index,type){
+            if(type==='all'){
+                return (this.selectData = [])
+            }
+            this.selectData.splice(index,1)
+        },
     },
 };
 </script>

src/views/chartRelevance_manage/relevance/components/multipleIndForm.vue

@@ -144,9 +144,11 @@
                     :tableColumns="tableColumns"
                     :tableData="tableData"
                     :tableParams="tableParams"
+                    :tableLoading="tableLoading"
                     :isSelectAll="isSelectAll"
                     @pageChange="tablePageChange"
                     @changeCheckAll="changeCheckAll"
+                    @addSelectData="addSelectData"
                 ></batchSelectTable>
                 <!-- 计算公式 -->
                 <batchSelectFormula
@@ -166,6 +168,7 @@ import batchSelectTable from './batchSelectTable.vue'
 import batchSelectFormula from './batchSelectFormula.vue'
 import formMixin from './formMixin';
 import { frequencySelectList } from '@/utils/defaultOptions'
+import { dataBaseInterface,departInterence } from '@/api/api.js';
 export default {
     mixins:[formMixin],
 	components: { batchSelectTable, batchSelectFormula },
@@ -217,11 +220,7 @@ export default {
         return {
             isAddFactorDialogShow:false,
             factorData:{},
-            tableData:[
-                {Id:1,EdbName:'111',EndDate:'2024-05-24',EndValue:15},
-                {Id:2,EdbName:'222',EndDate:'2024-05-24',EndValue:16},
-                /* {EdbName:'333',EndDate:'2024-05-24',EndValue:17} */
-            ],
+            tableData:[],
             tableSelectParams:{
                 classify:'',
                 frequency:'',
@@ -231,12 +230,13 @@ export default {
             classifyOpt:[],
             sysUserOpt:[],
             tableParams:{
-                total:3,
-                pageSize:2,
+                total:0,
+                pageSize:20,
                 pageNo:1,
                 pagerCount:5,
-                uniqueKey:'Id',//数据行的唯一key
+                uniqueKey:'EdbInfoId',//数据行的唯一key
             },
+            tableLoading:false,
             isIndeterminate:false,//与isCheckAll一起表示列表全选的状态
             isCheckAll:false,//与isIndeterminate一起表示列表全选的状态
             isSelectAll:false,//是否勾选了列表全选:为true时，selectList是剔除的指标，为false时selectList是已选择的指标
@@ -245,11 +245,38 @@ export default {
     methods:{
         openAddDialog(data){
             this.factorData = data
+            this.getClassifyOpt()
+            this.getSysUserOpt()
             this.isAddFactorDialogShow = true
         },
-        getClassifyOpt(){},
-        getSysUserOpt(){},
-        handleFilter(){},
+        async getClassifyOpt(){
+            const res=await dataBaseInterface.menuListV3()
+            if (res.Ret !== 200) return
+
+            const filterNodes = (arr)=>{
+                arr.length &&
+                    arr.forEach((item) => {
+                        item.Children.length && filterNodes(item.Children);
+                        if (!item.Children.length) {
+                            delete item.Children;
+                        }
+                    });
+            }
+            filterNodes(res.Data.AllNodes||[]);
+
+            this.classifyOpt = res.Data.AllNodes || [];
+        },
+        async getSysUserOpt(){
+            const res = await departInterence.getQuestionAdminList();
+            if (res.Ret === 200) {
+                this.sysUserOpt = res.Data.List||[];
+            }
+        },
+        handleFilter(){
+            this.tableParams.pageNo = 1
+            this.tableData = []
+            this.getTableData()
+        },
         listCheckAllChange(value){
             this.isSelectAll = value
         },
@@ -258,22 +285,76 @@ export default {
             this.isIndeterminate = isIndeterminate
         },
         tablePageChange(page){
-            if(page===2){
-                this.tableData = [{Id:3,EdbName:'333',EndDate:'2024-05-24',EndValue:17}]
-            }else{
-                this.tableData = [
-                    {Id:1,EdbName:'111',EndDate:'2024-05-24',EndValue:15},
-                    {Id:2,EdbName:'222',EndDate:'2024-05-24',EndValue:16},
-                ]
-            }
             this.tableParams.pageNo = page
             this.getTableData('pageChange')
         },
-        getTableData(type){
+        async addSelectData({selectList,selectData}){
+            //校验：没选择任何指标
+            if(!this.isCheckAll&&!this.isIndeterminate){
+                return this.$message.warning('请选择需要添加的指标')
+            }
+            //校验：所选指标总合已超过限制
+
+
+            //通过接口获取选中的所有指标
+            const {classify,frequency,creator,keyword} = this.tableSelectParams
+            const ClassifyIds = classify?classify.join(','):''
+            const Frequency = frequency?frequency.join(','):''
+            const SysUserIds = creator?creator.join(','):''
+            const res=await dataBaseInterface.getBatchFilterAddEdbList({
+                SysUserIds,ClassifyIds,
+                Keyword:keyword,
+                Frequency,
+                SelectAll:this.isSelectAll,
+                EdbInfoIds:selectList.join(',')
+            })
+            if(res.Ret!==200) return 
+            //去重
+            //const data = this.mergeAndDistinct(selectData,res.Data.SearchItem||[])
+            const data = selectData.concat(res.Data.SearchItem||[]).filter((item,index,self)=>{
+                return index ===self.findIndex(t=>t.EdbInfoId === item.EdbInfoId)
+            })
+            //再计算一次总和，若超出，则只获取没超出的部分
+
+
+            //加入到selectData中
+            this.$refs.batchSelectTable.addSelectData(data)
+            //自动填写指标系列名称
+        },
+        async getTableData(type){
+            this.tableLoading=true
+            const {classify,frequency,creator,keyword} = this.tableSelectParams
+            const ClassifyIds = classify?classify.join(','):''
+            const Frequency = frequency?frequency.join(','):''
+            const SysUserIds = creator?creator.join(','):''
+            //没有任何筛选项时不展示数据
+            if(!ClassifyIds&&!Frequency&&!SysUserIds&&!keyword){
+                this.tableLoading = false
+                this.tableData = []
+                this.tableParams.total = 0
+                this.isIndeterminate = false
+                this.isCheckAll = false
+                return 
+            }
+            const res=await dataBaseInterface.getBatchAddEdbSearchList({
+                CurrentIndex:this.tableParams.pageNo,
+                PageSize: this.tableParams.pageSize,
+                SysUserIds,ClassifyIds,Frequency,
+                Keyword:keyword,
+                NotFrequency:''
+            })
+            this.tableLoading=false
+            if(res.Ret!==200) return 
+
+            this.tableData=res.Data.SearchItem||[]
+            this.tableParams.total=res.Data.Paging.Totals||0
+
             if(type==='pageChange'){
                 this.$nextTick(()=>{
                     this.$refs.batchSelectTable.adjustSelection()
                 })
+            }else{
+                this.listCheckAllChange(true)
             }
         },
         async handleAddFactor(){
@@ -309,7 +390,7 @@ export default {
     }
     .dialog-footer{
         text-align:center;
-        margin:60px 0 40px 0;
+        margin:30px 0 20px 0;
     }
 }
 </style>