refactor(table): 重构表格组件使用方式

- 移除 CuteDragTable 和 CuteSimpleTable 组件中的 columns 和 operateColumn 属性- 使用 slot 方式插入表格列和操作列
- 更新表格组件的文档注释
- 调整示例代码以适应新的表格组件用法

cutejava-front/src/views/components/dev/CuteDragTable.vue

@@ -14,35 +14,17 @@
       @selection-change="onTableSelectionChange"
     >
       <el-table-column v-if="mode === 'multi'" type="selection" width="55" />
-      <el-table-column
+      <slot />
-        v-for="(column, index) in crud.columns"
+      <el-pagination
-        :key="index"
+        :current-page="pageProps.current"
-        :label="column.label"
+        :page-sizes="[10, 20, 50]"
-        :prop="column.prop"
+        :page-size="pageProps.pageSize"
-        :fixed="column.fixed ? column.fixed:false"
+        layout="total, sizes, prev, pager, next"
-        :formatter="column.formatter ? column.formatter : null"
+        :total="pageProps.total"
-        :width="column.width ? column.width:null"
+        @size-change="(size) => crud.onPageChange(pageProps.current, size, pageProps.total)"
-        :min-width="column.width ? column.width:null"
+        @current-change="(current) => crud.onPageChange(current, pageProps.pageSize, pageProps.total)"
-        :show-overflow-tooltip="true"
       />
-      <el-table-column
+    </el-table></div>
-        v-if="crud.operateColumn"
-        :width="crud.operateColumn.width"
-        label="操作"
-        :formatter="crud.operateColumn.formatter"
-        :fixed="crud.operateColumn.fixed"
-      />
-    </el-table>
-    <el-pagination
-      :current-page="pageProps.current"
-      :page-sizes="[10, 20, 50]"
-      :page-size="pageProps.pageSize"
-      layout="total, sizes, prev, pager, next"
-      :total="pageProps.total"
-      @size-change="(size) => crud.onPageChange(pageProps.current, size, pageProps.total)"
-      @current-change="(current) => crud.onPageChange(current, pageProps.pageSize, pageProps.total)"
-    />
-  </div>
 </template>
 
 <script>
@@ -56,16 +38,6 @@ export default {
       required: true,
       default: null
     },
-    columns: {
-      type: Array,
-      required: true,
-      default: null
-    },
-    operateColumn: {
-      type: [Object, Boolean],
-      required: true,
-      default: null
-    },
     fetch: {
       type: Function,
       required: false,
@@ -103,8 +75,6 @@ export default {
       crud: {
         loading: false,
         primaryKey: this.primaryKey ? this.primaryKey : 'id',
-        columns: this.columns && this.columns.length > 0 ? this.columns : [],
-        operateColumn: this.operateColumn,
         fetchUrl: null,
         dataSource: [],
         onPageChange: (currentPage, pageSize) => {

cutejava-front/src/views/components/dev/CuteSimpleTable.vue

@@ -14,24 +14,7 @@
       @selection-change="onTableSelectionChange"
     >
       <el-table-column v-if="mode === 'multi'" type="selection" width="55" />
-      <el-table-column
+      <slot />
-        v-for="(column, index) in crud.columns"
-        :key="index"
-        :label="column.label"
-        :prop="column.prop"
-        :fixed="column.fixed ? column.fixed:false"
-        :formatter="column.formatter ? column.formatter : null"
-        :width="column.width ? column.width:null"
-        :min-width="column.width ? column.width:null"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        v-if="crud.operateColumn"
-        :width="crud.operateColumn.width"
-        label="操作"
-        :formatter="crud.operateColumn.formatter"
-        :fixed="crud.operateColumn.fixed"
-      />
     </el-table>
     <el-pagination
       :current-page="pageProps.current"
@@ -55,16 +38,6 @@ export default {
       required: true,
       default: null
     },
-    columns: {
-      type: Array,
-      required: true,
-      default: null
-    },
-    operateColumn: {
-      type: [Object, Boolean],
-      required: true,
-      default: null
-    },
     fetch: {
       type: Function,
       required: false,
@@ -102,8 +75,6 @@ export default {
       crud: {
         loading: false,
         primaryKey: this.primaryKey ? this.primaryKey : 'id',
-        columns: this.columns && this.columns.length > 0 ? this.columns : [],
-        operateColumn: this.operateColumn,
         fetchUrl: null,
         dataSource: [],
         onPageChange: (currentPage, pageSize) => {

cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue

@@ -24,8 +24,6 @@
     <!-- params-transform: 组装查询参数 -->
     <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
     <!-- primary-key: 主键 -->
-    <!-- columns: 表格列 -->
-    <!-- operate-column: 表格操作列 -->
     <!-- data-source: 数据源。当data-source不为空时，以data-source的数据为主 -->
     <!-- mode: 模式。不传默认，传multi为多选 -->
     <!-- @selection-change: 当且仅当mode为multi时启用 -->
@@ -34,10 +32,21 @@
       :fetch="curd.fetch"
       :params-transform="curd.paramsTransform"
       primary-key="id"
-      :columns="curd.columns"
-      :operate-column="curd.operateColumn"
       :page-props="curd.pageProps"
-    />
+    >
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="description" label="描述" />
+      <el-table-column prop="createTime" label="创建时间" :formatter="FormatRowDateTimeStr" />
+      <el-table-column prop="createBy" label="创建人" />
+      <el-table-column label="操作" width="150" min-width="150" fixed="right">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
+            <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </cute-drag-table>
   </div>
 </template>
 
@@ -71,28 +80,6 @@ export default {
         fetch: async(queryParams) => {
           return DictService.queryPageDict(queryParams)
         },
-        columns: [
-          { prop: 'name', label: '名称' },
-          { prop: 'description', label: '描述' },
-          { prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
-          { prop: 'createBy', label: '创建人' }
-        ],
-        operateColumn: {
-          width: '150',
-          fixed: 'right',
-          formatter: (row, column, cellValue, index) => {
-            return (<div>
-              <el-button type='text' onClick={() => {
-                console.log('编辑')
-              }}>编辑
-              </el-button>
-              <el-button type='text' onClick={() => {
-                console.log('删除')
-              }}>删除
-              </el-button>
-            </div>)
-          }
-        },
         pageProps: {
           current: 1,
           pageSize: 10,
@@ -105,6 +92,7 @@ export default {
     this.initData()
   },
   methods: {
+    FormatRowDateTimeStr,
     initData() {
       this.$refs.instance.refresh()
     },
@@ -124,6 +112,12 @@ export default {
       } catch (e) {
         console.error(e)
       }
+    },
+    onTableEditClick(row) {
+      console.log('编辑', row)
+    },
+    onTableDeleteClick(row) {
+      console.log('删除', row)
     }
   }
 }

cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue

@@ -28,8 +28,6 @@
     <!-- params-transform: 组装查询参数 -->
     <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
     <!-- primary-key: 主键 -->
-    <!-- columns: 表格列 -->
-    <!-- operate-column: 表格操作列 -->
     <!-- mode: 模式。不传默认，传multi为多选 -->
     <!-- @selection-change: 当且仅当mode为multi时启用 -->
     <cute-simple-table
@@ -37,10 +35,21 @@
       :fetch="curd.fetch"
       :params-transform="curd.paramsTransform"
       primary-key="id"
-      :columns="curd.columns"
-      :operate-column="curd.operateColumn"
       :page-props="curd.pageProps"
-    />
+    >
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="description" label="描述" />
+      <el-table-column prop="createTime" label="创建时间" :formatter="FormatRowDateTimeStr" />
+      <el-table-column prop="createBy" label="创建人" />
+      <el-table-column label="操作" width="150" min-width="150" fixed="right">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
+            <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </cute-simple-table>
     <cute-form-dialog ref="dialogForm" :model="createFormModel" :rules="createFormRules" title="演示:表单对话框" @submit="onDialogFormSubmit">
       <el-form-item label="活动名称" prop="name" label-width="100px">
         <el-input v-model="createFormModel.name" placeholder="请输入" style="width: 100%" />
@@ -145,6 +154,7 @@ export default {
     this.initData()
   },
   methods: {
+    FormatRowDateTimeStr,
     initData() {
       this.$refs.instance.refresh()
     },
@@ -176,6 +186,12 @@ export default {
     },
     onDrawerFormSubmit(values) {
       console.log('onDrawerFormSubmit', values)
+    },
+    onTableEditClick(row) {
+      console.log('编辑', row)
+    },
+    onTableDeleteClick(row) {
+      console.log('删除', row)
     }
   }
 }