# 前端公用组件
sanh-ui是基于element-ui进行的二次封装，所有的封装都会把el改为sh。所以项目中尽量使用sh标签进行开发。
# 1、sh-search 表格检索
/**
* 搜索框超出两行后会显示展开折叠按钮
* :resetBtn {Boolean} 是否显示重置按钮
* :btnSpan {Number} 所占的宽度，24栅格，默认8（24为100%，8则为三分之一即三列）
* :btnGutter {Number} 按钮组与输入框的间隔，默认：30，单位px
* :labelWidth {String} label的宽度，默认：72px
* slot="btn" {slot} 插槽，右侧的按钮组
*/
<sh-search ref="search" :model="form" :resetBtn="true">
<sh-form-item label="权限组编号" :span="8" prop="permissionGroup">
<sh-input v-model="form.permissionGroup"></sh-input>
</sh-form-item>
<sh-form-item label="接口" :span="8" prop="permissionApi">
<sh-input v-model="form.permissionApi"></sh-input>
</sh-form-item>
<template slot="btn">
<sh-button type="primary" @click="loadList">查询</sh-button>
<sh-button type="success" @click="onCreate" v-if="$isCode ('admin-api-add')">新增</sh-button>
</template>
</sh-search>
# 2、sh-table 表格
/**
* 对分页及table数据请求进行封装
* :api {String} 接口
* :param {Object} 检索参数
* :data.sync {Array} table数据
* :layout {String} 分页layout，默认：'total, sizes, prev, pager, next, jumper'
* :pageSizes {Array} 分页pageSizes,默认：[10, 20, 50, 100]
* :page.sync {Number} 当前页,默认:1
* :limit.sync {Number} 每页条数，默认：10
* :count {Number} 总条数
* :showPage {Boolean} 是否显示分页
* :defaultLoad {Boolean} 是否初始化的时候默认加载
* :height {String} 表格高度，默认：534px
* :empty {empty} 显示暂无数据图片样式，默认：true
* :className {String} 表的类名,默认值为'sh-table',其他值'xy-table'
* :border {Boolean} 是否显示边框
* :defaultLoad {Boolean} 第一次加载时是否触发loadList方法
* :stripe {Boolean} 表格是否带斑马纹
* @loadList {funtcion} 重载table方法
*/
<sh-table ref="table" class="space-top" :api="tableApi" :param="form">
<sh-table-column type="index" label="序号" width="50"> </sh-table-column>
<sh-table-column prop="permissionGroup" label="权限组编号" min-width="80"> </sh-table-column>
<sh-table-column prop="permissionApi" label="接口" min-width="80" :show-overflow-tooltip="true"> </sh-table-column>
<sh-table-column prop="description" label="说明" min-width="80"> </sh-table-column>
<sh-table-column prop="state" label="状态" min-width="80">
<template slot-scope="scope">
<el-switch v-model="scope.row.state" @change="changeState(scope.row)" :active-value="1" :inactive-value="2">
</el-switch>
</template>
</sh-table-column>
<sh-table-column label="操作" min-width="80">
<template slot-scope="scope">
<el-button @click="onUpdate(scope.row)" type="text">编辑</el-button>
<!-- <el-button @click="onUpdate(scope.row)" type="text" v-if="$isCode ('admin-api-edit')">编辑</el-button>
<el-button type="text" @click="onDelete(scope.row)" v-if="$isCode ('admin-api-delete')">删除</el-button> -->
</template>
</sh-table-column>
</sh-table>
# 3、sh-form 表单
/**
* :span {Number} 所占的宽度（24为100%，8则为三分之一即三列）
* rules {String||Array} 检验规则
* :labelWidth {String} label的宽度
* :gutter {Number} 间隔
* :className: 类名 可选值'xy-form','sh-form'
*/
<sh-form :model="form" ref="form" >
<sh-form-item label="姓名" prop="personName" rules="required" :span="12">
<sh-input v-model="form.personName" placeholder="请输入权限组编号"></sh-input>
</sh-form-item>
<sh-form-item label="性别" prop="sex" rules="required" :span="12">
<el-radio-group v-model="form.sex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</sh-form-item>
<sh-form-item label="证件类型" prop="idcardType" rules="required">
<sh-input v-model="form.idcardType" placeholder="请输入说明"></sh-input>
</sh-form-item>
<sh-form-item label="证件号码" prop="idcardType" rules="required">
<sh-input v-model="form.idcard" placeholder="请输入说明"></sh-input>
</sh-form-item>
<sh-form-item label="出生日期" prop="birthday" rules="required">
<sh-date-picker v-model="form.birthday" type="date" placeholder="选择日期"></sh-date-picker>
</sh-form-item>
<sh-form-item label="手机号" prop="mobilephone" rules="required||phone">
<sh-input v-model="form.mobilephone" placeholder="请输入说明"></sh-input>
</sh-form-item>
</sh-form>
rules检验规则：
required: 必填项
number: 数字
integer: 整数
email: 邮箱
date: 日期
phone: 手机号
special: 特殊字符
account: 必须包含数字、字母、下划线中的两种或以上
password: 必须包含字母和数字,且在6~18位之间
identity: 身份证号
url: url
api: 通过接口校验
当一个检验时：rules=“required”，
当多个时可以用||隔开：rules=“required||number||integer”
当自定义校验或通过接口校验时需要用数组：
/**
* type 类型
* message 提示信息
* api 接口
* param 检索参数（输入框对应的键值）
* search 其它检索参数Object
*/
:rules="['required',{type: 'number', message: '必须为数字'}, {type: 'api', api: apiIsUnifiedcode, param: 'unifiedcode'}]"
# 4、sh-dialog 弹框
/**
* :height {String} 弹框高度，如： 80vh
* :width {String} 弹框高度，如： 30%
* :loading {Boolean} loading效果
* :visible.sync {Boolean} 是否打开弹框
* :title: {String} 弹框标题
* :fullscreen {Boolean} 弹框是否全屏显示
* :closeOnClickModal {Boolean} 是否可以通过点击 modal 关闭 Dialog
* :top {String} 弹框距离顶部的距离，默认15vh，有height时不生效
* v-sh-drag-dialog 自定义指令，添加后弹框可拖拽
*/
<sh-dialog
title="标题"
:visible.sync="dialogVisible"
>
<span>弹框内容</span>
<span slot="footer" class="dialog-footer">
<sh-button @click="dialogVisible = false">取 消</sh-button>
<sh-button type="primary" @click="dialogVisible = false">确 定</sh-button>
</span>
</sh-dialog>
# 5、sh-tree-dialog 弹框树
/**
* :api {String} 接口,默认调用人员选择接口
* :title {String} 标题
* :dialogVisible {Boolean} 是否显示
* :nodeKey {String} 树的唯一标识，默认为'id'
* :search {Object} 检索参数
* :type {String} 树数据的类型，默认值为'person'（选择人员的树）,可选值为'dept'（选择部门的树）
* :close {Boolean} 单击确认按钮时是否关闭弹框，默认为true
* :defaultProps {Object} 自定义节点标识，如：{ children: 'children', label: 'text'}
* :defaultData {Array} 默认数据
* :radio {Boolean} 单选
* @handleEvent {funtcion} 事件
*/
<sh-tree-dialog
:api="api"
:title="title"
:dialogVisible.sync="dialogTreeVisible"
@handleEvent="handleEvent"
></sh-tree-dialog>
# 6、sh-region省市区街道下拉框
/**
* level {Number} 级别，1、2、3、4 对应 省、市、区、街道
* v-model {String} 名称，以逗号隔开
* :value2.sync {String} id，以逗号隔开
* :multiple {Boolean} 是否多选，默认false
* :placeholder {String} 输入框占位文本
* :checkStrictly {Boolean} 是否严格的遵守父子节点不互相关联
* @callback {funtcion} 选中回调
* pCode: {String} 确定的省code，如 '430000000000'（用于默认省，从选择市开始）
* cCode: {String} 确定的市code，如 '430100000000'（用于默认市，从选择区开始）
* aCode: {String} 确定的区code，如'430121000000'（用于默认区，从选择街道开始）
*/
<sh-region v-model="city.names" :value2.sync="city.ids"></sh-region>
# 7、sh-select-api 接口下拉框
/**
* v-model {String} 字段
* :api {String} 接口，默认为字典查寻接口，
* :param {Object} 检索参数
* :option="{label: 'value', value: 'key'}" label显示的字段，value赋值的字段
* :filterable {Boolean} 是否可搜索选项
* :filterKey {String} 筛选条件的字段名称
* :remote {Boolean} 是否为远程搜索
* :@callback {Function} 回调函数，参数为选中的值
* :@loadList {Function} 回调函数，参数为选项列表
*/
<sh-select-api v-model="form.unitType" :api="selectApi" :search="{type:2}"
:option="{label: 'typeName', value: 'id'}"></sh-select-api>
# 8、sh-upload 上传文件
/**
* :api {String} 接口
* :param {Object} 检索参数
* :multiple {Boolean} 是否多选
* :claritys {String} 压缩图片。默认：保存超高清图片。其他参数：LOW:缩略图，ORIGINAL:原图
* :accept {Array} 文件类型['jpg', 'png', 'jpeg', 'txt', 'zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx', 'xls']
* :size {Number} 最大上传文件（单位为m，默认值5）
* :limit {Number} 允许的最大上传个数
* :showErrorMsg {Boolean} 上传错误时是否显示错误信息
* :file {String} param中的文件名称
* @callBack {function} 上传后回调
*/
<sh-upload ref="upload" api="/update" :param="{type: 123}"></sh-upload>
// 打开上传弹框
this.$refs.upload.uploadFile()
# 9、sh-pdf-diglog pdf预览
/**
* :dialogVisible.sync {Object} 是否显示弹框
* :param {Object} 接口参数
* :downList {Array} 下载pdf列表
* :api {Stromg} 接口
* :url {String} pdf文件地址
* :title {String} 弹框的标题
*/
<sh-pdf-diglog :dialogVisible.sync="dialogVisible" :param="{id: 'b735b9c0ce994dbdb94a08c9f8064b48'}" :downList="[{name: 'vue框架环境搭建', id: 'b735b9c0ce994dbdb94a08c9f8064b48'}]"/></sh-pdf-diglog>
# 10、sh-input-select 可输入下拉框
/**
* :param {Object} 接口参数
* :api {Stromg} 接口
* :option {Object} 选项的值和标签，默认为 { value: 'key', label: 'value' }
*/
<sh-input-select v-model="value" placeholder="请选择出行方式">
<sh-option value="公交"></sh-option>
<sh-option value="地铁"></sh-option>
<sh-option value="高铁"></sh-option>
<sh-option value="其他"></sh-option>
</sh-input-select>
# 11、sh-view-image 预览图片
/**
* :api {String} 接口，返回流文件
* :param {Object} 请求参数
* :method {String} 请求类型，默认get
*/
<sh-view-image :api="api" :param="{id: imgId}">预览图片</sh-view-image>
# 12、sh-wang-editor 富文本
/**
* v-model {String} 富文本值
* :uploadImgApi {String} 上传图片接口，isServer为true，该参数失效
* :disabled {Boolean} 禁用
* :height {Number} 高度，默认300
* :menus {Array} 富文本菜单
* :isServer {Boolean} 是否将图片上传到服务器，默认为 false
*/
<sh-wang-editor ref="wangEditor" v-model="form.contents" :uploadImgApi="uploadApi"></sh-wang-editor>
上传图片接口必须返回图片url可以直接访问用于插入富文本中，格式如下：
{
code: 0
data: [
{
id: "60d4d5c147034826828e2063fbfb2077",
fileName: "u35.png",
fileType: "image/png",
id: "60d4d5c147034826828e2063fbfb2077",
url: "http://192.169.0.220:5001/system/sysFileInfo/showImgStream?id=60d4d5c147034826828e2063fbfb2077",
}
],
msg: "上传成功"
}
富文本默认菜单
[
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
// 'todo',
'justify',
'quote',
// 'emoticon',
'image',
// 'video',
'table',
'code',
'splitLine',
'undo',
'redo',
]
富文本赋初始值
// 富文本赋值
this.$refs.wangEditor.setHtml('<p>这个一个富文本</p>')
# 13、sh-form-item-json 表单
/**
* :model {Object} 表单对象
* list {Array} formItem列表
*/
<sh-form-item-json :list="formJson" :model="form"></sh-form-item-json>
list数组说明：
/**
* component {String} 组件类型
* labelAttrs {Object} formItem属性
* valueAttrs {Object} component对应组件的属性
* listeners {Object} component对应组件的事件 // listeners默认不支持原生事件，如.native
* subList {Array} 子组件列表(如下拉框)
** component {String} 组件类型
** attrs {String} 组件属性
** text {String} 组件内置文字
*/
如：input框
// v-model 默认绑定prop的值
{
component: 'sh-input',
labelAttrs: { label: '省级项目编码', prop: 'name' }
}
如：select框
{
component: 'sh-select',
labelAttrs: { label: '建设地址', prop: 'address', rules: 'required' },
subList: [
{
component: 'sh-option',
attrs: { label: '房屋建筑', value: 1 }
},
{
component: 'sh-option',
attrs: { label: '市政公用工程', value: 2 }
}
]
}
如：input框listeners
{
component: 'sh-input',
labelAttrs: { label: '省级项目编码', prop: 'name' },
listeners: {
change: (val) => {
console.log('数据改变了', val)
}
}
}
# 14、sh-upload-file 分片上传文件
sh-upload-file 文件上传
/** * :filePath {String} 文件路径标识32位，必须唯一如uuid * :dataId {String} 业务表单主键 * :size {Number} 最大上传文件（单位为m，默认值100） * :accept {Array} 文件类型，默认为['jpg', 'png', 'jpeg', 'txt', 'zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx', 'xls'] * :multiple {Boolean} 是否允许上传多个文件 * :limit {Number} 允许上传文件的最大数量 * @callBack {function} 上传后回调 */ <sh-upload-file @callback="callback" filePath="61cb22cd76bc437c9622b5aece64382f"> <el-button type="primary">上传文件</el-button> </sh-upload-file> /** * callBack(file) 参数 * fileId {String} 附件id，存在文件服务器 * fileName {String} 文件名称 * uploadId {String} 上传id * size {String} 文件大小 */sh-download 文件下载，预览
/** * :fileId {String} 文件id * :type {String} 文件类型 * :callback {function(url) url文件路径} 回调 */ <sh-download :fileId="scope.row.fileId">下载</sh-download> 如： 预览图片 <sh-download :fileId="scope.row.fileId" type="image">预览图片</sh-download> 预览pdf <sh-download :fileId="scope.row.fileId" type="pdf" @callback="viewPdf">预览pdf</sh-download> 触发回调 viewPdf(url) { //返回文件路径url }文件上传接口（接口前缀使用
VUE_APP_PORT建协云后端接口）
1.1、获取分片信息
| 请求（POST）JSON | /filestore/file/getBurstInfo | ||
|---|---|---|---|
| fileName | 文件名 | String | 必填 |
| isShowDown | 是否显示下载按钮0不显示 1显示 | int | 必填 |
| fileSize | 文件大小 | long | 必填 |
| filePath | 文件夹名称 | String | 选填 |
| dataId | 业务表单主键 | String | 选填 |
| 返回结果 | |||
|---|---|---|---|
| totalPart | 分片总数 | String | |
| multipartSize | 分片大小 | int | |
| multipartUploadId | 临时上传ID | String |
1.2、文件分片上传
| 请求（POST）form表单提交 | /filestore/file/uploadBurst | ||
|---|---|---|---|
| file | 分片文件 | file | 必填 |
| multipartUploadId | 临时上传ID | String | 必填 |
| multipartNum | 当前分片是第几块 | String | 必填 |
| 返回结果 | |||
|---|---|---|---|
| multipartNums | 待上传的分片 | 数组 | |
| fileId | 文件主键（上传完才会返回） | String |
1.3、获取文件列表信息
| 请求（POST）JSON | /filestore/file/findList | ||
|---|---|---|---|
| dataId | 业务数据主键 | String | 必填 |
| 返回结果 | |||
|---|---|---|---|
| id | 文件信息主键 | String | |
| fileName | 文件名 | String | |
| isShowDown | 是否显示下载按钮0不显示 1显示 | int | |
| createTime | 创建时间 | String | |
| fileSize | 文件大小 | long | |
| creatorName | 创建人，上传人 | String |
1.4、文件下载（请求头带token）
| 请求（GET） | /filestore/file/downloadFile?fileId= | ||
|---|---|---|---|
| fileId | 文件主键 | String | 必填 |
| 返回结果 |
|---|
1.5、获取一次性下载链接
| 请求（POST）JSON | /filestore/file/getTempDownloadInfo | ||
|---|---|---|---|
| fileId | 文件主键 | String | 必填 |
| 返回结果 | |||
|---|---|---|---|
| randomId | 临时下载ID | String |
1.6、一次性下载文件（不需要token，只能下载一次）
| 请求（POST）JSON | /filestore/file/tempDownloadFile?randomId= | ||
|---|---|---|---|
| randomId | 临时下载ID | String | 必填 |
| 返回结果 |
|---|
# 15、sh-drawer-column 自定义列弹框
/**
* :colKey {String} 唯一标识
* :list {Array} 列数据
* :title {String} 标题
* :size {Number, String} 组件大小，默认为'300px'
* :callback {function(list)} 回调
*/
<sh-drawer-column ref="drawer" :colKey="colKey" :list="tableItemJson"></sh-drawer-column>
# 16、sh-svg-icon svg图标
- 安装 svg-sprite-loader
npm i svg-sprite-loader -S
- vue.config.js 中的 chainWebpack 修改
const path = require('path')
function resolve(dir) {
return path.join(__dirname, './', dir)
}
...
module.exports = {
chainWebpack(config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
src 下新建 icons 文件夹放 svg 文件,
/src/iconsmain.js中
// main.js
// for svg-icon
const req = require.context('./icons', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
- 项目中使用：
如/svg/icons文件夹下有juese.svg
<tamplate>
<sh-svg-icon icon-class="juese" style="width: 2em; height: 2em;vertical-align:middle"></sh-svg-icon>
</tamplate>
# 17、sh-tree-select-dialog部门选择弹框
/**
* :title {String} 对话框标题
* :treeData {Array || Object} 数据列表 // 仅有一个父节点时可以为对象
* :api {String} 数据接口
* :param {Object} 接口参数
* :nodeKey {String} 数据的唯一标识，默认 id
* :treeProps {Object} 树的配置选项，具体请参考element的Tree树形控件
** :children {String} 下级列表的字段名称，默认 children
** :label {String || Function} 要显示的文本的字段名称，默认 label
* :treeSelectNode {Array} 打开对话框后选中的节点，主要用于回显
* :@callback {Function} 回调函数
*/
<sh-tree-select-dialog
:title="'部门选择'"
ref="dialog"
:api="api"
:treeProps="treeProps"
:treeSelectNode="treeSelect"
@callback="callback"
></sh-tree-select-dialog>
// 回调函数
callback(selectList) {
//selectList 选中项的列表
}
// 打开选择对话框
this.$refs.dialog.init()
返回有效参数用例：
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| -data | Object | 返回数据 |
| data.id | String | 部门ID |
| data.managementCode | String | 部门编码 |
| data.managementName | String | 部门名称 |
| data.organizationId | String | 组织维度ID |
| data.accountId | String | 负责人账号ID |
| data.personName | String | 负责人姓名 |
# 18、sh-multi-select-person人员多选弹框
<sh-multi-select-person ref="dialog" @callback="callback"> </sh-multi-select-person>
// 回调函数
callback(selectList) {
//selectList 选中项的列表
}
// 打开选择对话框
this.$refs.dialog.init()
返回有效参数用例：
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| -data | Object | 返回数据 |
| data.accountId | String | 人员账号ID |
| data.realName | String | 人员姓名 |
| data.sex | String | 性别 |
| data.phone | String | 手机号 |
| data.duty | String | 职务 |
| data.managementId | String | 部门ID |
| data.managementName | String | 部门名称 |
| data.unitId | String | 企业ID |
| data.unitName | String | 企业名称 |
# 19、sh-enterprise-select企业多选弹框
/**
* :title {String} 对话框标题
* :dialogVisible {Boolean} 弹框是否可见
* :tableSelectNode {Array} 默认选中的数据
*/
<sh-enterprise-select
ref="dialog"
:dialogVisible.sync="dialogVisible"
@callback="callback"
:tableSelectNode="tableSelectNode">
</sh-enterprise-select>
// 打开选择对话框
open() {
this.dialogVisible = true
}
返回有效参数用例：
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| -data | Object | 返回数据 |
| data.id | String | 企业ID |
| data.unifiedcode | String | 统一社会信用代码 |
| data.unitName | String | 企业名称 |
| data.companyCode | String | 企业编码 |
| data.contacts | String | 联系人 |
| data.contactsPhone | String | 联系人手机号 |
| categoryId | String | 单位类型ID |
| categoryName | String | 单位类型名称 |
# 20、sh-project-list工程选择列表弹框
/**
* :checkbox {Boolean} 列表是单选还是多选，如果多选，数据以数组的形式返回，单选则返回一个对象形式的数据
* :title {String} 对话框标题
*/
<sh-project-list ref="dialog" :checkbox="true" @callback="callback"></sh-project-list>
// 回调函数
callback(selected) {
// checkbox 为true，selected为[]
// checkbox 为false，selected为{}
}
// 打开选择对话框
this.$refs.dialog.open()
返回有效参数用例：
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| -data | Object | 返回数据 |
| data.id | String | 工程ID |
| data.sectionCode | String | 工程编码 |
| data.sectionName | String | 工程名称 |
| data.builderLicenseNo | String | 施工许可证 |
# 21、sh-cascader-api 级联选择下拉框
/**
* :api {String} 接口
* :param {Object} 参数
* :data {Array} 数据列表
* :multiple {Boolean} 是否多选
* :props {Object} 数据配置项
** :value {String} 值的字段名
** :label {String} 要显示的字段名
** :children {String} 子选项的字段名
*/
<sh-cascader-api :api="api" :param="param"></sh-cascader-api>
# 22、sh-count-running 滚动的数字
/**
* :label {String} 数字前面的标签
* :rollNumber {Number} 要显示的数字，默认为5.548
* :fontSpacing {Number} 数字间距，默认为1
* :rollingSpeed {Number} 滚动的速度，默认为0.8
* :fontSize {String} 数字字体的大小
* :color {String} 数字字体的颜色
* :height {String} 高度
*/
<sh-count-running label="滚动的数字" :rollNumber="1124.5" :fontSpacing="8" fontSize="30px" color="#f0f" height="40px"></sh-count-running>
# 23、sh-echarts 图表
/**
* :data {Object} 图表的数据
* :height {String} 图表的高度，默认为'400px'
* :width {String} 图表的宽度
*/
<sh-echart :data="data"></sh-echart>
# 24、sh-ellipsis-tooltip 隐藏文本提示
/**
* :text {String} 要显示的文本
* :placement {String} 提示文本显示的位置，默认为'top-start'
* :effect {String} 提示区域的主题，默认为'dark'，可选值'light'
* :color {String} 显示文本的字体颜色
* :fontSize {String} 显示文本的字体大小，默认为'14px'
* :fontWeight {String, Number} 显示文本的字体粗细
*/
<sh-ellipsis-tooltip text="11111111111111111111" placement="top-end" :disableTip="true"></sh-ellipsis-tooltip>
# 25、sh-region-cascader 省市区级联下拉框
/**
* :provinceCode {String} 省级代码
* :cityCode {String} 市级代码
* :areaCode {String} 区域代码
* :value.sync {Array} 省市区区域代码数组，如['410000000000', '410900000000', '410971000000']
*/
<sh-region-cascader :provinceCode="provinceCode" :cityCode="cityCode" :areaCode="areaCode" :value.sync="val"></sh-region-cascader>
# 26、sh-search-more 更多检索
/**
* :form {Object} 要检索数据的字段名
* :tabList {Array} 字段值的列表
* :maxHeight {Number} 检索区域的高度
*/
<sh-search-more :form="form" :tabList="tabList" @click="loadList" ></sh-search-more>
tabList 格式如下
[
{
title: '默认视图',
name: '0',
search: [
{
label: '工程状态',
key: 'ddd',
chilren: [
{ value: '1', label: '未开工工程' },
{ value: '2', label: '在建工程' },
{ value: '3', label: '停工工程' },
{ value: '4', label: '完工待验收(或安全评价)工程' },
{ value: '5', label: '未验收投入使用' },
{ value: '6', label: '已验收(或安全评价工程)' }
]
},
{
label: '工程状态',
key: 'ddd2',
chilren: [
{ value: '1', label: '未开工工程' },
{ value: '2', label: '在建工程' },
{ value: '3', label: '停工工程' },
{ value: '4', label: '完工待验收(或安全评价)工程' },
{ value: '5', label: '未验收投入使用' },
{ value: '6', label: '已验收(或安全评价工程)' }
]
},
{
label: '工程状态',
key: 'ddd3',
chilren: [
{ value: '1', label: '未开工工程' },
{ value: '2', label: '在建工程' },
{ value: '3', label: '停工工程' },
{ value: '4', label: '完工待验收(或安全评价)工程' },
{ value: '5', label: '未验收投入使用' },
{ value: '6', label: '已验收(或安全评价工程)' }
]
},
{
label: '工程状态',
key: 'ddd4',
chilren: [
{ value: '1', label: '未开工工程' },
{ value: '2', label: '在建工程' },
{ value: '3', label: '停工工程' },
{ value: '4', label: '完工待验收(或安全评价)工程' },
{ value: '5', label: '未验收投入使用' },
{ value: '6', label: '已验收(或安全评价工程)' }
]
},
{
label: '工程状态',
key: 'ddd5',
chilren: [
{ value: '1', label: '未开工工程' },
{ value: '2', label: '在建工程' },
{ value: '3', label: '停工工程' },
{ value: '4', label: '完工待验收(或安全评价)工程' },
{ value: '5', label: '未验收投入使用' },
{ value: '6', label: '已验收(或安全评价工程)' }
]
}
]
}
]
# 27、sh-form-container 表单容器
/**
* :id 同原生id
* @back 返回上一页的回调函数
*/
<sh-form-container @back="back" id="container">
<template slot="right">
<el-button @click="submit()" size="mini">保 存</el-button>
<el-button type="primary" @click="submit()" size="mini">提 交</el-button>
</template>
<div class="content">
<sh-form :model="form" className="xy-form" ref="form" :disabled="type == 'view'" :responsive="true" labelWidth="150px">
<el-row ref="item" v-for="item in 4" :key="item">
<sh-form-title>
模块{{item}}
<template slot="right">
<el-button type="primary" v-if="item === 2" size="mini">新增</el-button>
</template>
</sh-form-title>
<sh-form-item-json :list="formJson" :model="form"></sh-form-item-json>
</el-row>
</sh-form>
</div>
</sh-form-container>
# 28、sh-select-search 下拉选择框
/**
* :api {String} 接口
* :value {String} 选中的值
* :page {Number} 页数
* :limit {Number} 显示个数
* :param {Object} 接口参数
*/
<sh-select-search :api="api" :defaultProps="defaultProps"></sh-select-search>
# 29、sh-select-tree 树形下拉框
/**
* :value {String} 接收绑定参数
* :width {String} 宽度
* :options {Array} 选项数据
* :placeholder {Array} 输入框占位符
* :nodeKey {String} 唯一值
* :props {Object} 树节点配置选项
* :nodeKey {String} 唯一值
* @callback 回调函数，选择节点时触发，参数为所选择节点
* @selected 回调函数，下拉框隐藏时触发，参数为当前选择的节点的唯一值
* /
<sh-select-tree :options="personTress"></sh-select-tree>
# 30、sh-table-block 块级列表
/**
* :api {String} 数据接口
* :layout {String} 可选值 sizes, prev, pager, next, jumper, ->, total, slot
* :pageSizes {Array} 每页显示个数选择器的选项设置
* :param {Object} 接口参数
* :data {Array} 数据列表
* :limit {Number} 每页显示的条数
* :page Number} 当前页数
* :count {Number} 数据总数
* :showPage {Boolean} 是否显示分页
* :defaultLoad {Boolean} 初始化时是否加载数据
* :span {Number} 块的宽度
* :height {Boolean} 高度
* @loadList 加载数据，没传api时触发
*/
<sh-table-block ref="table" :api="tableApi" :param="form" :span="12">
<div slot-scope="scope">
<el-container>
<el-aside width="150px" class="avatar">
<el-avatar :size="80" :src="scope.row.avatar"></el-avatar>
</el-aside>
<el-main>
<el-col :span="18">
<sh-form>
<sh-form-item label="姓名:" :span="12">{{ scope.row.name }}</sh-form-item>
<sh-form-item label="日期:" :span="12">{{ scope.row.date }}</sh-form-item>
<sh-form-item label="地址:" :span="12">{{ scope.row.address }}</sh-form-item>
</sh-form>
</el-col>
<el-col :span="6">
<el-button @click="onOpen('view', scope.row)" type="primary" v-if="$isCode ('demo-table-view')">查看</el-button>
<el-button @click="onOpen('edit', scope.row)" type="success" v-if="$isCode ('demo-table-edit')">编辑</el-button>
<el-button @click="onDelete(scope.row)" type="danger" v-if="$isCode ('demo-table-delete')">删除</el-button>
</el-col>
</el-main>
</el-container>
</div>
</sh-table-block>
# 31、sh-search-area 表格字段检索
/**
* :form {Object} 数据绑定
* :dropdownList: {Array} 快捷搜索字段数组
* :className {String} 搜索表单类名，默认为'xy-form'
* :@loadList 回调函数，输入搜索条件后执行
* :@resetFields 回调函数，重置表单时执行
*/
const dropdownList = [{ label: '任务名称', key: 'taskName' }, { label: '模块名称', key: 'moduleName' }]
<sh-search-area
:form="form"
@loadList="loadList"
:dropdownList="dropdownList"
>
<template slot="btn">
<sh-button @click="onOpen('add')" type="primary">新增</sh-button>
</template>
<sh-form-item label="任务名称" :span="12" prop="taskName">
<el-input v-model="form.taskName"></el-input>
</sh-form-item>
<sh-form-item label="任务编码" :span="12" prop="taskCode">
<el-input v-model="form.taskCode"></el-input>
</sh-form-item>
<sh-form-item label="模块名称" :span="12" prop="moduleName">
<el-input v-model="form.moduleName"></el-input>
</sh-form-item>
</sh-search-area>
# 32、sh-table-operation 表格操作列
/**
* :data {Object} 当前行数据
* :option {Array} 操作配置项
* :index: {Number} 当前行的索引
* :maxLength {Number} 最大显示的按钮个数，超过即显示“更多”按钮,默认为 3
*/
<template>
<sh-table-column label="操作" width="340">
<template slot-scope="scope">
<sh-table-operation :maxLength='3' :data='scope.row' :index='scope.$index' :option='option'></sh-table-operation>
</template>
</sh-table-column>
</template>
<script>
export default {
data() {
return {
option: [
{ label: '查看', type: 'view', permission: 'demo-table-view', callback: this.onOpen },
{ label: '编辑', type: 'edit', permission: 'demo-table-edit', callback: this.onOpen },
{ label: '删除', type: 'delete', permission: 'demo-table-delete', callback: this.onDelete },
// 模拟传递 Boolean 值
{ label: '页面展示', type: 'edit', permission: 2 > 1, callback: this.onPage }
// 模拟有权限标识但无权限操作
{ label: '页面查看', type: 'view', permission: 'demo-table-view34', callback: this.onPage },
// 模拟不需要权限控制按钮,即不填 permission 属性
{ label: '页面展示', type: 'edit', callback: this.onPage },
{ label: '页面查看', type: 'view', callback: this.onPage }
]
}
},
methods: {
/**
* @param {Object} row 当前行数据
* @param {Object} item 当前按钮项操作配置项
* @param {String} i 当前行的索引
* @param {String} label 当前按钮项的label
*/
onOpen(row, item, i, label) { // 打开弹框
console.log(row, item, i, label)
this.$refs.infoDialog.open(item.type, row)
},
}
}
</script>
option 数据结构
| 名称 | 说明 | 类型 | 参数 |
|---|---|---|---|
| label | 按钮显示文本 | sting | - |
| permission | 按钮权限标识 | sting|boolean | 为可选值，如为不需要权限控制的按钮，可不填写或传递boolean值true |
| type | 按钮操作类型 | sting | 为可选值，可不填 |
| callback | 点击行的回调函数 | function | - |
callback 回调函数依次返回：(row, item, index, label) / 当前行数据，当前按钮项操作配置项，当前行的索引，当前按钮项的 label
# 33、sh-splitpanes 分割面板
基于 splitpanes 封装，具体使用可参考文档 (opens new window)
示例：
<template>
<sh-splitpanes>
<sh-pane v-for="i in 3" :key="i">
<div class="item">{{ i }}</div>
</sh-pane>
</sh-splitpanes>
</template>
# 34、sh-vue-seamless-scroll 无缝滚动
基于 vue-seamless-scroll 封装，具体使用可参考文档 (opens new window)
示例：
<template>
<div class="page-example3" style="">
<sh-vue-seamless-scroll :data="listData" :class-option="defaultOption">
<ul class="ul-scoll">
<li v-for="(item, index) in listData" :key='index'>
<span>{{item.title}}：{{item.time}}</span>
</li>
</ul>
</sh-vue-seamless-scroll>
</div>
</template>
<script>
export default {
name: 'SeamlessScrollDemo',
data() {
return {
listData: []
}
},
computed: {
defaultOption() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
mounted() {
for (let i = 0; i < 15; i++) {
const j = {
title: `无缝滚动第${i + 1}条数据-`,
time: this.$dayjs().format('YYYY-MM-DD')
}
this.listData.push(j)
}
}
}
</script>
<style scoped lang="scss">
.page-example3 {
width: 450px;
height: 260px;
overflow: hidden;
border: 1px solid #283dff;
.ul-scoll {
li {
margin: 6px;
padding: 5px;
background: rgba(198, 142, 226, 0.4);
}
}
}
</style>