kd-aiot-frontend-eam/src/views/maintenance/equipment/plan/details.vue

<template>
  <!-- 保养计划审批 -->
  <div class="page" v-loading="pageLoading">
    <el-form label-width="130px">
      <div class="content-detail">
        <div class="basic-details">
          <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
          <el-row>
            <el-col :span="12">
              <el-col :span="12">
                <el-form-item label="计划单号">
                  <span> {{ data.code }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保养名称">
                  <span> {{ data.name }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保养部门">
                  <span v-if="data.executor && data.executor.length">
                    {{ data.executor[0].groupName }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保养人员">
                  <span v-if="data.executor && data.executor.length">
                    {{ data.executor.map((i) => i.name).join(',') }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划完成时长">
                  <span v-if="data.duration >= 0">{{ data.duration }}分钟</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备分类">
                  <span> {{ data.categoryLevelName }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规则名称">
                  <span> {{ data.ruleInfo && data.ruleInfo.name }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建人">
                  <span> {{ data.createUserName }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建部门">
                  <span> {{ data.createUserGroupName }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <span> {{ data.createTime }} </span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注">
                  <span> {{ data.remark }} </span>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="12">
              <img :src="data.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 data.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="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="item" />
                  <el-table-column label="内容" prop="content" />
                  <el-table-column label="标准" prop="standard" />
                </el-table>
              </div>
              <p>备品备件</p>
              <div class="matter_info">
                <el-table :data="item.sparePart" 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="备件名称"
                    align="center"
                    prop="categoryName"
                  >
                  </el-table-column>
                  <el-table-column
                    label="规格型号"
                    align="center"
                    prop="modelType"
                  >
                    <template slot-scope="{ row }">
                      {{ row.specification }}/{{ row.model }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="所需数量"
                    align="center"
                    prop="needNum"
                  >
                  </el-table-column>
                  <el-table-column label="单位" align="center" prop="unit">
                  </el-table-column>
                </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="data.approvalResult == 0"
                >驳回</span
              >
              <span class="item_value" v-if="data.approvalResult == 1"
                >通过</span
              >
            </div>
            <div class="item_info border_top">
              <span class="item_label">审批人</span>
              <!-- <span class="item_value">{{ data.verifyUserName }}</span> -->
            </div>
            <div class="item_info border_right border_top">
              <span class="item_label">审批时间</span>
              <span class="item_value">{{ data.approvalTime }}</span>
            </div>
            <div
              class="item_info reason border_right"
              v-if="data.auditResult == 0"
            >
              <span class="item_label">驳回原因</span>
              <span class="item_value">{{ data.rejectCause }}</span>
            </div>
          </div>
        </div>
        <!-- 保养、执行信息 -->
        <div class="execute_info">
          <HeaderTitle title="执行信息" size="16px"></HeaderTitle>
          <el-table :data="data.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';
  export default {
    data () {
      return {
        num: 1,
        infoData: {
          type: '',
          area: { province: {}, area: {}, city: {} },
          mgrOrg: {},
          manager: {}
        },
        dialogVisible: false,
        data: {},
        pageLoading: false,
        typeValue: null,
        contract_type: [],
        cycleOptObj: {
          1: '时/次',
          2: '天/次',
          //3: '周/次',
          4: '月/次',
          5: '年/次',
          11: '次/天',
          //12: '次/周',
          13: '次/月',
          14: '次/年'
        },
        status: [
          {
            value: true,
            label: '失效'
          },
          {
            value: false,
            label: '生效'
          }
        ],
        ruleItem: [],
        cause: '',
        showtext: false
      };
    },
    async created () {
      this.getInfo();
    },
    methods: {
      // getStatus: useDictLabel(patrolMatterStatus),
      delete () {},
      // 点击切换事件
      tab (index) {
        this.num = index;
      },
      // 表格数据
      async getInfo () {
        let res = await getById(this.$route.query.id).catch(() => {
          this.pageLoading = false;
        });
        if (res?.data) {
          this.data = res.data;
          this.data.planEquiList = this.data.planEquiList.filter(
            (item) => item.itemList && item.itemList.length > 0
          );
        }
        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;
            }
          }
        }
      }
    }
  }
  .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>