基于element-ui进行二次封装、以达到近乎纯JS来实现页面极速开发效率且页面逻辑非常清晰、方便后期代码的迭代更新。组件自动解决表单、表格的大量重复工作：如表单必填校验、label、placeholder、输入格式、长度、身份证、手机号等常用正则。使用则仅需关注业务。且几乎任何dom都可以通过抛出的FN或通过slot插槽来应对一些特殊、复杂的情况。
npm i jv-components -s
main.js
import {OArlTable,OAformItem} from 'jv-components';
Vue.component('rl-table',OArlTable);
Vue.component('formItem',OAformItem);
import {OArlTable,OAformItem} from 'jv-components';
components: {
'formItem': OAformItem,
'rlTable': OArlTable,
}
创建.vue页面后可直接复制。
<template>
<div class="cp-page">
<!-- 列表页面的搜索条件、功能按钮、列表页面、分页功能 -->
<rl-table @getSelection="getSelection" :cfg="cfg" ref="rl-table"/>
<!-- 增改查的弹窗页面 -->
<comDialog v-model="dialogToggle" title="开票" :type="dialogType" @added="refreshTable" :id="dialogId" />
</div>
</template>
<script>
// 增改查的弹窗页面
import comDialog from "./comDialog";
// 按钮权限标识、可控制按钮级权限管理
let permiStr = "receipt:"
export default {
name: "device",
components: {
comDialog
},
data() {
return {
// 是否打开弹窗
dialogToggle:false,
// 打开弹窗的类型：支持view、add、edit
dialogType:'edit',
// 开启列表多选
selectIds:"",
cfg:{
queryParams:{
// 分页默认pageNum: 1,pageSize:20,
// pageNum: 1,
// pageSize:20,
},
searchCfg: {
// 默认：传"2"默认为：搜索和重置 两个按钮
queryBtn: "2",
},
// 如许自定义按钮请使用：
btnPlusList:[
{
name: "自定义按钮",
icon: "el-icon-plus",
type:"primary",
plain: true,
hasPermi:permiStr+'add',
fn:()=>{
// 点击回调
}
}
],
// 当前table页面高度默认为calc(100vh - 270px)
// tableHeight:"calc(100vh - 270px)",
// 左上角额外按钮
actionList: [
{
name: "申请开票",
icon: "el-icon-plus",
type:"primary",
plain: true,
hasPermi:permiStr+'add',
fn:()=>{
this.dialogType = "add"
this.dialogId = "";
this.dialogToggle = true;
}
},
{
name: "导出",
icon: "el-icon-download",
type:"warning",
plain: true,
hasPermi:permiStr+'export',
fn:()=>this.exportData()
},
],
// 是否开启多选功能
tableSelection: false,
// 是否隐藏搜索条件
hideSearch:false,
// 是否隐藏分页
hidePage:false,
// 搜索条件
searchList:[
{
// 是否隐藏labelName
hideName:false,
// 给这个搜索条件加一个class类用来自定义样式
class:"",
// label的宽度
labelWidth:"",
// 后端要传select的name而不是val是可：reqName：true;
reqName:false,
// 禁止操作：
disabled:false,
// 只读
readonly:false,
// form大小
size:"",
// filterable可筛选select
filterable:"",
// clearable输入之后可清楚
clearable:"",
name: "申请人",
type: "select",
key: "applyPerson",
// list通过接口请求来获取select需要的数据
list:async (r)=>{
function reqFn(r) {
return new Promise(resolve=>setTimeout(resolve,1000))
}
await this.reqFn();
}
},
{
name: "开票类型",
type: "select",
key: "prjProperty",
// list通过字典传入：需要配合字典通过接口
list:"ppj_dzlx"
},
{
name: "发票类型",
type: "select",
key: "billType",
// list直接配置
list:[
{
name:"专票",
val:"1"
},
{
name:"普票",
val:"2"
},
]
},
{
// 输入框最多可以输入长度
maxlength:"",
name: "开票单位",
// 输入框类型
type: "input",
key: "receiptUnit"
},
{
name: "创建时间",
// 时间搜索
type: "date",
// 范围传参可直接带两个参数
key: "applyDate",
pickerOptions:{
// 可对时间传入pickerOptions
}
},
{
name: "申请时间",
width:"300px",
// 时间范围类型
type: "daterange",
// 范围传参可直接带两个参数
key1: "applyDate1",
key2: "applyDate2",
pickerOptions:{
// 可对时间传入pickerOptions
}
},
{
name: "申请时间",
// 特殊的搜索条件。可以通过插槽来使用特殊情况
type: "slot",
},
],
// 点击了搜索之后会调用当前页面this.getList()方法
searchFn: this.getList,
// 这是表单的每一列
tableList:[
{
label: "开票单位",
prop: "receiptUnit",
// 可通过方法判断添加对应的class
class: r =>
r.receiptUnit ? "link-type" : "",
// 可接受字段被点击的function
fn: r => {
if (r.receiptUnit) {
this.dialogToggle = true;
this.dialogId = r.id;
this.dialogType = "view"
}
}
},
{
label: "开票类型",
prop: "receiptType",
// 后端接口只返回了ID、但是页面需要展示中文、无须后端转、前端可自行解决
transform:async (r)=>this.$transDict(await this.$dict('ppj_dzlx'), r.receiptType)
},
{
label: "申请人",
prop: "applyPerson",
// 后端接口只返回了ID、但是页面需要展示中文、无须后端转、前端可自行解决
transform:async (r)=>this.$transDict(await this.$listAllUser(), r.applyPerson)
},
{
// 后端接口只返回了ID、但是页面需要展示中文、无须后端转、前端可自行解决
label: "发票类型",
prop: "billType",
transform:async (r)=>['专票','普票'][r.billType-1]
},
{
label: "合同附件",
prop: "contractFile",
// 列表需要展示一个文件(已对文件类型做处理：可展示图片和file类型)
// 文件类型点击可直接下载、图片类型点击可放大图片、pdf类型点击可直接预览
viewFile:{
// 超出鼠标悬浮显示全称
showTip:false,
// file附件默认为文件名称、图片的话直接展示、也可赋值一个名称
fileName:"合同附件"
}
},
{
label: "开票总金额(元)",
prop: "applyAmount",
},
{
label: "操作",
width:200,
// 操作的按钮权限
buttonList: [
{
text: "编辑",
class:"el-icon-edit",
hasPermi:permiStr+'edit',
fn: row => {
this.dialogToggle = true;
this.dialogId = row.id;
this.dialogType = "edit"
}
},
{
text: "删除",
class:"el-icon-delete",
hasPermi:permiStr+'remove',
fn: row => this.moveOut(row)
},
]
},
]
},
};
},
methods: {
// 到处excel
exportData(){
let p2 = {
...this.$refs['rl-table'].exportExcel(),
};
// 应后端要求 不传页号
delete p2.pageNum;
delete p2.pageSize;
this.download('info/receipt/export', {
...p2
}, `contract_${new Date().getTime()}.xlsx`)
},
// 获取列表数据
getList(p, reset) {
let p2 = {
...p
};
if (!reset) {
Object.assign(p2);
}
return new Promise((resolve, reject) => {
this.$req("/info/receipt/list", {
method: "GET",
params: {
...p2,
}
}).then(res => {
resolve({
list: res.rows,
total: res.total
});
});
});
},
// 多选操作可调用
moveOutMulti() {
if (!this.selectIds) {
this.$info("请勾选！");
return;
}
this.moveOut({ id: this.selectIds });
},
// 删除操作
moveOut({ id }) {
console.log(id)
const delFn = () => {
this.$req(`/info/receipt/${id}`, {
method: "DELETE"
})
.then(res => {
this.$msg("操作成功！");
this.$refs['rl-table'].getList();
})
.catch(err => {
this.$err("失败");
});
};
this.$confirm("确定要删除么？", "确定", {
type: "warning"
})
.then(_ => delFn())
.catch(_ => {});
},
// 多选操作时获取了哪些列
getSelection(val) {
this.selectIds = val.map(x => x.id).join(",");
},
// 刷新当前列表
refreshTable() {
this.dialogToggle = false;
this.$refs['rl-table'].getList();
}
},
};
</script>
可传入更多element相关组件参数