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

package/src/FlowBaseList.vue

@@ -58,10 +58,10 @@
                       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 +70,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 +83,9 @@
           <van-field
               readonly
               name="calendar"
-              :value="formatCalendarDate(searchForm.startDate)"
+              :value="formatDateRange()"
               label="发起时间"
-              placeholder="点击选择发起时间"
+              placeholder="点击选择发起时间范围"
               @click="showCalendar = true"
           />
           <van-field
@@ -106,6 +107,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 +147,11 @@ export default {
       type: String,
       default: ''
     },
+    // 控制批量驳回按钮是否显示
+    showBatchReject: {
+      type: Boolean,
+      default: false
+    },
     // 新增 4 个路由 name 参数
     businessDetailsRouterName: {
       type: String,
@@ -174,7 +181,8 @@ export default {
         detailName: '',
         applyId: '',
         procName: '',
-        startDate: '',
+        startDateBegin: '',
+        startDateEnd: '',
         procType: '',
         procTypeName: '',
         taskName: '',
@@ -202,6 +210,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 +280,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 +323,11 @@ export default {
       Toast.fail(msg);
     },
     batchApproval(status) {
+      // 如果是驳回操作，但驳回按钮被禁用，则不执行操作
+      if (status === 1 && !this.showBatchReject) {
+        return;
+      }
+
       if (this.checkResult.length > 10) {
         Toast.fail("最多同时审批十条记录");
         return;
@@ -300,6 +346,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 +373,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 +573,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).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).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

@@ -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>