wxc
2 years ago
9 changed files with 520 additions and 84 deletions
@ -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