Blame view

src/views/oa/newOaWorkflowList.vue 3.29 KB
9d019fa6   wuxw   测试OA相关流程
1
2
3
4
5
6
7
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
  <template>
    <div class="new-oa-workflow-container">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="menu-wrapper bg-white">
            <ul class="menu-list">
              <li v-if="hasPrivilege('502023041839740294')" :class="{ 'active': activeTab === 'newOaWorkflowPool' }"
                @click="switchTab('newOaWorkflowPool')">
                {{ $t('newOaWorkflow.processWorkOrder') }}
              </li>
              <li :class="{ 'active': activeTab === 'newOaWorkflowForm' }" @click="switchTab('newOaWorkflowForm')">
                {{ $t('newOaWorkflow.draftProcess') }}
              </li>
              <li :class="{ 'active': activeTab === 'newOaWorkflowUndo' }" @click="switchTab('newOaWorkflowUndo')">
                {{ $t('newOaWorkflow.processTodo') }}
              </li>
              <li :class="{ 'active': activeTab === 'newOaWorkflowFinish' }" @click="switchTab('newOaWorkflowFinish')">
                {{ $t('newOaWorkflow.processDone') }}
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="content-wrapper">
            <new-oa-workflow-pool v-show="activeTab === 'newOaWorkflowPool'" ref="newOaWorkflowPool" />
            <new-oa-workflow-form v-if="activeTab === 'newOaWorkflowForm'" ref="newOaWorkflowForm" />
            <new-oa-workflow-undo v-show="activeTab === 'newOaWorkflowUndo'" ref="newOaWorkflowUndo" />
            <new-oa-workflow-finish v-show="activeTab === 'newOaWorkflowFinish'" ref="newOaWorkflowFinish" />
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import NewOaWorkflowPool from '@/components/oa/newOaWorkflowPool'
  import NewOaWorkflowForm from '@/components/oa/newOaWorkflowForm'
  import NewOaWorkflowUndo from '@/components/oa/newOaWorkflowUndo'
  import NewOaWorkflowFinish from '@/components/oa/newOaWorkflowFinish'
  
  export default {
    name: 'NewOaWorkflowList',
    components: {
      NewOaWorkflowPool,
      NewOaWorkflowForm,
      NewOaWorkflowUndo,
      NewOaWorkflowFinish
    },
    data() {
      return {
        activeTab: '',
        flowId: this.$route.query.flowId || ''
      }
    },
    created() {
      this.initActiveTab()
    },
    methods: {
      initActiveTab() {
        const switchValue = this.$route.query.switchValue
        if (switchValue) {
          this.switchTab(switchValue)
          return
        }
        if (this.hasPrivilege('502023041839740294')) {
          this.switchTab('newOaWorkflowPool')
        } else {
          this.switchTab('newOaWorkflowForm')
        }
      },
      switchTab(tab) {
        if (this.activeTab === tab) return
        this.activeTab = tab
        setTimeout(() => {
          this.$refs[tab].open({ flowId: this.flowId })
        }, 500)
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .new-oa-workflow-container {
    padding: 20px;
    height: 100%;
  
    .menu-wrapper {
      border-radius: 4px;
      padding: 10px 0;
      height: 100%;
  
      .menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
  
        li {
          padding: 12px 20px;
          cursor: pointer;
          transition: all 0.3s;
          border-left: 3px solid transparent;
  
          &:hover {
            background-color: #f5f7fa;
          }
  
          &.active {
            background-color: #ecf5ff;
            border-left: 3px solid #409eff;
            color: #409eff;
          }
        }
      }
    }
  
    .content-wrapper {
  
      height: 100%;
    }
  }
  </style>