kd-aiot-frontend-wt/src/views/bpm/tickets/repair/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' }"
      >
        <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="equiCode" label="设备编号" />
        <el-table-column prop="equiName" label="设备名称" />
        <el-table-column prop="executeUserName" 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 }">
            {{
              row.acceptanceStatus
                ? resultStatus.filter(
                    (item) => item.code == row.acceptanceStatus
                  )[0].label
                : ''
            }}
          </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="200">
          <template slot-scope="{ row }">
            <el-link
              v-if="row.orderStatus == 3 && row.createUserId == userId"
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="goDetail(row)"
            >
              验收
            </el-link>
            <el-link
              v-if="
                row.orderStatus !== 3 &&
                row.orderStatus !== 4 &&
                userId === row.executeUserId
              "
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="toSigningUpWork(row)"
            >
              报工
            </el-link>
            <el-link
              v-if="
                row.orderStatus !== 3 &&
                row.orderStatus !== 4 &&
                userId === row.executeUserId
              "
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="toRedeploy(row)"
            >
              转派
            </el-link>
            <el-link
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="openDetail(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>
    <!-- 验收 -->
    <RepairDetailsDialog ref="detailsDialogRef" @refesh="getData" />
    <!-- 转派弹窗 -->
    <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, resultStatus } from '@/utils/dict/tickets';
  import RepairDetailsDialog from '../components/RepairDetailsDialog.vue';
  import { getWorkOrderList, getRule } from '@/api/tickets';
  import pagenation from '@/components/Pagination';
  export default {
    components: {
      pagenation,
      redeployOther,
      signingUpWork,
      RepairDetailsDialog
    },
    data() {
      return {
        resultStatus,
        ruleNameList: [],
        tableData: [],
        statusOptions: [],
        userId: '',
        ticketStatus: [],
        searchForm: {
          code: '',
          orderStatus: 0,
          ruleId: '',
          date: '',
          startTime: '',
          endTime: '',
          type: 3
        },
        pages: {
          page: 1,
          size: 15
        },
        total: 0
      };
    },
    created() {
      this.userId = localStorage.getItem('userId');
      this.getRuleNameList();
      this.getData();
      // 过滤待接收和执行中
      this.ticketStatus = ticketStatus.filter((item) => {
        return [0, 2, 3].includes(item.id);
      });
      console.log('-----this.ticketStatus');
      console.log(this.ticketStatus);
    },
    methods: {
      // 验收
      goDetail(row) {
        row.title = '工单详情';
        row.tabLabel = '工单信息';
        this.$refs.detailsDialogRef.init(row);
      },
      // 转派
      toRedeploy(row) {
        this.$refs.redeployOtherRef.open(row);
      },
      // 报工
      toSigningUpWork(row) {
        this.$refs.signingUpWorkRef.open(row);
      },
      reload(where) {
        this.$refs.table.reload({ page: 1, ...where });
      },
      openDetail(row) {
        row.title = '工单详情';
        row.tabLabel = '工单信息';
        this.$refs.detailsDialogRef.init(row, true);
      },
      // 获取规则名列表(设备维修)
      async getRuleNameList() {
        const res = await getRule({
          status: 1,
          type: 3,
          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 par = {
          ...this.pages,
          ...this.searchForm,
          executeUserId: this.userId,
          statusType: 1
        };
        if (this.searchForm.date) {
          par.startTime = this.searchForm.date[0];
          par.endTime = this.searchForm.date[1];
        }
        delete par.date;
        getWorkOrderList(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: 3
        };
        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>
  // 步骤条边线显示
  ::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;
    }
  }
</style>