控件状态

控件状态

演示源码全屏查看代码

<template>
  <FaLayout class="page" :right="240" :left="240">
    <AppHeader slot="header" />

    <FaPanel slot="left" title="控件填写" style="height: 100%">
      <FaWidgetFill ref="widgetFill" :viewer="viewer" @field-click="onFieldClick" />

      <footer v-if="widgetFill" slot="footer" class="widget-fill-ft">
        <ElButton @click="() => widgetFill?.clearValidate()">清除校验</ElButton>
        <ElButton type="primary" @click="() => widgetFill?.validate()">校验</ElButton>
      </footer>
    </FaPanel>

    <FaContract
      ref="viewer"
      :docs="docs"
      :doc-index.sync="docIndex"
      widget
      riding
      :widgets="widgets"
      :seals="signs.seals"
      :signatures="signs.signatures"
      :sign-options="signOptions"
      :widget-actor-required="widgetActorRequired"
      :attachment-upload="attachmentUpload"
      :image-upload="imageUpload"
      :widget-source-loader="widgetSourceLoader"
      @widgets-click="onWidgetsClick"
    >
      <template #page="{ page }">
        <WidgetGrid v-if="page.p === 0" title="签署控件" :list="signControls" />

        <WidgetGrid v-else-if="page.p === 1" title="填写控件" :list="fillControls" />

        <WidgetGrid v-else-if="page.p === 2" title="填写控件 - 纵向展示" :list="fillControlsV" vertical />
      </template>
    </FaContract>

    <template #right>
      <FaPanel :title="`设置${activeWidget.option.name}`" v-if="activeWidget" @click.stop.native style="height: 100%">
        <FaWidgetSetting :viewer="viewer" :data="activeWidget" :actors="actors" />
      </FaPanel>

      <FaThumbs v-show="!activeWidget" :viewer="viewer" :docs="docs" :doc-index.sync="docIndex" />
    </template>
  </FaLayout>
</template>

<script lang="ts">
import { computed, defineComponent, Ref, ref, reactive } from 'vue'
import {
  WidgetMode,
  ActorData,
  Widget,
  DocData,
  Viewer,
  createId,
  WidgetStyle,
  WidgetOption,
  WidgetType,
  WidgetKind,
  WidgetData,
  FaWidgetFill,
  SignOptions,
  WidgetSource
} from 'fdd-contract'
import AppHeader from '../components/AppHeader.vue'
import WidgetGrid from '../components/WidgetGrid.vue'
import { mockAjax } from '../utils'
import { getDateSignImg, signs } from '../utils/mock'

/** 所有控件选项列表 */
const allOptions = Widget.getWidgetOptions()

/** 控件值 */
const widgetValueMap = new Map([
  [
    WidgetType.SIGNATURE,
    {
      sign: signs.signatures[0]
    }
  ],
  [
    WidgetType.SEAL,
    {
      sign: signs.seals[0]
    }
  ],
  [
    WidgetType.REMARK,
    (mode: WidgetMode) =>
      mode === WidgetMode.DONE
        ? {
            value: '这个是签署备注的内容'
          }
        : {}
  ],
  [
    WidgetType.INPUT,
    {
      value: '这个是单行文本内容'
    }
  ],
  [
    WidgetType.TEXTAREA,
    {
      value: '这个是多行文本内容，这个是多行文本内容，这个是多行文本内容'
    }
  ],
  [
    WidgetType.CHECKBOX,
    {
      required: false
    }
  ],
  [
    WidgetType.NUMBER,
    {
      value: '123456'
    }
  ],
  [
    WidgetType.ID,
    {
      value: '440306202203263371'
    }
  ],
  [
    WidgetType.DATE_FILL,
    {
      value: '2022年03月26日'
    }
  ],
  [
    WidgetType.IMAGE,
    {
      image: {
        src: 'https://cdn.fadada.com/dist/static/portal/img/products/saas/saasimg01.png'
      },
      value: 'saasimg01'
    } as WidgetData
  ],
  [
    WidgetType.CHECKBOX,
    {
      value: true as unknown as string
    }
  ],
  [
    WidgetType.RADIO_GROUP,
    {
      checkOptions: [
        {
          label: '单选选项 - 1',
          value: true
        },
        {
          label: '单选选项 - 2'
        }
      ]
    }
  ],
  [
    WidgetType.CHECKBOX_GROUP,
    {
      checkOptions: [
        {
          label: '多选选项 - 1'
        },
        {
          label: '多选选项 - 2',
          value: true
        }
      ]
    }
  ],
  [
    WidgetType.SELECT,
    {
      value: '下拉选项 - 2',
      selectOptions: ['下拉选项 - 1', '下拉选项 - 2']
    }
  ],
  [
    WidgetType.TABLE,
    {
      tableOptions: {
        cols: 4
      }
    }
  ]
] as [WidgetType, WidgetData | ((mode: WidgetMode) => WidgetData | undefined)][])

/** 根据选项生成控件数据 */
function getWidgetData(item: WidgetOption, mode: WidgetMode, actors: ActorData[], doc: DocData, p = 0) {
  const { type } = item

  let extra = widgetValueMap.get(type)

  if (typeof extra === 'function') {
    extra = extra(mode)
  } else {
    if (mode === WidgetMode.SET) extra = undefined
  }

  return {
    type,
    name: `${item.name}-${mode}`,
    mode,
    docId: doc.id,
    p,
    actor: actors[allOptions.indexOf(item)],
    ...extra
  } as WidgetData
}

/** 生成控件 */
function createWidgets(options: WidgetOption[], actors: ActorData[], doc: DocData, p = 0, vertical = false) {
  const widgetModes = [WidgetMode.SET, WidgetMode.USE, WidgetMode.VIEW, WidgetMode.DONE]
  const docWidth = doc.pages[p].w
  const left = 140
  const top = 108
  const cellWidth = (docWidth - left - 20) / widgetModes.length

  if (!vertical) {
    return widgetModes.reduce((widgets, mode, index) => {
      let t = top

      widgets.push(
        ...options.map((item, i) => {
          const h = item.height + 40 - 1
          const oy = t + h / 2

          t += h

          return new Widget({
            ...getWidgetData(item, mode, actors, doc, p),
            ox: left + cellWidth * (index + 0.5),
            oy
          })
        })
      )
      return widgets
    }, [] as Widget[])
  }

  /** 纵向 */
  let vt = 70

  return options.reduce((widgets, item, index) => {
    vt += 32

    widgets.push(
      ...widgetModes.map((mode, i) => {
        const h = item.height + 80 - 1
        const oy = vt + h / 2

        vt += h

        return new Widget({
          ...getWidgetData(item, mode, actors, doc, p),
          x: left + 40,
          oy
        })
      })
    )
    return widgets
  }, [] as Widget[])
}

/** 获取控件数据 */
function getWidgets(actors: ActorData[], doc: DocData) {
  /** 签署控件选项 */
  const signControls = allOptions.filter(item => item.style === WidgetStyle.SIGN)

  /** 尺寸较大需要垂直展示的填写控件 */
  const fillVertical = [WidgetType.TABLE]

  /** 填写控件选项 */
  const fillControls = allOptions.filter(item => item.style === WidgetStyle.FILL && !fillVertical.includes(item.type))

  /** 填写控件选项 - 垂直展示 */
  const fillControlsV = allOptions.filter(item => item.style === WidgetStyle.FILL && fillVertical.includes(item.type))

  /** 控件 */
  const widgets = ref([
    ...createWidgets(signControls, actors, doc),
    ...createWidgets(fillControls, actors, doc, 1),
    ...createWidgets(fillControlsV, actors, doc, 2, true),

    new Widget({
      name: '骑缝控件-设置',
      type: WidgetType.SEAL,
      mode: WidgetMode.SET,
      kind: WidgetKind.RIDING,
      docId: doc.id,
      actor: actors[0],
      oy: 120
    }),

    new Widget({
      name: '骑缝控件-使用',
      type: WidgetType.SEAL,
      mode: WidgetMode.USE,
      kind: WidgetKind.RIDING,
      docId: doc.id,
      actor: actors[1],
      oy: 360,
      sign: signs.seals[2]
    }),

    new Widget({
      name: '骑缝控件-已完成',
      type: WidgetType.SEAL,
      mode: WidgetMode.DONE,
      kind: WidgetKind.RIDING,
      docId: doc.id,
      actor: actors[2],
      oy: 600,
      sign: signs.seals[0]
    })
  ])

  return {
    /** 控件 */
    widgets,

    /** 签署控件选项 */
    signControls,

    /** 填写控件选项 */
    fillControls,

    /** 填写控件选项 - 垂直展示 */
    fillControlsV
  }
}

/** 控件状态 */
export default defineComponent({
  name: 'WidgetStatus',
  components: { AppHeader, WidgetGrid },

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

    /** 控件表单填写 */
    const widgetFill = ref(null) as Ref<InstanceType<typeof FaWidgetFill> | null>

    /** 参与方 */
    const actors = Array.from(
      new Array(16),
      (item, index) =>
        ({
          id: createId(),
          name: `参与方${index + 1}号`,
          index,
          sign: true,
          fill: true
        } as ActorData)
    )

    /** 文档 */
    const doc: DocData = {
      id: createId(),
      name: '控件展示文档',
      pages: [
        {
          p: 0,
          w: 1000,
          h: 800
        },
        {
          p: 1,
          w: 1000,
          h: 1200
        },
        {
          p: 2,
          w: 1000,
          h: 1200
        }
      ]
    }

    return {
      /** 合同控件 */
      viewer,

      /** 控件表单填写 */
      widgetFill,

      /** 文档列表 */
      docs: [doc],

      /** 参与方 */
      actors,

      /** 签章信息 */
      signs,

      /** 控件列表 */
      ...getWidgets(actors, doc),

      /** 当前文档索引 */
      docIndex: ref(0),

      /** 激活的控件 */
      activeWidget: computed(() => viewer.value?.activeWidget || null),

      /** 签章配置选项 */
      signOptions: reactive({
        signGlobal: true,
        signResizable: true,
        dateSignSrc: getDateSignImg
      } as SignOptions),

      /** 参与方是否必填 */
      widgetActorRequired: (widget: Widget) => widget.isSign,

      /** 附件上传 */
      attachmentUpload(file: File) {
        return mockAjax(() => ({
          id: createId(),
          fileName: file.name
        }))
      },

      /** 图片上传 */
      async imageUpload(file: File) {
        const src = URL.createObjectURL(file)

        return mockAjax(() => ({
          id: createId(),
          fileName: file.name,
          src
        }))
      },

      /** 控件数据来源加载 */
      widgetSourceLoader() {
        console.log('加载中！！！')
        return mockAjax(() => ({
          /** 认证姓名 */
          [WidgetSource.CERTIFIED_NAME]: '张三',
          /** 认证身份证 */
          [WidgetSource.CERTIFIED_ID]: '440306202203263371',
          /** 认证证件号 */
          [WidgetSource.CERTIFIED_CREDENTIAL]: 'B44030656X',
          /** 认证企业名称 */
          [WidgetSource.CERTIFIED_CORP_NAME]: '深圳市法大大科技有限公司',
          /** 统一社会信用代码 */
          [WidgetSource.CERTIFIED_CORP_USCC]: '91110000XYU26XND6Y'
        }))
      },

      /** 控件点击 */
      onWidgetsClick(widgets: Widget[], e: MouseEvent) {
        console.log(`点击了控件：`, widgets)
      },

      /** 填写表单控件字段点击 */
      onFieldClick(widget: Widget, e: MouseEvent) {
        console.log(`点击了控件字段：`, widget)
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.widget-fill-ft {
  padding: 8px 16px;
  text-align: right;
  border-top: $border-solid;
}
</style>

<template>
  <div class="widget-grid">
    <h3 class="widget-grid__title">{{ title }}</h3>

    <table v-if="!vertical" class="widget-grid__table">
      <thead>
        <tr>
          <th width="120">控件/状态</th>
          <th v-for="(item, index) in modes" :key="index" :title="item.title">{{ item.label }} {{ item.title }}</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in rows" :key="item.key" :height="item.height">
          <th><i class="widget-icon" :class="item.icon"></i> {{ item.name }}</th>
          <td v-for="i in 4" :key="i"></td>
        </tr>
      </tbody>
    </table>

    <table v-else class="widget-grid__table">
      <colgroup>
        <col width="120" />
        <col />
      </colgroup>

      <tbody>
        <template v-for="item in rows">
          <tr :key="item.key" height="32">
            <th colspan="2">
              <i class="widget-icon" :class="item.icon"></i>
              {{ item.name }}
            </th>
          </tr>

          <tr v-for="(mode, index) in modes" :key="index" :height="item.height">
            <th :title="mode.title">{{ mode.label }}<br />{{ mode.title }}</th>
            <td></td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { WidgetOption } from 'fdd-contract'

/** 控件列表 */
export default defineComponent({
  name: 'WidgetGrid',

  props: {
    /** 标题 */
    title: { type: String, default: '控件列表' },

    /** 需要展示的控件列表 */
    list: {
      type: Array as PropType<WidgetOption[]>,
      default: () => []
    },

    /** 是否纵向展示 */
    vertical: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    return {
      /** 行 */
      rows: computed(() =>
        props.list.map(item => ({
          key: item.key,
          name: item.name,
          icon: item.icon,
          height: item.height + (props.vertical ? 80 : 40)
        }))
      ),

      /** 模式 */
      modes: [
        { label: '设置', title: 'WidgetMode.SET' },

        { label: '使用', title: 'WidgetMode.USE' },

        { label: '查看', title: 'WidgetMode.VIEW' },

        { label: '完成', title: 'WidgetMode.DONE' }
      ]
    }
  }
})
</script>

<style lang="scss" scoped>
.widget-grid {
  position: relative;
  margin: 20px;
  pointer-events: none;

  &__title {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 20px;
  }

  &__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    thead tr {
      height: 36px;
    }

    th,
    td {
      padding: 0;
      text-align: center;
      border: 1px solid #eee;
    }

    th {
      font-weight: 400;
      font-size: 13px;
      background: #fafafa;
    }

    tbody th {
      font-size: 12px;
    }
  }
}
</style>

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
  })
}