修改维修管理

src/api/maintenance/repair.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request';
 
 // 分页
-export async function getWorkOrderList (data) {
+export async function getWorkOrderList(data) {
   const res = await request.get('/eam/workorder/getWorkOrderList', {
     params: data
   });
@@ -10,6 +10,14 @@ export async function getWorkOrderList (data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+export async function getWorkOrderDetail(code) {
+  const res = await request.get('/eam/workorder/getWorkOrderDetail/' + code);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
 // // 保存
 // export async function save (data) {
 //   const res = await request.post('/eam/repairrequest/save', data);

src/views/maintenance/repair/components/RepairDetailsDialog copy.vue

@@ -0,0 +1,567 @@
+<template>
+  <!-- 维修工单弹框 -->
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="equipmentdialog"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="60%"
+  >
+    <el-tabs
+      v-model="detailsTabsActiveName"
+      type="border-card"
+      v-if="row.title == '工单详情'"
+    >
+      <el-tab-pane :label="tabLabel" name="keepInRepair">
+        <WorkOrderTab
+          :repairInfoLogList="repairInfoLogs"
+          :workOrderInfo="workOrderInfo"
+          :planInfo="planInfo"
+          v-if="tabLabel === '工单信息'"
+        />
+        <RepairNotesTab
+          :repairInfoLogList="repairInfoLogs"
+          v-if="tabLabel === '维修信息'"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="设备信息" name="equipment">
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>设备编码：</span>
+            <span>{{ equipmentInfo ? equipmentInfo.code : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>权属部门：</span>
+            <span>{{
+              equipmentInfo ? equipmentInfo.ownershipGroupName : ''
+            }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>设备名称：</span>
+            <span>{{ equipmentInfo ? equipmentInfo.name : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>权属人：</span>
+            <span>{{
+              equipmentInfo ? equipmentInfo.ownershipUserName : ''
+            }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>设备分类：</span>
+            <span>{{
+              equipmentInfo.category
+                ? equipmentInfo.category.categoryLevelPath
+                : ''
+            }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>权属人电话：</span>
+            <span>{{
+              equipmentInfo ? equipmentInfo.ownershipUserMobile : ''
+            }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>固定资产编码：</span>
+            <span>{{ equipmentInfo ? equipmentInfo.fixCode : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>设备位置：</span>
+            <span>{{ equipmentInfo.position }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>规格型号：</span>
+            <span>
+              {{
+                equipmentInfo.category && equipmentInfo.category.specification
+              }}|{{
+                equipmentInfo.category && equipmentInfo.category.modelType
+              }}
+            </span>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="报修信息" name="repairApplication">
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>报修记录编号：</span>
+            <span>{{ infoData ? infoData.repairsCode : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>报修时间：</span>
+            <span>{{ infoData ? infoData.createTime : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>来源：</span>
+            <span>{{
+              infoData && infoData.source ? infoData.source.desc : ''
+            }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>来源编码：</span>
+            <span>{{ infoData ? infoData.sourceCode : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>报修部门：</span>
+            <span>{{ infoData ? infoData.repairsDeptName : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>报修人：</span>
+            <span>{{ infoData ? infoData.repairsPerson : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>报修人电话：</span>
+            <span>{{ infoData ? infoData.repairsDeptPhone : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>期望完成时间：</span>
+            <span>{{ infoData ? infoData.expectedTime : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="24" class="repair_column">
+            <span>故障描述：</span>
+            <span>{{ infoData ? infoData.repairsDescription : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="24" class="repair_column">
+            <span>图片：</span>
+
+            <el-image
+              v-for="(item, index) in infoData.repairsImg"
+              :key="index"
+              style="width: 100px; height: 100px; margin-right: 5px"
+              :src="item.url"
+              :preview-src-list="[item.url]"
+            />
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-tabs v-model="detailsTabsActiveName" type="border-card" v-else>
+      <el-tab-pane label="报修信息" name="repairApplication">
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>报修记录编号：</span>
+            <span>{{ infoData ? infoData.code : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>报修时间：</span>
+            <span>{{ infoData ? infoData.createTime : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>来源：</span>
+            <span>{{
+              infoData ? getDictValue('报修来源', infoData.sourceType) : ''
+            }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>来源编码：</span>
+            <span>{{ infoData ? infoData.sourceCode : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>报修部门：</span>
+            <span>{{ infoData ? infoData.requestDeptName : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>报修人：</span>
+            <span>{{ infoData ? infoData.requestUserName : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>报修人电话：</span>
+            <span>{{ infoData ? infoData.repairsDeptPhone : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>期望完成时间：</span>
+            <span>{{ infoData ? infoData.expectedTime : '' }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="24" class="repair_column">
+            <span>故障描述：</span>
+            <span>{{ infoData ? infoData.remark : '' }}</span>
+          </el-col>
+        </el-row>
+        <!--        <el-row class="repair_row">
+          <el-col :span="24" class="repair_column">
+            <span>图片：</span>
+            <el-image
+              v-for="(item, index) in infoData.repairsImg"
+              :key="index"
+              style="width: 100px; height: 100px; margin-right: 5px"
+              :src="item.url"
+              :preview-src-list="[item.url]"
+            />
+          </el-col>
+        </el-row> -->
+        <!-- <el-row class="repair_row">
+          <el-col :span="24" class="repair_column">
+            <span class="label">视频：</span>
+            <span>{{ infoData ? infoData.repairsVideo : '' }}</span>
+          </el-col>
+        </el-row> -->
+      </el-tab-pane>
+      <el-tab-pane label="设备信息" name="equipment">
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>设备编码：</span>
+            <span>{{ equipmentInfo ? equipmentInfo.code : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>权属部门：</span>
+            <span>{{
+              equipmentInfo ? equipmentInfo.ownershipGroupName : ''
+            }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>设备名称：</span>
+            <span>{{ equipmentInfo ? equipmentInfo.name : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>权属人：</span>
+            <span>{{
+              equipmentInfo ? equipmentInfo.ownershipUserName : ''
+            }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>设备分类：</span>
+            <span>{{
+              equipmentInfo.category
+                ? equipmentInfo.category.categoryLevelPath
+                : ''
+            }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>权属人电话：</span>
+            <span>{{
+              equipmentInfo ? equipmentInfo.ownershipUserMobile : ''
+            }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>固定资产编码：</span>
+            <span>{{ equipmentInfo ? equipmentInfo.fixCode : '' }}</span>
+          </el-col>
+          <el-col :span="12" class="repair_column">
+            <span>设备位置：</span>
+            <span>{{ equipmentInfo.position }}</span>
+          </el-col>
+        </el-row>
+        <el-row class="repair_row">
+          <el-col :span="12" class="repair_column">
+            <span>规格型号：</span>
+            <span>
+              {{
+                equipmentInfo.category && equipmentInfo.category.specification
+              }}|{{
+                equipmentInfo.category && equipmentInfo.category.modelType
+              }}
+            </span>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane :label="tabLabel" name="keepInRepair">
+        <WorkOrderTab
+          :repairInfoLogList="repairInfoLogs"
+          :workOrderInfo="workOrderInfo"
+          :planInfo="planInfo"
+          v-if="tabLabel === '工单信息'"
+        />
+        <RepairNotesTab
+          :repairInfoLogList="repairInfoLogs"
+          v-if="tabLabel === '维修信息'"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <div class="btnbox" v-if="row.isshow">
+      <el-button class="confirm-btn" type="danger" plain @click="reject"
+        >驳回</el-button
+      >
+      <el-button class="confirm-btn" type="success" plain @click="pass"
+        >验收</el-button
+      >
+      <el-button class="cancel-btn" @click="handleClose">关闭</el-button>
+    </div>
+    <div class="textbox" v-if="showtext">
+      <el-input
+        type="textarea"
+        placeholder="请输入驳回原因"
+        v-model="cause"
+        maxlength="30"
+        rows="5"
+        show-word-limit
+      >
+      </el-input>
+      <div class="textbtnbox">
+        <el-button size="small" round @click="cancelreject">取消</el-button>
+        <el-button size="small" round @click="surereject">提交</el-button>
+      </div>
+    </div>
+    <div slot="footer" v-if="!row.isshow">
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import RepairNotesTab from './RepairNotesTab.vue';
+  import WorkOrderTab from './WorkOrderTab.vue';
+  import { getAssetInfo } from '@/api/ledgerAssets';
+  import { getRepairById } from '@/api/maintenance/repair_report';
+  import { getWorkOrderDetail } from '@/api/maintenance/repair';
+  import dictMixins from '@/mixins/dictMixins';
+  export default {
+    mixins: [dictMixins],
+    props: {},
+    components: { RepairNotesTab, WorkOrderTab },
+    data() {
+      return {
+        equipmentdialog: false,
+        detailsTabsActiveName: 'repairApplication',
+        workOrderInfo: {},
+        planInfo: {},
+        infoData: {},
+        equipmentInfo: {},
+        repairInfoLogs: [],
+        tabLabel: '',
+        dialogTitle: '',
+        row: {},
+        cause: '',
+        showtext: false
+      };
+    },
+    created() {
+      this.requestDict('报修来源');
+      this.requestDict('报修状态');
+    },
+    methods: {
+      handleClose() {
+        this.equipmentdialog = false;
+        if (this.row.title === '工单详情') {
+          this.detailsTabsActiveName = 'keepInRepair';
+        } else {
+          this.detailsTabsActiveName = 'repairApplication';
+        }
+      },
+      async init(row) {
+        this.row = row;
+        console.log('row----------------------------------');
+        console.log(row);
+        this.equipmentdialog = true;
+        this.dialogTitle = row.title;
+        this.tabLabel = row.tabLabel;
+        if (row.title === '工单详情') {
+          this.detailsTabsActiveName = 'keepInRepair';
+        }
+        if (row.title === '报修记录详情') {
+          this.getSbinfo(this.row.deviceId);
+          const res = await getRepairById(row.id);
+          console.log('报修记录详情', res);
+          this.infoData = res ? res : {};
+          this.repairInfoLogs = res.repairLogVOList.reverse();
+          // 处理图片
+          // if (this.infoData && this.infoData.repairsImg) {
+          //   const repairsImg = this.infoData.repairsImg
+          //   this.infoData.repairsImg = []
+          //   repairsImg.split(',').map(item => {
+          //     imageView(item).then(res => {
+          //       this.infoData.repairsImg.push({
+          //         name: item.substring('/download/'.length),
+          //         url: res
+          //       })
+          //     })
+
+          //     console.log(this.infoData.repairsImg)
+          //     return
+          //   })
+          // }
+        } else if (row.title === '消息信息详情') {
+          this.getSbinfo(this.row.deviceId);
+          const res = await getRepairById(row.id);
+          this.infoData = res ? res : {};
+          this.repairInfoLogs = res.repairLogVOList.reverse();
+          // 处理图片
+          // if (this.infoData && this.infoData.repairsImg) {
+          //   const repairsImg = this.infoData.repairsImg
+          //   this.infoData.repairsImg = []
+          //   repairsImg.split(',').map(item => {
+          //     imageView(item).then(res => {
+          //       this.infoData.repairsImg.push({
+          //         name: item.substring('/download/'.length),
+          //         url: res
+          //       })
+          //     })
+          //     return
+          //   })
+          // }
+        } else {
+          console.log('----------');
+          console.log(row);
+          this.getSbinfo(this.row.deviceId);
+          const res = await getWorkOrderDetail(row.code);
+          this.workOrderInfo = res.data;
+          this.planInfo = res.data.planInfo;
+          this.planInfo.executeUserName = res.data.executeUserName;
+          this.planInfo.executorDeptName = res.data.executorDeptName;
+          this.infoData = res.data.repairInfo ? res.data.repairInfo : {};
+          // 处理图片
+          if (this.infoData && this.infoData.repairsImg) {
+            const repairsImg = this.infoData.repairsImg;
+            this.infoData.repairsImg = [];
+            repairsImg.split(',').map((item) => {
+              imageView(item).then((res) => {
+                this.infoData.repairsImg.push({
+                  name: item.substring('/download/'.length),
+                  url: res
+                });
+              });
+              return;
+            });
+          }
+          this.repairInfoLogs = res?.data?.repairInfoLogList.reverse();
+          console.log('this.repairInfoLogs', this.repairInfoLogs);
+        }
+      },
+
+      getSbinfo(params) {
+        getAssetInfo(params).then((res) => {
+          if (res) {
+            this.equipmentInfo = res;
+            this.$set(
+              this.equipmentInfo,
+              'position',
+              res.positionList?.length > 0 && res.positionList[0].pathName
+                ? res.positionList[0].pathName
+                : ''
+            );
+          }
+        });
+      },
+
+      //通过按钮事件
+      pass() {
+        let params = {
+          id: this.row.id,
+          checked: true,
+          myHandleId: this.row.dbid,
+          handleType: 1,
+          type: 1,
+          cause: ''
+        };
+        sendAudit(params).then((res) => {
+          if (res.success) {
+            this.$message.success('验收成功!');
+            this.$emit('refesh');
+            this.equipmentdialog = false;
+          }
+        });
+      },
+      //驳回按钮事件
+      reject() {
+        this.showtext = true;
+        let ele = document.getElementsByClassName('el-dialog__wrapper');
+        let bodyscrollHeight = document.body.scrollHeight;
+        this.$nextTick(() => {
+          ele.forEach((element) => {
+            if (element.style.display !== 'none') {
+              element.scrollTop = bodyscrollHeight;
+            }
+          });
+        });
+      },
+      cancelreject() {
+        this.showtext = false;
+        this.cause = '';
+      },
+      surereject() {
+        if (!this.cause) {
+          this.$message.info('请填写驳回原因！');
+        } else {
+          let params = {
+            id: this.row.id,
+            checked: false,
+            myHandleId: this.row.dbid,
+            handleType: 1,
+            type: 1,
+            cause: this.cause
+          };
+          sendAudit(params).then((res) => {
+            if (res.success) {
+              this.$message.success('驳回成功!');
+              this.$emit('refesh');
+              this.equipmentdialog = false;
+            }
+          });
+        }
+      }
+    },
+    watch: {
+      equipmentdialog(nVal, oVal) {
+        if (!nVal) {
+          this.cause = '';
+          this.showtext = false;
+        }
+      }
+    }
+  };
+</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;
+        }
+      }
+    }
+  }
+  .btnbox {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+  }
+  ::v-deep .el-button {
+    padding: 10px 20px;
+    margin-right: 10px;
+  }
+  .textbox {
+    margin-top: 10px;
+  }
+  .textbtnbox {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+  }
+</style>

src/views/maintenance/repair/components/RepairDetailsDialog.vue

@@ -53,8 +53,9 @@
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>设备分类：</span>
-            <span>{{  equipmentInfo.category
-                ? equipmentInfo.category.categoryLevelPath
+            <span>{{
+              equipmentInfo.category
+                ? equipmentInfo.category.category.categoryLevelPath
                 : ''
             }}</span>
           </el-col>
@@ -72,15 +73,25 @@
           </el-col>
           <el-col :span="12" class="repair_column">
             <span>设备位置：</span>
-            <span>{{ equipmentInfo.position }}</span>
+            <span>{{
+              equipmentInfo.deviceLocationName +
+              '-' +
+              equipmentInfo.deviceDetailAddress
+            }}</span>
           </el-col>
         </el-row>
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>规格型号：</span>
             <span>
-			  {{equipmentInfo.category&&equipmentInfo.category.specification}}|{{equipmentInfo.category&&equipmentInfo.category.modelType}}
-			</span>
+              {{
+                equipmentInfo.category &&
+                equipmentInfo.category.category.specification
+              }}|{{
+                equipmentInfo.category &&
+                equipmentInfo.category.category.modelType
+              }}
+            </span>
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -88,7 +99,7 @@
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>报修记录编号：</span>
-            <span>{{ infoData ? infoData.repairsCode : '' }}</span>
+            <span>{{ infoData ? infoData.code : '' }}</span>
           </el-col>
           <el-col :span="12" class="repair_column">
             <span>报修时间：</span>
@@ -99,7 +110,7 @@
           <el-col :span="12" class="repair_column">
             <span>来源：</span>
             <span>{{
-              infoData && infoData.source ? infoData.source.desc : ''
+              infoData && infoData.sourceType ? infoData.sourceType : ''
             }}</span>
           </el-col>
           <el-col :span="12" class="repair_column">
@@ -110,17 +121,17 @@
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>报修部门：</span>
-            <span>{{ infoData ? infoData.repairsDeptName : '' }}</span>
+            <span>{{ infoData ? infoData.requestDeptName : '' }}</span>
           </el-col>
           <el-col :span="12" class="repair_column">
             <span>报修人：</span>
-            <span>{{ infoData ? infoData.repairsPerson : '' }}</span>
+            <span>{{ infoData ? infoData.repairUserName : '' }}</span>
           </el-col>
         </el-row>
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>报修人电话：</span>
-            <span>{{ infoData ? infoData.repairsDeptPhone : '' }}</span>
+            <span>{{ infoData ? infoData.requestUserPhone : '' }}</span>
           </el-col>
           <el-col :span="12" class="repair_column">
             <span>期望完成时间：</span>
@@ -130,7 +141,7 @@
         <el-row class="repair_row">
           <el-col :span="24" class="repair_column">
             <span>故障描述：</span>
-            <span>{{ infoData ? infoData.repairsDescription : '' }}</span>
+            <span>{{ infoData ? infoData.remark : '' }}</span>
           </el-col>
         </el-row>
         <el-row class="repair_row">
@@ -164,7 +175,9 @@
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>来源：</span>
-            <span>{{infoData ?getDictValue('报修来源', infoData.sourceType):''}}</span>
+            <span>{{
+              infoData ? getDictValue('报修来源', infoData.sourceType) : ''
+            }}</span>
           </el-col>
           <el-col :span="12" class="repair_column">
             <span>来源编码：</span>
@@ -197,7 +210,7 @@
             <span>{{ infoData ? infoData.remark : '' }}</span>
           </el-col>
         </el-row>
-<!--        <el-row class="repair_row">
+        <!--        <el-row class="repair_row">
           <el-col :span="24" class="repair_column">
             <span>图片：</span>
             <el-image
@@ -244,7 +257,8 @@
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>设备分类：</span>
-            <span>{{  equipmentInfo.category
+            <span>{{
+              equipmentInfo.category
                 ? equipmentInfo.category.categoryLevelPath
                 : ''
             }}</span>
@@ -263,14 +277,18 @@
           </el-col>
           <el-col :span="12" class="repair_column">
             <span>设备位置：</span>
-            <span>{{ equipmentInfo.position}}</span>
+            <span>{{ equipmentInfo.position }}</span>
           </el-col>
         </el-row>
         <el-row class="repair_row">
           <el-col :span="12" class="repair_column">
             <span>规格型号：</span>
             <span>
-              {{equipmentInfo.category&&equipmentInfo.category.specification}}|{{equipmentInfo.category&&equipmentInfo.category.modelType}}
+              {{
+                equipmentInfo.category && equipmentInfo.category.specification
+              }}|{{
+                equipmentInfo.category && equipmentInfo.category.modelType
+              }}
             </span>
           </el-col>
         </el-row>
@@ -319,228 +337,242 @@
 </template>
 
 <script>
-import RepairNotesTab from './RepairNotesTab.vue';
-import WorkOrderTab from './WorkOrderTab.vue';
-import { getAssetInfo } from '@/api/ledgerAssets';
-import { getRepairById } from '@/api/maintenance/repair_report';
-import dictMixins from '@/mixins/dictMixins';
-export default {
-  mixins: [dictMixins],
-  props: {
-
-  },
-  components: { RepairNotesTab, WorkOrderTab },
-  data () {
-    return {
-      equipmentdialog: false,
-      detailsTabsActiveName: 'repairApplication',
-      workOrderInfo: {},
-      planInfo: {},
-      infoData: {},
-      equipmentInfo: {},
-      repairInfoLogs: [],
-      tabLabel: '',
-      dialogTitle: '',
-      row: {},
-      cause: '',
-      showtext: false,
-    }
-  },
-  created () {
-    this.requestDict('报修来源');
-    this.requestDict('报修状态');
-  },
-  methods: {
-    handleClose () {
-      this.equipmentdialog = false
-      if (this.row.title === '工单详情') {
-        this.detailsTabsActiveName = 'keepInRepair'
-      } else {
-        this.detailsTabsActiveName = 'repairApplication'
-      }
+  import RepairNotesTab from './RepairNotesTab.vue';
+  import WorkOrderTab from './WorkOrderTab.vue';
+  import { getAssetInfo } from '@/api/ledgerAssets';
+  import { getRepairById } from '@/api/maintenance/repair_report';
+  import { getWorkOrderDetail } from '@/api/maintenance/repair';
+  import dictMixins from '@/mixins/dictMixins';
+  export default {
+    mixins: [dictMixins],
+    props: {},
+    components: { RepairNotesTab, WorkOrderTab },
+    data() {
+      return {
+        equipmentdialog: false,
+        detailsTabsActiveName: 'repairApplication',
+        workOrderInfo: {},
+        planInfo: {},
+        infoData: {},
+        equipmentInfo: {},
+        repairInfoLogs: [],
+        tabLabel: '',
+        dialogTitle: '',
+        row: {},
+        cause: '',
+        showtext: false
+      };
     },
-    async init (row) {
-      this.row = row
-      this.equipmentdialog = true
-      this.dialogTitle = row.title
-      this.tabLabel = row.tabLabel
-      if (row.title === '工单详情') {
-        this.detailsTabsActiveName = 'keepInRepair'
-      }
-      if (row.title === '报修记录详情') {
-        this.getSbinfo(this.row.deviceId)
-        const res = await getRepairById(row.id)
-		console.log('报修记录详情',res)
-        this.infoData = res ? res : {}
-        this.repairInfoLogs = res.repairLogVOList.reverse()
-        // 处理图片
-        // if (this.infoData && this.infoData.repairsImg) {
-        //   const repairsImg = this.infoData.repairsImg
-        //   this.infoData.repairsImg = []
-        //   repairsImg.split(',').map(item => {
-        //     imageView(item).then(res => {
-        //       this.infoData.repairsImg.push({
-        //         name: item.substring('/download/'.length),
-        //         url: res
-        //       })
-        //     })
-
-        //     console.log(this.infoData.repairsImg)
-        //     return
-        //   })
-        // }
-      } else if (row.title === '消息信息详情') {
-        this.getSbinfo(this.row.deviceId)
-        const res = await getRepairById(row.id)
-        this.infoData = res ? res : {}
-        this.repairInfoLogs = res.repairLogVOList.reverse()
-        // 处理图片
-        // if (this.infoData && this.infoData.repairsImg) {
-        //   const repairsImg = this.infoData.repairsImg
-        //   this.infoData.repairsImg = []
-        //   repairsImg.split(',').map(item => {
-        //     imageView(item).then(res => {
-        //       this.infoData.repairsImg.push({
-        //         name: item.substring('/download/'.length),
-        //         url: res
-        //       })
-        //     })
-        //     return
-        //   })
-        // }
-      } else {
-        this.getSbinfo(this.row.deviceId )
-        const res = await maintenancePlan.getWorkOrderDetail(row.workOrderCode)
-        this.workOrderInfo = res.data
-        this.planInfo = res.data.planInfo
-        this.planInfo.executeUserName = res.data.executeUserName
-        this.planInfo.executorDeptName = res.data.executorDeptName
-        this.infoData = res.data.repairInfo ? res.data.repairInfo : {}
-        // 处理图片
-        if (this.infoData && this.infoData.repairsImg) {
-          const repairsImg = this.infoData.repairsImg
-          this.infoData.repairsImg = []
-          repairsImg.split(',').map(item => {
-            imageView(item).then(res => {
-              this.infoData.repairsImg.push({
-                name: item.substring('/download/'.length),
-                url: res
-              })
-            })
-            return
-          })
-        }
-        this.repairInfoLogs = res?.data?.repairInfoLogList.reverse()
-        console.log('this.repairInfoLogs', this.repairInfoLogs)
-      }
+    created() {
+      this.requestDict('报修来源');
+      this.requestDict('报修状态');
     },
-
-    getSbinfo (params) {
-      getAssetInfo(params).then(res => {
-        if (res) {
-          this.equipmentInfo = res
-		  this.$set(this.equipmentInfo,'position',res.positionList[0].pathName?res.positionList[0].pathName:'')
+    methods: {
+      handleClose() {
+        this.equipmentdialog = false;
+        if (this.row.title === '工单详情') {
+          this.detailsTabsActiveName = 'keepInRepair';
+        } else {
+          this.detailsTabsActiveName = 'repairApplication';
         }
-      })
-    },
+      },
+      async init(row) {
+        this.row = row;
+        console.log('row----------------------------------');
+        console.log(row);
+        this.equipmentdialog = true;
+        this.dialogTitle = row.title;
+        this.tabLabel = row.tabLabel;
+        if (row.title === '工单详情') {
+          this.detailsTabsActiveName = 'keepInRepair';
+        }
+        if (row.title === '报修记录详情') {
+          this.getSbinfo(this.row.deviceId);
+          const res = await getRepairById(row.id);
+          console.log('报修记录详情', res);
+          this.infoData = res ? res : {};
+          this.repairInfoLogs = res.repairLogVOList.reverse();
+          // 处理图片
+          // if (this.infoData && this.infoData.repairsImg) {
+          //   const repairsImg = this.infoData.repairsImg
+          //   this.infoData.repairsImg = []
+          //   repairsImg.split(',').map(item => {
+          //     imageView(item).then(res => {
+          //       this.infoData.repairsImg.push({
+          //         name: item.substring('/download/'.length),
+          //         url: res
+          //       })
+          //     })
 
-    //通过按钮事件
-    pass () {
-      let params = {
-        id: this.row.id,
-        checked: true,
-        myHandleId: this.row.dbid,
-        handleType: 1,
-        type: 1,
-        cause: ''
-      }
-      sendAudit(params).then(res => {
-        if (res.success) {
-          this.$message.success('验收成功!')
-          this.$emit('refesh')
-          this.equipmentdialog = false
+          //     console.log(this.infoData.repairsImg)
+          //     return
+          //   })
+          // }
+        } else if (row.title === '消息信息详情') {
+          this.getSbinfo(this.row.deviceId);
+          const res = await getRepairById(row.id);
+          this.infoData = res ? res : {};
+          this.repairInfoLogs = res.repairLogVOList.reverse();
+          // 处理图片
+          // if (this.infoData && this.infoData.repairsImg) {
+          //   const repairsImg = this.infoData.repairsImg
+          //   this.infoData.repairsImg = []
+          //   repairsImg.split(',').map(item => {
+          //     imageView(item).then(res => {
+          //       this.infoData.repairsImg.push({
+          //         name: item.substring('/download/'.length),
+          //         url: res
+          //       })
+          //     })
+          //     return
+          //   })
+          // }
+        } else {
+          console.log('----------');
+          console.log(row);
+
+          const res = await getWorkOrderDetail(row.code);
+          console.log(res);
+          this.workOrderInfo = res.ticketsInfoResponse;
+          this.infoData = res.repairRequestResponse;
+          this.getSbinfo(res.ticketsInfoResponse.deviceId);
+          // this.planInfo = res.data.planInfo;
+          // this.planInfo.executeUserName = res.data.executeUserName;
+          // this.planInfo.executorDeptName = res.data.executorDeptName;
+          // this.infoData = res.data.repairInfo ? res.data.repairInfo : {};
+          // // 处理图片
+          // if (this.infoData && this.infoData.repairsImg) {
+          //   const repairsImg = this.infoData.repairsImg;
+          //   this.infoData.repairsImg = [];
+          //   repairsImg.split(',').map((item) => {
+          //     imageView(item).then((res) => {
+          //       this.infoData.repairsImg.push({
+          //         name: item.substring('/download/'.length),
+          //         url: res
+          //       });
+          //     });
+          //     return;
+          //   });
+          // }
+          this.repairInfoLogs =
+            res.ticketsInfoResponse.repairLogVOS?.length > 0
+              ? res.ticketsInfoResponse.repairLogVOS
+              : [];
         }
-      })
-    },
-    //驳回按钮事件
-    reject () {
-      this.showtext = true
-      let ele = document.getElementsByClassName('el-dialog__wrapper')
-      let bodyscrollHeight = document.body.scrollHeight
-      this.$nextTick(() => {
-        ele.forEach(element => {
-          if (element.style.display !== 'none') {
-            element.scrollTop = bodyscrollHeight
+      },
+
+      getSbinfo(params) {
+        getAssetInfo(params).then((res) => {
+          if (res) {
+            this.equipmentInfo = res;
+            this.$set(
+              this.equipmentInfo,
+              'position',
+              res.positionList?.length > 0 && res.positionList[0].pathName
+                ? res.positionList[0].pathName
+                : ''
+            );
           }
-        })
-      })
-    },
-    cancelreject () {
-      this.showtext = false
-      this.cause = ''
-    },
-    surereject () {
-      if (!this.cause) {
-        this.$message.info('请填写驳回原因！')
-      } else {
+        });
+      },
+
+      //通过按钮事件
+      pass() {
         let params = {
           id: this.row.id,
-          checked: false,
+          checked: true,
           myHandleId: this.row.dbid,
           handleType: 1,
           type: 1,
-          cause: this.cause
-        }
-        sendAudit(params).then(res => {
+          cause: ''
+        };
+        sendAudit(params).then((res) => {
           if (res.success) {
-            this.$message.success('驳回成功!')
-            this.$emit('refesh')
-            this.equipmentdialog = false
+            this.$message.success('验收成功!');
+            this.$emit('refesh');
+            this.equipmentdialog = false;
           }
-        })
+        });
+      },
+      //驳回按钮事件
+      reject() {
+        this.showtext = true;
+        let ele = document.getElementsByClassName('el-dialog__wrapper');
+        let bodyscrollHeight = document.body.scrollHeight;
+        this.$nextTick(() => {
+          ele.forEach((element) => {
+            if (element.style.display !== 'none') {
+              element.scrollTop = bodyscrollHeight;
+            }
+          });
+        });
+      },
+      cancelreject() {
+        this.showtext = false;
+        this.cause = '';
+      },
+      surereject() {
+        if (!this.cause) {
+          this.$message.info('请填写驳回原因！');
+        } else {
+          let params = {
+            id: this.row.id,
+            checked: false,
+            myHandleId: this.row.dbid,
+            handleType: 1,
+            type: 1,
+            cause: this.cause
+          };
+          sendAudit(params).then((res) => {
+            if (res.success) {
+              this.$message.success('驳回成功!');
+              this.$emit('refesh');
+              this.equipmentdialog = false;
+            }
+          });
+        }
       }
-    }
-  },
-  watch: {
-    equipmentdialog (nVal, oVal) {
-      if (!nVal) {
-        this.cause = ''
-        this.showtext = false
+    },
+    watch: {
+      equipmentdialog(nVal, oVal) {
+        if (!nVal) {
+          this.cause = '';
+          this.showtext = false;
+        }
       }
     }
-  }
-}
+  };
 </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;
+  .repair_row {
+    margin-bottom: 15px;
+    .repair_column {
+      display: flex;
+      > span {
+        &:first-child {
+          font-weight: 700;
+          text-align: right;
+          width: 120px;
+        }
       }
     }
   }
-}
-.btnbox {
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-}
-::v-deep .el-button {
-  padding: 10px 20px;
-  margin-right: 10px;
-}
-.textbox {
-  margin-top: 10px;
-}
-.textbtnbox {
-  margin-top: 10px;
-  display: flex;
-  justify-content: center;
-}
+  .btnbox {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+  }
+  ::v-deep .el-button {
+    padding: 10px 20px;
+    margin-right: 10px;
+  }
+  .textbox {
+    margin-top: 10px;
+  }
+  .textbtnbox {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+  }
 </style>

src/views/maintenance/repair/components/RepairNotesTab.vue

@@ -1,14 +1,17 @@
+<!-- 维修信息 -->
 <template>
   <div class="repair_infoLogs">
-    <el-steps direction="vertical" :active="0" :space="100" v-for="(item,index) in repairInfoLogList" :key="index">
-      <el-step v-if="item.type=='ACCEPTANCE_CHEK'">
+    <el-steps
+      direction="vertical"
+      :active="0"
+      :space="100"
+      v-for="(item, index) in repairInfoLogList"
+      :key="index"
+    >
+      <el-step v-if="item.type == 'ACCEPTANCE_CHEK'">
         <span
           slot="icon"
-          :class="
-            index == 0
-              ? 'step_icon step_active'
-              : 'step_icon'
-          "
+          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
         ></span>
         <div slot="title" class="step_title">
           <span>验收</span>
@@ -17,31 +20,27 @@
         <div slot="description" class="step_description">
           <span>验收人：{{ item.content.userName }}</span>
           <span
-            >验收结果：{{ item.content.acceptanceResult ? '通过' : '驳回'}}</span
+            >验收结果：{{
+              item.content.acceptanceResult ? '通过' : '驳回'
+            }}</span
           >
-          <span>验收说明：{{item.content.acceptanceInstructions }}</span >
+          <span>验收说明：{{ item.content.acceptanceInstructions }}</span>
         </div>
       </el-step>
-      <el-step v-if="item.type=='WORK_REPORT'">
+      <el-step v-if="item.type == 'WORK_REPORT'">
         <span
           slot="icon"
-          :class="
-           index == 0
-              ? 'step_icon step_active'
-              : 'step_icon'
-          "
+          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
         ></span>
         <div slot="title" class="step_title">
           <span>报工</span>
-          <span>{{item.content.createTime}}</span>
+          <span>{{ item.content.createTime }}</span>
         </div>
         <div slot="description" class="work_report_desc">
-          <div>
-            处理说明：{{  item.content.repairReportExplain }}
-          </div>
+          <div> 处理说明：{{ item.content.repairReportExplain }} </div>
           <div class="work_report_imgs" style="width: 50px; height: 50px">
             <img
-              v-for="(ite, index) in  item.content.workOrderImgList"
+              v-for="(ite, index) in item.content.workOrderImgList"
               :key="index"
               :src="ite"
               alt=""
@@ -65,7 +64,7 @@
         </div>
       </el-step>
 
-      <el-step v-if="item.type=='START'">
+      <el-step v-if="item.type == 'START'">
         <span
           slot="icon"
           :class="
@@ -81,14 +80,10 @@
         </div>
       </el-step>
 
-      <el-step v-if="item.type=='CREATE_WORK_ORDER'">
+      <el-step v-if="item.type == 'CREATE_WORK_ORDER'">
         <span
           slot="icon"
-          :class="
-            index == 0
-              ? 'step_icon step_active'
-              : 'step_icon'
-          "
+          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
         ></span>
         <div slot="title" class="step_title">
           <span>生成工单</span>
@@ -101,102 +96,106 @@
         >
           <el-row>
             <el-col :span="8">
-              <span>工单编号：{{item.content.workOrderCode}}</span >
+              <span>工单编号：{{ item.content.workOrderCode }}</span>
             </el-col>
             <el-col :span="8">
-              <span>执行人：{{item.content.workOrderExecutorName}}</span>
+              <span>执行人：{{ item.content.workOrderExecutorName }}</span>
             </el-col>
             <el-col :span="8">
-              <span>执行人电话：{{item.content.workOrderExecutorPhone}}</span>
+              <span>执行人电话：{{ item.content.workOrderExecutorPhone }}</span>
             </el-col>
             <el-col :span="24">
-              <span>计划完成时间：{{ item.content.plannedTime}}</span>
+              <span>计划完成时间：{{ item.content.plannedTime }}</span>
             </el-col>
             <el-col :span="24">
-              <span>维修方案：{{item.content.maintenanceContent}}</span>
+              <span>维修方案：{{ item.content.maintenanceContent }}</span>
             </el-col>
           </el-row>
         </div>
       </el-step>
 
-      <el-step v-if="item.type=='EXAMINE_PLAN'">
+      <el-step v-if="item.type == 'EXAMINE_PLAN'">
         <span
           slot="icon"
-          :class="
-            index == 0
-              ? 'step_icon step_active'
-              : 'step_icon'
-          "
+          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
         ></span>
         <div slot="title" class="step_title">
           <span>审核维修计划</span>
           <span>{{ item.content.createTime }}</span>
         </div>
         <div slot="description" class="step_description">
-          <span>审核人：{{item.content.examinePlanUserName}}</span>
-          <span>审核结果：{{item.content.examinePlanUserName ? '通过' : ''}}</span>
-          <span>审核说明：{{item.content.examineExplain }}</span>
+          <span>审核人：{{ item.content.examinePlanUserName }}</span>
+          <span
+            >审核结果：{{
+              item.content.examinePlanUserName ? '通过' : ''
+            }}</span
+          >
+          <span>审核说明：{{ item.content.examineExplain }}</span>
         </div>
       </el-step>
 
-      <el-step v-if="item.type=='CREATE_PLAN'">
+      <el-step v-if="item.type == 'CREATE_PLAN'">
         <span
           slot="icon"
-          :class="
-            index == 0
-              ? 'step_icon step_active'
-              : 'step_icon'
-          "
+          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
         ></span>
         <div slot="title" class="step_title">
-          <span>创建维修计划<span v-if="item.createNum">（第{{item.createNum}}次）</span></span>
+          <span
+            >创建维修计划<span v-if="item.createNum"
+              >（第{{ item.createNum }}次）</span
+            ></span
+          >
           <span>{{ item.createTime }}</span>
         </div>
         <div slot="description" class="step_description">
-          <span>创建人：{{item.content.createUserName }}</span>
+          <span>创建人：{{ item.content.createUserName }}</span>
           <span>计划单号：{{ item.content.planCode }}</span>
           <span>计划名称：{{ item.content.planName }}</span>
         </div>
       </el-step>
-	  
-	  <el-step v-if="item.type == 'ACCEPTANCE_CHEK_OUTSOURCE_WORK_ORDER'">
-	    <span
-	      slot="icon"
-	      :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
-	    ></span>
-	    <div slot="title" class="step_title">
-	      <span>验收委外工单</span>
-	      <span>{{ item.createTime }}</span>
-	    </div>
-	    <div slot="description" class="step_description">
-	      <span>验收人：{{ item.content.executorName }}</span>
-	      <span>验收结果：{{ item.content.checkResult ? "通过" : "驳回" }}</span>
-	      <span>验收说明：{{ item.content.checkDesc }}</span>
-	    </div>
-	  </el-step>
-	  
-	  <el-step v-if="item.type == 'CREATE_OUTSOURCE_WORK_ORDER'">
-	    <span
-	      slot="icon"
-	      :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
-	    ></span>
-	    <div slot="title" class="step_title">
-	      <span>生成委外工单<span v-if="item.createNum">（第{{ item.createNum }}次）</span></span>
-	      <span>{{ item.createTime }}</span>
-	    </div>
-	    <div slot="description" class="step_description">
-	      <span>创建人：{{ item.content.executorName }}</span>
-	      <span>工单编号：{{ item.content.outsourcCode }}</span>
-	      <span>委外单位：{{ item.content.outsourcUnit }}</span>
-	    </div>
-	  </el-step>
-	  
-      <el-step v-if="item.type=='CREATE'">
+
+      <el-step v-if="item.type == 'ACCEPTANCE_CHEK_OUTSOURCE_WORK_ORDER'">
         <span
           slot="icon"
-          :class="
-            index == 0 ? 'step_icon step_active' : 'step_icon'
-          "
+          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
+        ></span>
+        <div slot="title" class="step_title">
+          <span>验收委外工单</span>
+          <span>{{ item.createTime }}</span>
+        </div>
+        <div slot="description" class="step_description">
+          <span>验收人：{{ item.content.executorName }}</span>
+          <span
+            >验收结果：{{ item.content.checkResult ? '通过' : '驳回' }}</span
+          >
+          <span>验收说明：{{ item.content.checkDesc }}</span>
+        </div>
+      </el-step>
+
+      <el-step v-if="item.type == 'CREATE_OUTSOURCE_WORK_ORDER'">
+        <span
+          slot="icon"
+          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
+        ></span>
+        <div slot="title" class="step_title">
+          <span
+            >生成委外工单<span v-if="item.createNum"
+              >（第{{ item.createNum }}次）</span
+            ></span
+          >
+          <span>{{ item.createTime }}</span>
+        </div>
+        <div slot="description" class="step_description">
+          <span>创建人：{{ item.content.executorName }}</span>
+          <span>工单编号：{{ item.content.outsourcCode }}</span>
+          <span>委外单位：{{ item.content.outsourcUnit }}</span>
+        </div>
+      </el-step>
+
+      <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>
@@ -209,99 +208,96 @@
 </template>
 
 <script>
-// import repair from '@/api/maintenance/repair/repair'
+  // import repair from '@/api/maintenance/repair/repair'
 
-export default {
-  props: {
-    repairInfoLogList: {
-      type: Array,
-      default: () => {
-        return []
+  export default {
+    props: {
+      repairInfoLogList: {
+        type: Array,
+        default: () => {
+          return [];
+        }
       }
+    },
+    watch: {
+      repairInfoLogList(val) {
+        console.log('repairInfoLogList', val);
+        // val.forEach(item => {
+        //   this.logs[item.type.code] = {
+        //     id: item.id,
+        //     name: item.type.desc,
+        //     content: JSON.parse(item.content),
+        //     createTime: item.createTime
+        //   }
+        // })
+        // this.length = val.length
+        // this.logsKeys = Object.keys(this.logs)
+        // this.lastStepName = this.logsKeys[this.logsKeys.length - 1]
+        // if (this.logs['WORK_REPORT']) {
+        //   const workOrderId = this.logs['WORK_REPORT'].content.workOrderId
+        //   repair
+        //     .getSpareData({ workOrderId })
+        //     .then(res => {
+        //       // console.log(res)
+        //       this.workReportData = res.data
+        //     })
+        //     .catch(() => {})
+        // }
+      }
+    },
+    data() {
+      return {
+        logs: {},
+        logsKeys: [],
+        lastStepName: '',
+        workReportData: [],
+        length: null
+      };
     }
-  },
-  watch: {
-    repairInfoLogList (val) {
-      console.log('repairInfoLogList',val)
-      // val.forEach(item => {
-      //   this.logs[item.type.code] = {
-      //     id: item.id,
-      //     name: item.type.desc,
-      //     content: JSON.parse(item.content),
-      //     createTime: item.createTime
-      //   }
-      // })
-      // this.length = val.length
-      // this.logsKeys = Object.keys(this.logs)
-      // this.lastStepName = this.logsKeys[this.logsKeys.length - 1]
-      // if (this.logs['WORK_REPORT']) {
-      //   const workOrderId = this.logs['WORK_REPORT'].content.workOrderId
-      //   repair
-      //     .getSpareData({ workOrderId })
-      //     .then(res => {
-      //       // console.log(res)
-      //       this.workReportData = res.data
-      //     })
-      //     .catch(() => {})
-      // }
-    }
-  },
-  data () {
-    return {
-      logs: {},
-      logsKeys: [],
-      lastStepName: '',
-      workReportData: [],
-      length:null,
-    }
-  }
-}
+  };
 </script>
 
 <style lang="scss" scoped>
-	
-.repair_infoLogs {
-  .step_icon {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    box-sizing: border-box;
-	background:#ccc;
-  }
-  .step_active {
-    border: 0;
-    background-color: #1890ff;
-  }
-  .step_title {
-    width: 400px;
-    color: #000;
-    display: flex;
-    justify-content: space-between;
-  }
-  .step_description {
-    display: flex;
-    padding: 5px 10px;
-    background-color: #f2f2f2;
-    justify-content: space-between;
-    color: #7f7f7f;
-  }
-  ::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;
+  .repair_infoLogs {
+    .step_icon {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      box-sizing: border-box;
+      background: #ccc;
+    }
+    .step_active {
+      border: 0;
+      background-color: #1890ff;
+    }
+    .step_title {
+      width: 400px;
       color: #000;
-      font-weight: 400;
+      display: flex;
+      justify-content: space-between;
     }
-    .el-table td.el-table__cell {
+    .step_description {
+      display: flex;
+      padding: 5px 10px;
       background-color: #f2f2f2;
-      padding: 0;
+      justify-content: space-between;
+      color: #7f7f7f;
+    }
+    ::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>

src/views/maintenance/repair/components/WorkOrderTab.vue

@@ -1,28 +1,29 @@
+<!-- 工单信息 -->
 <template>
   <div class="repairinfoLogs repair_infoLogs">
     <div>
       <el-row class="repair_row">
         <el-col :span="8" class="repair_column">
           <span>工单编号：</span>
-          <span>{{ workOrderInfo ? workOrderInfo.workOrderCode : '' }}</span>
+          <span>{{ workOrderInfo ? workOrderInfo.code : '' }}</span>
         </el-col>
         <el-col :span="8" class="repair_column">
           <span>执行部门：</span>
-          <span>{{ planInfo ? planInfo.executorDeptName : '' }}</span>
+          <span>{{ workOrderInfo ? workOrderInfo.executeGroupName : '' }}</span>
         </el-col>
         <el-col :span="8" class="repair_column">
           <span>执行人：</span>
-          <span>{{ planInfo ? planInfo.executeUserName : '' }}</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>{{ planInfo ? planInfo.planCode : '' }}</span>
+          <span>{{ workOrderInfo ? workOrderInfo.planCode : '' }}</span>
         </el-col>
         <el-col :span="8" class="repair_column">
           <span>计划名称：</span>
-          <span>{{ planInfo ? planInfo.planName : '' }}</span>
+          <span>{{ workOrderInfo ? workOrderInfo.planName : '' }}</span>
         </el-col>
         <el-col :span="8" class="repair_column">
           <span>计划完成时间：</span>
@@ -32,354 +33,510 @@
       <el-row class="repair_row">
         <el-col :span="24" class="repair_column">
           <span>维修方案：</span>
-          <span>{{ workOrderInfo ? workOrderInfo.content : '' }}</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>
+      </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.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-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-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_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 == '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_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 == '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 == '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>
+      <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 []
+  // 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 {};
+        }
       }
     },
-    workOrderInfo: {
-      type: Object,
-      default: () => {
-        return {}
+
+    watch: {
+      repairInfoLogList(val) {
+        console.log('接收的值', val);
+        val.forEach((item) => {
+          this.logs[item.type] = {
+            id: item.id,
+            content: item.content,
+            createTime: item.createTime
+          };
+        });
+        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);
       }
     },
-    planInfo: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-
-  watch: {
-    repairInfoLogList (val) {
-      console.log('接收的值',val)
-      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=>{
-
-       })
-     },
-
+    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
+      // 获取使用明细列表
+      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;
+  .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 10px;
-    background-color: #f2f2f2;
-    justify-content: space-between;
-    color: #7f7f7f;
-  }
-  ::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;
+  .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;
-      font-weight: 400;
+      display: flex;
+      justify-content: space-between;
     }
-    .el-table td.el-table__cell {
+    .step_description {
+      display: flex;
+      padding: 5px 10px;
       background-color: #f2f2f2;
-      padding: 0;
+      justify-content: space-between;
+      color: #7f7f7f;
+    }
+    ::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>

src/views/maintenance/repair/components/deviceInformation.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="deviceInformation">
+    <el-row class="repair_row">
+      <el-col :span="12" class="repair_column">
+        <span>设备编码：</span>
+        <span>{{ equipmentInfo ? equipmentInfo.code : '' }}</span>
+      </el-col>
+      <el-col :span="12" class="repair_column">
+        <span>权属部门：</span>
+        <span>{{ equipmentInfo ? equipmentInfo.ownershipGroupName : '' }}</span>
+      </el-col>
+    </el-row>
+    <el-row class="repair_row">
+      <el-col :span="12" class="repair_column">
+        <span>设备名称：</span>
+        <span>{{ equipmentInfo ? equipmentInfo.name : '' }}</span>
+      </el-col>
+      <el-col :span="12" class="repair_column">
+        <span>权属人：</span>
+        <span>{{ equipmentInfo ? equipmentInfo.ownershipUserName : '' }}</span>
+      </el-col>
+    </el-row>
+    <el-row class="repair_row">
+      <el-col :span="12" class="repair_column">
+        <span>设备分类：</span>
+        <span>{{
+          equipmentInfo.category ? equipmentInfo.category.categoryLevelPath : ''
+        }}</span>
+      </el-col>
+      <el-col :span="12" class="repair_column">
+        <span>权属人电话：</span>
+        <span>{{
+          equipmentInfo ? equipmentInfo.ownershipUserMobile : ''
+        }}</span>
+      </el-col>
+    </el-row>
+    <el-row class="repair_row">
+      <el-col :span="12" class="repair_column">
+        <span>固定资产编码：</span>
+        <span>{{ equipmentInfo ? equipmentInfo.fixCode : '' }}</span>
+      </el-col>
+      <el-col :span="12" class="repair_column">
+        <span>设备位置：</span>
+        <span>{{ equipmentInfo.position }}</span>
+      </el-col>
+    </el-row>
+    <el-row class="repair_row">
+      <el-col :span="12" class="repair_column">
+        <span>规格型号：</span>
+        <span>
+          {{
+            equipmentInfo.category && equipmentInfo.category.specification
+          }}|{{ equipmentInfo.category && equipmentInfo.category.modelType }}
+        </span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        equipmentInfo: {
+          category: {}
+        }
+      };
+    }
+  };
+</script>

src/views/maintenance/repair/components/repairReportingWork.vue

@@ -0,0 +1,559 @@
+<template>
+  <!-- 报工 -->
+  <el-dialog :visible.sync="visible" title="报工" width="80%">
+    <el-form>
+      <el-form-item label="实际起始时间">
+        <el-date-picker
+          v-model="time"
+          type="datetimerange"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          range-separator="至"
+          start-placeholder="实际开始日期"
+          end-placeholder="实际结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+    <div class="page">
+      <div class="content-detail">
+        <div class="maintain_equipment_info">
+          <HeaderTitle title="报修设备" size="16px"></HeaderTitle>
+          <div class="maintain_equipment_info_content">
+            <div
+              class="equipment_item"
+              v-for="item in infoData.planDeviceList"
+              :key="item.id"
+            >
+              <div class="equipment_info" v-if="item.substance">
+                <div class="item_info">
+                  <span class="item_label">设备编码</span>
+                  <span class="item_value">{{ item.substance.code }}</span>
+                </div>
+                <div class="item_info">
+                  <span class="item_label">设备名称</span>
+                  <span class="item_value">{{ item.substance.name }}</span>
+                </div>
+                <div class="item_info">
+                  <span class="item_label">设备型号</span>
+                  <span class="item_value">{{ item.substance.model }}</span>
+                </div>
+                <div class="item_info">
+                  <span class="item_label">工单编号</span>
+                  <span class="item_value">{{ infoData.code }}</span>
+                </div>
+                <div class="item_info">
+                  <span class="item_label">设备位置</span>
+                  <span class="item_value">{{
+                    item.substance.positionNames
+                  }}</span>
+                </div>
+              </div>
+              <p>操作事项</p>
+              <div class="ruleMatters_box">
+                <el-table :data="item.workItems" border>
+                  <el-table-column label="序号" width="50">
+                    <template slot-scope="scope">
+                      <span>{{ scope.$index + 1 }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="事项" prop="name" width="100">
+                    <template slot-scope="scope">
+                      <div>
+                        <span>{{ scope.row.name }}</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="内容" prop="content" width="300">
+                    <template slot-scope="scope">
+                      <div>
+                        <span>{{ scope.row.content }}</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作指导" prop="operationGuide">
+                    <template slot-scope="scope">
+                      <div class="operationGuide_box">
+                        <div class="left_content">
+                          <template v-if="scope.row.operationGuide">
+                            <div
+                              v-for="(item, index) in scope.row.operationGuide
+                                .toolList"
+                              :key="item.id"
+                              >{{ index + 1 }}.{{ item.name }}</div
+                            >
+                          </template>
+                        </div>
+                        <div class="line"></div>
+                        <div class="right_content">
+                          <template v-if="scope.row.operationGuide">
+                            <div
+                              v-for="(item, index) in scope.row.operationGuide
+                                .procedureList"
+                              :key="item.id"
+                              >{{ index + 1 }}.{{ item.content }}</div
+                            >
+                          </template>
+                        </div>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="标准" prop="norm" width="100">
+                    <template slot-scope="scope">
+                      <div>
+                        <span>{{ scope.row.norm }}</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="" prop="status" width="150">
+                    <template slot-scope="scope">
+                      <template>
+                        <el-select
+                          v-model="scope.row.status"
+                          placeholder="请选择"
+                        >
+                          <el-option
+                            v-for="item in options"
+                            :label="item.label"
+                            :value="item.value"
+                            :key="item.value"
+                          >
+                          </el-option>
+                        </el-select>
+                      </template>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="结果" prop="result" width="250">
+                    <template slot-scope="scope">
+                      <el-input
+                        v-model="scope.row.result"
+                        placeholder="请输入内容"
+                      ></el-input>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </div>
+          <div class="control">
+            <span>处理说明：</span>
+            <el-input
+              type="textarea"
+              placeholder="请输入内容"
+              v-model="infoData.reason"
+            >
+            </el-input>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="footer">
+      <el-button @click="cancel">返回</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { report } from '@/api/equipment/work.js';
+  import { getById } from '@/api/maintenance/patrol_maintenance';
+  export default {
+    data() {
+      return {
+        time: [],
+        options: [
+          {
+            label: '正常',
+            value: 0
+          },
+          {
+            label: '缺陷',
+            value: -1
+          }
+        ],
+        visible: false,
+        infoData: {
+          reason: ''
+        }
+      };
+    },
+    methods: {
+      open(row) {
+        this.getInfo(row);
+        this.visible = true;
+      },
+      cancel() {
+        this.visible = false;
+      },
+      async submit() {
+        console.log(this.time);
+        if (this.time.length > 0) {
+          this.infoData.acceptTime = this.time[0];
+          this.infoData.finishTime = this.time[1];
+          this.infoData.deviceList = this.infoData.planDeviceList;
+          console.log(this.infoData);
+          let deviceList = this.infoData.deviceList
+            .map((item) => {
+              return item.workItems;
+            })
+            .flat();
+          let boolen = deviceList.every((item) => item.status > -1);
+          this.infoData.isAbnormal = boolen ? 1 : 0;
+          report(this.infoData).then((res) => {
+            if (res.code == 0) {
+              this.$message.success('报工成功');
+              this.visible = false;
+              this.$emit('refresh');
+            }
+          });
+        } else {
+          this.$message.error('请选择实际起始时间');
+        }
+      },
+      // 表格数据
+      async getInfo(row) {
+        let res = await getById(row.planId);
+        console.log(row);
+        this.infoData = res.data;
+        this.infoData.workOrderId = row.id;
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .control {
+    display: flex;
+    > span {
+      width: 80px;
+    }
+  }
+  .page {
+    padding: 10px;
+  }
+  .page-title {
+    background: #fff;
+    font-size: 18px;
+    padding: 6px 20px;
+    font-weight: 500;
+    .page-title-div {
+      margin: 5px 0;
+      height: 30px;
+      line-height: 30px;
+      border-bottom: 1px solid #eaeefb;
+      .title-div-no {
+        margin-left: 10px;
+        font-weight: 400;
+        color: #909090;
+        font-size: 14px;
+      }
+    }
+  }
+  .page-data {
+    padding-top: 10px;
+  }
+  .content-detail {
+    background: #fff;
+    padding: 20px;
+  }
+  .flows {
+    .flow-left {
+      width: 156px;
+      height: 70px;
+      border: 1px dashed #ccc;
+      padding: 10px;
+    }
+    .row {
+      margin-top: 13px;
+    }
+  }
+  .basic-details-title {
+    margin-bottom: 12px;
+    margin-top: 20px;
+    border-bottom: 1px solid #157a2c;
+    padding-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .basic-details-title .border-span {
+    height: 18px;
+    font-size: 16px;
+    border-left: 4px solid #157a2c;
+    padding-left: 8px;
+
+    font-weight: 500;
+  }
+  .heade-right {
+    // float: right;
+    .heade-right-content {
+      margin-right: 12px;
+      font-size: 14px;
+      display: inline-block;
+      .content-key {
+        color: #3e3e3e;
+        margin-right: 12px;
+        font-weight: 500;
+      }
+      .content-value {
+        color: #000;
+      }
+    }
+  }
+  .list-title {
+    font-size: 14px;
+    color: #3e3e3e;
+    margin: 10px 0px;
+  }
+  .goods {
+    background: #a30014;
+    border: 1px solid #a30014;
+  }
+  .details-title {
+    display: inline-block;
+    color: #6e6e6e;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 13px;
+    width: 70px;
+    text-align: right;
+  }
+  .details-con {
+    color: #3e3e3e;
+    font-size: 14px;
+  }
+  .detailed-tab {
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+  .maintain_equipment_info_content {
+    padding: 0 30px;
+    .equipment_item {
+      border: 1px solid #ccc;
+      font-size: 14px;
+      padding: 15px;
+      margin-bottom: 30px;
+      .equipment_info {
+        display: flex;
+        flex-wrap: wrap;
+        border: 1px solid #ddd;
+        .item_info {
+          width: 33.33%;
+          height: 24px;
+          line-height: 24px;
+          display: flex;
+          .item_label {
+            width: 90px;
+            text-align: center;
+            background-color: #f2f2f2;
+            font-weight: 700;
+          }
+          .item_value {
+            border-bottom: 1px solid #f2f2f2;
+            flex: 1;
+            padding-left: 5px;
+          }
+        }
+      }
+      > p {
+        margin-top: 20px;
+        color: #797979;
+      }
+      .matter_info {
+        ::v-deep .el-table {
+          th.el-table__cell {
+            background-color: #f2f2f2;
+            padding: 0;
+          }
+          td.el-table__cell {
+            padding: 0;
+          }
+        }
+      }
+      .ruleMatters_box {
+        flex: 3;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .divider {
+          flex: 0 0 50px;
+          .title {
+            height: 35px;
+          }
+        }
+        .el-table {
+          overflow: auto;
+          .operationGuide_box {
+            width: 100%;
+            display: flex;
+            position: relative;
+            .left_content {
+              width: 30%;
+              padding: 10px;
+              margin-right: 10px;
+              overflow-y: auto;
+            }
+            .line {
+              position: absolute;
+              top: -10px;
+              left: 30%;
+              bottom: -10px;
+              height: 110%;
+              width: 1px;
+              background-color: #ededed;
+            }
+            .right_content {
+              flex: 1;
+              padding: 10px;
+              overflow-y: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .el-form-item--medium .el-form-item__label {
+    color: #6e6e6e;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .warehouse {
+    display: block;
+    border-bottom: 1px solid #eaeefb;
+    padding: 10px 0;
+  }
+  .box-card {
+    .store-box {
+      width: 80%;
+      .store-box-span {
+        display: inline-block;
+        font-size: 14px;
+        height: 50px;
+        width: 50px;
+        text-align: center;
+        line-height: 50px;
+        color: #fff;
+        margin: 2px;
+      }
+    }
+  }
+  .vacant {
+    background: #3196fb;
+  }
+  .inUse {
+    background: #157a2c;
+  }
+  .invalid {
+    background: #cccccc;
+  }
+  .full {
+    background: #cc3300;
+  }
+
+  .map {
+    display: inline-block;
+    position: absolute;
+    right: 4%;
+    top: 15%;
+    width: 380px;
+    height: 200px;
+    background-color: #b12492;
+  }
+  .mapTitle {
+    display: inline-block;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    right: 11%;
+    top: 39%;
+  }
+  .equipment {
+    position: relative;
+    width: 100%;
+    min-height: 200px;
+    .equipment-icon {
+      text-align: center;
+      line-height: 30px;
+      width: 30px;
+      height: 30px;
+      border-radius: 15px;
+      border: 2px solid #000;
+    }
+    .equipment-step {
+      position: absolute;
+      left: 15px;
+      border-left: 2px solid #000;
+      width: 2px;
+      height: 85%;
+    }
+
+    .equipment-arrows {
+      position: absolute;
+      bottom: -8px;
+      left: 8px;
+      border: 8px solid rgb(255, 255, 255);
+      border-top-color: #000;
+      width: 0;
+      height: 0;
+    }
+    .equipment-title {
+      position: absolute;
+      top: 3%;
+      left: 3%;
+    }
+    .equipment-details {
+      position: absolute;
+      top: 3%;
+      left: 25%;
+      span {
+        margin-right: 70px;
+      }
+    }
+    .equipment-content {
+      display: flex;
+      .equipment-content-span1 {
+        width: 150px;
+        margin: 20px 70px 5px 47px;
+      }
+      .equipment-content-span2 {
+        width: 350px;
+        margin: 20px 70px 5px 120px;
+      }
+    }
+  }
+  .btnbox {
+    display: flex;
+    justify-content: center;
+  }
+  ::v-deep .el-button {
+    padding: 10px 20px;
+    margin-right: 10px;
+  }
+  .textbox {
+    margin-top: 10px;
+  }
+  .execute_info {
+    margin: 30px 0;
+    .execute_info_title {
+      border-bottom: 1px solid #157a2c;
+      padding-bottom: 3px;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      > span:first-child {
+        line-height: 16px;
+        border-left: 6px solid #157a2c;
+        padding-left: 6px;
+      }
+    }
+    .execute_row {
+      padding: 0 30px;
+      .column {
+        display: flex;
+        font-size: 14px;
+        margin-bottom: 20px;
+        .label {
+          // width: 110px;
+          text-align: center;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+</style>

src/views/maintenance/repair/index.vue

@@ -54,6 +54,15 @@
           { key: 'planRepair', name: '计划性维修' }
         ]
       };
+    },
+    mounted() {
+      switch (this.$route.query.title) {
+        case '工单':
+          this.activeComp = 'workOrder';
+          break;
+        default:
+          break;
+      }
     }
   };
 </script>

src/views/maintenance/repair/outsourcingOrder/index.vue

@@ -1,30 +1,33 @@
 <template>
   <div class="ele-body">
-     <el-card shadow="never" v-loading="loading">
-	   <order-search @search="reload">
-	   </order-search>
-	   <!-- 数据表格 -->
-	   <ele-pro-table
-	     ref="table"
-	     :columns="columns"
-	     :datasource="datasource"
-	     cache-key="systemAppointTable"
-		 @select-all="onSelectAll"
-		 @selection-change="selectItem"
-		 highlight-current-row
-	   >
-	     <!-- 表头工具栏 -->
-	     <template v-slot:toolbar>
-	       <el-button icon="el-icon-upload2" size="small"  @click="handlExport">导出</el-button>
-	       <el-button icon="el-icon-printer" size="small" @click="openAppoint">打印委外单</el-button>
-	     </template>
-       <template v-slot:code="{ row }">
-         <el-link type="primary" :underline="false" @click="goDetail(row)">
-           {{ row.code }}
-         </el-link>
-       </template>
-	     <!-- 操作列 -->
-	     <template v-slot:action="{ row }">
+    <el-card shadow="never" v-loading="loading">
+      <order-search @search="reload"> </order-search>
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemAppointTable"
+        @select-all="onSelectAll"
+        @selection-change="selectItem"
+        highlight-current-row
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button icon="el-icon-upload2" size="small" @click="handlExport"
+            >导出</el-button
+          >
+          <el-button icon="el-icon-printer" size="small" @click="openAppoint"
+            >打印委外单</el-button
+          >
+        </template>
+        <template v-slot:code="{ row }">
+          <el-link type="primary" :underline="false" @click="goDetail(row)">
+            {{ row.code }}
+          </el-link>
+        </template>
+        <!-- 操作列 -->
+        <!-- <template v-slot:action="{ row }">
 	       <el-link
 	         type="primary"
 	         :underline="false"
@@ -34,135 +37,135 @@
 	       >
 	         验收
 	       </el-link>
-	     </template>
-	   </ele-pro-table>
-     </el-card>
-	 <!-- 验收 -->
-	 <AppointDetailsDialog ref="detailsDialogRef" @refesh="reload"/>
-	 <!-- 委派单模板 -->
-	 <AppointDialog ref="appointDialogRef" />
+	     </template> -->
+      </ele-pro-table>
+    </el-card>
+    <!-- 验收 -->
+    <AppointDetailsDialog ref="detailsDialogRef" @refesh="reload" />
+    <!-- 委派单模板 -->
+    <AppointDialog ref="appointDialogRef" />
   </div>
 </template>
 
 <script>
   import OrderSearch from './components/order-search.vue';
-  import AppointDialog from './components/appointDialog.vue'
-  import AppointDetailsDialog from './components/AppointDetailsDialog.vue'
+  import AppointDialog from './components/appointDialog.vue';
+  import AppointDetailsDialog from './components/AppointDetailsDialog.vue';
   import { outsourceList } from '@/api/maintenance/repair_report';
   import dictMixins from '@/mixins/dictMixins';
   export default {
-	mixins: [dictMixins],
+    mixins: [dictMixins],
     components: {
       OrderSearch,
-	  AppointDialog,
-	  AppointDetailsDialog
+      AppointDialog,
+      AppointDetailsDialog
     },
-    data () {
+    data() {
       return {
-		// 表格列配置
-		columns: [
-		  {
-			width: 45,
-			type: 'selection',
-			columnKey: 'selection',
-			align: 'center'
-		  },
-		  {
-		    columnKey: 'index',
-		    label: '序号',
-		    type: 'index',
-		    width: 55,
-		    align: 'center',
-		    showOverflowTooltip: true,
-		    fixed: 'left'
-		  },
-		  {
-		    prop: 'code',
-		    label: '工单编号',
-		    align: 'center',	
-		    showOverflowTooltip: true,
-		    minWidth: 110,
-			slot: 'code'
-		  },
-		  {
-		    prop: 'repairRequestCode',
-		    label: '报修单号',
-		    align: 'center',
-		    showOverflowTooltip: true,
-		    minWidth: 110
-		  },
-		  {
-		    prop: 'equiName',
-		    label: '设备名称',
-		    align: 'center',	
-		    showOverflowTooltip: true,
-		    minWidth: 110
-		  },
-		  {
-		    prop: 'equiCode',
-		    label: '设备编码',
-		    align: 'center',	
-		    showOverflowTooltip: true,
-		    minWidth: 110
-		  },
-		  {
-		    prop: 'outsourcUnit',
-		    label: '委外单位',
-		    align: 'center',	
-		    showOverflowTooltip: true,
-		    minWidth: 110
-		  },
-			{
-			  prop: 'planCompletionTime',
-			  label: '计划完成时间',
-			  align: 'center',	
-			  showOverflowTooltip: true,
-			  minWidth: 110
-			},
-			{
-			  prop: 'checkTime',
-			  label: '实际完成时间',
-			  align: 'center',	
-			  showOverflowTooltip: true,
-			  minWidth: 110
-			},
-			{
-			  prop: 'status',
-			  label: '状态',
-			  align: 'center',	
-			  showOverflowTooltip: true,
-			  minWidth: 110,
-			  formatter: (_row, _column, cellValue) => {
-			    return this.getDictValue('委外单状态', _row.status);
-			  }
-			},
-		  {
-		    prop: 'createBy',
-		    label: '发布人',
-		    align: 'center',	
-		    showOverflowTooltip: true,
-		    minWidth: 110
-		  },
-		  {
-		    prop: 'createTime',
-		    label: '发布时间',
-		    align: 'center',
-		    showOverflowTooltip: true,
-		    minWidth: 110,
-		    formatter: (_row, _column, cellValue) => {
-		      return this.$util.toDateString(cellValue);
-		    }
-		  },
-		  {
-		    columnKey: 'action',
-		    label: '操作',
-		    width: 80,
-		    align: 'center',
-		    resizable: false,
-		    slot: 'action',
-		    showOverflowTooltip: true
-		  }
-		],
+        // 表格列配置
+        columns: [
+          {
+            width: 45,
+            type: 'selection',
+            columnKey: 'selection',
+            align: 'center'
+          },
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'code',
+            label: '工单编号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            slot: 'code'
+          },
+          {
+            prop: 'repairRequestCode',
+            label: '报修单号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'equiName',
+            label: '设备名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'equiCode',
+            label: '设备编码',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'outsourcUnit',
+            label: '委外单位',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planCompletionTime',
+            label: '计划完成时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'checkTime',
+            label: '实际完成时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'status',
+            label: '状态',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            formatter: (_row, _column, cellValue) => {
+              return this.getDictValue('委外单状态', _row.status);
+            }
+          },
+          {
+            prop: 'createBy',
+            label: '发布人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'createTime',
+            label: '发布时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 80,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
         // 加载状态
         loading: false,
         infoData: {},
@@ -170,15 +173,13 @@
         addDialogTitle: '新增报修记录',
         detailsDialogTitle: '报修记录详情',
         deviceInfo: {}, //设备信息
-		multipleSelection:[]
+        multipleSelection: []
       };
     },
-    computed: {
-
+    computed: {},
+    created() {
+      this.requestDict('委外单状态');
     },
-	created () {
-	  this.requestDict('委外单状态')
-	},
     methods: {
       /* 表格数据源 */
       datasource({ page, limit, where, order }) {
@@ -188,54 +189,49 @@
       reload(where) {
         this.$refs.table.reload({ page: 1, where });
       },
-	  
-	  openCheck(row){
-		  row.isshow = true
-		  row.title = '工单详情'
-		  this.$refs.detailsDialogRef.init(row)
-	  },
-	  
-	  goDetail(row){
-		  row.isshow = false
-		  row.title = '工单详情'
-		  this.$refs.detailsDialogRef.init(row)
-	  },
-	  
-	  onSelectAll() {
-	    this.$refs.table.clearSelection();
-	  },
-	  selectItem(rows) {
-	    if (rows.length > 1) {
-	      const newRows = rows.filter((it, index) => {
-	        if (index == rows.length - 1) {
-	          this.$refs.table.toggleRowSelection(it, true);
-	          return true;
-	        } else {
-	          this.$refs.table.toggleRowSelection(it, false);
-	          return false;
-	        }
-	      });
-	      this.multipleSelection = newRows;
-	    } else {
-	      this.multipleSelection = rows;
-	    }
-	  },
-	  
-	  handlExport(){
-		  
-	  },
-	  
-			openAppoint(){
-				if(this.multipleSelection.length==0){
-					return this.$message.warning('请选择一条委外单')
-				}
-				this.$refs.appointDialogRef.init(this.multipleSelection[0])
-			}
-	  
+
+      openCheck(row) {
+        row.isshow = true;
+        row.title = '工单详情';
+        this.$refs.detailsDialogRef.init(row);
+      },
+
+      goDetail(row) {
+        row.isshow = false;
+        row.title = '工单详情';
+        this.$refs.detailsDialogRef.init(row);
+      },
+
+      onSelectAll() {
+        this.$refs.table.clearSelection();
+      },
+      selectItem(rows) {
+        if (rows.length > 1) {
+          const newRows = rows.filter((it, index) => {
+            if (index == rows.length - 1) {
+              this.$refs.table.toggleRowSelection(it, true);
+              return true;
+            } else {
+              this.$refs.table.toggleRowSelection(it, false);
+              return false;
+            }
+          });
+          this.multipleSelection = newRows;
+        } else {
+          this.multipleSelection = rows;
+        }
+      },
+
+      handlExport() {},
+
+      openAppoint() {
+        if (this.multipleSelection.length == 0) {
+          return this.$message.warning('请选择一条委外单');
+        }
+        this.$refs.appointDialogRef.init(this.multipleSelection[0]);
+      }
     }
   };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/maintenance/repair/workOrder/details.vue

@@ -0,0 +1,787 @@
+<template>
+  <!-- 巡点检计划审批 -->
+  <div class="page" v-loading="pageLoading">
+    <el-form label-width="130px">
+      <div class="content-detail">
+        <div class="basic-details">
+          <HeaderTitle title="基本信息" size="16px">
+            <el-button
+              type="primary"
+              @click="
+                $router.push({
+                  path: '/maintenance/repair',
+                  query: { title: '工单' }
+                })
+              "
+              >返回</el-button
+            >
+          </HeaderTitle>
+          <el-row>
+            <el-col :span="12">
+              <el-col :span="12">
+                <el-form-item label="计划单号">
+                  <span> {{ infoData.code }} </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="来源计划配置单号">
+                  <span> {{ infoData.planConfigCode }} </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="名称">
+                  <span> {{ infoData.name }} </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="部门">
+                  <span v-if="infoData.executor && infoData.executor.length">
+                    {{ infoData.executor[0].deptName }}
+                  </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="人员">
+                  <span v-if="infoData.executor && infoData.executor.length">
+                    {{ infoData.executor.map((i) => i.name).join(',') }}
+                  </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="计划完成时长">
+                  <span v-if="infoData.duration >= 0"
+                    >{{ infoData.duration }}分钟</span
+                  >
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="周期">
+                  <span v-if="infoData.ruleInfo">
+                    {{ infoData.ruleInfo.cycleValue
+                    }}{{
+                      getDictValue('巡点检周期', infoData.ruleInfo.cycleType)
+                    }}
+                  </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="设备分类">
+                  <span> {{ infoData.categoryLevelName }} </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="规则名称">
+                  <span>
+                    {{ infoData.ruleInfo && infoData.ruleInfo.name }}
+                  </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="创建部门">
+                  <span> {{ infoData.createUserGroupName }} </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="创建人">
+                  <span> {{ infoData.createUserName }} </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="创建时间">
+                  <span> {{ infoData.createTime }} </span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="备注">
+                  <span> {{ infoData.remark }} </span>
+                </el-form-item>
+              </el-col>
+            </el-col>
+            <el-col :span="12">
+              <!-- <img :src="infoData.imageUrl" alt="" /> -->
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 巡点检、保养设备 -->
+        <div class="maintain_equipment_info">
+          <HeaderTitle title="巡点检设备" size="16px"></HeaderTitle>
+          <div class="maintain_equipment_info_content">
+            <div
+              class="equipment_item"
+              v-for="item in infoData.planDeviceList"
+              :key="item.id"
+            >
+              <div class="equipment_info" v-if="item.substance">
+                <div class="item_info">
+                  <span class="item_label">设备编码</span>
+                  <span class="item_value">{{ item.substance.code }}</span>
+                </div>
+                <div class="item_info">
+                  <span class="item_label">设备名称</span>
+                  <span class="item_value">{{ item.substance.name }}</span>
+                </div>
+                <div class="item_info">
+                  <span class="item_label">设备型号</span>
+                  <span class="item_value">{{ item.substance.model }}</span>
+                </div>
+                <div class="item_info">
+                  <span class="item_label">设备位置</span>
+                  <span class="item_value">{{
+                    item.substance.positionNames
+                  }}</span>
+                </div>
+              </div>
+              <p>操作事项</p>
+              <div class="ruleMatters_box">
+                <el-table :data="item.workItems" border>
+                  <el-table-column label="序号" width="50">
+                    <template slot-scope="scope">
+                      <span>{{ scope.$index + 1 }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="事项" prop="name" width="100">
+                    <template slot-scope="scope">
+                      <div>
+                        <span>{{ scope.row.name }}</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="内容" prop="content" width="300">
+                    <template slot-scope="scope">
+                      <div>
+                        <span>{{ scope.row.content }}</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作指导" prop="operationGuide">
+                    <template slot-scope="scope">
+                      <div class="operationGuide_box">
+                        <div class="left_content">
+                          <template v-if="scope.row.operationGuide">
+                            <div
+                              v-for="(item, index) in scope.row.operationGuide
+                                .toolList"
+                              :key="item.id"
+                              >{{ index + 1 }}.{{ item.name }}</div
+                            >
+                          </template>
+                        </div>
+                        <div class="line"></div>
+                        <div class="right_content">
+                          <template v-if="scope.row.operationGuide">
+                            <div
+                              v-for="(item, index) in scope.row.operationGuide
+                                .procedureList"
+                              :key="item.id"
+                              >{{ index + 1 }}.{{ item.content }}</div
+                            >
+                          </template>
+                        </div>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="标准" prop="norm" width="100">
+                    <template slot-scope="scope">
+                      <div>
+                        <span>{{ scope.row.norm }}</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+              <!-- <div class="matter_info">
+                <el-table :data="item.workItems || []" border>
+                  <el-table-column label="序号" align="center" width="80">
+                    <template slot-scope="scope">
+                      <span>{{ scope.$index + 1 }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="事项" prop="name" />
+                  <el-table-column label="内容" prop="content" />
+                  <el-table-column label="标准" prop="norm" />
+                </el-table>
+              </div> -->
+            </div>
+          </div>
+        </div>
+        <!-- 巡点检、审批信息 -->
+        <!-- <div class="examine_info">
+          <HeaderTitle title="审批信息" size="16px"></HeaderTitle>
+          <div class="item_row">
+            <div class="item_info">
+              <span class="item_label border_top">审批结果</span>
+              <span class="item_value" v-if="infoData.approvalResult === 0"
+                >驳回</span
+              >
+              <span class="item_value" v-if="infoData.approvalResult === 1"
+                >通过</span
+              >
+            </div>
+            <div class="item_info border_top">
+              <span class="item_label">审批人</span>
+              <span class="item_value">{{ infoData.verifyUserName }}</span>
+            </div>
+            <div class="item_info border_right border_top">
+              <span class="item_label">审批时间</span>
+              <span class="item_value">{{ infoData.approvalTime }}</span>
+            </div>
+            <div
+              class="item_info reason border_right"
+              v-if="infoData.auditResult == 0"
+            >
+              <span class="item_label">驳回原因</span>
+              <span class="item_value">{{ infoData.rejectCause }}</span>
+            </div>
+          </div>
+        </div> -->
+        <!-- 巡点检、执行信息 -->
+        <!-- <div class="execute_info">
+          <HeaderTitle title="执行信息" size="16px"></HeaderTitle>
+          <el-table :data="infoData.planWorkOrderList || []">
+            <el-table-column label="序号" align="center" width="60">
+              <template slot-scope="scope">
+                <span>{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="工单编号"
+              align="center"
+              prop="workOrderCode"
+            />
+            <el-table-column label="状态" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.status.descp }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="执行部门"
+              align="center"
+              prop="executorDeptName"
+            />
+            <el-table-column
+              label="执行人员"
+              align="center"
+              prop="executeUserName"
+            />
+            <el-table-column
+              label="开始时间"
+              align="center"
+              prop="acceptTime"
+            />
+            <el-table-column
+              label="完成时间"
+              align="center"
+              prop="finishTime"
+            />
+            <el-table-column
+              label="计划工时"
+              align="center"
+              prop="planManhour"
+            />
+            <el-table-column
+              label="实际工时"
+              align="center"
+              prop="practicalManhour"
+            />
+            <el-table-column
+              label="开始时间"
+              align="center"
+              prop="acceptTime"
+              width="160"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.acceptTime ? scope.row.acceptTime : '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="完成时间"
+              align="center"
+              prop="finishTime"
+              width="160"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.finishTime ? scope.row.finishTime : '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="计划工时" align="center" prop="planManhour">
+              <template slot-scope="{ row }">
+                <span>{{
+                  row.planManhour ? row.planManhour + '分钟' : '-'
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="实际工时"
+              align="center"
+              prop="practicalManhour"
+            >
+              <template slot-scope="{ row }">
+                <span>{{
+                  row.practicalManhour ? row.practicalManhour + '分钟' : '-'
+                }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div> -->
+        <div class="btnbox" v-if="$route.query.isshow">
+          <el-button class="confirm-btn" type="danger" plain @click="reject"
+            >驳回</el-button
+          >
+          <el-button class="confirm-btn" type="success" plain @click="pass"
+            >通过</el-button
+          >
+          <!-- <el-button class="cancel-btn">关闭</el-button> -->
+        </div>
+        <div class="textbox" v-if="showtext" ref="rejectContent">
+          <el-input
+            type="textarea"
+            placeholder="请输入驳回原因"
+            v-model="cause"
+            maxlength="30"
+            rows="5"
+            show-word-limit
+          >
+          </el-input>
+          <div class="textbtnbox">
+            <el-button size="small" round @click="cancelreject">取消</el-button>
+            <el-button size="small" round @click="surereject">提交</el-button>
+          </div>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  // import { getDetail, sendAudit } from '@/api/stockManagement/stocking'
+  // import { useDictLabel, patrolMatterStatus } from '@/utils/dict/index'
+  import { getById } from '@/api/maintenance/patrol_maintenance';
+  import dictMixins from '@/mixins/dictMixins';
+  export default {
+    mixins: [dictMixins],
+    data() {
+      return {
+        num: 1,
+        dialogVisible: false,
+        baseInfo: {},
+        pageLoading: false,
+        typeValue: null,
+        contract_type: [],
+        status: [
+          {
+            value: true,
+            label: '失效'
+          },
+          {
+            value: false,
+            label: '生效'
+          }
+        ],
+        ruleItem: [],
+        cause: '',
+        showtext: false,
+        infoData: {}
+      };
+    },
+    async created() {
+      this.requestDict('巡点检周期');
+      this.getInfo();
+    },
+    methods: {
+      // getStatus: useDictLabel(patrolMatterStatus),
+      delete() {},
+      // 点击切换事件
+      tab(index) {
+        this.num = index;
+      },
+      // 表格数据
+      async getInfo() {
+        this.pageLoading = true;
+        const res = await getById(this.$route.query.id).catch(() => {
+          this.pageLoading = false;
+        });
+        if (res?.data) {
+          this.infoData = res.data;
+        }
+        this.pageLoading = false;
+      },
+      //通过按钮事件
+      pass() {
+        let params = {
+          id: this.$route.query.id,
+          checked: true,
+          myHandleId: this.$route.query.dbid,
+          cause: '',
+          type: 2,
+          handleType: 0
+        };
+        sendAudit(params).then((res) => {
+          if (res.success) {
+            this.$message.success('审批通过!');
+            this.$router.back();
+          }
+        });
+      },
+      //驳回按钮事件
+      reject() {
+        this.showtext = true;
+        let bodyscrollHeight = document.body.scrollHeight;
+        this.$nextTick(() => {
+          document.documentElement.scrollTop = bodyscrollHeight;
+        });
+      },
+      cancelreject() {
+        this.showtext = false;
+        this.cause = '';
+      },
+      surereject() {
+        if (!this.cause) {
+          this.$message.info('请填写驳回原因！');
+        } else {
+          let params = {
+            id: this.$route.query.id,
+            checked: false,
+            myHandleId: this.$route.query.dbid,
+            cause: this.cause,
+            type: 2,
+            handleType: 0
+          };
+          sendAudit(params).then((res) => {
+            if (res.success) {
+              this.$message.success('驳回成功!');
+              this.$router.back();
+            }
+          });
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  // @import '@/assets/css/oaa.scss';
+  .page {
+    padding: 10px;
+  }
+  .page-title {
+    background: #fff;
+    font-size: 18px;
+    padding: 6px 20px;
+    font-weight: 500;
+    .page-title-div {
+      margin: 5px 0;
+      height: 30px;
+      line-height: 30px;
+      border-bottom: 1px solid #eaeefb;
+      .title-div-no {
+        margin-left: 10px;
+        font-weight: 400;
+        color: #909090;
+        font-size: 14px;
+      }
+    }
+  }
+  .page-data {
+    padding-top: 10px;
+  }
+  .content-detail {
+    background: #fff;
+    padding: 20px;
+  }
+  .flows {
+    .flow-left {
+      width: 156px;
+      height: 70px;
+      border: 1px dashed #ccc;
+      padding: 10px;
+    }
+    .row {
+      margin-top: 13px;
+    }
+  }
+  .basic-details-title {
+    margin-bottom: 12px;
+    margin-top: 20px;
+    border-bottom: 1px solid #1890ff;
+    padding-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .basic-details-title .border-span {
+    height: 18px;
+    font-size: 16px;
+    border-left: 4px solid #1890ff;
+    padding-left: 8px;
+
+    font-weight: 500;
+  }
+  .heade-right {
+    // float: right;
+    .heade-right-content {
+      margin-right: 12px;
+      font-size: 14px;
+      display: inline-block;
+      .content-key {
+        color: #3e3e3e;
+        margin-right: 12px;
+        font-weight: 500;
+      }
+      .content-value {
+        color: #000;
+      }
+    }
+  }
+  .list-title {
+    font-size: 14px;
+    color: #3e3e3e;
+    margin: 10px 0px;
+  }
+  .goods {
+    background: #a30014;
+    border: 1px solid #a30014;
+  }
+  .details-title {
+    display: inline-block;
+    color: #6e6e6e;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 13px;
+    width: 70px;
+    text-align: right;
+  }
+  .details-con {
+    color: #3e3e3e;
+    font-size: 14px;
+  }
+  .detailed-tab {
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__label {
+    color: #6e6e6e;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .warehouse {
+    display: block;
+    border-bottom: 1px solid #eaeefb;
+    padding: 10px 0;
+  }
+  .box-card {
+    .store-box {
+      width: 80%;
+      .store-box-span {
+        display: inline-block;
+        font-size: 14px;
+        height: 50px;
+        width: 50px;
+        text-align: center;
+        line-height: 50px;
+        color: #fff;
+        margin: 2px;
+      }
+    }
+  }
+  .vacant {
+    background: #3196fb;
+  }
+  .inUse {
+    background: #157a2c;
+  }
+  .invalid {
+    background: #cccccc;
+  }
+  .full {
+    background: #cc3300;
+  }
+
+  .maintain_equipment_info {
+    .maintain_equipment_info_title {
+      border-bottom: 1px solid #1890ff;
+      padding-bottom: 3px;
+      margin-bottom: 20px;
+      > span {
+        display: inline-block;
+        line-height: 16px;
+        border-left: 6px solid #1890ff;
+        padding-left: 6px;
+      }
+    }
+    .maintain_equipment_info_content {
+      padding: 0 30px;
+      .equipment_item {
+        border: 1px solid #ccc;
+        font-size: 14px;
+        padding: 15px;
+        margin-bottom: 30px;
+        .equipment_info {
+          display: flex;
+          flex-wrap: wrap;
+          border: 1px solid #ddd;
+          .item_info {
+            width: 33.33%;
+            height: 24px;
+            line-height: 24px;
+            display: flex;
+            .item_label {
+              width: 90px;
+              text-align: center;
+              background-color: #f2f2f2;
+              font-weight: 700;
+            }
+            .item_value {
+              border-bottom: 1px solid #f2f2f2;
+              flex: 1;
+              padding-left: 5px;
+            }
+            &:last-child {
+              width: 100%;
+              .item_value {
+                border: 0;
+              }
+            }
+          }
+        }
+        > p {
+          margin-top: 20px;
+          color: #797979;
+        }
+        .matter_info {
+          ::v-deep .el-table {
+            th.el-table__cell {
+              background-color: #f2f2f2;
+              padding: 0;
+            }
+            td.el-table__cell {
+              padding: 0;
+            }
+          }
+        }
+        .ruleMatters_box {
+          flex: 3;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .divider {
+            flex: 0 0 50px;
+            .title {
+              height: 35px;
+            }
+          }
+          .el-table {
+            overflow: auto;
+            .operationGuide_box {
+              width: 100%;
+              display: flex;
+              position: relative;
+              .left_content {
+                flex: 0 0 300px;
+                padding: 10px;
+                margin-right: 10px;
+                overflow-y: auto;
+              }
+              .line {
+                position: absolute;
+                top: -10px;
+                left: 300px;
+                bottom: -10px;
+                height: 110%;
+                width: 1px;
+                background-color: #ededed;
+              }
+              .right_content {
+                flex: 1;
+                padding: 10px;
+                overflow-y: auto;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .examine_info {
+    margin-bottom: 30px;
+    .examine_info_title {
+      border-bottom: 1px solid #1890ff;
+      padding-bottom: 3px;
+      margin-bottom: 20px;
+      > span {
+        display: inline-block;
+        line-height: 16px;
+        border-left: 6px solid #1890ff;
+        padding-left: 6px;
+      }
+    }
+    .item_row {
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 14px;
+      padding: 0 15px;
+      box-sizing: border-box;
+      .item_info {
+        width: 33.33%;
+        height: 24px;
+        line-height: 24px;
+        display: flex;
+        &.border_right {
+          border-right: 1px solid #f2f2f2;
+        }
+        &.border_top {
+          border-top: 1px solid #f2f2f2;
+        }
+        &.reason {
+          width: 100%;
+        }
+        .item_label {
+          width: 90px;
+          text-align: center;
+          background-color: #f2f2f2;
+          font-weight: 700;
+        }
+        .item_value {
+          border-bottom: 1px solid #f2f2f2;
+          flex: 1;
+          padding-left: 5px;
+        }
+      }
+    }
+  }
+  .execute_info {
+    .execute_info_title {
+      border-bottom: 1px solid #1890ff;
+      padding-bottom: 3px;
+      margin-bottom: 20px;
+      > span {
+        display: inline-block;
+        line-height: 16px;
+        border-left: 6px solid #1890ff;
+        padding-left: 6px;
+      }
+    }
+    ::v-deep .el-table th.el-table__cell {
+      background-color: #f2f2f2;
+    }
+    ::v-deep .el-table .el-table__cell {
+      padding: 5px 0;
+    }
+  }
+  .btnbox {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+  }
+  ::v-deep .el-button {
+    padding: 10px 20px;
+    margin-right: 10px;
+  }
+  .textbox {
+    margin-top: 10px;
+  }
+  .textbtnbox {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+  }
+</style>

src/views/maintenance/repair/workOrder/index.vue

@@ -22,13 +22,25 @@
         </template> -->
         <!-- 操作列 -->
         <template v-slot:action="{ row }">
-          <el-link type="primary" :underline="false" icon="el-icon-truck">
+          <!-- <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-truck"
+            @click="addSpareItems"
+          >
             申请备品备件
-          </el-link>
-          <el-link type="primary" :underline="false" icon="el-icon-edit">
+          </el-link> -->
+          <el-link
+            v-if="row.orderStatus !== 3 && row.orderStatus !== 4"
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="toReport(row)"
+          >
             报工
           </el-link>
           <el-link
+            v-if="row.orderStatus !== 3 && row.orderStatus !== 4"
             type="primary"
             :underline="false"
             icon="el-icon-edit"
@@ -36,18 +48,36 @@
           >
             转派
           </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="goDetail(row)"
+          >
+            详情
+          </el-link>
         </template>
       </ele-pro-table>
     </el-card>
 
     <RepairDetailsDialog ref="detailsDialogRef" />
+    <!-- 报工弹窗 -->
+    <RepairReportingWork ref="repairReportingWorkRef" @refresh="reload" />
     <!-- 转派弹窗 -->
     <redeployOther ref="redeployOtherRef" @refresh="reload" />
+    <!-- 备件弹窗 -->
+    <AddSpareDialog
+      ref="addSpareDialogRef"
+      :selectedSpare="selectedSpare"
+      @submit="spareItemSelectSubmit"
+    />
   </div>
 </template>
 
 <script>
   import WorkorderSearch from './components/workorder-search.vue';
+  import AddSpareDialog from '@/components/addSpareDialog';
+  import RepairReportingWork from '../components/repairReportingWork.vue';
   import RepairDetailsDialog from '../components/RepairDetailsDialog.vue';
   import redeployOther from '@/views/maintenance/components/redeployOther.vue';
   import { getWorkOrderList } from '@/api/maintenance/repair';
@@ -55,9 +85,11 @@
     components: {
       WorkorderSearch,
       RepairDetailsDialog,
-      redeployOther
+      redeployOther,
+      AddSpareDialog,
+      RepairReportingWork
     },
-    data () {
+    data() {
       return {
         // 表格列配置
         columns: [
@@ -134,23 +166,40 @@
             minWidth: 110
           },
           {
-            prop: 'sj',
-            label: '实际工时',
+            columnKey: 'orderHour',
+            label: '实际工时(分钟)',
             align: 'center',
+            resizable: false,
             showOverflowTooltip: true,
-            minWidth: 110
+            minWidth: 120,
+            formatter: (row) => {
+              if (row.finishTime && row.acceptTime) {
+                return parseInt(
+                  (new Date(row.finishTime).getTime() -
+                    new Date(row.acceptTime).getTime()) /
+                    60000
+                );
+              }
+            }
           },
           {
-            prop: 'status',
+            prop: 'orderStatus',
             label: '状态',
             align: 'center',
             showOverflowTooltip: true,
-            minWidth: 110
+            formatter: (row) => {
+              return {
+                0: '待接收',
+                1: '已接收',
+                2: '执行中',
+                3: '已完成'
+              }[row.orderStatus];
+            }
           },
           {
             columnKey: 'action',
             label: '操作',
-            width: 250,
+            width: 300,
             align: 'center',
             resizable: false,
             slot: 'action',
@@ -166,8 +215,23 @@
     },
     computed: {},
     methods: {
+      // 添加备品备件
+      addSpareItems() {
+        this.$refs.addSpareDialogRef.open();
+        // if (!this.clickedTreeNode) {
+        //   return this.$message.warning('请选择设备分类！');
+        // }
+        // this.$refs.addSpareDialogRef.open();
+        // if (this.planRuleEquiList[this.currentEquItemIndex]['sparePart']) {
+        //   this.selectedSpare =
+        //     this.planRuleEquiList[this.currentEquItemIndex]['sparePart'];
+        // } else {
+        //   this.selectedSpare = [];
+        // }
+        // console.log('this.selectedSpare',this.selectedSpare)
+      },
       /* 表格数据源 */
-      datasource ({ page, limit, where, order }) {
+      datasource({ page, limit, where, order }) {
         return getWorkOrderList({
           pageNum: page,
           size: limit,
@@ -175,7 +239,7 @@
           type: 3
         });
       },
-      async changeEnable (row) {
+      async changeEnable(row) {
         const res = await putRoles(row);
         if (res.code == 0) {
           this.$message({
@@ -187,19 +251,23 @@
         }
       },
       /* 刷新表格 */
-      reload (where) {
+      reload(where) {
         this.$refs.table.reload({ page: 1, where });
       },
 
-      goDetail (row) {
+      goDetail(row) {
         row.title = '工单详情';
         row.tabLabel = '工单信息';
         this.$refs.detailsDialogRef.init(row);
       },
 
       // 转派
-      toRedeploy (row) {
+      toRedeploy(row) {
         this.$refs.redeployOtherRef.open(row);
+      },
+      // 报工
+      toReport(row) {
+        this.$refs.repairReportingWorkRef.open(row);
       }
     }
   };