@tyslib/vue-components

技术栈：vue3、vite4、pinia、element-plus

//全局注册组件
import VueComponents, {UtilsStore, UtilsMsg, UtilsTools} from '@tyslib/vue-components'
import "@tyslib/vue-components/style.css"
app.use(VueComponents)

// 局部引入组件
import {CompTable, UtilsStore, UtilsMsg, UtilsTools} from '@tyslib/vue-components'

列表组件 comp-table

<comp-table
  :loading="tableDataSet.loading"
  :column="tableDataSet.column"
  :list="tableDataSet.list"
  :paginate="tableDataSet.paginate"
  :operate="tableDataSet.operate"
  @paginate-change="onPaginateEvent"
  @operate="onOperateEvent">
  <template v-slot:photoUrl="{row}">
    <comp-file :list="[{url: row.photoUrl}]" :size="120"></comp-file>
  </template>
</comp-table>

示例

comp-table 属性说明

参数	说明	类型	可选值	默认值	版本
list	列表数据，必传	对象数组	-	-	-
column	列表表头，必传	对象数组	-	-	-
operate	列表操作按钮	对象数组	请看operate 属性说明	-	-
paginate	页码数据	对象数组	请看paginate 属性说明	-	-
loading	加载状态	boolean	-	-	-
isShowOperate	是否显示操作按钮	boolean	-	-	-
isShowPaginate	是否显示页码	boolean	-	-	-
isAutoHeight	是否自动高度	boolean	-	-	-
isTextEllipsis	是否超出隐藏文字	boolean	-	false	-
isShowCheckBox	是否显示批量勾选	boolean	-	-	-
isReserveSelection	翻页是否保留勾选数据	boolean	-	false	-
isShowCheckBoxBtn	是否显示批量操作按钮	boolean	-	-	-
outerHeight	外部高度，用来计算表格展示高度	number	-	-	-
batchOptions	批量操作按钮	对象数组	如：[{label: '批量删除',value:'delete'}]	-	-
attrs	el-table组件所属属性	对象	-	-	-

column 属性说明

参数	说明
slot	插槽，用来插入自定义展示内容，（slot、prop）二选一
prop	展示的数据，（slot、prop）二选一
label	表头名称
width	数据列最小宽度
hide	数据列隐藏规则

paginate 属性说明

参数	说明
page	页码
size	大小
total	总计

operate 属性说明

参数	说明
label	按钮名称
value	按钮标识
type	按钮类型 'primary、success、warning、danger、info'
hide	按钮隐藏规则，function、boolean，如：(row)=>row.status == 1

comp-table 事件说明

事件名	说明	参数
@operate	监听操作按钮点击	-
@paginate	监听页码事件，返回当前点击按钮、当前行数据与当前行索引	-
@batch-operation	监听批量操作按钮点击	-
@selection-change	监听批量选择	-

列表搜索组件 comp-search

<comp-search 
  v-model="searchDataSet.search" 
  v-model:list="searchDataSet.list" 
  :list="searchDataSet.list"
  :operate="searchDataSet.operate"
  @change="(e: any)=>onSearchEvent(e, 'change')"
  @click="(e: any)=>onSearchEvent(e, 'click')">
</comp-search>

示例

参数

size：尺寸 | string | 'large、default、small'
search：搜索值 | 对象 | 必须 | 默认空对象{}
list：搜索操作项 | 对象 | 必须 | 如下
  status: { // 搜索项参数
    label: '状态', // 搜索项名称
    type: 'select',// 搜索项类型 | 'input、select、cascader、date、datetimerange'
    value: '', // 搜索项默认值
    list: [ // 搜索项下拉数据，只有type为select、cascader时才有
      {
        label: '全部',
        value: ''
      },
      {
        label: '配置中',
        value: '0'
      },
      {
        label: '已发布',
        value: '1'
      }
    ],
    hide: (search) => search.status == 1, // 搜索项隐藏规则 | function、boolean | 默认不隐藏
    attrs: {}, // element组件属性
    isSlot: false, //是否插槽
  },
operate：表格操作按钮 | 对象数组 | 如下
  [
    {
      label: 按钮名称,
      value: 按钮标识,
      type: 按钮类型 | 'primary、success、warning、danger、info',
      hide: 按钮隐藏规则 | function、boolean | 默认不隐藏，如：({search, btn}) => search.status == 1
    },
  ]
attrs：el-table组件所属属性 | 对象 | 如下，驼峰命名
  {
    size: 'default',
    rowKey: 'id',
    defaultExpandAll: false,
    lazy: true,
    treeProps: { children: 'children', hasChildren: 'hasChildren' },
    headerCellClassName: "table-header",
  }
isShowBackBtn：是否显示返回按钮 | boolean
backTitle：返回按钮名称 | boolean
title：上一级名称 | boolean

方法
@change：监听element组件chang事件，返回值：{e：当前搜索项的值, key: 当前chang的搜索项}
@operate：监听操作按钮点击，返回值：{btn：当前点击按钮, search: 搜索值}

列表组件 comp-popup

<comp-popup 
  v-model="isShow"
  title="新增" 
  width="600px">
  <div></div>
</comp-popup>

示例

参数

v-model: 控制弹窗显示隐藏
title：标题 | string
width：弹窗宽度 | string | 默认800px
width：弹窗高度 | string 
footerBtn： | 对象数组 | 有默认值 | 如下
  [
    {
      type: 'submit', // 按钮表示
      label: '提交', // 按钮名称
      bgColor: '', // 按钮背景
      attrs: '', // 按钮自定义属性
    }
  ]
isShowFooterBtn：是否显示弹窗按钮
isHidePopup：是否隐藏弹窗

表单组件 comp-form

<comp-form  
  v-model="formDataSet.form" 
  v-model:list="formDataSet.list" 
  :list="formDataSet.list" 
  :originData="data" 
  :submitFun="handleSubmit">
  <template v-slot:photoUrl="{data}">
    <comp-upload-oss 
      :config="uploadConfig" 
      @upload="onUploadEvent" 
      :fileList="[{url: data}]">
    </comp-upload-oss>
  </template>
</comp-form>

示例

comp-form 属性说明

参数	说明	类型	可选值	默认值	版本
v-model	监听表单数据	object	-	-	-
v-model:list / list	监听表单数据项，必填	object	-	-	-
submitFun	表单提交回调，必填	function	函数需抛出return，return true表示提交正常并关闭弹窗，return false表示提交异常不关闭弹窗	-	-
originData	需要回显的数据	object	-	-	-
attrs	el-form组件所属属性	object	{size: 'large',labelWidth: '120px'}	-	-

formData：{
  parentId: { // 数据项，以参数作为key
    label: '上级',
    value: '',
    type: 'select',cascader、select、datetime、datetimerange、switch、checkbox、radio'
    hide: (e) => e.status == 1, // 数据项隐藏规则 | function、boolean | 默认不隐藏,
    required: true,
    rule: [{}],
    attrs: { // 数据项element组件属性
      disabled: true
    },
    list: [],
    isSlot: false,
  }
} // 详细见 "数据项属性说明"

comp-form 数据项属性说明

参数	说明	类型	可选值	默认值	版本
label	数据项名称，必填	string	-	-	-
value	数据项名称，必填	string	array	-	-
type	数据项类型，必填	string	'input、textarea、cascader、select、datetime、datetimerange、switch、checkbox、radio'	-	-
hide	是否隐藏数据项，可选，默认不隐藏	function、boolean	(e) => e.status == 1，e为当前数据项集合	-	-
required	数据项是否必选，可选	boolean	-	-	-
rule	数据项校验规则	对象数组	-	-	-
list	数据项下拉数据	array	-	-	-
isSlot	是否通过插槽插入自定义内容	boolean	-	-	-
attrs	数据项对应的element组件属性，以及需要自定义的样式style	object	-	-	-

comp-form 事件说明

事件名	说明	返回值
@change	监听数据项的变化	{e：chang值, key：chang的数据项key}
@btn-click	按钮的标识	-

列表组件 comp-upload-oss

<comp-upload-oss :config="uploadConfig" @upload="onUploadEvent" :fileList="[{url: data}]"></comp-upload-oss>

示例

参数

uploadConfig：文件上传配置 | 对象 | 必须 | 如下
  {
    httpUrl: '/api/uploadUrl', // 获取oss存储信息接口地址 | 必须
    fileDir: `目录1/目录2`, // oss文件存储路径 | 必须
    fileType: '.png', // 上传文件类型限制，默认不限制，可选择所有类型文件
    isShowFile: true, // 是否显示文件列表
    isShowDelete: true, // 是否显示删除按钮
    isMultiple: false, //是否多选
    isReplaceFile: false, //是否替换文件
    isOnlySelectFile: false, //是否仅选择文件，不上传oss
    size: 150, // 上传框大小
    uploadText: 150, // 上传文案
    serviceType: 7, // 服务类型
    fileNameType: 'file_stamp', //文件名称命名方式， ['file', 'file_stamp', 'stamp']
    limitCount: 7, // 文件上传数量限制，默认不限制
    notice: '（ 建议规格：168*168像素，png格式，透明底，500KB以内 ）' //上传提示
  }
fileList：文件回显列表 | 对象数组 | 如：[{url: 'xxx'}]

方法
@upload：文件上传回调， 返回值：文件列表
@delete：文件删除回调， 返回值：文件列表
@files-selected：选择的文件， 返回值：文件列表

文件列表组件 comp-file

<comp-file :list="[{url: row.photoUrl}]" :size="70"></comp-file>

示例

参数

list：文件列表 | 对象数组 | 如 [{url: 'xxx', fileName: 'xxx'}]， 支持展示图片、视频、文档
size：大小 | number

js封装库

接口请求组件 UtilsHttp

import {UtilsHttp} from '@tyslib/vue-components'
export default function Http(domain: string = 'baseUrl') {
  return UtilsHttp(domainMap[domain], {
    isSign: true, // 是否启用签名
    timeout: 1000 * 60 * 20, // 超时时间
    headers: () => { // 请求头设置
      return {
        tenantId: '',
        authorization: '',
        menuId: '',
      }
    },
    responseFun: () => {}, // 响应成功处理自定义方法
    responseErrFun: () => {},// 响应失败处理自定义方法
  })
}

// 使用
const ApiCommon = {
  // 用户登录
  postLogin: (p={}) => Http().post(`/login`, {params: p})
}

参数

domain：域名 | string | 非必传 
headerConfig：请求头配置 | object

headerConfig配置

  headers?: Function
  responseFun?: Function
  responseErrFun?: Function
  timeout?: number
  isSign?: boolean

支持方法

get：get请求
downloadFile：get文件下载
post：post请求
postFormData：post formData 请求
postFiles：post 文件上传请求
downloadFilePostFormData：post form文件下载
downloadFilePost：post json文件下载
delete：delete 请求
deleteFormData：delete formData 请求
put：put 请求
putFormData：put formData 请求

接口请求组件 UtilsHttp

import {UtilsMsg} from '@tyslib/vue-components'

// 使用
UtilsMsg.success('提示信息')

参数

//有 info、success、warning、error
传递参数：
UtilsMsg.success('提示信息', '显示时长（毫秒，默认3000ms）')

UtilsMsg.confirm('提示内容', '提示标题', '确定按钮文案', '取消按钮文案')

UtilsMsg.prompt('需要校验的内容', {
  title: '提示标题',
  notice: '提示内容',
  inputErrorMessage: '校验失败提示信息',
  confirmButtonText: '确定按钮文案',
  cancelButtonText: '取消按钮文案',
})

富文本组件 comp-editor

<comp-editor 
  v-model="editorDataSet.editorData" 
  :isReadOnly="false">
</comp-editor>

comp-editor 属性说明

参数	说明	类型	可选值	默认值	版本
v-model	富文本数据，必传	string	-	-	-
isReadOnly	是否只读	boolean	-	-	-
uploadConfig	图片上传配置	object	请看 uploadConfig 属性说明	-	-

uploadConfig 属性说明

参数	说明	类型	可选值	默认值	版本
httpUrl	文件上传地址，必传	string	-	-	-
fileDir	文件路径，必传	string	-	-	-
isReplaceFile	是否替换文件	boolean	-	-	-
serviceType	服务类型	string	-	-	-