合同签署

合同签署

演示源码全屏查看代码

<template>
  <FaLayout v-loading="loading" class="page" :right="240" :left="240">
    <AppHeader slot="header">
      <ElButton type="primary" @click="submit">提交</ElButton>
    </AppHeader>

    <div slot="left" class="page-left">
      <ControlSign
        :seals="signs.seals"
        :signatures="signs.signatures"
        :date-sign="signs.dateSign"
        :actor="actors[0]"
        :viewer="viewer"
      />
    </div>

    <FaContract
      ref="viewer"
      :docs="docs"
      :doc-index.sync="docIndex"
      :page-src="getPageImg"
      widget
      riding
      :allowedRidingTypes="allowedRidingTypes"
      :widgets="widgets"
      :seals="signs.seals"
      :signatures="signs.signatures"
      :sign-options="signOptions"
      :before-widget-drop="beforeWidgetDrop"
      :before-sign-change="beforeSignChange"
    />

    <FaThumbs slot="right" :viewer="viewer" :docs="docs" :doc-index.sync="docIndex" />
  </FaLayout>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
import { Message } from 'element-ui'
import {
  WidgetMode,
  ActorData,
  Widget,
  WidgetType,
  SignData,
  DocData,
  Viewer,
  SignOptions,
  WidgetKind
} from 'fdd-contract'
import AppHeader from '../components/AppHeader.vue'
import ControlSign from '../components/ControlSign.vue'
import { alertWidgetsRaw } from '../utils'
import { getDateSignImg, getDetail, getPageImg } from '../utils/mock'

/** 合同签署 */
export default defineComponent({
  name: 'ContractSign',
  components: { ControlSign, AppHeader },

  setup() {
    /** 合同控件 */
    const viewer = ref(null) as Ref<Viewer | null>

    /** 详情数据 */
    const detail: {
      docs: DocData[]
      actors: ActorData[]
      signs: {
        seals: SignData[]
        signatures: SignData[]
        dateSign: SignData
      }
      widgets: Widget[]
    } = reactive({
      docs: [],
      actors: [],
      signs: {
        seals: [],
        signatures: [] as SignData[],
        dateSign: { img: '' }
      },
      widgets: []
    })

    /** 加载中 */
    const loading = ref(false)

    /** 当前文档索引 */
    const docIndex = ref(0)

    /** 详情加载 */
    async function load() {
      try {
        loading.value = true

        const { docs, actors, signs } = await getDetail()
        const actor = actors[0]
        const docId = docs[0].id

        Object.assign(detail, { docs, actors, signs })

        detail.widgets = [
          /** 印章 指定位置 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            actor,
            sign: signs.seals[0],
            // 指定位置
            fixed: true,
            p: 0,
            docId,
            ox: 200,
            oy: 100
          }),

          /** 印章 批量 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            kind: WidgetKind.BATCH,
            actor,
            sign: signs.seals[1],
            docId,
            ox: 200,
            oy: 350
          }),

          /** 印章 骑缝 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            kind: WidgetKind.RIDING,
            actor,
            sign: signs.seals[0],
            docId,
            oy: 400
          }),

          /** 印章 指定印章 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            actor,
            sign: signs.seals[2],
            assignedSignId: signs.seals[2].id,
            // 指定位置
            fixed: true,
            p: 0,
            docId,
            ox: 200,
            oy: 600
          }),

          /** 印章 指定印章 不固定位置 */
          new Widget({
            type: WidgetType.SEAL,
            mode: WidgetMode.USE,
            actor,
            sign: signs.seals[0],
            assignedSignId: signs.seals[0].id,
            p: 0,
            docId,
            ox: 200,
            oy: 800
          }),

          /** 签名 */
          new Widget({
            type: WidgetType.SIGNATURE,
            mode: WidgetMode.USE,
            actor,
            sign: signs.signatures[0],
            p: 0,
            docId,
            ox: 600,
            oy: 100
          }),

          /** 日期 */
          new Widget({
            type: WidgetType.DATE,
            mode: WidgetMode.USE,
            actor,
            p: 0,
            docId,
            ox: 600,
            oy: 350
          }),

          /** 备注签 */
          new Widget({
            type: WidgetType.REMARK,
            mode: WidgetMode.USE,
            actor,
            p: 0,
            docId,
            ox: 600,
            oy: 600
          })
        ]
      } finally {
        loading.value = false
      }
    }

    onMounted(load)

    return {
      ...toRefs(detail),

      /** 合同控件 */
      viewer,

      /** 加载中 */
      loading,

      /** 当前文档索引 */
      docIndex,

      /** 允许的骑缝控件类型 */
      allowedRidingTypes: [WidgetType.SEAL, WidgetType.SIGNATURE],

      /** 获取文档页面图片地址 */
      getPageImg,

      /** 签章配置选项 */
      signOptions: reactive({
        signGlobal: true,
        signResizable: true,
        // 指定位置的日期章不可设置
        dateSignSetting: widget => !widget.fixed,
        dateSignGlobal: true,
        dateSignSrc: getDateSignImg
      } as SignOptions),

      /** 控件拖入校验 */
      beforeWidgetDrop(widget: Widget) {
        if (widget.sign?.granted === false) {
          const msg = '未授权签章不允许拖入'
          Message.error(msg)
          return Promise.reject(msg)
        }
      },

      /** 控件切换校验 */
      beforeSignChange(widget: Widget, sign: SignData) {
        if (sign.granted === false) {
          const msg = '未授权签章不允许切换'
          Message.error(msg)
          return Promise.reject(msg)
        }
      },

      /** 提交 */
      async submit() {
        await viewer.value?.validate()

        alertWidgetsRaw(detail.widgets)
      }
    }
  }
})
</script>

import FddContract, { createId, PageData, ActorData, SignData, DocData, Widget } from 'fdd-contract'
import { mockAjax } from '.'
import { createDateSign, createSignature, getImg } from './img'

/** 页面尺寸 */
const pageSizes = (() => {
  const { width, height } = FddContract.config.page
  return {
    /** A4 */
    a4: {
      w: width,
      h: height
    },

    /** A4 横版 */
    a4c: {
      w: height,
      h: width
    },

    /** A5 */
    a5: {
      w: 530,
      h: 820
    },

    /** A5 横版 */
    a5c: {
      w: 820,
      h: 530
    }
  }
})()

/** 创建文档 */
function createDoc(name: string, count = 1, sizes = Object.keys(pageSizes) as (keyof typeof pageSizes)[]): DocData {
  return {
    id: createId(),
    name,
    pages: Array.from(new Array(count), (item, p) => {
      const pageType = sizes[Math.floor(Math.random() * sizes.length)]
      const { w, h } = pageSizes[pageType]
      return {
        p,
        w,
        h
      } as PageData
    })
  }
}

/** 文档 */
export const docs = [
  createDoc('7页 A4 合同', 7, ['a4']),
  createDoc('1页 A4 合同', 1, ['a4']),
  createDoc('2页 A4 合同', 2, ['a4']),
  createDoc('3页 A4 合同', 3, ['a4']),
  createDoc('20页异形合同', 20),
  createDoc('100页 A4 合同', 100, ['a4']),
  createDoc('20000页合同', 20000, ['a4'])
]

/** 参与方 */
export const actors: ActorData[] = [
  {
    id: createId(),
    name: '深圳市法大大有限公司-小智',
    index: 0,
    isSender: true,
    fill: true,
    sign: true
  },
  {
    id: createId(),
    name: '深圳市桔子有限公司-小度',
    index: 1,
    fill: true,
    sign: false
  },
  {
    id: createId(),
    name: '深圳市大米有限公司-小爱',
    index: 2,
    fill: false,
    sign: true
  },
  {
    id: createId(),
    name: '小白',
    index: 3,
    isPerson: true,
    fill: true,
    sign: true
  },
  {
    id: createId(),
    name: '小丽',
    index: 4,
    isPerson: true,
    fill: false,
    sign: true
  }
]

/** 印章 */
const seals: SignData[] = [
  {
    id: createId(),
    name: '法大大',
    img: getImg('seal-fadada.svg'),
    default: true,
    specs: '42mm * 42mm',
    w: 160,
    h: 160
  },
  {
    id: createId(),
    name: '桔子',
    img: getImg('seal-juzi.svg'),
    specs: '60mm * 60mm',
    w: 228,
    h: 228,
    tag: '标签'
  },
  {
    id: createId(),
    name: '大米',
    img: getImg('seal-dami.svg'),
    specs: '38mm * 38mm',
    w: 142,
    h: 142,
    tag: { text: '标签', type: 'success' }
  },
  {
    id: createId(),
    name: '大米',
    img: getImg('seal-dami.svg'),
    disabled: true,
    specs: '40mm * 40mm',
    w: 150,
    h: 150
  }
]

/** 签名 */
const signatures: SignData[] = [
  {
    id: createId(),
    name: '小智',
    img: createSignature('小智'),
    default: true,
    specs: '30mm * 16mm'
  },
  {
    id: createId(),
    name: '小度',
    img: createSignature('小度'),
    specs: '20mm * 11mm',
    w: 114,
    h: 64,
    tag: { text: '标签', type: 'danger', effect: 'dark' }
  },
  {
    id: createId(),
    name: '小爱',
    img: createSignature('小爱'),
    specs: '16mm * 16mm',
    w: 92,
    h: 92,
    tag: { text: '标签', effect: 'normal' }
  },
  {
    id: createId(),
    name: '小明',
    img: createSignature('小明'),
    disabled: true
  }
]

/** 日期章 */
const dateSign = {
  img: createDateSign()
} as SignData

/** 签章信息 */
export const signs = {
  /** 印章 */
  seals,

  /** 签名 */
  signatures,

  /** 日期章 */
  dateSign
}

const DETAIL_STORE_KEY = 'demo-detail'

interface Detail {
  /** 文档列表 */
  docs: DocData[]

  /** 参与方列表 */
  actors: ActorData[]

  /** 签章信息 */
  signs: typeof signs
}

/** 获取详情数据 */
export function getDetail() {
  return mockAjax(() => {
    const cache = sessionStorage.getItem(DETAIL_STORE_KEY)

    if (cache) {
      return JSON.parse(cache) as Detail
    }

    const detail: Detail = {
      docs,
      actors,
      signs
    }

    sessionStorage.setItem(DETAIL_STORE_KEY, JSON.stringify(detail))

    return detail
  })
}

/** 获取文档页面图片地址 */
export function getPageImg(doc: DocData, page: PageData) {
  const { w, h, p } = page
  const n = p + 1
  return `//fakeimg.pl/${w}x${h}/fff?text=${n}`
  // return `//picsum.photos/seed/picsum/${w}/${h}`
  // return `//fpoimg.com/${w}x${h}?bg_color=fff&text=${n}`
  // return `//temp.im/${w}x${h}/fff/aaa`
  // return `//dummyimage.com/${w}x${h}.png/fff/aaa&text=${n}`
  // return `//via.placeholder.com/${w}x${h}/fff?text=${n}`
}

/** 获取日期章图片地址 */
export function getDateSignImg(widget: Widget) {
  const { fontSize, dateFormat: formate } = widget.sign

  return createDateSign({
    fontSize,
    formate
  })
}