技术栈：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 | - | - | - |