frontdev v1.0.6

前端积累

安装

    npm install frontdev --s-d

模块中提供的功能

• javaScript 常用函数库
• vue 组件

提供的函数库

使用

• 下面是代码示例

#提供的js函数库，例
    import {add} from "frontdev"

提供的组件

• DAOTable组件

  • DAOTable组件说明文档

    该组件适用于结构类似的数据列表，有导出、分页、查询、选择列、新建、编辑、删除等功能

    这些功能可动态的进行设置使用权限。

包含的文件

 整个组件由三个文件组成,分别是DAOTable.vue 、DAOFieldBox.vue 、core.js。
 使用时，需要将这三个文件放到到项目中。

引用

使用时，只需在父组件中引入DAOTabel.vue组件。

#引入文件，这里注意是自己的文件路径
import DAOTable from './DAOTable.vue';

#在components中添加组件
components: {
    DAOTable,
},

基础使用

在父组件中使用组件<DAOTable>，按下代码使用，就可以进行数据展示了。
    api:为必须项，表示连接的数据地址，通过设置该属性的值进行数据访问，这里必须保证接口是正常的。
    ref:可选项，进行标识，自定义新建和编辑页面时，设置值后，
        能获取到组件内部的数据接口(editFields)，【详细描述见-自定义新增和编辑页面】
    title:为是数据列表的标题，为可选项。

注意该组件布局依赖父元素，组件的父元素的position必须为定位属性（relativ或者absolute），且必须有高度

  <template>
  <div>
    <h3>Demo 演示</h3>
    <div style="position:relative;height:600px">
      <DAOTable ref="table"
                api="http://47.105.44.230:9990/GroupBuyApi"
                style="height:100%"
              >
      </DAOTable>
    </div>
  </div>  
</template>
<script>
  import DAOTable from './DAOTable.vue';
    export default {
    components: {
      DAOTable,
    },
  }
</script>

默认功能

组件默认带有查询功能，分页功能；可查询的字段由服务器返回。

基础组件效果图

组件扩展功能

对于数据列表，该组件还提供了许多扩展功能，包括新增、编辑、删除、导出、选择列。
默认情况下这些功能是不显示的，通过设置属性来控制功能的呈现。

属性列表

    1、btnCreateVisible：控制新增功能按钮的可视，
                         值为true时表示可视，false为不可视。属性值类型为Boolean
    2、btnEditVisible: 控制编辑功能按钮的可视，
                       值为true时表示可视，false为不可视。属性值类型为Boolean
    3、btnDeleteVisible: 控制删除功能按钮的可视，
                         值为true时表示可视，false为不可视。属性值类型为Boolean
    4、btnExportVisible: 控制导出功能按钮的可视，
                         值为true时表示可视，false为不可视。属性值类型为Boolean
    5、btnSelectVisible: 控制选择列功能按钮的可视，
                         值为true时表示可视，false为不可视。属性值类型为Boolean

扩展功能代码

新增、编辑、删除的扩展功能的使用如下，其他功能类似

     <DAOTable  ref="table"
                api="http://127.0.0.1:8900/VehicleLineApi"
                :btnCreateVisible="true"
                :btnEditVisible="true"
                :btnDeleteVisible="true"
     >
     </DAOTable>

效果图

自定义新增和编辑页面

默认新增页面

自定义页面

 <DAOTable ref="table"
                api="http://127.0.0.1:8900/VehicleLineApi"
                :btnCreateVisible="true"
                :btnEditVisible="true"
                :btnDeleteVisible="true"
                >
        <template>
            这是插槽，进行内容分发，可在这里根据业务需求进行自定义新增和编辑页面。
        </template>
 </DAOTable>

效果图

  1、在template里面可以插入任何代码，如文本、标签、组件。但需要注意的是，
    template里的数据作用域不包括DAOTabel里的数据，它只能访问当前组件的数据作用域。

  2、自定义页面时，不包括确认和取消按钮，组件内部已经定义了该按钮，
    当需要得到触发事件来执行自定义代码片段时，如下使用

    当前触发的事件类型可通过mes的值进行判断，包括：
        1、close ：对话框关闭事件类型
        2、edit ：编辑按钮触发的事件
        3、create ：新建按钮触发的事件
        4、confirm：点击提交按钮触发的事件
    根据不同的事件类型，自定义不同事件触发是需要执行的代码片段，
    在@btn="函数名"中的函数中定义，如在下代码的handel_btn函数中可以进行定义

#通过添加@btn="handel_btn"
<DAOTable ref="table"
                api="http://127.0.0.1:8900/VehicleLineApi"
                :btnCreateVisible="true"
                :btnEditVisible="true"
                :btnDeleteVisible="true"
                @btn="handel_btn">
</DAOTable>

# handel_btn为外部触发的函数，有两个参数
handel_btn(mes,data) {
# 两个参数，mes返回事件类型 如 close edit create confirm，点击功能按钮将返回相应的事件名称
# data是只有mes==edit的情况下才有数据，其他为undefined，
# 通过不同的事件类型，进行不同的操作
     console.log(mes);
},
          

  3、自定义新增页面时，必须将外部的数据传入组件内部，否则将无法把数据提交到服务器。

  4、如何将数据传入内部呢？
     DAOTable组件将提供一个editFields数据接口，该数据类型为Object，
     该对象包含了每个字段的数据信息，只需在提交按钮触发时（即mes==confirm的条件下）
     将自定义新增和编辑页面中的字段数据，对应修改到editFields中每个字段的val去。
     自定义页面时，可以从editFields中得到字段信息，

  5、如何取到editFields这个数据？ this.$refs.table.editFields；通过$refs可以获取到该数据
      当自定义页面时，需要设置组件的ref
  6、数据校验时，通过设置 this.$refs.table.isConfirm=false,可以阻止数据提交,默认情况为true
    代码示例如下

  let table = this.$refs.table;
  if (!this.componentData.Name)
     {
            this.$message.error("线路名称不能为空");
            #这里将阻止DAOTable向服务器提交数据
            table.isConfirm = false;
            return;
     }
    #校验通过后将数据修改到editFields中去
    table.editFields.Enterprise.val = this.componentData.Enterprise;
    table.editFields.Name.val = this.componentData.Name;
    table.editFields.Stations.val = this.componentData.Stations; 
               

组件样式重置

<DAOTable ref="table"
                api="http://127.0.0.1:8900/VehicleLineApi"
                :btnCreateVisible="true"
                :btnEditVisible="true"
                :btnDeleteVisible="true"
                dlgWidth="1000px"
                >

dlgWidth:该属性是设置新建、编辑弹出框的宽度，默认情况是父元素的80%，当自定义页面时，可根据实际情况，外部进行重置。