kd-aiot-frontend-eam/src/views/maintenance/repair/planRepair/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <maintenance-search @search="reload"> </maintenance-search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openAdd('新增计划性维修')"
          >
            新增维修计划
          </el-button>
          <!-- 		   <el-button
		     size="small"
		     type="primary"
		     class="ele-btn-icon"
		     @click="goDetail({id:12})"
		   >
		     详情
		   </el-button> -->
        </template>
        <template v-slot:planCode="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="openAdd('详情', row)"
          >
            {{ row.planCode }}
          </el-link>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <!-- <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openAdd('编辑计划性维修', row)"
          >
            编辑
          </el-link> -->
          <el-link
            v-if="
              row.planStatus == 4 || row.planStatus == 0 || row.planStatus == 5
            "
            type="primary"
            :underline="false"
            @click="openAdd('派单', row)"
          >
            派单
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确认撤销这条报修记录吗？"
            @confirm="cancel(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                撤回
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 详情 -->
    <DetailDialog ref="detailDialogRef" />
    <!-- 新建或编辑弹窗 -->
    <planRepaireDialog ref="planRepaireDialog" @done="reload" />
  </div>
</template>

<script>
  import planRepaireDialog from '../../components/planRepaireDialog.vue';
  import MaintenanceSearch from './components/maintenance-search.vue';
  import DetailDialog from './components/detailDialog.vue';
  import { removePlan } from '@/api/maintenance/repair_report';
  import { getPage } from '@/api/maintenance/patrol_maintenance';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    components: {
      MaintenanceSearch,
      DetailDialog,
      planRepaireDialog
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'planCode',
            label: '计划维修单号',
            align: 'center',
            slot: 'planCode',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'planName',
            label: '计划维修名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          // {
          //   prop: 'number',
          //   label: '报修设备数量',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 110
          // },
          {
            prop: 'planStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (item) => {
              return {
                0: '待派单',
                1: '已派单',
                2: '执行中',
                3: '已完成',
                4: '已撤回',
                5: '已驳回'
              }[item.planStatus];
            }
          },
          // {
          //   prop: 'number',
          //   label: '维修人员',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 110
          // },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        // 加载状态
        loading: false,
        infoData: {},
        repairInfoLogs: [],

        deviceInfo: {}, //设备信息
        isBindPlan: false
      };
    },
    computed: {},
    created() {
      this.requestDict('维修计划状态');
    },
    methods: {
      openAdd(dialogTitle, row) {
        this.$nextTick(() => {
          this.$refs.planRepaireDialog.init(row, dialogTitle);
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getPage({ pageNum: page, size: limit, ...where, planType: 4 });
      },
      async changeEnable(row) {
        const res = await putRoles(row);
        if (res.code == 0) {
          this.$message({
            type: 'success',
            message: '修改成功',
            customClass: 'ele-message-border'
          });
          this.reload();
        }
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      jumpAdd() {
        this.$router.push({
          path: '/maintenance/repair/planRepair/add'
        });
      },
      toEdit({ id }) {
        this.$router.push({
          path: '/maintenance/repair/planRepair/add',
          query: { id }
        });
      },

      goDetail(row) {
        this.$refs.detailDialogRef.openDeatailDialog(row);
      },
      // 撤销
      cancel(row) {
        removePlan([row.id]).then((res) => {
          this.$message.success('撤销成功！');
          this.reload();
        });
      }
    }
  };
</script>

<style lang="scss" scoped></style>