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

package/src/FlowBaseList.vue

@@ -0,0 +1,521 @@
+<template>
+  <div style="background: #f7f8fa">
+    <div id="headTitle" class="headTitle" :style="headerStyle">
+      <div class="van-nav-bar__content">
+        <div class="van-nav-bar__left">
+          <slot name="nav-bar-left"/>
+        </div>
+        <div class="van-nav-bar__right">
+          <slot name="nav-bar-right"/>
+        </div>
+        <div class="van-nav-bar__title">
+          <slot name="nav-bar-title"/>
+        </div>
+      </div>
+      <div class="task-status">
+        <van-search
+            show-action
+            placeholder="请输入查询条件"
+            v-model="searchForm.detailName"
+            @search="onSearch"
+        >
+          <template #left-icon>
+            <lambo-scan-code v-if="scanSearch"
+                style="color: #0068FF"
+                iconName="scan"
+                iconSize="24px"
+                :onScanSuccess="handleScanSuccess"
+                :onScanFail="handleScanFail"
+            />
+            <van-icon v-else class="iconfont" class-prefix='icon' name="tqm-search" color="#0068FF" size="20px"></van-icon>
+          </template>
+          <template #right-icon>
+            <div @click="onSearch" class="todo-search">搜索</div>
+          </template>
+          <template #action>
+            <van-badge :dot="searchFilterBadge">
+              <van-icon @click="searchFilterShow = !searchFilterShow;" name="filter-o" color="#666666" size="25px"/>
+            </van-badge>
+          </template>
+        </van-search>
+      </div>
+    </div>
+    <div id="listContent" style="padding-top: 32vw">
+      <van-list v-model="loading" style="padding-top: 15px"
+                :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>
+    <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>
+    <van-dialog v-model="batchApprovalDialog" :before-close="handleBeforeClose" @confirm="batchApprovalSubmit"
+                :title="this.batchApprovalForm.approvalStatus===0 ?'批量通过':'批量驳回'"
+                show-cancel-button>
+      <van-field ref="auditOpinionField" v-model="batchApprovalForm.auditOpinion"
+                 rows="3"
+                 autosize
+                 label="审批意见"
+                 type="textarea"
+                 maxlength="50"
+                 placeholder="请输入审批意见"
+                 show-word-limit
+      />
+    </van-dialog>
+    <van-popup v-model="searchFilterShow" ref="searchPopup" position="top"
+               get-container="#headTitle" style="margin-top: 32vw">
+      <div style="padding: 12px">
+        <van-form>
+          <van-field clearable v-model="searchForm.businessTopic" label="业务主题" placeholder="请输入业务主题"/>
+          <van-field
+              readonly
+              name="calendar"
+              :value="formatCalendarDate(searchForm.startDate)"
+              label="发起时间"
+              placeholder="点击选择发起时间"
+              @click="showCalendar = true"
+          />
+          <van-field
+              readonly
+              name="picker"
+              :value="searchForm.procTypeName"
+              label="流程类型"
+              placeholder="点击选择流程类型"
+              @click="showPicker = true"
+          />
+          <van-field clearable v-model="searchForm.taskName" label="环节名称" placeholder="请输入环节名称"/>
+          <div style="display: flex;justify-content: space-around;padding-top:10px">
+            <span @click="resetSearch" class="resetSearch">重置</span>
+            <span @click="onSearch" class="submitForm">查询</span>
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <van-calendar style="height:60%"
+                  :min-date="new Date(1900, 0, 1)"
+                  :max-date=" new Date()"
+                  v-model="showCalendar" @confirm="onDateConfirm" color="#1989fa"/>
+    <van-popup v-model="showPicker" position="bottom">
+      <van-picker
+          show-toolbar
+          :columns="columns"
+          @confirm="onPickerConfirm"
+          @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import todoBackImage from './assets/todoBackImage.png';
+import {batchApproval, getApprovalType} from "../api";
+import {Toast} from "vant";
+import LamboScanCode from "@lambo-design-mobile/lambo-scan-code";
+import TodoListCard from "./TodoListCard.vue";
+
+export default {
+  name: 'FlowBaseList',
+  components: {TodoListCard, LamboScanCode},
+  props: {
+    scanSearch: {
+      type: Boolean,
+      default: false
+    },
+    selectedTask: {
+      type: String,
+      required: true
+    },
+    fetchListData: {
+      type: Function,
+      required: true
+    },
+    headerBackground: {
+      type: String,
+      default: ''
+    },
+    // 新增 4 个路由 name 参数
+    businessDetailsRouterName: {
+      type: String,
+      required: true
+    },
+    processDetailsRouterName: {
+      type: String,
+      required: true
+    },
+    businessApprovalRouterName: {
+      type: String,
+      required: true
+    },
+    processApprovalRouterName: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      todoBackImage,
+      searchFilterShow: false,
+      searchFilterBadge: false,
+      loading: false,
+      finished: false,
+      searchForm: {
+        detailName: '',
+        applyId: '',
+        procName: '',
+        startDate: '',
+        procType: '',
+        procTypeName: '',
+        taskName: '',
+        businessTopic: '',
+      },
+      showCalendar: false,
+      showPicker: false,
+      columns: [],
+      listData: {
+        total: 0,
+        rows: []
+      },
+      checkResult: [],
+      batchSelectChecked: false,
+      batchApprovalDialog: false,
+      batchApprovalForm: {
+        approvalStatus: "",
+        auditOpinion: "",
+      },
+    }
+  },
+  computed: {
+    // 添加计算属性来处理头部样式
+    headerStyle() {
+      return {
+        backgroundImage: this.headerBackground ? `url(${this.headerBackground})` : `url(${this.todoBackImage})`
+      }
+    }
+  },
+  methods: {
+    async handleLoad() {
+      this.loading = true;
+      const offset = this.listData.rows.length;
+      const limit = 10;
+
+      try {
+        const res = await this.fetchListData(offset, limit, this.searchForm);
+        const result = res.data;
+        if (result.code === '200') {
+          this.listData.rows = this.listData.rows.concat(result.data.rows);
+          this.listData.total = result.data.total;
+        } else {
+          console.error('Failed to load data');
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+
+      this.loading = false;
+      this.finished = this.listData.rows.length >= this.listData.total;
+    },
+    resetSearch() {
+      for (let key in this.searchForm) {
+        if (this.searchForm.hasOwnProperty(key)) {
+          this.searchForm[key] = '';
+        }
+      }
+    },
+    onSearch() {
+      if (this.searchFilterShow) {
+        this.searchFilterShow = false;
+        this.$nextTick(() => {
+          if (this.$refs.searchPopup) {
+            this.$refs.searchPopup.$once('closed', () => {
+              this.resetAndLoadList();
+            });
+          }
+        });
+      } else {
+        this.resetAndLoadList();
+      }
+    },
+    resetAndLoadList() {
+      this.listData.total = 0;
+      this.listData.rows = [];
+      this.handleLoad();
+    },
+    formatCalendarDate(date) {
+      if (date === '') return '';
+      if (!(date instanceof Date)) {
+        date = new Date(date);
+      }
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+    onDateConfirm(date) {
+      this.searchForm.startDate = date.toISOString();
+      this.showCalendar = false;
+    },
+    onPickerConfirm(value) {
+      this.searchForm.procTypeName = value.text;
+      this.searchForm.procType = value.proType;
+      this.showPicker = false;
+    },
+    checkSearchForm() {
+      this.searchFilterBadge = Object.values(this.searchForm).some(value => value !== '');
+    },
+    handleScanSuccess(msg) {
+      this.searchForm.detailName = msg;
+      this.onSearch();
+    },
+    handleScanFail(msg) {
+      Toast.fail(msg);
+    },
+    batchApproval(status) {
+      if (this.checkResult.length > 10) {
+        Toast.fail("最多同时审批十条记录");
+        return;
+      }
+
+      const procTypeSet = new Set(this.checkResult.map(flowId => {
+        const item = this.listData.rows.find(item => item.flowId === flowId);
+        return item.procType;
+      }));
+
+      if (procTypeSet.size > 1) {
+        Toast.fail("只能批量审批同类型流程");
+        return;
+      }
+
+      this.batchApprovalForm.approvalStatus = status;
+      this.batchApprovalDialog = true;
+    },
+    async batchApprovalSubmit() {
+      const flowIds = this.checkResult.join(",");
+      const status = this.batchApprovalForm.approvalStatus;
+      const auditOpinion = this.batchApprovalForm.auditOpinion;
+
+      try {
+        const res = await batchApproval(status, flowIds, auditOpinion);
+        if (res.data.code === '200') {
+          this.checkResult = [];
+          this.onSearch();
+          Toast.success("审批成功");
+        }
+      } 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();
+      } else {
+        this.$refs.todoListCard.toggleAll();
+      }
+    },
+  },
+  async mounted() {
+    try {
+      const res = await getApprovalType();
+      if (res.data.code === '200') {
+        this.columns = res.data.data.map(item => ({
+          text: item.procTypeName,
+          proType: item.proType
+        }));
+      }
+    } catch (error) {
+      console.error('Error fetching approval types:', error);
+    }
+  },
+  watch: {
+    searchForm: {
+      handler: 'checkSearchForm',
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import 'styles/global.css';
+
+::v-deep .van-dialog__header{
+  padding-top: 10px;
+}
+
+.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: #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));
+}
+
+.headTitle {
+  position: fixed; /* 固定在页面的顶部 */
+  top: 0; /* 设置距离顶部为 0 */
+  left: 0; /* 设置距离左边为 0 */
+  width: 100vw; /* 占满页面的宽度 */
+  z-index: 1000; /* 确保头部在其他元素之上 */
+
+  background-size: cover; /* 背景图片覆盖整个容器 */
+  background-repeat: no-repeat; /* 防止背景图片重复 */
+  background-position: center; /* 背景图片居中显示 */
+}
+
+.task-status {
+  padding: 10px 0;
+}
+
+.van-search {
+  background-color: transparent;
+  border-radius: 6px;
+}
+
+.van-search__content {
+  border-radius: 6px;
+}
+
+.van-badge__wrapper {
+  display: flex;
+}
+
+.van-search__action {
+  display: flex;
+  align-items: center;
+  padding: 5px 5px;
+  transition: background-color 0.3s ease; /* 添加过渡效果 */
+}
+
+.van-search__action:active {
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.1); /* 点击时显示半透明背景 */
+}
+
+::v-deep .van-field__left-icon {
+  display: flex;
+  align-items: center;
+}
+
+.todo-search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: white;
+  width: 58px;
+  height: 30px;
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border-radius: 6px;
+}
+
+.todo-search:active {
+  background: linear-gradient(90deg, rgba(0, 150, 255, 0.8), rgba(22, 119, 255, 0.79));
+}
+
+.van-nav-bar__title {
+  flex-grow: 1; /* 让标题占据剩余空间，从而使其居中 */
+  text-align: center; /* 确保文本在剩余空间中居中显示 */
+}
+
+.icon-flex {
+  position: absolute;
+  left: 10px; /* 或根据需要调整位置 */
+  top: 60%;
+  transform: translateY(-50%); /* 垂直居中 */
+}
+
+::v-deep .van-overlay {
+  margin-top: 32vw;
+}
+
+::v-deep .van-popup {
+  transform: translateY(0); /* 防止动画从顶部开始 */
+}
+
+.resetSearch {
+  color: black;
+  width: 160px;
+  height: 35px;
+  background: #F2F2F2;
+  border-radius: 9px;
+  font-size: 14px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.resetSearch:active {
+  background: rgba(242, 242, 242, 0.8);
+}
+
+.submitForm {
+  color: white;
+  width: 160px;
+  height: 35px;
+  background: linear-gradient(90deg, #0096FF, #1677FF);
+  border-radius: 9px;
+  font-size: 14px;
+
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.submitForm:active {
+  background: linear-gradient(90deg, rgba(0, 150, 255, 0.8), rgba(22, 119, 255, 0.79));
+}
+
+</style>

package/src/FlowDownList.vue

@@ -0,0 +1,72 @@
+<template>
+  <FlowBaseList
+      selected-task="complete"
+      :header-background=headerBackground
+      :fetch-list-data="fetchListData"
+      :scan-search=scanSearch
+      :business-approval-router-name="businessApprovalRouterName"
+      :business-details-router-name="businessDetailsRouterName"
+      :process-approval-router-name="processApprovalRouterName"
+      :process-details-router-name="processDetailsRouterName">
+    <template #nav-bar-left>
+      <slot name="nav-bar-left"/>
+    </template>
+    <template #nav-bar-title>
+      {{ title }}
+    </template>
+    <template #nav-bar-right>
+      <slot name="nav-bar-right"/>
+    </template>
+  </FlowBaseList>
+</template>
+
+<script>
+import FlowBaseList from './FlowBaseList.vue';
+import { getProcessDoneList } from "../api";
+
+export default {
+  name: 'FlowTodoList',
+  components: {
+    FlowBaseList
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    scanSearch: {
+      type: Boolean,
+      default: false
+    },
+    // 新增的背景图属性
+    headerBackground: {
+      type: String,
+      default: ''
+    },
+    // 新增 4 个路由 name 参数
+    businessDetailsRouterName: {
+      type: String,
+      required: true
+    },
+    processDetailsRouterName: {
+      type: String,
+      required: true
+    },
+    businessApprovalRouterName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    processApprovalRouterName: {
+      type: String,
+      required: false,
+      default: '',
+    }
+  },
+  data() {
+    return {
+      fetchListData: getProcessDoneList
+    }
+  }
+}
+</script>

package/src/FlowTodoList.vue

@@ -0,0 +1,72 @@
+<template>
+  <FlowBaseList
+      selected-task="pending"
+      :header-background=headerBackground
+      :fetch-list-data="fetchListData"
+      :scan-search=scanSearch
+      :business-approval-router-name="businessApprovalRouterName"
+      :business-details-router-name="businessDetailsRouterName"
+      :process-approval-router-name="processApprovalRouterName"
+      :process-details-router-name="processDetailsRouterName">
+    <template #nav-bar-left>
+      <slot name="nav-bar-left"/>
+    </template>
+    <template #nav-bar-title>
+      {{ title }}
+    </template>
+    <template #nav-bar-right>
+      <slot name="nav-bar-right"/>
+    </template>
+  </FlowBaseList>
+</template>
+
+<script>
+import FlowBaseList from './FlowBaseList.vue';
+import {getProcessTodoList} from "../api";
+import TodoListCard from "./TodoListCard.vue";
+
+export default {
+  name: 'FlowTodoList',
+  components: {
+    TodoListCard,
+    FlowBaseList
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    scanSearch: {
+      type: Boolean,
+      default: false
+    },
+    // 新增的背景图属性
+    headerBackground: {
+      type: String,
+      default: ''
+    },
+    // 新增 4 个路由 name 参数
+    businessDetailsRouterName: {
+      type: String,
+      required: true
+    },
+    processDetailsRouterName: {
+      type: String,
+      required: true
+    },
+    businessApprovalRouterName: {
+      type: String,
+      required: true
+    },
+    processApprovalRouterName: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      fetchListData: getProcessTodoList
+    }
+  }
+}
+</script>