|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<a-modal v-model:open="visible" title="工单上报" @ok="handleOk" width="70%"> |
|
|
|
<a-form :model="form" layout="vertical"> |
|
|
|
<a-modal v-model:open="visible" title="工单上报" @ok="handleOk" width="70%" @cancel="closeModal"> |
|
|
|
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<a-form-item label="所属项目" name="projectName"> |
|
|
|
@ -8,6 +8,29 @@ |
|
|
|
v-model:value="form.projectName" |
|
|
|
:options="projectNameOptions" |
|
|
|
placeholder="请选择" |
|
|
|
@change="projectNameChange" |
|
|
|
:fieldNames="{ |
|
|
|
label: 'projectName', |
|
|
|
value: 'projectName', |
|
|
|
options: 'options', |
|
|
|
}" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<a-form-item label="所属合同" name="contractName"> |
|
|
|
<a-select |
|
|
|
v-model:value="form.contractName" |
|
|
|
:options="contractNameOptions" |
|
|
|
placeholder="请选择" |
|
|
|
:disabled="!form.projectName" |
|
|
|
:fieldNames="{ |
|
|
|
label: 'contractName', |
|
|
|
value: 'contractName', |
|
|
|
options: 'options', |
|
|
|
}" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
@ -23,23 +46,19 @@ |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="报修人员" name="repairer"> |
|
|
|
<a-input v-model:value="form.repairer" placeholder="请输入" /> |
|
|
|
<a-input v-model:value="form.repairer" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="响应级别"> |
|
|
|
<a-select |
|
|
|
v-model:value="form.responseLevel" |
|
|
|
:options="responseLevelOptions" |
|
|
|
placeholder="请选择" |
|
|
|
/> |
|
|
|
<a-form-item label="响应级别" name="responseLevel"> |
|
|
|
<a-select v-model:value="form.responseLevel" :options="responseLevelOptions" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="响应时限"> |
|
|
|
<a-input v-model:value="form.responseTime" placeholder="请输入" /> |
|
|
|
<a-form-item label="响应时限" name="responseTime"> |
|
|
|
<a-input v-model:value="form.responseTime" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
@ -48,8 +67,7 @@ |
|
|
|
<a-form-item label="故障大类" name="faultCategory"> |
|
|
|
<a-select |
|
|
|
v-model:value="form.faultCategory" |
|
|
|
:options="[{ value: '前端' }]" |
|
|
|
placeholder="请选择" |
|
|
|
:options="[{ value: '前端' }, { value: '后端' }]" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
@ -58,44 +76,63 @@ |
|
|
|
<a-select |
|
|
|
v-model:value="form.faultSubcategory" |
|
|
|
:options="faultSubcategoryOptions" |
|
|
|
placeholder="请选择" |
|
|
|
:fieldNames="{ |
|
|
|
label: 'typeName', |
|
|
|
value: 'id', |
|
|
|
options: 'options', |
|
|
|
}" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="故障机构" name="institution"> |
|
|
|
<a-form-item label="所属机构" name="organizationName"> |
|
|
|
<a-select |
|
|
|
v-model:value="form.institution" |
|
|
|
:options="institutionOptions" |
|
|
|
placeholder="请选择" |
|
|
|
v-model:value="form.organizationName" |
|
|
|
:options="organizationNameOptions" |
|
|
|
:fieldNames="{ |
|
|
|
label: 'organizationName', |
|
|
|
value: 'organizationName', |
|
|
|
options: 'options', |
|
|
|
}" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="故障地点" name="faultLocation"> |
|
|
|
<a-input v-model:value="form.faultLocation" placeholder="请输入" /> |
|
|
|
<a-select |
|
|
|
v-model:value="form.faultLocation" |
|
|
|
:options="faultLocationOptions" |
|
|
|
@change="faultLocationChange" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<div id="amapContainer" style="width: 100%; height: 500px"></div> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<a-form-item label="故障描述" name="faultDescription"> |
|
|
|
<a-textarea v-model:value="form.faultDescription" :rows="4" placeholder="请输入" /> |
|
|
|
<a-textarea v-model:value="form.faultDescription" :rows="4" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<a-form-item label="故障图片" name="faultImg"> |
|
|
|
<a-form-item label="故障图片" name="attachments"> |
|
|
|
<a-upload |
|
|
|
v-model:file-list="form.faultImg" |
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|
|
|
v-model:file-list="fileLists" |
|
|
|
:action="`${apiUrl}/resource/oss/upload`" |
|
|
|
:headers="headers" |
|
|
|
@change="handleChange" |
|
|
|
> |
|
|
|
<a-button type="primary"> 上传 </a-button> |
|
|
|
</a-upload> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
@ -112,7 +149,6 @@ |
|
|
|
<a-select |
|
|
|
v-model:value="form.maintenanceRequirement" |
|
|
|
:options="maintenanceRequirementOptions" |
|
|
|
placeholder="请选择" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
@ -120,7 +156,7 @@ |
|
|
|
<a-row :gutter="[16, 16]" v-if="form.isDispatched == 1"> |
|
|
|
<a-col :span="24"> |
|
|
|
<a-form-item label="派遣意见" name="dispatchOpinion"> |
|
|
|
<a-textarea v-model:value="form.dispatchOpinion" :rows="4" placeholder="请输入" /> |
|
|
|
<a-textarea v-model:value="form.dispatchOpinion" :rows="4" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
@ -130,27 +166,56 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { reactive, ref } from 'vue'; |
|
|
|
|
|
|
|
import { |
|
|
|
getInfo, |
|
|
|
getSubcategoryType, |
|
|
|
workOrderAdd, |
|
|
|
getProjectInfo, |
|
|
|
getOrganizationType, |
|
|
|
getContractNamesByProjectName, |
|
|
|
} from './api'; |
|
|
|
import { message } from 'ant-design-vue'; |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
import { getToken } from '@/utils/auth'; |
|
|
|
import { useGlobSetting } from '@/hooks/setting'; |
|
|
|
export default { |
|
|
|
setup() { |
|
|
|
const visible = ref(false); |
|
|
|
const form = reactive({ |
|
|
|
projectName: '', |
|
|
|
contractName: null, |
|
|
|
isAccident: null, |
|
|
|
repairer: '', |
|
|
|
responseTime: '', |
|
|
|
responseLevel: '', |
|
|
|
faultCategory: '', |
|
|
|
faultSubcategory: '', |
|
|
|
institution: '', |
|
|
|
faultCategory: null, |
|
|
|
faultSubcategory: null, |
|
|
|
organizationName: '', |
|
|
|
faultLocation: '', |
|
|
|
faultDescription: '', |
|
|
|
faultImg: [], |
|
|
|
attachments: null, |
|
|
|
isDispatched: null, |
|
|
|
maintenanceRequirement: '', |
|
|
|
maintenanceRequirement: null, |
|
|
|
dispatchOpinion: '', |
|
|
|
longitude: '', |
|
|
|
latitude: '', |
|
|
|
}); |
|
|
|
//下拉框 |
|
|
|
const projectNameOptions = ref([]); |
|
|
|
const getProjectNameOptions = async () => { |
|
|
|
const res = await getProjectInfo(); |
|
|
|
projectNameOptions.value = res; |
|
|
|
}; |
|
|
|
const projectNameChange = async (val) => { |
|
|
|
const res = await getContractNamesByProjectName({ projectName: val }); |
|
|
|
contractNameOptions.value = res; |
|
|
|
}; |
|
|
|
const contractNameOptions = ref([]); |
|
|
|
const organizationNameOptions = ref([]); |
|
|
|
const getOrganizationNameOptions = async () => { |
|
|
|
const res = await getOrganizationType(); |
|
|
|
organizationNameOptions.value = res.rows; |
|
|
|
}; |
|
|
|
const responseLevelOptions = [ |
|
|
|
{ |
|
|
|
value: 0, |
|
|
|
@ -166,57 +231,134 @@ |
|
|
|
}, |
|
|
|
]; |
|
|
|
const maintenanceRequirementOptions = [ |
|
|
|
{ |
|
|
|
value: 0, |
|
|
|
label: '常规', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: '紧急', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: '特级', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const institutionOptions = [ |
|
|
|
{ |
|
|
|
value: 0, |
|
|
|
label: '常规', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: '紧急', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: '特级', |
|
|
|
label: '新增', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const faultSubcategoryOptions = [ |
|
|
|
const faultLocationOptions = [ |
|
|
|
{ |
|
|
|
value: 0, |
|
|
|
label: '常规', |
|
|
|
value: '1', |
|
|
|
label: 'a', |
|
|
|
latitude: '29.8537459', |
|
|
|
longitude: '121.5591519', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: '紧急', |
|
|
|
value: '2', |
|
|
|
label: 'b', |
|
|
|
latitude: '29.8572957 ', |
|
|
|
longitude: '121.5611743', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: '特级', |
|
|
|
value: '3', |
|
|
|
label: 'c', |
|
|
|
latitude: '29.8537459', |
|
|
|
longitude: '121.5591519', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const faultLocationChange = (val) => { |
|
|
|
const obj = faultLocationOptions.find((i) => { |
|
|
|
return (i.value = val); |
|
|
|
}); |
|
|
|
form.longitude = obj.longitude; |
|
|
|
form.latitude = obj.latitude; |
|
|
|
initMap(obj.longitude, obj.latitude, obj.organizationName); |
|
|
|
}; |
|
|
|
const faultSubcategoryOptions = ref([]); |
|
|
|
const getFaultSubcategoryOptions = async () => { |
|
|
|
const res = await getSubcategoryType(); |
|
|
|
faultSubcategoryOptions.value = res.rows; |
|
|
|
}; |
|
|
|
const showModal = () => { |
|
|
|
visible.value = true; |
|
|
|
getFaultSubcategoryOptions(); |
|
|
|
getProjectNameOptions(); |
|
|
|
getOrganizationNameOptions(); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleOk = () => { |
|
|
|
console.log('Form Data:', form); |
|
|
|
// 在此处可以添加工单上报验证逻辑 |
|
|
|
visible.value = false; |
|
|
|
formRef.value.validate().then((valid) => { |
|
|
|
if (valid) { |
|
|
|
let params = {}; |
|
|
|
for (let i in form) { |
|
|
|
params[i] = form[i]; |
|
|
|
} |
|
|
|
workOrderAdd(params).then((_) => { |
|
|
|
message.success('操作成功'); |
|
|
|
closeModal(); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
//地图 |
|
|
|
const map = ref(null); |
|
|
|
const initMap = async (longitude, latitude, organizationName) => { |
|
|
|
try { |
|
|
|
// 加载高德地图 JavaScript API |
|
|
|
await AMapLoader.load({ |
|
|
|
key: '786a2e7cc6d4be5ba1d6174a0aa10f2b', |
|
|
|
version: '2.0', |
|
|
|
plugins: [], |
|
|
|
}); |
|
|
|
|
|
|
|
// 初始化地图 |
|
|
|
map.value = new AMap.Map('amapContainer', { |
|
|
|
zoom: 17, |
|
|
|
center: [longitude, latitude], |
|
|
|
}); |
|
|
|
|
|
|
|
// 添加标记（可选） |
|
|
|
const marker = new AMap.Marker({ |
|
|
|
position: new AMap.LngLat(longitude, latitude), |
|
|
|
title: organizationName, |
|
|
|
}); |
|
|
|
const markerList = [marker]; |
|
|
|
map.value.add(markerList); |
|
|
|
} catch (error) { |
|
|
|
console.error('加载高德地图失败:', error); |
|
|
|
} |
|
|
|
}; |
|
|
|
const closeModal = () => { |
|
|
|
formRef.value.resetFields(); |
|
|
|
fileLists.value=[] |
|
|
|
visible.value = false; |
|
|
|
map.value?.destroy(); |
|
|
|
}; |
|
|
|
const formRef = ref(); |
|
|
|
const rules = { |
|
|
|
projectName: [{ required: true, message: '请选择' }], |
|
|
|
contractName: [{ required: true, message: '请选择' }], |
|
|
|
isAccident: [{ required: true, message: '请选择' }], |
|
|
|
repairer: [{ required: true, message: '请输入' }], |
|
|
|
faultLocation: [{ required: true, message: '请输入' }], |
|
|
|
organizationName: [{ required: true, message: '请选择' }], |
|
|
|
responseTime: [{ required: true, message: '请输入' }], |
|
|
|
responseLevel: [{ required: true, message: '请选择' }], |
|
|
|
faultCategory: [{ required: true, message: '请选择' }], |
|
|
|
faultSubcategory: [{ required: true, message: '请选择' }], |
|
|
|
faultDescription: [{ required: true, message: '请输入' }], |
|
|
|
isDispatched: [{ required: true, message: '请选择' }], |
|
|
|
}; |
|
|
|
//上传功能 |
|
|
|
const fileLists = ref([]); |
|
|
|
const globSetting = useGlobSetting(); |
|
|
|
const { apiUrl, clientId } = globSetting; |
|
|
|
const handleChange = (info) => { |
|
|
|
if (info.fileList.length > 0) { |
|
|
|
form.attachments = []; |
|
|
|
info.fileList.forEach((i) => { |
|
|
|
if (i.status == 'done') { |
|
|
|
form.attachments.push({ |
|
|
|
url: i.response?.data.url || i.url, |
|
|
|
name: i.response?.data.fileName || i.name, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
form.attachments = null; |
|
|
|
} |
|
|
|
console.log(fileLists); |
|
|
|
}; |
|
|
|
return { |
|
|
|
visible, |
|
|
|
form, |
|
|
|
@ -224,8 +366,23 @@ |
|
|
|
handleOk, |
|
|
|
responseLevelOptions, |
|
|
|
maintenanceRequirementOptions, |
|
|
|
institutionOptions, |
|
|
|
faultSubcategoryOptions, |
|
|
|
faultLocationOptions, |
|
|
|
projectNameOptions, |
|
|
|
contractNameOptions, |
|
|
|
organizationNameOptions, |
|
|
|
faultLocationChange, |
|
|
|
projectNameChange, |
|
|
|
closeModal, |
|
|
|
formRef, |
|
|
|
rules, |
|
|
|
apiUrl, |
|
|
|
headers: { |
|
|
|
Authorization: 'Bearer ' + getToken(), |
|
|
|
clientId, |
|
|
|
}, |
|
|
|
handleChange, |
|
|
|
fileLists, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
wbc
2 weeks ago