aftermarket-mp/src/views/spares/detail.vue

<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.repairerVo.warrantyDate }}
            </DescriptionsItem>
            <DescriptionsItem label="报修日期">
              {{ detailData.repairerVo?.createTime }}
            </DescriptionsItem>
            <DescriptionsItem label="送修方式" v-if="detailData.customerAddress">
              {{ detailData.customerAddress.sendType ? '前台送修' : '快递寄送' }}
            </DescriptionsItem>
            <DescriptionsItem label="保修类型">
              {{ t(`routes.spares.warrantyType.${detailData.orderReceivingVo.warrantyType}`)}}
            </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>
                <PreviewGroup>
                  <Image
                    :width="80"
                    v-for="item in detailData.repairerVo.faultImg"
                    :key="item"
                    :src="item"
                  ></Image>
                </PreviewGroup>
              </div>
            </DescriptionsItem>
            <DescriptionsItem label="机器外观">
              <div>
                <p>{{ detailData.repairRegisterVo?.orderFaultMsg }}</p>
                <PreviewGroup>
                  <Image
                    :width="80"
                    v-for="item in detailData.orderReceivingVo?.orderFaultImg"
                    :key="item"
                    :src="item"
                  ></Image>
                </PreviewGroup>
              </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>
                <PreviewGroup>
                  <Image
                    :width="80"
                    v-for="item in detailData.repairRegisterVo.checkImg"
                    :key="item"
                    :src="item"
                  ></Image>
                </PreviewGroup>
              </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>
                <PreviewGroup>
                  <Image
                    :width="80"
                    v-for="item in [detailData.repairPay.payImg]"
                    :key="item"
                    :src="item"
                  ></Image>
                </PreviewGroup>
              </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.getAddrPhone }}{{ 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="handleSubmit"
                  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">
                <PreviewGroup>
                  <Image :width="80" v-for="item in [logo]" :key="item" :src="item"></Image>
                </PreviewGroup>
              </div>
            </div>
          </TimelineItem>
        </Timeline>
      </div>
    </div>
    <div class="bottom_but">
      <a-button type="primary" v-for="item in butList" :key="item" @click="goBack">
        {{ item }}
      </a-button>
      <a-button type="primary" @click="goBack">
        {{ t('common.back') }}
      </a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, 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 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';
export default defineComponent({
  components: {
      Image,
      Descriptions: Descriptions,
      DescriptionsItem: Descriptions.Item,
      [Timeline.name]: Timeline,
      [Timeline.Item.name]: Timeline.Item,
      PreviewGroup: Image.PreviewGroup,
    },
  setup(props) {
    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<any>([]);
    const butList = ref([]);
    onMounted(() => {
      getData();
    });
    let dataSource = reactive<any>([]);
    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 handleSubmit() {
      createMessage.success(t('common.optSuccess'));
    }
    const [registerTable, { setTableData }] = useTable({
      dataSource: dataSource,
      columns,
      showSummary: true,
      showIndexColumn: false,
      rowKey: 'id',
      pagination: false,
      bordered: true,
      canResize: false,
    });

    return {
      registerTable,
      handleSubmit,
      goBack,
      butList,
      dataSource,
      stepList,
      t,
    };
  },
});
</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>