沃克项目： 1、维修工单页面布局及样式完成100%并实现领取报修故障单功能 2、设备台账页面实现查询设备对应维修工单功能

zhaowei

2025-04-10 9d38529c9ecdde9270652a8fa2bb12d5cca7559e

沃克项目：
1、维修工单页面布局及样式完成100%并实现领取报修故障单功能
2、设备台账页面实现查询设备对应维修工单功能

 src/views/eam/equipment/EamEquipmentList.vue

@@ -166,9 +166,12 @@
    </div>
    <!-- table区域-end -->

    <a-tabs v-model="activeTabKey">
    <a-tabs v-model="activeTabKey" @change="handleTabChange">
      <a-tab-pane tab="保养标准" :key="1">
        <eam-maintenance-standard-list ref="tabPaneTableListRef" :isDisplayOperation="false"/>
        <eam-maintenance-standard-list ref="tabPaneTableListRef1" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane tab="维修工单" :key="2">
        <eam-repair-order-list ref="tabPaneTableListRef2" :isDisplayOperation="false"/>
      </a-tab-pane>
    </a-tabs>

@@ -190,11 +193,13 @@
import { getSystemConfigValue } from '@api/api'
import ResumeDrawer from '@views/eam/equipment/modules/ResumeDrawer.vue'
import EamMaintenanceStandardList from '@views/eam/base/EamMaintenanceStandardList.vue'
  import EamRepairOrderList from '../repair/EamRepairOrderList'

export default {
  name: 'EamEquipmentList',
  mixins: [JeecgListMixin],
  components: {
      EamRepairOrderList,
    EamMaintenanceStandardList,
    ResumeDrawer,
    NameplateModal,
@@ -520,12 +525,21 @@
    },

    /**
       * é¡µç­¾æ”¹å˜æ—¶è§¦å‘
       * @param activeTabKey å½“前激活的页签key
       */
      handleTabChange(activeTabKey) {
        if (this.selectedRowKeys.length !== 1) return
        this.$nextTick(() => this.loadTabPaneTableData(this.selectedRowKeys[0]))
      },

      /**
     * åŠ è½½é¡µç­¾è¡¨æ ¼æ•°æ®
     * @param id è®¾å¤‡å°è´¦è¡Œè®°å½•Id
     */
    loadTabPaneTableData(id) {
      this.$refs.tabPaneTableListRef.queryParam.equipmentId = id
      this.$refs.tabPaneTableListRef.loadData(1)
        this.$refs['tabPaneTableListRef' + this.activeTabKey].queryParam.equipmentId = id
        this.$refs['tabPaneTableListRef' + this.activeTabKey].loadData(1)
    },

    /**
@@ -536,8 +550,8 @@
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      this.$refs.tabPaneTableListRef.dataSource = []
      this.$refs.tabPaneTableListRef.onClearSelected()
        this.$refs['tabPaneTableListRef' + this.activeTabKey].dataSource = []
        this.$refs['tabPaneTableListRef' + this.activeTabKey].onClearSelected()
      if (selectedRowKeys.length === 1) this.loadTabPaneTableData(selectedRowKeys[0])
    },


 src/views/eam/repair/EamRepairOrderList.vue

@@ -2,7 +2,7 @@
  <a-card :bordered="false">

    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
    <div class="table-page-search-wrapper" v-if="isDisplayOperation">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -10,26 +10,31 @@
              <a-input placeholder="请输入工单编号" v-model="queryParam.repairCode"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="设备编号">
              <!--<a-input placeholder="请输入设备编号" v-model="queryParam.equipmentId"/>-->
                <lx-search-equipment-select placeholder="请输入设备编号或名称搜索" v-model="queryParam.equipmentId"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="维修状态">
                <a-input placeholder="请输入维修状态" v-model="queryParam.repairStatus"></a-input>
            <a-form-item label="单据状态">
              <a-select placeholder="请选择单据状态" v-model="queryParam.repairStatus" allow-clear>
                <a-select-option v-for="item in report_repair_status_list" :key="item.value">{{ item.label }}
                </a-select-option>
              </a-select>
              </a-form-item>
            </a-col>
          <template v-if="toggleSearchStatus">

          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
              <!--<a @click="handleToggleSearch" style="margin-left: 8px">-->
              <!--{{ toggleSearchStatus ? '收起' : '展开' }}-->
              <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
              <!--</a>-->
            </span>
          </a-col>

@@ -38,8 +43,8 @@
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    <div class="table-operator" v-if="isDisplayOperation">
      <a-button @click="handleOpenReceiveFaultModal" type="primary" icon="plus">领取</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('维修工单')">导出</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
@@ -56,7 +61,7 @@

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;" v-if="isDisplayOperation">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> å·²é€‰æ‹© <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
@@ -78,46 +83,59 @@
      >

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a @click="handleOpenApplySparePartsModal(record)">申请备件</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

          <a @click="handleOpenRepairCompletedModal(record)">完成维修</a>

          <!--<a @click="handleEdit(record)">编辑</a>-->

          <!--<a-divider type="vertical"/>-->
          <!--<a-dropdown>-->
          <!--<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
          <!--<a-menu slot="overlay">-->
          <!--<a-menu-item>-->
          <!--<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
          <!--<a>删除</a>-->
          <!--</a-popconfirm>-->
          <!--</a-menu-item>-->
          <!--</a-menu>-->
          <!--</a-dropdown>-->
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- è¡¨å•åŒºåŸŸ -->
    <eamRepairOrder-modal ref="modalForm" @ok="modalFormOk"></eamRepairOrder-modal>
    <receive-fault-modal ref="receiveFaultModalRef" @ok="loadData"/>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import EamRepairOrderModal from './modules/EamRepairOrderModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect.vue'
  import ReceiveFaultModal from './modules/EamRepairOrderList/ReceiveFaultModal'
  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
  import LxSearchEquipmentSelect from '../equipment/modules/LxSearchEquipmentSelect'

export default {
  name: 'EamRepairOrderList',
  mixins: [JeecgListMixin],
  components: {
    LxSearchEquipmentSelect,
    EamRepairOrderModal
      ReceiveFaultModal
    },
    props:{
      isDisplayOperation:{
        type:Boolean,
        default:true
      }
  },
  data() {
    return {
      description: '维修工单管理页面',
        disableMixinCreated: true,
      // è¡¨å¤´
      columns: [
        {
@@ -163,7 +181,8 @@
        {
          title: '故障原因',
          align: 'center',
          dataIndex: 'faultReason'
            dataIndex: 'faultReason',
            width: 150
        },
        {
          title: '维修结果描述',
@@ -172,10 +191,15 @@
          width: 300
        },
        {
            title: '维修图片',
            align: 'center',
            dataIndex: 'imageFiles',
            width: 100
          },
          {
          title: '维修负责人',
          align: 'center',
          dataIndex: 'repairer',
          width: 100
            dataIndex: 'repairer'
        },
        // {
        //   title: '是否委外',
@@ -207,26 +231,13 @@
        //   dataIndex: 'outsourcedPerson',
        //   width: 100
        // },
        {
          title: '维修图片',
          align: 'center',
          dataIndex: 'imageFiles',
          width: 100
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          fixed: 'right',
          width: 150
        }
      ],
        report_repair_status_list: [],
      url: {
        list: '/eam/eamRepairOrder/list',
        delete: '/eam/eamRepairOrder/delete',
        deleteBatch: '/eam/eamRepairOrder/deleteBatch',
        exportXlsUrl: 'eam/eamRepairOrder/exportXls',
          exportXlsUrl: 'eam/eamRepairOrder/exportXls'
      }
    }
  },
@@ -235,7 +246,62 @@
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {}
    created() {
      if (!this.isDisplayOperation) {
        return
      }
      this.initDictData('report_repair_status')
      const operationColumn = {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        scopedSlots: { customRender: 'action' }
      }
      this.columns = [...this.columns, operationColumn]
      this.loadData(1)
    },
    methods: {
      /**
       * èŽ·å–数据字典值
       * @param dictCode æ•°æ®å­—典对应记录编码
       */
      initDictData(dictCode) {
        // //优先从缓存中读取字典配置
        if (getDictItemsFromCache(dictCode)) {
          this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
          return
        }
        //根据字典Code, åˆå§‹åŒ–字典数组
        ajaxGetDictItems(dictCode, null).then((res) => {
          if (res.success) {
            this[dictCode + '_list'] = res.result
            return
          }
        })
      },

      // å¼€å¯é¢†å–故障保修单弹窗
      handleOpenReceiveFaultModal() {
        this.$refs.receiveFaultModalRef.visible = true
        this.$refs.receiveFaultModalRef.loadData()
      },

      /**
       * å¼€å¯ç”³è¯·å¤‡ä»¶å¼¹çª—
       * @param record è¡¨æ ¼è¡Œä¿¡æ¯
       */
      handleOpenApplySparePartsModal(record) {

      },

      /**
       * å¼€å¯å®Œæˆç»´ä¿®å¼¹çª—
       * @param record è¡¨æ ¼è¡Œä¿¡æ¯
       */
      handleOpenRepairCompletedModal(record) {

      }
    }
}
</script>
<style scoped>

 src/views/eam/repair/EamReportRepairList.vue

@@ -7,10 +7,11 @@
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="设备编号">
              <a-input placeholder="请输入设备编号" v-model="queryParam.equipmentId"/>
              <!--<a-input placeholder="请输入设备编号" v-model="queryParam.equipmentId"/>-->
              <lx-search-equipment-select placeholder="请输入设备编号或名称搜索" v-model="queryParam.equipmentId"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="isDisplayOperation">
            <a-form-item label="单据状态">
              <a-select placeholder="请选择单据状态" v-model="queryParam.reportStatus" allow-clear>
                <a-select-option v-for="item in report_repair_status_list" :key="item.value">{{ item.label }}
@@ -66,7 +67,7 @@
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
    <div class="table-operator" v-if="isDisplayOperation">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('故障报修')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
@@ -88,7 +89,7 @@

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;" v-if="isDisplayOperation">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> å·²é€‰æ‹© <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
@@ -104,7 +105,7 @@
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:isDisplayOperation?'checkbox':'radio'}"
        @change="handleTableChange">

        <template slot="imageFiles" slot-scope="text, record" v-if="text">
@@ -119,16 +120,6 @@
          <a-popconfirm title="确定作废吗?" @confirm="() => handleDelete(record.id)">
            <a>作废</a>
          </a-popconfirm>
          <!--          <a-dropdown>-->
          <!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
          <!--            <a-menu slot="overlay">-->
          <!--              <a-menu-item>-->
          <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
          <!--                  <a>删除</a>-->
          <!--                </a-popconfirm>-->
          <!--              </a-menu-item>-->
          <!--            </a-menu>-->
          <!--          </a-dropdown>-->
        </span>

      </a-table>
@@ -145,7 +136,7 @@

<script>
import '@/assets/less/TableExpand.less'
import EamReportRepairModal from './modules/EamReportRepairModal'
  import EamReportRepairModal from './modules/EamReportRepairList/EamReportRepairModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect.vue'
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
@@ -161,9 +152,19 @@
    LxSearchEquipmentSelect,
    EamReportRepairModal
  },
    props: {
      isDisplayOperation: {
        type: Boolean,
        default: true
      },
      propsQueryParam: {
        type: Object
      }
    },
  data() {
    return {
      description: '故障报修管理页面',
        disableMixinCreated: true,
      // è¡¨å¤´
      columns: [
        {
@@ -229,13 +230,6 @@
          title: '备注',
          align: 'center',
          dataIndex: 'remark'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 150
        }
      ],
      breakdown_flag_list: [],
@@ -262,6 +256,18 @@
    this.initDictData('breakdown_flag')
    this.initDictData('report_repair_status')
    this.getFaultReasonListByApi()
      if (!this.isDisplayOperation) this.queryParam = Object.assign({} ,this.propsQueryParam)
      else {
        const operationColumn = {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 150
        }
        this.columns = [...this.columns, operationColumn]
      }
      this.loadData(1)
  },
  methods: {
    /**
@@ -312,7 +318,8 @@
    },

    searchReset() {
      this.queryParam = {}
        if (this.isDisplayOperation) this.queryParam = {}
        else this.queryParam = Object.assign({}, this.propsQueryParam)
      this.faultTimeRange = []
      this.loadData(1)
    }

 src/views/eam/repair/modules/EamRepairOrderList/ReceiveFaultModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,90 @@
<template>
  <j-modal
    :title="title"
    width="80%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    centered
    cancelText="关闭">
    <eam-report-repair-list ref="reportRepairListRef" :isDisplayOperation="false"
                            :propsQueryParam="{reportStatus:'WAIT_REPAIR'}"/>
  </j-modal>
</template>

<script>
  import { httpAction } from '@api/manage'
  import EamReportRepairList from '../../EamReportRepairList'

  export default {
    name: 'ReceiveFaultModal',
    components: { EamReportRepairList },
    data() {
      return {
        title: '故障保修单',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        },
        labelColLong: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperColLong: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        confirmLoading: false,
        validatorRules: {},
        url: {
          receiveFault: '/eam/eamRepairOrder/add'
        }
      }
    },
    created() {
    },
    methods: {
      loadData() {
        this.$nextTick(() => {
          // this.$refs.reportRepairListRef.queryParam.reportStatus = 'WAIT_REPAIR'
          // this.$refs.reportRepairListRef.loadData(1)
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        console.log('rowKey', this.$refs.reportRepairListRef.selectedRowKeys[0])
        const reportId = this.$refs.reportRepairListRef.selectedRowKeys[0]
        this.confirmLoading = true
        httpAction(this.url.receiveFault, { reportId }, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
          this.close()
        })
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>

 src/views/eam/repair/modules/EamRepairOrderModal.vue

ÎļþÒÑɾ³ý

 src/views/eam/repair/modules/EamReportRepairList/EamReportRepairModal.vue