fero-toolkit-vue v1.7.7

TOC

源码及演示环境地址

源码：http://192.168.0.221:7003/project-base/admin-demo-vue

演示环境：http://admin-demo.dev.fero.com.cn

项目生成器模板：http://192.168.0.221:7003/liusiyao/vue-template

包管理

上传包

注意：每次更新包，必须修改package.json中的版本号，并执行npm run lib构建 1. 使用用户名密码邮箱登录本地NPM库

npm login -registry http://192.168.0.221:7004/repository/npm-hosted/
Username:npm
Password:1qaz2wsx
Email: npm@fero.com.cn

成功后显示 Logged in as npm on http://192.168.0.221:7004/repository/npm-hosted/.​

2. 执行 npm publish -registry http://192.168.0.221:7004/repository/npm-hosted/

   成功后显示 + fero-toolkit-vue@x.x.x

撤销包版本

npm unpublish fero-toolkit-vue@x.x.x -registry http://192.168.0.221:7004/repository/npm-hosted/

##使用包

npm i -registry http://192.168.0.221:7004/repository/npm-group/fero-toolkit-vue

组件文档

authority-management 权限控制

用于根据授权功能列表进行页面元素的权限控制

依赖store中的featureList

基本用法

基础的组件使用方法

<template>
	<auth componentCode="features-code">
    <el-button type="primary">编辑</el-button>
  </auth>
</template>
<script>
	import auth from '@/components/authority-management'
  export default {
    components: {
    	auth: auth
  	},
  }
</script>

componentCode的值是预先定义好的需要权限控制功能元素的功能code，该code不在功能列表中组件slot内容不会被渲染。

多code共通功能，支持简单逻辑判断

适用于同一个需要控制的元素具有多个功能code，如页面复用等情况

<template>
	<auth :componentCode="{code: ['export-credit-btn', 'approve-export-credit-btn'], condition: 'or'}">
    <el-button type="primary">导出PDF</el-button>
  </auth>
</template>
<script>
	import auth from '@/components/authority-management'
  export default {
    components: {
    	auth: auth
  	},
  }
</script>

componentCode支持传递对象code必须为数组；condition为逻辑判断条件支持or和and，or只要数组中有一个code存在于功能列表中即有权限，and为数组中的code在功能列表中都存在才有权限。

属性

componentCode为对象时

header 头部

固定在页面顶部的全局头部

基本用法

<template>
	<el-container direction="vertical">
    <page-header></page-header>
  </el-container>
</template>
<script>
	import pageHeader from '@/components/header'
  export default {
    components: {
    	'page-header': pageHeader
  	},
  }
</script>

属性

事件

插槽

page-title 标题栏

固定在内容区顶部的标题、操作栏

标题和操作都可通过slot自定义，返回按钮通过属性开启

标题默认通过路由中的meta.title获取当前页面标题，通过meta.parentName递归读取上级页面标题和路径，注意上级路径是使用动态路由(:id这种形式)的自动读取无法动态改变标题需要手动配置。 面包屑 组通过meta.group获取组的名称，首页可配置通过indexObj配置控制首页是否展示于面包屑中，支持boolean和对象形式，对象形式支持自定义面包屑主页名称。

已集成在src/layouts/default.vue中

基本用法

<template>
	<el-main>
    <page-title :showBackBtn="true">
      <template slot="btn-inner">
      	<el-button icon="iconfont icon-xinzeng" type="success">新增</el-button>
    	</template>
		</page-title>
  </el-main>
</template>
<script>
	import pageHeader from '@/components/header'
  export default {
    components: {
    	'page-header': pageHeader
  	},
  }
</script>

标题自定义用法

<template>
	<el-main>
    <page-title :showBackBtn="true">
      <template slot="breadcrumb">
        <el-breadcrumb-item>页面名称</el-breadcrumb-item>
      </template>
      <template slot="btn-inner">
      	<el-button icon="iconfont icon-xinzeng" type="success">新增</el-button>
    	</template>
		</page-title>
  </el-main>
</template>
<script>
	import pageHeader from '@/components/header'
  export default {
    components: {
    	'page-header': pageHeader
  	},
  }
</script>

面包屑首页配置

<template>
  <el-container class="default-layout" direction="vertical">
    <page-header :logoImg="require('../assets/images/logo.png')" :emp-name="empName" @logout="logout"></page-header>
    <el-container class="main-container">
      <page-side :sideMenu="this.$store.state.sideMenu"></page-side>
      <el-main :class="{ 'no-title': !showPageTitle }">
        <page-title :showBackBtn="showBackBtn" v-if="showPageTitle" :indexObj="{ indexTitle: '主页' }">
          <slot name="breadcrumb" slot="breadcrumb"></slot>
          <slot name="btn-inner" slot="btn-inner"></slot>
        </page-title>
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import {cookie} from '../assets/js/config'

export default {
  name: 'default-layout',
}
</script>

属性

indexObj为对象时

插槽

pagination 分页

分页组件，默认layout为 prev, pager, next, jumper可根据需要直接修改组件

基本用法

<template>
	<pagination :total="total" :pageNum="pageNum" :pageSize="pageSize" :pages="pages" :pageId="pageId" @changePageNum="changePageNum"></pagination>
</template>
<script>
	import pagination from '@/components/pagination'
  export default {
    components: {
    	pagination: pagination
  	},
    data () {
      return {
        total: 10,
        pageNum: 1,
        pageSize: 10,
        pages: 1,
        pageId: 'demo1'
      }
    },
    methods: {
      changePageNum ({pageId, pageNum}) {
        console.log({pageId, pageNum})
      }
    }
  }
</script>

属性

事件

search-inner 查询栏

放置查询条件表单的组件,可以通过下拉自定义配置查询项

基本用法

<template>
	<search-inner :searchId="demo1" :searchForm="searchForm" @submit-search="search" @clear-search="reset">
    <template slot-scope="scope">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="文字输入：">
            <el-input placeholder="请输入文字输入" v-model="searchForm.input1"></el-input>
  				</el-form-item>
 		 		</el-col>
  		</el-row>
		</template>
	</search-inner>
</template>
<script>
	import searchInner from '@/components/search-inner'
  export default {
    components: {
    	'page-header': pageHeader
  	},
    data () {
      return {
        searchForm: {
          input1: ''
        }
      }
    },
    methods: {
      search ({searchId, searchForm}) {
      console.log(searchId, searchForm)
    },
    reset (searchId) {
      console.log('清空', searchId)
    },
    }
  }
</script>

配置自定义查询项用法

<template>
	<search-inner :searchId="demo1" :moreSearch="true" :searchOption="searchOption" :searchForm="searchForm" @submit-search="search" @clear-search="reset" @selectSearch="selectSearch">
	</search-inner>
</template>
<script>
	import searchInner from '@/components/search-inner'
  export default {
    components: {
    	'page-header': pageHeader
  	},
    data () {
      return {
        searchForm: {
          input1: ''
        }，
        searchOption: [
                {
                  key: 1,
                  fieldType: 'input',
                  label: '用信单号',
                  placeholder: '请输入文字',
                  isMust: true,
                  prop: 'no',
                  value: ''
                },
                {
                  key: 4,
                  fieldType: 'input',
                  label: '申请人',
                  placeholder: '请输入文字',
                  isMust: false,
                  prop: 'name',
                  value: ''
                },
                {
                  key: 5,
                  fieldType: 'input',
                  label: '授信单号',
                  placeholder: '请输入文字',
                  isMust: false,
                  prop: 'no2',
                  value: ''
                },
                {
                  key: 2,
                  fieldType: 'select',
                  label: '状态',
                  placeholder: '请选择状态',
                  isMust: false,
                  prop: 'status',
                  options: [
                    {
                      label: '通过',
                      value: 1
                    },
                    {
                      label: '驳回',
                      value: 2
                    }
                  ],
                  value: ''
                },
                {
                  key: 3,
                  fieldType: 'datetimerange',
                  isMust: false,
                  label: '时间范围',
                  startPlaceholder: '开始时间',
                  endPlaceholder: '结束时间',
                  prop: 'money',
                  value: []
                }
              ]
      }
    },
    methods: {
      search ({searchId, searchForm}) {
      console.log(searchId, searchForm)
    },
    reset (searchId) {
      console.log('清空', searchId)
    },
    selectSearch (value) {
          // 把选择的查询项传给table-inner的columnProp属性
          this.columnProp = value
          // 因为表格列增加了，所以要重新获取表格数据
        },
    }
  }
</script>

属性

searchOption可配置项

插槽

事件

side 侧栏

固定在页面左侧的菜单栏

已集成在src/layouts/default.vue中

基本用法

<template>
	<el-container class="main-container">
      <page-side></page-side>
  </el-container>
</template>
<script>
	import pageSide from '@/components/side'
  export default {
    components: {
    	'page-side': pageSide
  	},
  }

可配置侧栏显示隐藏

isSide的值是预先定义好的,用于配置侧栏显示隐藏功能。

已集成在src/layouts/default.vue中

<template>
	<el-container class="main-container">
      <page-side :isSide='true'></page-side>
  </el-container>
</template>
<script>
	import pageSide from '@/components/side'
  export default {
    components: {
    	'page-side': pageSide
  	}
  }

属性

table-inner 表格容器

整合标题、按钮、表格和分页的综合表格区域,可自定义要展示的列表项

基本用法

<template>
	<table-inner title="列表" :table-data="tableList.list" :pageNum="tableList.pageNum" :pageSize="tableList.pageSize" :pages="tableList.pages" pageId="test1" @changePageNum="changePageNum">
    <template slot="btn-inner">
      <el-button type="primary">按钮1</el-button>
    </template>
    <template slot="table-columns">
			<el-table-column prop="no" label="编号"></el-table-column>
		</template>
  </table-inner>
</template>
<script>
	import tableInner from '@/components/table-inner'
  export default {
    components: {
    	'table-inner': tableInner
  	},
    data () {
      return {
        tableList: {
          total: 10,
          pageNum: 1,
          pageSize: 10,
          pages: 1,
          list: [
            no: 'A001'
          ]
        }
      }
    },
    methods: {
      changePageNum ({pageId, pageNum}) {
        console.log({pageId, pageNum})
      }
    }
  }
</script>

自定义展示列表项的用法

<template>
	<table-inner :tableId="1" title="列表" :showMoreColumns="true" :columnProp="columnProp" :columnOption="columnOption" :table-data="tableList.list" :pageNum="tableList.pageNum" :pageSize="tableList.pageSize" :pages="tableList.pages" pageId="test1" @changePageNum="changePageNum" @tableChange="tableChange">
    <template slot="btn-inner">
      <el-button type="primary">按钮1</el-button>
    </template>
    <template slot="table-columns">
              <el-table-column fixed="right" label="操作" width="200px">
              <template slot-scope="scope">
              <a class="text-btn" href="javascript:;">补充资料</a>
              <a class="text-btn" href="javascript:;">编辑</a>
              <a class="text-btn" href="javascript:;" @click="submitSome(scope.row.id)">提交</a>
              <a class="text-btn danger" href="javascript:;">删除</a>
              </template>
              </el-table-column>
            </template>
  </table-inner>
</template>
<script>
	import tableInner from '@/components/table-inner'
  export default {
    components: {
    	'table-inner': tableInner
  	},
    data () {
      return {
        tableList: {
          total: 10,
          pageNum: 1,
          pageSize: 10,
          pages: 1,
          list: [
            no: 'A001'
          ]
        }，
        columnOption: [
                {
                  key: 1,
                  prop: 'no',
                  label: '用信单号',
                  formatter: 'isEffective',
                  isMust: true
                },
                {
                  key: 2,
                  prop: 'name',
                  label: '申请人',
                  formatter: 'isEffective',
                  isMust: false
                },
                {
                  key: 3,
                  prop: 'no2',
                  label: '授信单号',
                  formatter: 'isEffective',
                  isMust: false
                },
                {
                  key: 4,
                  prop: 'status',
                  label: '状态',
                  formatter: 'formatStatus',
                  isMust: false
                },
                {
                  key: 5,
                  prop: 'money',
                  label: '时间范围',
                  formatter: 'tableMoneyFormat',
                  isMust: false
                }
              ]
      }
    },
    methods: {
      tableChange () {
          console.log('列表改变')
          // 表格内容变化 需要重新请求数据
        },
      changePageNum ({pageId, pageNum}) {
        console.log({pageId, pageNum})
      }
    }
  }
</script>

属性

自定义小,中,高不同level的行高的表格

只需在table-inner加上不同行高的class，小level的行高的class='table-level-mini',中level的行高的class='table-level-small'，大level的行高的class='table-level-medium'

<template>
	<table-inner :tableId="1" title="列表" class="table-level-mini">
  </table-inner>
</template>

表格操作位置信息提示

需在table-inner加上中:row-class-name="rowClass" 给表格x选中某一行className附上'current-row'

<template>
	<table-inner title="列表" :table-data="tableList.lists" :row-class-name="rowClass">
  </table-inner>
</template>
<script>
  methods: {
    rowClass (row) {
      if (row.row.id === Number(this.rowIndexId)) {
        return 'current-row'
      } else {
        return ''
      }
    }
   }
   </script>

插槽

columnOption配置参数

事件

方法

fero-upload 上传

上传文件组件，与element-ui上传组件高度一致，只提供扩展功能的文档

属性

插槽

file-list 文件列表

用于放置附件的列表，有文字型和卡片型两种样式，可与图片预览组件结合使用

基础用法

<template>
	<default-layout>
		<!-- 其他无关元素已省略 -->
    <!-- 文字型 -->
    <file-list :files="fileList"></file-list>
    <!-- 图片型 -->
    <file-list :files="fileList" list-type="picture-card"></file-list>
  </default-layout>
</template>
<script>
  import fileList from '@/components/file-list'
  export default {
    components: {
      fileList
  	},
    data () {
      return {
        fileList: [
          {
            name: '图片名称',
            src: 'http://xxx.com/file/img1.png'
          },
          {
            name: '文件名称',
            src: 'http://xxx.com/file/file.pdf'
          }
        ]
      }
    }
  }
</script>

自定义配置用法

<template>
	<default-layout>
		<!-- 其他无关元素已省略 -->
    <!-- 文字型 -->
    <file-list :files="fileList" :props="{name: 'name', src: 'url'}"></file-list>
    <!-- 图片型 -->
    <file-list :files="fileList" :props="{name: 'name', src: 'url'}" list-type="picture-card"></file-list>
  </default-layout>
</template>
<script>
  import fileList from '@/components/file-list'
  export default {
    components: {
      fileList
  	},
    data () {
      return {
        fileList: [
          {
            name: '图片名称',
            url: 'http://xxx.com/file/img1.png'
          },
          {
            name: '文件名称',
            url: 'http://xxx.com/file/file.pdf'
          }
        ]
      }
    }
  }
</script>

属性

props

事件

插槽

viewer 图片查看器

用来对图片进行预览的组件，支持图片组切换、放大缩小、旋转, 自定义是否显示遮罩层，自定义查看器的位置

基础用法

<template>
	<default-layout>
		<button @click="viewImg(file)">查看图片</p>
  </default-layout>
</template>
<script>
  import viewer from '@/components/viewer/index'
  export default {
    components: {
      fileList
  	},
    data () {
      return {
        file: 'http://xxx.com/img/photo.jpg'
      }
    },
    methods: {
      viewImg (file) {
        viewer(file)
      }
    }
  }
</script>

带有文件信息

文件名称和路径必须为title和src

<template>
	<default-layout>
		<button @click="viewImg(file)">查看图片</p>
  </default-layout>
</template>
<script>
  import viewer from '@/components/viewer/index'
  export default {
    components: {
      fileList
  	},
    data () {
      return {
        file: {
          src: 'http://xxx.com/img/photo.jpg‘,
          title: '图片标题'
        }
      }
    },
    methods: {
      viewImg (file) {
        viewer(file)
      }
    }
  }
</script>

多文件预览

<template>
	<default-layout>
    <template v-for="file in files">
      <button :key="file.id" @click="viewImg(file)">查看图片</p>
		</template>
  </default-layout>
</template>
<script>
  import viewer from '@/components/viewer/index'
  export default {
    components: {
      fileList
  	},
    data () {
      return {
        files: [
          {
            id:1,
            src: 'http://xxx.com/img/photo1.jpg‘,
            title: '图片标题1'
        	},
          {
            id:2,
            src: 'http://xxx.com/img/photo2.jpg‘,
            title: '图片标题2'
        	}
        ]
      }
    },
    methods: {
      viewImg (file) {
        var fileList = []
        var imgIndex = 0
        this.files.forEach((item, index) => {
          if (item.id === file.id) {
            imgIndex = index
          }
          fileList.push({
            title: item.title,
            src: item.src
          })
        })
        let _this = this
        viewer(fileList, {index: imgIndex, modal: false, position: right},
         function (instance) { _this.instance = instance })
      }
    },
    beforeDestroy () {
      if (this.instance) {
        this.instance.destroyViewer()
      }
    }
  }
</script>

自定义位置以及遮罩层

<template>
	<default-layout>
    <template v-for="file in files">
      <button :key="file.id" @click="viewImg(file)">查看图片</p>
		</template>
  </default-layout>
</template>
<script>
  import viewer from '@/components/viewer/index'
  export default {
    components: {
      fileList
  	},
    data () {
      return {
        files: [
          {
            id:1,
            src: 'http://xxx.com/img/photo1.jpg‘,
            title: '图片标题1'
        	},
          {
            id:2,
            src: 'http://xxx.com/img/photo2.jpg‘,
            title: '图片标题2'
        	}
        ]
      }
    },
    methods: {
      viewImg (file) {
        var fileList = []
        var imgIndex = 0
        this.files.forEach((item, index) => {
          if (item.id === file.id) {
            imgIndex = index
          }
          fileList.push({
            title: item.title,
            src: item.src
          })
        })
        let _this = this
        viewer(fileList, {index: imgIndex, modal: false, position: right},
         function (instance) { _this.instance = instance })
      }
    },
    beforeDestroy () {
      //if (this.instance) {
      //  this.instance.destroyViewer()
      //}
      viewer('destroy')
    }
  }
</script>

调用参数

imgInfo

options可配置参数

Methods

节流按钮

用于需要防止双击的、重复提交的按钮，用法及参数与普通el-button没有区别，默认延时300ms，按钮点击立即触发，300ms 内只执行一次，注意节流按钮不能替代加载效果，加载效果也不能替代节流。

基本用法

<template>
	<default-layout>
		<debounce-button icon="iconfont icon-tijiao" type="primary" @click="saveForm">节流按钮</debounce-button>
  </default-layout>
</template>
<script>
  import debounceButton from '@/components/debounce-button'
  export default {
    components: {
      debounceButton
  	},
    data () {
      return {
      }
    },
    methods: {
      saveForm () {
        console.log(new Date())
      }
    }
  }
</script>

带父子级的复选组件

一个带父子级的复选组件，类似穿梭框，左边选择，右侧出现选中项（两种形式展示，1是平级展示，2是树形展示）

基本用法

<template>
	<default-layout>
  	    <transfer-tree :list="list" :type="'table'" @selectData="selectData"></transfer-tree>
  </default-layout>
</template>
<script>
  export default {
    components: {
        list: []
  	},
  	methods:{
  	    selectData (data) {
  	        console.log(data)
  	    }
  	}
  }
</script>

属性

事件

skeleton-screen 骨架屏

一个友好的加载中占位组件，避免在加载时页面塌陷

基本用法

<template>
	<default-layout>
		<skeleton-screen type="tagBlockCard" :loading="loading" :list="sectionList">
      <div class="section-block-completed mb" v-for="item in sectionList" :key="item.id">
        ...
  		</div>
  	</skeleton-screen>
  </default-layout>
</template>
<script>
  export default {
    data () {
      return {
        loading: true,
        sectionList: [
          {title: '测试标题', date: '2019-10-12 12:12:12'}
        ]
      }
    },
    methods: {
    }
  }
</script>

属性

插槽

布局文档

default 默认布局

带有头部、侧栏、标题、主要内容区的默认页面布局，组件已在Vue初始化时注册，使用时无需引入，当然引入也没有问题

基本用法

<template>
	<default-layout>
  	<template slot="breadcrumb">
      <el-breadcrumb-item>页面标题</el-breadcrumb-item>
    </template>
		<template slot="btn-inner">
			<el-button icon="iconfont icon-xinzeng" type="success">新增</el-button>
		</template>
		<!-- 其他页面元素 -->
  </default-layout>
</template>
<script>
  export default {
    components: {
  	}
  }
</script>

属性

插槽

simple 简单布局

一个简单的空白页布局，用于错误页、登录页等自定义页，组件已在Vue初始化时注册，使用时无需引入

基本用法

<template>
	<simple-layout>
		<!-- 任意页面元素 -->
  </default-layout>
</template>
<script>
  export default {
    components: {
  	}
  }
</script>

插槽

页面布局指引

参考在线演示环境（http://admin-demo.dev.fero.com.cn/）进行布局

列表页

• 对列表页展示的业务进行新增等针对业务本身的操作，放置在标题栏
• 搜索框，提供上下排列和左右排列两种样式。如果有搜索条件较长或要求输入框必须对齐等要求建议选择上下排列。搜索和重置按钮都提供关闭和自定义文字，但如果全局修改建议直接更改组件
• 搜索框每列4个，输入框较长的条件如时间范围占2个长度，一般不一个条件占一行
• 列表筛选数据的导出等针对有条件的数据，按钮放置在列表标题的右侧
• 列表按钮统一使用文字按钮
• 列表的左中右对齐根据项目实际要求设置
• tab内直接放置search-inner 和 table-inner 样式已进行调整无需额外更改

表单/详情页

• 默认情况下一行两列输入框，有文本域等情况可以一行一个，如有多行表单/详情与单行表单放在同一行，应注意对换行样式进行处理，避免样式错位
• 带tab的表单内可在表单上部或下部放置tab内的保存按钮，整体保存按钮应位于标题栏
• 注意仔细查看demo页面，表格容器与表单/详情容器是并列的
• 表单/详情的具体内容与标题有20px的缩进是为背景色预留的，在.detail-inner元素增加.bg即可开启
• 只有标题栏的按钮带图标，主要内容区的按钮都没有图标
• 表单/详情页的表格默认是带边线的
• 表单、表格、tabs组合边距已进行调整，一般无需额外更改
• 上传/文件展示，采用图片列表模式显示时，独占一行
• 新增按钮都使用绿色

内置功能/插件用法

vue-meta

页面标题会从路由中的meta.title读取，可被页面内的metaInfo.title覆盖，具体用法详见https://github.com/nuxt/vue-meta

弹框拖动

v-dialogDrag

此功能用于实现弹层的拖拽、拖拽范围不能超过屏幕范围，不能出现完全拖出屏幕导致弹层无法关闭以及关闭弹窗时弹窗复位。要使用此功能时需要在el-dialog上加上自定义指令v-dialogDrag，还需在main.js里注册全局指令Vue.directive('dialogDrag', feroToolkit.dialogDrag)

基本用法

<template>
   <el-dialog title="弹层拖拽" :visible.sync="dialog.detail3" v-dialogDrag></>
</template>

Vue.directive('dialogDrag', feroToolkit.dialogDrag)

四种主题切换

为了满足不同用户的审美要求，可以选择四种不同的主题色，需要在App.vue里配置不同的class,基础主题class='normal',贸易主题class='trade',科技主题class='technology',金融主题class='finance'

基本用法

<template>
  <div id="app" :class="theme">
    <router-view/>
  </div>
</template>