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

<!-- 巡点检工单 -->
<template>
  <div class="patrolInspection">
    <div class="search">
      <el-form label-width="120px">
        <el-row>
          <el-col :md="4" :sm="8" :xs="8">
            <el-form-item label="工单编号">
              <el-input
                v-model="searchForm.code"
                placeholder="请输入"
                size="small"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :md="4" :sm="8" :xs="8">
            <el-form-item label="规则名称">
              <el-select
                v-model="searchForm.ruleId"
                size="small"
                clearable
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in ruleNameList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option> </el-select></el-form-item
          ></el-col>
          <el-col :md="4" :sm="8" :xs="8">
            <el-form-item label="状态">
              <el-select
                filterable
                v-model="searchForm.orderStatus"
                size="small"
              >
                <el-option
                  v-for="item in ticketStatus"
                  :key="item.id"
                  :value="item.id"
                  :label="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :md="8" :sm="8" :xs="8">
            <el-form-item label="开始结束时间">
              <el-date-picker
                class="form-input"
                size="small"
                v-model="searchForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :md="4" :sm="16" :xs="16" style="text-align: right">
            <el-button icon="el-icon-refresh-left" size="small" @click="rest"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search"
              >搜索</el-button
            ></el-col
          >
        </el-row>
      </el-form>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        height="99%"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
        @row-dblclick="openDetail"
      >
        <el-table-column
          width="80px"
          label="序号"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column prop="code" label="工单编号" />
        <el-table-column prop="planCode" label="计划单号" />
        <el-table-column prop="planName" label="保养名称" />
        <!-- <el-table-column prop="createTime" label="设备分类" /> -->
        <el-table-column prop="ruleName" label="规则名称" />
        <el-table-column prop="createUserName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="acceptTime" label="开始时间" />
        <el-table-column prop="finishTime" label="结束时间" />
        <el-table-column prop="planFinishTime" label="计划完成时间" />
        <el-table-column prop="orderStatus" label="执行结果">
          <template slot-scope="{ row }">
            {{ { 0: '缺陷', 1: '正常' }[row.isAbnormal] }}
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="状态">
          <template slot-scope="{ row }">
            {{
              ticketStatus.filter((item) => item.id == row.orderStatus)[0].label
            }}
          </template>
        </el-table-column>
        <el-table-column prop="practicalTime" label="实际工时">
          <template slot-scope="{ row }">
            {{ time_interval(row.acceptTime, row.finishTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="{ 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>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-footer">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[15, 30, 50, 100, 500]"
        :page-size.sync="pages.size"
        :current-page.sync="pages.page"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 转派弹窗 -->
    <redeployOther ref="redeployOtherRef" @refresh="getData" />
    <!-- 报工弹框 -->
    <signingUpWork ref="signingUpWorkRef" @refresh="getData" />
  </div>
</template>

<script>
  import redeployOther from '../components/redeployOther.vue';
  import signingUpWork from '../components/signingUpWork.vue';
  import { ticketStatus } from '@/utils/dict/tickets';
  import { getWorkOrderPage, getRule } from '@/api/tickets';
  import pagenation from '@/components/Pagination';
  import { deepClone } from 'ele-admin/lib/utils/core';
  export default {
    components: { pagenation, redeployOther, signingUpWork },
    data() {
      return {
        ruleNameList: [],
        tableData: [],
        statusOptions: [],
        ticketStatus: [],
        searchForm: {
          code: '',
          orderStatus: 0,
          ruleId: '',
          date: '',
          startTime: '',
          endTime: '',
          type: 2
        },
        pages: {
          page: 1,
          size: 15
        },
        total: 0
      };
    },
    created() {
      this.getRuleNameList();
      this.getData();
      // 过滤待接收和执行中
      this.ticketStatus = ticketStatus.filter((item) => {
        return [0, 2].includes(item.id);
      });
    },
    methods: {
      // 转派
      toRedeploy(row) {
        this.$refs.redeployOtherRef.open(row);
      },
      // 报工
      toSigningUpWork(row) {
        this.$refs.signingUpWorkRef.open(row);
      },
      reload(where) {
        this.$refs.table.reload({ page: 1, ...where });
      },
      openDetail({ id }) {
        this.$router.push({
          path: '/tickets/maintenance/detail',
          query: {
            id
          }
        });
      },
      // 获取规则名列表(设备保养)
      async getRuleNameList() {
        const res = await getRule({
          status: 1,
          type: 2,
          pageNum: 1,
          size: -1
        });
        if (res.list) {
          this.ruleNameList = res.list || [];
        }
      },
      // 实现分页序号连贯
      indexMethod(index) {
        index = index + 1 + (this.pages.page - 1) * this.pages.size;
        return index;
      },
      getData() {
        let userId = localStorage.getItem('userId');
        console.log(userId);
        let par = {
          ...this.pages,
          ...this.searchForm,
          executeUserId: userId
        };
        if (this.searchForm.date) {
          par.startTime = this.searchForm.date[0];
          par.endTime = this.searchForm.date[1];
        }
        delete par.date;
        getWorkOrderPage(par).then((res) => {
          this.tableData = res.list;
          this.total = res.total;
        });
        this.$emit('recount');
      },
      search() {
        this.pages.page = 1;
        this.getData();
      },
      rest() {
        this.searchForm = {
          code: '',
          orderStatus: 0,
          ruleId: '',
          date: '',
          startTime: '',
          endTime: '',
          type: 2
        };
        this.pages.page = 1;
        this.getData();
      },
      handleCurrentChange() {
        this.getData();
      },
      handleSizeChange() {
        this.pages.page = 1;
        this.getData();
      },
      // 计算实际工时
      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;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .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;
    }
  }
</style>