374 lines
11 KiB
Vue
374 lines
11 KiB
Vue
<template>
|
|
<div class="ResidentMainBox p-2 w-full">
|
|
<PageHeader title="报修详情"></PageHeader>
|
|
<div class="ResidentMainBody">
|
|
<el-row :span="24" :gutter="20">
|
|
<el-col :span="16">
|
|
<!-- 车位信息 -->
|
|
<div class="mb-10">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>报修房屋</span>
|
|
<span class="ml-20px color-blue cursor-pointer" @click="handleEdit">编辑</span>
|
|
</div>
|
|
</template>
|
|
<div class="w-full h-full CarinfoBox">
|
|
<el-row class="mb-20px">
|
|
<el-col :span="8">
|
|
<div class="carinfo_item">
|
|
<div class="label">报修房屋</div>
|
|
<div class="main">{{ form.house }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="carinfo_item">
|
|
<div class="label">维修项目</div>
|
|
<div class="main">{{ form.maintenanceItem }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="mb-20px">
|
|
<el-col :span="8">
|
|
<div class="carinfo_item">
|
|
<div class="label">报修人</div>
|
|
<div class="main">{{ form.residentName }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="carinfo_item">
|
|
<div class="label">手机号码</div>
|
|
<div class="main">{{ form.phone }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="mb-20px">
|
|
<el-col>
|
|
<div class="carinfo_item">
|
|
<div class="label">预约日期</div>
|
|
<div class="main">{{ form.orderDate }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="mb-20px">
|
|
<el-col>
|
|
<div class="carinfo_item">
|
|
<div class="label">问题描述</div>
|
|
<div class="main">{{ form.problem }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<div class="carinfo_item">
|
|
<div class="label">附件</div>
|
|
<div class="main fileImagebox">
|
|
<el-image
|
|
:preview-teleported="true"
|
|
:zoom-rate="1.2"
|
|
:max-scale="7"
|
|
:min-scale="0.2"
|
|
:preview-src-list="form.problemImageUrlList"
|
|
show-progress
|
|
:initial-index="0"
|
|
v-for="(item, index) in form.problemImageUrlList"
|
|
:key="index"
|
|
:src="splitImages(item)"
|
|
class="carinfoImage"
|
|
></el-image>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>分配工单</span>
|
|
</div>
|
|
</template>
|
|
<div class="preivewBody w-full h-full flex flex-items-start mt-2">
|
|
<div class="title">维修师傅</div>
|
|
<div class="preivewBodybox flex-1 ml-5">
|
|
<repairUser :username="form.repairName" :userid="form.repairId" @change="handleChange"></repairUser>
|
|
<div class="actions mt-5">
|
|
<el-button @click="handleSend" type="primary">确定派单</el-button>
|
|
<el-button @click="backRouter">返回</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card style="position: relative; height: 100%">
|
|
<template #header>
|
|
<div class="asideCardHeader w-full">
|
|
<div class="cardSubtitle">
|
|
<div class="line"></div>
|
|
<div class="subtitle">审批流程</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="h-full w-full">
|
|
<el-steps space="108px" direction="vertical" :active="activeStop">
|
|
<el-step>
|
|
<template #title>
|
|
<span>已提交维护信息</span>
|
|
</template>
|
|
<template #description> {{ reviewInfo.submitTime ?? '' }} </template>
|
|
</el-step>
|
|
<el-step>
|
|
<template #title>
|
|
<span>{{ reviewInfo.allocateStatus === '0' ? '待分配' : '已分配' }} </span>
|
|
</template>
|
|
<template #description>{{ reviewInfo.allocateTime ?? '等待物业派单中' }} </template>
|
|
</el-step>
|
|
<el-step>
|
|
<template #title>
|
|
<span>{{ reviewInfo.completeStatus === '0' ? '待维修' : '已维修' }} </span>
|
|
</template>
|
|
<template #description> {{ reviewInfo.completeTime ?? '维修人员进行维修' }}</template>
|
|
</el-step>
|
|
<el-step>
|
|
<template #title>
|
|
<span>完成维修 </span>
|
|
</template>
|
|
</el-step>
|
|
</el-steps>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import repairUser from '@/components/Holder/repairUser.vue';
|
|
import PageHeader from '@/components/Pageheader/index.vue';
|
|
import { getRepair, updateRepair } from '@/api/system/Repair';
|
|
import { getHousePathById } from '@/utils/house';
|
|
import { listRepairProject } from '@/api/system/RepairProject';
|
|
import { listResident } from '@/api/system/resident';
|
|
import { RepairVO } from '@/api/system/Repair/type';
|
|
import { useHouseStore } from '@/store/modules/house';
|
|
import { listRepairProcess, updateRepairProcess } from '@/api/system/repairProcess';
|
|
import { splitImages } from '@/utils';
|
|
|
|
const houseStore = useHouseStore();
|
|
const { treedata } = storeToRefs(houseStore);
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const active = ref(0);
|
|
const activeStop = ref(0);
|
|
|
|
interface formType extends RepairVO {
|
|
maintenanceItem?: string;
|
|
residentName?: string;
|
|
problemImageUrlList?: string[];
|
|
house?: string;
|
|
}
|
|
|
|
const form = ref<formType>({
|
|
'id': null,
|
|
'houseId': null,
|
|
'maintenanceItemId': null,
|
|
'problem': '',
|
|
'residentId': null,
|
|
'phone': null,
|
|
'orderDate': '',
|
|
'problemImageUrl': '',
|
|
'problemStatus': '0',
|
|
'repairDes': '',
|
|
'repairImageUrl': '',
|
|
'repairId': null
|
|
});
|
|
const userid = ref();
|
|
|
|
// 维修项目
|
|
const projectlist = ref([]);
|
|
// 住户
|
|
const residentList = ref([]);
|
|
// 审核流程
|
|
const reviewInfo = ref({
|
|
'id': '',
|
|
'repairId': '',
|
|
'submitTime': '',
|
|
'submitStatus': '0',
|
|
'allocateTime': null,
|
|
'allocateStatus': '0',
|
|
'completeTime': null,
|
|
'completeStatus': '0'
|
|
});
|
|
// ! 房屋 ====================================================================================================
|
|
async function init() {
|
|
// 项目
|
|
const projectres = await listRepairProject();
|
|
projectlist.value = projectres.rows;
|
|
// 住户
|
|
const residentlistres = await listResident();
|
|
residentList.value = residentlistres.rows;
|
|
// 报修详情
|
|
const res = await getRepair(userid.value);
|
|
form.value = res.data;
|
|
const find = projectlist.value.find((item) => item.id === form.value.maintenanceItemId);
|
|
if (find) {
|
|
if (find.parentId) {
|
|
const find2 = projectlist.value.find((item) => item.id === find.parentId);
|
|
form.value.maintenanceItem = find2.projectName + ' - ' + find.projectName;
|
|
} else {
|
|
form.value.maintenanceItem = find.projectName;
|
|
}
|
|
}
|
|
|
|
const houseinfo = getHousePathById(treedata.value, form.value.houseId, 'label');
|
|
form.value.house = houseinfo.join(' - ');
|
|
|
|
const residentinfo = residentList.value.find((item) => item.id === form.value.residentId);
|
|
form.value.residentName = residentinfo.name;
|
|
|
|
form.value.problemImageUrlList = form.value.problemImageUrl.split(',').filter((item) => item);
|
|
|
|
// 获取保修审核状态
|
|
const info = await listRepairProcess({ repairId: form.value.id, pageNum: 1, pageSize: 999999 });
|
|
if (info && info.rows.length > 0) {
|
|
reviewInfo.value = info.rows.pop();
|
|
handleReview();
|
|
}
|
|
}
|
|
|
|
// 处理审核
|
|
function handleReview() {
|
|
if (reviewInfo.value.submitStatus === '1') {
|
|
// 提交完成
|
|
active.value = 1;
|
|
activeStop.value = 1;
|
|
|
|
if (reviewInfo.value.allocateStatus === '1') {
|
|
// 分配完成
|
|
active.value = 2;
|
|
activeStop.value = 2;
|
|
// 维修完成
|
|
if (reviewInfo.value.completeStatus === '1') {
|
|
active.value = 4;
|
|
activeStop.value = 4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (route.query.id) {
|
|
userid.value = route.query.id;
|
|
init();
|
|
}
|
|
|
|
/** 派单 */
|
|
function handleSend() {
|
|
form.value.problemStatus = '1';
|
|
updateRepair(form.value).then(() => {
|
|
reviewInfo.value.allocateTime = new Date().toLocaleString().replaceAll('/', '-');
|
|
if (form.value.repairId) {
|
|
reviewInfo.value.allocateStatus = '1';
|
|
} else {
|
|
reviewInfo.value.allocateStatus = '0';
|
|
}
|
|
updateRepairProcess(reviewInfo.value).then(() => {
|
|
backRouter();
|
|
});
|
|
});
|
|
}
|
|
|
|
/** 选择维修人员 */
|
|
function handleChange(row) {
|
|
form.value.repairId = row;
|
|
}
|
|
|
|
/** 返回 */
|
|
function backRouter() {
|
|
router.push({
|
|
path: '/repair/repairlist'
|
|
});
|
|
}
|
|
|
|
function handleEdit() {
|
|
router.push({
|
|
path: '/repair/editRepair',
|
|
query: {
|
|
id: form.value.id
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ResidentMainBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.ResidentMainBody {
|
|
margin-top: 20px;
|
|
flex: 1;
|
|
.CarinfoBox {
|
|
&.gridbox {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
gap: 20px;
|
|
row-gap: 40px;
|
|
}
|
|
.carinfo_item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
.label {
|
|
font-weight: 600;
|
|
width: 80px;
|
|
text-align: right;
|
|
padding-right: 10px;
|
|
}
|
|
.carinfoImage {
|
|
margin: 10px;
|
|
width: 200px;
|
|
height: 150px;
|
|
}
|
|
}
|
|
}
|
|
.card-header,
|
|
.subtitle {
|
|
font-size: 15px;
|
|
}
|
|
.preivewBody {
|
|
font-size: 16px;
|
|
}
|
|
.repairBox {
|
|
width: 350px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
border-radius: 5px;
|
|
border: 1px solid rgba(187, 187, 187, 1);
|
|
}
|
|
&:deep(div.el-step__head.is-process) {
|
|
& > div.el-step__line {
|
|
width: 0;
|
|
border: 1px dashed gray;
|
|
background: transparent;
|
|
}
|
|
}
|
|
&:deep(.el-step.is-vertical .el-step__line) {
|
|
top: 20px;
|
|
}
|
|
&:deep(div.el-step__head.is-finish) {
|
|
& > div.el-step__line {
|
|
width: 0;
|
|
border: 1px solid var(--el-color-primary);
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|