wuye / webui

Blame view

src/views/oa/newOaWorkflowManageList.vue 2.46 KB
Edit Raw Normal View History
d4a6b78f   wuxw   OA 中考勤功能开发完成 
1
2
3
4
5
 
  <template>
    <div class="new-oa-workflow-manage-container">
      <el-card class="box-card">
        <div v-if="newOaWorkflowManageInfo.newOaWorkflows && newOaWorkflowManageInfo.newOaWorkflows.length > 0">
          <el-row :gutter="20">
9d019fa6   wuxw   测试OA相关流程 
6
7
 
            <el-col v-for="(item, index) in newOaWorkflowManageInfo.newOaWorkflows" :key="index" :span="4"
              class="text-center workflow-item" @click.native="newFlow(item)">
d4a6b78f   wuxw   OA 中考勤功能开发完成 
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
              <div>
                <img src="/img/flow.png" width="80px" />
              </div>
              <div class="margin-top">
                <span style="color: #333333;">{{ item.flowName }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-else class="empty-tip">
          <span>{{ $t('newOaWorkflowManage.noPublishedFlow') }}</span>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { queryOaWorkflow } from '@/api/oa/newOaWorkflowManageApi'
  
  export default {
    name: 'NewOaWorkflowManageList',
    data() {
      return {
        newOaWorkflowManageInfo: {
          newOaWorkflows: [],
          conditions: {
            state: 'C',
            flowType: '1001',
            page: 1,
            row: 100
          }
        }
      }
    },
    created() {
      this._listNewOaWorkflows()
    },
    methods: {
      async _listNewOaWorkflows() {
        try {
          const { data } = await queryOaWorkflow(this.newOaWorkflowManageInfo.conditions)
          this.newOaWorkflowManageInfo.newOaWorkflows = data
        } catch (error) {
          console.error('Failed to fetch workflows:', error)
        }
      },
      async newFlow(flow) {
        try {
          const { data } = await queryOaWorkflow({
            page: 1,
            row: 1,
            flowId: flow.flowId,
            state: 'C'
          })
9d019fa6   wuxw   测试OA相关流程 
62
d4a6b78f   wuxw   OA 中考勤功能开发完成 
63
64
65
66
 
          if (data.length < 1) {
            this.$message.error(this.$t('newOaWorkflowManage.flowNotDeployed'))
            return
          }
9d019fa6   wuxw   测试OA相关流程 
67
d4a6b78f   wuxw   OA 中考勤功能开发完成 
68
 
          this.$router.push({
9d019fa6   wuxw   测试OA相关流程 
69
 
            path: '/views/oa/newOaWorkflow',
d4a6b78f   wuxw   OA 中考勤功能开发完成 
70
71
72
73
74
75
76
77
78
79
80
81
82
 
            query: { flowId: flow.flowId }
          })
        } catch (error) {
          console.error('Failed to check flow deployment:', error)
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .new-oa-workflow-manage-container {
    padding: 20px;
9d019fa6   wuxw   测试OA相关流程 
83
d4a6b78f   wuxw   OA 中考勤功能开发完成 
84
85
86
 
    .box-card {
      min-height: 400px;
    }
9d019fa6   wuxw   测试OA相关流程 
87
d4a6b78f   wuxw   OA 中考勤功能开发完成 
88
89
90
91
 
    .workflow-item {
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s;
9d019fa6   wuxw   测试OA相关流程 
92
d4a6b78f   wuxw   OA 中考勤功能开发完成 
93
94
95
96
 
      &:hover {
        transform: translateY(-5px);
      }
    }
9d019fa6   wuxw   测试OA相关流程 
97
d4a6b78f   wuxw   OA 中考勤功能开发完成 
98
99
100
101
102
 
    .empty-tip {
      padding: 20px;
      text-align: center;
      color: #909399;
    }
9d019fa6   wuxw   测试OA相关流程 
103
d4a6b78f   wuxw   OA 中考勤功能开发完成 
104
105
106
107
108
 
    .margin-top {
      margin-top: 10px;
    }
  }
  </style>