wxc
2 years ago
9 changed files with 520 additions and 84 deletions
@ -1,67 +1,213 @@
|
||||
<template> |
||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
<el-tab-pane label="我的待办" name="todo"> |
||||
<el-table :data="tableData" style="width: 100%" stripe > |
||||
<el-table-column prop="date" label="来信时间" width="180" /> |
||||
<el-table-column prop="name" label="姓名" width="180" /> |
||||
<el-table-column prop="address" label="联系电话" /> |
||||
<el-table-column prop="address" label="信件内容" /> |
||||
<el-table-column prop="address" label="办理单位" /> |
||||
<el-table-column prop="address" label="信件状态" /> |
||||
<el-table-column prop="address" label="流程节点" /> |
||||
<el-table-column prop="address" label="操作" /> |
||||
<el-table :data="todos" style="width: 100%" stripe> |
||||
<el-table-column |
||||
prop="mailTime" |
||||
label="来信时间" |
||||
align="center" |
||||
width="180" |
||||
/> |
||||
<el-table-column |
||||
prop="contactName" |
||||
label="姓名" |
||||
align="center" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="contactPhone" |
||||
label="联系电话" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="contactIdCard" |
||||
label="身份证号" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="content" |
||||
label="信件内容" |
||||
show-overflow-tooltip |
||||
/> |
||||
<el-table-column prop="mailState" label="信件状态" /> |
||||
<el-table-column label="流程节点"> |
||||
<template #default="{ row }"> </template> |
||||
</el-table-column> |
||||
<el-table-column label="操作"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleMail(row.mailId)" |
||||
>立即处理</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="即将到期" name="due">即将到期</el-tab-pane> |
||||
<el-tab-pane label="督办信件" name="supervise"> |
||||
<el-table :data="superviseTodos" style="width: 100%" stripe> |
||||
<el-table-column |
||||
prop="mailTime" |
||||
label="来信时间" |
||||
align="center" |
||||
width="180" |
||||
/> |
||||
<el-table-column |
||||
prop="contactName" |
||||
label="姓名" |
||||
align="center" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="contactPhone" |
||||
label="联系电话" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="contactIdCard" |
||||
label="身份证号" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="content" |
||||
label="信件内容" |
||||
show-overflow-tooltip |
||||
/> |
||||
<el-table-column prop="mailState" label="信件状态" /> |
||||
<el-table-column label="流程节点"> |
||||
<template #default="{ row }"> </template> |
||||
</el-table-column> |
||||
<el-table-column label="操作"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleMail(row.mailId)" |
||||
>立即处理</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="高敏信件" name="high"> |
||||
<el-table :data="highTodos" style="width: 100%" stripe> |
||||
<el-table-column |
||||
prop="mailTime" |
||||
label="来信时间" |
||||
align="center" |
||||
width="180" |
||||
/> |
||||
<el-table-column |
||||
prop="contactName" |
||||
label="姓名" |
||||
align="center" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="contactPhone" |
||||
label="联系电话" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="contactIdCard" |
||||
label="身份证号" |
||||
width="120" |
||||
/> |
||||
<el-table-column |
||||
prop="content" |
||||
label="信件内容" |
||||
show-overflow-tooltip |
||||
/> |
||||
<el-table-column prop="mailState" label="信件状态" /> |
||||
<el-table-column label="流程节点"> |
||||
<template #default="{ row }"> </template> |
||||
</el-table-column> |
||||
<el-table-column label="操作"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleMail(row.mailId)" |
||||
>立即处理</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="即将到期" name="due">Config</el-tab-pane> |
||||
<el-tab-pane label="督办信件" name="supervise">Role</el-tab-pane> |
||||
<el-tab-pane label="高敏信件" name="highSensitivity">Task</el-tab-pane> |
||||
</el-tabs> |
||||
</template> |
||||
<script setup> |
||||
import { getTodos } from "@/api/work"; |
||||
|
||||
const activeName = ref("todo"); |
||||
|
||||
const tableData = [ |
||||
{ |
||||
date: '2016-05-03', |
||||
name: 'Tom', |
||||
address: 'No. 189, Grove St, Los Angeles', |
||||
}, |
||||
{ |
||||
date: '2016-05-02', |
||||
name: 'Tom', |
||||
address: 'No. 189, Grove St, Los Angeles', |
||||
}, |
||||
{ |
||||
date: '2016-05-04', |
||||
name: 'Tom', |
||||
address: 'No. 189, Grove St, Los Angeles', |
||||
}, |
||||
{ |
||||
date: '2016-05-01', |
||||
name: 'Tom', |
||||
address: 'No. 189, Grove St, Los Angeles', |
||||
}, |
||||
] |
||||
watch(activeName, (val) => { |
||||
if (val === "todo") { |
||||
} |
||||
if (val === "supervise") { |
||||
superviseTodoList(); |
||||
} |
||||
if (val === "high") { |
||||
highTodoList(); |
||||
} |
||||
}); |
||||
|
||||
const todos = ref([]); |
||||
const superviseTodos = ref([]); |
||||
const highTodos = ref([]); |
||||
todoList(); |
||||
function todoList() { |
||||
getTodos({ |
||||
size: 8, |
||||
current: 1, |
||||
}).then((data) => { |
||||
todos.value = data.records; |
||||
}); |
||||
} |
||||
|
||||
function superviseTodoList() { |
||||
getTodos({ |
||||
size: 8, |
||||
current: 1, |
||||
mailLevel: "superintend", |
||||
}).then((data) => { |
||||
superviseTodos.value = data.records; |
||||
}); |
||||
} |
||||
|
||||
function highTodoList() { |
||||
getTodos({ |
||||
size: 8, |
||||
current: 1, |
||||
mailLevel: "high_sensitivity", |
||||
}).then((data) => { |
||||
highTodos.value = data.records; |
||||
}); |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.el-tabs { |
||||
--el-font-size-base: 24px; |
||||
--el-text-color-primary: #999; |
||||
:deep() { |
||||
.el-tabs__header { |
||||
margin: 0; |
||||
|
||||
|
||||
.el-tabs__nav { |
||||
padding-bottom: 16px; |
||||
|
||||
.el-tabs__item { |
||||
font-weight: 700; |
||||
} |
||||
padding-bottom: 16px; |
||||
|
||||
.el-tabs__item { |
||||
font-weight: 700; |
||||
} |
||||
} |
||||
} |
||||
.el-tabs__active-bar { |
||||
.el-tabs__active-bar { |
||||
height: 4px; |
||||
} |
||||
.el-tabs__item { |
||||
--el-font-size-base: 24px; |
||||
--el-text-color-primary: #999; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,182 @@
|
||||
<template> |
||||
<el-dialog |
||||
v-model="visible" |
||||
width="50vw" |
||||
title="申请办结" |
||||
> |
||||
<div> |
||||
<h2>选择办结方式</h2> |
||||
<el-form |
||||
label-position="top" |
||||
:model="form" |
||||
:rules="rules" |
||||
ref="formRef" |
||||
> |
||||
<el-form-item prop="completeMethod"> |
||||
<el-radio-group v-model="form.completeMethod" style=""> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-radio :label="'offline'" |
||||
>线下审批</el-radio |
||||
></el-col |
||||
> |
||||
<el-col :span="12"> |
||||
<el-radio :label="'online'" |
||||
>线上呈批</el-radio |
||||
></el-col |
||||
> |
||||
</el-row> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<p>线上呈批时，由三级机构专班发起办结线上呈批流程，经由</p> |
||||
<h3> |
||||
所队领导 → 二级机构专班 → 二级机构分管领导 → |
||||
二级机构正职领导 → 二级机构专班 → 市局专班 |
||||
</h3> |
||||
<p style="margin-bottom: 40px">逐步上报审批。</p> |
||||
<div style="margin-bottom: 60px"> |
||||
<el-form-item |
||||
label="呈报上级，选择对应的二级机构专班" |
||||
prop="secondDeptId" |
||||
v-if="form.completeMethod === 'online'" |
||||
> |
||||
<el-select |
||||
v-model="form.secondDeptId" |
||||
@change="handleSelect" |
||||
> |
||||
<el-option |
||||
v-for="item in depts" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item |
||||
label="请选择上级领导" |
||||
prop="leaderEmpNo" |
||||
v-else |
||||
> |
||||
<el-select |
||||
v-model="form.leaderEmpNo" |
||||
@change="handleSelect" |
||||
> |
||||
<el-option |
||||
v-for="item in leaders" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.empNo" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<footer class="flex end"> |
||||
<el-button type="primary" size="large" @click="submit" |
||||
>提交办结</el-button |
||||
> |
||||
</footer> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup> |
||||
import { listSecond } from "@/api/org/department"; |
||||
import { getLeaderList } from "@/api/perms/admin"; |
||||
|
||||
const visible = ref(false); |
||||
const props = defineProps({ |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
data: { |
||||
type: Object, |
||||
default: {} |
||||
}, |
||||
}); |
||||
const emits = defineEmits(["update:show", "update:data", "submit"]); |
||||
watch(visible, (val) => { |
||||
emits("update:show", val); |
||||
}); |
||||
watch( |
||||
() => props.show, |
||||
(val) => { |
||||
visible.value = val; |
||||
if (val) { |
||||
} |
||||
} |
||||
); |
||||
|
||||
const form = ref({}); |
||||
const formRef = ref(null); |
||||
const rules = { |
||||
completeMethod: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择办结方式", |
||||
}, |
||||
], |
||||
secondDeptId: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择二级机构", |
||||
}, |
||||
], |
||||
leaderEmpNo: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择上级领导", |
||||
}, |
||||
], |
||||
}; |
||||
const depts = ref([]); |
||||
listSecond().then((data) => { |
||||
depts.value = data; |
||||
}); |
||||
const leaders = ref([]); |
||||
|
||||
getLeaderList().then((data) => { |
||||
leaders.value = data; |
||||
}); |
||||
|
||||
function submit() { |
||||
formRef.value.validate((valid) => { |
||||
if (valid) { |
||||
const data = { ...props.data, ...form.value} |
||||
emits('update:data', data) |
||||
emits('submit', form.value.completeMethod) |
||||
visible.value = false |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
h2 { |
||||
color: var(--primary-color); |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
margin-top: 0; |
||||
} |
||||
h3 { |
||||
color: var(--primary-color); |
||||
font-size: 20px; |
||||
} |
||||
.el-radio-group { |
||||
display: block; |
||||
width: 100%; |
||||
.el-radio { |
||||
--el-radio-font-size: 24px; |
||||
--el-radio-input-width: 22px; |
||||
--el-radio-input-height: 22px; |
||||
border: 1px solid #c3caf5; |
||||
display: flex; |
||||
padding: 16px; |
||||
&.is-checked { |
||||
background-color: #f1f2fc; |
||||
} |
||||
} |
||||
} |
||||
.el-col { |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue