wxc
2 years ago
9 changed files with 520 additions and 84 deletions
@ -1,67 +1,213 @@ |
|||||||
<template> |
<template> |
||||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||||
<el-tab-pane label="我的待办" name="todo"> |
<el-tab-pane label="我的待办" name="todo"> |
||||||
<el-table :data="tableData" style="width: 100%" stripe > |
<el-table :data="todos" style="width: 100%" stripe> |
||||||
<el-table-column prop="date" label="来信时间" width="180" /> |
<el-table-column |
||||||
<el-table-column prop="name" label="姓名" width="180" /> |
prop="mailTime" |
||||||
<el-table-column prop="address" label="联系电话" /> |
label="来信时间" |
||||||
<el-table-column prop="address" label="信件内容" /> |
align="center" |
||||||
<el-table-column prop="address" label="办理单位" /> |
width="180" |
||||||
<el-table-column prop="address" label="信件状态" /> |
/> |
||||||
<el-table-column prop="address" label="流程节点" /> |
<el-table-column |
||||||
<el-table-column prop="address" label="操作" /> |
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-table> |
||||||
</el-tab-pane> |
</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> |
</el-tabs> |
||||||
</template> |
</template> |
||||||
<script setup> |
<script setup> |
||||||
|
import { getTodos } from "@/api/work"; |
||||||
|
|
||||||
const activeName = ref("todo"); |
const activeName = ref("todo"); |
||||||
|
|
||||||
const tableData = [ |
watch(activeName, (val) => { |
||||||
{ |
if (val === "todo") { |
||||||
date: '2016-05-03', |
} |
||||||
name: 'Tom', |
if (val === "supervise") { |
||||||
address: 'No. 189, Grove St, Los Angeles', |
superviseTodoList(); |
||||||
}, |
} |
||||||
{ |
if (val === "high") { |
||||||
date: '2016-05-02', |
highTodoList(); |
||||||
name: 'Tom', |
} |
||||||
address: 'No. 189, Grove St, Los Angeles', |
}); |
||||||
}, |
|
||||||
{ |
const todos = ref([]); |
||||||
date: '2016-05-04', |
const superviseTodos = ref([]); |
||||||
name: 'Tom', |
const highTodos = ref([]); |
||||||
address: 'No. 189, Grove St, Los Angeles', |
todoList(); |
||||||
}, |
function todoList() { |
||||||
{ |
getTodos({ |
||||||
date: '2016-05-01', |
size: 8, |
||||||
name: 'Tom', |
current: 1, |
||||||
address: 'No. 189, Grove St, Los Angeles', |
}).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> |
</script> |
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
.el-tabs { |
.el-tabs { |
||||||
--el-font-size-base: 24px; |
|
||||||
--el-text-color-primary: #999; |
|
||||||
:deep() { |
:deep() { |
||||||
.el-tabs__header { |
.el-tabs__header { |
||||||
margin: 0; |
margin: 0; |
||||||
|
|
||||||
.el-tabs__nav { |
.el-tabs__nav { |
||||||
padding-bottom: 16px; |
padding-bottom: 16px; |
||||||
|
|
||||||
.el-tabs__item { |
.el-tabs__item { |
||||||
font-weight: 700; |
font-weight: 700; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
.el-tabs__active-bar { |
.el-tabs__active-bar { |
||||||
height: 4px; |
height: 4px; |
||||||
} |
} |
||||||
|
.el-tabs__item { |
||||||
|
--el-font-size-base: 24px; |
||||||
|
--el-text-color-primary: #999; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</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