@xjw_/vue2-npm-system 1.0.20 → 1.0.21

package/lib/assets/svg/print.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775015498486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5570" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M291.5 925.2c-22.1 0-40-17.9-40-40V721.6H128.8c-16.6 0-30-13.4-30-30V384.8c0-59.5 48.3-107.8 107.8-107.8h44.9V138.8c0-22.1 17.9-40 40-40h441c22.1 0 40 17.9 40 40V277h44.9c59.5 0 107.8 48.3 107.8 107.8v306.8c0 16.6-13.4 30-30 30H772.5v163.6c0 22.1-17.9 40-40 40h-441z m418.1-62.9v-217H314.4v217h395.2z m152.7-203.6V384.8c0-24.8-20.1-44.9-44.9-44.9H206.6c-24.8 0-44.9 20.1-44.9 44.9v273.9h89.8v-70.3c0-3.3 2.7-6 6-6h509c3.3 0 6 2.7 6 6v70.3h89.8zM709.6 277V161.7H314.4V277h395.2zM283 467.1c-17.3 0-31.4-14.1-31.4-31.4s14.1-31.4 31.4-31.4h229c17.3 0 31.4 14.1 31.4 31.4s-14.1 31.4-31.4 31.4H283z" p-id="5571"></path></svg>

package/lib/assets/svg/upload.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775015534186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7365" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 96a15.36 15.36 0 0 1 11.328 4.672l203.648 203.648a16 16 0 0 1 2.56 19.2l-2.56 3.456-45.248 45.248a16 16 0 0 1-19.2 2.56l-3.456-2.56L560 273.216l0.064 446.784a16 16 0 0 1-16 16h-64a16 16 0 0 1-16-16V273.28L364.864 372.224a16 16 0 0 1-22.656 0l-45.248-45.248a16 16 0 0 1 0-22.656l203.648-203.648A16.64 16.64 0 0 1 512 96z" p-id="7366"></path><path d="M142.656 544H72.64l-2.688 0.256a7.488 7.488 0 0 0-5.504 4.416L64 550.976v333.056l0.384 5.952a43.456 43.456 0 0 0 36.416 37.504l6.4 0.512H916.48l5.888-0.32a43.328 43.328 0 0 0 37.376-36.672l0.448-6.528 0.064-332.608L960 549.376a7.232 7.232 0 0 0-4.928-4.928l-2.56-0.384L882.56 544l-2.752 0.256a7.488 7.488 0 0 0-5.44 4.416l-0.448 2.304v282.432l-8.32 7.552H158.656l-8.32-7.552v-281.6l-0.192-2.432a7.232 7.232 0 0 0-4.928-4.928l-2.56-0.384z" p-id="7367"></path></svg>

package/lib/components/XPagination.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="x-pagination">
+    <el-pagination
+      :current-page="internalCurrentPage"
+      :page-size="internalPageSize"
+      :total="xTotal"
+      :page-sizes="xPageSizes"
+      :layout="pagerLayout"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XPagination',
+  props: {
+    // 当前页码
+    xCurrentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条数
+    xPageSize: {
+      type: Number,
+      default: 20
+    },
+    // 总条数
+    xTotal: {
+      type: Number,
+      default: 0
+    },
+    // 分页大小选项
+    xPageSizes: {
+      type: Array,
+      default: () =>[20,50,100,200,500,1000]
+    },
+    // 分页布局配置
+    xLayouts: {
+      type: Array,
+      default: () => ['total', 'sizes', 'prev', 'pager', 'next', 'jumper']
+    }
+  },
+  data() {
+    return {
+      internalCurrentPage: this.xCurrentPage,
+      internalPageSize: this.xPageSize
+    }
+  },
+  computed: {
+    // 将数组布局配置转换为 el-pagination 的 layout 字符串
+    pagerLayout() {
+      if (!this.xLayouts || !Array.isArray(this.xLayouts)) {
+        return 'total, sizes, prev, pager, next, jumper'
+      }
+      // 将大写的布局名称转换为小写
+      return this.xLayouts.map(item => {
+        if (typeof item === 'string') {
+          return item.toLowerCase()
+        }
+        return item
+      }).join(', ')
+    }
+  },
+  watch: {
+    xCurrentPage(val) {
+      this.internalCurrentPage = val
+    },
+    xPageSize(val) {
+      this.internalPageSize = val
+    }
+  },
+  methods: {
+    // 页码改变
+    handleCurrentChange(page) {
+      this.internalCurrentPage = page
+      this.$emit('update-page', this.internalCurrentPage, this.internalPageSize)
+    },
+    
+    // 每页条数改变
+    handleSizeChange(size) {
+      this.internalPageSize = size
+      this.internalCurrentPage = 1
+      this.$emit('update-page',this.internalCurrentPage,this.internalPageSize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-pagination {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    border: 1px solid #EAEFFE;
+    justify-content: flex-end;
+    padding: 0 16px 0 0;
+  }
+}
+</style>

package/lib/components/XReportTable.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="x-report-table">
+    <!-- 报表标题和操作按钮 -->
+    <div class="report-header">
+      <h2 class="report-title">{{ xReportTitle }}</h2>
+      <div class="report-actions">
+        <div class="h-align-center h-cursor-pointer" @click="printReport">
+          <svg-icon icon-class="print" class-name="h-t-primary svg-icon-22" ></svg-icon ><span class="h-ml-8">打印</span>
+        </div>
+        <div class="h-align-center h-cursor-pointer" @click="handleExport">
+          <svg-icon icon-class="upload" class-name="h-t-primary svg-icon-22" ></svg-icon><span class="h-ml-8">导出</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 页头信息 -->
+    <div class="x-t-4-14-22 h-pb-12" ref="reportHeader">
+      <div class="h-flex h-justify-between">
+        <div v-if="xOrganizationName">
+          <span class="">制表单位：</span>
+          <span class="">{{ xOrganizationName }}</span>
+        </div>
+        <div v-if="xDateRange">
+          <span class="">日期范围：</span>
+          <span class="">{{ xDateRange }}</span>
+        </div>
+        <div v-if="xCustomHeader1">
+          <span class="">{{ xCustomHeader1Label }}：</span>
+          <span class="">{{ xCustomHeader1 }}</span>
+        </div>
+        <div>
+          <span class="">{{ xCustomHeader2Label }}{{xCustomHeader2Label ? '：':''}}</span>
+          <span class="">{{ xCustomHeader2 }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格主体 -->
+    <div class="report-body">
+      <x-vxe-table
+          ref="vxeTable"
+          :x-sub-height="xSubHeight"
+          :x-show-toolbar="xShowToolbar"
+          :x-show-pagination="xShowPagination"
+          :data="xData"
+          :x-is-show-bg="false"
+          :x-page-size="xPageSize"
+          :x-current-page="xCurrentPage"
+          :x-total="xTotal"
+          @change-page="handlePageChange"
+      >
+        <template #buttons>
+          <slot name="buttons"></slot>
+        </template>
+        <slot></slot>
+      </x-vxe-table>
+    </div>
+
+    <!-- 页尾信息 -->
+    <div class="x-t-4-14-22 h-pt-12" ref="reportFooter">
+      <div class="h-flex h-justify-between">
+        <div v-if="xAuditorName">
+          <span class="">审核人员：</span>
+          <span class="">{{ xAuditorName }}</span>
+        </div>
+        <div v-if="xCreatorName">
+          <span class="">制表人员：</span>
+          <span class="">{{ xCreatorName }}</span>
+        </div>
+        <div v-if="xCustomFooterField">
+          <span class="">{{ xCustomFooterFieldLabel }}：</span>
+          <span class="">{{ xCustomFooterField }}</span>
+        </div>
+        <div>
+          <span class="">打印日期：</span>
+          <span class="">{{ formattedPrintDate }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import XVxeTable from './XVxeTable.vue";
+import SvgIcon from "./SvgIcon.vue";
+
+export default {
+  name: 'XReportTable',
+  components: {SvgIcon, XVxeTable},
+  props: {
+    // 报表标题
+    xReportTitle: {
+      type: String,
+      default: ''
+    },
+    // 表格数据
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    // 制表单位
+    xOrganizationName: {
+      type: String,
+      default: ''
+    },
+    // 日期范围
+    xDateRange: {
+      type: String,
+      default: ''
+    },
+    // 自定义页头字段
+    xCustomHeader1: {
+      type: String,
+      default: ''
+    },
+    xCustomHeader1Label: {
+      type: String,
+      default: ''
+    },
+    xCustomHeader2: {
+      type: String,
+      default: ''
+    },
+    xCustomHeader2Label: {
+      type: String,
+      default: ''
+    },
+    // 审核人员
+    xAuditorName: {
+      type: String,
+      default: ''
+    },
+    // 制表人员
+    xCreatorName: {
+      type: String,
+      default: ''
+    },
+    // 自定义页尾字段
+    xCustomFooterField: {
+      type: String,
+      default: ''
+    },
+    xCustomFooterFieldLabel: {
+      type: String,
+      default: ''
+    },
+    // 打印日期
+    xPrintDate: {
+      type: String,
+      default: ''
+    },
+    // 是否显示打印按钮
+    xShowPrint: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示导出按钮
+    xShowExport: {
+      type: Boolean,
+      default: true
+    },
+    xSubHeight: {
+      type: String,
+      default: '230px'
+    },
+    xShowToolbar: {
+      type: Boolean,
+      default: false
+    },
+    xShowPagination: {
+      type: Boolean,
+      default: true
+    },
+    // 分页大小
+    xPageSize: {
+      type: Number,
+      default: 20
+    },
+    xTotal: {
+      type: Number,
+      default: 0
+    },
+    // 当前页码
+    xCurrentPage: {
+      type: Number,
+      default: 1
+    },
+    // 是否使用回调打印
+    xUsePrintCallback: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      currentDate: new Date()
+    }
+  },
+  computed: {
+    // 如果没有传入打印日期，使用当前日期
+    formattedPrintDate() {
+      if (this.xPrintDate) {
+        return this.xPrintDate
+      }
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    }
+  },
+  methods: {
+    // 处理分页变化
+    handlePageChange(page) {
+      this.$emit('change-page', page)
+    },
+    printReport(){
+      if (this.xUsePrintCallback) {
+        // 如果启用回调，触发父组件事件
+        this.$emit('printReport')
+      } else {
+        // 否则执行默认打印逻辑
+        this.handlePrint()
+      }
+    },
+    // 获取 VXE Table 实例
+    getTableInstance() {
+      // XVxeTable 组件的 ref 是 vxeTable，需要访问其内部的 VXE Table 实例
+      if (this.$refs.vxeTable) {
+        return this.$refs.vxeTable.$refs.vxeTable
+      }
+      return null
+    },
+    
+    // 打印
+    handlePrint() {
+      const tableEl = this.getTableInstance()
+      if (!tableEl) {
+        console.error('VXE Table instance not found')
+        this.$message.error('表格组件未加载完成，请稍后再试')
+        return
+      }
+      
+      // 获取表头和表尾的真实 DOM 元素
+      const headerEl = this.$refs.reportHeader
+      const footerEl = this.$refs.reportFooter
+      
+      if (!headerEl || !footerEl) {
+        console.error('Report header or footer element not found')
+        this.$message.error('报表元素未加载完成，请稍后再试')
+        return
+      }
+      
+      // 克隆节点并保留样式
+      const headerHtml = headerEl.innerHTML
+      const footerHtml = footerEl.innerHTML
+      
+      // 调用 VXE Table 打印方法
+      if (typeof tableEl.print === 'function') {
+        tableEl.print({
+          sheetName: this.xReportTitle || '报表',
+          style: `
+            table td, table th {
+              border: 1px solid #000!important;
+            }
+            .table-head{
+              text-align: center;
+              font-size: 20px;
+              line-height: 40px;
+              font-weight: bold;
+            }
+            .table-head-2{
+              width: 33%;
+            }
+            .table-head-1{
+              display: flex;
+              line-height: 25px;
+            }
+            .btn-print{
+              text-align: center;
+              margin-top: 10px;
+            }
+            .x-t-4-14-22 {
+              font-weight: 400;
+              font-size: 14px;
+              color: #333333;
+              line-height: 22px;
+            }
+            .h-flex {
+              display: flex;
+            }
+            .h-justify-between {
+              justify-content: space-between;
+            }
+            .h-pb-12 {
+              padding-bottom: 12px;
+            }
+            .h-pt-12 {
+              padding-top: 12px;
+            }`,
+          beforePrintMethod: ({ content }) => {
+            // 拦截打印之前，返回自定义的 html 内容
+            if (this.xReportTitle) {
+              return `<div class="table-head">${this.xReportTitle}</div>` + headerHtml + content + footerHtml
+            }
+            return headerHtml + content + footerHtml
+          }
+        })
+      } else {
+        console.error('VXE Table print method not found')
+        this.$message.error('打印功能暂不可用')
+      }
+    },
+    
+    // 导出
+    handleExport() {
+      this.$emit('export')
+      // 可以在这里实现导出逻辑
+    },
+    
+    // 清除复选
+    clearCheckbox() {
+      this.$refs.vxeTable.clearCheckbox()
+    },
+    
+    // 清除排序
+    clearSort() {
+      this.$refs.vxeTable.clearSort()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.x-report-table {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);
+  border-radius: 4px;
+  backdrop-filter: blur(2px);
+  padding: 20px;
+
+  .report-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 12px;
+
+    .report-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: bold;
+      color: #303133;
+      text-align: center;
+      flex: 1;
+    }
+
+    .report-actions {
+      display: flex;
+      gap: 20px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #333333;
+      line-height: 22px;
+    }
+  }
+}
+.x-t-4-14-22 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+  line-height: 22px;
+}
+.table-head {
+  text-align: center;
+  font-size: 20px;
+  line-height: 40px;
+  font-weight: bold;
+}
+</style>

package/lib/components/XVxePager.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="x-vxe-pager">
+    <el-pagination
+      :current-page="internalCurrentPage"
+      :page-size="internalPageSize"
+      :total="xTotal"
+      :page-sizes="xPageSizes"
+      :layout="pagerLayout"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XVxePager',
+  props: {
+    // 代理配置（用于服务端加载）
+    xProxyConfig: {
+      type: Object,
+      default: null
+    },
+    // 当前页码
+    xCurrentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条数
+    xPageSize: {
+      type: Number,
+      default: 20
+    },
+    // 总条数
+    xTotal: {
+      type: Number,
+      default: 0
+    },
+    // 分页大小选项
+    xPageSizes: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    },
+    // 分页布局配置
+    xLayouts: {
+      type: Array,
+      default: () => ['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'Home']
+    },
+    // 尺寸：large、medium、small、mini
+    xSize: {
+      type: String,
+      default: 'medium'
+    },
+    // 是否显示加载中
+    xLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalCurrentPage: this.xCurrentPage,
+      internalPageSize: this.xPageSize
+    }
+  },
+  computed: {
+    // 将数组布局配置转换为 el-pagination 的 layout 字符串
+    pagerLayout() {
+      if (Array.isArray(this.xLayouts)) {
+        return this.xLayouts.join(', ')
+      }
+      return this.xLayouts || 'total, sizes, prev, pager, next, jumper'
+    }
+  },
+  watch: {
+    xCurrentPage(val) {
+      this.internalCurrentPage = val
+    },
+    xPageSize(val) {
+      this.internalPageSize = val
+    }
+  },
+  methods: {
+    // 页码改变
+    handleCurrentChange(page) {
+      this.internalCurrentPage = page
+      this.$emit('update-page', this.internalCurrentPage, this.internalPageSize)
+    },
+    
+    // 每页条数改变
+    handleSizeChange(size) {
+      this.internalPageSize = size
+      this.internalCurrentPage = 1
+      this.$emit('update-page',this.internalCurrentPage,this.internalPageSize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>