yebaochen
2 months ago
18 changed files with 2047 additions and 6 deletions
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'projectName', |
|||
label: '项目名称', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '所属项目', |
|||
dataIndex: 'projectName', |
|||
}, |
|||
{ |
|||
title: '所属合同', |
|||
dataIndex: 'contractName', |
|||
}, |
|||
{ |
|||
title: '延期原因', |
|||
dataIndex: 'delayReason', |
|||
}, |
|||
{ |
|||
title: '延期前时间', |
|||
dataIndex: 'beforeDelayTime', |
|||
}, |
|||
{ |
|||
title: '延期后时间', |
|||
dataIndex: 'AfterDelayTime', |
|||
}, |
|||
{ |
|||
title: '处理结果', |
|||
dataIndex: 'handleResult', |
|||
}, |
|||
]; |
|||
@ -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> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="showFaultModal">审核</a-button> |
|||
<a-button type="primary" @click="showDrawer">详情</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> </template> |
|||
</template> |
|||
</BasicTable> |
|||
<faultModal ref="falutModalRef" /> |
|||
<detailDrawer ref="detailDrawerRef" @open-modal="showFaultModal" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import faultModal from './faultModal.vue'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '延期审核', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'patroling', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//弹窗内容 |
|||
const falutModalRef = ref(); |
|||
const showFaultModal = () => { |
|||
falutModalRef.value.showModal(); |
|||
}; |
|||
//详情抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const showDrawer = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
// 前往审批记录页面 |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,77 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
label: '编号', |
|||
field: 'workOrderInfoId', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '输入编号', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'fixRange', |
|||
label: '报修范围', |
|||
component: 'RangePicker', |
|||
}, |
|||
{ |
|||
label: '地址', |
|||
field: 'location', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '输入天数', |
|||
}, |
|||
}, |
|||
]; |
|||
//列表展示
|
|||
const responseLevelOptions = [ |
|||
{ |
|||
value: 0, |
|||
label: '常规', |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '紧急', |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '特级', |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '编号', |
|||
dataIndex: 'workOrderInfoId', |
|||
}, |
|||
{ |
|||
title: '报修时间', |
|||
dataIndex: 'fixTime', |
|||
}, |
|||
{ |
|||
title: '响应级别', |
|||
dataIndex: 'responseLevel', |
|||
customRender({ text }) { |
|||
return responseLevelOptions.find((i) => { |
|||
return i.value == text; |
|||
})?.label; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '故障描述', |
|||
dataIndex: 'faultDescription', |
|||
}, |
|||
{ |
|||
title: '故障地点', |
|||
dataIndex: 'faultLocation', |
|||
}, |
|||
{ |
|||
title: '处理时限', |
|||
dataIndex: 'handleTime', |
|||
}, |
|||
{ |
|||
title: '当前状态', |
|||
dataIndex: 'status', |
|||
}, |
|||
]; |
|||
@ -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> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="showFaultModal">审核</a-button> |
|||
<a-button type="primary" @click="showDrawer">详情</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> </template> |
|||
</template> |
|||
</BasicTable> |
|||
<faultModal ref="falutModalRef" /> |
|||
<detailDrawer ref="detailDrawerRef" @open-modal="showFaultModal" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import faultModal from './faultModal.vue'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '工单审核', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'patroling', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//弹窗内容 |
|||
const falutModalRef = ref(); |
|||
const showFaultModal = () => { |
|||
falutModalRef.value.showModal(); |
|||
}; |
|||
//详情抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const showDrawer = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
// 前往审批记录页面 |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,185 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
//列表展示
|
|||
const responseLevelOptions = [ |
|||
{ |
|||
value: 0, |
|||
label: '常规', |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '紧急', |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '特级', |
|||
}, |
|||
]; |
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'projectName', |
|||
label: '项目名称', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'projectName', |
|||
label: '响应级别', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: responseLevelOptions, |
|||
}, |
|||
}, |
|||
{ |
|||
label: '编号', |
|||
field: 'workOrderInfoId', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '输入编号', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'fixRange', |
|||
label: '报修范围', |
|||
component: 'RangePicker', |
|||
}, |
|||
{ |
|||
label: '地址', |
|||
field: 'location', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '输入天数', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'status', |
|||
label: '状态', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'faultCategory', |
|||
label: '故障大类', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'faultSubcategory', |
|||
label: '故障小类', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'institution', |
|||
label: '所属机构', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '编号', |
|||
dataIndex: 'workOrderInfoId', |
|||
}, |
|||
{ |
|||
title: '报修时间', |
|||
dataIndex: 'fixTime', |
|||
}, |
|||
{ |
|||
title: '响应级别', |
|||
dataIndex: 'responseLevel', |
|||
customRender({ text }) { |
|||
return responseLevelOptions.find((i) => { |
|||
return i.value == text; |
|||
})?.label; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '故障描述', |
|||
dataIndex: 'faultDescription', |
|||
}, |
|||
{ |
|||
title: '故障地点', |
|||
dataIndex: 'faultLocation', |
|||
}, |
|||
{ |
|||
title: '当前状态', |
|||
dataIndex: 'status', |
|||
}, |
|||
]; |
|||
@ -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> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="showFaultModal">故障上报</a-button> |
|||
<a-button type="primary" @click="showFaultModal">批量上报</a-button> |
|||
<a-button type="primary" @click="showDrawer">派遣</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> </template> |
|||
</template> |
|||
</BasicTable> |
|||
<faultModal ref="falutModalRef" /> |
|||
<detailDrawer ref="detailDrawerRef" @open-modal="showFaultModal" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import faultModal from './faultModal.vue'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
defineOptions({ name: 'OrderSend' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '工单派遣', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'patroling', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//弹窗内容 |
|||
const falutModalRef = ref(); |
|||
const showFaultModal = () => { |
|||
falutModalRef.value.showModal(); |
|||
}; |
|||
//详情抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const showDrawer = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
// 前往审批记录页面 |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue