# js2table-tools

**Repository Path**: wangziyi-room/js2table-tools

## Basic Information

- **Project Name**: js2table-tools
- **Description**: js描述数据对象，生成支持A4，A3格式的table，使用html2canvas打印
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-22
- **Last Updated**: 2025-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, HTML

## README

# @hy-tools/job-ticket

js对象生成html表单，支持打印（内置特殊作业8大工作票）

- 支持A4/A3纸张打印
- 支持纵向/横向打印方向

author: wzy
date: 2025-05-29
version: 0.0.1

## 包使用方式：

### 安装

```bash
npm install @hy-tools/job-ticket@latest --registry=http://10.2.163.218:4873/

pnpm install @hy-tools/job-ticket@latest --registry=http://10.2.163.218:4873/
```

### 使用

#### 全局注入

```js
// main.js

import ticket from '@hy-tools/job-ticket'
import '@hy-tools/job-ticket/dist/index.css'
// 其他代码...
app.use(ticket) // 全局注入: $ticketConfig
```

```html
<!--使用功能的vue页面内 -->
<template>
  <Ticket :config="config" :apiParams :apiHeader :type />
</template>
```

- apiParams - 请求接口的参数 （目前接口一般是：licenseId和workPlanId）
- apiHeader - 请求接口的请求头（目前请求头一般是：Authorization）
- type - 作业票类型：HotWork（动火作业）、ConfinedSpace（受限空间）、BlindPlatePlugging（盲板抽堵）、Height（高处）、Lifting（吊装）、TemporaryElectricity（临时用电）、GroundBreaking（动土）、OpenCircuit（断路）、BigTicket（大票）

```js
// 使用功能的vue3（setup）页面内
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const _ticketConfig = instance?.appContext.config.globalProperties.$ticketConfig

// 下面所有的配置格式，获取到后，都可以再次修改，最终通过config对象，传入组件中即可。
const config = ref(_ticketConfig.getConfig('template')) // template是基础的配置格式；template-complex是最全的配置项，各种复杂配置都在对象里面
// const config = ref(_ticketConfig.getConfig('template-complex'))

// const alltypes = _ticketConfig.getTypes() // 此函数可查看内置的8大作业票配置对象格式（会包含两个特殊配置：一个简略版template，一个完整版template-complex）
```

#### 按需注入

```html
<template>
  <Ticket :config="config" :apiParams :apiHeader :type />
</template>
```

- apiParams - 请求接口的参数 （目前接口一般是：licenseId和workPlanId）
- apiHeader - 请求接口的请求头（目前请求头一般是：Authorization）
- type - 作业票类型：HotWork（动火作业）、ConfinedSpace（受限空间）、BlindPlatePlugging（盲板抽堵）、Height（高处）、Lifting（吊装）、TemporaryElectricity（临时用电）、GroundBreaking（动土）、OpenCircuit（断路）、BigTicket（大票）

```js
import { Ticket, ticketConfig } from '@hy-tools/job-ticket'
import '@hy-tools/job-ticket/dist/index.css'

// const alltypes = ticketConfig.getTypes() // 此函数可查看内置的8大作业票配置对象格式（会包含两个特殊配置：一个简略版template，一个完整版template-complex）

// ticketConfig.getConfig('template') 获取到的是对象，可自由修改（按照既定格式），再通过config对象传入组件中即可。
const config = ref(ticketConfig.getConfig('template'))
```

</script>

#### 内置8个作业票

- 动火作业(HotWork)
- 受限空间(ConfinedSpace)
- 盲板抽堵(BlindPlatePlugging)
- 高处作业(Height)
- 吊装作业(Lifting)
- 临时用电(TemporaryElectricity)
- 动土作业(GroundBreaking)
- 断路作业(OpenCircuit)

```js
import { Ticket, ticketConfig } from '@hy-tools/job-ticket'
ticketConfig.getConfig('HotWork') // 获取动火作业配置项
```

#### 内置2个特殊表单：template 、template-complex

```js
ticketConfig.getConfig('template') // 可查看对象结构，知悉简单的配置项
ticketConfig.getConfig('template-complex') // 可查看对象结构，知悉复杂的配置项
```

#### 其他非内置的表单信息，可以按照下面的数据结构自行配置

```html
<template>
  <Ticket :config="config" />
</template>
```

```js
import { Ticket } from '@hy-tools/job-ticket'
const config = {
  // 数据结构如下展示[参考 template.js 和 复杂的template-complex.js]，可自由配置
}
```

#### 配置项说明

```js
// template.js
export default {
  title: '表格标题',
  header: [
    {
      label: '左小标题',
      value: '****'
    },
    {
      label: '右小标题',
      value: '001'
    }
  ], // 生成table顶部的标识信息
  columnsNum: 7, // 表格一共多少列数
  data: [
    [
      {
        label: '姓名',
        value: '张星',
        labelStyle: {
          width: '85px'
        }
      },
      {
        label: '年龄',
        value: '31',
        labelStyle: {
          width: '85px'
        }
      },
      {
        label: '职业',
        value: '行星防空领事',
        labelStyle: {
          width: '85px'
        }
      },
      {
        label: '头像',
        labelConfig: {
          rowspan: 3
        }, // 跨行跨列
        labelStyle: {
          width: '100px'
        }, // css样式
        labelMode: 'img',
        labelModeUrl: 'http://localhost:5173/vite.svg',
        labelModeStyle: {
          margin: 'auto'
        }
      } // 头像以图片展示
    ],
    [
      {
        mode: 'NewList',
        data: {
          columns: [
            { label: '序号', align: 'center|center', style: { width: '60px' } },
            { label: '教育情况' },
            { label: '开始时间' },
            { label: '截止时间' },
            { label: '备注' }
          ],
          list: [
            [1, '小学', '2003', '2009', '正常结业'],
            [2, '中学', '2009', '2012', '正常结业'],
            [3, '高中', '2012', '2015', '正常结业'],
            [4, '大学', '2015', '2019', '正常结业']
          ]
        }
      } // 新布局：对齐的标准表格list
    ],
    [
      {
        mode: 'NewTable',
        columnsNum: 6,
        data: [
          [
            { label: '在岗单位', value: '', labelStyle: { width: '100px' } },
            { label: '职称', value: '', labelStyle: { width: '80px' } },
            { label: '职位', value: '', labelStyle: { width: '80px' } }
          ],
          [
            { label: '在岗单位', value: '' },
            { label: '职称', value: '' },
            { label: '职位', value: '' }
          ],
          [
            { label: '在岗单位', value: '' },
            { label: '职称', value: '' },
            { label: '职位', value: '' }
          ]
        ]
      } // table嵌套table，table不规则
    ]
  ],
  footer: [
    {
      label: '操作人：',
      value: '张三'
    },
    {
      label: '页码：',
      value: '1/1'
    },
    {
      label: '操作时间：',
      value: '2024/12/22 10.20.19'
    }
  ] // 生成table的底部信息
}
```

```js
// template-complex.js
export default {
  title: {
    text: '绿色表格标题',
    textHtml: '<big>大标题</big>',
    style: {
      fontSize: '20px',
      color: 'green'
    }
  }, // 标题复杂格式的配置方式
  header: [
    {
      label: '左小标题',
      // lableHtml优先label
      labelHtml: '<i>左左左</i>',
      value: 'TEST',
      valueHtml: '<i>是快到家了分手</i>',
      labelStyle: {
        fontSize: '14px',
        color: 'gray'
      },
      valueStyle: {
        fontSize: '14px',
        color: 'orange'
      }
    },
    {
      label: '右小标题',
      value: '14号字体',
      labelStyle: {
        fontSize: '14px'
      },
      valueStyle: {
        fontSize: '14px'
      }
    }
  ], // 生成table顶部的标识信息（复杂版）
  columnsNum: 7, // 表格列数
  data: [
    [
      {
        label: '姓名',
        labelHtml: '姓<br/>名',
        value: '张星',
        valueHtml: '张<i style="color:blue">* </i>星',
        labelConfig: {
          colspan: 1,
          rowspan: 1
        },
        labelStyle: {
          width: '85px',
          color: '#339900'
        },
        valueConfig: {
          colspan: 3,
          rowspan: 1
        },
        valueStyle: {
          color: 'red',
          fontSize: '16px',
          fontWeight: 'bold'
          // width:['100px','100px','120px'] // 个数跟valueConfig.colspan走
        }
      },
      {
        label: '年龄',
        value: '31',
        labelStyle: {
          width: '85px'
        }
      },
      {
        label: '头像',
        labelConfig: {
          rowspan: 3
        },
        labelStyle: {
          width: '100px'
        },
        labelMode: 'img',
        labelModeUrl: 'http://localhost:5173/vite.svg',
        labelModeStyle: {
          margin: 'auto'
        }
      }
    ],
    [
      {
        label: '出生年月',
        value: '1997-04-02'
      },
      {
        label: '血型',
        value: 'AB型',
        // 下面是配置复选框的格式
        valueMode: 'checkbox',
        valueModeOptions: [
          { label: 'A型', value: 'a' },
          { label: 'B型', value: 'b' },
          { label: 'AB型', value: 'ab' },
          { label: 'O型', value: 'o' }
        ],
        valueModeCheckboxName: 'chkd', // 控件的name
        valueModeValue: ['ab', 'o']
      }, // 配置复选框
      {
        label: '身高',
        value: '178'
      }
    ],
    [
      {
        label: '体重',
        value: '142'
      },
      {
        label: '婚姻状况',
        value: '未婚'
      },
      {
        value: '删除线',
        valueConfig: {
          colspan: 2
        },
        valueStyle: {
          textAlign: 'center',
          textDecoration: 'line-through',
          color: '#999'
        }
      }
    ],
    [
      {
        label: '性别',
        value: '男',
        // 配置单选框
        valueMode: 'radio',
        valueModeValue: '1',
        valueModeRadioName: '',
        valueModeOptions: [
          { label: '男', value: '1' },
          { label: '女', value: '2', labelStyle: { color: 'red' } }
        ],
        valueModeStyle: { color: 'green' }
      },
      {
        label: '民族',
        value: '汉'
      },
      {
        label: '行政区划',
        value: '行星防御领事<点我可跳转>',
        valueConfig: {
          colspan: 2
        },
        // 生成链接
        valueMode: 'link',
        valueModeUrl: 'http://www.baidu.com/',
        valueModeStyle: {
          color: '#99AA33'
        }
      }
    ],
    [
      {
        mode: 'NewTable',
        columnsNum: 6,
        data: [
          [
            { label: '在岗单位', value: '', labelStyle: { width: '100px' } },
            { label: '职称', value: '', labelStyle: { width: '80px' } },
            {
              label: '职位',
              value: '行星防御指挥长',
              labelStyle: { width: '80px' },
              valueStyle: {
                color: 'burlywood',
                fontSize: '14px'
              }
            }
          ],
          [
            {
              label: '是否在职',
              value: '<-是否在职',
              labelMode: 'radio',
              labelModeValue: '2',
              labelModeOptions: [
                { label: '是', value: '1' },
                { label: '否', value: '2' }
              ],
              labelModeStyle: {
                fontSize: '12px'
              }
            },
            {
              label: '职称',
              labelHtml: '<i>YM</i>',
              value: '',
              valueHtml: '<i style="color:red">YUWD</i>'
            },
            { label: '职位', value: '' }
          ],
          [
            { label: '在岗单位', value: '' },
            {
              label: '职称',
              value: '',
              valueMode: 'checkbox',
              valueModeOptions: [
                { label: '部长', value: '1' },
                { label: '处长', value: '2', labelStyle: { color: 'red' } },
                { label: '连长', value: '3' }
              ],
              valueModeCheckboxName: 'pad',
              valueModeValue: '3',
              valueModeStyle: {
                color: 'blue'
              }
            },
            { label: '职位', value: '' }
          ]
        ]
      }
    ],
    [
      {
        mode: 'NewList', // NewList比较特殊，请完整看下下面的配置格式
        data: {
          columns: [
            { label: '序号', align: 'center|center', style: { width: '60px' } },
            { label: '教育情况', width: '100px', align: 'center|right' },
            { label: '开始时间' },
            { label: '截止时间', labelHtml: '<span style="color:yellow">日期</span>' },
            {
              label: '备注【300px宽度】',
              width: '300px',
              align: 'center|center',
              style: {
                color: '#11FF99'
              }
            }
          ], // 配置表头
          list: [
            [1, '小学', '2003', '2009', '正常结业'],
            [2, '中学', '2009', '2012', '正常结业'], // 简单配置
            [
              3,
              '高中',
              {
                text: '1',
                config: { colspan: 2 }, // 垮列
                // 配置复选框
                mode: 'checkbox',
                modeOptions: [
                  { label: '在读', value: '3' },
                  { label: '肄业', value: '4' },
                  { label: '结业', value: '5' },
                  { label: '毕业', value: '6' }
                ],
                modeStyle: {},
                modeRadioName: '',
                modeValue: ['3', '5'] // 默认值
              },
              // '2015',
              {
                text: '正常结业',
                textHtml: '<i>李会计哈</i>'
              }
            ], // 复杂配置
            [
              {
                text: '4',
                style: {
                  textAlign: 'right'
                }
              },
              {
                text: '大学',
                style: {
                  color: '#AA3377',
                  fontSize: '12px'
                }
              },
              {
                text: '2015[居中]',
                style: {
                  fontSize: '14px',
                  color: 'red',
                  textAlign: 'center'
                }
              },
              {
                text: '至今',
                // 配置超链接
                mode: 'link',
                modeUrl: 'http://www.baidu.com',
                modeStyle: {
                  borderBottom: '1px solid red',
                  textDecoration: 'none'
                }
              },
              {
                text: '图片一张',
                // 配置图片展示
                mode: 'img',
                modeUrl: 'http://localhost:5173/vite.svg',
                modeStyle: {
                  color: 'red',
                  margin: 'auto'
                }
              }
            ]
          ] // 二维数组表示的 tbody内部的tr和td
        }
      }
    ],
    [
      {
        mode: 'Opinion', // 意见框配置规则如下：
        border: 'true', // 表示是否展示边框
        layout: 'table', // table | div  td内部使用什么布局   【默认table】
        data: [
          {
            label: '作业负责人意见',
            labelStyle: { width: '160px', textAlign: 'center' },

            value: '同意',
            valueStyle: {},

            sign: '张三', // 签字信息
            signMode: 'img', // 标签sign是张图片
            signStyle: {},
            signLabel: '人员：', // 签字描述头
            signLabelStyle: {},
            signParentStyle: { color: 'red' }, // 签字父级容器

            time: '2025-12-12 10:10:10', // 时间信息
            timeStyle: {},
            timeLabel: '时间：', // 时间描述头
            timeLabelStyle: {},
            timeParentStyle: { flex: 4 } // 时间父级容器
          },
          { label: '所在单位意见', value: '同意', sign: '麻子', time: '2025-12-15 09:21:02' }
        ]
      }
    ]
  ],
  footer: [
    {
      label: '操作人：',
      value: '张三',
      labelStyle: {
        fontSize: '12px'
      },
      valueStyle: {
        fontSize: '12px',
        color: 'blue'
      }
    },
    {
      label: '页码：',
      value: '1/1',
      valueHtml: '<span style="color:red">1</span>/<span>3</span>',
      labelStyle: {
        fontSize: '12px'
      },
      valueStyle: {
        fontSize: '12px'
        // color: 'red'
      }
    },
    {
      label: '操作时间：',
      value: '2024/12/22 10.20.19',
      labelStyle: {
        fontSize: '12px',
        color: 'green'
      },
      valueStyle: {
        fontSize: '12px'
      }
    }
  ] // 生成table底部信息
}
```