ui-process-h5 0.1.36 → 1.0.1

package/build/configure/README.md

@@ -0,0 +1,212 @@
+# ui-process-h5
+
+> App 端 流程、附件上传、附件列表、送审插件
+
+## 安装
+
+> vue2.7 以上版本安装指令
+>
+> > ```bash
+> > npm i ui-process-h5 -D
+> > ```
+
+> vue2.7 以下版本安装指令
+>
+> > ```bash
+> > npm i @vue/composition-api -D
+> > npm i ui-process-h5 -D
+> > ```
+
+## 使用
+
+在需要使用的组件内引入
+
+```js
+import {
+    TopProcess,
+    attchViews,
+    TopSumbitPopup,
+    ViewAttchList,
+} from "ui-process-h5";
+export default {
+    components: { TopProcess, attchViews, TopSumbitPopup, ViewAttchList },
+};
+```
+
+```html
+<template>
+    <TopProcess
+        :processInstId="processInstId"
+        :processDefId="processDefId"
+        :formData="formData"
+        :isView="isView"
+        :userId="userId"
+        :request="request"
+        :tapList="tapList"
+        :selfTapList="selfTapList"
+        :endFunction="endFunction"
+        :isDocument="isDocument"
+    >
+        <slot></slot>
+    </TopProcess>
+    <attchViews
+        v-if="labels == '1'"
+        :limit="limit ? limit : -1"
+        :requires="requires"
+        :request="param.request"
+        :linkUrl="param.linkUrl"
+        @getValue="getValues"
+    />
+    <ViewAttchList :inList="inList"></ViewAttchList>
+    <TopSumbitPopup
+        :visible="visible"
+        :request="request"
+        :appId="appId"
+        :resubmit="resubmit"
+        :id="businessKey"
+        :businessType="businessType"
+        :todoParameter="todoParameter"
+        :title="title"
+        @successFn="successFn"
+        :beforeFunction="beforeFunction"
+    ></TopSumbitPopup>
+</template>
+<script>
+    import "ui-process-h5/style.css";
+    import {
+        TopProcess,
+        attchViews,
+        TopSumbitPopup,
+        ViewAttchList,
+    } from "ui-process-h5";
+    export default {
+        components: { TopProcess, attchViews, TopSumbitPopup, ViewAttchList },
+        data() {
+            return {
+                formData: {
+                    businessKey: businessKey,
+                    processInstId: processInstId,
+                    processDefId: processDefId,
+                    title: title,
+                    subjectId: subjectId,
+                    userId: userId,
+                    userName: userName,
+                    reason: reason,
+                    meetingTheme: meetingTheme,
+                },
+                selfBtn: [
+                    {
+                        name: "测试",
+                        type: "danger",
+                        click: () => {
+                            console.log("当前::");
+                        },
+                    },
+                    {
+                        name: "测试2",
+                        type: "default",
+                        click: () => {
+                            console.log("当前::");
+                        },
+                    },
+                ],
+            };
+        },
+        methods: {
+            endFunction() {
+                console.log("endFunction");
+            },
+            beforeFunction() {
+                console.log("beforeFunction");
+            },
+        },
+    };
+</script>
+```
+
+## 属性-Attributes (TopProcess)
+
+| 参数           | 类型     | 默认值            | 说明                                            |
+| -------------- | -------- | ----------------- | ----------------------------------------------- |
+| tapList        | Array    | []                | tab 节点插入、自定义附件等信息                  |
+| selfTapList    | Array    | []                | 自定义 tab 节点,传入后覆盖原本参数              |
+| processDefId   | String   | ''                | 流程 ID                                         |
+| request        | Object   | null              | axios 接口请求方法 [需要包含 get post 请求方式] |
+| processInstId  | String   | ''                | 流程实例 ID                                     |
+| userId         | String   | ''                | 当前角色 id                                     |
+| formData       | Object   | {}                | 集合数据 内部存储流程相关信息                   |
+| isAdditional   | boolean  | false             | 自定义按钮                                      |
+| getVars        | Function | null              | 业务方法                                        |
+| endFunction    | Function | null              | 弹窗结束后执行方法                              |
+| beforeFunction | Function | null              | 弹窗开启前执行方法                              |
+| restartData    | Object   | null              | 重新提交参数                                    |
+| isDocument     | Boolean  | false             | 公文独立配置                                    |
+| selfList       | Array    | {id,name}         | 自定义流程列表                                  |
+| selfBtn        | Array    | {name,type,click} | 自定义流程按钮(查看案例 data)                   |
+
+## 属性-Attributes (attchViews)
+
+| 参数     | 类型             | 默认值 | 说明                                            |
+| -------- | ---------------- | ------ | ----------------------------------------------- |
+| request  | Object           | null   | axios 接口请求方法 [需要包含 get post 请求方式] |
+| limit    | [String, Number] | 4      | 最大上传数                                      |
+| getValue | Function         | null   | 返回上传数据 url                                |
+| requires | Boolean          | false  | 必填                                            |
+| inComing | Array            | Array  | 回显已上传列表                                  |
+| deletFn  | Function         | null   | 组件本身提供静态删除功能,动态删除需传入相应方法 |
+
+## 属性-Attributes (ViewAttchList)
+
+| 参数   | 类型  | 默认值 | 说明         |
+| ------ | ----- | ------ | ------------ |
+| inList | Array | []     | 附件列表展示 |
+
+## 属性-Attributes (TopSumbitPopup)
+
+| 参数           | 类型             | 默认值    | 说明                                            |
+| -------------- | ---------------- | --------- | ----------------------------------------------- |
+| visible        | Boolean          | false     | 展示参数                                        |  |
+| title          | String           | ""        | 送审提交标题参数                                |
+| todoParameter  | Object           | {}        | 发起流程时的其他参数                            |
+| businessType   | [String, Number] | null      | 业务类型                                        |
+| id             | String           | ""        | 业务 Id                                         |
+| resubmit       | Boolean          | false     | 是否为重新提交                                  |
+| request        | Object           | null      | axios 接口请求方法 [需要包含 get post 请求方式] |
+| appId          | String           | ''        | appId                                           |
+| beforeFunction | Function         | null      | 提交前执行事件                                  |
+| successFn      | Function         | null      | 成功后回调                                      |
+| manual         | Boolean          | false     | 手动执行启动(ref 绑定后执行 handleSongshen())   |
+| selfList       | Array            | {id,name} | 自定义流程列表                                  |
+
+> ### tapList-对象说明
+>
+> | 属性名 | 类型   | 说明                                                                         |
+> | ------ | ------ | ---------------------------------------------------------------------------- |
+> | label  | String | 选项卡 title                                                                 |
+> | key    | String | 选项卡 ID 请勿重复 defaultTabList 内已拥有的默认 key(a、b、c 为默认节点 key) |
+> | type   | String | 插槽类型 默认 default 插槽 slot                                              |
+> | slot   | String | 插槽名                                                                       |
+> | sort   | Number | 排序参数,无参数默认插入末尾                                                  |
+
+### selfTapList-对象说明 同上
+
+### formData-对象说明
+
+| 属性名                    | 类型   | 说明        |
+| ------------------------- | ------ | ----------- |
+| businessKey               | String | 业务 ID     |
+| processDefId              | String | 流程 ID     |
+| processInstId             | String | 流程实例 ID |
+| title reason meetingTheme | String | 标题        |
+| userId                    | String | 角色 id     |
+| userName                  | String | 姓名        |
+
+附件相关列表,参考 getValue 回调参数
+
+### restartData-对象说明
+
+| 属性名       | 类型   | 说明                 |
+| ------------ | ------ | -------------------- |
+| businessType | String | 业务 类型            |
+| showType     | String | 流程类型(all,pc,app) |
+| processName  | String | 流程查询字段         |

package/build/configure/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ui-process-h5",
+  "version": "1.3.28",
+  "description": "> app端 流程插件",
+  "main": "./ui-process-h5.umd.cjs",
+  "style": "./style.css",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./ui-process-h5.js",
+      "require": "./ui-process-h5.umd.cjs"
+    },
+    "./style.css": {
+      "import": "./style.css",
+      "require": "./style.css"
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "node scripts/postinstall.mjs"
+  },
+  "devDependencies": {
+    "checked-pick-app": "^1.3.10",
+    "dsbridge": "^3.1.4"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/build/scripts/postinstall.mjs

@@ -0,0 +1,14 @@
+import { isNull, switchVersion } from './utils.mjs'
+try {
+  import('vue').then(res => {
+    const version = isNull(res.version) ? res.default.version : res.version
+    if (isNull(version))
+      console.warn('[vue-demi-sfc-component-template] Vue is not found. Please run "npm install vue" to install.')
+    else
+      switchVersion(version)
+  })
+} catch (error) {
+  console.log('error', error)
+}
+
+

package/build/scripts/switch-cli.mjs

@@ -0,0 +1,4 @@
+import { switchVersion } from './utils.mjs'
+
+const version = process.argv[2]
+switchVersion(version)

package/build/scripts/utils.mjs

@@ -0,0 +1,60 @@
+import path from 'path'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+function switchVersion(version) {
+  const src = getLibDir(version)
+  const dest = path.join(src, '..')
+  console.log(`[frontend-shared] switch ui-process-h5 to vue version ${version}`)
+  copyDir(src, dest)
+}
+
+function getLibDir(version) {
+  const dirname = getDirName(version)
+  return path.join(__dirname, `../../ui-process-h5/${dirname}`)
+}
+
+function getDirName(version) {
+  return String(version).startsWith('2.7.') ? 'v2.7' : String(version).startsWith('2') ? 'v2' : 'v3'
+}
+
+function copyDir(src, dest) {
+  console.log(`copying from ${src} to ${dest}`)
+  // unlink for pnpm, #92
+  try {
+    fs.unlinkSync(dest)
+  } catch (error) { }
+  try {
+    copyRecursiveSync(src, dest)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+function copyRecursiveSync(src, dest) {
+  const exists = fs.existsSync(src)
+  const stats = exists && fs.statSync(src)
+  const isDirectory = stats && stats.isDirectory()
+  if (isDirectory) {
+    !fs.existsSync(dest) && fs.mkdirSync(dest)
+    fs.readdirSync(src).forEach((childItemName) => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName))
+    })
+  } else {
+    fs.copyFileSync(src, dest)
+  }
+}
+// 判断是否为空
+function isNull(str) {
+  if (str === null) return true;
+  if (str === undefined) return true;
+  if (str === "null") return true;
+  if (str === "NaN") return true;
+  if (str === "undefined") return true;
+  if (str.length === 0) return true;
+  // if (/^\s*$/i.test(str)) return true;
+  return false;
+}
+export { getLibDir, copyDir, switchVersion, isNull }

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="format-detection" content="telephone=yes"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/package.json

@@ -2,28 +2,59 @@
   "name": "ui-process-h5",
   "private": false,
   "description": "流程组件",
-  "version": "0.1.36",
+  "version": "1.0.1",
   "type": "module",
-  "files": [
-    "packages/*",
-    "Readme.md",
-    "package.json"
-  ],
-  "publicConfig": {
-    "registry": "http://registry.npmjs.org/"
-  },
-  "main": "./packages/index.js",
-  "module": "./packages/index.js",
-  "exports": {
-    ".": {
-      "import": "./packages/index.js",
-      "require": "./packages/index.js"
-    }
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "npm run clean && run-s build:*",
+    "clean": "rimraf ./ui-process-h5",
+    "dev:2": "npm run switch:2 && vite",
+    "dev:2.7": "npm run switch:2.7 && vite",
+    "dev:3": "npm run switch:3 && vite --force",
+    "switch:2": "vue-demi-switch 2 vue2",
+    "switch:2.7": "vue-demi-switch 2.7 vue2.7",
+    "switch:3": "vue-demi-switch 3 vue3",
+    "build:2": "npm run switch:2 && vite build",
+    "build:2.7": "npm run switch:2.7 && vite build",
+    "build:3": "npm run switch:3 && vite build"
   },
   "dependencies": {
-    "vue-demi": "^0.14.0"
+    "@types/node": "^18.16.3",
+    "@vue/composition-api": "^1.7.1",
+    "axios": "^1.3.6",
+    "checked-pick-app": "^1.3.10",
+    "dsbridge": "^3.1.4",
+    "js-cookie": "^3.0.5",
+    "json-bigint": "^1.0.0",
+    "npm-run-all": "^4.1.5",
+    "perfect-scrollbar": "^1.5.5",
+    "sass": "^1.62.1",
+    "ui-process-h5": "^1.0.36",
+    "vconsole": "^3.15.1",
+    "vue-demi": "^0.13.8"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.7.0",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
-  "engines": {
-    "node": ">=16.0.0"
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.0.3",
+    "postcss-relaxed-unit": "^1.1.1",
+    "rimraf": "^3.0.2",
+    "rollup-plugin-copy": "^3.4.0",
+    "vite": "^3.0.7",
+    "vite-plugin-vue2": "^2.0.2",
+    "vue": "2.6.14",
+    "vue-eslint-parser": "^9.0.3",
+    "vue-template-compiler": "2.6.14",
+    "vue-tsc": "^0.39.5",
+    "vue2": "npm:vue@2.6.14",
+    "vue2.7": "npm:vue@2.7.14",
+    "vue3": "npm:vue@^3.2.36"
   }
-}
+}

package/src/App.vue

@@ -0,0 +1,222 @@
+<template>
+    <TopProcess
+        :processInstId="formData.processInstId"
+        :processDefId="formData.processDefId"
+        :formData="formData"
+        :appId="appId"
+        :uid="formData.uid"
+        :request="request"
+        :tapList="tapList"
+        :endFunction="endFunction"
+        :beforeFunction="beforeFunction"
+        :restartData="restartData"
+        :selfBtn="selfBtn"
+        :isDocument="false"
+        :isMsg="true"
+        :isView="false"
+    >
+        <!-- :isDocument="true" -->
+        <!-- :isAdditional="true" -->
+        <!-- :getVars="getVars" -->
+        <template #default>展示当前形态</template>
+        <template #attch>attch</template>
+        <template #fsList>fsList</template>
+        <template #documentPage>documentPage</template>
+        <template v-slot:btn="data">
+            <div>123{{ data.data.status }}</div>
+        </template>
+    </TopProcess>
+</template>
+<script>
+import { TopProcess } from "@/packages/index.js";
+import request from "@/assets/js/request";
+import { defineComponent } from "vue-demi";
+import { setToken, setSubject, setProject } from "@/assets/js/auth";
+// import departPerson from "@/packages/checked-pick-app";
+export default {
+    data() {
+        return {
+            formData: {
+                businessKey: "db6bf1d242f940d0cef14eb775cab458",
+                processInstId: "0fff228a-eb2b-4ce6-8127-aa27c6dfbc1c",
+                processDefId: "obj_6534ff52252941f280a87516a9754b77",
+                title: "测试",
+                subjectId: "3a4ef115e32c85a78239e3f5f76b9637",
+                tel: "15107910151",
+                userId: "8c7d012761a680dff78b19e10e794c99",
+                userName: "刘博文",
+                uid:"2a8e7180ea1666679d3052f26f3fa8ee",
+            },
+            appId: "com.awspaas.user.apps.recevie.document",
+            isView: false,
+            info: {},
+            bizId: "",
+            style: {
+                color: "#333",
+                disableColor: "#F7F6F6",
+            },
+            param: {
+                realStartTime: "",
+                realEndTime: "",
+                estimateHours: 0,
+                estimateMinutes: 0,
+            },
+            realDays: "",
+            timeLoading: false,
+            processIDS: "",
+            request: request,
+            // 选人组件
+            visible: false,
+            entity: {
+                source: "0",
+                type: "5",
+                request: this.request, //'http://59.53.91.231:2100' 0002
+                businessId: "0003",
+                codeType: [1, 2, 3], // 可选类型 1-主体 2-部门 3-人员
+                multiple: true, // 是否多选
+            },
+            tapList: [
+                {
+                    label: "附件",
+                    key: "attch",
+                    type: "slot",
+                    sort: 2,
+                    slot: "attch",
+                },
+                {
+                    label: "分送记录",
+                    key: "fsList",
+                    type: "slot",
+                    slot: "fsList",
+                },
+                {
+                    label: "正文",
+                    key: "documentPage",
+                    type: "slot",
+                    sort: 3,
+                    slot: "documentPage",
+                },
+            ],
+            restartData: {
+                businessType: "4",
+                title: "测试送审",
+                showType: "all",
+                processName: "",
+            },
+            selfBtn: [
+                {
+                    name: "测试",
+                    type: "danger",
+                    click: () => {
+                        console.log("当前::");
+                    },
+                },
+                {
+                    name: "测试2",
+                    type: "default",
+                    click: () => {
+                        console.log("当前::");
+                    },
+                },
+            ],
+        };
+    },
+    components: {
+        /* topProcess, */
+        TopProcess,
+        // departPerson,
+    },
+    onLoad(e) {
+        this.bizId = e.bizId;
+        this.getInfo();
+
+        this.processIDS = e.processId;
+    },
+    mounted() {
+        console.log("this.request", this.request);
+        setToken("b2cd4a4d-200a-4ac3-bee5-8842f39233c3");
+        // 7369abf4-e2b4-44d0-87b2-7c46a444d3b5
+        // da6bab4f-fa42-4730-b0fe-c5e022123c0c
+        setSubject("9f13a9c9c400fa6e6228848ce1f131ee");
+        /*  setProject("4b23dd7dcb9cf7cb548fbd087ce9d748"); */
+        console.log("processIDS", request);
+    },
+    methods: {
+        getVars() {
+            console.log("getVars");
+            return true;
+        },
+        endFunction(val) {
+            console.log("endFunction:::",val);
+            /*  location.reload(); */
+        },
+        beforeFunction() {
+            console.log("beforeFunction111");
+            return true;
+        },
+    },
+};
+</script>
+<style lang="scss">
+body {
+    margin: 0;
+}
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    width: 100vw;
+    height: 100vh;
+}
+.info-box {
+    background-color: #fff;
+    padding: 10px;
+    .info {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        margin-bottom: 10px;
+        b {
+            font-weight: 400;
+            color: #959595;
+        }
+    }
+    .time-info {
+        background-color: #f6f6f6;
+        padding: 10px;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        div {
+            margin-bottom: 10px;
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            i {
+                color: #000;
+                font-style: normal;
+                font-weight: bold;
+            }
+            em {
+                font-style: normal;
+                font-size: 12px;
+                color: #4e87d4;
+            }
+        }
+    }
+}
+::v-deep .uni-date-x--border {
+    border: none;
+}
+em {
+    font-style: normal;
+    font-size: 12px;
+    color: #4e87d4;
+}
+.ren-title {
+    font-weight: bold;
+    font-size: 16px;
+    margin-bottom: 18px;
+}
+</style>