@szgc/wbench v1.0.0-main.103

@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:

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