JPwise-docs

Appearance

扩展函数 ​

1 自定义组件弹窗函数openWindow ​

  • url 被打开页面的源码路径   其格式为 src 下至被打开的页面名，只支持 Vue 页面，去除.vue 后缀   常用路径

    1. views/basic/dynamicModel/list/Form  表单页面
    2. views/workFlow/components/FlowBox  流程表单页面
    3. views/basic/dynamicModel/list/index  列表页面
    4. views/infra/word/wordPBSTemplate/index  自定义页面例如

  • popupType 弹窗类型，general-普通弹窗，fullScreen-无 dialog 弹出,drwan-抽屉弹出；注意如果弹出页面出现两次，则需要使用fullScreen

  • refresh  在关闭表单后刷新与表单链接的列表，刷新只针对两个函数 init 和 initPage

  • showFooter 是否展示弹窗底部(确认，取消按钮)

  • showHeader 是否展示弹窗头部(标题，按钮等)

  • openTabsOnBrowser 是否在浏览器新 tab 页中打开

  • width 弹窗宽度

  • height 弹窗高度

  • title 弹窗标题

  • isDetail 是否为详情页，详情页会禁用组件，隐藏弹出上面的按钮

  • data 类型应为 Object 会通过 init 传入被打开页面内部，可通过被打开页面的自定义 JS 方法的参数获取

    • TmplCode  打开配置页面必不可缺的参数，它是配置页面的结构数据 id,功能设计 id
    • flowId 对于打开高开的流程表单使用这个参数，他是流程设计的id(TmplCode和flowId只需要一个)
    • id  打开页面的真实数据 ID，通常情况下会根据此 id 在被打开页面的 init 方法中使用
    • formType  表单类型，是开发模式=1,配置模式=2，如果要打开流程页面时，是必须的
    • opType  流程状态，待审，已审，抄送，发起等
    • defVal  自定义数据集，用作生成默认值，或传递数据 id
    • taskId  流程任务 id(可选)
    • taskNodeId  流程任务节点 id(可选)

  • onDestroy  回调函数

    • confirm  确认后调用
      • data  弹窗数据-表单数据
      • selectedData  弹窗数据-选择数据
    • componentClose  回调关闭后调用
      • close  关闭弹窗
js
({ data, request, toast, refresh, initDynamicModelData, openWindow }) => {
  let that = this;
  openWindow({
    url: "views/infra/word/wordPBSTemplate/index",
    height: "800px",
    width: "800px",
    title: "选择数据",
    showHeader: true,
    showFooter: true,
    refresh: true,
    popupType: "general",
    isDetail: false,
    data: {
      TmplCode: "547062297219039429",
      id: "585007185948316677",
      taskNodeId: "585007187017864198",
      taskId: "585025915570885637",
      opType: "1",
    },
    onDestroy: {
      confirm: ({ data, selectedData }) => {
        console.log(data, selectedData, "confirm======data=======");
        this.close();
      },
      componentClose: () => {
        console.log("componentClose==========");
        this.close();
      },
    },
  });
};

2 根据枚举值和枚举列表获取枚举文本getEnumText ​

  • enumItemCodes  枚举值, 例如 enumItemCodes: "aa,bb,cc"
  • enumItemList  枚举列表, 例如 enumItemList: [{code: "aa", value: "aa"}, {code: "bb", value: "bb"}, {code: "cc", value: "cc"}]
js
this.jnpf.getEnumText(enumItemCodes, enumItemList);

3 格式化函数format ​

该函数在 extend.js 中定义，功能如下：

  • 为枚举做转换 enumFormat
  • 转换日期格式 dateFormat
  • 为数字做千分位 thousand
  • 为数字做小数点位数(精度) precision
  • 为数字添加单位及添加特殊字符(货币符号等) currency
  • 为列表列做合计处理(目前只支持以下四种，这四种都解决了 js 浮点数计算的问题) totalInfo
    • 平均值
    • 合计值
    • 最大值
    • 最小值
  • 展示动态文本(字符串和变量拼接) textDecoration
  • 为文本添加颜色 textColor
  • 解构对象类型(展示对象嵌套类型内部属性) arrayObjectShowField
  • 外链链接 hyperlink
  • 内链参数(参数是为 CC 提供的) linkCC

4 返回值函数相关returnParam ​

支持绑定值至 dataForm，dataForm的属性上(即子表)，与 dataForm 同级的属性(父级组件的属性)，不符合上述条件则绑定至父级组件 this 上

  • labelText 显示文本
  • returnParams 返回参数键值对
  • customParamsChange 处理函数
  • target 绑定目标，可以是 this， dataFrom，或子表或任意属性
  • rowIndex 处于子表时的行数
html
<user-select
  v-model="dataForm.CREATORUSER"
  :labelText="item.labelText"
  :returnParams="{ CREATORUSERNAME: 'fullName' }"
  @customParamsChange="selectChange(...arguments, item)"
/>
js
import { setSelectParams } from "@/utils/base.js";

selectChange(info, target, rowIndex) {
  if (!target) {
     this[target] = this.dataForm[target];
  }
  setSelectParams.call(this, { ...info, target, rowIndex });
}