kd-aiot-frontend-eam/src/views/maintenance/repair/components/RepairDetailsDialog.vue

<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"
          :equipmentInfo="equipmentInfo"
          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.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.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.category.specification
              }}|{{
                equipmentInfo.category &&
                equipmentInfo.category.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.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 && infoData.sourceType ? 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.requestUserPhone : '' }}</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-tab-pane>
      <el-tab-pane label="备品备件申请单" name="sparePartsApply">
        <editd :id="workOrderInfo.id" />
      </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
        :loading="passLoading"
        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
          :loading="errorLoading"
          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';
  import editd from '@/views/sparePartsApply/components/editd';
  export default {
    mixins: [dictMixins],
    props: {},
    components: { RepairNotesTab, WorkOrderTab, editd },
    data() {
      return {
        errorLoading: false,
        passLoading: false,
        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);

          const res = await getWorkOrderDetail(row.code);
          console.log(res, 'resresresresres');
          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;
          //   });
          // }
          let repairInfoLogs =
            res.ticketsInfoResponse.repairLogVOS?.length > 0
              ? res.ticketsInfoResponse.repairLogVOS.map((item) => {
                  return {
                    ...item,
                    requestUserName: res.repairRequestResponse.requestUserName,
                    remark: res.repairRequestResponse.remark
                  };
                })
              : [];
          this.repairInfoLogs = repairInfoLogs.reverse();
        }
      },

      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() {
        this.passLoading = true;
        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.passLoading = false;
            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 {
          this.errorLoading = true;
          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.errorLoading = false;
              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>