Web-public-jy NPM

第一步使用命令下载

npm install web-public-jy

第二步在相应的页面引用

import 'web-public-jy/css/index.css'

import webPublicJy from 'web-public-jy' // 引入

第三步注册并应用组件

一、 naverbar 组件应用【请把该组件放在 Narbar 中】

<template>
  <div>
    <div class="navbar">
      <NavBar /> // 引入的组件
      <!-- <Navbartext :navtype="portal" /> // portal的引入传入portal=true的参数，其他子系统请忽略本行代码-->
    </div>
  </div>
</template>
<script>
import webPublicJy from 'web-public-jy' // 引入
export default {
  components: {
    NavBar: webPublicJy.nav, // 注册组件
  },
  data() {
    return {
      portal: true, // poratal的参数，其他系统请忽略
      }
   }
 }
</script>

二、 PageSelect 下拉分页组件

示例 1

<template>
  <PageSelect
    :key="PageSelectWtfInd"
    :pageselectfun="pageSelectWtfFun"
    :pageselectparams="pageSelectWtfParams"
    :invertobj="invertWtfObj"
    :model.sync="dialogForm.delegateId"
    placeholder="请选择委托方"
    :label="'item.clientName'"
    :value="'item.clientId'"
  />
</template>
<script>
  import { getClientOptions } from '@/api/public';
  import webPublicJy from 'web-public-jy' // 引入
  export default {
  components: {
    PageSelect: webPublicJy.PageSelect, // 注册组件
  },
  data() {
    return {
      PageSelectWtfInd: 0, // 委托方select的标识符
      pageSelectWtfFun: getClientOptions, // 委托方的函数
      pageSelectWtfParams: {
        page: 'page', // 页码
        pageCount: 'pageCount', // 页数
        searchKeyWord: 'clientName' // 搜索关键字
      },
      invertWtfObj: {}, // 委托方回显时候的对象
    }
   }
  }
</script>

示例 2

 <template>
    <PageSelect
      :key="PageSelectFprInd"
      :pageselectfun="pageSelectFprFun"
      :pageselectparams="pageSelectFprParams"
      :invertobj="invertFprObj"
      :model.sync="employeeItem"
      :valuekey="valueFprkey"
      placeholder="请输入被分配人"
      :label="pageSelectFprLabel"
      :value="pageSelectFprValue"
    >
      <!--定义一个插槽，该插槽必须放在template标签内,定义使用渲染方式-->
      <template v-slot:optionslot="message">
        <span style="float: left">{{ message.item.trueName }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px"
        >{{ message.item.orgName }} ——— {{ message.item.positionName }}</span>
      </template>
  </PageSelect>
</template>
<script>
  import { getEmplList } from '@/api/public';
  import webPublicJy from 'web-public-jy' // 引入
  export default {
  components: {
    PageSelect: webPublicJy.PageSelect, // 注册组件
  },
  // 注意：当编辑回显的时候  invertFprObj和employeeItem都是必填的
  data() {
    return {
       PageSelectFprInd: 0, // 被分配人select的标识符 | 组件的key值的标识符 【当每次组件或者组件列表进行改变时，】
      pageSelectFprFun: getEmplList, // 获取被分配人的function | *必填 函数类型 传递的接口函数【回调函数】  此处是获取职员列表的接口
      pageSelectFprParams: {
        page: 'page', // 页码
        pageCount: 'pageCount', // 页数
        searchKeyWord: 'trueName' // 搜索关键字
      }, // 接口的函数的参数的值  | *必填 对象类型，有三个属性  接口的函数的参数的值
      invertFprObj: {}, // 下拉框的list的数据 | 非必填 对象类型 编辑时候进行回显用【注意lable是拼接的话，需要将显示的所有字段都传输过来】 默认为{}
      employeeItem: {}, // 绑定的被分配人的对象 | *必填 字符串类型||对象类型   组件绑定的value值 此处是职员id
      valueFprkey: 'employeeId', // 当绑定value值为对象时必填 否则不用填 字符串类型
      pageSelectFprLabel:
        "item.trueName +' ( '+ [item.orgName ?item.orgName:''] +[item.positionName||item.orgName ?' —— ':'无'] + [item.positionName ?item.positionName:''] +' ) '",//非必填 字符串类型 选中的时候显示的label，可以进行变量拼接  默认为'item.label'
      pageSelectFprValue: 'item' // 绑定的值为item | 非必填 字符串类型 选中的value的值  默认为'item.value'【当model绑定的值是对象时，此处为'item'】
      }
   }
  }
</script>

三、页面缓存处理

1、src/layout/components/Sidebar/Link.vue 文件中在 return 返回的路径前面拼接/redirect

linkProps(url) {
      if (isExternal(url)) {
        return {
          is: "a",
          href: url,
          target: "_blank",
          rel: "noopener",
        };
      }
      return {
        is: "router-link",
        to: "/redirect" + url, // 在url前加上'redirect'即可
      };
},

2、src/router/index.js 在 constantRoutes 中添加下面的路由信息（禁止修改，复制即可）。

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        name: "RedirectWjh",
        component: () => import('@/views/redirect')
      }
    ]
  },

3、src/views/redirect.vue(创建的文件复制即可)

<script>
export default {
  name: "RedirectWjh",
  created() {
    const { params, query } = this.$route;
    const { path } = params;
    this.$router.replace({ path: "/" + path, query });
  },
  render: function (h) {
    return h(); // 避免警告消息
  },
};
</script>

4、src/layout/index.vue 文件中引入组件

<template>
  <div :class="classObj" class="app-wrapper">
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <navbar />
      </div>
      <JyAppMain></JyAppMain>  <!-- 引入组件 -->
    </div>
  </div>
</template>

5、要是指定页面进行缓存，需要在指定缓存的路由上，增加是否要进行缓存的标识 cacheData: true

缓存后，如需再次进入缓存页面触发函数，需要配置 activated: "activatedCache_fun" （固定不可更改）

cacheData: 页面是否要进行缓存

activated：缓存后，再次进入缓存页面的函数方法

 {
        path: '/project/continue/index',
        name: 'Continue',
        srvName: '/project/continue/index',
        component: () => import('@/views/project/continue/index'),
        meta: { title: '工程承接', sortNum: '3', activated: ["activatedCache_fun"], cacheData: true, },
 },

四、审批流组件

1 正常审批流【带审批按钮，项目详情的】

---必传参数 ---

approval-id【审批流 id】

---选传参数---

is-phone 【true|false ，是否是安卓端，默认为 web 端】

has-buttton 【true|false ，是代表显示审批流相关按钮，默认 true，显示按钮】

skip-url 【String ，是代表操作后要跳转的路径,不传的话会默认不进行跳转】

    <JyWebApprovalprocess :approval-id="approvalId" :is-phone="isPhone" :has-buttton='true' @operation-sumbit="operationSumbit">
      <template v-slot:proDetailsSlot>
        <div >
          这里写业务的项目详情代码
        </div>
      </template>

   <template v-slot:buttonSlot>
          这里写业务系统的相关按钮【默认为黄色，class="BHbutton" 红色 class="CHbutton"蓝色 class="TGbutton"绿色】

        <button>标记开票</button>
        <button>标记收款</button>
  </template>
    </JyWebApprovalprocess>

      methods: {
          operationSumbit(type) {
            console.log('我是父组件中获取到的数据')
            console.log(type)
          },
      }

2 单个审批流

--必传参数 ---

approval-id【审批流 id】

<JySingleApproval :approval-id="item.approvalId" />

3.审批流 list【相比单个审批流添加了展开和收起的按钮】

--必传参数 ---

approval-list【审批流 id 的数组，数组嵌套对象，】

---选传参数 ---

show -All 【布尔，true 代表显示全部，false 代表显示第一个，默认为 false】

<JyListApproval :approval-list="approvalList"  />

五、默认审批流

---必传参数【以下两个必须二选一必传】---

选项一、 params 【对象，获取默认审批流需要的参数，与原来写法相同，具体参加 swagger 中 /approvalRecord/getTargetApprovalRecord 获取适用审批流节点接口，】

选项二、 is-manual 【布尔，true 代表是使用者手动调用接口，并传入数据，默认为 false】 init-object 【对象，使用者手动传入的对象，注意要与/approvalRecord/getTargetApprovalRecord 获取到的数据格式相同】

---选传参数 --- is-phone 【布尔，是否是手机端，true 代表是安卓端，默认为 false，代表 web 端】 is-manager 【布尔，true 代表是否是管理者，默认为 false】 Approvalfun 【选传参数----接口 api，传递就用他发起请求，不传递就默认走审批接口】

六、单个审批流 Table 列表组件

注意：

如果使用了审批列表组件并且使用了缓存组件在审批列表页面需要加上一个方法否则在查看通过或者驳回后列表不会自动刷新

    <JyTableSP ref="spList" :type-options="typeOptions" @check-event="checkEvent" />

    activatedCache_fun() {
      this.$refs.spList.threeMonthChange()
    },

1 发起审批流列表

---必传参数---

type-options【数组，审批类型的 options，注意要有 name 和 value 组成，例如name:"请假申请",value:"SP0002" 】

---选传参数---

type-lable 【字符串，类型的 lable，默认为审批类型】

status-lable 【字符串，状态的 lable，默认为审批类型】

data-all【布尔，数据范围，默认为 false，如果传 true，不对参数进行处理，如果传 false，会对 other-params 里面的 workflowMode 进行处理，workflowMode 代表审批类型:0-审核 1-审批(默认)(新增)，有值的话进行处理，没有值或者传‘’或者 null 会默认传 1】

other-params【对象，接口需要的其他参数，具体参加 swagger 中 /approvalRecord/getMyApprovalRecordList 查询我发起的审批列表接口】

<JyTableFQ   :type-options='typeOptions' :type-lable='typeLable'  :status-lable='statusLable'  other-params='otherParams'  >
</JyTableFQ >

2 待审批和全部列表

---必传参数---

type-options【数组，审批类型的 options，注意要有 name 和 value 组成，例如name:"请假申请",value:"SP0002" 】

---选传参数---

is-all 【布尔，true 则是全部列表，默认为 false，待我审批列表】

initiator-lable 【字符串，发起人的 lable，默认为发起人】

type-lable 【字符串，类型的 lable，默认为审批类型】

status-lable 【字符串，状态的 lable，默认为审批类型】

date-lable 【字符串，时间的 lable，默认为发起时间】

other-params【对象，接口需要的其他参数，具体参加 swagger 中 /approvalRecord/getApprovalRecordList 查询我审批的审批列表接口】

<JyTableSP   :type-options='typeOptions' :is-all ='true'    >
</JyTableSP >

3 通知我的列表

---必传参数---

type-options【数组，审批类型的 options，注意要有 name 和 value 组成，例如name:"请假申请",value:"SP0002" 】

---选传参数---

initiator-lable 【字符串，发起人的 lable，默认为发起人】

type-lable 【字符串，类型的 lable，默认为审批类型】

status-lable 【字符串，状态的 lable，默认为审批类型】

date-lable 【字符串，时间的 lable，默认为发起时间】

data-all【布尔，数据范围，默认为 false，如果传 true，不对参数进行处理，如果传 false，会对 other-params 里面的 workflowMode 进行处理，workflowMode 代表审批类型:0-审核 1-审批(默认)(新增)，有值的话不进行处理，没有值或者传‘’或者 null 会默认传 1】

other-params【对象，接口需要的其他参数，具体参加 swagger 中 /approvalRecord/getNotifierApprovalRecordList 查询通知我的审批的列表接口】

<JyTableTZ   :type-options='typeOptions'  >
</JyTableTZ >

七、审批流列表 Table 的 tabs 的切换组件

tabs 默认分别为我发起的待审批全部通知我的

---必传参数【tabs 为默认时候必传】---

fqtype-options【数组，发起的列表审批类型的 options】

sptype-options【数组，待审批的列表审批类型的 options】

qbtype-options【数组，全部的列表审批类型的 options】

tztype-options【数组，通知我的列表审批类型的 options】

---选传参数---

tabs-show 【数组，是否显示，默认为1,1,1,1 ,不显示对应的 tab 则传 0，例如0,1,1,0 】 active-name【字符串，默认哪一个显示，可以传 FQ SP QB TZ 默认为 FQ】 data-all【布尔，数据范围，默认为 false，如果传 true，不对参数进行处理，如果传 false，会对 other-params 里面的 workflowMode 进行处理，workflowMode 代表审批类型:0-审核 1-审批(默认)(新增)，有值的话进行处理，没有值或者传‘’或者 null 会默认传 1】 other-params【对象，接口需要的其他参数，具体参加 swagger 中 /approvalRecord/getApprovalRecordList 查询我审批的审批列表接口】

<JyTabsSP
	:fqtype-options="typeOptions"
	:sptype-options="typeOptions"
	:qbtype-options="typeOptions"
	:tztype-options="typeOptions"
  :tabs-show="[0,1,1,1]"
  :active-name="'SP'"
	@check-event="checkEvent"
/>

checkEvent(row, type) {
//type取值  FQ发起 SP审批  QB全部 TZ通知
	console.log(row)
	console.log(type)
}

八、审批流状态码翻译

参数说明:

name: // 中文翻译 ,

classRound: // 圆的样式 , workflowStateBox:圆的盒子 , workflow_SPZStateColor：圆的颜色

classText: // classText:文字的颜色

style: // 整体样式 HTML

 BH:{
      name:'拒绝',
      classRound:['workflowStateBox','workflow_BHStateColor'],
      classText:['workflow_BHStateText'],
      style:`<span class="workflowStateBox  workflow_BHStateColor"></span><span class="workflow_BHStateText">拒绝</span>`
    },

1、使用方法一

<template slot-scope="{ row }">
      <span  v-html ='workflow[row.status].style'></span>
</template>

2、使用方法二

<template slot-scope="{ row }">
      <!-- 圆的样式 -->
      <span :class="workflow[row.status].classRound"></span>
      <!-- 文字的样式 -->
      <span :class="workflow[row.status].classText" >{{workflow[row.status].name}}</span>
</template>

九、商户 logo 统一

在 src/layout/components/Sidebar/index.vue

受托方

    <!--  隐藏这个 -->
    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
    <!--  隐藏这个 -->

    <!--  添加这个 -->
    <JySidebarLogo  v-if="showLogo"  :collapse="isCollapse" ></JySidebarLogo>
    <!--  添加这个 -->

委托方

    <!--  隐藏这个 -->
    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
    <!--  隐藏这个 -->

    <!--  添加这个 -->
    <JySidebarLogo  v-if="showLogo"  :collapse="isCollapse" :client="true" ></JySidebarLogo>
    <!--  添加这个 -->

十、系统常量

vue.config.js 文件中 alias 添加 '@jy': resolve('node_modules/web-public-jy')

 alias: {
            '@': resolve('src'),
            '@jy': resolve('node_modules/web-public-jy')
         },

需要的地方按需引入

PORTAL.path: 系统路径

PORTAL.source: 系统标识

import { PORTAL } from '@jy/constant/url'

系统前缀变量名

PORTAL 门户

STORAGEFILE 文件

KNOWLEDGEBASE 知识库

SSO 人资行政

FINANCE 财务协同

AUDIT 审计

CONTRACT 合同

PURCHASING 采购

SUPERVISOR 监理

BID 招标

ARCHIVES 档案

MANUFACTURINGCOST 造价

PROJECTMANAGE 项目管理

ASSESS 评估

SURVEY 测绘

DEVELOPMENT 研发

SYNTHESIZE 公共资源

BIM BIM中心

TENDER 投标

EDUCATION 教育

CONFIGURATION 配置中心

WORKFLOW 审批系统

BIDCLIENT 委托方

LOGIN 登录

PROCESSFILE 文件处理

十一、文件上传

listData：[] // 绑定的数据

whiteList="'.doc'" // 允许上传的白名单

fileType："fileType" // 文件类型别名

fileSize："fileSize" // 文件大小别名

filePath："filePath" // 文件路径别名

fileName："fileName" // 文件名称别名

fileId："fileId" // 文件 ID 别名

hide："false" //是否禁用

width：100 // 文件类型

<JyUploadFile :listData="列表数据" ></JyUploadFile>

备注 1：文件上传

新方法，

1、引入此方法需要在main.js中引入import 'web-public-jy/css/index.css'，

2、还需要在request.js文件service.interceptors.request.use中添加

service.interceptors.request.use(
  config => {
    if (!config.noShowLoading) {
      showLoading() // 显示加载中
    }

import { fileSliceSizeUpload } from "@jy/utils/fileSliceSize.js";

const fieldName = {
   fileId: 'fileId',
   fileName: 'fileName',
   filePath: 'filePath',
   fileSize: 'fileSize',
   fileType: 'fileType',
};
const data = {
   file: item.file,  // 文件内容
   fieldName: fieldName, // 需要返回的数据字段名
   businessType: 0, // 0 其他，1头像，3分片上传
   whiteList:['.doc'] // 允许上传的白名单
};
// 文件上传接口
fileSliceSizeUpload(data).then((res) => {
   this.listData.push(res);
});

备注：默认允许文件上传的类型

使用方式
import { fileTypeName，imgTypeName，zipTypeName } from '@jy/constant/url'


// 数据类型

// 基本文件类型
export const fileTypeName = ['.xlsx', '.xls', '.doc', '.docx', '.wps', '.csv'];
// 基本图片类型
export const imgTypeName = ['.pdf', '.png', '.jpg', '.jpeg', '.gif', '.bmp', '.txt'];
// 基本压缩文件类型
export const zipTypeName = ['.zip', '.rar'];

此方法将来作废，不兼容后版本，仅向前兼容

import { fileSliceSize } from "@jy/utils/fileSliceSize.js";
// 参数必传
fileSliceSize(file，fieldName,whiteList)

十二、文件预览

fileItem：{

fileType："文件类型"，

filePath："文件路径"，

fileName："文件名字"

}

clientFlag: "1" 委托方（非必传）

@closeFun：为啦清空传入 fileItem 的数据

<JyFileZipDoor clientFlag="1" :fileItem="fileItem"  @closeFun="fileItem={}"></JyFileZipDoor>

备注 1：换取预览的路径（非压缩文件）

fileType：" " //文件类型

filePath：" " //文件路径

fileName：" " //文件名称