ncadmin-core
ncadmin的核心组件库，包括配置开发的查询列表，编辑，详情页，弹窗等
install
Usage
import {
ncformCommon,
eventHub,
} from 'ncadmin-core';
<nca-xxx></nca-xxx>
工具库
eventHub
事件总线，用于全局触发和监听事件
import ncadminCore from 'ncadmin-core';
const { eventHub } = ncadminCore;
eventHub.$on();
eventHub.$emit();
ncformCommon
ncform的通用类库，请参考ncform-common项目的文档
组件列表
ncform
请参考ncform项目的文档
nca-detail
<template>
<nca-detail></nca-detail>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
nca-detail-modal
<template>
<nca-detail-modal></nca-detail-modal>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
nca-edit
<template>
<nca-edit></nca-edit>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
nca-edit-modal
<template>
<nca-edit-modal></nca-edit-modal>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
nca-list
<template>
<nca-list></nca-list>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
nca-modal
弹窗组件，可配置弹窗的标题，底部按钮
弹窗里面的内容需要当一个组件来开发，组件需遵循nca-modal内容组件的规则来开发
<template>
<nca-modal :visible.sync="visible" :modal-config="modalConfig">
<component slot-scope="modalProps" :modal-id="modalProps.modalId"></component>
</nca-modal>
</template>
<script>
export default {
data() {
return {
visible: false,
modalConfig: {
title: '',
buttons: {
confirm: {
enable: true
},
cancel: {
enable: true
},
others: [
{
enable: true,
name: '',
eventName: '',
close: true
}
]
}
}
}
}
}
</script>
弹窗内容组件开发规则和示例
<template>
</template>
<script>
import ncadminCore from 'ncadmin-core';
const { eventHub } = ncadminCore;
export default {
props: ["modalId"],
created() {
eventHub.$on(`fromModal_${this.modalId}`, config => {
switch (config.eventName) {
case "modalConfirm":
break;
case "commonEditCancel":
break;
}
});
},
mounted() {
eventHub.$emit(`toModal_${this.modalId}`, {
eventName: 'modalCancel'
});
}
}
</script>
Widgets
nca-label
component: {
name: 'nca-label',
config: {
color: ''
},
value: ''
}
nca-image
component: {
name: 'nca-image',
config: {
maxWidth: ''
},
value: ''
}
组件使用方法
edit-page.vue
通过配置开发一个新建/编辑的页面
（根据配置中的idField字段，在$route中取页面唯一值（通常为Id）。值为0时，页面为新建状态，值为其他值时，页面为编辑状态。）
具体配置参考文档
示例
<template>
<edit-page :config="config"></edit-page>
</template>
<script>
import ncadminCore from 'ncadmin-core';
const editPage = ncadminCore.edit;
export default {
component: {
editPage
},
data: {
return {
config: {}
}
}
}
</script>
list-page.vue
通过配置开发一个查询列表的页面
具体配置参考文档
示例
<template>
<list-page :config="config" v-model="valueData"></list-page>
</template>
<script>
import ncadminCore from 'ncadmin-core';
const listPage = ncadminCore.list;
export default {
component: {
listPage
},
data: {
return {
config: {},
valueData: {
pageNum: 1,
pageSize: 20,
query: {}
}
}
}
}
</script>