@tyslib/vue-components v1.1.28

技术栈：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 属性说明

column 属性说明

paginate 属性说明

operate 属性说明

comp-table 事件说明

列表搜索组件 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 属性说明

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 数据项属性说明

comp-form 事件说明

列表组件 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 属性说明

uploadConfig 属性说明