kd-aiot-frontend-eam/src/views/maintenance/repair/components/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="24" class="repair_column">
          <span>维修方案：</span>
          <span>{{ workOrderInfo ? workOrderInfo.repairPrograms : '' }}</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="
            lastStepName == 'CREATE' ? 'step_icon step_active' : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>生成工单</span>
          <span>{{ logs['CREATE'].createTime }}</span>
        </div>
        <div slot="description" class="create_workerOrder_desc">
          <div> 报修人：{{ logs['CREATE'].requestUserName }} </div>
          <div> 故障描述：{{ logs['CREATE'].remark }} </div>
        </div>
      </el-step>
      <el-step v-if="item.type == 'SPARE_PARTS_APPLY'">
        <span
          slot="icon"
          :class="
            lastStepName == 'SPARE_PARTS_APPLY'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>备品备件申请</span>
          <span>{{ logs['SPARE_PARTS_APPLY'].createTime }}</span>
        </div>
        <div slot="description" class="work_report_desc">
          <!-- <div slot="description" class="step_description">
            <span
              >申领单号：{{
                logs['SPARE_PARTS_APPLY'].content.sparePartsCode
              }}</span
            >
          </div> -->
          <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="
            lastStepName == 'ACCEPTANCE_CHEK'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>验收</span>
          <span>{{ logs['ACCEPTANCE_CHEK'].createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>验收人：{{ logs['ACCEPTANCE_CHEK'].content.userName }}</span>
          <span
            >验收结果：{{
              logs['ACCEPTANCE_CHEK'].content.orderStatus == 4 ? '通过' : '驳回'
            }}</span
          >
          <span>验收说明：{{ logs['ACCEPTANCE_CHEK'].content.remark }}</span>
        </div>
      </el-step>
      <el-step v-if="item.type == 'WORK_REPORT'">
        <span
          slot="icon"
          :class="
            lastStepName == 'WORK_REPORT'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>报工</span>
          <span>{{ logs['WORK_REPORT'].createTime }}</span>
        </div>
        <div slot="description" class="work_report_desc">
          <div> 处理说明：{{ logs['WORK_REPORT'].content.reason }} </div>
          <div class="work_report_imgs" style="width: 50px; height: 50px">
            <img
              v-for="(item, index) in logs['WORK_REPORT'].content
                .workOrderImgList"
              :key="index"
              :src="item"
              alt=""
              style="width: 40%"
            />
          </div>
          <!-- <div>
            <div>备品备件使用情况：</div>
            <el-table :data="useData" border>
              <el-table-column
                label="备件编码"
                prop="assetCode"
                align="center"
              />
              <el-table-column
                label="备件名称"
                align="center"
                prop="informationName"
              />
              <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="typeName" align="center">
                <template slot-scope="{ row }">
                  <div>1</div>
                </template>
              </el-table-column>
            </el-table>
          </div> -->
        </div>
      </el-step>
    </el-steps>
    <!-- <el-steps
      direction="vertical"
      :active="0"
      :space="100"
      v-for="(item, index) in repairInfoLogList"
      :key="index"
    >
      <el-step v-if="item.type.code == 'ACCEPTANCE_CHEK'">
        <span
          slot="icon"
          :class="
            lastStepName == 'ACCEPTANCE_CHEK'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>验收</span>
          <span>{{ logs['ACCEPTANCE_CHEK'].createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>验收人：{{ logs['ACCEPTANCE_CHEK'].content.userName }}</span>
          <span
            >验收结果：{{
              logs['ACCEPTANCE_CHEK'].content.acceptanceResult ? '通过' : '驳回'
            }}</span
          >
          <span
            >验收说明：{{
              logs['ACCEPTANCE_CHEK'].content.acceptanceInstructions
            }}</span
          >
        </div>
      </el-step>

      <el-step v-if="item.type.code == 'WORK_REPORT'">
        <span
          slot="icon"
          :class="
            lastStepName == 'WORK_REPORT'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>报工</span>
          <span>{{ logs['WORK_REPORT'].createTime }}</span>
        </div>
        <div slot="description" class="work_report_desc">
          <div>
            处理说明：{{ logs['WORK_REPORT'].content.repairReportExplain }}
          </div>
          <div class="work_report_imgs" style="width: 50px; height: 50px">
            <img
              v-for="(item, index) in logs['WORK_REPORT'].content
                .workOrderImgList"
              :key="index"
              :src="item"
              alt=""
              style="width: 40%"
            />
          </div>
          <div>
            <div>备品备件使用情况：</div>
            <el-table :data="useData" border>
              <el-table-column
                label="备件编码"
                prop="assetCode"
                align="center"
              />
              <el-table-column
                label="备件名称"
                align="center"
                prop="informationName"
              />
              <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="typeName" align="center">
                <template slot-scope="{ row }">
                  <div>1</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-step>

      <el-step v-if="item.type.code == 'STOCK_OUT_APPROVAL'">
        <span
          slot="icon"
          :class="
            lastStepName == 'STOCK_OUT_APPROVAL'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>备品备件出库审核</span>
          <span>{{ logs['STOCK_OUT_APPROVAL'].createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span
            >出库单号：{{
              logs['STOCK_OUT_APPROVAL'].content.stockOutCode
            }}</span
          >
          <span
            >审核人：{{
              logs['STOCK_OUT_APPROVAL'].content.approvalUserName
            }}</span
          >
          <span
            >审核结果：{{
              logs['SPARE_PARTS_APPROVAL'].content.approvalResult
                ? '通过'
                : '驳回'
            }}</span
          >
        </div>
      </el-step>

      <el-step v-if="item.type.code == 'STOCK_OUT_APPLY'">
        <span
          slot="icon"
          :class="
            lastStepName == 'STOCK_OUT_APPLY'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>备品备件出库申请</span>
          <span>{{ logs['STOCK_OUT_APPLY'].createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span
            >出库单号：{{ logs['STOCK_OUT_APPLY'].content.stockOutCode }}</span
          >
          <span
            >申请人：{{ logs['STOCK_OUT_APPLY'].content.applyUserName }}</span
          >
          <span
            >审核人：{{
              logs['STOCK_OUT_APPLY'].content.approvalUserName
            }}</span
          >
        </div>
      </el-step>

      <el-step v-if="item.type.code == 'SPARE_PARTS_APPROVAL'">
        <span
          slot="icon"
          :class="
            lastStepName == 'SPARE_PARTS_APPROVAL'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>备品备件申领审核</span>
          <span>{{ logs['SPARE_PARTS_APPROVAL'].createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span
            >申领单号：{{
              logs['SPARE_PARTS_APPROVAL'].content.sparePartsCode
            }}</span
          >
          <span
            >审核人：{{
              logs['SPARE_PARTS_APPROVAL'].content.approvalUserName
            }}</span
          >
          <span
            >审核结果：{{
              logs['SPARE_PARTS_APPROVAL'].content.approvalResult
                ? '通过'
                : '驳回'
            }}</span
          >
        </div>
      </el-step>

      <el-step v-if="item.type.code == 'SPARE_PARTS_APPLY'">
        <span
          slot="icon"
          :class="
            lastStepName == 'SPARE_PARTS_APPLY'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>备品备件申请</span>
          <span>{{ logs['SPARE_PARTS_APPLY'].createTime }}</span>
        </div>
        <div slot="description" class="work_report_desc">
          <div slot="description" class="step_description">
            <span
              >申领单号：{{
                logs['SPARE_PARTS_APPLY'].content.sparePartsCode
              }}</span
            >
            <span
              >申请人：{{
                logs['SPARE_PARTS_APPLY'].content.applyUserName
              }}</span
            >
            <span
              >审核人：{{
                logs['SPARE_PARTS_APPLY'].content.approvalUserName
              }}</span
            >
          </div>
          <div>
            <div>申领清单：</div>
            <el-table :data="item.applyList" border>
              <el-table-column
                label="备件物品编码"
                align="center"
                prop="informationCode"
              />
              <el-table-column
                label="备件名称"
                align="center"
                prop="informationName"
              />
              <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="num" align="center" />
            </el-table>
          </div>
        </div>
      </el-step>

      <el-step v-if="item.type.code == 'START'">
        <span
          slot="icon"
          :class="
            lastStepName == 'START' ? 'step_icon step_active' : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>开始执行</span>
          <span>{{ logs['START'].createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>执行人：{{ logs['START'].content.executorName }}</span>
        </div>
      </el-step>

      <el-step v-if="item.type.code == 'CREATE_WORK_ORDER'">
        <span
          slot="icon"
          :class="
            lastStepName == 'CREATE_WORK_ORDER'
              ? 'step_icon step_active'
              : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>生成工单</span>
          <span>{{ logs['CREATE_WORK_ORDER'].createTime }}</span>
        </div>
      </el-step>
    </el-steps> -->
  </div>
</template>

<script>
  // import repair from '@/api/maintenance/repair/repair'
  // import {  getSparePartDetail , getUseDetail } from '@/api/stockManagement/stocking'
  export default {
    props: {
      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.type] = {
            id: item.id,
            content: item.content,
            createTime: item.createTime,
            remark: item.remark,
            requestUserName: item.requestUserName
          };
          if (item.type === 'SPARE_PARTS_APPLY') {
            this.logs[item.type].content.infoList =
              this.logs[item.type].content.infoList &&
              this.logs[item.type].content.infoList.length > 0
                ? this.logs[item.type].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;
    }
    .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>