admin-ui/src/views/flow/flowModel/monitor/index.vue

<template>
  <div class="flow-flowDemo-container">
    <el-card shadow="hover">
      <div class="flow-flowDemo-search mb15">
        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
          <el-row>
            <el-col :span="8" class="colBlock">
              <el-form-item label="标题" prop="title">
                <el-input
                    v-model="tableData.param.title"
                    placeholder="请输入标题"
                    clearable
                    @keyup.enter.native="monitorList"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="colBlock">
              <el-form-item>
                <el-button type="primary"   @click="monitorList"><el-icon><ele-Search /></el-icon>搜索</el-button>
                <el-button  @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
                type="danger"
                :disabled="multiple"
                @click="handleDelete(null)"
                v-auth="'api/v1/flow/flowModel/stop'"
            ><el-icon><ele-RemoveFilled/></el-icon>终止</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="运行ID" align="center" prop="id"
                         min-width="150px"
        />
        <el-table-column label="流程名称" align="center" prop="flowInfo.name"
                         min-width="150px"
        />
        <el-table-column label="流程类型" align="center" prop="formTable"
                         min-width="150px"
        />
        <el-table-column label="业务名称" align="center" prop="runName"
                         min-width="150px"
        />
        <el-table-column label="业务ID" align="center" prop="formId"
                         min-width="150px"
        />
        <el-table-column label="流程执行时间" align="center" prop="dateline"
                         min-width="150px"
        />
        <el-table-column label="操作" align="center" class-name="small-padding" min-width="200px" fixed="right">
          <template #default="scope">
            <el-button
                type="primary"
                link
                @click="handleDelete(scope.row)"
                v-auth="'api/v1/flow/flowModel/stopv'"
            ><el-icon><ele-RemoveFilled /></el-icon>终止</el-button>
            <el-button
                type="primary"
                link
                @click="handleProxy(scope.row)"
                v-auth="'api/v1/flow/flowModel/proxy'"
            ><el-icon><ele-User /></el-icon>代审</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="tableData.total>0"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="monitorList"
      />
    </el-card>
    <checkFlow ref="ckFlowRef" @getList="monitorList"></checkFlow>
  </div>
</template>
<script setup lang="ts">
import checkFlow from "/@/components/gFlow/checkFlow.vue"
import {toRefs, reactive, onMounted, ref,  computed,getCurrentInstance,toRaw} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import {getMonitor, stopRun} from "/@/api/flow/flowModel";
import {MonitorTableColumnsState,MonitorTableColumns} from "/@/views/flow/flowModel/monitor/component/model";

const {proxy} = <any>getCurrentInstance()
const loading = ref(false)
const queryRef = ref()
// 是否显示所有搜索选项
const showAll =  ref(false)
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple =ref(true)
const ckFlowRef = ref()
const word = computed(()=>{
  if(showAll.value === false) {
    //对文字进行处理
    return "展开搜索";
  } else {
    return "收起搜索";
  }
})
const state = reactive<MonitorTableColumnsState>({
  ids:[],
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
      title: undefined,
      status: undefined,
      dateRange: []
    },
  },
});
const { tableData } = toRefs(state);
// 页面加载时
onMounted(() => {
  initTableData();
});
// 初始化表格数据
const initTableData = () => {
  monitorList()
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  monitorList()
};
// 获取列表数据
const monitorList = ()=>{
  loading.value = true
  getMonitor(state.tableData.param).then((res:any)=>{
    let list = res.list??[];
    list.map((item:any)=>{
      item.createdBy = item.createdUser?.userNickname
    })
    state.tableData.data = list;
    state.tableData.total = res.total;
    loading.value = false
  })
};
const toggleSearch = () => {
  showAll.value = !showAll.value;
}

// 多选框选中数据
const handleSelectionChange = (selection:Array<MonitorTableColumns>) => {
  state.ids = selection.map(item => item.id)
  single.value = selection.length!=1
  multiple.value = !selection.length
}
const handleDelete = (row: MonitorTableColumns|null) => {
  let msg = '是否要终止流程【此操作不可恢复】?';
  let id:number[] = [] ;
  if(row){
    id = [row.id]
  }else{
    id = state.ids
  }
  if(id.length===0){
    ElMessage.error('请选择要终止的流程。');
    return
  }
  ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        stopRun(id).then(()=>{
          ElMessage.success('终止成功');
          monitorList();
        })
      })
      .catch(() => {});
}
const handleProxy =(row: MonitorTableColumns)=>{
  row.actionBtn = {
    api: "wfCheck",
    title: "代审",
    type: "link",
    wfFid: row.formId,
    wfModelType: row.flowInfo.flowType,
    wfStatusField: row.formStatus,
    wfTitle: row.formTitle,
    wfType: row.formTable,
    isProxy:true
  }
  ckFlowRef.value.handleStartFlow(row)
}
</script>
<style lang="scss" scoped>
.colBlock {
  display: block;
}
.colNone {
  display: none;
}
.ml-2{margin: 3px;}
</style>