nbpi-commoncomponent v0.2.18

nbpi-commoncomponent

demo地址

使用方式

选择器组件

// 引入组件
import { Pubselector } from 'nbpi-commoncomponent'

// 示例 使用组件
<template>
	<div class="explame">
		<a-card title="选择器演示">
      <button @click="showModal">显示选择器</button>
      <Pubselector v-model="show" :config="config" :data="data" @ok="getData" @cancel="cancel" />
    </a-card>
	</div>
</template>

<script>
import { Pubselector } from 'nbpi-commoncomponent'

export default {
	components: {
		Pubselector
	},
	data () {
		return {
			show: false,
			// 基本配置
			config: {
				// 接口地址域名
				baseURL: '',
				// 组织code
				organizationCode: '',
				// 应用的唯一标识key
				appKey: '',
				// 应用的密钥
				appSecret: '',
			},
			// 传入默认选中的值
			data: {
				
			}
		}
	},
	methods: {
		getData (e) {
			console.log('选中的值', e)
		},
		cancel () {
			console.log('关闭弹窗')
		},
		showModal() {
			this.data = {
			// 已选部门
				"departList": [
						{
							// 组织code
							"organizationCode": "",
							// 组织名
							"organizationName": "宁波市纪委市监委机关",
							// 组织下的人员总数
							"count": "200"
						}
				],
				// 已选职员
				"userList": [
						{
							// 人员code
							"employeeCode": "",
							// 姓名
							"employeeName": "李军",
							// 职位
							"govEmpPosJob": null
						}
				]
		}
			this.show = true;
		}
	},
	created() {
		
	}
}
</script>
<style scoped>
  .explame {
    padding: 12px;
    box-sizing: border-box;
  }
</style>

自定义流程组件

<!-- 编流程辑页面 -->
<template>
  <AuditProcess ref="AuditProcess" :templateID="templateID" :isEdit="true" :config="config" @success="success"></AuditProcess>
</template>

<script>
import { AuditProcess } from 'nbpi-commoncomponent'

export default {
  name: 'Edit',
  inject: ['goPage'],
  components: {
    AuditProcess
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          
        }
      }
    },
  },
  data() {
    return {
      templateID: ''
    }
  },
  created() {
    this.templateID = this.$PUBSS.get('templateId')
  },
  methods: {
    success() {
			console.log('保存成功')
      // 返回上一页
      this.goPage(1)
		},
    refresh() {
			this.$refs.AuditProcess.refresh();
    }
  }
}
</script>

<!-- 预览页面 --> 
<template>
  <AuditProcess ref="AuditProcess" :isEdit="false" :config="config" @getTemplateId="getTemplateId">
    <a-button slot="button" type="primary" style="margin-left: 12px" @click="toEdit(2)">修改流程</a-button>
  </AuditProcess>
</template>

<script>
import { AuditProcess } from './../../../packages/index'

export default {
  name: 'Preview',
  inject: ['goPage'],
  components: {
    AuditProcess
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          
        }
      }
    },
    templateID: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      templateId: ''
    }
  },
  methods: {
    success() {
			console.log('保存成功')
		},
    getTemplateId(id) {
			this.templateId = id;
      this.$PUBSS.set('templateId', id);
			console.log('获取模板ID', id);
		},
    toEdit(page) {
      this.goPage(page)
    },
    refresh() {
			this.$refs.AuditProcess.refresh();
    }
  }
}
</script>