114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-dialog class="steps-dialog" title="审核" v-model="dialogForm" :close-on-click-modal="false" @close="dialogForm = false" width="420px">
|
||
|
|
<el-form :model="formData" ref="formRef" :rules="rules" label-width="120px">
|
||
|
|
<el-form-item label="是否通过" prop="auditStatus">
|
||
|
|
<el-radio-group v-model="formData.auditStatus">
|
||
|
|
<el-radio label="1">通过</el-radio>
|
||
|
|
<el-radio label="0">不通过</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="驳回原因" prop="auditRemark" v-if="formData.auditStatus === '0'">
|
||
|
|
<el-input v-model="formData.auditRemark" type="textarea" placeholder="请输入驳回原因" :autosize="{ minRows: 2, maxRows: 4 }" />
|
||
|
|
</el-form-item>
|
||
|
|
<div class="flex just-center">
|
||
|
|
<el-button @click="dialogForm = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, defineExpose } from 'vue';
|
||
|
|
const dialogForm = ref(false);
|
||
|
|
const formData = ref({})
|
||
|
|
const rules = ref({
|
||
|
|
auditStatus: [{ required: true, message: '请选择是否通过', trigger: 'blur' }],
|
||
|
|
auditRemark: [{ required: true, message: '请输入驳回原因', trigger: 'blur' }],
|
||
|
|
})
|
||
|
|
const init = (row) => {
|
||
|
|
formData.value = row
|
||
|
|
dialogForm.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
init
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.steps-body {
|
||
|
|
height: 260px;
|
||
|
|
padding: 6px 10px 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-dialog__header) {
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px 20px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-dialog__title) {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-dialog__body) {
|
||
|
|
padding: 0 20px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step__title) {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
line-height: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step__description) {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #9AA8B6;
|
||
|
|
line-height: 20px;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step__line) {
|
||
|
|
left: 8px;
|
||
|
|
background-color: transparent;
|
||
|
|
border-left: 1px dashed #dadada;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step.is-vertical .el-step__head) {
|
||
|
|
width: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step__icon) {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step__head.is-process .el-step__icon),
|
||
|
|
:deep(.steps-dialog .el-step__head.is-process .el-step__icon.is-text) {
|
||
|
|
background: #2e6bff;
|
||
|
|
border: none;
|
||
|
|
box-shadow: 0 0 0 5px rgba(46, 107, 255, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step.is-wait .el-step__icon),
|
||
|
|
:deep(.steps-dialog .el-step.is-finish .el-step__icon) {
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #dadada;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.steps-dialog .el-step__icon-inner) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
::v-deep .is-finish .el-step__icon{
|
||
|
|
background: #86b6f1;
|
||
|
|
}
|
||
|
|
</style>
|