gd-signature-a

语雀文档: https://www.yuque.com/docs/share/7413f933-64d1-41d2-99ed-426203b7a01a?# 《gd-signature 使用文档》 -

Usage no npm install needed!

<script type="module">
  import gdSignatureA from 'https://cdn.skypack.dev/gd-signature-a';
</script>

README

gd-signature 使用文档

一、插件依赖

动态加载,如果用户环境有这两个插件,则不加载

  • jq
  • pdf.js

二、使用方法

2.1、标签引入

<script src="https://cdn.jsdelivr.net/npm/gd-signature"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gd-signature/dist/static/css/index.less">

2.2、npm

# 使用最新版本
npm i gd-signature -S

# 特定版本
npm i gd-signature@x.x.x -S

页面引用

import GDsignature from 'gd-signature' 
// const GDsignature = require('gd-signature')
import 'gd-signature/dist/static/css/less.css'

三、功能介绍

3.1、更改插件主题色

覆盖less变量即可

  • @--color-primary 主题色覆盖
  • @--color-primary-border border颜色覆盖

标签方式修改主题色

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<script>
  less.modifyVars({
    '@--color-primary': '#DE2921', // 主题修改为红色
    '@--color-primary-border': '#DE2921' // border颜色修改
  })
</script>

3.2、半自动签署 new GDsignature.manual({})

  • html
<div>
  <label for="用户id">用户id:</label>
  <input id="userId" placeholder="请输入用户id" type="text" />
</div>
<div>
  <label for="合同id">合同id:</label>
  <input id="abc" placeholder="请输入合同id" type="text" />
</div>
<button onclick="handleclick()">签章</button>

new GDsignature.manual 
start 需要配置 contract_id 与 user_id 

function handleclick() {
  const contract_id = $('#abc').val()
  const userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,
    user_id: userId,
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    }
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.manual({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址
  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})

3.3、自动签署 new GDsignature.auto({})

  • html
<div id="demo">
  <label for="预处理id" style="font-size:.24rem">预处理id:</label>
  <input id="preparid" placeholder="请输入预处理id" type="text" />
  <button onclick="handleclick()">签章</button>
</div>


new GDsignature.auto 

start 需要配置 prepare_id 

function handleclick() {
  preparid = $('#preparid').val()
  signature.start({
    prepare_id: preparid, // 预处理id
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    },
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.auto({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址
  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})

3.4、手写签章签署 + 拒签 new GDsignature.appManual({})

  • html
<div id="demo">
  <div>
    <label for="用户id">用户id:</label>
    <input id="userId" placeholder="请输入用户id" type="text" />
  </div>
  <div>
    <label for="合同id">合同id:</label>
    <input id="abc" placeholder="请输入合同id" type="text" />
  </div>
  <button onclick="handleclick()">签章</button>
</div>

new GDsignature.appManual 

function handleclick() {
  let contract_id = $('#abc').val()
  let userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,
    user_id: userId,
    //加入此回调,证明业务需要拒签,需要自己业务实现
    refuseSign: function(re) {
      // 使用此回调插件会显示拒签按钮,re里面的数据是用户ID跟合同ID,拒签实际操作逻辑还需业务系统自己去写
      console.log('re', re);
    },
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    }
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.appManual({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址
  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})

3.5、签名域签章 new GDsignature.signDomain({})

  • html
<div>
  <label for="用户id">用户id:</label>
  <input id="userId" placeholder="请输入用户id" type="text" />
</div>
<div>
  <label for="合同id">合同id:</label>
  <input id="abc" placeholder="请输入合同id" type="text" />
</div>
<button onclick="handleclick()">签章</button>

new GDsignature.manual 
start 需要配置 contract_id 与 user_id

function handleclick() {
  const contract_id = $('#abc').val()
  const userId = $('#userId').val()
  signature.start({
    contract_id: contract_id,
    user_id: userId,
    domain: [
            {x: 300, y: 170, page: 1, name: '财务章区域1'},
            {x: 500, y: 470, page: 1, name: '财务章区域2'},
            {x: 350, y: 180, page: 4, name: '人事章区域'}
          ],//需要填充的签名域坐标集合
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    }
  })
}
const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.signDomain({
  baseUrl: 'http://192.168.1.206:8000/api', // paas地址

  getToken() {
    return new Promise((reslove, reject) => {
      axios
        .post(`${baseUrl}/getToken`) // 根据实际需求做修改
        .then(res => {
        console.log(res)
        reslove(res.data.data.access_token)
      })
        .catch(err => {
        reject()
      })
    })
  },
  getSign(body) {
    return new Promise((reslove, reject) => {
      axios  // 地址根据实际需求做修改
        .post(`${baseUrl}/getSign`, body.data, {
        headers: {
          Authentication: body.token
        }
      })
        .then(res => {
        reslove(res.data.data.sign)
      })
        .catch(err => {
        console.log(err)
        reject()
      })
    })
  }
})

四、属性,回调函数

4.1、baseUrl

paas api 接口

4.2、auto_close

签章成功后是否自动关闭 默认值 false 

4.3、showClose

是否显示关闭按钮 默认是 true 

4.4、VerifyCode

是否开启签章验证码校验 默认值 true 

4.5、authSign

是否使用认证服务签章 默认值 false 

4.6、authBaseUrl

认证服务器地址, authSign 为 true 时必须传

4.7、flowId

认证服务器需要的流程id, authSign 为 true 时必须传

4.8、success Function(res) 

  • start()中使用
  • 签署成功的回调函数

4.9、error Function(error) 

  • start()中使用
  • 签署失败的回调函数

4.10、refuseSign Function(data) 

  • start()中使用
  • 拒签回调函数

4.11、lastPageSign

是否最后页签章, lastPageSign 为 true 限定最后页签章,默认false

4.12、domain 签名域签章时使用

业务需要签名的区域集合,数组类型,结构如下:

{
  x:"",  // x 坐标  A4当前页面绝对坐标值  必填
  y:"",  // y 坐标  A4当前页面绝对坐标值  必填
  page:"",  // 页码值 待签署页码  必填
  name:"", // 签名域高亮显示时签名域名称,选填,如填写则展示该名称,数组内唯一
  sealId:"", // 印章id ***** 预留字段 暂时不填充,可考虑为在用户印章列表中直接获取印章填充
  w:"",   // 印章宽度  ***** 预留字段 暂时不填充,考虑为当前签名域固定宽度
  h:""   // 印章高度  ***** 预留字段 暂时不填充,考虑为当前签名域固定高度
}

使用示例

const signature = new GDsignature.manual({
    baseUrl: 'https://open.aiosign.com/api', // paas-api接口 写死这个地址就好
  auto_close:true,// 签章成功后是否自动关闭签章 默认falase
  showClose: false, // 是否显示关闭按钮,默认为true
  VerifyCode:true, // 是否开启签章验证码校验,默认为true
  authSign: false, //使用认证服务器签章-默认为false
  authBaseUrl: 'http://192.168.2.199:8099/', //认证服务器地址-authSign为true时必须传
  flowId: '744918968410198016',
  getToken() {}, // 获取token
  getSign() {} // 获取sign
})

signature.start({
    ...
  success: function(res) {
    console.log(res) // 签章成功回调
  },
  //加入此回调,证明业务需要拒签,需要自己业务实现
  refuseSign: function(re) {
    console.log('re', re);
  },
  error: function(err) {
    console.log(err) // 签章失败回调
  }
})

六、对接demo文件

插件对接使用demo.rar