@szgc/wbench-v2 v1.0.178

@szgc/wbech-v2

WEB 端工作台组件,接入2.0平台

安装

npm i @szgc/wbench-v2 -S

使用

• ES

import { SzgcWbench } from "@szgc/wbench-v2";

• HTML

<szgc-wbench></szgc-wbench> client=web/mobile 是PC还是pad tab = 0 / 1 0显示视图，1简洁视图 topShow
是否显示附件/抄送人 hideTabs=todo,done,wait,sent,fine,term,cc,mine,todo-all,done-all
需要隐藏的tab。这里是将所有tab列出来的。 fileShow 是否在弹窗展示附件模块

金格签章

默认是没有启用签章资源的，如果需要使用电子签章需要在入口 js 中调用电子签章装载功能

import { kinggrid_installer } from "@szgc/wbench-v2";
Vue.use(kinggrid_installer);

软航控件

默认没有启用软航控件，如果需要使用软航控件需要在入口 js 中调用软航控件装载功能

软航控件工具类类型定义

/**
 * 软航控件工具类
 */
class NtkoAddon {
  use(options: {
    /**
     * 软航服务器地址，必须以“/”符号结尾。例如：http://192.168.0.224:1986/ntkoSignServer/
     */
    svr_url: string;
    /**
     * 平台账号和软航账号的映射转换方案
     */
    account_convert?: ((current: PltUser) => string | Promise<string>) | string;
    /**
     * 平台密码和软航密码的映射转换方案
     */
    password_convert?: ((current: PltUser) => string | Promise<string>) | string;
  }): Promise<{ success: boolean; message: string; error: any }>;
}

/**
 * 导出软航控件工具类实例
 */
export const ntko_addon: NtkoAddon;

软航控件工具类使用示例

import { ntko_addon } from "@szgc/wbench-v2";

ntko_addon
  .use({
    // 软航服务器地址，必须以“/”符号结尾。例如：http://192.168.0.224:1986/ntkoSignServer/
    svr_url: string;
    // 平台账号和软航账号的映射转换方案，非必需
    // ===================================================
    // ======================用法示例======================
    // ===================================================
    // @example 1、普通函数
    // account_convert: (current) => {
    //   return current.account
    // },
    // @example 2、异步函数，返回 Promise
    // account_convert: async (current) => {
    //   return await fetch("xxxxxx");
    // },
    // @example 3、字符串
    account_convert: "admin",
    // ===================================================
    // ===================================================
    // 平台密码和软航密码的映射转换方案，非必需。用法同 【account_convert】
    password_convert: "123456";
  }).then((res) => {
    const {success, message, error} = res;
    console.log(res);
  });

视图展示

需要传入一个视图 id。label-width 可定义搜索栏文字宽度，last-width 可定义表格操作列宽度。size 可定义搜索栏大小(mini,small,large)。 表格可选择全部自己写样式或者自己插入部分列。操作列可插入多余按钮。均通过 slot 实现。slot 均可返回当前行数据。 slot 需要对应 name:

1. 表格全部自己写，slot 可以不写;
2. 插入列，v-slot:columns;
3. 插入多余按钮 v-slot:btn="{row, $index}";
4. cols 表示搜索栏按几列排列
5. 视图新增展示模式，只需设置 type="view"，出来的是一个列表及穿梭框，可以单选/多选列表，可以通过 getViewList 获取选中条目(选中可以为空)，具体可参考 example/formtoview。

<szgc-model-view
  v-if="tableKey"
  :cols="3"
  :view-id="tableKey"
  :label-width="'90px'"
  :last-width="'330px'"
>
  <!--全部自定义-->
  <!--            <template>-->
  <!--              <el-table-column label="测试列1">-->
  <!--                <template>1</template>-->
  <!--              </el-table-column>-->
  <!--              <el-table-column label="测试列2">-->
  <!--                <template>2</template>-->
  <!--              </el-table-column>-->
  <!--              <el-table-column label="测试列1">-->
  <!--                <template>3</template>-->
  <!--              </el-table-column>-->
  <!--              <el-table-column label="操作">-->
  <!--                <template #default="{ row, $index }">-->
  <!--                  <div class="table-btn" @click="testEvt(row)">-->
  <!--                    <i class="el-icon-document"></i>-->
  <!--                    <span>详情</span>-->
  <!--                  </div>-->
  <!--                  <div class="table-btn" @click="testEvt(row)">-->
  <!--                    <i class="el-icon-edit"></i>-->
  <!--                    <span>修改</span>-->
  <!--                  </div>-->
  <!--                  <div class="table-btn" @click="testEvt(row)">-->
  <!--                    <i class="el-icon-delete"></i>-->
  <!--                    <span>删除</span>-->
  <!--                  </div>-->
  <!--                </template>-->
  <!--              </el-table-column>-->
  <!--            </template>-->
  <!--自定义列-->
  <template v-slot:columns>
    <el-table-column label="测试列1" prop="propertyName"></el-table-column>
    <el-table-column align="center" width="145px" label="测试列2">
      <template #default="{row}">
        <el-input v-model="row.viewValue"></el-input>
      </template>
    </el-table-column>
    <el-table-column align="center" width="145px" label="测试列3">
      <template #default="{row, $index}">
        <el-button @click="testEvt(row,'xxxx1', $index)">xxxx{{ ($index + 1) }}</el-button>
      </template>
    </el-table-column>
  </template>
  <!--操作列按钮-->
  <template v-slot:btn="{row, $index}">
    <div>
      <el-button @click="testEvt(row,'xxxx1', $index)">xxxx1</el-button>
      <el-button @click="testEvt(row,'xxxx2', $index)">xxxx2</el-button>
      <el-button @click="testEvt(row,'xxxx3', $index)">xxxx3</el-button>
      <el-button @click="testEvt(row,'xxxx4', $index)">xxxx4</el-button>
    </div>
  </template>
</szgc-model-view>

契约锁 API 示例

介绍

本示例展示了如何使用 ContractLock 类来处理合同的上传、签章、查看和删除操作。通过 Vue 和 TypeScript 实现了一个简单的用户界面，用户可以上传 PDF 文件，进行签章操作，并查看或删除已签章的文件。

示例代码

Vue 组件

<template>
  <div class="page-contract-lock">
    <template v-if="!contractLock.constractId">
      <el-upload
        class="avatar-uploader"
        :multiple="false"
        :action="'text'"
        accept=".pdf"
        :auto-upload="false"
        :on-change="onFileChange"
        :show-file-list="false"
      >
        <div class="uptxt" type="text">点击上传</div>
      </el-upload>
    </template>

    <div class="fileinfo" v-else>
      <div
        class="filename"
        v-text="contractLock.ext && contractLock.ext.fileName"
        :title="contractLock.ext && contractLock.ext.fileName"
      ></div>
      <div class="btns">
        <span class="btn" @click="onSignButtonClick">签章</span>
        <span class="btn" @click="onViewButtonClick">查看</span>
        <span class="btn" @click="onDeleteButtonClick">删除</span>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 契约锁api示例
 */

import { ContractLock } from "@szgc/wbench-v2";

export default {
  name: "ContractLock",
  data() {
    return {
      contractLock: {}
    };
  },
  mounted() {
    /**
     * 新增时只需要简单传参，甚至不需要传
     */
    this.contractLock = new ContractLock({
      onSigned: this.onSigned
    });
    /**
     * 如果是回显，则这样传参数
     * this.contractLock = new ContractLock({
     * signatoryUserName: "周航",
     * fileName: "test.pdf",
     * attId: "1301607796025962496",
     * requestRelativeUri: "/norm/plat-app-proc/corporates/1296501054875189248/test.pdf",
     * constractId: "3289547015124369898",
     * onSigned: this.onSigned
     *  });
    */
  },
  methods: {
    async onFileChange(file) {
      const res = await this.contractLock.createByCategory(file, "test");
      console.log(res);
    },
    onSignButtonClick() {
      this.contractLock.addSignatoryUserName("周航");
    },
    onViewButtonClick() {
      this.contractLock.viewContract();
    },
    onDeleteButtonClick() {
      this.contractLock.deleteContract();
    },
    onSigned(data) {
      console.log(this, "onsigned",data);
    }
  }
};
</script>

<style lang="scss" scoped>
.uptxt {
  cursor: pointer;
  color: var(--szgc-element-primary);
}
.avatar-uploader {
  text-align: left;
}
.fileinfo {
  display: flex;
  text-align: left;
  border: 1px solid #dcdfe6;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 4px;
  .filename {
    width: calc(100% - 190px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: var(--szgc-element-success-color);
    cursor: pointer;
  }
  .btns {
    width: 180px;
    margin-left: 10px;
    color: var(--szgc-element-primary);
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    .btn {
      cursor: pointer;
      transition: color ease 0.3s;
      & + .btn {
        margin-left: 10px;
      }
    }
  }
}
.rh-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .rh-reader {
    height: calc(100% - 45px);
    overflow: hidden;
  }
  .rh-footer {
    height: 45px;
    text-align: center;
    line-height: 45px;
    box-sizing: border-box;
    border-top: 1px solid #dcdfe6;
  }
}
</style>