第一步 使用命令下载

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，默认为 发起时间 】

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

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：" " //文件名称

middlePath: " " //文件中间路径（非必填） 例：“/storageFile/public/fdfs/downloadFile?fileName=”

import { filePreviewFun } from "@jy/utils/filePreview.js";
// 参数必传
filePreviewFun({fileType："doc",filePath:"路径地址",fileName:"文件名字"})
// 返回数据格式
{path:"文件路径",type:"文件分类，方便上面的预览组件使用"}

备注 2：文件下载 （非压缩文件）

filePath：" " //文件路径

fileName：" " //文件名称

middlePath: " " //文件中间路径（非必填） 例：“/storageFile/public/fdfs/downloadFile?fileName=”

import { fileDownloadFun } from "@jy/utils/filePreview.js";
// 参数必传
fileDownloadFun({filePath:"路径地址",fileName:"文件名字"})

备注 3：换取可以解压后的文件列表（压缩文件）

fileType：" " //文件类型

filePath：" " //文件路径

fileName：" " //文件名称

middlePath: " " //文件中间路径（非必填） 例：“/storageFile/public/fdfs/downloadFile?fileName=”

import { filePreviewFun } from "@jy/utils/filePreview.js";
// 参数必传
filePreviewFun({fileType："doc",filePath:"路径地址",fileName:"文件名字"})
// 返回数据格式
{listDataPopup:"解压后数据",type:"文件分类，方便上面的预览组件使用"}
// listDataPopup 数据格式
{
    fileName: 被解压的文件名字,
    filePath: 被解压的文件路径,
    fileType: 文件类型,
    downName: 文件路径,
    name: 文件名字,
    type: "文件分类，预览的时候传入的type"
}

备注 4：压缩文件预览路径（压缩文件）

downName：" " //解压后的每个文件的名字

filePath：" " //压缩文件路径

fileName：" " //压缩文件名称

middlePath: " " //文件中间路径（非必填） 例：“/storageFile/public/fdfs/downloadFile?fileName=”

import { rarFileShow } from "@jy/utils/filePreview.js";
// 参数必传
rarFileShow({downName："解压后的每个文件的名字",filePath:"路径地址",fileName:"文件名字"})
// 返回数据格式
{path:"路径",type:"文件分类，方便上面的预览组件使用"}

备注 5：压缩文件下载（压缩文件）

downName：" " //解压后的每个文件的名字

filePath：" " //压缩文件路径

fileName：" " //压缩文件名称

middlePath: " " //文件中间路径（非必填） 例：“/storageFile/public/fdfs/downloadFile?fileName=”

import { rarListDownload } from "@jy/utils/filePreview.js";
// 参数必传
rarListDownload({downName："解压后的每个文件的名字",filePath:"路径地址",fileName:"文件名字"})

十三、跳转页面公用方法

1.gostportal() 去受托方门户 gostlogin() 去受托方登录 gowtlogin() 去委托方登录 以上方法不传参数默认在当前页面打开 传了参数，在新页面打开 例如：gostlogin(1)

2.gowhere(par) 自定义跳转方式 参数： par 为对象 par = {} 例如：
const par = { path: 'sso', router: '#/baseinfo/emplnumber_configureindex', pars: '', type: '_blank' } gowhere(par) //在当前页面打开

十四、合同系统与其他业务系统的对接 【前端仅作展示使用】

project-id：项目 id 必传，进行项目和合同的关联 ，不在业务系统进行合同的创建，所有合同的创建需要去合同系统

has-button: 选传 布尔 是否有关联和取消关联的按钮 ，默认为 true

@operation-later ：函数方法名 操作之后调用 参数 1 type：1 代表关联 2 代表取消关联 参数 2 contractId：当前操作合同 id , hasbtn--是否显示关联合同按钮 注意传布尔类型 非必传参数 <JyContractRalation :project-id="projectId" :has-button="hasbtn" @operation-later=' operationLater '/> 注意：（如果需要关联合同页面增加默认的受托方和委托方，只需在父组件定义以下两个变量---选传） this.invertWtrObj = { clientName: res.data.delegateName, clientId: res.data.delegateId } this.invertStrObj = { baileeName: res.data.trusteeName, baileeId: res.data.trusteeId }

十五、项目详情 关于合同表格 和财务表格 【前端仅作展示使用】

项目 id 必传

十六、 项目内提成分配 ProjectRoyaltyAllocatin

projectId： 必传参数 【项目 id】 sourceCode: 必填（招标 BID、造价 MANUFACTURINGCOST、审计 AUDIT） 不传默认显示全部 unitCourseBtn: 必传 权限控制 (显示：true，隐藏：false)

十七、 项目内提成分配 ProjectRoyaltyWhole

projectId： 必传参数 【项目 id】 sourceCode: 必填（招标 BID、造价 MANUFACTURINGCOST、审计 AUDIT） 不传默认显示全部 allCourseExamineBtn: 必传（查看） 权限控制 (显示：true，隐藏：false) allCourseSetBtn: 必传（设置） 权限控制 (显示：true，隐藏：false)

projectId： 必传参数 【项目 id】 sourceCode: 必填（招标 BID、造价 MANUFACTURINGCOST、审计 AUDIT） 不传默认显示全部 alterationExamineBtn: 必传（查看） 权限控制 (显示：true，隐藏：false) alterationChangeBtn: 必传（设置） 权限控制 (显示：true，隐藏：false)

十八、 各业务系统使用 上传电子汇编文件 JYAddCompilationFile

templateparam： 必传参数 【项目id】 source: 必填（目前已有 监理 supervisor 评估 assess ）