police-mailbox
/
mailbox-lan-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
21819 2 years ago
parent
890645dc8c
commit
ee5c51b9f4
5 changed files with 334 additions and 142 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/views/work/Dissatisfied.vue
  2. 145
      src/views/work/components/AppealProgress.vue
  3. 115
      src/views/work/components/HandleAppeal.vue
  4. 60
      src/views/work/components/LaunchAppeal.vue
  5. 121
      src/views/work/components/OverruleReason.vue

35
src/views/work/Dissatisfied.vue
Unescape View File

@ -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="handleAppeal(row.mailId)">申诉</el-button>
<el-button type="primary" link @click="handleAppealMail(row.mailId)">查看申诉进度</el-button>
<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="launchAppeal(row.id)">申诉</el-button>
<el-button type="primary" link @click="handleAppealProgress(row.id)">查看申诉进度</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

145
src/views/work/components/AppealProgress.vue
Unescape View File

@ -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>

115
src/views/work/components/HandleAppeal.vue
Unescape View File

@ -7,44 +7,31 @@
</div>
</template>
<div class="dialog-body">
<el-form ref="formRef" :model="form">
<el-form-item style="width: 100%;display: inline;">
<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>
</el-form-item>
<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>
<el-row style="width: 100%;">
<el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 10 }"
placeholder="请输入申诉理由"></el-input>
</el-row>
</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>
<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>
</div>
<div style="display: flex;justify-content: flex-end;">
<el-button type="danger" @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'
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>

60
src/views/work/components/DissatisfiedAppeal.vue → src/views/work/components/LaunchAppeal.vue
Unescape View File

@ -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 { 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'])
import { ref, defineProps, watch } from 'vue'
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: '',
to: '',
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>

121
src/views/work/components/OverruleReason.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save