gcs-ui-lib 1.2.34 → 1.2.36

package/packages/ExportPageSnapshot/index.js

@@ -1,7 +0,0 @@
-import NstcExportPageSnapshot from './src/main.vue'
-
-NstcExportPageSnapshot.install = function (Vue) {
-  Vue.component(NstcExportPageSnapshot.name, NstcExportPageSnapshot)
-}
-
-export default NstcExportPageSnapshot

package/packages/ExportPageSnapshot/src/demo/index.vue

@@ -1,352 +0,0 @@
-<template>
-  <div class="export-page-snapshot-demo">
-    <h2>{{ $l('页面快照导出示例') }}</h2>
-    <p class="export-page-snapshot-demo__desc">
-      {{ $l('切换页签后导出，仅快照当前页签内容。底部提交栏与导出按钮不会出现在快照中。') }}
-    </p>
-
-    <NstcExportPageSnapshot @success="handleExportSuccess">
-      <el-tabs v-model="activeTab" class="demo-tabs">
-        <el-tab-pane :label="$l('大表单')" name="form">
-          <div class="demo-page">
-            <div class="demo-page__header">
-              <span class="demo-page__title">{{ $l('付款申请详情') }}</span>
-              <el-tag size="mini" type="success">{{ $l('审批中') }}</el-tag>
-            </div>
-
-            <el-form
-              :model="form"
-              label-width="120px"
-              class="demo-page__form"
-            >
-              <div
-                v-for="section in formSections"
-                :key="section.title"
-                class="demo-page__section"
-              >
-                <div class="demo-page__section-title">{{ section.title }}</div>
-                <el-row :gutter="16">
-                  <el-col
-                    v-for="field in section.fields"
-                    :key="field.prop"
-                    :span="8"
-                  >
-                    <el-form-item :label="field.label">
-                      <span>{{ form[field.prop] }}</span>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </div>
-            </el-form>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane :label="$l('长列表')" name="list">
-          <div class="demo-page">
-            <div class="demo-page__header">
-              <span class="demo-page__title">{{ $l('付款明细列表') }}</span>
-              <span class="demo-page__meta">{{ $l('共') }} {{ listData.length }} {{ $l('条') }}</span>
-            </div>
-
-            <el-table
-              :data="listData"
-              border
-              size="mini"
-              style="width: 100%"
-            >
-              <el-table-column
-                type="index"
-                :label="$l('序号')"
-                width="60"
-                align="center"
-                fixed="left"
-              />
-              <el-table-column
-                v-for="col in listColumns"
-                :key="col.prop"
-                :prop="col.prop"
-                :label="col.label"
-                :min-width="col.minWidth"
-                :align="col.align"
-              />
-            </el-table>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </NstcExportPageSnapshot>
-
-    <div class="page-button-shadow flex-box flex-c flex-v">
-      <el-button type="primary">{{ $l('提交') }}</el-button>
-      <el-button>{{ $l('保存') }}</el-button>
-    </div>
-
-    <div v-if="lastExport" class="export-page-snapshot-demo__result">
-      <div class="export-page-snapshot-demo__result-title">{{ $l('最近导出') }}</div>
-      <div>{{ $l('文件名') }}：{{ lastExport.filename }}</div>
-      <div>{{ $l('导出时间') }}：{{ lastExport.ts }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import NstcExportPageSnapshot from '../main.vue'
-import { $l } from 'n20-common-lib/src/utils/i18n'
-
-const FORM_FIELD_DEFS = [
-  { prop: 'unitName', label: $l('申请单位') },
-  { prop: 'deptName', label: $l('申请部门') },
-  { prop: 'applicant', label: $l('申请人') },
-  { prop: 'payDate', label: $l('付款日期') },
-  { prop: 'currency', label: $l('币种') },
-  { prop: 'exchangeRate', label: $l('汇率') },
-  { prop: 'payeeName', label: $l('收款户名') },
-  { prop: 'payeeAccount', label: $l('收款账号') },
-  { prop: 'payeeBank', label: $l('收款开户行') },
-  { prop: 'amount', label: $l('付款金额') },
-  { prop: 'localAmount', label: $l('折本币金额') },
-  { prop: 'budgetUnit', label: $l('预算单位') },
-  { prop: 'budgetAccount', label: $l('预算科目') },
-  { prop: 'budgetCode', label: $l('预算编号') },
-  { prop: 'projectName', label: $l('项目名称') },
-  { prop: 'contractNo', label: $l('合同编号') },
-  { prop: 'invoiceNo', label: $l('发票号码') },
-  { prop: 'paymentType', label: $l('付款类型') },
-  { prop: 'urgencyLevel', label: $l('紧急程度') },
-  { prop: 'settlementMethod', label: $l('结算方式') },
-  { prop: 'purpose', label: $l('用途') },
-  { prop: 'memo', label: $l('备注') },
-  { prop: 'approver', label: $l('审批人') },
-  { prop: 'approveDate', label: $l('审批日期') },
-  { prop: 'cashFlowItem', label: $l('现金流量项') },
-  { prop: 'costCenter', label: $l('成本中心') },
-  { prop: 'businessType', label: $l('业务类型') },
-  { prop: 'sourceSystem', label: $l('来源系统') },
-  { prop: 'externalNo', label: $l('外部单号') },
-  { prop: 'attachmentCount', label: $l('附件数量') }
-]
-
-const LIST_COLUMN_DEFS = [
-  { prop: 'orderNo', label: $l('单据编号'), minWidth: 140 },
-  { prop: 'unitName', label: $l('单位名称'), minWidth: 160 },
-  { prop: 'deptName', label: $l('部门'), minWidth: 120 },
-  { prop: 'payDate', label: $l('付款日期'), minWidth: 110, align: 'center' },
-  { prop: 'currency', label: $l('币种'), minWidth: 80, align: 'center' },
-  { prop: 'amount', label: $l('金额'), minWidth: 120, align: 'right' },
-  { prop: 'localAmount', label: $l('折本币金额'), minWidth: 120, align: 'right' },
-  { prop: 'payeeName', label: $l('收款户名'), minWidth: 160 },
-  { prop: 'payeeAccount', label: $l('收款账号'), minWidth: 180 },
-  { prop: 'payeeBank', label: $l('开户行'), minWidth: 160 },
-  { prop: 'budgetAccount', label: $l('预算科目'), minWidth: 140 },
-  { prop: 'budgetCode', label: $l('预算编号'), minWidth: 180 },
-  { prop: 'projectName', label: $l('项目名称'), minWidth: 140 },
-  { prop: 'contractNo', label: $l('合同编号'), minWidth: 130 },
-  { prop: 'paymentType', label: $l('付款类型'), minWidth: 100 },
-  { prop: 'statusName', label: $l('状态'), minWidth: 90, align: 'center' },
-  { prop: 'applicant', label: $l('申请人'), minWidth: 100 },
-  { prop: 'approver', label: $l('审批人'), minWidth: 100 },
-  { prop: 'memo', label: $l('备注'), minWidth: 160 },
-  { prop: 'sourceSystem', label: $l('来源系统'), minWidth: 110 }
-]
-
-function buildFormSections() {
-  const sectionTitles = [
-    $l('基本信息'),
-    $l('收款信息'),
-    $l('预算信息'),
-    $l('审批信息')
-  ]
-  const chunkSize = Math.ceil(FORM_FIELD_DEFS.length / sectionTitles.length)
-
-  return sectionTitles.map((title, index) => ({
-    title,
-    fields: FORM_FIELD_DEFS.slice(index * chunkSize, (index + 1) * chunkSize)
-  })).filter((section) => section.fields.length)
-}
-
-function buildFormData() {
-  const values = {
-    unitName: $l('九恒星集团财务公司'),
-    deptName: $l('资金管理部'),
-    applicant: $l('张三'),
-    payDate: '2026-06-17',
-    currency: $l('人民币'),
-    exchangeRate: '1.0000',
-    payeeName: $l('北京某某科技有限公司'),
-    payeeAccount: '6222 **** **** 1234',
-    payeeBank: $l('中国工商银行北京分行'),
-    amount: '1,258,600.00',
-    localAmount: '1,258,600.00',
-    budgetUnit: $l('九恒星集团'),
-    budgetAccount: $l('固定资产购置'),
-    budgetCode: 'BGYR20250101-102-0829100-120050-CNY',
-    projectName: $l('2026年设备采购项目'),
-    contractNo: 'HT-2026-00128',
-    invoiceNo: 'INV-20260617001',
-    paymentType: $l('对外付款'),
-    urgencyLevel: $l('普通'),
-    settlementMethod: $l('银企直连'),
-    purpose: $l('2026年第二季度设备采购款'),
-    memo: $l('含服务器、网络设备及实施服务'),
-    approver: $l('李四'),
-    approveDate: '2026-06-16',
-    cashFlowItem: $l('购买商品、接受劳务支付的现金'),
-    costCenter: $l('信息技术中心'),
-    businessType: $l('资本性支出'),
-    sourceSystem: $l('付款管理'),
-    externalNo: 'PAY202606170001',
-    attachmentCount: '3'
-  }
-
-  return FORM_FIELD_DEFS.reduce((form, field) => {
-    form[field.prop] = values[field.prop] ?? '-'
-    return form
-  }, {})
-}
-
-function buildListData() {
-  const statusList = [$l('待审批'), $l('审批中'), $l('已审批'), $l('已付款')]
-
-  return Array.from({ length: 50 }, (_, index) => {
-    const rowNo = index + 1
-    const amount = ((rowNo * 1379.5) % 999999 + 1000).toFixed(2)
-
-    return LIST_COLUMN_DEFS.reduce((row, col) => {
-      const valueMap = {
-        orderNo: `PAY202606${String(rowNo).padStart(4, '0')}`,
-        unitName: $l('九恒星集团财务公司'),
-        deptName: $l('资金管理部'),
-        payDate: `2026-06-${String((rowNo % 28) + 1).padStart(2, '0')}`,
-        currency: $l('人民币'),
-        amount,
-        localAmount: amount,
-        payeeName: `${$l('供应商')}${rowNo}`,
-        payeeAccount: `6222 **** **** ${String(1000 + rowNo).slice(-4)}`,
-        payeeBank: $l('中国工商银行'),
-        budgetAccount: $l('办公费用'),
-        budgetCode: `BGYR20250101-${String(rowNo).padStart(4, '0')}`,
-        projectName: `${$l('采购项目')}${rowNo}`,
-        contractNo: `HT-2026-${String(rowNo).padStart(4, '0')}`,
-        paymentType: $l('对外付款'),
-        statusName: statusList[rowNo % statusList.length],
-        applicant: $l('张三'),
-        approver: $l('李四'),
-        memo: `${$l('第')}${rowNo}${$l('笔付款明细')}`,
-        sourceSystem: $l('付款管理')
-      }
-      row[col.prop] = valueMap[col.prop] ?? '-'
-      return row
-    }, {})
-  })
-}
-
-export default {
-  name: 'ExportPageSnapshotDemo',
-  components: {
-    NstcExportPageSnapshot
-  },
-  data() {
-    return {
-      activeTab: 'form',
-      formSections: buildFormSections(),
-      form: buildFormData(),
-      listColumns: LIST_COLUMN_DEFS,
-      listData: buildListData(),
-      lastExport: null
-    }
-  },
-  methods: {
-    handleExportSuccess(result) {
-      this.lastExport = {
-        filename: result.filename,
-        ts: result.ts
-      }
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.export-page-snapshot-demo {
-  padding: 20px;
-
-  h2 {
-    margin: 0 0 8px;
-    color: #303133;
-  }
-
-  &__desc {
-    margin: 0 0 16px;
-    color: #606266;
-    line-height: 1.6;
-  }
-
-  &__result {
-    margin-top: 16px;
-    padding: 12px 16px;
-    background: #f5f7fa;
-    border: 1px solid #e4e7ed;
-    border-radius: 4px;
-    color: #606266;
-    line-height: 1.8;
-  }
-
-  &__result-title {
-    margin-bottom: 4px;
-    color: #303133;
-    font-weight: 600;
-  }
-}
-
-.demo-tabs {
-  ::v-deep .el-tabs__header {
-    margin-bottom: 12px;
-  }
-}
-
-.demo-page {
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 16px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #ebeef5;
-  }
-
-  &__title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-  }
-
-  &__meta {
-    margin-left: auto;
-    color: #909399;
-    font-size: 13px;
-  }
-
-  &__form {
-    margin-bottom: 0;
-  }
-
-  &__section + &__section {
-    margin-top: 8px;
-  }
-
-  &__section-title {
-    margin-bottom: 12px;
-    padding-left: 8px;
-    color: #303133;
-    font-weight: 600;
-    border-left: 3px solid #409eff;
-  }
-}
-
-.page-button-shadow {
-  margin-top: 16px;
-  padding: 12px 16px;
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-}
-</style>

package/packages/ExportPageSnapshot/src/main.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="nstc-export-page-snapshot">
-    <div
-      v-if="showToolbar"
-      class="nstc-export-page-snapshot__toolbar page-snapshot-btn"
-    >
-      <el-button
-        size="mini"
-        :loading="exporting"
-        @click="handleExportHtml"
-      >
-        {{ $l('导出 HTML') }}
-      </el-button>
-      <el-button
-        size="mini"
-        type="primary"
-        :loading="exporting"
-        @click="handleExportPdf"
-      >
-        {{ $l('导出 PDF') }}
-      </el-button>
-    </div>
-    <div ref="pageRoot" class="nstc-export-page-snapshot__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import { exportPageHtml, downloadPageSnapshotPdf } from '@/utils/exportPageSnapshot'
-
-export default {
-  name: 'NstcExportPageSnapshot',
-  props: {
-    showToolbar: {
-      type: Boolean,
-      default: true
-    },
-    embedFonts: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      exporting: false
-    }
-  },
-  methods: {
-    getRootEl() {
-      return this.$refs.pageRoot
-    },
-    async handleExportHtml() {
-      await this.runExport(() => exportPageHtml(this.getRootEl(), {
-        autoDownload: true,
-        embedFonts: this.embedFonts
-      }))
-    },
-    async handleExportPdf() {
-      await this.runExport(() => downloadPageSnapshotPdf(this.getRootEl(), {
-        embedFonts: this.embedFonts
-      }))
-    },
-    async runExport(exportFn) {
-      const rootEl = this.getRootEl()
-      if (!rootEl) {
-        this.$message.warning(this.$l('未找到页面内容'))
-        return
-      }
-
-      this.exporting = true
-      try {
-        const result = await exportFn()
-        if (!result?.ok) {
-          this.$message.error(result?.message || this.$l('导出失败'))
-          return
-        }
-        this.$message.success(this.$l('导出成功'))
-        this.$emit('success', result)
-      } catch (e) {
-        console.warn('[NstcExportPageSnapshot] export failed', e)
-        this.$message.error(this.$l('导出失败'))
-      } finally {
-        this.exporting = false
-      }
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.nstc-export-page-snapshot {
-  position: relative;
-}
-
-.nstc-export-page-snapshot__toolbar {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.nstc-export-page-snapshot__content {
-  padding: 16px;
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-}
-</style>