@danieldx/ncadmin-core

ncadmin-core

ncadmin的核心组件库，包括配置开发的查询列表，编辑，详情页，弹窗等

install

npm install ncadmin-core

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">
    <!--
      当组件需要与弹窗进行交互时（比如通知弹窗关闭），请按下面的例子填写slot-scope和modal-id
    -->
    <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,
              name: '',   // 按钮名称，默认确定
              showLoading: true, // 是否在异步请求时显示loading状态
            },
            cancel: { // 取消按钮
              enable: true,
              name: '',   // 取消
            },
            others: [
              {
                enable: true,
                name: '',   // 按钮名称
                eventName: '', // 按钮触发事件名称
                close: true, // 操作后是否关闭弹窗
                showLoading: false, // 是否在异步请求时显示loading状态，true的情况eventName必须提供
              }
            ]
          }
        }      
      }
    }
  }
</script>

弹窗内容组件开发规则和示例

<template>
</template>

<script>
  import ncadminCore from '@danieldx/ncadmin-core';
  const { eventHub, modalInsideMixins } = ncadminCore;
  
  export default {

    mixins: [modalInsideMixins],

    methods: {

      /**
       * 确认按钮事件处理
       * 请务必在执行确认操作后调用done方法。如果请求失败，把Error对象传给done
       * 如 成功：done()或done(data) 失败：done(e)
       */ 
      _confirmHandler(done) { },

      /**
       * 自定义的其它按钮的事件处理
       * 请务必在执行确认操作后调用done方法。如果请求失败，把Error对象传给done
       * 如 成功：done()或done(data) 失败：done(e)
       */ 
      _btnsEventHandler(config, done) { },
    }
  }
</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: {},
          // value 传时默认值如下
          valueData: {
            pageNum: 1,
            pageSize: 20,
            query: {}
          }
      }
    }
  }
</script>