<template>
|
<div>
|
<el-dialog
|
v-model="dialogFormVisible"
|
:title="operationType === 'add' ? '新增审批流程' : '编辑审批流程'"
|
width="700px"
|
@close="closeDia"
|
>
|
<el-form :model="{ activities }" ref="formRef" label-position="top">
|
<el-timeline style="max-width: 600px">
|
<el-timeline-item
|
v-for="(activity, index) in activities"
|
:key="index"
|
:type="activity.current ? 'primary' : ''"
|
:hollow="activity.current"
|
:timestamp="activity.timestamp"
|
>
|
<el-card>
|
<span style="font-size: 18px;font-weight: 700">{{activity.content}}</span>
|
<div style="margin: 10px 0">
|
<span style="font-size: 16px;font-weight: 600">审批人：{{activity.people}}</span>
|
</div>
|
<div>
|
<span style="margin-bottom: 8px;display: inline-block;font-size: 16px;font-weight: 600">审批意见：</span>
|
<el-form-item
|
v-if="activity.current"
|
:prop="'activities.' + index + '.value'"
|
:rules="[{ required: true, message: '审批意见不能为空', trigger: 'blur' }]"
|
>
|
<el-input v-model="activity.value" clearable type="textarea" :disabled="operationType === 'view'"></el-input>
|
</el-form-item>
|
<el-form-item v-else>
|
<el-input v-model="activity.value" clearable type="textarea" disabled></el-input>
|
</el-form-item>
|
</div>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</el-form>
|
<template #footer v-if="operationType === 'approval'">
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {getCurrentInstance, ref} from "vue";
|
import {approveProcessDetails} from "../../../../api/collaborativeApproval/approvalProcess.js";
|
const emit = defineEmits(['close'])
|
const { proxy } = getCurrentInstance()
|
|
const dialogFormVisible = ref(false);
|
const operationType = ref('')
|
const activities = ref([
|
{
|
content: '节点1',
|
timestamp: '',
|
type: 'primary',
|
hollow: true,
|
people: 'admin',
|
value: ''
|
},
|
{
|
content: '节点2',
|
timestamp: '',
|
type: '',
|
hollow: false,
|
current: true,
|
people: 'admin',
|
value: ''
|
},
|
])
|
const formRef = ref(null);
|
|
// 打开弹框
|
const openDialog = (type, row) => {
|
operationType.value = type;
|
dialogFormVisible.value = true;
|
approveProcessDetails({id: row.approveId}).then((res) => {
|
console.log(res)
|
})
|
}
|
// 提交审批
|
const submitForm = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
// 校验通过后的逻辑
|
}
|
})
|
}
|
// 关闭弹框
|
const closeDia = () => {
|
proxy.resetForm("formRef");
|
dialogFormVisible.value = false;
|
emit('close')
|
};
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped>
|
.el-timeline {
|
padding-left: 10px;
|
}
|
</style>
|
