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