@lambo-design-mobile/workflow-approve 1.0.0-beta.2 → 1.0.0-beta.3

package/src/SelectNormalList.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__title">{{ title }}</div>
+    </div>
+    <div v-if="idList.length > 0">
+      <van-checkbox-group v-model="result">
+        <van-cell-group>
+          <van-cell
+              v-for="(item, index) in list"
+              clickable
+              :key="item.id"
+              :title="item.name"
+              @click="toggle(index)"
+          >
+            <template #right-icon>
+              <van-checkbox :name="item" ref="checkboxes" />
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-checkbox-group>
+    </div>
+    <div v-else>
+      <van-empty description="流程类型未定义权限范围" />
+    </div>
+    <div class="custom-bottom-bar">
+      <div class="bar-item" @click="selectNormalListHandle('cancel')">取消</div>
+      <div class="bar-item approve" @click="selectNormalListHandle('select')">选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SelectNormalList",
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    idList: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    parseFunction: {
+      type: Function,
+      required: true,
+      default: (idList) => idList.map(id => ({ id, name: `Name for ${id}` })) // 示例默认解析
+    },
+  },
+  data() {
+    return {
+      list: [],
+      result: [],
+    };
+  },
+  created() {
+    // 使用传入的解析函数获取 list 数据
+    this.parseFunction(this.idList).then((parsedList) => {
+      this.list = parsedList;
+    });
+  },
+  methods: {
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle();
+    },
+    selectNormalListHandle(handle) {
+      this.$emit('selectNormalListHandle', handle, this.result);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  background-color: #fff;
+  padding: 10px 0;
+  border-top: 1px solid #eaeaea;
+  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
+  z-index: 1000;
+}
+
+.bar-item {
+  flex: 1;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 16px;
+  border-radius: 4px;
+}
+
+.bar-item:active {
+  background-color: #e6e6e6;
+}
+
+.approve {
+  color: #fff;
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border-radius: 9px;
+  margin: 0 20px;
+}
+
+.approve:active {
+  background: linear-gradient(90deg, rgba(0, 150, 255, 0.8), rgba(22, 119, 255, 0.8));
+}
+</style>

package/src/SelectOrganize.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__title">选择组织</div>
+    </div>
+    <div v-if="this.organizeIdList.length > 0 || allOrganize === true">
+      <Tree
+          :data="data"
+          :showCheckBox="showCheckBox"
+          @onChecked="handleChecked"
+          @onExpand="handleExpand"
+          @onSelect="handleSelect"
+          :loadData="handleLoadData"
+          ref="tree"
+      >
+      </Tree>
+    </div>
+    <div v-else>
+      <van-empty description="流程类型未定义权限范围"/>
+    </div>
+    <div class="custom-bottom-bar">
+      <div class="bar-item" @click="selectOrganizeHandle('cancel')">取消</div>
+      <div class="bar-item approve" @click="selectOrganizeHandle('select')">选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tree from "./tree/Tree.vue";
+import {getOrgan, getOrgRootTree, getOrgSubNodes} from "../api";
+
+export default {
+  name: "CustomTree",
+  components: {
+    Tree
+  },
+  props: {
+    showCheckBox: {
+      type: Boolean,
+      default: true
+    },
+    allOrganize: {
+      type: Boolean,
+      default: false
+    },
+    organizeIdList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      organizeData: [] // 初始化为空数组
+    };
+  },
+  methods: {
+    getCheckedNodes() {
+      return this.$refs.tree.getCheckedNodes();
+    },
+    getCheckedChildrenNodes() {
+      return this.$refs.tree.getCheckedChildrenNodes();
+    },
+    formatTree(arr) {
+      function findParents(arr) {
+        const map = arr.reduce((obj, cur) => {
+          let id = cur["id"];
+          obj[id] = id;
+          return obj;
+        }, {});
+        return arr.filter((item) => !map[item.parentId]);
+      }
+
+      let parents = findParents(arr);
+
+      function findChildren(parents) {
+        if (!parents) return;
+        parents.forEach((p) => {
+          arr.forEach((item) => {
+            if (p.id === item.parentId) {
+              if (!p.children) {
+                p.children = [];
+              }
+              p.children.push(item);
+            }
+          });
+          findChildren(p.children);
+        });
+      }
+
+      findChildren(parents);
+      return parents;
+    },
+    handleChecked(v) {
+      this.$emit('handleChecked', v); // 发射 checked 事件到父组件
+    },
+    handleExpand(v) {
+      this.$emit('handleExpand', v); // 发射 expand 事件到父组件
+    },
+    handleSelect(v) {
+      this.$emit('handleSelect', v); // 发射 select 事件到父组件
+    },
+    handleLoadData(node, callback) {
+      getOrgSubNodes(node.id).then((res) => {
+        const result = res.data;
+        if (result.code === 1) {
+          callback(
+              result.data.map((item) => {
+                return {
+                  children: [],
+                  title: item.organName,
+                  id: item.organCode,
+                  parentId: item.parentId,
+                  checked: false,
+                  expand: false
+                };
+              }),
+              (res) => {
+                console.log(res)
+              }
+          );
+        } else {
+          callback(
+              [], (res) => {
+                console.log(res)
+              });
+        }
+      });
+    },
+    selectOrganizeHandle(handle) {
+      this.$emit('selectOrganizeHandle', handle, this.getCheckedNodes());
+    },
+
+  },
+  computed: {
+    data() {
+      return this.formatTree(this.organizeData);
+    }
+  },
+  created() {
+    if (this.organizeIdList.length > 0) {
+      this.organizeIdList.forEach((item) => {
+        getOrgan(item).then((res) => {
+          const result = res.data;
+          if (result.code === 1) {
+            // 确保 result.data 是一个对象
+            const newItem = {
+              children: [],
+              title: result.data.organName,
+              id: result.data.organCode,
+              parentId: result.data.parentId,
+              checked: false,
+              expand: false
+            };
+            // 添加单个新项到 organizeData 数组
+            this.organizeData.push(newItem);
+          }
+        }).catch((error) => {
+          console.error("getOrgan 请求失败:", error);
+        });
+      });
+    } else {
+      getOrgRootTree().then((res) => {
+        const result = res.data;
+        if (result.code === 1) {
+          this.organizeData = result.data.map((item) => {
+            return {
+              children: [],
+              title: item.organName,
+              id: item.organCode,
+              parentId: item.parentId,
+              checked: false,
+              expand: false
+            };
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.custom-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  background-color: #fff;
+  padding: 10px 0;
+  border-top: 1px solid #eaeaea;
+  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
+  z-index: 1000;
+}
+
+.bar-item {
+  flex: 1;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 16px;
+  border-radius: 4px;
+}
+
+.bar-item:active {
+  background-color: #e6e6e6; /* 点击时的背景颜色 */
+}
+
+.approve {
+  color: #fff;
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border-radius: 9px;
+}
+
+.approve:active {
+  background: linear-gradient(90deg, rgba(0, 150, 255, 0.8), rgba(22, 119, 255, 0.8));
+}
+</style>

package/src/TodoListCard.vue

@@ -131,6 +131,7 @@ export default {
                 taskId: item.taskId,
                 instanceId: item.procInstanceId,
                 procName: item.procName,
+                procType: item.procType,
                 procKey: result.data[0].procKey,
                 handleButtons: result.data[0].handleButtons,
                 appFormUrl: item.appFormUrl,
@@ -163,6 +164,7 @@ export default {
                 taskId: item.taskId,
                 instanceId: item.procInstanceId,
                 procName: item.procName,
+                procType: item.procType,
                 procKey: result.data[0].procKey,
                 handleButtons: result.data[0].handleButtons,
                 appFormUrl: item.appFormUrl,

package/src/WorkflowDiagram.vue

@@ -60,16 +60,12 @@
       <!--审批详情弹出框-->
       <van-dialog v-model="showTaskNodeDetail" title="审批详情">
         <van-cell-group>
-          <van-cell class="custom-cell" :border="false" title="审批节点："
-                    :value="nodeDetail.taskName"></van-cell>
-          <van-cell class="custom-cell" :border="false" title="审批人："
-                    :value="nodeDetail.auditName"></van-cell>
-          <van-cell class="custom-cell" :border="false" title="申请人："
-                    :value="nodeDetail.applyUser ? nodeDetail.applyUser.split(':')[1] : '未定义'"></van-cell>
-          <van-cell class="custom-cell"
-                    :title="nodeDetail.startDate ? '发起时间：':'审批时间：' "
-                    :value="nodeDetail.startDate ? nodeDetail.startDate : nodeDetail.auditDate">
-          </van-cell>
+
+          <van-field readonly input-align="right" label="审批节点：" :value="nodeDetail.taskName" />
+          <van-field readonly input-align="right" label="审批人：" :value="nodeDetail.auditName" />
+          <van-field readonly input-align="right" label="申请人：" :value="nodeDetail.applyUser ? nodeDetail.applyUser.split(':')[1] : '未定义'" />
+          <van-field readonly input-align="right" :label="nodeDetail.startDate ? '发起时间：':'审批时间：' "
+                     :value="nodeDetail.startDate ? nodeDetail.startDate : nodeDetail.auditDate" />
           <van-cell title="审批结果：" class="custom-cell" :border="false">
             <template v-slot:default>
               <van-tag :type="getAuditStatus(nodeDetail.auditResult).type">
@@ -338,6 +334,13 @@ export default {
 
 }
 
+::v-deep .van-dialog__header {
+  padding: 10px 0;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: center;
+}
+
 .record-item {
   position: relative;
   margin-bottom: 20px;
@@ -401,12 +404,8 @@ export default {
   margin-right: 5px;
 }
 
-.van-cell__title {
-  flex: 1 0 auto;
-}
-
 .van-cell__value {
-  flex: 0 1 auto;
+  flex: 0 auto;
 }
 
 </style>

package/src/tree/Node.vue

@@ -0,0 +1,190 @@
+<script>
+import { broadCastMixins } from './util';
+export default {
+  name: 'Node', // 这个很关键，递归组件必须有name
+  render() {
+    let showCheckBox = this.showCheckBox;
+    let data = this.data;
+    let loadData = this.loadData
+    return (
+        <div>
+          <ul class={'tree-ul'}>
+            <li class={'tree-li'} onClick={(e) => this.handleSelect(e)}>
+              {showCheckBox && (
+                  <van-checkbox
+                      class={'checkbox'}
+                      icon-size={'18px'}
+                      value={data.checked}
+                      onClick={(e) => this.handleCheck(e, data)}
+                  />
+              )}
+
+              {/*如果没有插槽则默认使用显示内容*/}
+
+              {this.$scopedSlots.default ? (
+                  this.$scopedSlots.default({
+                    data: data
+                  })
+              ) : (
+                  <span>{data.title}</span>
+              )}
+              <span class={'tree-expand'}>
+              {this.showLoading ? (
+                  <van-loading class={'tree-loading'} color={'#1989fa'}/>
+              ) : (
+                  ''
+              )}
+                {this.showArrow ? (
+                    <van-icon
+                        name={this.arrowType}
+                        onClick={(e) => this.handleExpand(e)}
+                    />
+                ) : (
+                    ''
+                )}
+            </span>
+              {data.expand &&
+                  data.children.map((item, index) => {
+                    return (
+                        <Node key={index} data={item} showCheckBox={showCheckBox} loadData={loadData}>
+                          {this.$scopedSlots.default}
+                        </Node>
+                    );
+                  })}
+            </li>
+          </ul>
+        </div>
+    );
+  },
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    showCheckBox: {
+      type: Boolean,
+      default: false
+    },
+    loadData: {
+      type: Function
+    }
+  },
+  mixins: [broadCastMixins],
+  computed: {
+    showArrow() {
+      // 1.如果数据没有children，说明是子组件，就不用展示下拉箭头
+      // 2.如果开启了异步加载，在loading的时候，不显示箭头
+      return (
+          (this.data.children &&
+              this.data.children.length &&
+              !this.showLoading) ||
+          (this.data.children &&
+              !this.data.children.length &&
+              this.loadData &&
+              !this.showLoading)
+      );
+    },
+    showLoading() {
+      // 判断是否有loading属性，并且判断你是否在开启状态
+      return 'loading' in this.data && this.data.loading;
+    },
+    arrowType() {
+      //箭头方向,van组件提供的属性
+      return this.showArrow && this.data.expand ? 'arrow-down' : 'arrow';
+    }
+  },
+  methods: {
+    handleCheck(e) {
+      e.cancelBubble = true;
+      this.$set(this.data, 'checked', !this.data.checked);
+      this.broadCast('handleCheck', this.data);
+    }, //勾选方法
+    handleExpand(e) {
+      e.cancelBubble = true;
+      let node = this.data;
+      if (node.children && node.children.length === 0) {
+        if (this.loadData) {
+          this.$set(node, 'loading', true); // 显示loading
+          this.loadData(node, (arr, callback) => {
+            // 这个loadData回调函数，由外部组件调用的时候传入arr和callback
+            if (arr.length) {
+              // 如果外部传入的数组不为空
+              // 把arr作为当前父级节点的children
+              this.$set(node, 'children', arr);
+              this.$nextTick(() => {
+                //展开操作
+                this.handleExpand(e);
+                //执行外部传入的回调函数，成功的时候
+                callback('suc', node);
+              });
+            } else {
+              // 如果返回的是为空数组，则执行失败的回调
+              callback('falid');
+            }
+            this.$set(node, 'loading', false); //关闭loading
+          });
+        }
+        return;
+      }
+      this.$set(this.data, 'expand', !this.data.expand);
+      this.broadCast('handleExpand', this.data);
+    },
+    handleSelect(e) {
+      e.cancelBubble = true;
+      this.broadCast('handleSelect', this.data);
+    } //点击列表
+  },
+
+};
+</script>
+
+<style  scoped>
+.tree-ul,
+.tree-li {
+  font-size: 16px;
+  list-style: none;
+  margin-left: 10px;
+  position: relative;
+  height: auto;
+}
+
+.tree-ul {
+  margin: 15px auto;
+  box-sizing: border-box;
+}
+
+.tree-li {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 6px 3px;
+  padding-right: 3px;
+  padding-left: 10px;
+}
+
+.tree-expand {
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  margin: auto;
+}
+
+.checkbox {
+  display: inline-block !important;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+
+.tree-loading {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: auto;
+}
+</style>