kd-aiot-frontend-eam/src/views/maintenance/delivery/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">
            <el-button
              type="primary"
              @click="
                $router.push({
                  path: '/maintenance/delivery',
                  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.codeNumber
                  }}</span>
                </div>
                <div class="item_info">
                  <span class="item_label">使用人</span>
                  <span class="item_value">{{ item.substance.usePerson }}</span>
                </div>
                <div class="item_info">
                  <span class="item_label">使用岗位</span>
                  <span class="item_value">{{ item.substance.postName }}</span>
                </div>

                <div class="item_info">
                  <span class="item_label">负责人</span>
                  <span class="item_value">{{
                    item.substance.chargePerson
                  }}</span>
                </div>
                <div class="item_info">
                  <span class="item_label">是否丢失</span>
                  <span class="item_value">{{ loseOptions[item.isLose] }}</span>
                </div>
                <div class="item_info">
                  <span class="item_label">质检状态</span>
                  <span class="item_value">{{
                    qualityStatusOptions[item.qualityStatus]
                  }}</span>
                </div>
                <div class="item_info">
                  <span class="item_label">量具状态</span>
                  <span class="item_value">{{
                    item.isHarvest > 0 ? harvestOptions[item.isHarvest] : ''
                  }}</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>
        <!-- 高亮流程图 -->
        <el-card class="box-card" v-loading="processInstanceLoading">
          <div slot="header" class="clearfix">
            <span class="el-icon-picture-outline">流程图</span>
          </div>

          <my-process-viewer
            key="designer"
            v-model="bpmnXML"
            v-bind="bpmnControlForm"
            :activityData="activityList"
            :processInstanceData="processInstance"
            :taskData="tasks"
          />
        </el-card>
        <!-- 巡点检、审批信息 -->
        <!-- <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 store from '@/store';
  import {
    getProcessInstance,
    getTaskListByProcessInstanceId,
    getProcessDefinitionBpmnXML,
    getActivityList
  } from '@/api/bpm/index';
  import { getById } from '@/api/maintenance/patrol_maintenance';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    data() {
      return {
        // 流程实例
        id: undefined, // 流程实例的编号
        processInstance: {},

        // BPMN 数据
        bpmnXML: null,
        bpmnControlForm: {
          prefix: 'flowable'
        },
        activityList: [],

        // 审批记录
        tasksLoad: true,
        tasks: [],
        num: 1,
        dialogVisible: false,
        baseInfo: {},
        pageLoading: false,
        typeValue: null,
        contract_type: [],
        loseOptions: {
          0: '正常',
          1: '丢失'
        },
        qualityStatusOptions: {
          0: '正常',
          1: '异常'
        },
        harvestOptions: {
          1: '已收',
          2: '未收'
        },
        status: [
          {
            value: true,
            label: '失效'
          },
          {
            value: false,
            label: '生效'
          }
        ],
        ruleItem: [],
        cause: '',
        showtext: false,
        infoData: {}
      };
    },
    async created() {
      this.requestDict('巡点检周期');
      this.getInfo();
    },
    methods: {
      /** 获得流程实例 */
      getDetail(id) {
        // 获得流程实例相关
        this.processInstanceLoading = true;
        getProcessInstance(id).then((response) => {
          if (!response) {
            this.$message.error('查询不到流程信息！');
            return;
          }
          // 设置流程信息
          this.processInstance = response;

          // //将业务表单，注册为动态组件
          // const path = this.processInstance.processDefinition.formCustomViewPath;
          // Vue.component("async-biz-form-component", function (resolve) {
          //   require([`@/views${path}`], resolve);
          // });
          // 加载流程图
          getProcessDefinitionBpmnXML(
            this.processInstance.processDefinition.id
          ).then((response) => {
            this.bpmnXML = response;
          });
          // 加载活动列表
          getActivityList({
            processInstanceId: this.processInstance.id
          }).then((response) => {
            console.log(response, 'response');
            this.activityList = response;
          });

          // 取消加载中
          this.processInstanceLoading = false;
        });

        // 获得流程任务列表（审批记录）
        this.tasksLoad = true;
        getTaskListByProcessInstanceId(id).then((response) => {
          // 审批记录
          this.tasks = [];
          // 移除已取消的审批
          response.forEach((task) => {
            if (task.result !== 4) {
              this.tasks.push(task);
            }
          });
          // 排序，将未完成的排在前面，已完成的排在后面；
          this.tasks.sort((a, b) => {
            // 有已完成的情况，按照完成时间倒序
            if (a.endTime && b.endTime) {
              return b.endTime - a.endTime;
            } else if (a.endTime) {
              return 1;
            } else if (b.endTime) {
              return -1;
              // 都是未完成，按照创建时间倒序
            } else {
              return b.createTime - a.createTime;
            }
          });

          // 需要审核的记录
          const userId = store.getters.userId;
          this.tasks.forEach((task) => {
            if (task.result !== 1 && task.result !== 6) {
              // 只有待处理才需要
              return;
            }
            if (!task.assigneeUser || task.assigneeUser.id !== userId) {
              // 自己不是处理人
              return;
            }
          });

          // 取消加载中
          this.tasksLoad = false;
        });
      },
      // 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.getDetail(this.infoData.processInstanceId);
        }
        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>