xps-web-v5/src/views/workflow/ins/components/WfInsList.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteWfInsById, getWfInsByPage } from '@/api/system/wfInsApi'
import { wfInsStatusFilter } from '@/utils/tool'

const state = reactive({
  loading: false,
  dataList: [],
  search: {
    wfDefId: -1,
    keywords: '',
  },
})

// 查询帐号列表
const getWfInsData = async () => {
  state.loading = true
  const { data } = await getWfInsByPage(state.search)
  state.loading = false
  state.dataList = data
  state.loading = false
}

const wfInsTableRef = ref()

// 查询
const onSearch = () => {
  getWfInsData()
}

// 修改
const onWfInsDetail = (row: any) => {
  // activityDefRef.value.showEditModel(row.wfDefId, row.activityDefId)
}

// 删除
const onWfInsDelete = (row: any) => {
  const { ocId, wfInsId, wfInsTitle } = row
  ElMessageBox.confirm(`确认删除「${wfInsTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteWfInsById(ocId, wfInsId)
    ElMessage.success(msg)
    await getWfInsData()
  })
}

defineExpose({
  loadData(wfDefId: number) {
    state.search.wfDefId = wfDefId
    getWfInsData()
  },
})
</script>

<template>
  <div class="container">
    <tool-bar>
      <template #left>
        <span />
      </template>

      <template #right>
        <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
        <el-button type="primary" @click="onSearch">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:search" />
            </el-icon>
          </template>
        </el-button>
      </template>
    </tool-bar>

    <el-table ref="wfInsTableRef" v-loading="state.loading" class="list-table" size="small" :data="state.dataList" border stripe highlight-current-row>
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" align="center" label="序号" width="70" />

      <el-table-column width="150px" label="单位名称" align="center" header-align="center">
        <template #default="scope">
          <span>{{ scope.row.ocName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" header-align="center" label="实例名称">
        <template #default="scope">
          <span>{{ scope.row.wfInsTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" header-align="center" label="开始时间">
        <template #default="scope">
          <span>{{ scope.row.beginTime }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" header-align="center" label="结束时间">
        <template #default="scope">
          <span>{{ scope.row.finishTime }}</span>
        </template>
      </el-table-column>

      <el-table-column width="150px" label="状态" align="center" header-align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="danger">
            {{ wfInsStatusFilter(scope.row.status) }}
          </el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="warning">
            {{ wfInsStatusFilter(scope.row.status) }}
          </el-tag>
          <el-tag v-else type="info">
            {{ wfInsStatusFilter(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template #default="scope">
          <div>
            <el-button type="primary" size="small" plain @click="onWfInsDetail(scope.row)">
              详情
            </el-button>
            <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onWfInsDelete(scope.row)">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>