remuneration/src/views/system/workflow/index.vue

<template>
  <div class="pa-3 white">
    <m-search class="mb-3" :items="searchItems" v-model="searchValue" @search="search"></m-search>
    <m-table
      v-loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      @page-change="paginationChange"
      @sort-change="onSortChange"
    >
      <template #card-tools>
        <m-button type="orange" size="small" icon="el-icon-plus" @click="onAdd">新增</m-button>
      </template>
      <template #actions="{ row }">
        <m-button type="primary" text @click="getDetails(row, 'workflowEditRefs')">编辑</m-button>
        <m-button type="primary" text @click="getDetails(row, 'workflowApprovedRefs')">审批配置</m-button>
        <m-button type="danger" text @click="onDelete(row)">删除</m-button>
      </template>
    </m-table>
    <WorkflowEdit ref="workflowEditRefs" @refresh="onInit"></WorkflowEdit>
    <WorkflowApproved ref="workflowApprovedRefs"></WorkflowApproved>
  </div>
</template>

<script>
import {
  getWorkflowList,
  getWorkflow,
  deleteWorkflow
} from '@/api/workflow'
import WorkflowEdit from './workflowEdit'
import WorkflowApproved from './workflowApproved'
export default {
  name: 'WorkFlow',
  components: {
    WorkflowEdit,
    WorkflowApproved
  },
  data () {
    return {
      searchItems: [
        {
          prop: 'name',
          label: '名称',
          type: 'input',
          options: {
            placeholder: '请输入工作流名称'
          }
        },
        {
          prop: 'status',
          label: '状态',
          type: 'select',
          options: {
            placeholder: '请选择状态',
            items: [
              { label: '启用', value: 0 },
              { label: '禁用', value: 1 }
            ]
          }
        }
      ],
      searchValue: {
        name: null,
        status: null
      },
      headers: [
        { label: '工作流名称', prop: 'name', sortable: 'custom' },
        { label: '功能地址', prop: 'funUrl', sortable: 'custom' },
        { label: '状态', prop: 'status', sortable: 'custom' },
        { label: '版本', prop: 'version', sortable: 'custom' },
        { label: '创建时间', prop: 'createDate', sortable: 'custom' },
        { label: '操作', prop: 'actions' }
      ],
      items: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      orders: [],
      loading: false,
      total: 0
    }
  },
  created () {
    this.onInit()
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { data } = await getWorkflowList({
          page: {
            ...this.pageInfo,
            orders: this.orders
          },
          entity: {
            ...this.searchValue
          }
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onAdd () {
      this.$refs.workflowEditRefs.open()
    },
    search () {
      this.pageInfo.current = 1
      this.onInit()
    },
    async getDetails (row, ref) {
      this.loading = true
      try {
        const { data } = await getWorkflow({ workFlowTmplateId: row.workFlowTmplateId })
        this.$refs[ref].open(data)
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onDelete (row) {
      this.$confirm('确定删除吗？', '提示').then(async () => {
        try {
          await deleteWorkflow({ workFlowTmplateId: row.workFlowTmplateId })
          this.$message.success('删除成功')
          this.onInit()
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(_ => {})
    },
    paginationChange (page) {
      this.searchValue.page = page
      this.search()
    },
    onSortChange (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>