You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
405 lines
13 KiB
405 lines
13 KiB
<template>
|
|
<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">
|
|
<a-select
|
|
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',
|
|
}"
|
|
@change="contractNameChange"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="运维单位" name="ioCompany">
|
|
<a-input v-model:value="form.ioCompany" disabled/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="是否事故" name="isAccident">
|
|
<a-radio-group v-model:value="form.isAccident">
|
|
<a-radio value="是">是</a-radio>
|
|
<a-radio value="否">否</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<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="响应时限" name="responseTime">
|
|
<a-input v-model:value="form.responseTime" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<a-form-item label="故障大类" name="faultCategory">
|
|
<a-select
|
|
v-model:value="form.faultCategory"
|
|
:options="[{ value: '前端' }, { value: '后端' }]"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="故障小类" name="faultSubcategory">
|
|
<a-select
|
|
v-model:value="form.faultSubcategory"
|
|
:options="faultSubcategoryOptions"
|
|
:fieldNames="{
|
|
label: 'typeName',
|
|
value: 'typeName',
|
|
options: 'options',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<a-form-item label="所属机构" name="organizationName">
|
|
<a-select
|
|
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-select
|
|
v-model:value="form.faultLocation"
|
|
:options="faultLocationOptions"
|
|
@change="faultLocationChange"
|
|
:fieldNames="{
|
|
label: 'pointName',
|
|
value: 'pointName',
|
|
options: 'options',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div id="waitPatrolMap" 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" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="故障图片" name="attachments">
|
|
<a-upload
|
|
v-model:file-list="fileLists"
|
|
:action="`${apiUrl}/resource/oss/upload`"
|
|
:headers="headers"
|
|
accept='.jpg,.jpeg,.png,.gif,.webp'
|
|
@change="handleChange"
|
|
>
|
|
<a-button type="primary"> 上传图片 </a-button>
|
|
</a-upload>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<a-form-item label="是否派遣" name="isDispatched">
|
|
<a-radio-group v-model:value="form.isDispatched">
|
|
<a-radio value="是">是</a-radio>
|
|
<a-radio value="否">否</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12" v-if="form.isDispatched == '是'">
|
|
<a-form-item label="维护要求" name="maintenanceRequirement">
|
|
<a-select
|
|
v-model:value="form.maintenanceRequirement"
|
|
:options="maintenanceRequirementOptions"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]" v-if="form.isDispatched == '是'">
|
|
<a-col :span="24">
|
|
<a-form-item label="派遣意见" name="dispatchOpinion">
|
|
<a-textarea v-model:value="form.dispatchOpinion" :rows="4" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive, ref } from 'vue';
|
|
import {
|
|
getInfo,
|
|
getSubcategoryType,
|
|
workOrderAdd,
|
|
getProjectInfo,
|
|
getOrganizationType,
|
|
getContractNamesByProjectName,
|
|
getIoCompanyByName
|
|
} 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';
|
|
import {queryPointNames} from '@/api/common/index'
|
|
export default {
|
|
setup() {
|
|
const visible = ref(false);
|
|
const form = reactive({
|
|
projectName: '',
|
|
contractName: null,
|
|
isAccident: null,
|
|
responseTime: '',
|
|
responseLevel: '',
|
|
faultCategory: null,
|
|
faultSubcategory: null,
|
|
organizationName: '',
|
|
faultLocation: '',
|
|
faultDescription: '',
|
|
attachments: null,
|
|
isDispatched: null,
|
|
maintenanceRequirement: null,
|
|
dispatchOpinion: '',
|
|
longitude: '',
|
|
latitude: '',
|
|
ioCompany:''
|
|
});
|
|
//下拉框
|
|
const contractNameChange = async(val) =>{
|
|
const res = await getIoCompanyByName(val)
|
|
form.ioCompany = res
|
|
}
|
|
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: '常规',
|
|
},
|
|
{
|
|
value: '紧急',
|
|
},
|
|
{
|
|
value: '特级',
|
|
},
|
|
];
|
|
const maintenanceRequirementOptions = [
|
|
{
|
|
value: '修复',
|
|
},
|
|
{
|
|
value: '新增',
|
|
},
|
|
{
|
|
value: '拆除',
|
|
},
|
|
{
|
|
value: '清除',
|
|
},
|
|
{
|
|
value: '其他',
|
|
},
|
|
];
|
|
const faultLocationOptions = ref([])
|
|
const getFaultLocationOptions = async() =>{
|
|
const res = await queryPointNames()
|
|
faultLocationOptions.value = res
|
|
}
|
|
const faultLocationChange = (val) => {
|
|
const obj = faultLocationOptions.value.find((i) => {
|
|
return (i.pointName = val);
|
|
});
|
|
form.longitude = obj.longitude;
|
|
form.latitude = obj.latitude;
|
|
initMap(obj.longitude, obj.latitude, obj.pointName);
|
|
};
|
|
const faultSubcategoryOptions = ref([]);
|
|
const getFaultSubcategoryOptions = async () => {
|
|
const res = await getSubcategoryType();
|
|
faultSubcategoryOptions.value = res.rows;
|
|
};
|
|
const showModal = () => {
|
|
visible.value = true;
|
|
getFaultSubcategoryOptions();
|
|
getProjectNameOptions();
|
|
getOrganizationNameOptions();
|
|
getFaultLocationOptions()
|
|
};
|
|
|
|
const handleOk = () => {
|
|
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('waitPatrolMap', {
|
|
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: '请选择' }],
|
|
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;
|
|
}
|
|
};
|
|
return {
|
|
visible,
|
|
form,
|
|
showModal,
|
|
handleOk,
|
|
responseLevelOptions,
|
|
maintenanceRequirementOptions,
|
|
faultSubcategoryOptions,
|
|
faultLocationOptions,
|
|
projectNameOptions,
|
|
contractNameOptions,
|
|
organizationNameOptions,
|
|
faultLocationChange,
|
|
projectNameChange,
|
|
closeModal,
|
|
formRef,
|
|
rules,
|
|
apiUrl,
|
|
headers: {
|
|
Authorization: 'Bearer ' + getToken(),
|
|
clientId,
|
|
},
|
|
handleChange,
|
|
fileLists,
|
|
contractNameChange
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 可选样式调整 */
|
|
.ant-modal-body {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
|