py-test-components 1.0.0

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

@@ -0,0 +1,35 @@
+/*!
+ * Vue.js v2.7.16
+ * (c) 2014-2023 Evan You
+ * Released under the MIT License.
+ */
+
+/**
+  * vue-custom-element v3.3.0
+  * (c) 2021 Karol Fabjańczuk
+  * @license MIT
+  */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright JS Foundation and other contributors <https://js.foundation/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @param {?boolean} capture Check if the capture phase is supported.
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */

package/package.json

@@ -0,0 +1,42 @@
+{
+  "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"
+}

package/src/components/PyTable.vue

@@ -0,0 +1,280 @@
+<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>