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

package/src/FlowBaseList.vue

@@ -45,23 +45,24 @@
                 :finished="finished"
                 finished-text="没有更多了"
                 @load="handleLoad">
-        <TodoListCard ref="todoListCard" :selected-task="selectedTask" :todo-list="listData.rows" :result.sync="checkResult"
-                      :business-approval-router-name="businessApprovalRouterName"
-                      :business-details-router-name="businessDetailsRouterName"
-                      :process-approval-router-name="processApprovalRouterName"
-                      :process-details-router-name="processDetailsRouterName"/>
-      </van-list>
-    </div>
+        <TodoListCard ref="todoListCard" :selected-task="selectedTask" :todo-list="listData.rows" :result.sync="checkResult"
+                      :business-approval-router-name="businessApprovalRouterName"
+                      :business-details-router-name="businessDetailsRouterName"
+                      :process-approval-router-name="processApprovalRouterName"
+                      :process-details-router-name="processDetailsRouterName"
+                      @refresh="resetAndLoadList"/>
+      </van-list>
+    </div>
     <div v-if="checkResult.length > 0" class="custom-bottom-bar">
       <div class="bar-item">
         <van-checkbox v-model="batchSelectChecked" @change="batchSelect" style="justify-content: center;"
                       icon-size="18px">全选
         </van-checkbox>
       </div>
-      <div class="bar-item" @click="batchApproval(1)">批量驳回</div>
-      <div class="bar-item approve" @click="batchApproval(0)">批量通过</div>
+      <div v-if="showBatchReject" class="bar-item" @click="batchApproval(1)">批量驳回</div>
+      <div class="bar-item approve" :style="approveButtonStyle" @click="batchApproval(0)">批量通过</div>
     </div>
-    <van-dialog v-model="batchApprovalDialog" :before-close="handleBeforeClose" @confirm="batchApprovalSubmit"
+    <van-dialog v-model="batchApprovalDialog" :before-close="handleBeforeClose"
                 :title="this.batchApprovalForm.approvalStatus===0 ?'批量通过':'批量驳回'"
                 show-cancel-button>
       <van-field ref="auditOpinionField" v-model="batchApprovalForm.auditOpinion"
@@ -70,8 +71,9 @@
                  label="审批意见"
                  type="textarea"
                  maxlength="50"
-                 placeholder="请输入审批意见"
+                 :placeholder="this.batchApprovalForm.approvalStatus===0 ? '请输入审批意见（选填）' : '请输入审批意见（必填）'"
                  show-word-limit
+                 :class="{'required-field': this.batchApprovalForm.approvalStatus===1}"
       />
     </van-dialog>
     <van-popup v-model="searchFilterShow" ref="searchPopup" position="top"
@@ -82,9 +84,9 @@
           <van-field
               readonly
               name="calendar"
-              :value="formatCalendarDate(searchForm.startDate)"
+              :value="formatDateRange()"
               label="发起时间"
-              placeholder="点击选择发起时间"
+              placeholder="点击选择发起时间范围"
               @click="showCalendar = true"
           />
           <van-field
@@ -106,6 +108,7 @@
     <van-calendar style="height:60%"
                   :min-date="new Date(1900, 0, 1)"
                   :max-date=" new Date()"
+                  type="range"
                   v-model="showCalendar" @confirm="onDateConfirm" color="#1989fa"/>
     <van-popup v-model="showPicker" position="bottom">
       <van-picker
@@ -145,6 +148,11 @@ export default {
       type: String,
       default: ''
     },
+    // 控制批量驳回按钮是否显示
+    showBatchReject: {
+      type: Boolean,
+      default: false
+    },
     // 新增 4 个路由 name 参数
     businessDetailsRouterName: {
       type: String,
@@ -174,7 +182,8 @@ export default {
         detailName: '',
         applyId: '',
         procName: '',
-        startDate: '',
+        startDateBegin: '',
+        startDateEnd: '',
         procType: '',
         procTypeName: '',
         taskName: '',
@@ -202,6 +211,16 @@ export default {
       return {
         backgroundImage: this.headerBackground ? `url(${this.headerBackground})` : `url(${this.todoBackImage})`
       }
+    },
+    // 根据是否显示批量驳回按钮动态调整批量通过按钮样式
+    approveButtonStyle() {
+      if (!this.showBatchReject) {
+        return {
+          'flex': '2',
+          'margin': '0 20px 0 60px'
+        }
+      }
+      return {}
     }
   },
   methods: {
@@ -262,8 +281,31 @@ export default {
       const day = String(date.getDate()).padStart(2, '0');
       return `${year}-${month}-${day}`;
     },
-    onDateConfirm(date) {
-      this.searchForm.startDate = date.toISOString();
+    formatDateRange() {
+      const { startDateBegin, startDateEnd } = this.searchForm;
+      if (!startDateBegin && !startDateEnd) return '';
+      
+      // 将ISO格式转换为显示格式
+      const formatDisplayDate = (isoString) => {
+        if (!isoString) return '';
+        const date = new Date(isoString);
+        return this.formatCalendarDate(date);
+      };
+      
+      if (startDateBegin && startDateEnd) {
+        return `${formatDisplayDate(startDateBegin)} ~ ${formatDisplayDate(startDateEnd)}`;
+      }
+      return formatDisplayDate(startDateBegin) || formatDisplayDate(startDateEnd);
+    },
+    onDateConfirm(dates) {
+      if (Array.isArray(dates) && dates.length === 2) {
+        // 将日期转换为ISO格式以匹配后端期望
+        this.searchForm.startDateBegin = dates[0].toISOString();
+        this.searchForm.startDateEnd = dates[1].toISOString();
+      } else {
+        this.searchForm.startDateBegin = '';
+        this.searchForm.startDateEnd = '';
+      }
       this.showCalendar = false;
     },
     onPickerConfirm(value) {
@@ -282,6 +324,11 @@ export default {
       Toast.fail(msg);
     },
     batchApproval(status) {
+      // 如果是驳回操作，但驳回按钮被禁用，则不执行操作
+      if (status === 1 && !this.showBatchReject) {
+        return;
+      }
+
       if (this.checkResult.length > 10) {
         Toast.fail("最多同时审批十条记录");
         return;
@@ -300,6 +347,22 @@ export default {
       this.batchApprovalForm.approvalStatus = status;
       this.batchApprovalDialog = true;
     },
+    handleBeforeClose(action, done) {
+      if (action === 'confirm') {
+        // 驳回(status=1)时审批意见必填，通过(status=0)时审批意见可选
+        if (this.batchApprovalForm.approvalStatus === 1 && !this.batchApprovalForm.auditOpinion) {
+          Toast("驳回操作必须填写审批意见");
+          return done(false);
+        }
+        // 校验通过，关闭对话框，然后提交审批
+        done();
+        this.batchApprovalSubmit();
+      } else {
+        // 取消操作，直接关闭对话框
+        done();
+        this.batchApprovalForm.auditOpinion = '';
+      }
+    },
     async batchApprovalSubmit() {
       const flowIds = this.checkResult.join(",");
       const status = this.batchApprovalForm.approvalStatus;
@@ -311,23 +374,16 @@ export default {
           this.checkResult = [];
           this.onSearch();
           Toast.success("审批成功");
+          // 成功后清空审批意见
+          this.batchApprovalForm.auditOpinion = '';
+        } else {
+          Toast.fail(res.data.message || "审批失败");
         }
       } catch (error) {
         console.error('Error submitting batch approval:', error);
         Toast.fail("审批失败");
       }
     },
-    handleBeforeClose(action, done) {
-      if (action === 'confirm' && !this.batchApprovalForm.auditOpinion) {
-        Toast("审批信息不能为空");
-        return done(false);
-      }
-      if (action === 'confirm') {
-        this.batchApprovalSubmit();
-      }
-      done();
-      this.batchApprovalForm.auditOpinion = '';
-    },
     batchSelect(checked) {
       if (checked) {
         this.$refs.todoListCard.checkAll();
@@ -518,4 +574,17 @@ export default {
   background: linear-gradient(90deg, rgba(0, 150, 255, 0.8), rgba(22, 119, 255, 0.79));
 }
 
-</style>
+.required-field {
+  border-color: red;
+}
+
+.required-field ::v-deep .van-field__label {
+  color: #f44;
+}
+
+.required-field ::v-deep .van-field__label::before {
+  content: '* ';
+  color: #f44;
+}
+
+</style>

package/src/FlowNodeCell.vue

@@ -0,0 +1,116 @@
+<template>
+  <van-cell center>
+    <template v-slot:icon>
+      <div
+          v-if="['通过','流程发起','跳转指定节点'].includes(getAuditStatus(item.auditResult, item.handleName, item.rejectName).text)"
+          class="completed-icon">
+        <van-icon class="iconfont" class-prefix='icon' :name=getAuditStatus(item.auditResult).icon
+                  size="28px" color="#fff"/>
+      </div>
+      <div v-else class="pending-icon">
+        <van-icon class="iconfont" class-prefix='icon' :name=getAuditStatus(item.auditResult).icon
+                  size="28px" color="#fff"/>
+      </div>
+    </template>
+    <template v-slot:title>
+      <div :style="{ color: getAuditStatus(item.auditResult).color }"
+           style="font-size: 16px;font-weight: bold;padding:5px 0;">
+        {{ Array.isArray(item.auditName) ? item.auditName[0] : item.auditName }}
+      </div>
+      <div>{{ item.taskName }}</div>
+      <div>
+        <div v-if="foldingApprovalComments">
+          <span v-if="item.auditComment" @click="showAuditDetail(item.auditComment)">
+            审批意见 <van-icon name="comment-circle-o"/>
+          </span>
+        </div>
+        <div v-else >
+          <div v-if="item.auditComment">
+            意见: {{ item.auditComment }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:label>
+      <div>{{ item.auditDate || item.createTime }}</div>
+    </template>
+    <template v-slot:default>
+                        <span :style="{ color: getAuditStatus(item.auditResult).color }">{{
+                            getAuditStatus(item.auditResult, item.handleName, item.rejectName).text
+                          }}</span>
+    </template>
+  </van-cell>
+</template>
+
+<script>
+import {Dialog} from "vant";
+import {getAuditStatus} from "./js/global";
+
+export default {
+  name: "FlowNodeCell",
+  props: {
+    nodeDetail: {
+      type: Object,
+      required: true
+    },
+    foldingApprovalComments: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      item: this.nodeDetail
+    }
+  },
+  methods: {
+    getAuditStatus,
+    showAuditDetail(auditComment) {
+      Dialog.alert({
+        title: '审批意见',
+        message: auditComment,
+      }).then(() => {
+        // on close
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.completed-icon {
+  width: 50px;
+  height: 50px;
+  background-clip: padding-box; /* 使背景不填充边框 */
+
+  border-radius: 50%;
+  margin-right: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border: 0.3rem solid rgb(229, 244, 255); /* 半透明边框，颜色和背景色相同 */
+}
+
+.pending-icon {
+  width: 50px;
+  height: 50px;
+  background-clip: padding-box; /* 使背景不填充边框 */
+
+  border-radius: 50%;
+  margin-right: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: linear-gradient(90deg, #FF7E00, #FFA200);
+  border: 0.4rem solid rgb(255, 245, 229); /* 半透明边框，颜色和背景色相同 */
+}
+
+::v-deep .van-cell__value {
+  flex: 0 auto;
+}
+</style>

package/src/SelectHandle.vue

@@ -16,7 +16,7 @@
         <template #right-icon>
           <div @click="onSearch" class="todo-search">搜索</div>
         </template>
-        <template #action>
+        <template v-if="!useUserTransferRange" #action>
           <van-badge :dot="searchFilterBadge">
             <van-icon @click="searchFilterShow = !searchFilterShow;" name="filter-o" color="#666666" size="25px"/>
           </van-badge>
@@ -24,7 +24,7 @@
       </van-search>
     </div>
     <van-popup v-model="searchFilterShow" ref="searchPopup" position="top"
-               get-container="#headTitle" style="position: absolute;margin-top: 104px"
+               style="position: absolute;margin-top: 104px"
                :overlay-style="{ position:'absolute',marginTop: '104px'}" transition="none">
       <div style="padding: 12px">
         <van-form>
@@ -51,9 +51,10 @@
       <van-list v-model="loading" style="padding-top: 15px"
                 :finished="finished"
                 finished-text="没有更多了"
+                :immediate-check="false"
                 @load="handleLoad()">
         <select-handle-card ref="selectHandleCard" :multi-select="multiSelect" :person-list="personList.rows"
-                            :result.sync="checkResult">
+                            :result.sync="checkResult" :show-status="!useUserTransferRange">
         </select-handle-card>
       </van-list>
     </div>
@@ -63,14 +64,14 @@
     </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>
+      <select-organize :all-organize="true" :treetype-id="orgTreeType" :org-root-with-permit="orgRootWithPermit" :organize-id-list="organizeIdList" :show-check-box="false" @handleSelect="onSelect" ></select-organize>
     </van-popup>
   </div>
 </template>
 
 <script>
 import SelectHandleCard from "./SelectHandleCard.vue";
-import {getOrgRootTree, getProcessType, getUserList} from "../api";
+import {getOrgRootTree, getProcessType, getUserList, getTransferRange, getBizOrgRootTree} from "../api";
 import Tree from "./tree/Tree.vue";
 import SelectOrganize from "./SelectOrganize.vue";
 
@@ -86,9 +87,26 @@ export default {
       type: String,
       required: true
     },
+    // 根组织获取规则，为true表示用登录人权限范围
+    orgRootWithPermit: {
+      type: Boolean,
+      default: true
+    },
     multiSelect: {  // 新增一个 prop 来控制是否开启多选模式
       type: Boolean,
       default: false
+    },
+    organTreeType: {
+      type: String,
+      required: false
+    },
+    userList: {  // 用户选择范围
+      type: Array,
+      default: () => ([])
+    },
+    orgList: {  // 组织选择范围
+      type: Array,
+      default: () => ([])
     }
   },
   data() {
@@ -96,8 +114,12 @@ export default {
       searchOrganShow: false,
       searchFilterShow: false,
       searchFilterBadge: false,
+      useUserTransferRange: false,
+      userRangeList: [],
+      orgTreeType: '',
       searchForm: {
         userId: '',
+        orgTreeType: '',
         userName: '',
         permScopeList: '',
         organId: '',
@@ -113,6 +135,7 @@ export default {
         rows: []
       },
       checkResult: [],  // 需要传递到子组件的 checkResult
+      organizeIdList: [],  // 需要传递到子组件的组织选择范围
     };
   },
   mounted() {
@@ -120,46 +143,108 @@ export default {
   },
   methods: {
     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;
+      if (this.userList && this.userList.length > 0) {
+        this.useUserTransferRange = true
+        this.userRangeList = this.userList.map(item => { return{...item, organName: item.organName || item.deptName} })
+        this.personList.rows = this.userRangeList
+        this.personList.total = this.userRangeList.length
+        this.finished = true;
+        return
+      }
+      this.useUserTransferRange = false
+      this.personList.total = 0;
+      this.personList.rows = [];
+      this.finished = false;
+      this.loading = false;
+      if (this.orgList && this.orgList.length > 0){
+        this.organizeIdList = this.orgList.map(item => item.orgId)
+        this.orgTreeType = this.organTreeType;
+        this.searchForm = {
+          ...this.searchForm,
+          orgTreeType: this.organTreeType,
+          organId: this.orgList[0].orgId,
+          organTitle: this.orgList[0].orgName,
+          userId: ''
         }
         this.handleLoad()
-      })
+      } else {
+        getProcessType(this.procType).then(res => {
+          this.orgTreeType = res.data.data.rows[0].organTreeType;
+          const permScope = res.data.data.rows[0].permScope || 'all'
+          if (this.orgRootWithPermit){
+            getOrgRootTree(this.orgTreeType).then(res => {
+              const orgResult = res.data;
+              if (orgResult.code === 200) {
+                this.searchForm = {
+                  ...this.searchForm,
+                  orgTreeType: this.orgTreeType,
+                  permScopeList: permScope,
+                  organId: orgResult.data[0].organId,
+                  organTitle: orgResult.data[0].organName,
+                  userId: ''
+                }
+              }
+              this.handleLoad()
+            })
+          } else {
+            getBizOrgRootTree(this.orgTreeType).then(res => {
+              const orgResult = res.data;
+              if (orgResult.code === 200) {
+                this.searchForm = {
+                  ...this.searchForm,
+                  orgTreeType: this.orgTreeType,
+                  permScopeList: permScope,
+                  organId: orgResult.data[0].bizOrganId,
+                  organTitle: orgResult.data[0].bizOrganName,
+                  userId: ''
+                }
+              }
+              this.handleLoad()
+            })
+          }
+
+        }).catch(error => {
+          console.error(error)
+        })
+      }
     },
     handleLoad() {
+      if (this.finished) {
+        return
+      }
       console.log("触发加载")
+      this.loading = true;
+      if (this.useUserTransferRange){
+        this.personList.rows = this.searchForm.userName ? this.userRangeList.filter(item => item.userName === this.searchForm.userName) : this.userRangeList
+        this.personList.total = this.personList.rows.length;
+        this.finished = true;
+        this.loading = false;
+        return
+      }
       const offset = this.personList.rows.length;
       const limit = 10;
 
-      getProcessType(this.procType).then(res => {
-
-        const userArray = this.extractUsers(res.data.data.rows[0].permScope);
-        console.log(userArray)
-        if (userArray.length > 0) {
-          this.searchForm.permScopeList = userArray.join(',')
-        }
-        getUserList(offset, limit, this.searchForm).then(res => {
-
-          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;
+      getUserList(offset, limit, this.searchForm).then(res => {
+        const result = res.data;
+        if (result.code === "1") {
+          //返回的数据添加到 personList 中
+          const newRows = Array.isArray(result.data.rows) ? result.data.rows : [];
+          this.personList.rows = this.personList.rows.concat(newRows);
+          const total = Number(result.data.total);
+          if (!Number.isNaN(total)) {
+            this.personList.total = total;
           }
+          const noMoreByPage = newRows.length < limit;
+          const noMoreByTotal = this.personList.total > 0 && this.personList.rows.length >= this.personList.total;
+          this.finished = noMoreByPage || noMoreByTotal;
+        }
 
-          this.loading = false;
-          this.finished = this.personList.rows.length >= this.personList.total;
+        this.loading = false;
 
-        }).catch(error => {
-          console.error('Error fetching data:', error);
-          this.loading = false;
-        });
       }).catch(error => {
-        console.error(error)
-      })
+        console.error('Error fetching data:', error);
+        this.loading = false;
+      });
     },
 
     extractUsers(permScope) {
@@ -196,6 +281,8 @@ export default {
     resetAndLoadPersonList() {
       this.personList.total = 0;
       this.personList.rows = [];
+      this.finished = false;
+      this.loading = false;
       this.handleLoad();
     },
     handleSelect(handle) {
@@ -218,10 +305,10 @@ export default {
   },
   watch: {
     // 监听 searchForm 的每一个字段的变化
-    searchForm: {
-      handler: 'checkSearchForm',
-      deep: true // 深度监听
-    }
+    // searchForm: {
+    //   handler: 'checkSearchForm',
+    //   deep: true // 深度监听
+    // }
   }
 }
 </script>
@@ -347,4 +434,4 @@ export default {
 .submitForm:active {
   background: linear-gradient(90deg, rgba(0, 150, 255, 0.8), rgba(22, 119, 255, 0.79));
 }
-</style>
+</style>

package/src/SelectHandleCard.vue

@@ -17,7 +17,7 @@
                   :border="false" title="部门名称"
                   :value="item.organName"></van-cell>
         <van-cell title-class="list-title" value-class="list-value" class="custom-cell"
-                  :border="false" title="人员状态">
+                  :border="false" title="人员状态" v-if="showStatus">
           <template v-slot:default>
             <span :style="getStatusStyle(item.status)"></span>
             <span :style="{ color: getStatusStyle(item.status)['background-color'] }">
@@ -46,6 +46,10 @@ export default {
     multiSelect: {  // 新增一个 prop 来控制是否开启多选模式
       type: Boolean,
       default: false
+    },
+    showStatus: {
+      type: Boolean,
+      default: false
     }
   },
   data() {