2024-02-04 17:11:25 +08:00

128 lines
4.8 KiB
Vue

<template>
<div class="edit-popup">
<popup ref="popupRef" :async="true" width="60vw" @confirm="handleSubmit" @close="handleClose" :showFootBtn="false">
<el-card>
<el-descriptions :column="3" title="审批详情" border>
<el-descriptions-item label="组织名称" label-align="left" align="left" label-class-name="my-label">
formData.org_name
</el-descriptions-item>
<el-descriptions-item label="部门名称" label-align="left" align="left" label-class-name="my-label">
formData.dept_name</el-descriptions-item>
<el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
<el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
<el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
<el-descriptions-item label="项目名称" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
<el-descriptions-item label="审核状态" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
<el-descriptions-item label="当前审核人" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
<el-descriptions-item label="抄送人" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
<el-descriptions-item label="审批流程" label-align="left" align="left" label-class-name="my-label">
formData.name
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="1" border>
<el-descriptions-item label="审批流程" label-align="left" align="left">
<el-steps :space="50" :active="1" simple :align-center="true">
<el-step title="Step 1" :icon="Avatar" />
<el-step title="Step 2" :icon="Clock" />
<el-step title="Step 3" :icon="Clock" />
<el-step title="Step 3" :icon="Clock" />
<el-step title="Step 3" :icon="Clock" />
</el-steps>
</el-descriptions-item>
<el-descriptions-item label="审批记录" label-align="left" align="left">
<el-steps direction="vertical" :active="1" :align-center="true" :space="50"
style="margin-top: 20px">
<el-step title="Step 1" />
<el-step title="Step 2" />
<el-step title="Step 3" />
</el-steps>
</el-descriptions-item>
<el-descriptions-item label="操作" label-align="left" align="left">
<el-button type="primary" @click="handleSubmit">
通过
</el-button>
<el-button>
通过
</el-button>
</el-descriptions-item>
</el-descriptions>
</el-card>
</popup>
</div>
</template>
<script lang="ts" setup name="projectEdit">
import Popup from '@/components/popup/index.vue'
import { Avatar, Clock } from '@element-plus/icons-vue'
const emit = defineEmits(['success', 'close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
// 表单数据
const formData = reactive({
})
// 获取详情
const setFormData = async (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
// 提交按钮
const handleSubmit = async () => {
popupRef.value?.close()
emit('success')
}
//打开弹窗
const open = () => {
popupRef.value?.open()
}
// 关闭回调
const handleClose = () => {
emit('close')
}
defineExpose({
open,
setFormData,
})
</script>
<style lang="scss">
.el-step.is-simple .el-step__icon {
margin-top: 15px;
}
</style>