hrp-ui-base 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrp-ui-base",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "HRP 前端公共组件、工具方法和基础样式包",
   "type": "module",
   "sideEffects": [
@@ -11,6 +11,7 @@
   "files": [
     "dist",
     "src",
+    "packages",
     "README.md"
   ],
   "main": "./dist/index.cjs",
@@ -19,23 +20,33 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
-      "import": "./dist/index.es.js",
+      "import": "./src/index.ts",
       "require": "./dist/index.cjs"
     },
     "./components": {
       "types": "./src/components.ts",
-      "import": "./dist/components.es.js",
+      "import": "./src/components.ts",
       "require": "./dist/components.cjs"
     },
+    "./components/*": "./src/components/*",
     "./utils": {
       "types": "./src/utils.ts",
-      "import": "./dist/utils.es.js",
+      "import": "./src/utils.ts",
       "require": "./dist/utils.cjs"
     },
     "./utils/*": {
       "types": "./src/utils/*.ts",
       "import": "./src/utils/*.ts"
     },
+    "./api/*": {
+      "types": "./src/api/*.ts",
+      "import": "./src/api/*.ts"
+    },
+    "./approval-process": {
+      "types": "./packages/approval-process/packages/types.d.ts",
+      "import": "./packages/approval-process/index.ts"
+    },
+    "./approval-process/*": "./packages/approval-process/*",
     "./assets/*": "./src/assets/*",
     "./styles/*": "./src/styles/*",
     "./package.json": "./package.json"

package/packages/approval-process/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "no-console": "off",
+    "no-debugger": "off",
+    // 其他你想关闭的规则
+  }
+}

package/packages/approval-process/README.md

@@ -0,0 +1,130 @@
+
+流程文档
+第一步
+
+1. 首先开发业务表单
+2. 然后让后端维护表单
+3. 给后端json 例如（需要用JSON.stringify转成字符串）
+
+[{"domType":"SysSelect","multiple":false,"title":"请假类型","require":true,"placeHolder":"请输入...","disabled":false,"refreshProcess":true,"optionList":[{"name":"年假","id":"1","balance":"3","unit":"day"},{"name":"病假","id":"2","balance":"0","unit":"day"},{"name":"事假","id":"3","balance":"0","unit":"day"},{"name":"调休","id":"4","balance":"3","unit":"hour"},{"name":"产假","id":"5","balance":"3","unit":"day"},{"name":"陪产假","id":"6","balance":"3","unit":"day"},{"name":"婚假","id":"7","balance":"3","unit":"day"},{"name":"丧假","id":"8","balance":"3","unit":"day"},{"name":"工伤假","id":"9","balance":"3","unit":"day"}],"type":"String","id":"1","value":"","remark":"","field":"type"},{"domType":"SysDataPicker","multiple":false,"title":"开始时间","require":true,"placeHolder":"请选择...","disabled":false,"refreshProcess":true,"optionList":[ ],"id":"2","value":"","remark":"","field":"startTime","type":"Date"},{"domType":"SysDataPicker","multiple":false,"title":"结束时间","require":true,"placeHolder":"请选择...","disabled":false,"refreshProcess":true,"optionList":[ ],"id":"3","value":"","remark":"","field":"endTime","type":"Date"},{"domType":"SysInput","multiple":false,"title":"时长(分钟)","require":true,"placeHolder":"请输入...","disabled":true,"refreshProcess":false,"optionList":[ ],"id":"4","value":"","remark":"","rule":"${endTime} - ${startTime}","field":"timeLeng","type":"Number"},{"domType":"SysInput","multiple":true,"title":"请假理由","require":true,"placeHolder":"请输入...","disabled":false,"refreshProcess":false,"optionList":[ ],"id":"5","value":"","remark":"","rule":"${endTime} - ${startTime}","field":"reason","type":"String"}]
+
+表单唯一凭证： 提交页面的路由，例如 /process/vacation
+4. 由后端维护回调配置
+5. 在 基础设置>基础管理功能>系统配置>流程管理 列表中找到您新增的数据，点击编辑流程，进入流程编辑器,配置流程后，根据提示，配置完成。
+第二步
+● 在 基础设置>基础管理功能>系统配置>流程管理 列表在流程找到您新增的数据，点击编辑流程，进入流程编辑器, 编辑器根据指示，新增节点信息，以及节点信息的配置数据，配置完成后点击左上角按钮 《保存当前流》，保存成功后即可
+第三步
+在你自己的业务模块中引入流程提交组件 组件引用方式如下
+import { xxx } from "approval-process";
+这个插件暴露多个组件
+SubmitApprove 提交审批组件
+ExamineApprove 审批组件  
+RouteParamsError 提交审批页面参数错误的显示页面
+SubmitSuccess 提交审批成功的显示页面
+ApproveSuccess 审批成功的显示页面
+AssociatedApprovalForm 关联审批单的组件
+AssociatedApprovalMobile 移动端选择审批单的组件
+AssociatedApprovalPc pc端选择审批单的组件
+
+组件具体参数说明：
+ExamineApprove 提交审批组件
+const props = defineProps({
+  /**是否可以提交 */
+  'canSubmit': {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  /**业务表单数据 */
+  'sendForm': {
+    type: Object as PropType<any>,
+    required: false,
+    default: () => { return {} }
+  },
+  /** 当前的流应用id */
+  'appId': {
+    type: String,
+    required: true,
+    default: ''
+  },
+  /**控制loading的传参 */
+  'submitLoading': {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  /** 发起人的id */
+  'promoterId': {
+    type: String,
+    required: true,
+    default: ''
+  },
+  /**发起人的部门id - 暂未启用 - 等待反馈后开发使用*/
+  'promoterDeptId': {
+    type: String,
+    required: false,
+    default: ''
+  },
+  /** 服务名称 */
+  'jobName': {
+    type: String,
+    required: true,
+    default: ''
+  },
+  /**列表的地址，用来返回列表*/
+  listPath: {
+    type: String,
+    required: true,
+    default: ''
+  }
+})
+const emits = defineEmits(['validateForm', 'submitProcess','backList'])
+部分重点字段的详细解释
+
+1. emit 事件
+    a. validateForm事件 这个时间主要是触发表单校验，当表单校验通过后，需要给SubmitApprove组件传递参数canSubmit改为true
+2. props 参数
+    a. appId 当前维护表单APP的id
+ 可以通过 /work-flow/work-flow-app/getAppIdByFormCode 这个接口用window.location.hash.split'#来取
+    b. canSubmit 默认传递false，当表单校验通过后需改为true
+    c. sendForm 需要传给后端的bo数据
+    d. 目前的数据转换我放在的外部页面，以请假为例
+            {
+                "type": { "type": "String", "value": "" },
+                "startTime": { "type": "Date", "value": "" },
+                "endTime": { "type": "Date", "value": "" },
+                "reason": { "type": "String", "value": "" },
+                "timeLeng": { "type": "Number", "value": "" }
+            }
+type/startTime/endTime/reason/timeLeng 等是表单字段，需要给每个表单字段说明{"type": "这个字段的数据类型", "value": "这个字段用户所填写的数据"}数据类型type可选值 ： String、Array、Number、Double、Date等
+第四步
+建立审批页面，在你自己的审批页面中引入 组件 ExamineApprove ,将你的表单放置在
+组件 ExamineApprove 的默认插槽中
+ExamineApprove 组件接收多个 props 与 emit 事件
+
+部分重点的详细解释
+
+1. emit 事件
+    a. validateForm 事件 这个时间主要是触发表单校验，当表单校验通过后，需要给 SubmitApprove 组件传递参数 canSubmit 改为 true
+2. props 参数
+    a. activities
+FlowCrudController.getWorkFlowByFormId 这个接口返回的 nodeShowVoList
+    b. taskId
+从路由信息解析出来的 taskId
+    c. formId
+从路由信息解析出来的 formId
+    d. formBaseInfo
+FlowCrudController.getWorkFlowByFormId 返回的全部数据
+3. 注意事项
+    a. 需要判断当前路由是否正确的传递了formId与taskId，如没有则需要加载组件"@/views/oa/process/approve-component/route-params-error.vue"
+    b. 由于第一版不支持审批中修改表单数据，所以审批页面表单默认disabled
+第五步
+与后端沟通，并把你的表单审批的路由菜单给到后端，让他配置相对应的卡片/消息通知,以便通过工作通知的形式推送到各个审批节点所对应的审批、抄送、执行人，进行相关审批活动
+其他
+接入事项：
+1. 注意配置与你rule之前的关系，若出现配置禁用该表单项，但是rule校验为必填，这个由于没有自定义表单功能，所以无法自动判断出这种矛盾关系，需要使用者或者开发表单人员自己维护好配置或者rules，不要出现这种自相矛盾的问题，最后导致审批无法发起或者无法审批的问题，
+2. 流组件所触发表单校验是由事件传入，由于父传子事件无法获取父事件的return所以你需要再开辟一个字段canSubmit，当你submitForm触发表单时，如果成功需要canSubmit赋值true，如果失败需要赋值false。
+3. 由于多个审批页面的路由地址是不同的，所以提交/审批相关的我封装成了一个组件，而且由于接口以及功能的相关问题，提交跟审批成为了两个不同的组件，所以也就意味着你的表单页面也被分为了两个，有两个路由地址，提交/新增表单页，查看/审批表单页，同时页面的父层样式也需要你自己定义书写。
+4. 表单提交成功的页面、参数错误、异常终止的页面，是有你自己维护的。在回调页面中，目前我的功能写的都是通用的，当你需要有什么新的业务需求时，比如说页面提交成功需要跳转到什么页面等各类需求
+5. 目前表单数据支持 下拉选择、时间选择（非连续）、输入框、数字输入框、选择部门、选择成员、选择成员移动端、选择角色。文件地址 ~/proocess/systemCom,支持用过~/process/systemCom/index.vue一键引入。组件名大驼峰结构(需去除首单词)，当通用组件不够你的审批需求
+6. 测试开发进入-沐华数字化进行测试

package/packages/approval-process/index.ts

@@ -0,0 +1,65 @@
+import { type App } from "vue";
+import "./packages/styles/main.css";
+import ExamineApprove from './packages/flow/examine-approve.vue'
+import SubmitApprove from './packages/flow/submit-approve.vue'
+import ApproveSuccess from './packages/flow/approve-component/approve-success.vue'
+import RouteParamsError from './packages/flow/approve-component/route-params-error.vue'
+import SubmitSuccess from './packages/flow/approve-component/submit-success.vue'
+import AssociatedApprovalForm from './packages/flow/form-component/associated-approval-form/index.vue'
+import AssociatedApprovalMobile from './packages/flow/form-component/associated-approval-form/modules/associated-approval-form-mobile.vue'
+import AssociatedApprovalPc from './packages/flow/form-component/associated-approval-form/modules/associated-approval-form-pc.vue'
+import Signature from './packages/components/sign/index.vue'
+import ShowSign from './packages/flow/form-component/show-sign.vue'
+import UrgeDialog from './packages/components/urge-dialog/index.vue'
+/**
+ * 这里默认导出一个vue支持的install方法
+ * 可以在main.ts中使用以下方式全局导入组件
+ *
+ * import ViteVue3TsTestFjc from "vite-vue3-ts-test-fjc"
+ * .....
+ * app.use(ViteVue3TsTestFjc);
+ */
+export default {
+    install(app: App) {
+        app.component("ExamineApprove", ExamineApprove);
+        // 如果还有更多的组件需要注册，可以在这里继续添加
+      app.component("SubmitApprove", SubmitApprove);
+      app.component("ApproveSuccess", ApproveSuccess);
+      app.component("RouteParamsError", RouteParamsError);
+      app.component("SubmitSuccess", SubmitSuccess);
+      app.component("AssociatedApprovalForm", AssociatedApprovalForm);
+      app.component("AssociatedApprovalMobile", AssociatedApprovalMobile);
+      app.component("AssociatedApprovalPc", AssociatedApprovalPc);
+      app.component("Signature", Signature);
+      app.component("ShowSign", ShowSign);
+      app.component("UrgeDialog", UrgeDialog);
+    }
+}
+
+/**
+ * 这里将组件导出，是为了在单独使用组件时，可以按需引入
+ * 为了将来支持类似这样按需使用 import {Vv3Test} from "vite-vue3-ts-test-fjc";
+ * 有多少个组件就添加多少个组件
+ */
+export { ExamineApprove, SubmitApprove, ApproveSuccess, RouteParamsError, SubmitSuccess, AssociatedApprovalForm, AssociatedApprovalMobile, AssociatedApprovalPc, Signature, ShowSign, UrgeDialog };
+
+
+
+/**
+ * 这里是重点，需要将这些组件在ts中声明为全局组件；
+ */
+declare module "vue" {
+  export interface GlobalComponents {
+    ExamineApprove: typeof ExamineApprove,
+    SubmitApprove: typeof SubmitApprove,
+    ApproveSuccess: typeof ApproveSuccess,
+    RouteParamsError: typeof RouteParamsError,
+    SubmitSuccess: typeof SubmitSuccess,
+    AssociatedApprovalForm: typeof AssociatedApprovalForm,
+    AssociatedApprovalMobile: typeof AssociatedApprovalMobile,
+    AssociatedApprovalPc: typeof AssociatedApprovalPc,
+    Signature: typeof Signature,
+    ShowSign: typeof ShowSign,
+    UrgeDialog: typeof UrgeDialog,
+  }
+}

package/packages/approval-process/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "approval-process",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.ts",
+  "types": "packages/types.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "module": "index.ts",
+  "peerDependencies": {
+    "hrp-ui-base": "^1.0.0",
+    "vue": "^3.0.0"
+  }
+}

package/packages/approval-process/packages/components/choose-member/BO/departBo.ts

@@ -0,0 +1,8 @@
+export interface departBo {
+  deptId: string;
+  deptName: string;
+}
+export interface nameForSearchBo {
+  name: string;
+  id: string;
+}

package/packages/approval-process/packages/components/choose-member/BO/memberBo.ts

@@ -0,0 +1,14 @@
+export interface userBo {
+  userId: string;
+  userName: string;
+  avatar: string;
+  roleName: string;
+}
+export interface departBo {
+  deptId: string;
+  deptName: string;
+}
+export interface nameForSearchBo {
+  name: string;
+  id: string;
+}

package/packages/approval-process/packages/components/choose-member/BO/role.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724230585754" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4282" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M486.881882 602.834824v80.353882a240.941176 240.941176 0 0 0-240.941176 240.941176H165.647059a321.234824 321.234824 0 0 1 321.234823-321.295058z m0-40.116706c-133.12 0-240.941176-107.821176-240.941176-240.941177s107.821176-240.941176 240.941176-240.941176 240.941176 107.821176 240.941177 240.941176-107.821176 240.941176-240.941177 240.941177z m0-80.353883a160.587294 160.587294 0 1 0 0-321.234823 160.587294 160.587294 0 1 0 0 321.234823z m104.207059 313.705412a140.950588 140.950588 0 0 1 0-65.174588l-39.815529-23.009883 40.176941-69.511529 39.755294 23.009882c16.022588-15.179294 35.358118-26.322824 56.500706-32.647529v-45.959529h80.293647v45.959529c21.383529 6.384941 40.658824 17.709176 56.440471 32.647529l39.755294-23.009882 40.237176 69.511529-39.875765 23.009883c5.12 21.443765 5.12 43.730824 0 65.174588l39.875765 23.009882-40.176941 69.51153-39.815529-23.009883a140.348235 140.348235 0 0 1-56.440471 32.64753v45.959529h-80.293647v-45.959529a140.348235 140.348235 0 0 1-56.440471-32.64753l-39.815529 23.009883-40.176941-69.51153 39.815529-23.009882z m136.734118 27.648a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z" fill="#8C8C8C" p-id="4283"></path></svg>

package/packages/approval-process/packages/components/choose-member/BO/roleBo.ts

@@ -0,0 +1,16 @@
+export interface roleBo {
+  groupId: string;
+  groupName: string;
+  roleId: string;
+  roleName: string;
+  roleVoList: roleItemBo[];
+}
+export interface roleOldBo {
+  groupId: string;
+  groupName: string;
+  roleVoList: roleItemBo[];
+}
+export interface roleItemBo {
+  roleId: string;
+  roleName: string;
+}