@szgc/wbench
v1.0.0-main.131
Published
WEB 端工作台组件
Downloads
1,211
Readme
@szgc/wbech
WEB 端工作台组件
安装
npm i @szgc/wbench -S
使用
- ES
import { SzgcWbench } from "@szgc/wbench";
- 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";
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";
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:
- 表格全部自己写,slot 可以不写;
- 插入列,v-slot:columns;
- 插入多余按钮 v-slot:btn="{row, $index}";
- cols 表示搜索栏按几列排列
- 视图新增展示模式,只需设置 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 slot-scope="{ 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 slot-scope="{row}">
<el-input v-model="row.viewValue"></el-input>
</template>
</el-table-column>
<el-table-column align="center" width="145px" label="测试列3">
<template slot-scope="{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>