cmc-oa/oa-ui-app/pages/work/index.vue

<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <!-- <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot> -->

    <!-- 宫格组件 -->
    <uni-section title="常用操作" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item>
          <view class="grid-item-box" @click="openSendFlow">
            <u-image :fade="false" src="@/static/images/work/sendFlow.png" width="40px" height="40px"></u-image>
            <text class="text">发起流程</text>
          </view>
        </uni-grid-item>
        <!-- <uni-grid-item>
          <view class="grid-item-box" @click="openBorrow">
            <u-image :fade="false" src="@/static/images/work/borrow.png" width="40px" height="40px"></u-image>
            <text class="text">借款管理</text>
          </view>
        </uni-grid-item> -->
      </uni-grid>
      <!-- <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">用户管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="staff-filled" size="30"></uni-icons>
            <text class="text">角色管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">菜单管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="settings-filled" size="30"></uni-icons>
            <text class="text">部门管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="heart-filled" size="30"></uni-icons>
            <text class="text">岗位管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="bars" size="30"></uni-icons>
            <text class="text">字典管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="gear-filled" size="30"></uni-icons>
            <text class="text">参数设置</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="chat-filled" size="30"></uni-icons>
            <text class="text">通知公告</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="wallet-filled" size="30"></uni-icons>
            <text class="text">日志管理</text>
          </view>
        </uni-grid-item>
      </uni-grid> -->
    </view>

    <uv-popup ref="popup" mode="bottom">
      <view class="bottom-popup">
        <view v-for="item, index in sendFlowList" :key="index">
          <u-button @click="sendFlow(item)">{{ item.name }}</u-button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import { listDefinition } from "@/api/flowable/definition";
import { Snowflake } from '@/utils/snowFlake.js';
import { getNextFlowNodeByStart, todoList } from "@/api/flowable/todo";
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      data: [{
        image: '/static/images/banner/banner01.jpg'
      },
      {
        image: '/static/images/banner/banner02.jpg'
      },
      {
        image: '/static/images/banner/banner03.jpg'
      }
      ],
      flowList: ['借款审批', '用车审批', '设备审批', '工作填报'],
      sendFlowList: [],
      // 查询参数
      queryProcessParams: {
        pageNum: 1,
        pageSize: 9999,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null
      },
      definitionList: [],
      processTotal: 0,
      processLoading: true
    }
  },
  created() {
    this.getDefinitionList();
  },
  methods: {
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },
    changeGrid(e) {
      this.$modal.showToast('模块建设中~')
    },
    openSendFlow() {
      this.$refs.popup.open();
    },
    openBorrow() {
      uni.navigateTo({
        url: '/pages/oa/borrow/borrowList'
      })
    },
    sendFlow(row) {
      let formId = new Snowflake(1n, 1n, 0n).nextId().toString();
      getNextFlowNodeByStart({ deploymentId: row.deploymentId, variables: { formId: formId } }).then(res => {
        let data = res.data;
        const variables = {};
        const formData = {};
        formData.disabled = true;
        formData.formBtns = false;
        formData.formId = formId
        if (row.id) {
          variables.variables = formData;
          definitionStart(row.id, JSON.stringify(variables)).then(res => {
            this.$modal.msgSuccess(res.msg);
            let procInstanceId = res.data;
            todoList({
              pageNum: 1,
              pageSize: 99999999, processInsId: procInstanceId
            }).then(toDoRes => {
              let records = toDoRes.data.records;
              if (records.length == 1) {
                records = records[0]
              }
              const query = {
                procInsId: records.procInsId,
                executionId: records.executionId,
                deployId: records.deployId,
                taskId: records.taskId,
                taskName: records.taskName,
                startUserName: records.startUserName + '-' + records.startDeptName,
                formId: formData.formId,
                procDefName: records.procDefName
              }
              const encodedParams = encodeURIComponent(JSON.stringify(query));
              uni.navigateTo({
                url: `/pages/message/apply/detail?params=${encodedParams}`
              })
              this.$refs.popup.close();
            })
          })
        }
      })
    },
    getDefinitionList() {
      listDefinition(this.queryProcessParams).then(response => {
        this.definitionList = response.data.records;
        this.processTotal = response.data.total;
        this.processLoading = false;
        let list = []
        for (let i of this.definitionList) {
          if (this.flowList.includes(i.name)) {
            list.push(i)
          }
        }
        this.sendFlowList = list;
      });
    },
  }
}
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
  ;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}

.bottom-popup {
  max-height: 50vh;
  margin-bottom: 65px;
  padding: 10px;
  text-align: center;
}
</style>