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

package/src/SelectHandle.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <div id="headTitle" class="headTitle">
+      <div class="van-nav-bar__content">
+        <div class="van-nav-bar__title">指定办理人</div>
+      </div>
+      <van-search
+          show-action
+          placeholder="请输入姓名查询"
+          v-model="searchForm.userName"
+          @search="onSearch"
+      >
+        <template #left-icon>
+          <van-icon 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>
+    <van-popup v-model="searchFilterShow" ref="searchPopup" position="top"
+               get-container="#headTitle" style="position: absolute;margin-top: 104px"
+               :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 v-model="searchForm.userId" label="用户ID" placeholder="请输入用户ID"/>
+          <van-field name="radio" label="是否管理员">
+            <template #input>
+              <van-radio-group v-model="searchForm.isAdmin" direction="horizontal">
+                <van-radio name="">全部</van-radio>
+                <van-radio name="1">是</van-radio>
+                <van-radio name="0">否</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <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>
+    <div id="listContent">
+      <van-list v-model="loading" style="padding-top: 15px"
+                :finished="finished"
+                finished-text="没有更多了"
+                @load="handleLoad()">
+        <select-handle-card ref="selectHandleCard" :person-list="personList.rows"
+                            :result.sync="checkResult">
+        </select-handle-card>
+      </van-list>
+    </div>
+    <div v-if="checkResult.length > 0" class="custom-bottom-bar">
+      <div class="bar-item" @click="handleSelect('cancel')">取消</div>
+      <div class="bar-item approve" @click="handleSelect('select')">选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectHandleCard from "./SelectHandleCard.vue";
+import {getOrgRootTree, getUserList} from "../api";
+
+export default {
+  name: "SelectHandle",
+  components: {SelectHandleCard},
+  data() {
+    return {
+      searchFilterShow: false,
+      searchFilterBadge: false,
+      searchForm: {
+        userId: '',
+        userName: '',
+        organId: '',
+        organTitle: '',
+        directChild: '',
+        isAdmin: '',
+      },
+
+      loading: false,
+      finished: false,
+      personList: {
+        total: 0,
+        rows: []
+      },
+      checkResult: [],  // 需要传递到子组件的 checkResult
+    }
+  },
+  methods: {
+    handleLoad() {
+      console.log("触发加载")
+      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;
+
+          const offset = this.personList.rows.length;
+          const limit = 10;
+
+          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;
+
+            } else {
+              console.error('Failed to load data');
+            }
+
+            this.loading = false;
+            this.finished = this.personList.rows.length >= this.personList.total;
+
+          }).catch(error => {
+            console.error('Error fetching data:', error);
+            this.loading = false;
+          });
+        }
+      })
+    },
+    onSearch() {
+      // 如果搜索弹框是打开的
+      if (this.searchFilterShow) {
+        // 关闭搜索弹框
+        this.searchFilterShow = false;
+        // 监听 `searchFilterShow` 的变化，并在关闭动画完成后执行操作
+        this.$nextTick(() => {
+          if (this.$refs.searchPopup) {
+            this.$refs.searchPopup.$once('closed', () => {
+              // 在关闭动画完成后执行重置和加载操作
+              this.resetAndLoadPersonList();
+            });
+          }
+        });
+      } else {
+        // 如果搜索弹框已经是关闭的，直接执行重置和加载操作
+        this.resetAndLoadPersonList();
+      }
+    },
+    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] = '';
+          }
+        }
+      }
+    },
+    resetAndLoadPersonList() {
+      this.personList.total = 0;
+      this.personList.rows = [];
+      this.handleLoad();
+    },
+    handleSelect(handle) {
+      if (handle === 'select') {
+        // 触发自定义事件 'selectHandle'，并传递 this.checkResult
+        this.$emit('selectHandle', this.checkResult);
+      } else {
+        this.checkResult = [];
+      }
+    },
+    checkSearchForm() {
+      this.searchFilterBadge = Object.values(this.searchForm).some(value => value !== '');
+    },
+  },
+  watch: {
+    // 监听 searchForm 的每一个字段的变化
+    searchForm: {
+      handler: 'checkSearchForm',
+      deep: true // 深度监听
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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-search {
+  border-radius: 6px;
+}
+
+.van-search__content {
+  border-radius: 6px;
+}
+
+.van-nav-bar__content {
+  background: white;
+}
+
+.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;
+}
+
+.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;
+  margin: 0 20px;
+}
+
+.bar-item:active {
+  background: #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));
+}
+
+.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/SelectHandleCard.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <van-checkbox-group v-model="localResult" :max="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"
+                          icon-size="18px"></van-checkbox>
+          </template>
+        </van-cell>
+        <van-cell title-class="list-title" value-class="list-value" class="custom-cell"
+                  :border="false" title="人员账号"
+                  :value="item.userId"></van-cell>
+        <van-cell title-class="list-title" value-class="list-value" class="custom-cell"
+                  :border="false" title="部门名称"
+                  :value="item.organName"></van-cell>
+        <van-cell title-class="list-title" value-class="list-value" class="custom-cell"
+                  :border="false" title="人员状态">
+          <template v-slot:default>
+            <span :style="getStatusStyle(item.status)"></span>
+            <span :style="{ color: getStatusStyle(item.status)['background-color'] }">
+              {{ getStatusText(item.status) }}
+            </span>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-checkbox-group>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'SelectHandleCard',
+  props: {
+    personList: {},
+    selectedTask: {
+      type: String,
+      default: 'pending'
+    },
+    result: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      localResult: this.result,  // 使用 localResult 来绑定 van-checkbox-group
+    }
+  },
+  watch: {
+    // 监听 result 属性的变化
+    result: {
+      handler(newVal) {
+        this.localResult = newVal; // 当 result 变化时，更新 localResult
+      },
+      deep: true
+    },
+    localResult: {
+      handler(newVal) {
+        this.$emit('update:result', newVal); // 将 localResult 的变化传递给父组件
+      },
+      deep: true
+    }
+  },
+  methods: {
+    checkAll() {
+      this.$refs.checkboxGroup.toggleAll(true);
+    },
+    toggleAll() {
+      this.$refs.checkboxGroup.toggleAll(false);
+    },
+    clearLocalResult(item) {
+      this.localResult = [];
+      this.localResult.push(item)
+    },
+    getStatusText(status) {
+      switch (status) {
+        case '00':
+          return '正常';
+        case '01':
+          return '初始';
+        case '10':
+          return '删除';
+        case '11':
+          return '锁定';
+        default:
+          return '未知状态';
+      }
+    },
+    getStatusStyle(status) {
+      let color = '';
+      switch (status) {
+        case '00':
+          color = 'rgb(25, 190, 107)'; // 绿色
+          break;
+        case '01':
+          color = 'rgb(255, 193, 7)'; // 黄色
+          break;
+        case '10':
+          color = 'rgb(244, 67, 54)'; // 红色
+          break;
+        case '11':
+          color = 'rgb(158, 158, 158)'; // 灰色
+          break;
+        default:
+          color = 'rgb(0, 0, 0)'; // 黑色（未知状态）
+      }
+      return {
+        display: 'inline-block',
+        width: '10px',
+        height: '10px',
+        'border-radius': '50%',
+        'background-color': color,
+        'margin-right': '5px',
+      };
+    }
+  }
+}
+</script>
+<style scoped>
+
+/* 自定义 .van-cell 样式 */
+.custom-cell {
+  padding: 5px 16px;
+}
+
+/* 自定义 .van-cell 样式 */
+.value-status {
+  font-weight: bold; /* 设置文字加粗 */
+  text-align: right;
+}
+
+</style>

package/src/TodoListCard.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <van-checkbox-group v-model="localResult" ref="checkboxGroup">
+      <van-cell-group v-for="(item,index) in todoList" :key="index"
+                      style="margin-bottom: 10px;" inset>
+        <van-cell title-class="title-status" center
+                  :value-class="[selectedTask === 'pending' ? 'value-pending' : 'value-completed']"
+                  size="large"
+                  :value="selectedTask === 'pending' ? (item.handleType === '20'? '待审批':'待办理'): '已处理'">
+          <template #title>
+            <div @click="handleDetails(item)">{{ item.businessTopic ? item.businessTopic : item.procName }}</div>
+          </template>
+          <template #icon>
+            <van-checkbox v-if="selectedTask === 'pending' &  item.handleType === '20'" style="padding: 0 5px"
+                          :name="item.flowId" icon-size="18px"></van-checkbox>
+          </template>
+        </van-cell>
+        <van-cell title-class="list-title" value-class="list-value" class="custom-cell" :border="false"
+                  title="样品单号"
+                  :value="item.applyId"></van-cell>
+        <van-cell title-class="list-title" value-class="list-value" class="custom-cell" :border="false"
+                  title="流程名称" @click="toggleDetails(index)" :is-link="true"
+                  :arrow-direction="detailsVisible[index] ? 'down' : ''"
+                  :value="item.procName"></van-cell>
+        <div v-if="detailsVisible[index]">
+          <van-cell title-class="list-title" value-class="list-value" class="custom-cell" :border="false"
+                    title="当前环节"
+                    :value="item.taskName"></van-cell>
+          <van-cell title-class="list-title" value-class="list-value" class="custom-cell" :border="false" title="申请人"
+                    :value="item.applyUser ? item.applyUser.split(':')[1] : '未定义'"></van-cell>
+        </div>
+        <van-cell title-class="list-title" value-class="list-value" class="custom-cell"
+                  :title="selectedTask === 'pending' ? '发起时间':'审批时间' "
+                  :value="selectedTask === 'pending' ? formatDate(item.startDate) :formatDate(item.auditDate)">
+        </van-cell>
+        <van-cell v-if="selectedTask === 'pending'" :key="selectedTask" title=" ">
+          <template #right-icon>
+            <div class="button-group">
+              <van-button class="button" size="small" plain type="info" @click="handleItem(item)">
+                {{ item.handleType === '20' ? '审批' : '办理' }}
+              </van-button>
+            </div>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-checkbox-group>
+  </div>
+</template>
+<script>
+import {getNodeData} from "../api";
+import {Notify} from "vant";
+
+export default {
+  name: 'TodoListCard',
+  props: {
+    todoList: {},
+    selectedTask: {
+      type: String,
+      default: 'pending'
+    },
+    result: {
+      type: Array,
+      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 {
+      localTodoList: this.todoList,
+      detailsVisible: {}, // 用于跟踪每个项目的详细内容是否可见
+      localResult: this.result,  // 使用 localResult 来绑定 van-checkbox-group
+    }
+  },
+  watch: {
+    // 监听 result 属性的变化
+    result: {
+      handler(newVal) {
+        this.localResult = newVal; // 当 result 变化时，更新 localResult
+      },
+      deep: true
+    },
+    localResult: {
+      handler(newVal) {
+        this.$emit('update:result', newVal); // 将 localResult 的变化传递给父组件
+      },
+      deep: true
+    }
+  },
+  methods: {
+    checkAll() {
+      this.$refs.checkboxGroup.toggleAll(true);
+    },
+    toggleAll() {
+      this.$refs.checkboxGroup.toggleAll(false);
+    },
+    handleDetails(item) {
+      getNodeData(item.procId, item.taskNode).then(res => {
+        const result = res.data;
+        if (result.code === '200') {
+          if (result.data[0] == null || result.data[0].handleType == null) {
+            Notify({type: 'danger', message: '没有为该待办事项指定办理类型'});
+          } else {
+            // 使用更新后的 prop 名称
+            const routeName = result.data[0].handleType === '10'
+                ? this.businessDetailsRouterName
+                : this.processDetailsRouterName;
+
+            this.$router.push({
+              name: routeName,  // 动态使用更新后的路由 name
+              query: {
+                taskNode: item.taskNode,
+                formUrl: item.formUrl,
+                applyId: item.applyId,
+                procId: item.procId,
+                taskId: item.taskId,
+                instanceId: item.procInstanceId,
+                procName: item.procName,
+                appFormUrl: item.appFormUrl,
+                appDetailUrl: item.appDetailUrl,
+              }
+            });
+          }
+        }
+      });
+    },
+    handleItem(item) {
+      getNodeData(item.procId, item.taskNode).then(res => {
+        const result = res.data;
+        if (result.code === '200') {
+          if (result.data[0] == null || result.data[0].handleType == null) {
+            Notify({type: 'danger', message: '没有为该待办事项指定办理类型'});
+          } else {
+            // 使用更新后的 prop 名称
+            const routeName = result.data[0].handleType === '10'
+                ? this.businessApprovalRouterName
+                : this.processApprovalRouterName;
+
+            this.$router.push({
+              name: routeName,  // 动态使用更新后的路由 name
+              query: {
+                taskNode: item.taskNode,
+                formUrl: item.formUrl,
+                applyId: item.applyId,
+                procId: item.procId,
+                taskId: item.taskId,
+                instanceId: item.procInstanceId,
+                procName: item.procName,
+                procKey: result.data[0].procKey,
+                handleButtons: result.data[0].handleButtons,
+                appFormUrl: item.appFormUrl,
+                appDetailUrl: item.appDetailUrl,
+              }
+            });
+          }
+        }
+      });
+    },
+    formatDate(dateString) {
+      const date = new Date(dateString);
+      return date.toLocaleString().replace(/\//g, '-')
+    },
+    toggleDetails(index) {
+      this.$set(this.detailsVisible, index, !this.detailsVisible[index]);
+    },
+  }
+}
+</script>
+<style scoped>
+
+.button-group {
+  display: flex;
+  justify-content: flex-end; /* 使按钮组靠右 */
+  gap: 10px; /* 按钮之间的间距 */
+}
+
+.button {
+  width: 74px;
+  height: 35px;
+  border-radius: 9px;
+  border: 1px solid #0068FF;
+  font-size: 14px;
+}
+
+
+/* 自定义 .van-cell 样式 */
+.custom-cell {
+  padding: 5px 16px;
+}
+
+/* 自定义 .van-cell 样式 */
+.title-status {
+  font-weight: normal; /* 设置文字加粗 */
+}
+
+.value-pending {
+  color: red;
+  flex: 0 0 auto;
+}
+
+.value-completed {
+  color: #07c160;
+  flex: 0 0 auto;
+}
+
+.list-title {
+  color: #969799;
+}
+
+.list-value {
+  color: black;
+}
+
+.custom-cell .van-cell__title {
+  flex: 0 0 auto;
+}
+
+</style>