unify-external-plugin-platform 0.0.1 → 0.0.2

package/src/router/id-card-reader/id-card-reader.ts

@@ -0,0 +1,19 @@
+/**
+ * @author: lvcy
+ * @date: 2022-12-30
+ * @description：id-card-reader
+ */
+import {RouteConfig} from "vue-router";
+
+const IdCardReaderRouterList: RouteConfig[] = [
+    {
+        path: 'id-card-reader',
+        name: 'id-card-reader-page',
+        meta: {
+            title: '身份证读卡器',
+        },
+        component: () => import('@/views/id-card-reader/id-card-reader-page.vue')
+    },
+]
+
+export default IdCardReaderRouterList;

package/src/router/index.ts

@@ -1,15 +1,34 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import IdCardReaderRouterList from "@/router/id-card-reader/id-card-reader";
+import ScanRouterList from "@/router/scan/scan";
 
 Vue.use(VueRouter)
 
 const routes: Array<RouteConfig> = [
   {
     path: '/',
-    name: 'home',
-    component: HomeView
+    redirect: '/home',
   },
+  {
+    path: '/home',
+    name: 'home-layout',
+    component: () => import(/* webpackChunkName: "about" */ '../views/layout/home-layout.vue'),
+    children: [
+      ...IdCardReaderRouterList,
+      ...ScanRouterList,
+      { path: '404', meta: { title: '统一对外插件平台', errorPage: true }, component: () => import('@/components/404.vue') },
+      { path: '**', redirect: '404' },
+    ]
+  },
+  ...[
+      ...IdCardReaderRouterList,
+      ...ScanRouterList
+  ].map(item => ({
+        ...item,
+        path: `/${item.path}`
+  })),
   {
     path: '/about',
     name: 'about',

package/src/router/scan/scan.ts

@@ -0,0 +1,19 @@
+/**
+ * @author: lvcy
+ * @date: 2023-02-07
+ * @description：scan
+ */
+import {RouteConfig} from "vue-router";
+
+const ScanRouterList: RouteConfig[] = [
+    {
+        path: 'scan',
+        name: 'scan-page',
+        meta: {
+            title: '扫描设备',
+        },
+        component: () => import('@/views/scan/scan-page.vue')
+    },
+]
+
+export default ScanRouterList;

package/src/views/HomeView.vue

@@ -1,17 +1,109 @@
 <template>
   <div class="home">
-    <z-s-empty empty-tip="没有数据组件"></z-s-empty>
+<!--    <z-s-empty empty-tip="没有数据组件"></z-s-empty>-->
+    <id-card-reader-demo
+      type="text"
+      tip="身份证读卡器"
+      @click="handleAction"
+    ></id-card-reader-demo>
+    <id-card-reader-demo
+      type="primary"
+      @click="handleAction"
+    >身份证读卡器</id-card-reader-demo>
+
+
+    <el-input
+        style="width: 160px;"
+        placeholder="请输入内容"
+        v-model="idCardData.info.name">
+      <template slot="suffix">
+        <id-card-reader-demo
+            type="text"
+            tip="身份证读卡器"
+            @click="handleAction"
+        ></id-card-reader-demo>
+      </template>
+    </el-input>
+
+    <el-button type="default" @click="resetData">重置</el-button>
+
+    <div class="" v-if="idCardData.headImage">
+      <p>姓名: {{ idCardData.info.name }}</p>
+      <p>性别: {{ idCardData.info.sex }}</p>
+      <p>民族: {{ idCardData.info.nation }}</p>
+      <p>出生日期: {{ idCardData.info.birthday }}</p>
+      <p>地址: {{ idCardData.info.address }}</p>
+      <p>证件号码: {{ idCardData.info.cardId }}</p>
+      <p>签发机关: {{ idCardData.info.police }}</p>
+      <p>有效期开始: {{ idCardData.info.validStart }}</p>
+      <p>有效期结束: {{ idCardData.info.validEnd }}</p>
+      <img :src="idCardData.headImage" style="width: 120px;border: 1px solid #cccccc">
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /examples
+/**
+ * 身份证信息
+ *
+ */
+export interface IDCard {
+  /** 身份证信息 */
+  info: IDCardInfo;
+  /** 身份证照片 */
+  headImage?: string;
+}
+
+/**
+ * 身份证详细信息
+ *
+ */
+export interface IDCardInfo {
+  /** 姓名 */
+  name: string;
+  /** 性别 */
+  sex: string;
+  /** 民族 */
+  nation: string;
+  /** 出生日期 */
+  birthday: string;
+  /** 地址 */
+  address: string;
+  /** 证件号码 */
+  cardId: string;
+  /** 签发机关 */
+  police?: string;
+  /** 有效期开始 */
+  validStart?: any;
+  /** 有效期结束 */
+  validEnd?: any;
+  /** 性别编码 */
+  sexCode?: string;
+  /** 民族编码 */
+  nationCode?: string;
+}
 
 @Component({
   components: {
     HelloWorld,
   },
 })
-export default class HomeView extends Vue {}
+export default class HomeView extends Vue {
+
+  idCardData: IDCard = {info: {}} as IDCard;
+
+  handleAction(data: IDCard) {
+    this.idCardData = data;
+  }
+
+  resetData() {
+    this.idCardData = {info: {}} as IDCard;
+  }
+}
 </script>
+
+<style lang="scss">
+
+</style>

package/src/views/id-card-reader/id-card-reader-page.vue

@@ -0,0 +1,139 @@
+<!--
+ - @author: lvcy
+ - @date: 2022-12-30
+ - @description：id-card-reader-page
+ -->
+<template>
+  <div class="id-card-reader-page">
+    <h2>身份证读卡器</h2>
+    <div class="id-card-reader-content">
+      <div class="form-content">
+        <el-form ref="form" :model="idCardData" label-width="100px">
+          <el-form-item label="机器型号">
+            <el-select v-model="readerType" placeholder="请选择机器型号" style="width: 100%">
+              <el-option
+                  v-for="item in selectOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <template
+            v-for="item in formItemList"
+          >
+            <el-col :span="item.span || 12" :key="item.name">
+              <el-form-item
+                  v-if="item.type === 'other'"
+                  :label="item.label"
+                  :placeholder="'请输入'+item.label"
+              >
+                <el-input v-model="idCardData.info[item.name]">
+                  <template slot="suffix">
+                    <id-card-reader-demo
+                        v-if="readerType === idCardReaderType.Demo"
+                        type="text"
+                        tip="身份证读卡器"
+                        @click="handleAction"
+                    ></id-card-reader-demo>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item
+                v-else
+                :key="item.name"
+                :label="item.label"
+                :placeholder="'请输入'+item.label"
+              >
+                <el-input v-model="idCardData.info[item.name]"></el-input>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-form>
+      </div>
+      <div class="image-content">
+        <img :src="idCardData.headImage" v-if="idCardData.headImage">
+        <span v-else>
+          <i class="el-icon-user-solid"></i>
+        </span>
+
+      </div>
+    </div>
+    <div class="action-content" style="text-align: right">
+      <!-- 测试 -->
+      <id-card-reader-demo
+          v-if="readerType === idCardReaderType.Demo"
+          type="primary"
+          @click="handleAction"
+      >身份证读卡器</id-card-reader-demo>
+      <!-- 普天 -->
+      <!-- 精伦 -->
+      <el-button type="default" @click="resetData">重置</el-button>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts">
+
+import {Component, Vue} from "vue-property-decorator";
+import {IDCard} from "@/views/id-card-reader/model/vo/id-card";
+import {
+  IdCardFormItemList,
+  IdCardReaderType,
+  IdCardReaderTypeOptions
+} from "@/views/id-card-reader/model/conatant/id-card-form-attr";
+
+@Component({
+  name: "id-card-reader-page"
+})
+export default class IdCardReaderPage extends Vue {
+  idCardData: IDCard = {info: {}} as IDCard;
+
+  formItemList = IdCardFormItemList;
+
+  readerType = '';
+
+  selectOptions = IdCardReaderTypeOptions;
+
+  idCardReaderType = IdCardReaderType;
+
+
+  handleAction(data: IDCard) {
+    this.idCardData = data;
+  }
+
+  resetData() {
+    this.idCardData = {info: {}} as IDCard;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.id-card-reader-page {
+  .id-card-reader-content {
+    display: flex;
+    margin-top: 20px;
+    .form-content {
+      width: 800px;
+    }
+    .image-content {
+      margin-left: 15px;
+      img,
+      span {
+        display: inline-block;
+        width: 120px;
+        border: 1px solid #cccccc;
+        text-align: center;
+      }
+      i {
+        font-size: 100px;
+        margin: 20px 0;
+      }
+    }
+  }
+  .action-content {
+    width: 800px;
+  }
+}
+</style>

package/src/views/id-card-reader/model/conatant/id-card-form-attr.ts

@@ -0,0 +1,31 @@
+/**
+ * @author: lvcy
+ * @date: 2022-12-30
+ * @description：id-card-form-attr
+ */
+
+export enum IdCardReaderType {
+    Demo = 'demo',
+    PuTian = 'putian',
+    JingLun = 'jinglun'
+}
+
+export const IdCardReaderTypeOptions = [
+    { label: '测试', value: IdCardReaderType.Demo },
+    { label: '普天', value: IdCardReaderType.PuTian },
+    { label: '精伦', value: IdCardReaderType.JingLun},
+]
+
+export const IdCardFormItemList = [
+    { name: 'name', label: '姓名', type: 'other' },
+    { name: 'cardId', label: '证件号码', },
+    { name: 'sex', label: '性别', },
+    { name: 'nation', label: '民族', },
+    { name: 'birthday', label: '出生日期', },
+    { name: 'police', label: '签发机关', },
+    { name: 'validStart', label: '有效期开始', },
+    { name: 'validEnd', label: '有效期结束', },
+    { name: 'sexCode', label: '性别编码', },
+    { name: 'nationCode', label: '民族编码', },
+    { name: 'address', label: '地址', span: 24},
+]

package/src/views/id-card-reader/model/vo/id-card.ts

@@ -0,0 +1,44 @@
+/**
+ * @author: lvcy
+ * @date: 2022-12-30
+ * @description：id-card
+ */
+/**
+ * 身份证信息
+ *
+ */
+export interface IDCard {
+    /** 身份证信息 */
+    info: IDCardInfo;
+    /** 身份证照片 */
+    headImage?: string;
+}
+
+/**
+ * 身份证详细信息
+ *
+ */
+export interface IDCardInfo {
+    /** 姓名 */
+    name: string;
+    /** 性别 */
+    sex: string;
+    /** 民族 */
+    nation: string;
+    /** 出生日期 */
+    birthday: string;
+    /** 地址 */
+    address: string;
+    /** 证件号码 */
+    cardId: string;
+    /** 签发机关 */
+    police?: string;
+    /** 有效期开始 */
+    validStart?: any;
+    /** 有效期结束 */
+    validEnd?: any;
+    /** 性别编码 */
+    sexCode?: string;
+    /** 民族编码 */
+    nationCode?: string;
+}

package/src/views/layout/home-layout.vue

@@ -0,0 +1,72 @@
+<!--
+ - @author: lvcy
+ - @date: 2022-12-30
+ - @description：home-layout
+ -->
+<template>
+  <el-container
+    class="home-layout"
+  >
+    <el-header>
+      <h2>统一对外插件平台Demo</h2>
+    </el-header>
+    <el-container>
+      <el-aside width="200px">
+
+        <el-menu
+            :default-active="activeIndex"
+            :default-openeds="openedMenuList"
+            class="el-menu-vertical-demo"
+            @select="handleSelectMenu"
+        >
+          <template v-for="menu in menuList">
+            <el-menu-item
+                :key="menu.index"
+                :index="menu.index">
+              <template slot="title">
+                <i :class="menu.icon"></i>
+                <span>{{ menu.title }}</span>
+              </template>
+            </el-menu-item>
+          </template>
+        </el-menu>
+      </el-aside>
+      <el-main>
+        <router-view/>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+import {MenuDataList} from "@/views/layout/model/menu-data";
+
+@Component({
+  name: "home-layout"
+})
+export default class HomeLayout extends Vue {
+
+  openedMenuList = [MenuDataList?.[0]?.index ?? '']
+
+  activeIndex = 'id-card-reader'
+  menuList = MenuDataList
+
+  created() {
+    this.$router.push(`/home/id-card-reader`)
+  }
+
+  handleSelectMenu(path: string) {
+    this.$router.push(`/home/${path}`)
+  }
+}
+</script>
+
+<style lang="scss">
+.home-layout {
+  height: 100%;
+  .el-main {
+    padding: 0 8px;
+  }
+}
+</style>

package/src/views/layout/model/menu-data.ts

@@ -0,0 +1,29 @@
+/**
+ * @author: lvcy
+ * @date: 2022-12-30
+ * @description：menu-data
+ */
+
+export interface MenuItemBase {
+    index: string,
+    title: string,
+    icon: string,
+}
+
+export interface MenuItem<T = any> extends MenuItemBase {
+    children?: MenuItem<T>[];
+    data?: T
+}
+
+export const MenuDataList: MenuItem[] = [
+    {
+        index: 'id-card-reader',
+        title: '身份证读卡器',
+        icon: 'el-icon-postcard',
+    },
+    {
+        index: 'scan',
+        title: '扫描设备',
+        icon: 'el-icon-picture-outline',
+    }
+]

package/src/views/scan/scan-page.vue

@@ -0,0 +1,56 @@
+<!--
+ - @author: lvcy
+ - @date: 2023-01-09
+ - @description：scan-page
+ -->
+<template>
+  <div class="scan-page">
+    <div class="" style="margin-bottom: 30px">
+      <h3>按钮弹框模式：</h3>
+      <scanner-high-camera-jieyu
+          open-mode="dialog"
+          icon="el-icon-picture-outline"
+          label="影像扫描"
+          type="primary"
+          size="mini"
+          @send-scanner-result="getScannerResult"
+      ></scanner-high-camera-jieyu>
+    </div>
+<!--      <scanner-high-camera-jieyu-->
+<!--        @send-scanner-result="getScannerResultByIframeMode"-->
+<!--      ></scanner-high-camera-jieyu>-->
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+
+@Component({
+  name: 'scan-page',
+})
+export default class ScanPage extends Vue {
+
+
+  getScannerResult(src: string) {
+    console.log('dialog=>', src)
+  }
+
+  getScannerResultByIframeMode(src: string) {
+    // console.log('iframe=>', src);
+    window.parent.postMessage({
+      type: 'scanner',
+      data: {
+        src: src
+      },
+    }, '*')
+  }
+
+
+}
+</script>
+
+<style scoped lang="scss">
+.scan-page {
+  height: 100%;
+}
+</style>