first commit all content

src/components/table/index.vue

@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <!--  表格头部按钮  -->
+        <el-row :gutter="10" class="mb8" v-if="config && config.tableButton && config.tableButton.top">
+           <template v-for="item of config.tableButton.top">
+               <el-col :span="1.5">
+                   <el-button :type="item.type" plain size="mini" :icon="item.icon" @click="handleClick(item,{})" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
+               </el-col>
+           </template>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="renderList" :columns="columns"></right-toolbar>
+        </el-row>
+        <!-- 表格数据 -->
+        <el-table v-loading="loading" :data="tableList" ref="selChangeList" @selection-change="handleSelectionChange">
+            <el-table-column v-if="!config.colHiddenCheck" type="selection" width="55" align="center" />
+            <template v-for="(column, key, index) of columns">
+                <el-table-column :label="column.label" :key="key" :prop="key" :width="column.width" min-width="100px" v-if="column && column.visible" align="center" :show-overflow-tooltip="true">
+                    <!--  插槽 自定义列表表头数据格式  -->
+                  <template #header v-if="column && column.slotHeaderName">
+                    <span>{{column.label}}</span>
+                    <el-tooltip trigger="click" effect="dark" placement="top">
+                      <template #content>{{column.slotHeaderName}}</template>
+                      <i class="el-icon-question"></i>
+                    </el-tooltip>
+                  </template>
+                    <!--  插槽 自定义列表内数据格式  -->
+                    <template #default="scope" v-if="column && column.slotName">
+                        <!-- 传递行数据、行索引等信息到父组件的插槽 -->
+                        <slot
+                            :name="column.slotName"
+                            :row="scope.row"
+                            :rowIndex="scope.$index"
+                            :column="column"
+                            :scope="scope"
+                        ></slot>
+                    </template>
+                </el-table-column>
+            </template>
+            <!--  表格行内按钮   -->
+            <el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="config.tableButton.line.length * 60 + `px`" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
+                <template #default="scope">
+                  <template v-for="item of config.tableButton.line">
+                    <el-tooltip v-if="item && item.content" :content="item.content" placement="top">
+                      <el-button size="mini" link :type="item.type" :icon="item.icon" v-show="scope.row[item.showName] === item.showVal" @click="handleClick(item, scope.row)" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
+                    </el-tooltip>
+                  </template>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination v-show="queryParams.total > 0" :total="queryParams.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="renderList" />
+    </div>
+</template>
+
+<script setup>
+    export default {
+      name: 'table-list',
+      props: {
+          tableList: {
+              type: Array,
+              default: () => []
+          },
+          columns: {
+              type: Object,
+              default: () => {}
+          },
+          queryParams: {
+              type: Object,
+              default: {
+                  total: 0,
+                  pageNum: 1,
+                  pageSize: 10,
+              }
+          },
+          config: {
+              type: Object,
+              default: () => {}
+          }
+      },
+      data() {
+        return {
+          loading: false,
+          showSearch: true,
+          ids: [],
+          selectList: [],
+          isProcessing: false,  // 防止事件循环的标志位
+        }
+      },
+      // 监听showSearch的变化，并且把变化后的值传给父组件
+      watch: {
+        showSearch: {
+          handler(val) {
+            this.$emit('value-change', val)
+          }
+        }
+      },
+      methods: {
+        // 所有方法都抛出到父组件里去
+        handleClick(item, row) {
+          console.log('row==',row);
+          this.$emit("fnClick", item, row, this.ids, this.selectList);
+        },
+
+        /** 多选框选中数据 */
+        handleSelectionChange(selection) {
+          this.selectList = [];
+          this.ids = [];
+          if (this.isProcessing) return;
+          this.isProcessing = true;
+          // 当选中行有关联值时，默认把所关联的的行选中
+          selection.forEach(res => {
+            if (res && res.relevance) {
+              let selArr = [res];
+              Object.keys(res.relevance).forEach(item => {
+                res.relevance[item].forEach(val => {
+                  this.tableList.some(tabVal => {
+                    if (tabVal[item] === val) {
+                      selArr.push(tabVal);
+                      return true;
+                    }
+                  });
+                });
+              });
+              this.selectList = this.selectList.concat(selArr);
+              this.ids = this.ids.concat(selArr.map(item => item.id));
+            } else {
+              if (!this.ids.includes(res.id)) {
+                this.selectList = this.selectList.concat(res);
+                this.ids = this.ids.concat(res.id);
+              }
+            }
+            this.isProcessing = false;
+          });
+          this.selectList.forEach(val => {
+            this.$refs.selChangeList.toggleRowSelection(val,true);
+          });
+          console.log('selectList==',this.selectList);
+        },
+        // 提供给父组件调用的方法：返回当前表格的选中数据
+        getSelectedData() {
+          return {
+            tableKey: this.config.tableKey, // 表格唯一标识
+            data: [...this.selectList] // 选中的数据
+          };
+        },
+        renderList() {
+          this.$emit("fnRenderList");
+        },
+      }
+    }
+</script>