|
|
@ -1,12 +1,12 @@ |
|
|
<template> |
|
|
<template> |
|
|
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|
|
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%" @cancel="closeModal"> |
|
|
<a-form :model="form" layout="vertical"> |
|
|
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
|
|
<a-row :gutter="[16, 16]"> |
|
|
<a-row :gutter="[16, 16]"> |
|
|
<a-col :span="24"> |
|
|
<a-col :span="24"> |
|
|
<a-form-item label="项目名称" name="projectName"> |
|
|
<a-form-item label="项目名称" name="projectName"> |
|
|
<a-select |
|
|
<a-select |
|
|
v-model:value="form.projectName" |
|
|
v-model:value="form.projectName" |
|
|
:options="projectNameOptions" |
|
|
:options="projectOptions" |
|
|
placeholder="请选择" |
|
|
placeholder="请选择" |
|
|
/> |
|
|
/> |
|
|
</a-form-item> |
|
|
</a-form-item> |
|
|
@ -24,6 +24,7 @@ |
|
|
<a-form-item label="巡检时间" name="inspectionTime"> |
|
|
<a-form-item label="巡检时间" name="inspectionTime"> |
|
|
<a-date-picker |
|
|
<a-date-picker |
|
|
:show-time="{ format: 'HH:mm:ss' }" |
|
|
:show-time="{ format: 'HH:mm:ss' }" |
|
|
|
|
|
valueFormat="YYYY-MM-DD HH:mm:ss" |
|
|
v-model:value="form.inspectionTime" |
|
|
v-model:value="form.inspectionTime" |
|
|
placeholder="请选择" |
|
|
placeholder="请选择" |
|
|
/> |
|
|
/> |
|
|
@ -69,7 +70,7 @@ |
|
|
<a-col :span="24"> |
|
|
<a-col :span="24"> |
|
|
<a-form-item label="巡检照片" name="inspectionPhoto"> |
|
|
<a-form-item label="巡检照片" name="inspectionPhoto"> |
|
|
<a-upload |
|
|
<a-upload |
|
|
v-model:file-list="inspectionPhotoList" |
|
|
v-model:file-list="form.inspectionPhoto" |
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|
|
> |
|
|
> |
|
|
<a-button type="primary"> 上传 </a-button> |
|
|
<a-button type="primary"> 上传 </a-button> |
|
|
@ -77,7 +78,7 @@ |
|
|
</a-form-item> |
|
|
</a-form-item> |
|
|
</a-col> |
|
|
</a-col> |
|
|
</a-row> |
|
|
</a-row> |
|
|
<div v-if="title == '新增后端巡查日报'"> |
|
|
<!-- <div v-if="title == '新增后端巡查日报'"> |
|
|
<a-table :dataSource="inspectionReportTable" :columns="inspectionReportColumns" bordered> |
|
|
<a-table :dataSource="inspectionReportTable" :columns="inspectionReportColumns" bordered> |
|
|
<template #bodyCell="{ column }"> |
|
|
<template #bodyCell="{ column }"> |
|
|
<template v-if="column.key === 'action'"> |
|
|
<template v-if="column.key === 'action'"> |
|
|
@ -85,19 +86,21 @@ |
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
</a-table> |
|
|
</a-table> |
|
|
</div> |
|
|
</div> --> |
|
|
</a-form> |
|
|
</a-form> |
|
|
</a-modal> |
|
|
</a-modal> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { reactive, ref } from 'vue'; |
|
|
import { reactive, ref, onMounted } from 'vue'; |
|
|
|
|
|
import { message } from 'ant-design-vue'; |
|
|
|
|
|
import { getInfo, add, update, getProjectInfo } from './api'; |
|
|
export default { |
|
|
export default { |
|
|
setup() { |
|
|
setup() { |
|
|
const title = ref('新增前端巡检日报'); |
|
|
const title = ref('新增'); |
|
|
const attachmentList = ref([]); |
|
|
const formRef = ref(); |
|
|
const inspectionPhotoList = ref([]); |
|
|
// const attachmentList = ref([]); |
|
|
|
|
|
// const inspectionPhotoList = ref([]); |
|
|
const visible = ref(false); |
|
|
const visible = ref(false); |
|
|
const form = reactive({ |
|
|
const form = reactive({ |
|
|
projectName: '', |
|
|
projectName: '', |
|
|
@ -106,85 +109,121 @@ |
|
|
platformOnlineRate: null, |
|
|
platformOnlineRate: null, |
|
|
problemHandleDesc: '', |
|
|
problemHandleDesc: '', |
|
|
inspectionStatus: null, |
|
|
inspectionStatus: null, |
|
|
attachment: [], |
|
|
attachment: null, |
|
|
inspectionPhoto: '', |
|
|
inspectionPhoto: null, |
|
|
|
|
|
id: null, |
|
|
}); |
|
|
}); |
|
|
//弹窗列表 |
|
|
//弹窗列表 |
|
|
const inspectionReportTable = ref([]); |
|
|
// const inspectionReportTable = ref([]); |
|
|
const inspectionReportColumns = [ |
|
|
// const inspectionReportColumns = [ |
|
|
{ |
|
|
// { |
|
|
title: '设备地址', |
|
|
// title: '设备地址', |
|
|
dataIndex: 'deviceLocation', |
|
|
// dataIndex: 'deviceLocation', |
|
|
key: 'deviceLocation', |
|
|
// key: 'deviceLocation', |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
title: '设备名称', |
|
|
// title: '设备名称', |
|
|
dataIndex: 'deviceName', |
|
|
// dataIndex: 'deviceName', |
|
|
key: 'deviceName', |
|
|
// key: 'deviceName', |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
title: '型号', |
|
|
// title: '型号', |
|
|
dataIndex: 'type', |
|
|
// dataIndex: 'type', |
|
|
key: 'type', |
|
|
// key: 'type', |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
title: 'IP地址', |
|
|
// title: 'IP地址', |
|
|
dataIndex: 'ip', |
|
|
// dataIndex: 'ip', |
|
|
key: 'ip', |
|
|
// key: 'ip', |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
title: '检查结果', |
|
|
// title: '检查结果', |
|
|
dataIndex: 'inspectionResult', |
|
|
// dataIndex: 'inspectionResult', |
|
|
key: 'inspectionResult', |
|
|
// key: 'inspectionResult', |
|
|
}, |
|
|
// }, |
|
|
{ |
|
|
// { |
|
|
title: '详细记录', |
|
|
// title: '详细记录', |
|
|
dataIndex: 'detailLog', |
|
|
// dataIndex: 'detailLog', |
|
|
key: 'detailLog', |
|
|
// key: 'detailLog', |
|
|
}, |
|
|
// }, |
|
|
]; |
|
|
// ]; |
|
|
//下拉框 |
|
|
//下拉框 |
|
|
const projectNameOptions = [ |
|
|
const projectOptions = ref([]); |
|
|
{ |
|
|
const getProjectOptions = async () => { |
|
|
value: '1', |
|
|
const res = await getProjectInfo(); |
|
|
label: 'a', |
|
|
res.forEach((i) => { |
|
|
}, |
|
|
i.value = i.projectName; |
|
|
{ |
|
|
i.label = i.projectName; |
|
|
value: '2', |
|
|
}); |
|
|
label: 'b', |
|
|
projectOptions.value = res; |
|
|
}, |
|
|
}; |
|
|
{ |
|
|
//弹窗 |
|
|
value: '3', |
|
|
const showModal = async (type, id) => { |
|
|
label: 'c', |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
const showModal = (type, id) => { |
|
|
|
|
|
if (type == 1) { |
|
|
if (type == 1) { |
|
|
title.value = '新增前端巡查日报'; |
|
|
title.value = '新增'; |
|
|
} else if (type == 2) { |
|
|
} else if (type == 2) { |
|
|
title.value = '新增后端巡查日报'; |
|
|
title.value = '编辑'; |
|
|
console.log(id); |
|
|
const data = await getInfo(id); |
|
|
|
|
|
for (let i in form) { |
|
|
|
|
|
form[i] = data[i]; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
visible.value = true; |
|
|
visible.value = true; |
|
|
|
|
|
getProjectOptions() |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleOk = () => { |
|
|
const handleOk = () => { |
|
|
console.log('Form Data:', form); |
|
|
formRef.value.validate().then((valid) => { |
|
|
// 在此处可以添加表单验证逻辑 |
|
|
if (valid) { |
|
|
|
|
|
if (title.value == '新增') { |
|
|
|
|
|
let params = {}; |
|
|
|
|
|
for (let i in form) { |
|
|
|
|
|
params[i] = form[i]; |
|
|
|
|
|
} |
|
|
|
|
|
add(params).then((_) => { |
|
|
|
|
|
message.success('新增成功'); |
|
|
visible.value = false; |
|
|
visible.value = false; |
|
|
|
|
|
}); |
|
|
|
|
|
} else { |
|
|
|
|
|
let params = {}; |
|
|
|
|
|
for (let i in form) { |
|
|
|
|
|
params[i] = form[i]; |
|
|
|
|
|
} |
|
|
|
|
|
update(params).then((_) => { |
|
|
|
|
|
message.success('编辑成功'); |
|
|
|
|
|
visible.value = false; |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
const closeModal = () => { |
|
|
|
|
|
formRef.value.resetFields(); |
|
|
|
|
|
visible.value = false; |
|
|
|
|
|
}; |
|
|
|
|
|
//规则 |
|
|
|
|
|
const rules = { |
|
|
|
|
|
projectName: [{ required: true, message: '请选择' }], |
|
|
|
|
|
inspectionPart: [{ required: true, message: '请输入' }], |
|
|
|
|
|
inspectionTime: [{ required: true, message: '请输入' }], |
|
|
|
|
|
platformOnlineRate: [{ required: true, message: '请输入' }], |
|
|
|
|
|
problemHandleDesc: [{ required: true, message: '请输入' }], |
|
|
|
|
|
inspectionStatus: [{ required: true, message: '请输入' }], |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
visible, |
|
|
visible, |
|
|
title, |
|
|
title, |
|
|
form, |
|
|
form, |
|
|
showModal, |
|
|
showModal, |
|
|
handleOk, |
|
|
handleOk, |
|
|
attachmentList, |
|
|
// attachmentList, |
|
|
inspectionPhotoList, |
|
|
// inspectionPhotoList, |
|
|
projectNameOptions, |
|
|
projectOptions, |
|
|
inspectionReportTable, |
|
|
// inspectionReportTable, |
|
|
inspectionReportColumns, |
|
|
// inspectionReportColumns, |
|
|
|
|
|
formRef, |
|
|
|
|
|
rules, |
|
|
|
|
|
closeModal, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
|
wbc
3 months ago