v0.2.9 正式版

安装命令：npm install yc-ui2

main.js 导入

import Ycui2 from "yc-ui2";
import "yc-ui2/dist/yc-ui2.css";

Vue.use(Ycui2, {
  autoRefresh: true // 服务器更新版本，开启自动刷新页面
  duration: 60000, // 自动检查时间间隔，默认 60000ms（一分钟）
  // sub用于[yc-sub-app, yc-watermark, yc-login-box, yc-app-info]公用传递参数
  sub: {
    // 这里写的参数[yc-sub-app, yc-watermark, yc-login-box, yc-app-info]组件可以不写，优先使用组件props传递的值， 参考element-ui 组件的用法
    .......
  },
});

组件

| Name | Describe | | -------------------------------------------------------------------- | --------------------- | | YcSlideVerify | 滑动验证 | | YcCustomerService YcQuestion | 小优客服 | | YcCA | CA 组件 | | YcTeleport | 存送门（vue3 中类似） | | YcSidebar | 左侧菜单栏 | | yc-pdf-dialog | PDF 弹窗预览 | | yc-pdf | PDF 预览 | | yc-sub-app | 微服务集成 | | yc-watermark | 微服务水印 | | yc-login-box | 微服务登录框 | | yc-app-info | 微服务项目信息 |

yc-slide-verify

滑动验证

vue.config.js

proxy: {
  // 在proxy中添加以下代码
  ['/cloud-img']: {
    target: `http://***:***/cloud-img/`,
    changeOrigin: true,
    pathRewrite: {
      ["^/cloud-img"]: "",
    },
  },
}

<yc-slide-verify :isShow.sync="isShow" @success="handleLogin" />

| Param | Type | Describe | | ------- | ---------- | -------- | | title | String | 滑动验证 | | proxyPath | String | 代理路径 | | isShow | Boolean | 是否显示 | | success | Function | 成功回调 | | close | Function | 关闭显示 |

yc-customer-service

小优客服右角展示

vue.config.js

proxy: {
  // 在proxy中添加以下代码
  ['/customer-api']: {
    target: `http://***:***`,
    changeOrigin: true,
    pathRewrite: {
      ["^/customer-api"]: "",
    },
  },
}

<yc-customer-service
      :id=""
      :title=""
      :tokenName=""
      jumpPage="/question"
      hotlineService="客服热线" // 可不传，默认：客服热线
    >
      <!-- 定制化插槽部分 -->
      <div>
        <!-- 第一个div内容 右下角显示图片 -->
        <i class="el-icon-mobile"></i>
      </div>
      <div>
        <!-- 第二个div内容 鼠标放入第一个div会提示以下部分 -->
        <span>客服热线</span>
        <a href="tel:***">***</a>
        <template v-if="!['/login', '/register'].includes($route.path)">
          <span style="margin-top: 10px">***服务电话</span>
          <a href="tel:***">***（***）</a>
          <a href="tel:***">***（***）</a>
        </template>
      </div>
    </yc-customer-service>

| Param | Type | Describe | | -------------- | -------- | ---------------------------------------- | | id | Number | 服务 id | | title | String | 服务标题 | | tokenName | String | token 名称 | | jumpPage | String | 展开跳转客服页面 | | hotlineService | String | 右下角显示文字（可不传，默认：客服热线） |

yc-question

小优客服页面

需要在白名单中添加 /question 页面；有的在 permission.js 有的在 router 中

const whiteList = ["/login", "......", "/question"];

路由中需要配置 yc-customer-service 组件中 jumpPage 参数跳转的页面 router/index.js 路由中添加以下部分

{
    path: "/question", //yc-customer-service组件中jumpPage参数保持一致
    component: (resolve) => require(["@/views/question"], resolve),
    hidden: true,
  },

根据自己编写的路由文件创建文件：views/question.vue 新创建的 question.vue 中加入以下代码

<template>
  <YcQuestion :id="" :title="" :commit="" :tokenName=""></YcQuestion>
</template>

| Param | Type | Describe | | --------- | -------- | ---------- | | id | Number | 服务 id | | title | String | 服务 Name | | commit | String | 描述 | | tokenName | String | token 名称 |

YcCA

CA 组件

<YcCA :region="region" @caSuccess="login" />

| Param | Type | Describe | | --------- | ---------- | --------------- | | region | Number | CA 地区类型 | | caSuccess | Function | CA 成功回调方法 |

YcTeleport

存送门

<yc-teleport :to="body"></yc-teleport>

| Param | Type | Describe | | ----- | --------------------- | -------- | | to | 默认body、id、class | 传送地方 |

YcSidebar

左侧菜单栏

<yc-sidebar
  :routeList="jsonRouter"
  background="#FFFFFF"
  color="#FF5449"
  exclude="/marginPrice, xmHeading"
  @before-click="handleChild"
>
  <!-- 项目logo -->
  <template #logo
    ><img :src="require('assets/customerService/admin.jpg')"
  /></template>
  <!-- 菜单栏图标 -->
  <template #menu-icon="{ icon }">
    <i :class="icon"></i>
  </template>
</yc-sidebar>

<script>
  export default {
    methods: {
      // 案例：自定义拦截方法-跳转页面
      handleChild(item, backFun) {
        const isTrue = item.path != "/marginPrice";
        if (!isTrue) {
          const { protocol, hostname } = document.location;
          const _url =
            protocol +
            "//" +
            hostname +
            ":" +
            process.env.VUE_APP_JUMP_PLATFORM;
          window.open(_url + "?jump_token=" + Cookies.get("Admin-Token"));
        }
        backFun(isTrue);
      },
    },
  };
</script>

| Param | Type | Describe | | ------------ | --------------------------------------------- | ------------------------------------------------------- | | routeList | Array | 菜单数据 | | title | String | 项目标题 | | background | String | 背景颜色 | | color | String 默认值：#4e88f3 | 文字颜色 | | width | String 默认值：170px | 菜单栏宽度 | | height | String 默认值：45px | 菜单栏单行高 | | itemHeight | String 默认值：32px | 子菜单行高 | | exclude | Array String,号分割 | 搜索移除 | | before-click | Function<{path: string}, Function<Boolean>> | 菜单栏点击事件触发之前执行, false 阻止冒泡，true 不阻止 |

yc-pdf-dialog

PDF 弹窗预览（签章）

<yc-pdf-dialog
  :visible.sync="visible"
  :pdfTitle="title"
  :pdfUrl="url"
  :signPositonArr="signPositonArr"
  :power="saveStampPower"
  @save="saveStamp"
></yc-pdf-dialog>

| Param | Type | Describe | | -------------- | ------------------------------------------------------------- | ----------------------------- | | visible | Boolean | 是否显示 | | width | String | 宽度（默认 50%） | | top | String | 弹窗距离顶部高度（默认 10vh） | | watermark | String | 水印 | | pdfTitle | String | 标题 | | pdfUrl | String | PDF 链接 | | signPositonArr | [{ page: 1, left: 0, top: 0, right: 296, bottom: 802 },...] | 多盖章定位 | | power | String | 保存按钮权限v-hasPermi | | signed | Function<Array> | 已签章信息 | | save | Function<base64> | 保存按钮事件回调 | | close | Function | 关闭按钮事件回调 |

yc-pdf

PDF 预览 (自定义操作)

<yc-pdf></yc-pdf>

| Param | Type | Describe | | ------------------------------- | ------------------------------------------------------------- | --------------------------------------- | | watermark | String | 水印 | | pdfUrl | String | PDF 链接 | | signPositonArr | [{ page: 1, left: 0, top: 0, right: 296, bottom: 802 },...] | 多盖章定位 | | loading | Function<base64, height> | pdf 加载中回调<pdfbase64, pdf 显示高度> | | loaded | Function<base64, height> | pdf 加载中回调<pdfbase64, pdf 显示高度> | | signed | Function<Array> | 已签章信息 | | <yc-pdf ref="ycPdf"></yc-pdf> | this.ycPdf.signPdfReturnData(); | 调用 CA 签章方法 |

yc-sub-app

新建文件：src/views/subApp/index.vue

<script>
  export default {
    render() {
      return (
        <yc-sub-app
          {/* 以下参数传值请参考：loginBox({...}) */}
        ></yc-sub-app>
      );
    },
  };
</script>

| Param | Type | Describe | | ------------- | -------------------------------------------------- | ---------------------- | | url | String | 子应用地址 | | routes | Array 默认值：this.$store.getters.sidebarRouters | 父路由表 | | router | Object 默认值：this.$router | 父路由对象 | | proxy-path | string 必传:默认值保证金1.0 | 接口代理路径 | | token-name | string 默认值:Admin-Token | 登录凭证名称（cookie） | | upload-path | string | 上传文件路径 | | public-key | string 默认值保证金1.0 | 公钥 | | private-key | string 默认值保证金1.0 | 私钥 | | login-request | Function(request, data) => Promise<request> | 自定义登录请求方法 | | set-module | Number 参数：0.公共 1.自有 2.保证金 3.专家 | 财务模块 | | platform | ZX 、 GG 、 YW | 当前应用平台 |

菜单管理配置

1.组件路径 全部设置为如：subApp/index.vue 2.路由地址 如： /page/**/subPage-loginConfiguration 或 /subPage-loginConfiguration (只要尾部是 subPage-loginConfiguration 即可)

| 路由地址 | 路由名称 | 备注 | | ---------------------------------- | -------------- | ---------------------------------- | | login | 登录页面 | | login-box | 登录框 | | resetPassword | 忘记密码 | | | subPage-loginConfiguration | 登录页配置 | | subPage-smOneKey | 一键体验 | | subPage-smGuardLog | 防护日志 | | subPage-smEncrypted | 国密加密 | | subPage-smAttachment | 附件加密 | | subPage-smUploadAttachmentSettings | 上传附件设置 | | subPage-smAdminSetup | 审计管理员设置 | | subPage-smAuthenticate | 密码安全设置 | | subPage-smSimultaneousOnline | 同时在线 | | subPage-smLoginSet | 登录设置 | | subPage-smDetectionSql | SQL 注入检测 | | subPage-watermarkSetup | 水印设置 | 数据变动会同步到yc-watermark组件 | | subPage-taxTypesArchives | 税率档案 | 财务模块 | | subPage-taxRateArchives | 税率档案 | 财务模块 | | subPage-params-setPzSet | 凭证设置 | 财务模块 | | subPage-mainBusiness-beginningBalance | 财务期初 | 财务模块 | | subPage-mainBusiness-zhglPz | 填制凭证 | 财务模块 | | subPage-mainBusiness-bookKeeping | 凭证记账 | 财务模块 | | subPage-mainBusiness-zhglPzCheck | 查询凭证 | 财务模块 | | subPage-mainBusiness-voucherApproval | 审核凭证 | 财务模块 | | subPage-mainBusiness-subjectsSummary | 科目汇总 | 财务模块 | | subPage-mainBusiness-cashJournal | 现金日记账 | 财务模块 | | subPage-mainBusiness-bankJournal | 银行日记账 | 财务模块 | | subPage-mainBusiness-capitalDaily | 资金日报 | 财务模块 | | subPage-mainBusiness-customizeTransfer | 转账定义 | 财务模块 | | subPage-mainBusiness-periodTransfer | 期间转账 | 财务模块 | | subPage-mainBusiness-transferGranral | 转账生成 | 财务模块 | | subPage-mainBusiness-checkout | 结账 | 财务模块 | | subPage-accountingBooks-statSum | 总账 | 财务模块 | | subPage-accountingBooks-subjectDetailAccount | 明细账 | 财务模块 | | subPage-accountingBooks-subjectDailyAccount | 日记账 | 财务模块 | | subPage-accountingBooks-subjectBalance | 余额账 | 财务模块 | | subPage-departAccount-departAssist | 部门总账 | 财务模块 | | subPage-departAccount-departSubjectDetail | 部门科目明细账 | 财务模块 | | subPage-departAccount-departDetail | 部门明细账 | 财务模块 | | subPage-departAccount-departSubjectBalance | 部门科目余额账 | 财务模块 | | subPage-departAccount-departBalance | 部门余额账 | 财务模块 | | subPage-personalAccount-personAssist | 个人总账 | 财务模块 | | subPage-personalAccount-subjectDetailAccount | 个人科目明细账 | 财务模块 | | subPage-personalAccount-personalDetailAccount | 个人明细账 | 财务模块 | | subPage-personalAccount-subjectBalance | 个人科目余额账 | 财务模块 | | subPage-personalAccount-departBalance | 个人部门余额账 | 财务模块 | | subPage-personalAccount-personalBalance | 个人余额账 | 财务模块 | | subPage-contactsAccount-contactsSubjectBalance | 单位科目余额账 | 财务模块 | | subPage-contactsAccount-contactsSubjectDetail | 单位科目明细账 | 财务模块 | | subPage-contactsAccount-contactsDetail | 单位明细账 | 财务模块 | | subPage-contactsAccount-contactsBalance | 单位余额账 | 财务模块 | | subPage-projectAccount-projecttAccount | 项目总账 | 财务模块 | | subPage-projectAccount-projectDetail | 项目明细账 | 财务模块 | | subPage-projectAccount-projectSubjectDetail | 项目科目明细账 | 财务模块 | | subPage-projectAccount-accountGeneralLedger | 项目科目总账 | 财务模块 | | subPage-projectAccount-classification | 项目分类总账 | 财务模块 | | subPage-projectAccount-subLedger | 项目分类明细账 | 财务模块 | | subPage-assetsLiabilities-assetsList | 资产负债表 | 财务模块 | | subPage-basesetBaseInfo-dwClass | 客户分类 | 财务模块 | | subPage-basesetBaseInfo-supplierClass | 供应商分类 | 财务模块 | | subPage-basesetBaseInfo-xmClass | 项目分类 | 财务模块 | | subPage-basesetBaseInfo-unit | 客商档案 | 财务模块 | | subPage-basesetBaseInfo-xmHeading | 项目大类 | 财务模块 | | subPage-basesetPayment-jsWay | 结算方式 | 财务模块 | | subPage-basesetPayment-bankArchives | 银行分类 | 财务模块 | | subPage-basesetPayment-yhFiles | 银行账户 | 财务模块 | | subPage-basesetFinance-hjSubjects | 会计科目 | 财务模块 | | subPage-basesetFinance-pzType | 凭证类别 | 财务模块 | | subPage-basesetFinance-summary | 常用摘要 | 财务模块 |

// router.js
  {
    path: "/login",
    component: () => import("@/views/subApp/index.vue"), // 菜单管理登录页面没有配置，可以修改原有的组件路径
    hidden: true,
  }

yc-watermark

水印组件：同步subPage-watermarkSetup页面数据变动

<template>
  <!-- 随便放app.vue或appMain.vue其它中即可 -->
   <yc-watermark :proxy-path="VUE_APP_BASE_API"/>
</template>
<script>

dept-name、user-name、login-date 有需要可以自己配置，可参考以下代码

<template>
  <!-- 随便放app.vue或appMain.vue其它中即可 -->
  <yc-watermark
    :proxy-path="VUE_APP_BASE_API"
    :dept-name="deptName"
    :user-name="userName"
    :login-date="loginDate"
  />
</template>
<script>
  export default {
    computed: {
      VUE_APP_BASE_API() {
        return "http://${VUE_APP_SUB_PROJECT_PATH}/dev-api";
      },
      deptName() {
        return this.$store.state.user.deptName;
      },
      userName() {
        return this.$store.state.user.username;
      },
      loginDate() {
        return this.$store.state.user.loginDate;
      },
    },
  };
</script>

// src/store/modules/user.js
const user = {
  state: {
    // 添加以下代码
    loginDate: "", // 登录时间
    deptName: "", // 部门名称
  },
  mutations: {
    // 添加以下代码
    SET_LOGINDATE: (state, loginDate) => {
      state.loginDate = loginDate || "";
    },
    SET_DEPTNAME: (state, deptName) => {
      state.deptName = deptName || "";
    },
  },
  actions: {
    /**  获取用户信息 */
    GetInfo({ commit, state }) {
      // 添加以下代码
      commit("SET_LOGINDATE", res.user.loginDate);
      commit("SET_DEPTNAME", res.user.dept?.deptName);
    },
  },
};

| Param | Type | Describe | | ---------- | -------------------------------------------------- | -------- | | proxy-path | String | 代理路径 | | token-name | string 默认值:Admin-Token | 登录凭证名称（cookie） | | dept-name | String 默认值：sessionStorage 存储值 deptName | 部门名称 | | user-name | String 默认值：sessionStorage 存储值 username | 用户名称 | | login-date | String 默认值：sessionStorage 存储值 loginDate | 登录时间 |

yc-login-box

第一种使用方式：拦截器中使用，无需引用组件即可使用

// request.js  引入组件
import { loginBox } from "yc-ui2";
// 引用自己项目的密钥配置文件
import { publicKey, privateKey } from "@/utils/jsencrypt";

// 拦截401错误并弹出登录框。
if (code === 401) {
  return loginBox({
    url: `子应用地址`,
    proxyPath: `子应用地址/代理地址/`,
    tokenName: `不写默认：Admin-Token`,
    publicKey, 
    privateKey,
    loginRequest: (request, data) => {
      // 每个项目的登录接口和返回的数据格式不一样，此处需要修改。
      return request
        .post("/登录接口地址", {
          loginPort: (() => {
            switch (process.env.VUE_APP_NO) {
              case "YW":
                return "1";
              case "ZX":
                return "2";
              case "GG":
                return "3";
            }
          })(),

          ...data,
        })
        .then((res) => {
          // 登录接口返回数据处理，例如：token字段名不是access_token，则需要修改此处。
          return {
            ...res,
            token: res.data.access_token,
          };
        });
    },
  })
  .then((data) => {
    // 登录成功回调
    Message.success(data.msg);
    return service.request(res.config);
  })
  .catch(() => {
    // 登录失败回调
    return Promise.reject("登录状态已过期，请重新登录！").finally(() => {
      store.dispatch("LogOut").then(() => {
        location.href = "/";
      });
    });
  });
}

第二种使用方式：直接引用组件或调用方法

<yc-login-box :url="`子应用地址`"></yc-login-box>

第三种使用方式：全局调用方法

this.$loginBox({
  url: `子应用地址`,
})
  .then((data) => {
    // 登录成功回调
  })
  .catch((err) => {
    // 登录失败回调
  });

| Param | Type | Describe | | ----- | -------- | ---------- | | url | String | 子应用地址 | | proxy-path | string 必传:默认值保证金1.0 | 接口代理路径 | | token-name | string 默认值:Admin-Token | 登录凭证名称（cookie） | | public-key | string 默认值保证金1.0 | 公钥 | | private-key | string 默认值保证金1.0 | 私钥 | | login-request | Function(request, data) => Promise<request> | 自定义登录请求方法 |

yc-app-info

获取应用信息，主要用于显示应用名称和logo等信息。

<yc-app-info> </yc-app-info>
<!-- 
  默认插槽，显示应用名称和logo信息，相当于如下代码：
  <yc-app-info #default="{ data }">
    <div class="titleImgBox">
      <i
        class="imgBox"
        :style="{ backgroundImage: 'url(' + data.logoPath + ')' }"
      ></i>
      <span class="title"> {{ data.name }}{{ data.platformName }} </span>
    </div>
  </yc-app-info>
-->

| Param | Type | Describe | | ----- | -------- | ---------- | | proxy-path | string 必传:默认值保证金1.0 | 接口代理路径 | | token-name | string 默认值:Admin-Token | 登录凭证名称（cookie） | |