BaseWeb

电脑端常用组件,其中包括form组件部分和自定义功能组件部分，并附带lib方法库

更新记录

20220429

1. 映射el-table组件所有函数方法至s-table组件中
2. 加入所有el-table组件事件
3. s-table组件加入demo页面，在表单-表格中有完整示例

20220417

1. 解决resetComponent函数可能引起的页面重绘问题
2. 解决show属性配置组件为否，required为是时，依然校验的问题

20220414

1. 表单组件加入插槽

<s-form>
  <template #slot-name="{form}">
    <input v-model="form.nameSlot" />
  </template>
</s-form>

components: [
  {
    type: "slot", // 类型为slot
    slot: "slot-name", // 生效的插槽名称
    label: "插槽项表单",
    key: "nameSlot", // 插槽用到的键（用于表单校验）
  },
];

2. 加入s-table表格组件，集成分页组件

20220407

1.增加 pdf 预览功能(pdfjs-dist) 2.优化文件列表预览功能

20220402

1. 重构page混入功能，解决字典数据重复请求问题

• 增加PDictionaryCommon方法，用于处理字典数据的获取

<el-table-column
  :formatter="PFormatterCommon"
  prop="name"
  label="姓名"
  width="180"
>
  <template slot-scope="scope"
    >{{PDictionaryCommon(scope.row,'name','form')}}</template
  >
</el-table-column>

• 增加PEncryptCommon方法，配置脱敏功能

<el-table-column :formatter="PEncryptCommon" prop="address" label="地址">
</el-table-column>

2. 重构sform组件，增加name属性，用来配置字典dictionaryMaps的关键属性
3. 增加组件

• 颜色选择组件SColorPicker
• 数字输入组件SInputNumber

4. 解决dateDifference使用问题 20211009 1.优化附件上传,支持设置 showFileList 显示上传进度

components: [
  {
    name: "SUploader",
    label: "附件",
    key: "file",
    type: "file",
    showFileList: true,
  },
];

2.新增 PDF 文件预览

20210318

1.优化视频上传组件样式和增加文件限制功能，增加支持type和accept

components: [
  {
    name: "SUploader",
    label: "附件",
    key: "file",
    type: "file",
    isDetail: true,
  },
  { name: "SUploader", label: "图片", key: "image", type: "image", drag: true },
  { name: "SUploader", label: "视频", key: "video", type: "video" },
  { name: "SUploader", label: "音频", key: "audio", type: "audio" },
  { name: "SUploader", label: "pdf", key: "pdf", type: "pdf" },
];

2. 删除image和media弹窗显示组件
3. 整合文件预览功能增加FilePreviewer组件，按照下方方式调用即可

this.$fp.show(this.dealFileList, i);

20210222

1. 版本 1.0.0 基本成型
2. 优化SForm组件resetFields处理逻辑，增加clearFields方法用于清空表单内容

开始使用

该项目已经通过jekins部署到公司npm仓库，在进行npm代理配置之后可以直接安装

jekins 地址：https://jenkins.btzh.net/job/base-web/ (opens new window)

切换公司npm库

npm config set registry https://nexus.btzh.net:4443/repository/npm-group/

安装

npm install base-web -S

使用

import BaseWeb from "base-web";
import "base-web/dist/base-web.css";
Vue.use(BaseWeb);

安装后可使用内置组件和内置方法库$lib进行内部方法调用

SForm

基本使用

form 组件为element组件库中el-form以及其他组件的二次封装，通过data中数组实现表单的渲染，数组每一项数据来配置具体组件的逻辑，样式等

<s-form
  ref="form"
  labelWidth="100px"
  :data.sync="form"
  :components="components"
></s-form>

{
  form: {
    SUploader: '',
    SInput: '',
    SCheckbox: [],
    SDateTime: '',
    SRadio: '',
    SRate: 5,
    SSelect: '',
    SSwitch: false
  },
  components: [
    { name: 'SInput', label: '输入框', key: 'SInput' },
    { name: 'SCheckbox', label: '复选框', key: 'SCheckbox', items },
    { name: 'SDateTime', label: '时间', key: 'SDateTime' },
    { name: 'SRadio', label: '单选框', key: 'SRadio', items },
    { name: 'SRate', label: '星级', key: 'SRate' },
    { name: 'SSelect', label: '选择', key: 'SSelect', items },
    { name: 'SSwitch', label: '开关', key: 'SSwitch' },
    { name: 'SUploader', label: '图片', key: 'SUploader' }
  ]
}

支持内置组件分栏，大小设置，是否只读，是否禁用，labelWidth 动态设置

参数

parent: { type: String }, //组件所在组件名称
mykey: { type: String }, // 循环组件可通过此参数附带key
size: { type: String, default: 'medium' }, // 大小
data: { type: Object, required: true }, // 数据绑定
gutter: { type: Number, default: 0 }, // 分栏间隔
components: { type: Array, required: true }, // 组件列表
disabled: { type: Boolean, default: false }, // 是否禁用
isDetail: { type: Boolean, default: false }, // 是否只读
inline: { type: Boolean, default: false }, // 是否一行显示
rules: { type: Object, default: () => { return {} } }, // 校验规则
labelWidth: { type: String, default: 'auto' }, //lauto  sauto   vauto
labelPosition: { type: String } // label文字位置

components

使用

components: [
  { name: "SInput", label: "上级菜单", key: "parentName", disabled: true },
  { name: "SInput", label: "操作名称", key: "name", isDetail: true },
  { name: "SInput", label: "操作编码", key: "code" },
];

除正常使用绑定name,label,key等必须字段之外，可以支持

• disabled: 是否禁用
• isDetail: 是否只读
• labelWidth: label 宽度
• placeholder: 默认显示字样
• change: change 事件
• span: 分栏宽度(el-col)
• class: 类名

rules

使用

Rules: {
  name: { required: true },
  code: { required: true }
},

除正常使用判断是否是空之外，rules 还支持具体数据格式的校验

number: { required: true, type: 'number' },
mobile: { required: true, type: 'mobile' },
idCard: { required: true, type: 'idCard' },
landline: { required: true, type: 'landline' },
phone: { required: true, type: 'phone' },
creditCode: { required: true, type: 'creditCode' },
grid: { required: true, type: 'grid' },
email: { required: true, type: 'email' },
name: { required: true, type: 'name' },
json: { required: true, type: 'json' },
object: { required: true, type: 'object' },
url: { required: true, type: 'url' },

事件

正常支持数据校验validate和重置数据resetFields,初此之外增加resetComponent方法，解决component数据变化之后，渲染不更改问题

this.$refs.form.validate((success) => {
  if (!success) return
)}

this.$refs.form.resetFields()
this.$refs.form.resetComponent()

STable组件

基于Element-UI二次封装的表格组件，所有el-table参数和函数已继承，精简代码的同时额外实现以下功能

1. 表格分页自动化：只需要将调用数据接口给到data参数即可自动处理
2. 真实序号：序号受分页影响，序号的排序为数据的真实顺序
3. 分页多选、回绑：不需要处理任何多选逻辑，在列项中加入type: 'selection'即可，使用selKeys.sync进行选择值的双向绑定，使用@selection-change接收已选择的对象
4. 函数渲染：可在columns对象中直接使用render函数渲染数据（该方式需要使用JSX语法）
5. 字典值：在列项中加入type:'dic',dic:字典Code,val:字典值可渲染字典项内容。（需要实现全局SDic组件，或者使用SDic组件映射到自定义字典组件）

其他组件

Copy

点击复制组件，可以在文字旁增加复制图标，点击即可复制指定文字，多用于 table 展示

<copy :text="row.err.stack" />

• text：复制文本
• tooltip：鼠标上移显示文本(文本过多时可以设置)

FileList

文件列表展示组件

<file-list :fileList="fileList"></file-list>

SideDialog

侧边弹窗显示组件

<side-dialog title="弹窗" :modal.sync="dialog"></side-dialog>

参数

• modal:控制弹窗开合
• title:弹窗标题

事件

• close:弹窗关闭事件

插槽

• 默认插槽：主要显示弹窗内容
• footer：底部操作部分

MixinPage

为了方便页面进行数据的增删改查操作，内部放置了全局混入page，data层中放置参数isPage为true即可使用

变量

• PDictionaryMap :Object 所有字典即可，可以通过绑定的key找到字典对应的值

console.log(this.PDictionaryMap["sex"]["1"]); //男

方法

• PDealQueryParams ：处理query请求参数
• PFormToData : 将表单数据处理成可以提交的数据
• PDataToForm : 将数据库数据处理成表单可以读取的数据
• PFormatterCommon : 用于el-table的formatter属性

方法库 Lib

在引入组件库的通知，lib会挂载到Vue实例中，可以通过this.$lib调用

方法库目前包含时间日期处理，判断数据格式，数据判断校验，节流，防抖，字符串处理，树状结构处理等方法（持续扩充中···）

数据类型校验

• isArray
• isObject
• isString
• isNumber
• isDate
• isFunction
• isRegExp
• isBlob
• isFile

日期时间处理

• dateFormate:时间格式化处理
  • Date
  • String ：时间格式化方式(YYYY-MM-DD HH:mm:ss)
• dateYesterday ：获取日期的前一天
• dateTomorrow ：获取日期的后一天
• dateWeekFirstDay ：获取日期所在周的第一天
• dateWeekLastDay ：获取日期所在周的最后一天
• dateMonthFirstDay ：获取日期所在月的第一天
• dateMonthLastDay ：获取日期所在月的最后一天
• dateDifference ：根据时间格式获取两个时间差
  • startTime:开始时间
  • endTime:结束时间
  • formatStr:时间格式化方式(D 天 H 小时 M 分 S 秒)

数据格式校验

• isIdentificationNumber: 校验身份证号码是否正确
• isMobile: 校验手机号码是否正确
• isLandline: 校验座机号码是否正确
• isPhone: 校验联系方式是否正确
• isEmail: 校验邮箱是否正确
• isCharacter: 校验是否是汉字
• isSocialCreditCode: 校验是否是社会信用代码校验
• isOrgCode: 校验是否是组织机构代码
• isBizLicenceCode: 校验是否是行业许可证注册码
• isJSON: 判断是否是 json 格式数据
• isEffective: 判断数据是否有效
• isLink: 判断是否是链接
• isLowerCase: 判断是否是小写字母
• isUpperCase: 判断是否是大写字母
• isPictureLink: 判断是否是图片链接
• isVedioLink: 判断是不是视频链接
• isAudioLink: 判断是不是音频链接

字符串处理

• stringToLowerLine: 将驼峰命名转为分割符分开的字符串
• stringGetSexAndBirthday: 根据身份证计算生日和性别
• stringSplitBy: 根据数组字符切分字符串
  • String：字符串
  • Array:数字组成的数组
• stringRandomLength: 根据长度随机生成字母大小写和数字的字符串
  • length:生成字符串长度
• stringCardCodeEncrypt: 身份证脱敏
• stringPhoneEncrypt: 电话脱敏
• stringEmailEncrypt: 邮箱脱敏
• stringNameEncrypt: 姓名脱敏

函数防抖和节流

• debounce：防抖
• throttle: 节流

树状数据处理

• treeAllData: 获取数据关键字组成的数组
• treeHaveByKey: 判断树形数据里面某个关键字是否有值
  • treeData
  • key
  • value

文件

• fileBaseDownload : 文件下载
  • base64
  • name