公司项目通用组件【配合VUE2、element使用】

优势：

基于element-ui进行二次封装、以达到近乎纯JS来实现页面极速开发效率且页面逻辑非常清晰、方便后期代码的迭代更新。组件自动解决表单、表格的大量重复工作：如表单必填校验、label、placeholder、输入格式、长度、身份证、手机号等常用正则。使用则仅需关注业务。且几乎任何dom都可以通过抛出的FN或通过slot插槽来应对一些特殊、复杂的情况。

jv-components使用说明

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,
}

rl-table使用示例

暂公司内部使用，暂无详细文档，可根据下列注释食用

创建.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>

formItem使用示例【待更新】

tips

可传入更多element相关组件参数