py-test-components 1.0.0 → 1.0.2

package/dist/py-component.js.LICENSE.txt

@@ -4,12 +4,6 @@
  * Released under the MIT License.
  */
 
-/**
-  * vue-custom-element v3.3.0
-  * (c) 2021 Karol Fabjańczuk
-  * @license MIT
-  */
-
 /**
  * @license
  * Lodash <https://lodash.com/>

package/package.json

@@ -1,42 +1,29 @@
-{
-  "name": "py-test-components",
-  "version": "1.0.0",
-  "description": "跨框架组件库 - Vue 2 组件可被 React 使用",
-  "main": "dist/py-component.js",
-  "module": "dist/py-component.esm.js",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "webpack --mode=production",
-    "dev": "webpack --mode=development --watch",
-    "clean": "rimraf dist"
-  },
-  "dependencies": {
-    "element-ui": "^2.15.14",
-    "vue": "^2.7.16",
-    "vue-custom-element": "^3.3.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.23.0",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^6.8.1",
-    "rimraf": "^5.0.5",
-    "style-loader": "^3.3.3",
-    "vue-loader": "^15.10.1",
-    "vue-template-compiler": "^2.7.16",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "keywords": [
-    "vue",
-    "react",
-    "web-components",
-    "component-library",
-    "element-ui"
-  ],
-  "author": "",
-  "license": "MIT"
-}
+{
+  "name": "py-test-components",
+  "version": "1.0.2",
+  "description": "Vue2 + ElementUI component library for Vue and React",
+  "main": "dist/py-component.js",
+  "module": "dist/py-component.esm.js",
+  "scripts": {
+    "dev": "webpack --mode development --watch",
+    "build": "webpack --mode production"
+  },
+  "keywords": ["vue", "elementui", "component", "library"],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "vue": "^2.7.0",
+    "element-ui": "^2.15.0",
+    "vue-custom-element": "^3.3.0"
+  },
+  "devDependencies": {
+    "webpack": "^5.0.0",
+    "webpack-cli": "^5.0.0",
+    "vue-loader": "^15.10.0",
+    "vue-template-compiler": "^2.7.0",
+    "css-loader": "^6.0.0",
+    "style-loader": "^3.0.0",
+    "file-loader": "^6.0.0",
+    "url-loader": "^4.0.0"
+  }
+}

package/src/components/PyTable.vue

@@ -1,280 +1,40 @@
-<template>
-  <div class="py-table">
-    <el-card class="table-card">
-      <div slot="header" class="card-header">
-        <span class="title">{{ config.title || '数据表格' }}</span>
-        <div class="actions">
-          <el-button 
-            v-if="config.showRefresh !== false" 
-            type="text" 
-            @click="refreshData"
-            icon="el-icon-refresh"
-          >
-            刷新
-          </el-button>
-        </div>
-      </div>
-      
-      <el-table
-        :data="tableData"
-        :stripe="config.stripe !== false"
-        :border="config.border === true"
-        :height="config.height"
-        v-loading="loading"
-        @selection-change="handleSelectionChange"
-      >
-        <!-- 选择列 -->
-        <el-table-column
-          v-if="config.showSelection"
-          type="selection"
-          width="55"
-        />
-        
-        <!-- 序号列 -->
-        <el-table-column
-          v-if="config.showIndex !== false"
-          type="index"
-          label="序号"
-          width="60"
-        />
-        
-        <!-- 动态列 -->
-        <el-table-column
-          v-for="column in columns"
-          :key="column.prop"
-          :prop="column.prop"
-          :label="column.label"
-          :width="column.width"
-          :min-width="column.minWidth"
-          :sortable="column.sortable"
-        >
-          <template slot-scope="scope">
-            <!-- 自定义渲染 -->
-            <span v-if="column.formatter">
-              {{ column.formatter(scope.row[column.prop], scope.row) }}
-            </span>
-            <span v-else-if="column.type === 'date'">
-              {{ formatDate(scope.row[column.prop]) }}
-            </span>
-            <span v-else-if="column.type === 'status'">
-              <el-tag :type="getStatusType(scope.row[column.prop])">
-                {{ scope.row[column.prop] }}
-              </el-tag>
-            </span>
-            <span v-else>
-              {{ scope.row[column.prop] }}
-            </span>
-          </template>
-        </el-table-column>
-        
-        <!-- 操作列 -->
-        <el-table-column
-          v-if="config.showActions !== false"
-          label="操作"
-          width="150"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <el-button
-              type="text"
-              size="small"
-              @click="handleEdit(scope.row)"
-            >
-              编辑
-            </el-button>
-            <el-button
-              type="text"
-              size="small"
-              @click="handleDelete(scope.row)"
-            >
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      
-      <!-- 分页 -->
-      <div v-if="config.pagination !== false" class="pagination-wrapper">
-        <el-pagination
-          :current-page="currentPage"
-          :page-size="pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handlePageChange"
-        />
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import store from '../store';
-import { tableApi } from '../utils/api';
-
-export default {
-  name: 'PyTable',
-
-  props: {
-    propData: {
-      default: null
-    }
-  },
-
-  data() {
-    return {
-      tableData: [],
-      loading: false,
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      selectedRows: []
-    };
-  },
-
-  computed: {
-    config() {
-      return this.propData || {};
-    },
-
-    columns() {
-      return this.config.columns || [];
-    }
-  },
-
-  mounted() {
-    this.loadData();
-    
-    // 监听 store 变化（如果需要）
-    const baseUrl = store.get('baseUrl');
-    if (baseUrl) {
-      console.log('[PyTable] baseUrl from store:', baseUrl);
-    }
-  },
-
-  methods: {
-    // 加载数据
-    async loadData() {
-      if (this.config.data) {
-        // 使用传入的数据
-        this.tableData = this.config.data;
-        this.total = this.tableData.length;
-        return;
-      }
-
-      // 通过 API 获取数据
-      if (this.config.api !== false) {
-        try {
-          this.loading = true;
-          const params = {
-            page: this.currentPage,
-            size: this.pageSize,
-            ...this.config.params
-          };
-          
-          const res = await tableApi.getData(params);
-          
-          // 支持自定义数据路径
-          const dataPath = this.config.dataPath || 'data';
-          const totalPath = this.config.totalPath || 'total';
-          
-          this.tableData = this.getPathValue(res, dataPath) || [];
-          this.total = this.getPathValue(res, totalPath) || 0;
-        } catch (error) {
-          console.error('[PyTable] 加载数据失败:', error);
-          this.$message.error('加载数据失败');
-        } finally {
-          this.loading = false;
-        }
-      }
-    },
-
-    // 获取对象路径值
-    getPathValue(obj, path) {
-      return path.split('.').reduce((o, p) => o && o[p], obj);
-    },
-
-    // 刷新数据
-    refreshData() {
-      this.currentPage = 1;
-      this.loadData();
-      this.$emit('refresh');
-    },
-
-    // 分页大小变化
-    handleSizeChange(size) {
-      this.pageSize = size;
-      this.loadData();
-      this.$emit('size-change', size);
-    },
-
-    // 页码变化
-    handlePageChange(page) {
-      this.currentPage = page;
-      this.loadData();
-      this.$emit('page-change', page);
-    },
-
-    // 选择变化
-    handleSelectionChange(rows) {
-      this.selectedRows = rows;
-      this.$emit('selection-change', rows);
-    },
-
-    // 编辑
-    handleEdit(row) {
-      this.$emit('edit', row);
-    },
-
-    // 删除
-    handleDelete(row) {
-      this.$emit('delete', row);
-    },
-
-    // 格式化日期
-    formatDate(value) {
-      if (!value) return '';
-      const date = new Date(value);
-      return date.toLocaleDateString('zh-CN');
-    },
-
-    // 获取状态类型
-    getStatusType(status) {
-      const statusMap = {
-        'active': 'success',
-        'pending': 'warning',
-        'disabled': 'info',
-        'error': 'danger'
-      };
-      return statusMap[status] || '';
-    }
-  }
-};
-</script>
-
-<style scoped>
-.py-table {
-  width: 100%;
-}
-
-.table-card {
-  margin-bottom: 20px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.pagination-wrapper {
-  margin-top: 20px;
-  text-align: right;
-}
-</style>
+<template>
+  <div class="py-table">
+    <el-table :data="tableData" v-bind="config">
+      <el-table-column
+        v-for="(col, index) in columns"
+        :key="index"
+        :prop="col.prop"
+        :label="col.label"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PyTable',
+  props: {
+    propData: {
+      default: null,
+    },
+  },
+  computed: {
+    tableData() {
+      return this.propData?.data || [];
+    },
+    columns() {
+      return this.propData?.columns || [];
+    },
+    config() {
+      return this.propData?.config || {};
+    },
+  },
+};
+</script>
+
+<style scoped>
+.py-table {
+  width: 100%;
+}
+</style>