gd-signature-zh

v2.1.1

Published

3 years ago

- 语雀文档: https://www.yuque.com/docs/share/7413f933-64d1-41d2-99ed-426203b7a01a?# 《gd-signature 使用文档》 - <a name="VruZX"></a> ### 一、插件依赖 > 动态加载，如果用户环境有这两个插件，则不加载

Downloads

0High
0Medium
0Low

jianghuxiaohan

gd-signature 使用文档

语雀文档: https://www.yuque.com/docs/share/7413f933-64d1-41d2-99ed-426203b7a01a?# 《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 [email protected] -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.signDomain 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()
      })
    })
  }
})

3.6、移动端h5坐标签章 `new GDsignature.AppPositionSign({})`

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.AppPositionSign 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: 100, y: 170, page: 1},
            {x: 300, y: 470, page: 2},
            {x: 350, y: 180, page: 4}
          ],//需要填充的签名域坐标集合
    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.AppPositionSign({
  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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme