添加table勾选

src/components/SimpleTable/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="table-wrapper">
-    <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :span-method="tableSpanMethod" :show-summary="showSummary" :summary-method="tableSummaryMethod" :height="height" stripe fit border @cell-click="cellClickHandler">
+    <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :span-method="tableSpanMethod" :show-summary="showSummary" :summary-method="tableSummaryMethod" :height="height" stripe fit border @selection-change="handleSelectionChange" @cell-click="cellClickHandler">
+      <el-table-column v-if="selected" type="selection" width="55">
+      </el-table-column>
       <el-table-column v-for="col in filteredTableCols" :key="col.pagecode" :prop="col.pagecode" :label="col.pagename" :width="col.displaywidth" :show-overflow-tooltip="showOverflowTooltip" :formatter="tableFormatter">
         <template #header>
           <el-tooltip :content="col.pagedescribe || col.pagename" placement="top">
@@ -8,8 +10,8 @@
           </el-tooltip>
         </template>
         <template slot-scope="scope">
-          <span  v-if="!col.backgroundcolorexpression">{{ scope.row[col.pagecode] }}</span>
-          <div  v-else :class="isTrue(scope.row[col.pagecode],col.backgroundcolorexpression )"></div>
+          <span v-if="!col.backgroundcolorexpression">{{ scope.row[col.pagecode] }}</span>
+          <div v-else :class="isTrue(scope.row[col.pagecode],col.backgroundcolorexpression )"></div>
         </template>
       </el-table-column>
       <el-table-column v-if="dealedTableData.length && tableBtns.length" fixed="right" width="240" label="操作">
@@ -82,6 +84,10 @@ export default {
     },
     formatter: {
       type: Function
+    },
+    selected: {
+      type: Number,
+      default: 0
     }
   },
   data () {
@@ -225,7 +231,7 @@ export default {
     this.$refs['table']?.doLayout()
   },
   methods: {
-    isTrue(row,data){
+    isTrue (row, data) {
       return eval(data)
     },
     load () {
@@ -311,13 +317,16 @@ export default {
     //表格-删除
     handleRemove (row) {
       this.$emit('handleRemove', row)
+    },
+    //表格-勾选
+    handleSelectionChange (val) {
+      this.$emit('handleSelectionChange', val)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
 .table-wrapper {
   width: 100%;
   height: 100%;
@@ -329,16 +338,16 @@ export default {
       font-size: 14px;
       font-family: Helvetica, "Microsoft YaHei";
       letter-spacing: 0;
-      .success{
-        width:15px;
-        height:15px;
-        background:#0fc956;
+      .success {
+        width: 15px;
+        height: 15px;
+        background: #0fc956;
         margin-left: calc(50% - 8px);
       }
-      .error{
-        width:15px;
-        height:15px;
-        background:#c92b0f;
+      .error {
+        width: 15px;
+        height: 15px;
+        background: #c92b0f;
         margin-left: calc(50% - 8px);
       }
     }

src/views/tablePage/index.vue

@@ -11,7 +11,7 @@
         </div>
       </template>
       <div :class="dataFlag ? 'tableAuto' : treeData.length ? 'tableSacle' : 'tableAuto'" class="TablePage_content_right">
-        <PublicPageTable :loading="loading" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" show-summary @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" />
+        <PublicPageTable :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" show-summary @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleOther="handleOther" @handleRemove="handleRemove" @handleSelectionChange="handleSelectionChange" />
       </div>
     </div>
     <div class="TablePage_dialog">
@@ -95,7 +95,10 @@ export default {
       labelWidth: '120px', //表单文字距离
       fromDataReqCatch: [], //表单规则缓存
       tableKey: null,//表格主键
-      depMath: 0
+      depMath: 0,
+      selected: 0, //是否勾选
+      selectedDatas: [], //勾选数据
+      triggerserviceid: null, //勾选后查询的serviceid
     }
   },
   computed: {
@@ -183,13 +186,15 @@ export default {
     getPageTableSetting (pageAuths, pageAuthtables) {
       const authTableObj = pageAuthtables[0]
       //获取当前页面table的配置
-      const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, defaultfilter } = authTableObj
+      const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, defaultfilter, selected, triggerserviceid } = authTableObj
       //获取当前页面table的按钮权限
       const currPageBtns = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item.pagetype == 'button')
       if (currPageBtns?.length) this.tableBtns.push(...currPageBtns)
       this.authBtns = pageAuths.filter(item => item.superiorid == pageconfigurationid && item.pagetype == 'button')
       this.pageServiceId = Object.keys(this.msgContent).length ? this.msgContent.serviceid : serviceid;
       this.pageTitle = pagename
+      this.selected = selected
+      this.triggerserviceid = triggerserviceid
       this.defaultfilter = Object.keys(this.pageQuery).length ? this.pageQuery : defaultfilter ? this.formatDefault(defaultfilter, authTableObj) : { 1: 1 }
       const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
       this.getColumnData(tableColumnArrs)
@@ -223,11 +228,39 @@ export default {
     },
     //获取tree点击
     treeNodeClick (data) {
+      if (this.selected) {
+        this.treeCheckQuery(data)
+      } else {
+        const values = Object.values(data)
+        const filterItem = this.formatDefault(this.treeParameters, data)
+        if (!Object.keys(filterItem).length) return
+        this.defaultfilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
+        this.queryTableData(true)
+      }
+    },
+    //存在勾选-点击树-查询
+    async treeCheckQuery (data) {
       const values = Object.values(data)
       const filterItem = this.formatDefault(this.treeParameters, data)
       if (!Object.keys(filterItem).length) return
-      this.defaultfilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
-      this.queryTableData(true)
+      const itemFilter = values.includes(-1) || values.includes('全部') ? { 1: 1 } : filterItem
+      const datacontent = { filter: itemFilter }
+      try {
+        const { code, returnData } = await Query({
+          page: 1,
+          serviceid: this.triggerserviceid,
+          datacontent,
+          event: '0',
+          size: 9999
+        });
+        if (code == 0) {
+          this.selectedDatas = [...returnData]
+        } else {
+          this.$message.error("获取表格数据失败")
+        }
+      } catch (error) {
+        this.$message.error("获取表格数据失败")
+      }
     },
     //格式化传递参数数据
     formatDefault (item, data = {}) {
@@ -385,6 +418,10 @@ export default {
         });
       });
     },
+    //表格-勾选
+    handleSelectionChange (val) {
+      console.log(val)
+    },
     // 新增/编辑-取消
     submitClickClose (formName) {
       this.formAuth = true
@@ -629,13 +666,17 @@ export default {
       }
       this.loading = true;
       const datacontent = { filter: this.defaultfilter }
+      const parmas = {
+        page: ++this.page,
+        serviceid: this.pageServiceId,
+        datacontent,
+        event: '0'
+      }
+      if (this.selected) {
+        parmas.size = 9999
+      }
       try {
-        const { code, returnData } = await Query({
-          page: ++this.page,
-          serviceid: this.pageServiceId,
-          datacontent,
-          event: '0'
-        });
+        const { code, returnData } = await Query(parmas);
         if (code == 0) {
           if (returnData.length === 0) {
             this.page--;