cd-work-flow-web/src/views/dashboard/IndexOa.vue

<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
        <a-card size="small" title="OA工作台" :bordered="false" >
          <a-row :gutter="24">
            <a-col :sm="24" :md="12" :xl="2" v-for="(item,index)  in activeKeyAll" :key="index">
              <a-card size="small" :bordered="false" >
                <a-row :gutter="24">
                  <a-col :sm="24" :md="24" :xl="24" style="margin-bottom:24px;text-align:center">
                    <!-- <a-avatar :size="64"
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    />-->
                    <a @click.prevent="aClick(item)" >
                      <a-avatar
                        shape="square"
                        :size="64"
                        :src="item.iconAddress"
                      />
                    </a>
                  </a-col>
                  <a-col :sm="24" :md="24" :xl="24" style="margin-bottom:24px;text-align:center">
                    <h4>{{item.name}}</h4>
                  </a-col>
                </a-row>
                <!-- <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture-card"
                  :file-list="fileList"
                  :disabled="true"
                >
                </a-upload>-->
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    
    <!--流程表单-->
    <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="80%">
      <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent"
                 :processData="lcModa.processData" :isNew = "lcModa.isNew"
                 @afterSubmit="afterSub" @close="lcModa.visible=false,lcModa.disabled = false"></component>
    </a-modal>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'

export default {
  mixins:[activitiMixin],
  name: 'IndexOa',
  data() {
    return {
      loading: true,
      visitFields: ['ip', 'visit'],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      activeKeyAll:[],
      lcModa: {
        title:'',
        disabled:false,
        visible:false,
        formComponent : null,
        isNew : false
      },
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.getActiveKeyAll();
  },
  methods: {
    //获取OA工作流List
    getActiveKeyAll() {
      this.postFormAction("/activiti_process/listData", { status: 1, roles: true })
        .then(res => {
          this.activeKeyAll = []
          if (res.success) {
            var result = res.result || []
            if (result.length > 0) {
              // this.processDataMap = _.groupBy(result, 'categoryId')
              // for (const categoryId in this.processDataMap) {
              //   this.activeKeyAll.push(categoryId)
              // }
              // this.activeKey = this.activeKeyAll
              this.activeKeyAll=result;
            } 
            this.processModalVisible = true
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => (this.addApplyLoading = false))
    },
    //OA图标点击事件
    aClick(v) {
      console.log(v)
        // this.$refs.modal.add("1")
        if (!v.routeName) {
          this.$message.warning(
            "该流程信息未配置表单，请联系开发人员！"
          );
          return;
        }
        if(v.routeName.indexOf("外部表单")!=-1){
          alert("调用其他项目页面")
        }else if(v.routeName.indexOf("自定义")!=-1){
          this.lcModa.disabled = false;
          let com={component:() => import(`@/views/activiti/form/demoForm2`)}
          this.lcModa.formComponent = com.component;
          this.lcModa.title = '发起流程：'+v.name;
          this.lcModa.isNew = true;
          this.lcModa.processData = v;
          this.lcModa.visible = true;
        }else{
          this.lcModa.disabled = false;
          this.lcModa.formComponent = this.getFormComponent(v.routeName).component;
          this.lcModa.title = '发起流程：'+v.name;
          this.lcModa.isNew = true;
          this.lcModa.processData = v;
          this.lcModa.visible = true;
        }
        console.log("发起",v)
    },
    afterSub(formData){
          this.lcModa.visible = false;
          // this.loadData();
      },
  }
}
</script>