kd-aiot-frontend-wt/src/views/bpm/tickets/maintenance/index.vue

<!-- 保养工单 -->

<template>
  <div>
    <div class="ele-body">
      <el-card shadow="never">
        <div class="filter-container">
          <seekPage
            :seekList="seekList"
            :formLength="3"
            @search="search"
          ></seekPage>
        </div>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          maxHeight="580"
          :pageSize="20"
        >
          <!-- 操作列 -->
          <template v-slot:action="{ row }">
            <el-link
              v-if="row.orderStatus !== 3 && row.orderStatus !== 4"
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="toSigningUpWork(row)"
            >
              报工
            </el-link>
            <el-link
              v-if="row.orderStatus !== 3 && row.orderStatus !== 4"
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="toRedeploy(row)"
            >
              转派
            </el-link>
          </template>
        </ele-pro-table>
      </el-card>
    </div>

    <!-- 验收 -->
    <RepairDetailsDialog ref="detailsDialogRef" @refesh="getData" />
    <!-- 转派弹窗 -->
    <redeployOther ref="redeployOtherRef" @refresh="getData" />
    <!-- 报工弹框 -->
    <signingUpWork ref="signingUpWorkRef" @refresh="getData" />
  </div>
</template>
<script>
  import RepairDetailsDialog from '../components/RepairDetailsDialog.vue';
  import redeployOther from '../components/redeployOther.vue';
  import signingUpWork from '../components/signingUpWork.vue';
  import { ticketStatus, resultStatus } from '@/utils/dict/tickets';
  import { getWorkOrderPage, getRule } from '@/api/tickets';
  import pagenation from '@/components/Pagination';

  // 修改
  import {
    notifyMessagePageAPI,
    updateNotifyMessageReadByIdAPI
  } from '@/api/bpm/task';
  import { mapGetters } from 'vuex';
  export default {
    components: {
      pagenation,
      redeployOther,
      signingUpWork,
      RepairDetailsDialog
    },
    data() {
      return {
        ruleNameList: [],
        tableData: [],
        statusOptions: [],
        ticketStatus: [],
        searchForm: {
          code: '',
          orderStatus: '',
          ruleId: '',
          date: '',
          startTime: '',
          endTime: '',
          type: 2,
          isQueryTodo: 1,
          executeUserId: ''
        },
        pages: {
          page: 1,
          size: 15
        },
        total: 0,

        //
        addOrEditDialogFlag: false,
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 60,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '工单编号',
            minWidth: '200',
            align: 'center'
          },
          {
            prop: 'planCode',
            label: '计划单号',
            width: '200',
            align: 'center'
          },
          {
            prop: 'planName',
            label: '保养名称',
            align: 'center',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'ruleName',
            label: '规则名称',
            align: 'center',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'acceptTime',
            label: '开始时间',
            align: 'center',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'finishTime',
            label: '结束时间',
            align: 'center',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'planFinishTime',
            label: '计划完成时间',
            align: 'center',
            minWidth: '180',
            showOverflowTooltip: true
          },
          {
            prop: 'isAbnormal',
            label: '执行结果',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return { 0: '缺陷', 1: '正常' }[_row.isAbnormal];
            }
          },
          {
            prop: 'orderStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return ticketStatus.filter(
                (item) => item.id == _row.orderStatus
              )[0]?.label;
            }
          },
          {
            prop: 'practicalTime',
            label: '实际工时',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              let _this = this;
              return _this.time_interval(_row.acceptTime, _row.finishTime);
            }
          },

          {
            columnKey: 'action',
            label: '操作',
            minWidth: 200,
            align: 'center',
            slot: 'action',
            fixed: 'right'
          }
        ],

        tableData: [],
        size: 10,
        page: 1
      };
    },
    computed: {
      ...mapGetters(['user']),
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      seekList() {
        return [
          {
            label: '工单编号',
            value: 'code',
            type: 'input',
            placeholder: ' '
          },
          {
            label: '规则名称：',
            value: 'ruleId',
            type: 'select',
            placeholder: '  ',
            planList: this.ruleNameList.map((item) => {
              return { label: item.name, value: item.id };
            })
          },
          {
            label: '状态',
            value: 'orderStatus',
            type: 'select',
            planList: ticketStatus.map((item) => {
              return { label: item.label, value: item.id };
            }),
            placeholder: ' '
          },

          // {
          //   label: '开始结束时间：',
          //   value: 'createTime',
          //   type: 'date',
          //   dateType: 'datetimerange',
          //   placeholder: '',
          //   width: 380,
          //   labelWidth: '130px',
          //   valueAr: ['startTime', 'endTime']
          // }
        ];
      }
    },
    methods: {
      //新增或修改模板
      async handleAddOrEdit(row) {
        await updateNotifyMessageReadByIdAPI([row.id]);
        this.$refs.table.reload();
      },
      search(e) {
        this.searchForm = e;
        this.$refs.table.reload({ page: 1, where: e });
      },
      // 获取table数据
      async datasource({ page, where, limit, ...row }) {
        const res = await getWorkOrderPage({
          ...where,
          pageNum: page,
          size: limit,
          userId: this.user.info.userId,
          executeUserId: this.userId,
          type: 2,
          isQueryTodo: 1
        });
        this.total = res.total;
        this.$emit('recount');
        return res;
      },

      // 获取规则名列表(设备保养)
      async getRuleNameList() {
        const res = await getRule({
          status: 1,
          type: 2,
          pageNum: 1,
          size: -1
        });
        if (res.list) {
          this.ruleNameList = res.list || [];
        }
      },

      // 转派
      toRedeploy(row) {
        this.$refs.redeployOtherRef.open(row);
      },
      // 报工
      toSigningUpWork(row) {
        this.$refs.signingUpWorkRef.open(row);
      },
      openDetail({ id }) {
        this.$router.push({
          path: '/tickets/maintenance/detail',
          query: {
            id
          }
        });
      },
      getData() {
        this.search(this.searchForm);

      },
      // 计算实际工时
      time_interval(dt1, dt2) {
        if (!dt1 || !dt2) {
          return '';
        }
        if (typeof dt1 == 'string') {
          dt1 = new Date(dt1.replace(/-/, '/'));
          dt2 = new Date(dt2.replace(/-/, '/'));
        }
        var res = dt2 - dt1;
        if (isNaN(res)) throw Error('invalid dates arguments');
        let re = res / (1000 * 60 * 60);

        var h = parseInt(re);
        var m = parseInt((re - h) * 60);
        let result = '';
        if (h) {
          result += `${h} 小时`;
        }
        if (m) {
          result += `${m} 分钟`;
        }
        return result;
      },
      changeDate(val) {
        if (val === null) {
          this.searchForm.startTime = '';
          this.searchForm.endTime = '';
          return;
        }
        this.searchForm.startTime = val[0];
        this.searchForm.endTime = val[1];
      }
    },
    created() {
      this.userId = localStorage.getItem('userId');
      this.getRuleNameList();
      this.ticketStatus = ticketStatus.filter((item) => {
        return [0, 2, 3].includes(item.id);
      });
    }
  };
</script>

<style lang="scss" scoped>
  // 步骤条边线显示
  // ::v-deep .el-step__head.is-process .el-step__icon.is-text {
  //   border: none !important;
  //   background: none !important;
  // }
  // ::v-deep .el-step:last-of-type .el-step__line {
  //   display: block !important;
  //   width: 3px !important;
  // }
  // ::v-deep .el-steps:last-child .el-step__line {
  //   display: none !important;
  // }
  // .patrolInspection {
  //   height: 100%;
  //   width: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   .search {
  //     flex: 0 0 50px;
  //   }
  //   .table {
  //     flex: 1;
  //     .el-table {
  //       width: 100%;
  //       display: flex;
  //       flex-direction: column;
  //     }
  //   }
  //   .table-footer {
  //     flex: 0 0 30px;
  //     display: flex;
  //     justify-content: flex-end;
  //   }
  // }

  // 修改
  ::v-deep .el-card__body {
    padding: 0;
  }

  .app-container {
    background: #f0f3f3;
    min-height: calc(100vh - 84px);
  }

  .zw-page-table {
    background: #ffffff;
    padding-top: 20px;
  }

  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .table {
    width: 100%;
    margin-top: 10px;
  }

  // 修改
  ::v-deep .el-card__body {
    padding: 0;
  }

  .app-container {
    background: #f0f3f3;
    min-height: calc(100vh - 84px);
  }

  .zw-page-table {
    background: #ffffff;
    padding-top: 20px;
  }

  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .table {
    width: 100%;
    margin-top: 10px;
  }
</style>