|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <div class="detailPage">
|
|
|
+ <div class="topButton">
|
|
|
+ <a-button type="primary" @click="goBack">
|
|
|
+ {{ t('common.back') }}
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content_left">
|
|
|
+ <div class="content_left_info">
|
|
|
+ <Descriptions title="客户信息" :column="3" v-if="detailData.customer">
|
|
|
+ <DescriptionsItem label="客户名称"> {{ detailData.customer.companyName }}</DescriptionsItem>
|
|
|
+ <DescriptionsItem label="联系人"> {{ detailData.customer.customerName }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="联系电话"> {{ detailData.customer.phone }} </DescriptionsItem>
|
|
|
+ </Descriptions>
|
|
|
+ <Descriptions title="产品及故障信息" :column="3" v-if="detailData.orderReceivingVo">
|
|
|
+ <DescriptionsItem label="产品名称" v-if="detailData.repairerVo"> {{ t(`routes.device.type.${detailData.repairerVo.cameraType || 1}`) }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="产品SN码" v-if="detailData.repairerVo"> {{ detailData.repairerVo.cameraSnCode }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="保修届满日期"> {{ detailData.orderReceivingVo.warrantyExpirationDate }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="报修日期" > {{ detailData.repairerVo?.createTime }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="送修方式" v-if="detailData.customerAddress"> {{ detailData.customerAddress.sendType?'前台送修':'快递寄送' }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="保修类型"> {{ detailData.customerAddress.warrantyType == 0?'保修期内':detailData.customerAddress.warrantyType == 1?'保修期外':'非保修项目' }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="维修单号"> {{ detailData.orderReceivingVo.repairId }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="上次维修单号" :span="2"> {{ detailData.orderReceivingVo.repairerId }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="故障描述" :span="3">
|
|
|
+ <div>
|
|
|
+ <p>{{ detailData.repairerVo.faultMsg }}</p>
|
|
|
+ <ImagePreviewGroup>
|
|
|
+ <Image :width="80" v-for="item in detailData.repairerVo.faultImg" :key="item" :src="item"></Image>
|
|
|
+ </ImagePreviewGroup>
|
|
|
+ </div>
|
|
|
+ </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="机器外观">
|
|
|
+ <div>
|
|
|
+ <p>{{ detailData.repairRegisterVo?.orderFaultMsg }}</p>
|
|
|
+ <ImagePreviewGroup>
|
|
|
+ <Image :width="80" v-for="item in detailData.orderReceivingVo?.orderFaultImg" :key="item" :src="item"></Image>
|
|
|
+ </ImagePreviewGroup>
|
|
|
+ </div>
|
|
|
+ </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="售后工程师"> {{ detailData.orderReceivingVo?.sysUserName }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="接单日期"> {{ detailData.orderReceivingVo?.createTime }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="检测结果" v-if="detailData.repairRegisterVo">
|
|
|
+ <div>
|
|
|
+ <p>{{detailData.repairRegisterVo.checkResult}}</p>
|
|
|
+ <ImagePreviewGroup>
|
|
|
+ <Image :width="80" v-for="item in detailData.repairRegisterVo.checkImg" :key="item" :src="item"></Image>
|
|
|
+ </ImagePreviewGroup>
|
|
|
+ </div>
|
|
|
+ </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="检测日期"> {{ detailData.repairRegisterVo?.createTime }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="所需备件"> {{ detailData.orderReceivingVo?.shipMobile }} </DescriptionsItem>
|
|
|
+ </Descriptions>
|
|
|
+ <Descriptions title="维修清单" :column="3" layout="vertical">
|
|
|
+ <DescriptionsItem label="备件信息" :span="3">
|
|
|
+ <BasicTable @register="registerTable"></BasicTable>
|
|
|
+ </DescriptionsItem>
|
|
|
+ </Descriptions>
|
|
|
+ <Descriptions :column="3">
|
|
|
+ <DescriptionsItem label="维修工程师"> {{ detailData.repairRegisterVo?.sysUserName }}</DescriptionsItem>
|
|
|
+ <DescriptionsItem label="维修完成日期"> {{ detailData.repairRegisterVo?.overTime }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="维修记录"> {{ detailData.repairRegisterVo?.remark }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="测试工程师"> {{ detailData.RepairTestVo?.sysUserName }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="测试通过时间" :span="2"> {{ detailData.repairRegisterVo?.passTime }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="支付方式" :span="3">
|
|
|
+ <div v-if="detailData.repairPay">
|
|
|
+ <p>{{ detailData.repairPay.payType==1?'微信':detailData.repairPay.payType==2?'支付宝':'银行' }}</p>
|
|
|
+ <ImagePreviewGroup>
|
|
|
+ <Image :width="80" v-for="item in [detailData.repairPay.payImg]" :key="item" :src="item"></Image>
|
|
|
+ </ImagePreviewGroup>
|
|
|
+ </div>
|
|
|
+ </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="取回方式" v-if="detailData.customerAddress"> {{detailData.customerAddress.getType==0?'前台取回':`快递寄回 ${detailData.customerAddress.getTrackingNum}`}}</DescriptionsItem>
|
|
|
+ <DescriptionsItem label="收件信息" :span="2" v-if="detailData.customerAddress"> {{detailData.customerAddress.getAddrName}} {{ detailData.customerAddress.getAddrName }}{{ detailData.customerAddress.getAddress }} </DescriptionsItem>
|
|
|
+ </Descriptions>
|
|
|
+ <!-- <Descriptions title="单据下载" :column="3">
|
|
|
+ <DescriptionsItem label="维修记录" :span="3">
|
|
|
+ <div class="link">
|
|
|
+ <a v-for="(item,index) in ['www.baidusss.com','www.baidudd.com']" :key="index" :href="item" target="_blank">
|
|
|
+ <span v-if="index !== 0">、</span>
|
|
|
+ {{ item }}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="维修工单" :span="3">
|
|
|
+ <div class="link">
|
|
|
+ <a :href="'www.baidudd.com'" target="_blank">2022101200001维修工单.pdf </a>
|
|
|
+ </div>
|
|
|
+ </DescriptionsItem>
|
|
|
+ </Descriptions> -->
|
|
|
+ <Descriptions title="客户评价" :column="3" v-if="detailData.RepairComment">
|
|
|
+ <DescriptionsItem label="评价内容" > {{ detailData.RepairComment.comment }} </DescriptionsItem>
|
|
|
+ <DescriptionsItem label="评分"> {{ detailData.RepairComment.starRank }} </DescriptionsItem>
|
|
|
+ </Descriptions>
|
|
|
+ <Descriptions title="备注" :column="3">
|
|
|
+ <DescriptionsItem label="备注内容"> {{ detailData.repairerVo?.remark }} </DescriptionsItem>
|
|
|
+ </Descriptions>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content_right">
|
|
|
+ <Timeline>
|
|
|
+ <TimelineItem v-for="(item,indexs) in stepList" :color="indexs == 0 ?'red':'green'" :key="indexs">
|
|
|
+ <div class="timeItem">
|
|
|
+ <div class="name">
|
|
|
+ <span>{{item.remark}}</span>
|
|
|
+ <a-button style="margin-left:50px" @click="handleBut(butItem)" v-for="butItem in butList" :key="butItem" v-if="indexs == 0"> {{butItem}} </a-button>
|
|
|
+ </div>
|
|
|
+ <div class="status">{{item.sysUserName}}完成{{item.remark}} <span>{{item.createTime}}</span></div>
|
|
|
+ <div class="itemText" v-if="item.customerAddress">{{ item.customerAddress.getType==0?'前台取回':`快递寄回 ${item.customerAddress.getTrackingNum}`}}</div>
|
|
|
+ <div class="itemText" v-if="item.customerAddress">{{ item.customerAddress.sendType==0?'前台送修':`快递寄送 ${item.customerAddress.sendTrackingNum}`}}</div>
|
|
|
+ <div class="itemText" v-if="item.repairRegisterVo">检测结论: {{ item.repairRegisterVo.checkResult}}</div>
|
|
|
+ <div class="itemText">所需备件: 镜头x2、电池x1</div>
|
|
|
+ <div class="itemText" v-if="item.orderReceivingVo">机器外观: {{ item.orderReceivingVo.orderFaultMsg}}</div>
|
|
|
+ <div class="iamgeList">
|
|
|
+ <ImagePreviewGroup>
|
|
|
+ <Image :width="80" v-for="item in [logo]" :key="item" :src="item"></Image>
|
|
|
+ </ImagePreviewGroup>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </TimelineItem>
|
|
|
+ </Timeline>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom_but">
|
|
|
+ <a-button type="primary" v-for="item in butList" :key="item" @click="handleBut(item)">
|
|
|
+ {{item}}
|
|
|
+ </a-button>
|
|
|
+ <a-button type="primary" @click="goBack">
|
|
|
+ {{ t('common.back') }}
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <!-- <recoveryModal @update="reload" @register="registerRecovery" /> -->
|
|
|
+ <remarksModal @update="reload" @register="registerRemarks" />
|
|
|
+ <takingOrdersModel @update="reload" @register="registerTakingOrders" />
|
|
|
+ <quoteModel @update="reload" @register="registerQuote" />
|
|
|
+ <deliveryModal @update="reload" @register="registerDelivery" />
|
|
|
+ <payLogModal @update="reload" @register="registerPayLog" />
|
|
|
+ <partsListModal @reload="reload" @register="registerParts" />
|
|
|
+ <checkModel @update="reload" @register="registerCheck" />
|
|
|
+ <addAccessoryModel @update="reload" @register="registerAdd" />
|
|
|
+ <outModal @update="reload" @register="registerOut" />
|
|
|
+ <reviewModal @reload="reload" @register="registerReview" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, onMounted, reactive } from 'vue';
|
|
|
+import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+import { detail ,process } from '/@/api/spares';
|
|
|
+import { detailResult } from '/@/api/spares/model';
|
|
|
+import { useModal } from '/@/components/Modal';
|
|
|
+// import recoveryModal from './recoveryModal.vue';//录单
|
|
|
+import quoteModel from './quoteModel.vue';
|
|
|
+import deliveryModal from './deliveryModal.vue';
|
|
|
+import payLogModal from './payLogModal.vue';
|
|
|
+import takingOrdersModel from './takingOrdersModel.vue';
|
|
|
+import remarksModal from '../spares/remarksModal.vue';
|
|
|
+import checkModel from './checkModel.vue';
|
|
|
+import partsListModal from './partsListModal.vue';
|
|
|
+import outModal from './outModal.vue';
|
|
|
+import addAccessoryModel from './addAccessoryModel.vue';
|
|
|
+import logo from '/@/assets/images/grey-logo.png';
|
|
|
+import { BasicTable, useTable, BasicColumn, TableImg, } from '/@/components/Table';
|
|
|
+import { Timeline, TimelineItem, Descriptions, DescriptionsItem, Image, ImagePreviewGroup } from 'ant-design-vue';
|
|
|
+import { cloneDeep } from 'lodash-es';
|
|
|
+const router = useRouter();
|
|
|
+const { createMessage } = useMessage();
|
|
|
+const { t } = useI18n();
|
|
|
+const repairId = ref<string|string[]>(router.currentRoute.value.params.id || '0')
|
|
|
+const detailData = ref<detailResult>({
|
|
|
+ customer:{},
|
|
|
+ customerAddress:{},
|
|
|
+ repairerVo:{},
|
|
|
+ RepairTestVo:{},
|
|
|
+ repairRegisterVo:{},
|
|
|
+ orderReceivingVo:{},
|
|
|
+ repairPay:{},
|
|
|
+ RepairComment:{},
|
|
|
+ priceList:[],
|
|
|
+});
|
|
|
+const stepList = ref([])
|
|
|
+const butList = ref([])
|
|
|
+onMounted(() => {
|
|
|
+ getData();
|
|
|
+});
|
|
|
+let dataSource = reactive([])
|
|
|
+const columns: BasicColumn[] = [
|
|
|
+ {
|
|
|
+ title: '备件名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: 150,
|
|
|
+ },{
|
|
|
+ title: '单价(元)',
|
|
|
+ dataIndex: 'price',
|
|
|
+ width: 100,
|
|
|
+ },{
|
|
|
+ title: '数量',
|
|
|
+ dataIndex: 'count',
|
|
|
+ width: 110,
|
|
|
+ },{
|
|
|
+ title: '小计(元)',
|
|
|
+ dataIndex: 'total',
|
|
|
+ width: 140,
|
|
|
+ },
|
|
|
+]
|
|
|
+async function getData() {
|
|
|
+ let res = await detail({repairId:repairId.value})
|
|
|
+ detailData.value = res
|
|
|
+ let countItem = {
|
|
|
+ id:3,
|
|
|
+ price:null,
|
|
|
+ name:'',
|
|
|
+ count:'合计(元)',
|
|
|
+ total:0
|
|
|
+ }
|
|
|
+ dataSource = res.priceList.map(ele => {
|
|
|
+ countItem.total = countItem.total + ele.price * ele.count
|
|
|
+ return {
|
|
|
+ ...ele,
|
|
|
+ total:ele.price * ele.count
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setTableData(cloneDeep([...dataSource,countItem]));
|
|
|
+ const stepRes = await process({repairId:repairId.value})
|
|
|
+ let butTypeList = {
|
|
|
+ 0:['接单',],
|
|
|
+ 1:['检测登记',],
|
|
|
+ 2:['报价',],
|
|
|
+ 3:['修改报价',],
|
|
|
+ 4:['付款登记',],
|
|
|
+ 5:['备件出库',],
|
|
|
+ 6:['添加备件', '完成维修'],
|
|
|
+ 7:['备件回收',],
|
|
|
+ 8:['测试登记',],
|
|
|
+ 9:['付款登记',],
|
|
|
+ 10:['发货登记',],
|
|
|
+ }
|
|
|
+ butList.value = stepRes[0]?butTypeList[stepRes[0].repairStatus || 0]:['接单']
|
|
|
+ stepList.value = stepRes
|
|
|
+ console.log('repairId',dataSource,stepRes, butList.value)
|
|
|
+}
|
|
|
+function goBack() {
|
|
|
+ router.go(-1);
|
|
|
+}
|
|
|
+function handleBut(item) {
|
|
|
+ console.log('handleBut',item,stepList.value[0].repairStatus)
|
|
|
+ let status = stepList.value[0]?.repairStatus
|
|
|
+ let record = {
|
|
|
+ cameraSnCode:detailData.value.repairerVo?.cameraSnCode,
|
|
|
+ cameraType:detailData.value.repairerVo?.cameraType,
|
|
|
+ repairId:detailData.value.orderReceivingVo?.repairId,
|
|
|
+ };
|
|
|
+ let openList = {
|
|
|
+ 1:openTakingOrders,//检测登记
|
|
|
+ 2:openQuoteModal,//报价
|
|
|
+ 3:openTakingOrders,//修改报价
|
|
|
+ 4:openPayLogModal,//付款登记
|
|
|
+ 5:registerParts,//备件出库
|
|
|
+ 7:registerParts,//备件回收
|
|
|
+ 8:openReviewModal,//测试登记
|
|
|
+ 9:openPayLogModal,//付款登记
|
|
|
+ 10:openDeliveryModal,//发货登记
|
|
|
+ 61:openAddModal,//添加备件
|
|
|
+ 62:openOutModal,//完成维修
|
|
|
+ }
|
|
|
+ openList[status](true, {
|
|
|
+ ...record,
|
|
|
+ repairManName:detailData.value.repairRegisterVo?.sysUserName,
|
|
|
+ });
|
|
|
+}
|
|
|
+function handleSubmit() {
|
|
|
+ createMessage.success(t('common.optSuccess'));
|
|
|
+}
|
|
|
+function reload(){
|
|
|
+ getData()
|
|
|
+}
|
|
|
+const [registerParts, { openModal:openPartsModal }] = useModal();
|
|
|
+const [registerReview, { openModal:openReviewModal }] = useModal();
|
|
|
+const [registerRecovery, { openModal }] = useModal();
|
|
|
+const [registerQuote, { openModal:openQuoteModal }] = useModal();
|
|
|
+const [registerPayLog, { openModal:openPayLogModal }] = useModal();
|
|
|
+const [registerDelivery, { openModal:openDeliveryModal }] = useModal();
|
|
|
+const [registerTakingOrders, { openModal:openTakingOrders }] = useModal();
|
|
|
+const [registerRemarks, { openModal:openRemarksModal }] = useModal();
|
|
|
+// const [registerRecovery, { openModal }] = useModal();
|
|
|
+const [registerOut, { openModal:openOutModal }] = useModal();
|
|
|
+const [registerAdd, { openModal:openAddModal }] = useModal();
|
|
|
+const [registerTable, { setTableData }] = useTable({
|
|
|
+ dataSource:dataSource,
|
|
|
+ columns,
|
|
|
+ showSummary:true,
|
|
|
+ showIndexColumn:false,
|
|
|
+ rowKey:'id',
|
|
|
+ pagination: false,
|
|
|
+ bordered: true,
|
|
|
+ canResize: false,
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.detailPage {
|
|
|
+ margin: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ .topButton {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &_right {
|
|
|
+ width: 400px;
|
|
|
+ padding: 40px 20px;
|
|
|
+ }
|
|
|
+ &_left {
|
|
|
+ width: calc(100% - 400px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom_but{
|
|
|
+ text-align: center;
|
|
|
+ button{
|
|
|
+ margin: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|