kd-aiot-frontend-wt/src/views/bpm/handleTask/components/maintenance/repair/WorkOrderTab.vue

<!-- 工单信息 -->
<template>
  <div class="repairinfoLogs repair_infoLogs">
    <div>
      <el-row class="repair_row">
        <el-col :span="8" class="repair_column">
          <span>工单编号：</span>
          <span>{{ workOrderInfo ? workOrderInfo.code : '' }}</span>
        </el-col>
        <el-col :span="8" class="repair_column">
          <span>执行部门：</span>
          <span>{{ workOrderInfo ? workOrderInfo.executeGroupName : '' }}</span>
        </el-col>
        <el-col :span="8" class="repair_column">
          <span>执行人：</span>
          <span>{{ workOrderInfo ? workOrderInfo.executeUserName : '' }}</span>
        </el-col>
      </el-row>
      <el-row class="repair_row">
        <el-col :span="8" class="repair_column">
          <span>计划单号：</span>
          <span>{{ workOrderInfo ? workOrderInfo.planCode : '' }}</span>
        </el-col>
        <el-col :span="8" class="repair_column">
          <span>计划名称：</span>
          <span>{{ workOrderInfo ? workOrderInfo.planName : '' }}</span>
        </el-col>
        <el-col :span="8" class="repair_column">
          <span>计划完成时间：</span>
          <span>{{ workOrderInfo ? workOrderInfo.planFinishTime : '' }}</span>
        </el-col>
      </el-row>
      <el-row class="repair_row">
        <el-col :span="8" class="repair_column">
          <span>设备名称：</span>
          <span>{{ equipmentInfo ? equipmentInfo.name : '' }}</span>
        </el-col>
        <el-col :span="8" class="repair_column">
          <span>编号：</span>
          <span>{{ equipmentInfo ? equipmentInfo.codeNumber : '' }}</span>
        </el-col>
        <el-col :span="8" class="repair_column">
          <span>固定资产编码：</span>
          <span>{{ equipmentInfo ? equipmentInfo.fixCode : '' }}</span>
        </el-col>
      </el-row>
      <el-row
        class="repair_row"
        v-if="workOrderInfo.finishTime && workOrderInfo.acceptTime"
      >
        <el-col :span="12" class="repair_column">
          <span>实际工时(分钟)：</span>
          <span>{{
            parseInt(
              (new Date(workOrderInfo.finishTime).getTime() -
                new Date(workOrderInfo.acceptTime).getTime()) /
                60000
            )
          }}</span>
        </el-col>
      </el-row>
    </div>
    <el-steps
      direction="vertical"
      :active="0"
      :space="100"
      v-for="(item, index) in repairInfoLogList"
      :key="index"
    >
      <el-step v-if="item.type == 'CREATE'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>生成工单</span>
          <span>{{ logs[item.id].createTime }}</span>
        </div>
        <div slot="description" class="create_workerOrder_desc">
          <div> 报修人：{{ logs[item.id].requestUserName }} </div>
          <div> 故障描述：{{ logs[item.id].remark }} </div>
          <div class="work_report_imgs">
            <el-image
              v-for="(item, index) in logs[item.id]?.content?.images"
              :key="index"
              style="width: 100px; height: 100px; margin-right: 5px"
              :src="item"
              :preview-src-list="[item]"
            />
          </div>
        </div>
      </el-step>
      <el-step v-if="item.type == 'SPARE_PARTS_APPLY'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>备品备件申请</span>
          <span>{{ logs[item.id].createTime }}</span>
        </div>
        <div slot="description" class="work_report_desc">
          <div>
            <div>申领清单：</div>
            <el-table :data="item.content.infoList" border>
              <el-table-column
                label="备件物品编码"
                align="center"
                prop="code"
              />
              <el-table-column label="备件名称" align="center" prop="name" />
              <el-table-column label="所属分类" prop="typeName" align="center">
                <template slot-scope="{ row }">
                  <div>备品备件</div>
                </template>
              </el-table-column>
              <el-table-column label="型号" align="center" prop="modelType" />
              <el-table-column
                label="使用数量"
                prop="packingCountBase"
                align="center"
              />
            </el-table>
          </div>
        </div>
      </el-step>
      <el-step v-if="item.type == 'ACCEPTANCE_CHEK'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>验收</span>
          <span>{{ logs[item.id].createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>验收人：{{ logs[item.id].content.userName }}</span>
          <span
            >验收结果：{{
              logs[item.id].content.orderStatus == 4 ? '通过' : '驳回'
            }}</span
          >
          <span>验收说明：{{ logs[item.id].content.remark }}</span>
        </div>
      </el-step>
      <el-step v-if="item.type == 'WORK_REPORT'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>报工</span>
          <span>{{ logs[item.id].createTime }}</span>
        </div>
        <div slot="description" class="work_report_desc">
          <div> 报工人：{{ logs[item.id].content?.rawUserName }} </div>
          <div>
            辅助人：{{
              logs[item.id].content.assists?.length > 0
                ? logs[item.id].content.assists
                    .map((item) => item.name)
                    .toString()
                : ''
            }}
          </div>
          <div> 处理说明：{{ logs[item.id].content.reason }} </div>
          <div style="display: flex">
            附件：
            <fileMain
              v-model="logs[item.id].content.attachments"
              type="view"
            ></fileMain>
          </div>
          <div class="work_report_imgs">
            <el-image
              v-for="(item, index) in logs[item.id].content?.images"
              :key="index"
              style="width: 100px; height: 100px; margin-right: 5px"
              :src="item"
              :preview-src-list="logs[item.id].content?.images"
            />
          </div>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      equipmentInfo: {
        type: Object,
        default: () => {
          return {};
        }
      },
      repairInfoLogList: {
        type: Array,
        default: () => {
          return [];
        }
      },
      workOrderInfo: {
        type: Object,
        default: () => {
          return {};
        }
      },
      planInfo: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },

    watch: {
      repairInfoLogList(val) {
        console.log('接收的值', val);
        // val.forEach((item) => {
        //   if (item.type !== 'SPARE_PARTS_APPLY') {
        //     this.logs[item.type] = {
        //       id: item.id,
        //       content: item.content,
        //       createTime: item.createTime,
        //       remark: item.remark,
        //       requestUserName: item.requestUserName
        //     };
        //   } else {
        //     if (item.content.infoList && item.content.infoList.length > 0) {
        //       item.content.infoList = item.content.infoList.map((item) => {
        //         return {
        //           ...JSON.parse(item.sparePartsList),
        //           sparePartsId: item.sparePartsId
        //         };
        //       });
        //       this.useData.push(item.content.infoList);
        //     }
        //   }
        // });
        val.forEach((item) => {
          this.logs[item.id] = {
            id: item.id,
            content: item.content,
            createTime: item.createTime,
            type: item.type,
            remark: item.remark,
            requestUserName: item.requestUserName
          };
          if (item.type === 'SPARE_PARTS_APPLY') {
            this.logs[item.id].content.infoList =
              this.logs[item.id].content.infoList &&
              this.logs[item.id].content.infoList.length > 0
                ? this.logs[item.id].content.infoList.map((item) => {
                    return {
                      ...JSON.parse(item.sparePartsList),
                      sparePartsId: item.sparePartsId
                    };
                  })
                : [];
          }
        });
        console.log(this.logs);
        this.logsKeys = Object.keys(this.logs);
        this.lastStepName = this.logsKeys[0];
        // val.forEach((item) => {
        //   this.logs[item.type.code] = {
        //     id: item.id,
        //     name: item.type.desc,
        //     content: JSON.parse(item.content),
        //     createTime: item.createTime
        //   };
        // });
        // // console.log('this.logs',this.logs)
        // this.logsKeys = Object.keys(this.logs);
        // // this.lastStepName = this.logsKeys[this.logsKeys.length - 1]
        // this.lastStepName = this.logsKeys[0];
        // this.getUseList();
        // val.map((item) => {
        //   if (item.type.code === 'SPARE_PARTS_APPLY') {
        //     let code = JSON.parse(item.content).sparePartsCode;
        //     getSparePartDetail(code).then((res) => {
        //       if (res?.success) {
        //         item.applyList = res.data.sparePartsApplyDetailList;
        //       }
        //     });
        //   }
        // });
        // console.log('val', val);
      }
    },
    data() {
      return {
        logs: {},
        logsKeys: [],
        lastStepName: '',
        useData: [],
        workOrderCode: ''
      };
    },
    methods: {
      // 获取申请明细列表
      getApplyList() {
        getSparePartDetail().then((res) => {});
      },

      // 获取使用明细列表
      getUseList() {
        let params = {
          sourceCode: this.workOrderInfo.workOrderCode,
          status: true
        };
        getUseDetail(params).then((res) => {
          if (res?.success) {
            this.useData = res.data;
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .repair_row {
    margin-bottom: 15px;
    .repair_column {
      display: flex;
      > span {
        &:first-child {
          font-weight: 700;
          text-align: right;
          width: 120px;
        }
      }
    }
  }
  .repairinfoLogs {
    .step_icon {
      width: 22px;
      height: 22px;
      border: 1px solid #333;
      border-radius: 50%;
      box-sizing: border-box;
      background-color: #fff;
    }
    .step_active {
      border: 0;
      background-color: #4b7902;
    }
    .step_title {
      width: 400px;
      color: #000;
      display: flex;
      justify-content: space-between;
    }
    .step_description {
      display: flex;
      padding: 5px 0px;
      background-color: #f2f2f2;
      justify-content: space-between;
      color: #7f7f7f;
    }
    ::v-deep .create_workerOrder_desc {
      display: flex;
      > div {
        flex: 1;
      }
    }
    ::v-deep .work_report_desc {
      padding: 5px 10px;
      margin-bottom: 30px;
      background-color: #f2f2f2;
      color: #7f7f7f;
      .el-table th.el-table__cell {
        background-color: #d7d7d7;
        padding: 0;
        color: #000;
        font-weight: 400;
      }
      .el-table td.el-table__cell {
        background-color: #f2f2f2;
        padding: 0;
      }
    }
  }
</style>