init
This commit is contained in:
clay
114
src/views/workflow/approve/InitiateProcess.vue
Normal file
114
src/views/workflow/approve/InitiateProcess.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="initiate_process">
|
||||
<div v-if="!loading" style="min-width:30%">
|
||||
<!--渲染表单-->
|
||||
<form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"
|
||||
v-model:value="formData" mode="E"/>
|
||||
</div>
|
||||
<div v-if="!loading" id="approveTree"
|
||||
style="display: flex;justify-content: center;flex-direction: column;min-width:60%">
|
||||
<span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
|
||||
<process-tree ref="processTree" mode="view" id-name="approveTree"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getInitiateInfo} from "@/api/workflow/process-definition.js";
|
||||
import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
|
||||
import FormRender from '@/views/workflow/form/FormRender.vue'
|
||||
import {useProcessStore} from '@/stores/processStore.js'
|
||||
const processStore = useProcessStore()
|
||||
import {defineProps,defineExpose} from 'vue'
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const scale = ref({})
|
||||
const initiateForm = ref()
|
||||
const processTree = ref()
|
||||
const formData = ref({})
|
||||
const loading = ref({})
|
||||
const processDefinition = ref({
|
||||
processDefinitionKey: "",
|
||||
deploymentName: "",
|
||||
logo: {},
|
||||
formItems: [],
|
||||
process: {},
|
||||
remark: ""
|
||||
})
|
||||
|
||||
const loadProcessDefinitionInfo = (processDefinitionKey) => {
|
||||
loading.value = true
|
||||
getInitiateInfo(processDefinitionKey).then(res => {
|
||||
processDefinition.value = res.data;
|
||||
//构建表单及校验规则
|
||||
processStore.setDesign(res.data)
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
processTree.value.init()
|
||||
})
|
||||
}).catch(err => {
|
||||
ElMessage.error(err);
|
||||
});
|
||||
}
|
||||
const validate = () => {
|
||||
let formValidate
|
||||
initiateForm.value().validate(formCall => {
|
||||
formValidate = formCall;
|
||||
})
|
||||
let proValidate = processTree.value().validate()
|
||||
if (!formValidate) {
|
||||
return false;
|
||||
}
|
||||
return (Array.isArray(proValidate) && proValidate.length === 0);
|
||||
}
|
||||
|
||||
|
||||
loadProcessDefinitionInfo(props.code)
|
||||
|
||||
defineExpose({
|
||||
formData,
|
||||
validate
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 1545px) {
|
||||
.initiate_process {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.initiate_process {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.process-form {
|
||||
:deep .el-form-item__label {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
:deep .el-divider--horizontal {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep .el-divider__text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep .node-footer {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
169
src/views/workflow/approve/index.vue
Normal file
169
src/views/workflow/approve/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<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 = () => {
|
||||
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
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
//切换每页显示条数
|
||||
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>
|
||||
Reference in New Issue
Block a user