web-public-jy-wjh v1.1.71

第一步 使用命令下载

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-phone 【布尔，true 代表是安卓端，默认为web端】

<JyDefaultApproval  :params="params" :is-phone="isPhone">
</JyDefaultApproval >

六、单个审批流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，默认为审批类型】

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

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】

<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：[] // 绑定的数据

accept：".zip,.rar..." // 提示文件上传的后缀名

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

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

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

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

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

hide："false" //是否禁用

width：100 // 文件类型

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

备注1：文件上传

第一个参数：文件流

第二个参数：返回的数据格式

import { fileSliceSize } from "@jy/utils/fileSliceSize.js";
// 参数必传
fileSliceSize(文件流，返回的数据格式)
// 默认返回的数据格式
 fieldNameType = {
    fileId: "",
    fileName: "",
    filePath: "",
    fileSize: "",
    fileType: "",
};

十二、文件预览

fileItem：{

fileType："文件类型"，

filePath："文件路径"，

fileName："文件名字"

}

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

<JyFileZipDoor :fileItem="fileItem"  @closeFun=""></JyFileZipDoor>

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

fileType：" " //文件类型

filePath：" " //文件路径

fileName：" " //文件名称

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

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

filePath：" " //文件路径

fileName：" " //文件名称

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

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

fileType：" " //文件类型

filePath：" " //文件路径

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

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

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

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

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

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

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