7 changed files with 487 additions and 57 deletions
@ -0,0 +1,228 @@
|
||||
<template> |
||||
<el-dialog v-model="visible" width="50vw" top="4vh" class="dialog-header-nopadding" align-center |
||||
style="--el-dialog-padding-primary: 10px"> |
||||
<template #header="" style="display: flex;align-items: center;justify-content: space-between;"> |
||||
<div class="dialog-header"> |
||||
<span class="dialog-title">不满意信件申诉驳回</span> |
||||
</div> |
||||
</template> |
||||
<div class="dialog-body"> |
||||
<el-form ref="formRef" :model="form" :rules="rules" style="width: 100%"> |
||||
<el-form-item label="信件信息" prop="appealReason" required |
||||
style="display: flex;flex-direction: column;justify-content: start;"> |
||||
|
||||
<template #label> |
||||
<span class="main-label" style="text-align: left; width: 100%">不满意信件申诉驳回理由</span> |
||||
</template> |
||||
<el-row style="width: 100%"> |
||||
<el-input type="textarea" v-model="form.appealReason" placeholder="请输入不满意信件申诉驳回理由" |
||||
:autosize="{ minRows: 4, maxRows: 10 }" resize="none" /> |
||||
</el-row> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div style="height: 20vh;"></div> |
||||
<div style="display: flex;justify-content: flex-end;"> |
||||
<el-button type="primary" @click="handleSubmit">提交</el-button> |
||||
</div> |
||||
</div> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, defineProps, watch, reactive } from 'vue' |
||||
import type { FormInstance, FormRules } from "element-plus"; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { overrule } from '@/api/work/appeal'; |
||||
const props = defineProps({ |
||||
show: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
mailId: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}) |
||||
const emits = defineEmits(["update:show", "update"]); |
||||
const visible = ref(props.show) |
||||
watch(visible, (val) => { |
||||
emits("update:show", val); |
||||
}); |
||||
watch( |
||||
() => props.show, |
||||
(val) => { |
||||
visible.value = val; |
||||
} |
||||
); |
||||
interface FormAppeal { |
||||
appealReason: string; |
||||
} |
||||
const form = ref({ |
||||
mailId: '', |
||||
appealReason: '' |
||||
}) |
||||
const formRef = ref<FormInstance>(); |
||||
const rules = reactive<FormRules<FormAppeal>>({ |
||||
appealReason: [ |
||||
{ required: true, message: '请输入驳回理由', trigger: 'blur' }, |
||||
{ min: 10, message: '驳回理由不能少于10个字', trigger: 'blur' }, |
||||
{ max: 1000, message: '驳回理由不能多于1000个字', trigger: 'blur' } |
||||
] |
||||
}) |
||||
|
||||
const handleSubmit = async () => { |
||||
if (!formRef.value) return |
||||
await formRef.value.validate((valid, fields) => { |
||||
if (!valid) { |
||||
ElMessage.error('请输入驳回理由') |
||||
} else { |
||||
form.value.mailId = props.mailId |
||||
overrule(form.value).then(() => { |
||||
ElMessage.success('驳回成功'); |
||||
emits('update:show', false); |
||||
emits("update"); |
||||
}).catch((err) => { |
||||
ElMessage.error('驳回失败，请稍后重试'); |
||||
console.log(err) |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.dialog-header { |
||||
height: 60px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-self: center; |
||||
} |
||||
|
||||
.dialog-title { |
||||
margin-left: 20px; |
||||
height: 22px; |
||||
font-size: 16px; |
||||
font-family: PingFangSC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
line-height: 22px; |
||||
} |
||||
|
||||
.dialog-body { |
||||
margin-left: 20px; |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
.main-label { |
||||
width: 100%; |
||||
height: 22px; |
||||
font-size: 20px; |
||||
font-family: PingFang-SC, PingFang-SC; |
||||
font-weight: bold; |
||||
color: #333333; |
||||
line-height: 22px; |
||||
} |
||||
|
||||
.main-content { |
||||
width: 100%; |
||||
height: 22px; |
||||
font-size: 20px; |
||||
font-family: PingFang-SC, PingFang-SC; |
||||
font-weight: bold; |
||||
color: #162582; |
||||
line-height: 22px; |
||||
} |
||||
|
||||
.title-label { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.info-input { |
||||
width: 100%; |
||||
} |
||||
|
||||
.info-content { |
||||
display: block; |
||||
background-color: #FAFBFF; |
||||
margin: 20px; |
||||
|
||||
font-family: PingFangSC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
line-height: 32px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
} |
||||
|
||||
.el-upload__inner { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
// 可定义局部公共样式 |
||||
$publicColor: #162582; |
||||
$publicHeight: 35px; |
||||
|
||||
.steps { |
||||
width: 100%; |
||||
margin: auto 0; |
||||
height: $publicHeight; |
||||
|
||||
::v-deep .el-step { |
||||
height: 100%; |
||||
|
||||
.el-step__icon.is-text { |
||||
background-color: $publicColor; |
||||
|
||||
.el-step__icon-inner { |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
|
||||
.el-step__main { |
||||
width: 200px; |
||||
} |
||||
|
||||
.el-step__line { |
||||
background-color: rgba(0, 0, 0, 0.15); |
||||
margin-right: 10px; |
||||
margin-left: 135px; |
||||
top: 50%; |
||||
height: 1px; |
||||
} |
||||
|
||||
.el-step__title { |
||||
color: #333333; |
||||
width: 100%; |
||||
position: absolute; |
||||
top: calc((100% - 135%)/2); |
||||
left: calc(0% + 30px); |
||||
} |
||||
|
||||
.el-step__title.is-wait { |
||||
width: 100%; |
||||
color: #999999; |
||||
} |
||||
|
||||
.el-step__head.is-wait { |
||||
.el-step__icon.is-text { |
||||
background: #FFF; |
||||
|
||||
.el-step__icon-inner { |
||||
color: #CCCCCC; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-step__head.is-error { |
||||
.el-step__icon.is-text { |
||||
background-color: #FF0000; |
||||
border: 0px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue