@lambo-design-mobile/workflow-approve 1.0.0-beta.1 → 1.0.0-beta.11

package/src/SelectHandle.vue

@@ -2,7 +2,7 @@
   <div>
     <div id="headTitle" class="headTitle">
       <div class="van-nav-bar__content">
-        <div class="van-nav-bar__title">指定办理人</div>
+        <div class="van-nav-bar__title">{{title}}</div>
       </div>
       <van-search
           show-action
@@ -28,8 +28,8 @@
                :overlay-style="{ position:'absolute',marginTop: '104px'}" transition="none">
       <div style="padding: 12px">
         <van-form>
-          <van-field clearable v-model="searchForm.organId" label="组织ID" readonly />
-          <van-field clearable v-model="searchForm.organTitle" label="组织名称" readonly />
+          <van-field clearable @click="searchOrganShow = true" v-model="searchForm.organId" label="组织ID" readonly />
+          <van-field clearable @click="searchOrganShow = true" v-model="searchForm.organTitle" label="组织名称" readonly />
           <van-field clearable v-model="searchForm.userId" label="用户ID" placeholder="请输入用户ID"/>
           <van-field name="radio" label="是否管理员">
             <template #input>
@@ -47,12 +47,12 @@
         </van-form>
       </div>
     </van-popup>
-    <div id="listContent">
+    <div id="listContent" style="background: #f7f8fa">
       <van-list v-model="loading" style="padding-top: 15px"
                 :finished="finished"
                 finished-text="没有更多了"
                 @load="handleLoad()">
-        <select-handle-card ref="selectHandleCard" :person-list="personList.rows"
+        <select-handle-card ref="selectHandleCard" :multi-select="multiSelect" :person-list="personList.rows"
                             :result.sync="checkResult">
         </select-handle-card>
       </van-list>
@@ -61,23 +61,46 @@
       <div class="bar-item" @click="handleSelect('cancel')">取消</div>
       <div class="bar-item approve" @click="handleSelect('select')">选择</div>
     </div>
+
+    <van-popup v-model="searchOrganShow" closeable round position="bottom" :style="{ height: '80%' }">
+      <select-organize :all-organize="true" :show-check-box="false" @handleSelect="onSelect" ></select-organize>
+    </van-popup>
   </div>
 </template>
 
 <script>
 import SelectHandleCard from "./SelectHandleCard.vue";
-import {getOrgRootTree, getUserList} from "../api";
+import {getOrgRootTree, getProcessType, getUserList} from "../api";
+import Tree from "./tree/Tree.vue";
+import SelectOrganize from "./SelectOrganize.vue";
 
 export default {
   name: "SelectHandle",
-  components: {SelectHandleCard},
+  components: {SelectOrganize, Tree, SelectHandleCard},
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    procType: {
+      type: String,
+      required: true
+    },
+    multiSelect: {  // 新增一个 prop 来控制是否开启多选模式
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
+      searchOrganShow: false,
       searchFilterShow: false,
       searchFilterBadge: false,
       searchForm: {
         userId: '',
+        orgTreeType: '',
         userName: '',
+        permScopeList: '',
         organId: '',
         organTitle: '',
         directChild: '',
@@ -91,43 +114,65 @@ export default {
         rows: []
       },
       checkResult: [],  // 需要传递到子组件的 checkResult
-    }
+    };
+  },
+  mounted() {
+    this.initSearch();
   },
   methods: {
-    handleLoad() {
-      console.log("触发加载")
+    initSearch() {
       getOrgRootTree().then(res => {
         const result = res.data;
         if (result.code === 1) {
           this.searchForm.organId = result.data[0].organId;
           this.searchForm.organTitle = result.data[0].organName;
+          this.searchForm.userId = '';
+        }
+        this.handleLoad()
+      })
+    },
+    handleLoad() {
+      console.log("触发加载")
+      const offset = this.personList.rows.length;
+      const limit = 10;
 
-          const offset = this.personList.rows.length;
-          const limit = 10;
-
-          getUserList(offset, limit, this.searchForm).then(res => {
-
-            const result = res.data;
-            if (result.code === "1") {
+      getProcessType(this.procType).then(res => {
 
-              //返回的数据添加到 personList 中
-              this.personList.rows = this.personList.rows.concat(result.data.rows);
-              this.personList.total = result.data.total;
+        this.searchForm.orgTreeType = res.data.data.rows[0].organTreeType;
+        const userArray = this.extractUsers(res.data.data.rows[0].permScope);
+        if (userArray.length > 0) {
+          this.searchForm.permScopeList = userArray.join(',')
+        }
+        getUserList(offset, limit, this.searchForm).then(res => {
 
-            } else {
-              console.error('Failed to load data');
-            }
+          const result = res.data;
+          if (result.code === "1") {
+            //返回的数据添加到 personList 中
+            this.personList.rows = this.personList.rows.concat(result.data.rows);
+            this.personList.total = result.data.total;
+          }
 
-            this.loading = false;
-            this.finished = this.personList.rows.length >= this.personList.total;
+          this.loading = false;
+          this.finished = this.personList.rows.length >= this.personList.total;
 
-          }).catch(error => {
-            console.error('Error fetching data:', error);
-            this.loading = false;
-          });
-        }
+        }).catch(error => {
+          console.error('Error fetching data:', error);
+          this.loading = false;
+        });
+      }).catch(error => {
+        console.error(error)
       })
     },
+
+    extractUsers(permScope) {
+      const match = permScope.match(/U:([^,]+)/);
+      if (match && match[1]) {
+        return match[1].split(';');
+      } else {
+        return [];
+      }
+    },
+
     onSearch() {
       // 如果搜索弹框是打开的
       if (this.searchFilterShow) {
@@ -148,15 +193,7 @@ export default {
       }
     },
     resetSearch() {
-      // 遍历 searchForm 对象的每个属性，将其值置为空
-      for (let key in this.searchForm) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (this.searchForm.hasOwnProperty(key)) {
-          if (key !== "organId" && key !== "organTitle") {
-            this.searchForm[key] = '';
-          }
-        }
-      }
+      this.initSearch()
     },
     resetAndLoadPersonList() {
       this.personList.total = 0;
@@ -174,6 +211,12 @@ export default {
     checkSearchForm() {
       this.searchFilterBadge = Object.values(this.searchForm).some(value => value !== '');
     },
+
+    onSelect(v) {
+      this.searchForm.organId = v.id;
+      this.searchForm.organTitle = v.title;
+      this.searchOrganShow = false;
+    },
   },
   watch: {
     // 监听 searchForm 的每一个字段的变化
@@ -265,6 +308,7 @@ export default {
   color: #fff;
   background: linear-gradient(90deg, #0096FF, #1677FF);
   border-radius: 9px;
+  margin: 0 20px;
 }
 
 .approve:active {

package/src/SelectHandleCard.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <van-checkbox-group v-model="localResult" :max="1" ref="checkboxGroup">
+    <van-checkbox-group v-model="localResult" :max="multiSelect ? 0 : 1" ref="checkboxGroup">
       <van-cell-group v-for="(item,index) in personList" :key="index"
                       style="margin-bottom: 10px;" inset>
         <van-cell value-class="value-status" center size="large"
                   :value="item.userName">
           <template #icon>
-            <van-checkbox @click="clearLocalResult(item)" style="padding: 0 5px" :name="item"
+            <van-checkbox @click="handleCheckboxClick(item)" style="padding: 0 5px" :name="item"
                           icon-size="18px"></van-checkbox>
           </template>
         </van-cell>
@@ -29,8 +29,8 @@
     </van-checkbox-group>
   </div>
 </template>
-<script>
 
+<script>
 export default {
   name: 'SelectHandleCard',
   props: {
@@ -42,6 +42,10 @@ export default {
     result: {
       type: Array,
       default: () => []
+    },
+    multiSelect: {  // 新增一个 prop 来控制是否开启多选模式
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -71,9 +75,19 @@ export default {
     toggleAll() {
       this.$refs.checkboxGroup.toggleAll(false);
     },
+    handleCheckboxClick(item) {
+      if (this.multiSelect) {
+        this.addLocalResult(item); // 如果是多选模式，调用 addLocalResult
+      } else {
+        this.clearLocalResult(item); // 否则调用 clearLocalResult，保持单选
+      }
+    },
     clearLocalResult(item) {
       this.localResult = [];
       this.localResult.push(item)
+    },
+    addLocalResult(item) {
+
     },
     getStatusText(status) {
       switch (status) {
@@ -119,8 +133,8 @@ export default {
   }
 }
 </script>
-<style scoped>
 
+<style scoped>
 /* 自定义 .van-cell 样式 */
 .custom-cell {
   padding: 5px 16px;
@@ -131,5 +145,4 @@ export default {
   font-weight: bold; /* 设置文字加粗 */
   text-align: right;
 }
-
-</style>
+</style>

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

@@ -37,7 +37,7 @@
           <template #right-icon>
             <div class="button-group">
               <van-button class="button" size="small" plain type="info" @click="handleItem(item)">
-                {{ item.handleType === '20' ? '审批' : '办理' }}
+                {{ item.handleName || item.handleType === '20' ? '审批' : '办理' }}
               </van-button>
             </div>
           </template>
@@ -131,6 +131,9 @@ 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,
                 appDetailUrl: item.appDetailUrl,
               }
@@ -161,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,
@@ -230,4 +234,4 @@ export default {
   flex: 0 0 auto;
 }
 
-</style>
+</style>