简体中文 | English

企业工作流UI组件库

安装

$ npm install sgj-workflow-ui

使用方法

完整引入

import Vue from 'vue'
import SgjWorkflowUi from 'sgj-workflow-ui'
import 'sgj-workflow-ui/dist/index.css'

Vue.use(SgjWorkflowUi)

按需引入

import Vue from 'vue'
import { PjActvBasicSetting, OrgSelect, OrgTransfer } from 'sgj-workflow-ui'
import 'sgj-workflow-ui/dist/index.css'

Vue.use(PjActvBasicSetting)
// 注册fc-org-select组件
Vue.component('fc-org-select', OrgSelect)
Vue.component('fc-org-transfer', OrgTransfer)

组件列表

PjActvBasicSetting

工作流基础设置组件

属性

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | configType | 配置类型 | String | - |

示例

<template>
  <PjActvBasicSetting configType="wams" />
</template>

fc-org-select

组织机构选择组件，支持用户、部门、角色选择

属性

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value/v-model | 选中的用户数据 | Object | {} | | tabList | 可选择的类型 | Array | ['dep'] | | title | 弹框标题 | String | '组织机构' | | buttonType | 按钮类型 | String | 'input' | | maxNum | 最大可选数量 | Number | 99 | | disabled | 是否禁用 | Boolean | false | | searchable | 是否支持搜索 | Boolean | true |

事件

| 事件名 | 参数 | 说明 | | --- | --- | --- | | input | value | 选择变化时触发 | | change | value | 选择确认时触发 |

示例

<template>
  <div>
    <fc-org-select 
      v-model="selectedUsers" 
      buttonType="button" 
      title="选择用户" 
      :maxNum="1"
      :tabList="['user']" 
      @input="onUserChange"
    />
  </div>
</template>

<script>
import { OrgSelect } from 'sgj-workflow-ui'

export default {
  components: {
    'fc-org-select': OrgSelect
  },
  data() {
    return {
      selectedUsers: {}
    }
  },
  methods: {
    onUserChange(value) {
      console.log('用户选择变化:', value)
    }
  }
}
</script>

外部系统使用指南

问题描述

外部系统在使用 fc-org-select 组件时可能出现以下错误：

[Vue warn]: Unknown custom element: <fc-org-select> - did you register the component correctly?

解决方案

方案1：使用库的install方法（推荐）

import WorkflowUI from 'sgj-workflow-ui'

// 在Vue实例创建前注册组件
Vue.use(WorkflowUI)

方案2：手动注册组件

import { OrgSelect, OrgTransfer } from 'sgj-workflow-ui'

// 手动注册组件
Vue.component('fc-org-select', OrgSelect)
Vue.component('fc-org-transfer', OrgTransfer)

方案3：在组件中局部注册

<template>
  <fc-org-select v-model="selectedUsers" :tabList="['user']" />
</template>

<script>
import { OrgSelect } from 'sgj-workflow-ui'

export default {
  components: {
    'fc-org-select': OrgSelect
  }
}
</script>

详细使用指南请参考 EXTERNAL_USAGE_GUIDE.md

开发

# 克隆项目
git clone https://github.com/your-username/sgj-workflow-ui.git

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建库
npm run build:lib

发布

# 登录npm
npm login

# 发布包
npm version patch && npm publish

许可证

MIT

More instructions at documentation.