748 lines
23 KiB
Vue
748 lines
23 KiB
Vue
<template>
|
||
<div>
|
||
<home-header></home-header>
|
||
<div id="apply-container">
|
||
<!-- <aside>
|
||
<aside-menu></aside-menu>
|
||
</aside> -->
|
||
<article>
|
||
<div class="from-card" v-if="applySuccess">
|
||
<AbilityToApplyFor :dataList="list"></AbilityToApplyFor>
|
||
</div>
|
||
<div class="form-container">
|
||
<div v-if="applySuccess">
|
||
<a-form
|
||
ref="formRef"
|
||
:model="formName"
|
||
name="basic"
|
||
:label-col="{ style: { width: '106px' } }"
|
||
:wrapper-col="{ style: { width: '230px' } }"
|
||
labelAlign="left"
|
||
autocomplete="off"
|
||
>
|
||
<div class="base-info">
|
||
<a-form-item
|
||
label="申请标题"
|
||
name="title"
|
||
:rules="[{ required: true, message: '请输入申请标题' }]"
|
||
>
|
||
<a-input
|
||
placeholder="请输入能力申请标题"
|
||
v-model:value="formName.title"
|
||
/>
|
||
</a-form-item>
|
||
</div>
|
||
<div class="base-info">
|
||
<a-form-item
|
||
label="申请人信息"
|
||
name="user"
|
||
:rules="[{ required: true, message: '请输入申请人' }]"
|
||
>
|
||
<a-input
|
||
placeholder="请输入申请人"
|
||
v-model:value="formName.user"
|
||
disabled
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
style="margin: 0 22px"
|
||
label="电话"
|
||
name="phone"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
pattern: /^1[3456789]\d{9}$/,
|
||
message: '请输入正确的电话号码',
|
||
},
|
||
]"
|
||
>
|
||
<a-input
|
||
placeholder="请输入申请人电话"
|
||
v-model:value="formName.phone"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="单位"
|
||
name="unit"
|
||
:rules="[{ required: true, message: '请输入单位' }]"
|
||
>
|
||
<a-input
|
||
placeholder="请输入单位"
|
||
v-model:value="formName.unit"
|
||
disabled
|
||
/>
|
||
</a-form-item>
|
||
</div>
|
||
<div class="base-info">
|
||
<a-form-item
|
||
label="应用系统"
|
||
name="applicationSystem"
|
||
:rules="[{ required: true, message: '请选择应用系统' }]"
|
||
>
|
||
<a-select
|
||
v-model:value="formName.applicationSystem"
|
||
show-search
|
||
placeholder="请输入关键字"
|
||
style="width: 200px"
|
||
:options="systemOptions"
|
||
@focus="handleFocus"
|
||
@blur="handleBlur"
|
||
@change="systemHandleChange"
|
||
@search="systemHandleSearch"
|
||
></a-select>
|
||
</a-form-item>
|
||
<a-form-item
|
||
class="applicationScene"
|
||
label="应用场景"
|
||
name="applicationScene"
|
||
:rules="[{ required: true, message: '请选择应用场景' }]"
|
||
style="width: 6.93rem"
|
||
>
|
||
<a-select
|
||
v-model:value="formName.applicationScene"
|
||
:options="applicationSceneOpthion"
|
||
mode="tags"
|
||
:size="size"
|
||
placeholder="请选择应用场景"
|
||
:filterOption="false"
|
||
:searchValue="false"
|
||
style="width: 5.87rem"
|
||
></a-select>
|
||
</a-form-item>
|
||
</div>
|
||
<div>
|
||
<a-form-item
|
||
label="应用背景"
|
||
name="applicationBackground"
|
||
:rules="[{ required: true, message: '请输入应用背景' }]"
|
||
>
|
||
<a-textarea
|
||
placeholder="请输入应用背景"
|
||
v-model:value="formName.applicationBackground"
|
||
:rows="4"
|
||
/>
|
||
</a-form-item>
|
||
</div>
|
||
<div>
|
||
<a-form-item
|
||
label="期望效果"
|
||
name="effectWish"
|
||
:rules="[{ required: true, message: '请输入期望效果' }]"
|
||
>
|
||
<a-textarea
|
||
placeholder="请输入期望效果"
|
||
v-model:value="formName.effectWish"
|
||
:rows="4"
|
||
/>
|
||
</a-form-item>
|
||
</div>
|
||
|
||
<a-form-item
|
||
style="color: #666; font-size: 16px"
|
||
label="申请单附件"
|
||
name="applyDoc"
|
||
>
|
||
<a-upload
|
||
v-model:file-list="fileList"
|
||
name="file"
|
||
:action="`${baseURL}/upload`"
|
||
:headers="headers"
|
||
@change="handleChange"
|
||
:before-upload="beforeUpload"
|
||
>
|
||
<a-button
|
||
style="
|
||
width: 100px;
|
||
height: 30px;
|
||
margin-right: 10px;
|
||
background: #edf4fc;
|
||
color: #0087ff;
|
||
font-size: 14px;
|
||
border-radius: 6px;
|
||
border: 1px solid #bbd3ef;
|
||
padding: 0;
|
||
text-align: center;
|
||
"
|
||
>
|
||
<upload-outlined></upload-outlined>
|
||
文件上传
|
||
</a-button>
|
||
<span style="font-size: 14px; color: #999">
|
||
支持doc、docx、jpg、png、jpeg、pdf、xlxs、ppt类型文件
|
||
</span>
|
||
</a-upload>
|
||
</a-form-item>
|
||
|
||
<div class="bottom-btn">
|
||
<a-button
|
||
style="
|
||
width: 80px;
|
||
height: 38px;
|
||
margin-right: 20px;
|
||
background: #e1edfa;
|
||
color: #0087ff;
|
||
font-size: 14px;
|
||
border-radius: 6px;
|
||
border: none;
|
||
padding: 0;
|
||
text-align: center;
|
||
"
|
||
type="primary"
|
||
html-type="cancle"
|
||
@click="resetFields()"
|
||
>
|
||
退出申请
|
||
</a-button>
|
||
<a-button
|
||
style="
|
||
width: 80px;
|
||
height: 38px;
|
||
background: #0087ff;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
border-radius: 6px;
|
||
border: none;
|
||
padding: 0;
|
||
text-align: center;
|
||
"
|
||
type="primary"
|
||
html-type="submit"
|
||
@click="processStartHandle()"
|
||
>
|
||
提交申请
|
||
</a-button>
|
||
</div>
|
||
</a-form>
|
||
</div>
|
||
<div class="success" v-else>
|
||
<div>
|
||
<img src="../../assets/home/success.png" alt="" />
|
||
</div>
|
||
<p>您已成功申请能力，请耐心等待审批结果，结果会第一时间通知您！</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AbilityToApplyFor from './AbilityToApplyFor.vue'
|
||
import HomeHeader from '@/views/home/components/header'
|
||
import { reactive, ref, watch, onBeforeUnmount } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { message } from 'ant-design-vue'
|
||
import qs from 'qs'
|
||
// import { UploadOutlined } from '@ant-design/icons-vue'
|
||
import { Upload } from 'ant-design-vue'
|
||
import {
|
||
lastestPage,
|
||
tabilityapplication,
|
||
startOfBusinessKey,
|
||
updateInstanceId,
|
||
submitApply,
|
||
getUser,
|
||
getUserInfo,
|
||
relaunch,
|
||
selectOne,
|
||
} from '@/api/home'
|
||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||
import mybus from '@/myplugins/mybus'
|
||
import { sgcDel, getApplyForm } from '@/api/personalCenter'
|
||
import { pageWithAttrs } from '@/api/home'
|
||
// import { baseURL } from '@/config'
|
||
// import AsideMenu from './components/asideMenu.vue'
|
||
|
||
export default {
|
||
name: '',
|
||
props: {},
|
||
components: {
|
||
HomeHeader,
|
||
AbilityToApplyFor,
|
||
// AsideMenu,
|
||
// UploadOutlined,
|
||
},
|
||
setup() {
|
||
const router = useRouter()
|
||
const disabled = ref(false)
|
||
const list = ref(JSON.parse(localStorage.getItem('applyList')))
|
||
const num = ref(0)
|
||
list.value.map((item) => {
|
||
if (item.checkedList) {
|
||
console.log(item)
|
||
num.value += Number(item.checkedList.length)
|
||
}
|
||
})
|
||
console.log(
|
||
'list',
|
||
list.value
|
||
// list.value[0].children.filter(
|
||
// (val) => val.id == list.value[0].checkedList[0]
|
||
// )[0].resourceName
|
||
)
|
||
const baseURL = window.SITE_CONFIG.apiURL
|
||
let record = ref('1')
|
||
const text = ref('')
|
||
const formName = reactive({
|
||
title: list.value[0].children
|
||
? list.value[0].children
|
||
.filter((val) => val.id == list.value[0].checkedList[0])[0]
|
||
.resourceName.concat(
|
||
list.value[0].checkedList.length > 1
|
||
? '等能力申请' + num.value + '个'
|
||
: '能力申请'
|
||
)
|
||
: list.value[0].arr[0].resourceName.concat('能力申请'), // 标题
|
||
applicationSystem: [], // 应用系统
|
||
applicationScene: [], // 应用场景
|
||
applicationBackground: '', // 应用背景
|
||
effectWish: '', // 期望效果
|
||
user: '',
|
||
userId: '',
|
||
phone: '',
|
||
unit: '',
|
||
system: [],
|
||
enclosure: '', //附件
|
||
enclosureName: '', //附件
|
||
})
|
||
const dataList = ref([])
|
||
getUser().then((res) => {
|
||
formName.user = res.data.data.realName
|
||
formName.userId = res.data.data.id
|
||
getUserInfo(formName.userId).then((res) => {
|
||
if (res.data.data.mobile) {
|
||
formName.phone = res.data.data.mobile
|
||
}
|
||
formName.unit = res.data.data.deptName
|
||
})
|
||
})
|
||
// console.log('本地存储====================》', list.value)
|
||
const businessKey = ref(router.currentRoute.value.query.id)
|
||
const taskId = ref(router.currentRoute.value.query.taskId)
|
||
if (businessKey.value) {
|
||
getApplyForm(businessKey.value).then((res) => {
|
||
formName.id = res.data.data.id
|
||
formName.phone = res.data.data.phone
|
||
formName.scene = res.data.data.scene
|
||
formName.basis = res.data.data.basis
|
||
formName.enclosure = res.data.data.enclosure
|
||
// console.log('回填数据================>', res, formName.phone)
|
||
})
|
||
}
|
||
const applicationSceneOpthion = ref([])
|
||
getCategoryTreePage({
|
||
page: 1,
|
||
limit: 20,
|
||
dictTypeId: '1513712507692818433',
|
||
deFlage: 0,
|
||
}).then((res) => {
|
||
res.data.data.list.map((val) => {
|
||
applicationSceneOpthion.value.push({
|
||
value: val.dictLabel,
|
||
label: val.dictLabel,
|
||
})
|
||
})
|
||
// console.log('字典值========>', applicationSceneOpthion.value)
|
||
})
|
||
// console.log(formName.system)
|
||
const formRef = ref()
|
||
const applySuccess = ref(true)
|
||
// const rootObj = null
|
||
const dataForm = {
|
||
processDefinitionKey: 'abilityprocess',
|
||
}
|
||
const callbacks = {
|
||
startProcessSuccessCallback: null,
|
||
startProcessErrorCallback: null,
|
||
formSaveSuccessCallback: null,
|
||
formSaveErrorCallback: null,
|
||
}
|
||
const instanceIdUrl = '/processForm/tabilityapplication/updateInstanceId'
|
||
const formUrl = '/processForm/tabilityapplication'
|
||
//退出返回上一页
|
||
const resetFields = () => {
|
||
window.history.go(-1)
|
||
}
|
||
const processStartHandle = () => {
|
||
if (businessKey.value) {
|
||
const obj = ref({})
|
||
for (const key in formName) {
|
||
if (key !== 'formNameSystem') {
|
||
obj.value[key] = formName[key]
|
||
}
|
||
}
|
||
obj.value.system = formName.system[0].resourceName
|
||
tabilityapplication(obj.value).then((upres) => {
|
||
if (upres.data.code == 0) {
|
||
relaunch({ data: obj.value, taskId: taskId.value }).then(
|
||
(res) => {
|
||
// console.log('驳回================>', res)
|
||
if (res.data.code == 0) {
|
||
message.success('重新发起流程成功！')
|
||
window.setTimeout(() => {
|
||
window.history.go(-1)
|
||
}, 1000)
|
||
} else {
|
||
message.error('重新发起流程失败！')
|
||
}
|
||
}
|
||
)
|
||
} else {
|
||
message.error('数据更新失败！')
|
||
}
|
||
})
|
||
} else {
|
||
formRef.value.validate().then(() => {
|
||
if (!formUrl) {
|
||
return message.error('请设置保存表单的URL')
|
||
}
|
||
if (!formName) {
|
||
return message.error('请设置表单名称')
|
||
}
|
||
let ids = []
|
||
formName.system = []
|
||
console.log('list==================', list.value)
|
||
list.value.map((val) => {
|
||
val.arr.map((item) => {
|
||
if (item.type !== '基础设施') {
|
||
formName.system.push({
|
||
resourceId: item.resourceId,
|
||
resourceName: item.resourceName,
|
||
})
|
||
console.log(item.id)
|
||
if (item.id) {
|
||
ids.push(item.id)
|
||
}
|
||
} else {
|
||
let obj = {}
|
||
Object.assign(obj, formName)
|
||
console.log('摄像头===============>', obj, item)
|
||
obj.system = []
|
||
item.note1 = JSON.parse(item.note1)
|
||
item.note1.map((sxt) => {
|
||
obj.system.push({
|
||
resourceId: sxt.idtCameraChannel + '',
|
||
resourceName: sxt.channelName,
|
||
cameraId: sxt.channelId,
|
||
})
|
||
})
|
||
submitApply(obj).then((res) => {
|
||
applySuccess.value = false
|
||
console.log('摄像头申请================>', res)
|
||
if (item.id) {
|
||
sgcDel({ ids: [item.id] }).then((res) => {
|
||
if (res.data.msg === 'success') {
|
||
mybus.emit('getSgcNum')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
})
|
||
console.log('提交数据==========================>', formName, ids)
|
||
if (formName.system.length !== 0) {
|
||
submitApply(formName).then((res) => {
|
||
applySuccess.value = false
|
||
message.success('操作成功！')
|
||
console.log('能力申请================>', res)
|
||
if (ids && ids.length > 0) {
|
||
sgcDel({ ids: ids }).then((res) => {
|
||
if (res.data.msg === 'success') {
|
||
mybus.emit('getSgcNum')
|
||
|
||
router.push({
|
||
path: '/DetailsPageconetent',
|
||
query: {
|
||
select: '组件服务',
|
||
},
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
router.push({
|
||
path: '/DetailsPageconetent',
|
||
query: {
|
||
select: '组件服务',
|
||
},
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 启动流程
|
||
const startProcess = (processDefinitionKey, businessKey, formData) => {
|
||
var data = {
|
||
processDefinitionKey: processDefinitionKey,
|
||
businessKey: businessKey,
|
||
variables: formData,
|
||
}
|
||
// proxy.$http['post']('/act/running/startOfBusinessKey', data)
|
||
startOfBusinessKey(data)
|
||
.then(({ data: res }) => {
|
||
applySuccess.value = false
|
||
if (res.code !== 0) {
|
||
if (callbacks.startProcessErrorCallback) {
|
||
callbacks.startProcessErrorCallback(res.data)
|
||
}
|
||
}
|
||
message({
|
||
message: '操作成功',
|
||
type: 'success',
|
||
duration: 500,
|
||
onClose: () => {
|
||
if (callbacks.startProcessSuccessCallback) {
|
||
callbacks.startProcessSuccessCallback(res.data)
|
||
}
|
||
},
|
||
})
|
||
if (instanceIdUrl) {
|
||
var params = qs.stringify({
|
||
processInstanceId: res.data.processInstanceId,
|
||
processDefinitionKey: processDefinitionKey,
|
||
businessKey: businessKey,
|
||
})
|
||
// proxy.$http['post'](instanceIdUrl + '?' + params)
|
||
updateInstanceId(params).then(
|
||
// ({ data: res }) => {}
|
||
() => {}
|
||
)
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
|
||
const options = ref([
|
||
{
|
||
value: '政法委',
|
||
label: '政法委',
|
||
},
|
||
{
|
||
value: '公安局',
|
||
label: '公安局',
|
||
},
|
||
{
|
||
value: '卫健委',
|
||
label: '卫健委',
|
||
},
|
||
{
|
||
value: '城市管理局',
|
||
label: '城市管理局',
|
||
},
|
||
{
|
||
value: '生态环境局',
|
||
label: '生态环境局',
|
||
},
|
||
{
|
||
value: '交通运输局',
|
||
label: '交通运输局',
|
||
},
|
||
])
|
||
const systemOptions = ref([])
|
||
const systemOptions2 = ref([])
|
||
|
||
const handleChange = (info) => {
|
||
if (info.file.status !== 'uploading') {
|
||
// console.log(info.file, info.fileList)
|
||
}
|
||
|
||
if (info.file.status === 'done') {
|
||
message.success(`${info.file.name} 上传成功`)
|
||
formName.enclosure = info.file.response.data
|
||
formName.enclosureName = info.file.name
|
||
} else if (info.file.status === 'error') {
|
||
message.error(`${info.file.name} 上传失败`)
|
||
}
|
||
}
|
||
const beforeUpload = (file) => {
|
||
const isPNG =
|
||
file.type === 'image/png' ||
|
||
'image/doc' ||
|
||
'image/docx' ||
|
||
'image/jpg' ||
|
||
'image/png' ||
|
||
'image/jpeg' ||
|
||
'image/pdf' ||
|
||
'image/xlxs' ||
|
||
'image/ppt'
|
||
|
||
if (!isPNG) {
|
||
message.error(`上传失败`)
|
||
}
|
||
|
||
return isPNG || Upload.LIST_IGNORE
|
||
}
|
||
const fileList = ref([])
|
||
// 应用系统下拉
|
||
const systemHandleChange = (value) => {
|
||
console.log(`selected ${value}`)
|
||
}
|
||
const systemHandleSearch = (value) => {
|
||
console.log(`search ${value}`)
|
||
text.value = value
|
||
systemOptions.value = systemOptions2.value.filter(
|
||
(item) => item.label.search(text.value) > -1
|
||
)
|
||
}
|
||
pageWithAttrs({
|
||
pageNum: 1,
|
||
pageSize: 99999,
|
||
type: '应用资源',
|
||
name: '',
|
||
infoList: [],
|
||
}).then((res) => {
|
||
if (res.data.code == 0) {
|
||
if (res.data.data.records.length == 0) {
|
||
message.warning('该关键词，暂无应用资源！')
|
||
} else {
|
||
res.data.data.records.map((val) => {
|
||
systemOptions2.value.push({
|
||
value: val.name,
|
||
label: val.name,
|
||
})
|
||
})
|
||
// console.log('第一次获取===================>', systemOptions2.value)
|
||
}
|
||
} else {
|
||
message.error('应用系统获取数据失败!')
|
||
}
|
||
})
|
||
const handleBlur = () => {
|
||
console.log('blur')
|
||
}
|
||
|
||
const handleFocus = () => {
|
||
console.log('focus')
|
||
// console.log(formName.applicationSystem)
|
||
// formName.applicationSystem = []
|
||
systemOptions.value = systemOptions2.value
|
||
// systemOptions.value = []
|
||
}
|
||
|
||
// const filterOption = (input, option) => {
|
||
// return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
// }
|
||
|
||
onBeforeUnmount(() => {
|
||
mybus.off('reomveOldData')
|
||
})
|
||
return {
|
||
formRef,
|
||
formName,
|
||
instanceIdUrl,
|
||
formUrl,
|
||
processStartHandle,
|
||
resetFields,
|
||
startProcess,
|
||
options,
|
||
fileList,
|
||
list,
|
||
headers: {
|
||
authorization: 'authorization-text',
|
||
},
|
||
handleChange,
|
||
applySuccess,
|
||
disabled,
|
||
baseURL,
|
||
beforeUpload,
|
||
dataList,
|
||
systemHandleChange,
|
||
systemHandleSearch,
|
||
handleBlur,
|
||
handleFocus,
|
||
systemOptions,
|
||
applicationSceneOpthion,
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
#apply-container {
|
||
// background-color: #f5f8fc;
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0.8rem auto 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
aside {
|
||
width: 282px;
|
||
height: 96%;
|
||
overflow-y: auto;
|
||
background-color: #fff;
|
||
margin: 1% 0 3%;
|
||
}
|
||
article {
|
||
width: 1090px;
|
||
height: 99%;
|
||
overflow-y: auto;
|
||
background-color: #fff;
|
||
margin: 1% auto;
|
||
}
|
||
.form-container {
|
||
padding: 20px 20px 30px 20px;
|
||
.title {
|
||
font-size: 20px;
|
||
color: #000;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.base-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
:deep(.ant-form-item-label) {
|
||
label {
|
||
color: #666;
|
||
font-size: 16px;
|
||
&::after {
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
:deep(.ant-form-item-required) {
|
||
&::before {
|
||
font-size: 8px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-input) {
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
}
|
||
.success {
|
||
div {
|
||
width: 100px;
|
||
margin: 80px auto 40px;
|
||
}
|
||
text-align: center;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
}
|
||
.applicationScene {
|
||
:deep(.ant-select-selector) {
|
||
overflow-x: scroll;
|
||
}
|
||
:deep(.ant-select-selection-overflow) {
|
||
flex-wrap: nowrap;
|
||
}
|
||
}
|
||
textarea {
|
||
resize: none;
|
||
font-size: 14px;
|
||
}
|
||
.bottom-btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
// position: fixed;
|
||
}
|
||
</style>
|