UNPKG

cbim-common-components

Version:

``` npm install --save cbim-common-components ```

158 lines (130 loc) 3.69 kB
## Start ### 安装 ``` npm install --save cbim-common-components ``` ### 使用 ```ts import { ProjDocArchiveSelector } from 'cbim-common-components'; // 如果全局引入了就无需在使用的位置引入 import "cbim-common-components/style.css"; ``` 注意: 1. 使用的项目的构建配置中,需要添加`resolve.alias`配置项,如下: ```js resolve: { alias: { 'vue': path.resolve(__dirname, 'node_modules/vue'), }, }, ``` ### 示例 #### `ProjDocArchiveSelector`组件 - 使用示例 ```vue <template> <div class="content"> <Button @click="onClick">选择归档文件</Button> <ProjDocArchiveSelector ref="el" title="选择归档文件" from="sign" baseURL="/api" :isFolder="false" :single="false" projectId="1134462444210982912" docProjectId="1134462443644751872" errorTipText="请选择文件!" @onSave="onSave" /> </div> </template> <script lang="ts" setup> import { ref } from "vue"; import { ProjDocArchiveSelector } from "cbim-common-components"; import { Button } from "ant-design-vue"; import "cbim-common-components/style.css"; const el: any = ref(null); const onClick = () => { el.value?.show() }; const onSave = (res: any) => { console.log("onSave", res); }; </script> ``` - 参数说明 |参数名|参数类型|参数说明|是否必填| |--|--|--|--| |docProjectId|String|项目id|是| |projectId|String|子项id,没有传项目id|是| |title|String|弹窗标题|否| |from|String|来源|否| |baseURL|String|网关地址|否| |single|Boolean|是否单选,默认多选|否| |isFolder|Boolean|是否文件夹|否| |errorTipText|String|错误提示|否| |onSave|Function|保存回调|否| |showMask|Boolean|是否显示遮罩|否| |destroyOnClose|Boolean|关闭时销毁|否| #### `ProjDocFormSelector`组件 - 使用示例 ```vue <template> <div class="content"> <Button @click="onClick">选择表单</Button> <ProjDocFormSelector ref="el" title="选择表单" baseURL="https://test6-gw.cbim.org.cn" :single="false" subProjectId="1134462444210982912" projectId="1134462443644751872" accountId="1074041648209756161" userId="901417056736514048" errorTipText="请选择表单!" @onSave="onSave" /> </div> </template> <script lang="ts" setup> import { ref } from "vue"; import { ProjDocFormSelector } from "cbim-common-components"; import { Button } from "ant-design-vue"; import "cbim-common-components/style.css"; const el: any = ref(null); const onClick = () => { el.value?.show() }; const onSave = (res: any) => { console.log("onSave", res); }; </script> ``` > 此组件依赖`cbim-table-gx`,请先安装`cbim-table-gx`并全局引入 ```ts // entry.ts import { createApp } from 'vue' import App from './App.vue' /** 1 */ import cbimTableGx from 'cbim-table-gx' import 'cbim-table-gx/cbim-table.css' const app = createApp(App) /** 2 */ app.use(cbimTableGx) app.mount('#app') ``` - 参数说明 |参数名|参数类型|参数说明|是否必填| |--|--|--|--| |projectId|String|项目id|是| |subProjectId|String|子项id,没有传项目id|是| |accountId|String|企业accountId|是| |userId|String|用户id|是| |title|String|弹窗标题|否| |baseURL|String|网关地址|否| |single|Boolean|是否单选,默认多选|否| |errorTipText|String|错误提示|否| |onSave|Function|保存回调|否| |showMask|Boolean|是否显示遮罩|否| |destroyOnClose|Boolean|关闭时销毁|否|