不满意信件申诉流程初始化

src/views/work/Dissatisfied.vue

@@ -117,10 +117,11 @@
                     <el-table-column prop="complaint" label="申诉状态" />
                     <el-table-column label="操作">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="handleMail(row.mailId)">详情</el-button>
+                            <el-button type="primary" link @click="handleDetail(row.id)">详情</el-button>
-                            <el-button type="primary" link @click="handleAppeal(row.mailId)">申诉</el-button>
+                            <el-button type="primary" link @click="launchAppeal(row.id)">申诉</el-button>
-                            <el-button type="primary" link @click="handleAppealMail(row.mailId)">查看申诉进度</el-button>
+                            <el-button type="primary" link @click="handleAppealProgress(row.id)">查看申诉进度</el-button>
-                            <el-button type="primary" link @click="handleMail(row.mailId)">查看驳回理由</el-button>
+                            <el-button type="primary" link @click="handleOverruleReason(row.id)">查看驳回理由</el-button>
+                            <el-button type="primary" link @click="handleAppeal(row.id)">立即处理</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
@@ -135,12 +136,16 @@
     </div>
 
     <MailDialog v-model:show="showModel" :mail-id="activeMailId" :disabled="true" @update="getList" />
-    <DissatisfiedAppeal v-model:show="showAppeal" :mail-id="activeMailId" :disabled="true" @update="getList" />
+    <LaunchAppeal v-model:show="showAppeal" :mail-id="activeMailId" :disabled="true" @update="getList" />
+    <AppealProgress v-model:show="showAppealProgress" :mail-id="activeMailId" :disabled="true" @update="getList" />
+    <OverruleReason v-model:show="showOverruleReason" :mail-id="activeMailId" :disabled="true" @update="getList" />
     <HandleAppeal v-model:show="showHandleAppeal" :mail-id="activeMailId" :disabled="true" @update="getList" />
 </template>
 <script lang="ts" setup>
 import MailDialog from "./components/MailDialog.vue";
-import DissatisfiedAppeal from "./components/DissatisfiedAppeal.vue";
+import LaunchAppeal from "./components/LaunchAppeal.vue";
+import AppealProgress from "./components/AppealProgress.vue";
+import OverruleReason from "./components/OverruleReason.vue";
 import HandleAppeal from "./components/HandleAppeal.vue";
 import useMailStore from "@/stores/modules/mail";
 import { getDissatisfied } from "@/api/work";
@@ -175,9 +180,11 @@ const dissatisfied = ref([]);
 const showModel = ref(false);
 const activeMailId = ref("");
 const showAppeal = ref(false);
+const showAppealProgress = ref(false);
+const showOverruleReason = ref(false);
 const showHandleAppeal = ref(false);
 
-function handleMail(mailId) {
+function handleDetail(mailId) {
     showModel.value = true;
     activeMailId.value = mailId;
 }
@@ -213,11 +220,19 @@ const { optionsData } = useDictOptions<{
     }
 })
 
-const handleAppeal = (mailId: any) => {
+const launchAppeal = (mailId: any) => {
     showAppeal.value = true;
     activeMailId.value = mailId;
 }
-const handleAppealMail = (mailId: any) => {
+const handleAppealProgress = (mailId: any) => {
+    showAppealProgress.value = true;
+    activeMailId.value = mailId;
+}
+const handleOverruleReason = (mailId: any) => {
+    showOverruleReason.value = true;
+    activeMailId.value = mailId;
+}
+const handleAppeal = (mailId: any) => {
     showHandleAppeal.value = true;
     activeMailId.value = mailId;
 }
@@ -227,4 +242,4 @@ const handleAppealMail = (mailId: any) => {
 .table-container {
     border: 1px solid rgba(198, 208, 251, 1);
 }
-</style>
+</style>./components/Lauch.vue./components/AppealProgress.vue

src/views/work/components/AppealProgress.vue

@@ -0,0 +1,145 @@
+<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">
+            <span class="main-label">申诉中</span>
+            <el-steps :active="active" class="steps">
+                <el-step title="提交申诉"></el-step>
+                <el-step title="处理中"></el-step>
+                <el-step title="完成"></el-step>
+            </el-steps>
+            <span class="main-label">申诉理由</span>
+            <div>
+                <span>{{ }}</span>
+            </div>
+            <span class="main-label">相关附件</span>
+            <div>
+
+            </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 } from 'vue'
+import { watch } from 'vue'
+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;
+    }
+);
+
+const active = ref(1)
+const handleSubmit = () => {
+}
+</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: 80px;
+    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%;
+}
+
+.el-upload__inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// 可定义局部公共样式
+$publicColor: #162582;
+$publicHeight: 35px;
+
+.steps {
+    width: 80%;
+    margin: 20px auto 0;
+    height: $publicHeight;
+
+    ::v-deep .el-step {
+        height: 100%;
+
+        .el-step__line {
+            background-color: rgba(0, 0, 0, 0.15);
+            margin-right: 30px;
+            margin-left: 105px;
+            top: 50%;
+            height: 1px;
+        }
+
+        .el-step__title {
+            position: absolute  ;
+            top: calc((100% - 130%)/2);
+            left: calc(5% + 25px);
+        }
+    }
+}
+</style>

src/views/work/components/HandleAppeal.vue

@@ -7,44 +7,31 @@
             </div>
         </template>
         <div class="dialog-body">
-            <el-form ref="formRef" :model="form">
+            <span class="main-label">申诉中</span>
-                <el-form-item style="width: 100%;display: inline;">
+            <el-steps :active="1" finish-status="success" space="2500" style="width: 100%;">
-                    <span class="main-label">申诉中</span>
+                <el-step title="提交申诉"></el-step>
-                    <el-steps :active="1" finish-status="success" space="2500" style="width: 100%;">
+                <el-step title="处理中"></el-step>
-                        <el-step title="提交申诉"></el-step>
+                <el-step title="完成"></el-step>
-                        <el-step title="处理中"></el-step>
+            </el-steps>
-                        <el-step title="完成"></el-step>
+            <span class="main-label">申诉理由</span>
-                    </el-steps>
+            <div>
-                </el-form-item>
+                <span>{{ }}</span>
-                <el-form-item label="申诉理由" prop="mailSource" required
+            </div>
-                    style="display: flex;flex-direction: column;justify-content: start;">
+            <span class="main-label">相关附件</span>
-                    <template #label>
+            <div>
-                        <span class="main-label" style="text-align: left; width: 100%;">途径来源</span>
+
-                    </template>
+            </div>
-                    <el-row style="width: 100%;">
+            <div style="display: flex;justify-content: flex-end;">
-                        <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 10 }"
+                <el-button type="danger" @click="handleSubmit">驳回申请</el-button>
-                            placeholder="请输入申诉理由"></el-input>
+                <el-button type="primary" @click="handleSubmit">通过申诉</el-button>
-                    </el-row>
+            </div>
-                </el-form-item>
-                <span class="main-label">上传相关附件</span>
-                <el-form-item class="mt-10">
-                    <Upload v-model="form.fileList" />
-                </el-form-item>
-                <div style="width: 100%;display: flex;justify-content: flex-end; margin-top: 20px;">
-                    <el-button type="primary" @click="handleSubmit" style="height: 40px;">提交申诉</el-button>
-                </div>
-            </el-form>
         </div>
     </el-dialog>
 </template>
+
 <script lang="ts" setup>
 import { ref, defineProps } from 'vue'
 import { watch } from 'vue'
-import { labelLists } from '@/api/org/label'
-import { labelAdd } from '@/api/org/label'
-import { labelInsert } from '@/api/org/label'
-import { ElMessage } from 'element-plus'
-const emit = defineEmits(['update'])
 const props = defineProps({
     show: {
         type: Boolean,
@@ -55,65 +42,19 @@ const props = defineProps({
         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;
-        if (val) {
-        }
     }
 );
 
-const appealFlow = ref({
-    from: '',
-    to: '',
-})
-
-interface MailLabel {
-    id: number,
-    labelName: string
-}
-const form = ref({
-    content: '',
-    fileList: [],
-})
-const allLabels = ref([] as MailLabel[])
-getMainLabels()
-function getMainLabels() {
-    labelLists().then((res: any) => {
-        allLabels.value = res
-    })
-}
-
-const handleLabelAdd = () => {
-    let newLabel = JSON.stringify({ labelName: form.value.newLabel, })
-    labelAdd(JSON.parse(newLabel)).then((res: any) => {
-        console.log(res)
-        getMainLabels()
-    })
-}
 const handleSubmit = () => {
-    let strLabels = ''
-    for (let i = 0; i < form.value.mainLabels.length; i++) {
-        if (i === form.value.mainLabels.length - 1)
-            strLabels += form.value.mainLabels[i]
-        else
-            strLabels += form.value.mainLabels[i] + ','
-    }
-    let labelInfo = JSON.stringify({ mailId: props.mailId, labelName: strLabels })
-    console.log(labelInfo)
-    console.log(JSON.parse(labelInfo))
-    labelInsert(JSON.parse(labelInfo)).then((res: any) => {
-        console.log(res)
-        ElMessage.success('标签设置成功')
-        visible.value = false
-        emit('update')
-    }).catch((err: any) => {
-        console.log(err)
-        ElMessage.error('标签设置失败')
-    })
-    console.log(form.value.mainLabels)
 }
 </script>
 
@@ -173,4 +114,14 @@ const handleSubmit = () => {
     justify-content: center;
     align-items: center;
 }
+
+// 定义 el-step 的样式，使得文字显示在图标的右侧
+.el-steps .el-step__head {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
+
+.el-steps .el-step__title {
+    padding-left: 8px; // 根据需要调整间隔
+}
 </style>

src/views/work/components/LaunchAppeal.vue

@@ -15,6 +15,7 @@
                 <el-form-item label="审批通过后，可纳入满意率统计" />
                 <el-form-item label="申诉理由" prop="mailSource" required
                     style="display: flex;flex-direction: column;justify-content: start;">
+
                     <template #label>
                         <span class="main-label" style="text-align: left; width: 100%;">途径来源</span>
                     </template>
@@ -34,14 +35,9 @@
         </div>
     </el-dialog>
 </template>
+
 <script lang="ts" setup>
-import { ref, defineProps } from 'vue'
+import { ref, defineProps, watch } from 'vue'
-import { watch } from 'vue'
-import { labelLists } from '@/api/org/label'
-import { labelAdd } from '@/api/org/label'
-import { labelInsert } from '@/api/org/label'
-import { ElMessage } from 'element-plus'
-const emit = defineEmits(['update'])
 const props = defineProps({
     show: {
         type: Boolean,
@@ -52,65 +48,29 @@ const props = defineProps({
         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;
-        if (val) {
-        }
     }
 );
 
 const appealFlow = ref({
-    from: '',
+    from: '二级机构专班',
-    to: '',
+    to: '市局专班',
 })
-
-interface MailLabel {
-    id: number,
-    labelName: string
-}
 const form = ref({
     content: '',
     fileList: [],
 })
-const allLabels = ref([] as MailLabel[])
-getMainLabels()
-function getMainLabels() {
-    labelLists().then((res: any) => {
-        allLabels.value = res
-    })
-}
 
-const handleLabelAdd = () => {
-    let newLabel = JSON.stringify({ labelName: form.value.newLabel, })
-    labelAdd(JSON.parse(newLabel)).then((res: any) => {
-        console.log(res)
-        getMainLabels()
-    })
-}
 const handleSubmit = () => {
-    let strLabels = ''
+
-    for (let i = 0; i < form.value.mainLabels.length; i++) {
-        if (i === form.value.mainLabels.length - 1)
-            strLabels += form.value.mainLabels[i]
-        else
-            strLabels += form.value.mainLabels[i] + ','
-    }
-    let labelInfo = JSON.stringify({ mailId: props.mailId, labelName: strLabels })
-    console.log(labelInfo)
-    console.log(JSON.parse(labelInfo))
-    labelInsert(JSON.parse(labelInfo)).then((res: any) => {
-        console.log(res)
-        ElMessage.success('标签设置成功')
-        visible.value = false
-        emit('update')
-    }).catch((err: any) => {
-        console.log(err)
-        ElMessage.error('标签设置失败')
-    })
-    console.log(form.value.mainLabels)
 }
 </script>
 

src/views/work/components/OverruleReason.vue

@@ -0,0 +1,121 @@
+<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">
+            <span class="main-label">申诉中</span>
+            <el-steps :active="1" finish-status="success" space="2500" style="width: 100%;">
+                <el-step title="提交申诉"></el-step>
+                <el-step title="处理中"></el-step>
+                <el-step title="完成"></el-step>
+            </el-steps>
+            <span class="main-label">驳回理由</span>
+            <div>
+                <span>{{  }}</span>
+            </div>
+            <span class="main-label">申诉理由</span>
+            <div>
+                <span>{{  }}</span>
+            </div>
+            <span class="main-label">相关附件</span>
+            <div>
+
+            </div>
+            <div style="display: flex;justify-content: flex-end;">
+                <el-button type="primary" @click="handleSubmit">重新申诉</el-button>
+                <el-button type="primary" @click="handleSubmit">关闭窗口</el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineProps } from 'vue'
+import { watch } from 'vue'
+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;
+    }
+);
+
+const handleSubmit = () => {
+}
+</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: 80px;
+    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%;
+}
+
+.el-upload__inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>