mosr-web/src/views/workflow/approve/index.vue

<template>
  <div>
    <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getList">
      <el-form-item label="部署名称" prop="deploymentName">
        <el-input v-model="queryParams.deploymentName" placeholder="请输入部署名称" clearable></el-input>
      </el-form-item>
      <!--    <el-form-item label="状态" prop="enable">-->
      <!--      <el-select v-model="queryParams.enable" placeholder="请选择状态" clearable  filterable>-->
      <!--        <el-option-->
      <!--            v-for="dict in cacheStore.getDict('regular_enable')"-->
      <!--            :key="dict.value"-->
      <!--            :label="dict.label"-->
      <!--            :value="dict.value"-->
      <!--        />-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
        <el-button type="primary" @click="handleReset" :icon="Refresh" plain>重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table
          :data="list"
          row-key="id"
          :lazy="true"
          ref="singleTable"
          v-loading="loading"
          v-tabh
      >
        <el-table-column type="selection" width="30"/>
        <el-table-column label="序号" type="index" width="60" align="center"/>
        <el-table-column prop="deploymentName" label="部署名称" align="center"/>
        <el-table-column prop="version" label="版本" align="center">
          <template #default="scope">
            <el-tag type="success">{{ scope.row.version }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注说明" align="center"/>
        <el-table-column prop="updateTime" label="更新时间" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" size="mini" v-perm="['rapid:regular:edit']"
                       @click="handleApprove(scope.row)"  link>发起流程
            </el-button>
            <popover-delete :name="scope.row.deploymentName" :type="'流程'" :perm="['rapid:regular:del']"
                            @delete="handleDelete(scope.row.id)"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
            :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
    <el-dialog title="发起审批" v-model="openItemDl" :close-on-click-modal="true" width="1200px">
      <initiate-process ref="processInstance" :code="selectItem.processDefinitionKey"
                        v-if="openItemDl"></initiate-process>
      <span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="openItemDl = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="submitForm">提 交</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script setup>
import {getProcessDefinitionList} from "@/api/workflow/process-definition.js";
import {startProcessInstance} from "@/api/workflow/process-instance.js";
import InitiateProcess from './InitiateProcess.vue'
import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import Paging from "@/components/pagination/index.vue";

//查询参数
const queryParams = reactive({
  deploymentName: '',
  // startTime: null,
  // endTime: null,
  // state: 1,
})

//页面信息
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
})
const openItemDl = ref(false)
const selectItem = ref({})
const loading = ref(true)
const list = ref([])
const queryForm = ref()
const total = ref()
const singleTable = ref()
const processInstance = ref()



//重置搜索
const handleReset = () => {
  queryForm.value.resetFields()
  getList()
}

const submitForm = () => {
  // todo 重新编写表单数据, 不适用当前的动态表单
  let formData = processInstance.value.formData
  let paramsData = {
    processDefinitionId: selectItem.value.processDefinitionId,
    formData: JSON.stringify(formData),
    optionalUser: {}
  }
  // let valid = processInstance.value.validate(() => {
  // })
  console.log(paramsData)
  if (true) {
    startProcessInstance(paramsData).then(res => {
      if (res.code === 1000) {
        openItemDl.value = false
        ElMessage.success(res.msg)
      } else {
        ElMessage.error(res.msg)
      }
    })
  } else {
    ElMessage.error("请完善表单😥")
  }
}


//获取数据
const handleApprove = async (node) => {
  selectItem.value = node
  openItemDl.value = true
}
const getList = async () => {
  let params = {
    ...queryParams,
    ...pageInfo
  }
  loading.value = true
  getProcessDefinitionList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
      total.value = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
    loading.value = false
  }).catch(err => {
    loading.value = false;
  })
}
//切换每页显示条数
const handleSizeChange = async (val) => {
  pageInfo.value.pageSize = val
  await getList()
}

//点击页码进行分页功能
const handleCurrentChange = async (val) => {
  pageInfo.value.pageNum = val
  await getList()
}

getList()


</script>

<style scoped>

</style>