@xjw_/vue2-npm-system 1.0.19 → 1.0.21

package/lib/components/XVxeTable.vue

@@ -0,0 +1,417 @@
+<template>
+  <div :class="{'x-vxe-table-bg':xIsShowBg}" class="x-vxe-table" :style="{ height: `calc(100vh - ${xSubHeight})` }">
+    <vxe-toolbar
+        v-if="xShowToolbar"
+        ref="xToolbar"
+        class="h-plr-12"
+        :refresh="{ query: getList }"
+        perfect
+        export
+        print
+        custom
+    >
+      <template #buttons>
+        <slot name="buttons"></slot>
+      </template>
+    </vxe-toolbar>
+    <div :style="{height: xHeight}">
+      <vxe-table
+          ref="vxeTable"
+          :print-config="{}"
+          :export-config="{}"
+          :data="xShowFooter && xFooterData.length < 1 ? tableData.slice(0, -1) : tableData"
+          border
+          :size="xSize"
+          :stripe="xStripe"
+          height="100%"
+          align="center"
+          resizable
+          :max-height="xMaxHeight"
+          :show-header="xShowHeader"
+          :show-overflow="xShowOverflow"
+          :custom-config="{}"
+          :header-cell-class-name="xHeaderCellClassName"
+          :cell-class-name="xCellClassName"
+          :row-class-name="xRowClassName"
+          :show-footer="xShowFooter"
+          :footer-cell-class-name="xFooterCellClassName"
+          :sort-config="xSortConfig"
+          :filter-config="xFilterConfig"
+          :checkbox-config="xCheckboxConfig"
+          :radio-config="xRadioConfig"
+          :proxy-config="xProxyConfig"
+          :loading="xLoading"
+          :empty-text="xEmptyText"
+          :footer-method="internalFooterMethod"
+          @checkbox-change="handleCheckboxChange"
+          @checkbox-all="handleCheckboxAll"
+          @radio-change="handleRadioChange"
+          @sort-change="handleSortChange"
+          @current-change="handleCurrentChange"
+          @edit-closed="handleEditClosed"
+          @edit-actived="handleEditActived"
+          v-on="$listeners"
+      >
+        <vxe-column
+            v-if="xIsCheckbox"
+            type="checkbox"
+            width="55"
+            fixed="left"
+        >
+        </vxe-column>
+        <!-- 序号列 -->
+        <vxe-column v-if="xShowIndex" type="seq" fixed="left" title="序号" width="60"></vxe-column>
+        <!-- 支持自定义插槽：透传父组件的默认插槽和具名插槽到 vxe-table -->
+        <slot></slot>
+      </vxe-table>
+      <!-- 分页组件 -->
+      <x-pagination
+          v-if="xShowPagination"
+          class="x-pagination"
+          @update-page="handlePageChange"
+          :x-page-size="xPageSize"
+          :x-current-page="internalCurrentPage"
+          :x-total="xTotal"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import XPagination from './XPagination'
+
+export default {
+  name: 'XVxeTable',
+  components: {
+    XPagination
+  },
+  props: {
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    xIsShowBg: {
+      type: Boolean,
+      default: true
+    },
+    // 尺寸：large、medium、small、mini
+    xSize: {
+      type: String,
+      default: 'medium'
+    },
+    // 斑马纹
+    xStripe: {
+      type: Boolean,
+      default: false
+    },
+    // 表格高度
+    xSubHeight: {
+      type: String,
+      default: '130px'
+    },
+    // 最大高度
+    xMaxHeight: {
+      type: [Number, String],
+      default: null
+    },
+    // 是否显示表头
+    xShowHeader: {
+      type: Boolean,
+      default: true
+    },
+    xShowOverflow: {
+      type: Boolean,
+      default: true
+    },
+    // 表头单元格 className
+    xHeaderCellClassName: {
+      type: [String, Function],
+      default: ''
+    },
+    // 单元格 className
+    xCellClassName: {
+      type: [String, Function],
+      default: ''
+    },
+    // 行 className
+    xRowClassName: {
+      type: [String, Function],
+      default: ''
+    },
+    // 是否显示复选框列
+    xIsCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示表尾合计行
+    xShowFooter: {
+      type: Boolean,
+      default: false
+    },
+    // 表尾合计文字
+    xShowFooterText: {
+      type: String,
+      default: ''
+    },
+    // 表尾计算方法
+    xFooterMethod: {
+      type: Function,
+      default: null
+    },
+    // 表尾单元格 className
+    xFooterCellClassName: {
+      type: [String, Function],
+      default: ''
+    },
+    // 排序配置
+    xSortConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    // 筛选配置
+    xFilterConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    // 复选框配置
+    xCheckboxConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    // 单选框配置
+    xRadioConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    // 代理配置（用于服务端加载）
+    xProxyConfig: {
+      type: Object,
+      default: null
+    },
+    // 是否显示加载中
+    xLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 空数据提示文本
+    xEmptyText: {
+      type: String,
+      default: '暂无数据'
+    },
+    // 是否显示序号列
+    xShowIndex: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示分页
+    xShowPagination: {
+      type: Boolean,
+      default: true
+    },
+    // 每页条数
+    xPageSize: {
+      type: Number,
+      default: 20
+    },
+    // 当前页码
+    xCurrentPage: {
+      type: Number,
+      default: 1
+    },
+    // 总条数
+    xTotal: {
+      type: Number,
+      default: 0
+    },
+    // 表尾合计行数据，二维数组格式
+    xFooterData: {
+      type: Array,
+      default: []
+    },
+    xShowToolbar: {
+      type: Boolean,
+      default: true
+    },
+    xSubToolbarHeight: {
+      type: Number,
+      default: 46
+    },
+    xSubPaginationHeight: {
+      type: Number,
+      default: 46
+    }
+  },
+  data() {
+    return {
+      internalCurrentPage: this.xCurrentPage,
+      internalPageSize: this.xPageSize
+    }
+  },
+  computed: {
+    // 计算表格高度：100% - (工具栏高度 + 分页高度 + 基础边距)
+    xHeight() {
+      const baseHeight = this.xIsShowBg ? 19 : 0 // 基础边距和边框高度
+      const toolbarHeight = this.xShowToolbar ? this.xSubToolbarHeight : 0
+      const paginationHeight = this.xShowPagination ? this.xSubPaginationHeight : 0
+      const totalHeight = baseHeight + toolbarHeight + paginationHeight
+      return `calc(100% - ${totalHeight}px)`
+    }
+  },
+  watch: {
+    xCurrentPage(val) {
+      this.internalCurrentPage = val
+    },
+    xPageSize(val) {
+      this.internalPageSize = val
+    }
+  },
+  methods: {
+    // 获取 VXE Table 实例
+    getTableInstance() {
+      return this.$refs.vxeTable
+    },
+    getList(){
+      this.handlePageChange(1,this.xPageSize)
+    },
+    // 复选框改变
+    handleCheckboxChange(params) {
+      this.$emit('checkbox-change', params)
+    },
+    
+    // 全选/取消全选
+    handleCheckboxAll(params) {
+      this.$emit('checkbox-all', params)
+    },
+    
+    // 获取选中的数据
+    getCheckboxRecords() {
+      return this.$refs.vxeTable.getCheckboxRecords()
+    },
+    
+    // 设置某行选中
+    setCheckboxRow(row, checked) {
+      this.$refs.vxeTable.setCheckboxRow(row, checked)
+    },
+    
+    // 切换某行选中状态
+    toggleCheckboxRow(row) {
+      this.$refs.vxeTable.toggleCheckboxRow(row)
+    },
+    
+    // 清除复选
+    clearCheckbox() {
+      this.$refs.vxeTable.clearCheckbox()
+    },
+    
+    // 单选框改变
+    handleRadioChange(params) {
+      this.$emit('radio-change', params)
+    },
+    
+    // 排序改变
+    handleSortChange(params) {
+      this.$emit('sort-change', params)
+    },
+    
+    // 当前行改变
+    handleCurrentChange(params) {
+      this.$emit('current-change', params)
+    },
+    
+    // 编辑关闭
+    handleEditClosed(params) {
+      this.$emit('edit-closed', params)
+    },
+    
+    // 激活编辑
+    handleEditActived(params) {
+      this.$emit('edit-actived', params)
+    },
+    
+    // 页码改变
+    handlePageChange(page,size) {
+      this.internalCurrentPage = page
+      this.internalPageSize = size
+      this.$emit('change-page', this.internalCurrentPage,this.internalPageSize)
+    },
+    
+    // 清除排序
+    clearSort() {
+      this.$refs.vxeTable.clearSort()
+    },
+    
+    // 滚动到指定行
+    scrollTo(row) {
+      this.$refs.vxeTable.scrollTo(row)
+    },
+    
+    // 设置当前行
+    setCurrentRow(row) {
+      this.$refs.vxeTable.setCurrentRow(row)
+    },
+    // 内部表尾合计方法
+    internalFooterMethod({ columns}) {
+      // 2. 如果传入了合计行数据，直接返回
+      if (this.xFooterData.length > 0) {
+        return this.xFooterData
+      }
+      const data = this.tableData
+      // 3. 默认逻辑：取最后一行数据进行转换（如果存在数据）
+      if (data && data.length > 0) {
+        const lastRow = data[data.length - 1]
+        const footerRow = columns.map((column, index) => {
+          if (index === 0) {
+            return this.xShowFooterText ? this.xShowFooterText : '合计'
+          }
+          // 根据列字段获取最后一行对应的值
+          if (column.property) {
+            return lastRow[column.property] || ''
+          }
+          return ''
+        })
+        return [footerRow]
+      }
+      
+      return []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vxe-toolbar.is--perfect{
+  background-color: #FFFFFF !important;
+  border: none;
+}
+.x-vxe-table {
+  position: relative;
+}
+.x-vxe-table-bg {
+  background: #FFFFFF;
+  border-radius: 4px;
+  padding: 0 20px;
+}
+
+::v-deep .vxe-table .vxe-footer--row {
+  background: #FFF2F6;
+}
+
+::v-deep .vxe-table .vxe-footer--cell.sum-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+::v-deep .vxe-table .vxe-footer--cell.footer-info {
+  font-weight: bold;
+}
+
+/*.x-pagination {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  width: calc(100% - 40px);
+  z-index: 1000;
+  background-color: #ffffff;
+}*/
+</style>

package/lib/index.js

@@ -4,21 +4,46 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "XPagination", {
+  enumerable: true,
+  get: function get() {
+    return _XPagination["default"];
+  }
+});
+Object.defineProperty(exports, "XReportTable", {
+  enumerable: true,
+  get: function get() {
+    return _XReportTable["default"];
+  }
+});
 Object.defineProperty(exports, "XSearchBar", {
   enumerable: true,
   get: function get() {
     return _XSearchBar["default"];
   }
 });
+Object.defineProperty(exports, "XVxeTable", {
+  enumerable: true,
+  get: function get() {
+    return _XVxeTable["default"];
+  }
+});
 exports["default"] = void 0;
 require("./plugins/svg-icon");
-require("./styles/x-ui.scss");
 var _XSearchBar = _interopRequireDefault(require("./components/XSearchBar"));
 var _SvgIcon = _interopRequireDefault(require("./components/SvgIcon"));
+var _XVxeTable = _interopRequireDefault(require("./components/XVxeTable"));
+var _XPagination = _interopRequireDefault(require("./components/XPagination"));
+var _XReportTable = _interopRequireDefault(require("./components/XReportTable"));
 // 导入所有组件
 
+// 注意：VXE-Table 需要使用者自行安装和引入
+// import VXETable from 'vxe-table'
+// import 'vxe-table/lib/style/index.scss'
+// Vue.use(VXETable)
+
 // 存储组件列表（对外暴露的组件）
-var components = [_XSearchBar["default"]];
+var components = [_XSearchBar["default"], _XVxeTable["default"], _XPagination["default"], _XReportTable["default"]];
 
 // 内部组件列表（不对外暴露）
 var internalComponents = [_SvgIcon["default"]];
@@ -40,5 +65,8 @@ var install = function install(Vue) {
 var _default = exports["default"] = {
   version: '1.0.0',
   install: install,
-  XSearchBar: _XSearchBar["default"]
+  XSearchBar: _XSearchBar["default"],
+  XVxeTable: _XVxeTable["default"],
+  XPagination: _XPagination["default"],
+  XReportTable: _XReportTable["default"]
 }; // 单独导出各个组件（只导出公开组件）

package/lib/styles/x-ui.scss

@@ -150,7 +150,4 @@
 
 .h-t-primary {
   color: $--color-primary;
-}
-.h-t-primary2 {
-  color: #67C23A;
 }

package/package.json

@@ -1,67 +1,67 @@
-{
-  "name": "@xjw_/vue2-npm-system",
-  "version": "1.0.19",
-  "description": "基于 Element-UI 的 Vue2 组件库，二次封装常用组件",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "dist"
-  ],
-  "scripts": {
-    "build": "npm run build:lib && npm run build:es && npm run build:umd",
-    "build:lib": "node build/build-lib.js && cross-env NODE_ENV=production babel src --out-dir lib --extensions .js --ignore **/*.vue",
-    "build:es": "node build/build-lib.js && cross-env BABEL_MODULE=es babel src --out-dir es --extensions .js --ignore **/*.vue",
-    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.config.js",
-    "dev": "webpack-dev-server --config webpack.config.js",
-    "lint": "eslint src --ext .js,.vue"
-  },
-  "keywords": [
-    "vue",
-    "element-ui",
-    "components",
-    "jc-components"
-  ],
-  "author": "your-name",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/yourusername/@xjw_/vue2-npm-system"
-  },
-  "peerDependencies": {
-    "element-ui": "2.13.2",
-    "vue": "2.6.10"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.14.0",
-    "@babel/core": "^7.14.0",
-    "@babel/eslint-parser": "^7.28.6",
-    "@babel/plugin-syntax-jsx": "^7.14.0",
-    "@babel/plugin-transform-runtime": "^7.14.0",
-    "@babel/preset-env": "^7.14.0",
-    "babel-loader": "^8.2.0",
-    "babel-plugin-component": "^1.1.1",
-    "cross-env": "^7.0.3",
-    "css-loader": "^5.2.0",
-    "eslint": "^7.25.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^4.5.2",
-    "raw-loader": "^4.0.2",
-    "sass": "^1.26.2",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "url-loader": "^4.1.1",
-    "vue": "2.6.10",
-    "vue-loader": "^15.9.0",
-    "vue-template-compiler": "2.6.10",
-    "vxe-table": "^3.2.20",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "xe-utils": "^3.2.1"
-  },
-  "dependencies": {
-    "@babel/runtime": "7.14.0"
-  }
-}
+{
+  "name": "@xjw_/vue2-npm-system",
+  "version": "1.0.21",
+  "description": "基于 Element-UI 的 Vue2 组件库，二次封装常用组件",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run build:lib && npm run build:es && npm run build:umd",
+    "build:lib": "node build/build-lib.js && cross-env NODE_ENV=production babel src --out-dir lib --extensions .js --ignore **/*.vue",
+    "build:es": "node build/build-lib.js && cross-env BABEL_MODULE=es babel src --out-dir es --extensions .js --ignore **/*.vue",
+    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+    "dev": "webpack-dev-server --config webpack.config.js",
+    "lint": "eslint src --ext .js,.vue"
+  },
+  "keywords": [
+    "vue",
+    "element-ui",
+    "components",
+    "jc-components"
+  ],
+  "author": "your-name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/@xjw_/vue2-npm-system"
+  },
+  "peerDependencies": {
+    "element-ui": "2.13.2",
+    "vue": "2.6.10"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.0",
+    "@babel/core": "^7.14.0",
+    "@babel/eslint-parser": "^7.28.6",
+    "@babel/plugin-syntax-jsx": "^7.14.0",
+    "@babel/plugin-transform-runtime": "^7.14.0",
+    "@babel/preset-env": "^7.14.0",
+    "babel-loader": "^8.2.0",
+    "babel-plugin-component": "^1.1.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.0",
+    "eslint": "^7.25.0",
+    "eslint-plugin-vue": "^7.9.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.2",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.26.2",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "vue": "2.6.10",
+    "vue-loader": "^15.9.0",
+    "vue-template-compiler": "2.6.10",
+    "vxe-table": "^3.2.20",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "xe-utils": "^3.2.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.0"
+  }
+}