yebaochen
4 months ago
5 changed files with 519 additions and 60 deletions
@ -1,8 +1,9 @@ |
|||||
import type { App } from 'vue'; |
import type { App } from 'vue'; |
||||
import { Button } from './Button'; |
// import { Button } from './Button';
|
||||
import { Input, Layout } from 'ant-design-vue'; |
// import { Input, Layout } from 'ant-design-vue';
|
||||
import VXETable from 'vxe-table'; |
import VXETable from 'vxe-table'; |
||||
|
import Antd from 'ant-design-vue'; |
||||
|
|
||||
export function registerGlobComp(app: App) { |
export function registerGlobComp(app: App) { |
||||
app.use(Input).use(Button).use(Layout).use(VXETable); |
app.use(Antd).use(VXETable); |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,245 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- 抽屉组件 --> |
||||
|
<a-drawer |
||||
|
title="工单派遣详情" |
||||
|
placement="right" |
||||
|
:closable="true" |
||||
|
:open="visible" |
||||
|
@close="onClose" |
||||
|
width="600px" |
||||
|
> |
||||
|
<a-tabs v-model:activeKey="activeKey"> |
||||
|
<a-tab-pane key="1" tab="详细信息"> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div>所属项目:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div>所属合同:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<div>编号:</div> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<div>报修人员:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<div>状态:</div> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<div>待处理人:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<div>报修时间:</div> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<div>是否事故:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<div>故障大类:</div> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<div>故障小类:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<div>所属机构:</div> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<div>响应级别:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
x |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="2" tab="处理信息" force-render> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div>维修人员:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div>修复时间:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div>修复结果:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div>费用情况:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div>处理图片:</div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="3" tab="流程信息"> |
||||
|
<div style="margin-left: 20px"> |
||||
|
<a-timeline> |
||||
|
<a-timeline-item> |
||||
|
<template #dot>故障上报</template> |
||||
|
<div class="timeText">Create a services site 2015-09-01</div> |
||||
|
</a-timeline-item> |
||||
|
<a-timeline-item> |
||||
|
<template #dot>故障派遣</template> |
||||
|
<div class="timeText">Create a services site 2015-09-01</div> |
||||
|
</a-timeline-item> |
||||
|
<a-timeline-item> |
||||
|
<template #dot>故障接单</template> |
||||
|
<div class="timeText">Create a services site 2015-09-01</div> |
||||
|
</a-timeline-item> |
||||
|
<a-timeline-item> |
||||
|
<template #dot>故障处理</template> |
||||
|
<div class="timeText">Create a services site 2015-09-01</div> |
||||
|
</a-timeline-item> |
||||
|
<a-timeline-item> |
||||
|
<template #dot>预审</template> |
||||
|
<div class="timeText">Create a services site 2015-09-01</div> |
||||
|
</a-timeline-item> |
||||
|
<a-timeline-item> |
||||
|
<template #dot>初审</template> |
||||
|
<div class="timeText">Create a services site 2015-09-01</div> |
||||
|
</a-timeline-item> |
||||
|
</a-timeline> |
||||
|
</div> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="4" tab="历史信息"> |
||||
|
<a-table :dataSource="historyInfo" :columns="historyColumns" bordered> |
||||
|
<template #bodyCell="{ column }"> |
||||
|
<template v-if="column.key === 'action'"> |
||||
|
<a-button type="link">查看</a-button> |
||||
|
</template> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="5" tab="延期信息"> |
||||
|
<a-table :dataSource="delayInfo" :columns="delayColumns" bordered> |
||||
|
<template #bodyCell="{ column }"> |
||||
|
<template v-if="column.key === 'action'"> |
||||
|
<a-button type="link">查看</a-button> |
||||
|
</template> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
</a-drawer> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
export default { |
||||
|
setup(props, { emit }) { |
||||
|
const visible = ref(false); |
||||
|
|
||||
|
// 打开抽屉的方法 |
||||
|
const showDrawer = () => { |
||||
|
visible.value = true; |
||||
|
}; |
||||
|
|
||||
|
// 关闭抽屉的方法 |
||||
|
const onClose = () => { |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
const activeKey = ref('1'); |
||||
|
const openModal = () => { |
||||
|
emit('openModal'); |
||||
|
}; |
||||
|
|
||||
|
const historyInfo = ref([]); |
||||
|
const historyColumns = [ |
||||
|
{ |
||||
|
title: '环节', |
||||
|
dataIndex: 'stage', |
||||
|
key: 'stage', |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
dataIndex: 'operation', |
||||
|
key: 'operation', |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作人', |
||||
|
dataIndex: 'operator', |
||||
|
key: 'operator', |
||||
|
}, |
||||
|
{ |
||||
|
title: '详细信息', |
||||
|
dataIndex: 'action', |
||||
|
key: 'action ', |
||||
|
}, |
||||
|
]; |
||||
|
const delayInfo = ref([]); |
||||
|
const delayColumns = [ |
||||
|
{ |
||||
|
title: '申请时间', |
||||
|
dataIndex: 'applyTime', |
||||
|
key: 'applyTime', |
||||
|
}, |
||||
|
{ |
||||
|
title: '申请原因', |
||||
|
dataIndex: 'applyReason', |
||||
|
key: 'applyReason', |
||||
|
}, |
||||
|
{ |
||||
|
title: '延期时间', |
||||
|
dataIndex: 'delayTime', |
||||
|
key: 'delayTime', |
||||
|
}, |
||||
|
{ |
||||
|
title: '详细信息', |
||||
|
dataIndex: 'action', |
||||
|
key: 'action ', |
||||
|
}, |
||||
|
]; |
||||
|
return { |
||||
|
visible, |
||||
|
showDrawer, |
||||
|
onClose, |
||||
|
activeKey, |
||||
|
openModal, |
||||
|
historyInfo, |
||||
|
historyColumns, |
||||
|
delayInfo, |
||||
|
delayColumns, |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可选样式调整 */ |
||||
|
.ant-btn { |
||||
|
margin: 20px; |
||||
|
} |
||||
|
|
||||
|
/* .singerDetail{ |
||||
|
margin-bottom: 10px; |
||||
|
} */ |
||||
|
div { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.timeText { |
||||
|
margin: 0 0 40px 20px; |
||||
|
color: red; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<a-modal v-model:open="visible" title="表单" @ok="handleOk" width="70%"> |
||||
|
<a-form :model="form" layout="vertical"> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="所属项目" name="projectName"> |
||||
|
<a-input v-model:value="form.projectName" placeholder="所属项目" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="是否事故" name="isAccident"> |
||||
|
<a-radio-group v-model:value="form.isAccident"> |
||||
|
<a-radio :value="1">是</a-radio> |
||||
|
<a-radio :value="0">否</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="报修人员" name="repairer"> |
||||
|
<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" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="响应时限"> |
||||
|
<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: '前端' }]" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障小类" name="faultSubcategory"> |
||||
|
<a-select v-model:value="form.faultSubcategory" :options="faultSubcategoryOptions" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障机构" name="institution"> |
||||
|
<a-select v-model:value="form.institution" :options="institutionOptions" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障地点" name="faultLocation"> |
||||
|
<a-input v-model:value="form.faultLocation" /> |
||||
|
</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" /> |
||||
|
</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="1">是</a-radio> |
||||
|
<a-radio :value="0">否</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12" v-if="form.isDispatched == 1"> |
||||
|
<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 == 1"> |
||||
|
<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'; |
||||
|
|
||||
|
export default { |
||||
|
setup() { |
||||
|
const visible = ref(false); |
||||
|
const form = reactive({ |
||||
|
projectName: '', |
||||
|
isAccident: null, |
||||
|
repairer: '', |
||||
|
responseTime: '', |
||||
|
responseLevel: '', |
||||
|
faultCategory: '', |
||||
|
faultSubcategory: '', |
||||
|
institution: '', |
||||
|
faultLocation: '', |
||||
|
faultDescription: '', |
||||
|
isDispatched: null, |
||||
|
maintenanceRequirement: '', |
||||
|
dispatchOpinion: '', |
||||
|
}); |
||||
|
//下拉框 |
||||
|
const responseLevelOptions = [ |
||||
|
{ |
||||
|
value: 0, |
||||
|
label: '常规', |
||||
|
}, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '紧急', |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '特级', |
||||
|
}, |
||||
|
]; |
||||
|
const maintenanceRequirementOptions = [ |
||||
|
{ |
||||
|
value: 0, |
||||
|
label: '常规', |
||||
|
}, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '紧急', |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '特级', |
||||
|
}, |
||||
|
]; |
||||
|
const institutionOptions = [ |
||||
|
{ |
||||
|
value: 0, |
||||
|
label: '常规', |
||||
|
}, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '紧急', |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '特级', |
||||
|
}, |
||||
|
]; |
||||
|
const faultSubcategoryOptions = [ |
||||
|
{ |
||||
|
value: 0, |
||||
|
label: '常规', |
||||
|
}, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '紧急', |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '特级', |
||||
|
}, |
||||
|
]; |
||||
|
const showModal = () => { |
||||
|
visible.value = true; |
||||
|
}; |
||||
|
|
||||
|
const handleOk = () => { |
||||
|
console.log('Form Data:', form); |
||||
|
// 在此处可以添加表单验证逻辑 |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
visible, |
||||
|
form, |
||||
|
showModal, |
||||
|
handleOk, |
||||
|
responseLevelOptions, |
||||
|
maintenanceRequirementOptions, |
||||
|
institutionOptions, |
||||
|
faultSubcategoryOptions, |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可选样式调整 */ |
||||
|
.ant-modal-body { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue