wbc
1 week ago
25 changed files with 1011 additions and 155 deletions
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%" @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-input v-model:value="form.projectName" disabled /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="编号" name="id"> |
|||
<a-input v-model:value="form.id" disabled /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="故障地址" name="faultLocation"> |
|||
<a-input v-model:value="form.faultLocation" disabled /> |
|||
</a-form-item> |
|||
</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" disabled/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="回退原因" name="backReason"> |
|||
<a-textarea v-model:value="form.backReason" :rows="4" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getInfo } from './api'; |
|||
import { getToken } from '@/utils/auth'; |
|||
import { useGlobSetting } from '@/hooks/setting'; |
|||
export default { |
|||
setup(props, { emit }) { |
|||
const title = ref('工单回退'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
projectName: '', |
|||
faultLocation: '', |
|||
faultDescription: '', |
|||
backReason: '', |
|||
id: null, |
|||
}); |
|||
|
|||
const showModal = async (id) => { |
|||
visible.value = true; |
|||
const data = await getInfo(id); |
|||
for (let i in form) { |
|||
form[i] = data[i]; |
|||
} |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
formRef.value.validate().then((valid) => { |
|||
if (valid) { |
|||
emit('success'); |
|||
} |
|||
}); |
|||
}; |
|||
const closeModal = () => { |
|||
formRef.value.resetFields(); |
|||
visible.value = false; |
|||
}; |
|||
const formRef = ref(); |
|||
const rules = { |
|||
backReason: [{ required: true, message: '请输入' }], |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
closeModal, |
|||
formRef, |
|||
rules, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,198 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%" @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-input v-model:value="form.projectName" disabled /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="编号" name="id"> |
|||
<a-input v-model:value="form.id" disabled /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="故障地址" name="faultLocation"> |
|||
<a-input v-model:value="form.faultLocation" disabled /> |
|||
</a-form-item> |
|||
</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" disabled/> |
|||
</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" disabled /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="响应时限" name="responseTime"> |
|||
<a-input v-model:value="form.responseTime" disabled/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="剩余时间" name="restTime"> |
|||
<a-input v-model:value="form.restTime" disabled /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="延期至" name="delayTime"> |
|||
<a-date-picker |
|||
:show-time="{ format: 'HH:mm:ss' }" |
|||
valueFormat="YYYY-MM-DD HH:mm:ss" |
|||
v-model:value="form.delayTime" |
|||
placeholder="请选择" |
|||
/> |
|||
</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="24"> |
|||
<a-form-item label="延期说明" name="delayDescription"> |
|||
<a-textarea v-model:value="form.delayDescription" :rows="4" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getInfo,getSubcategoryType } from './api'; |
|||
import { getToken } from '@/utils/auth'; |
|||
import { useGlobSetting } from '@/hooks/setting'; |
|||
export default { |
|||
setup(props, { emit }) { |
|||
const title = ref('延期申请'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
projectName: '', |
|||
contractName:'', |
|||
faultLocation: '', |
|||
faultDescription: '', |
|||
responseLevel: '', |
|||
responseTime: '', |
|||
restTime:'', |
|||
delayTime:'', |
|||
attachments: null, |
|||
delayDescription:'', |
|||
id: null, |
|||
}); |
|||
//下拉框 |
|||
const responseLevelOptions = [ |
|||
{ |
|||
value: '常规', |
|||
}, |
|||
{ |
|||
value: '紧急', |
|||
}, |
|||
{ |
|||
value: '特级', |
|||
}, |
|||
]; |
|||
const showModal = async (id) => { |
|||
visible.value = true; |
|||
const data = await getInfo(id); |
|||
for (let i in form) { |
|||
form[i] = data[i]; |
|||
} |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
formRef.value.validate().then((valid) => { |
|||
if (valid) { |
|||
emit('success'); |
|||
} |
|||
}); |
|||
}; |
|||
const closeModal = () => { |
|||
fileLists.value = []; |
|||
formRef.value.resetFields(); |
|||
visible.value = false; |
|||
}; |
|||
const formRef = ref(); |
|||
const rules = { |
|||
delayTime: [{ required: true, message: '请选择' }], |
|||
delayDescription: [{ required: true, message: '请输入' }], |
|||
attachments: [{ 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, |
|||
title, |
|||
form, |
|||
responseLevelOptions, |
|||
showModal, |
|||
handleOk, |
|||
closeModal, |
|||
formRef, |
|||
rules, |
|||
apiUrl, |
|||
headers: { |
|||
Authorization: 'Bearer ' + getToken(), |
|||
clientId, |
|||
}, |
|||
handleChange, |
|||
fileLists, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,181 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%" @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-input v-model:value="form.projectName" disabled /> |
|||
</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="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="24"> |
|||
<a-form-item label="修复结果" name="fixResult"> |
|||
<a-input v-model:value="form.fixResult" placeholder="请输入" disbaled /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="费用情况" name="cost"> |
|||
<a-input v-model:value="form.cost" placeholder="请输入" disbaled /> |
|||
</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-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getInfo,getSubcategoryType } from './api'; |
|||
import { getToken } from '@/utils/auth'; |
|||
import { useGlobSetting } from '@/hooks/setting'; |
|||
export default { |
|||
setup(props, { emit }) { |
|||
const title = ref('工单处理'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
projectName: '', |
|||
faultCategory: null, |
|||
faultSubcategory: null, |
|||
isAccident: null, |
|||
fixResult: '', |
|||
cost: null, |
|||
attachments: null, |
|||
id: null, |
|||
}); |
|||
//下拉框 |
|||
const faultSubcategoryOptions = ref([]); |
|||
const getFaultSubcategoryOptions = async () => { |
|||
const res = await getSubcategoryType(); |
|||
faultSubcategoryOptions.value = res.rows; |
|||
}; |
|||
const showModal = async (id) => { |
|||
visible.value = true; |
|||
getFaultSubcategoryOptions(); |
|||
const data = await getInfo(id); |
|||
for (let i in form) { |
|||
form[i] = data[i]; |
|||
} |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
formRef.value.validate().then((valid) => { |
|||
if (valid) { |
|||
emit('success'); |
|||
} |
|||
}); |
|||
}; |
|||
const closeModal = () => { |
|||
fileLists.value = []; |
|||
formRef.value.resetFields(); |
|||
visible.value = false; |
|||
}; |
|||
const formRef = ref(); |
|||
const rules = { |
|||
faultCategory: [{ required: true, message: '请选择' }], |
|||
faultSubcategory: [{ required: true, message: '请选择' }], |
|||
isAccident: [{ required: true, message: '请选择' }], |
|||
fixResult: [{ required: true, message: '请输入' }], |
|||
cost: [{ required: true, message: '请输入' }], |
|||
attachments: [{ 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, |
|||
title, |
|||
form, |
|||
faultSubcategoryOptions, |
|||
showModal, |
|||
handleOk, |
|||
closeModal, |
|||
formRef, |
|||
rules, |
|||
apiUrl, |
|||
headers: { |
|||
Authorization: 'Bearer ' + getToken(), |
|||
clientId, |
|||
}, |
|||
handleChange, |
|||
fileLists, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue