cbim-common-components
Version:
``` npm install --save cbim-common-components ```
158 lines (130 loc) • 3.69 kB
Markdown
## 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|关闭时销毁|否|