不满意信件添加申诉通过意见功能实现

src/api/work/appeal.ts

@@ -13,5 +13,5 @@ export function overrule(query?: any) {
 }
 
 export function approved(query?: any) {
-    return request.get({ url: '/appeal/approved', query })
+    return request.post({ url: '/appeal/approved', body: query })
 }

src/views/work/components/HandleAppeal.vue

@@ -35,14 +35,15 @@
         </div>
     </el-dialog>
     <HandleOverrule v-model:show="showAppeal" :mail-id="activeMailId" @update="getDetail" />
+    <HandlePass v-model:show="showPass" :mail-id="activeMailId" @update="getDetail" />
 </template>
 
 <script lang="ts" setup>
-import { ElSteps, ElMessage } from 'element-plus';
+import { ElSteps } from 'element-plus';
 import { ref, defineProps, watch } from 'vue'
 import { getAppeal } from '@/api/work/appeal'
-import { approved } from '@/api/work/appeal'
 import HandleOverrule from './HandleOverrule.vue'
+import HandlePass from './HandlePass.vue'
 const props = defineProps({
     show: {
         type: Boolean,
@@ -84,6 +85,7 @@ const fileList = ref([])
 const steps = ref<InstanceType<typeof ElSteps>>()
 const stepStatus = ref([])
 const showAppeal = ref(false)
+const showPass = ref(false)
 const activeMailId = ref(props.mailId)
 
 const handleOverrule = () => {
@@ -92,14 +94,9 @@ const handleOverrule = () => {
     activeMailId.value = props.mailId;
 }
 const handleApprovedSubmit = () => {
-    approved({ id: props.mailId }).then(() => {
-        visible.value = false;
-        ElMessage.success('申诉已通过');
-        emits("update");
-    }).catch((err) => {
-        ElMessage.error('申诉失败');
-        console.log(err)
-    })
+    visible.value = false;
+    showPass.value = true;
+    activeMailId.value = props.mailId;
 }
 </script>
 

src/views/work/components/HandlePass.vue

@@ -0,0 +1,242 @@
+<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="passReason" 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.passReason" 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 { approved } from '@/api/work/appeal';
+import useUserStore from '@/stores/modules/user';
+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 {
+    passReason: string;
+}
+const form = ref({
+    mailId: '',
+    passReason: '',
+    secondDeptCondition: '',
+    firstDeptCondition: ''
+})
+const formRef = ref<FormInstance>();
+const rules = reactive<FormRules<FormAppeal>>({
+    passReason: [
+        { required: true, message: '请输入审批意见', trigger: 'blur' },
+        { min: 2, message: '驳回理由不能少于2个字', trigger: 'blur' },
+        { max: 1000, message: '驳回理由不能多于1000个字', trigger: 'blur' }
+    ]
+})
+
+const userStore = useUserStore()
+const handleSubmit = async () => {
+    if (!formRef.value) return
+    await formRef.value.validate((valid, fields) => {
+        console.log(userStore.userInfo)
+        if (!valid) {
+            ElMessage.error('审批失败')
+        } else {
+            form.value.mailId = props.mailId
+            switch (userStore.userInfo.roleId) {
+                case 2:
+                    form.value.secondDeptCondition = form.value.passReason
+                    break;
+                case 1:
+                    form.value.firstDeptCondition = form.value.passReason
+                    break;
+            }
+            approved(form.value).then(() => {
+                visible.value = false;
+                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>