1、设备台账页面新增设备履历功能（未与后端进行联调） 2、设备台账页面新增点击设备展示对应保养标准功能并完成与后端联调

zhaowei

2025-04-01 a1615e0c7d06ee3fdf4ab776a2b07ca3f264a5bd

1、设备台账页面新增设备履历功能（未与后端进行联调）
2、设备台账页面新增点击设备展示对应保养标准功能并完成与后端联调

 src/views/eam/base/EamMaintenanceStandardList.vue

@@ -1,71 +1,74 @@
<template>
  <a-card :bordered="false">

    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="标准编码">
              <a-input placeholder="请输入标准编码" v-model="queryParam.standardCode"></a-input>
            </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.standardName"></a-input>
            </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.equipmentCode"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
    <template v-if="isDisplayOperation">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="保养分类">
                <a-input placeholder="请输入保养分类" v-model="queryParam.maintenanceCategory"></a-input>
              <a-form-item label="标准编码">
                <a-input placeholder="请输入标准编码" v-model="queryParam.standardCode"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="标准名称">
                <a-input placeholder="请输入标准名称" v-model="queryParam.standardName"></a-input>
              </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.equipmentId"></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.maintenanceCategory"></a-input>
                </a-form-item>
              </a-col>
            </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 type="info" @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-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
            </a-col>

        </a-row>
      </a-form>
    </div>
          </a-row>
        </a-form>
      </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <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"
                @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            åˆ é™¤
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
      <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
      <div class="table-operator">
        <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"
                  @change="handleImportExcel">
          <a-button type="primary" icon="import">导入</a-button>
        </a-upload>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel">
              <a-icon type="delete"/>
              åˆ é™¤
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
      </div>
    </template>


    <!-- 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>
@@ -85,14 +88,14 @@
        :customRow='clickThenSelect'
        @change="handleTableChange">
        <template slot="referenceFile" slot-scope="text, record, index">
          <a v-if="text && text !== ''" @click="handlePreview(record)">预览</a>
          <a v-if="text && text !== ''" @click.stop="handlePreview(record)">预览</a>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a @click.stop="handleEdit(record)">编辑</a>

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

      <a-tabs defaultActiveKey="1">
        <a-tab-pane
          tab='保养标准明细项'
          key="1"
        >
          <div
            class="table-operator"
            style="margin:-16px"
          >
            <eam-maintenance-standard-detail-list :standardId="standardId" />
        <a-tab-pane tab='保养标准明细项' key="1">
          <div class="table-operator" style="margin:-16px">
            <eam-maintenance-standard-detail-list ref="standardDetailRef" :standardId="standardId"/>
          </div>
        </a-tab-pane>

@@ -138,6 +135,12 @@
export default {
  name: 'EamMaintenanceStandardList',
  mixins: [JeecgListMixin],
  props: {
    isDisplayOperation: {
      type: Boolean,
      default: true
    }
  },
  components: {
    EamMaintenanceStandardModal,
    EamMaintenanceStandardDetailList
@@ -145,18 +148,9 @@
  data() {
    return {
      description: '保养标准管理页面',
      disableMixinCreated: true,
      // è¡¨å¤´
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '标准编码',
          align: 'center',
@@ -207,12 +201,6 @@
          align: 'center',
          dataIndex: 'referenceFile',
          scopedSlots: { customRender: 'referenceFile' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
@@ -223,7 +211,7 @@
        importExcelUrl: 'eam/maintenanceStandard/importExcel'
      },
      fileUrl: '',
      standardId: '-1',
      standardId: '-1'
    }
  },
  computed: {
@@ -231,22 +219,38 @@
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    if (!this.isDisplayOperation) {
      return
    }
    const operationColumn = {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      scopedSlots: { customRender: 'action' }
    }
    this.columns = [...this.columns, operationColumn]
    this.loadData(1)
  },
  methods: {
    handlePreview: function (record) {
      if(record.referenceFile) {
    handlePreview: function(record) {
      if (record.referenceFile) {
        try {
          let file = JSON.parse(record.referenceFile);
          this.$refs.lxFilePreview.preview(file.filePath);
        }catch (e) {
          console.error(e);
          this.$message.error(e.message);
          let file = JSON.parse(record.referenceFile)
          this.$refs.lxFilePreview.preview(file.filePath)
        } catch (e) {
          console.error(e)
          this.$message.error(e.message)
        }
      }else {
        this.$message.warning("参考文件为空！");
      } else {
        this.$message.warning('参考文件为空！')
      }
    },
    clickThenSelect(record) {
      return {
        style: {
          cursor: 'pointer'
        },
        on: {
          click: () => {
            this.onSelectChange(record.id.split(','), [record])
@@ -255,24 +259,24 @@
      }
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.standardId = '-1';
      this.selectedRowKeys = []
      this.selectionRows = []
      this.standardId = '-1'
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      if (selectedRowKeys.length === 1) {
        this.standardId = selectionRows[0]['id']
        this.standardId = selectedRowKeys[0]
      } else {
        this.standardId = '-1'
      }
    },
    searchReset() {
      this.standardId = '-1';
      this.standardId = '-1'
      this.queryParam = {}
      this.loadData(1);
    },
      this.loadData(1)
    }
  }
}
</script>

 src/views/eam/base/modules/EamMaintenanceStandardDetailList.vue

@@ -12,7 +12,6 @@
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
      </a-table>
    </div>

 src/views/eam/equipment/EamEquipmentList.vue

@@ -101,7 +101,7 @@
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <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>
        <a style="margin-left: 24px" @click="onSelectChange([])">清空</a>
      </div>

      <a-table
@@ -115,7 +115,9 @@
        :loading="loading"
        :scroll="{ x: 'max-content' }"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        @change="handleTableChange"
        :customRow="customTableRow"
      >
        <span slot="equipmentImportance" slot-scope="text">
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否"/>
        </span>
@@ -132,7 +134,7 @@
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否"/>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a @click.stop="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-dropdown>
@@ -140,6 +142,9 @@
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleOpenNameplateModal(record)">铭牌</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handleOpenResumeDrawer(record)">履历</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
@@ -157,10 +162,18 @@
    </div>
    <!-- table区域-end -->

    <a-tabs v-model="activeTabKey">
      <a-tab-pane tab="保养标准" :key="1">
        <eam-maintenance-standard-list ref="tabPaneTableListRef" :isDisplayOperation="false"/>
      </a-tab-pane>
    </a-tabs>

    <!-- è¡¨å•åŒºåŸŸ -->
    <eamEquipment-modal ref="modalForm" @ok="modalFormOk"></eamEquipment-modal>
    <!--铭牌弹窗-->
    <nameplate-modal ref="nameplateModalRef"/>
    <!--履历弹窗-->
    <resume-drawer ref="resumeDrawerRef"/>
  </a-card>
</template>

@@ -171,11 +184,15 @@
import { getAction, templateXlsDownload } from '@api/manage'
import NameplateModal from '@views/eam/equipment/modules/NameplateModal.vue'
import { getSystemConfigValue } from '@api/api'
import ResumeDrawer from '@views/eam/equipment/modules/ResumeDrawer.vue'
import EamMaintenanceStandardList from '@views/eam/base/EamMaintenanceStandardList.vue'

export default {
  name: 'EamEquipmentList',
  mixins: [JeecgListMixin],
  components: {
    EamMaintenanceStandardList,
    ResumeDrawer,
    NameplateModal,
    EamEquipmentModal
  },
@@ -270,7 +287,7 @@
        {
          title: '设备型号',
          align: 'center',
          width: 100,
          width: 200,
          dataIndex: 'equipmentModel'
        },
        {
@@ -393,23 +410,23 @@
        },
        {
          title: '创建人',
          align: "center",
          align: 'center',
          dataIndex: 'createBy_dictText'
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'createTime',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '更新人',
          align: "center",
          align: 'center',
          dataIndex: 'updateBy_dictText'
        },
        {
          title: '更新时间',
          align: "center",
          dataIndex: 'updateTime',
          align: 'center',
          dataIndex: 'updateTime'
        },
        {
          title: '备注',
@@ -433,10 +450,11 @@
        exportXlsUrl: 'eam/equipment/exportXls',
        importExcelUrl: 'eam/equipment/importExcel',
        loadProductionOptions: '/mdc/mdcProduction/loadProductionTreeOptions',
        templateXlsDownloadUrl: '导入模板/设备台账导入模板_v1.0.xlsx',
        templateXlsDownloadUrl: '导入模板/设备台账导入模板_v1.0.xlsx'
      },
      treeData: [],
      appHomeUrl: '',
      activeTabKey: 1,
      appHomeUrl: ''
    }
  },
  computed: {
@@ -445,8 +463,8 @@
    }
  },
  created() {
    this.loadAllProductionTree();
    this.loadAppHomeUrlConfigValue();
    this.loadAllProductionTree()
    this.loadAppHomeUrlConfigValue()
  },
  methods: {
    loadAllProductionTree() {
@@ -462,25 +480,72 @@

    /**
     * å¼€å¯é“­ç‰Œå¼¹çª—
     * @param record
     * @param record è¡¨æ ¼è¡Œä¿¡æ¯
     */
    handleOpenNameplateModal(record) {
      this.$refs.nameplateModalRef.model = Object.assign({}, record)
      this.$refs.nameplateModalRef.httpUrl = this.appHomeUrl + record.equipmentCode;
      this.$refs.nameplateModalRef.httpUrl = this.appHomeUrl + record.equipmentCode
      this.$refs.nameplateModalRef.visible = true
    },

    /**
     * å¼€å¯å±¥åŽ†æŠ½å±‰
     * @param record
     */
    handleOpenResumeDrawer(record) {
      this.$refs.resumeDrawerRef.visible = true
    },
    handleTemplateXlsDownload(){
      templateXlsDownload(this.url.templateXlsDownloadUrl);

    /**
     * è‡ªå®šä¹‰è®¾å¤‡å°è´¦è¡¨æ ¼è¡Œ
     * @param record è¡¨æ ¼è¡Œä¿¡æ¯
     * @returns {{style: {cursor: string}, on: {click: *}}} æ ·å¼å¯¹è±¡ä¸Žäº‹ä»¶æ–¹æ³•
     */
    customTableRow(record) {
      return {
        style: {
          cursor: 'pointer'
        },
        on: {
          click: () => {
            this.onSelectChange([record.id])
          }
        }
      }
    },

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

    /**
     * è®¾å¤‡å°è´¦è¡¨æ ¼å¤šé€‰æ¡†çŠ¶æ€æ”¹å˜æ—¶è§¦å‘
     * @param selectedRowKeys å·²é€‰æ‹©çš„rowKey集合
     */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      this.$refs.tabPaneTableListRef.dataSource = []
      this.$refs.tabPaneTableListRef.onClearSelected()
      if (selectedRowKeys.length === 1) this.loadTabPaneTableData(selectedRowKeys[0])
    },

    handleTemplateXlsDownload() {
      templateXlsDownload(this.url.templateXlsDownloadUrl)
    },

    loadAppHomeUrlConfigValue() {
      let params = {settingKey: 'app_home_url'};
      let params = { settingKey: 'app_home_url' }
      getSystemConfigValue(params).then(res => {
        if (res.success) {
          this.appHomeUrl = res.result.settingValue;
          this.appHomeUrl = res.result.settingValue
        }
      })
    },
    }
  }
}
</script>

 src/views/eam/equipment/modules/ResumeDrawer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,98 @@
<template>
  <a-drawer title="设备履历" placement="right" :width="500" :closable="false" :visible="visible" @close="onClose">
    <a-timeline mode="alternate">
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item color="green">
        Solve initial network problems 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item color="red">
        Network problems being solved 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item color="green">
        Solve initial network problems 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item color="red">
        Network problems being solved 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item color="green">
        Solve initial network problems 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item color="red">
        Network problems being solved 2015-09-01
      </a-timeline-item>
      <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>
        Technical testing 2015-09-01
      </a-timeline-item>
    </a-timeline>
  </a-drawer>
</template>

<script>
export default {
  name: 'ResumeDrawer',
  data() {
    return {
      visible: false
    }
  },
  methods: {
    getEquipmentResumeByApi() {

    },

    onClose() {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .ant-drawer-wrapper-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .ant-drawer-body {
    flex: 1;
    overflow: auto;
  }
}
</style>