art: 从沃克项目迁移设备管理代码到航宇

zhangherong

2025-04-27 dbb3445dc720a8f36b3424e73f2e02a6b0f9deb6

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

@@ -1,98 +1,124 @@
<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 :title="title" placement="right" :width="600" :closable="false" :visible="visible" @close="onClose">
    <a-spin :spinning="spinning">
      <a-skeleton :title="false" :paragraph="{ rows: 30}" v-if="spinning&&dataSource.length===0"/>

      <template v-if="dataSource.length>0">
        <a-timeline mode="alternate">
          <a-timeline-item v-for="item in dataSource" :key="item.id">
            <span>操作人：{{item.operator_dictText}}</span><br/>
            <span>操作：{{item.operationTag_dictText}}</span><br/>
            <!--<span>描述：{{item.description}}</span>-->
            <span>操作时间：{{item.createTime}}</span>
          </a-timeline-item>
        </a-timeline>

        <div style="text-align: center">
          <a v-if="dataSource.length>0&&pageConfig.pageNo===1&&pageConfig.pageNo!==pageConfig.totalPage"
             @click="loadNextPageData">
            点击加载更多
            <a-icon type="down"/>
          </a>

          <span v-if="isNoMoreData">- 已经到底了 -</span>

          <a-empty v-if="dataSource.length===0"/>
        </div>
      </template>
    </a-spin>
  </a-drawer>
</template>

<script>
export default {
  name: 'ResumeDrawer',
  data() {
    return {
      visible: false
    }
  },
  methods: {
    getEquipmentResumeByApi() {
  import { getAction } from '@/api/manage'

  export default {
    name: 'ResumeDrawer',
    props: {
      currentTableRowRecord: {
        type: Object
      }
    },
    data() {
      return {
        title: '设备履历',
        visible: false,
        spinning: false,
        dataSource: [],
        url: {
          list: '/eam/equipmentHistoryLog/list'
        },
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          totalPage: 0
        },
        drawerBodyElement: null,
        isNoMoreData: false
      }
    },
    methods: {
      getEquipmentResumeByApi(pageNo = 1) {
        this.pageConfig.pageNo = pageNo
        const params = Object.assign({}, this.pageConfig, { equipmentId: this.currentTableRowRecord.id })
        const that = this
        this.spinning = true
        getAction(this.url.list, params)
          .then(res => {
            if (res.success) {
              console.log('res.result', res.result)
              if (!this.pageConfig.totalPage) this.pageConfig.totalPage = res.result.pages
              res.result.records.forEach(item => that.dataSource.push(item))
              if (this.pageConfig.totalPage !== this.pageConfig.pageNo) {
                if (res.result.current === 2) {
                  if (!this.drawerBodyElement) this.drawerBodyElement = document.querySelector('.ant-drawer-body')
                  this.drawerBodyElement.addEventListener('scroll', this.handleDrawerBodyScroll)
                }
              } else this.isNoMoreData = true
            }
          })
          .finally(() => {
            that.spinning = false
          })
      },

    onClose() {
      this.visible = false
      // 加载下一页数据
      loadNextPageData() {
        const current = this.pageConfig.pageNo + 1
        this.getEquipmentResumeByApi(current)
      },

      // 抽屉元素滚动事件
      handleDrawerBodyScroll() {
        if (this.pageConfig.totalPage === this.pageConfig.pageNo) return
        const { scrollTop, clientHeight, scrollHeight } = this.drawerBodyElement
        if (scrollTop + clientHeight + 1 >= scrollHeight) this.loadNextPageData()
      },

      onClose() {
        this.visible = false
        this.pageConfig.totalPage = 0
        this.isNoMoreData = false
        if (this.drawerBodyElement) this.drawerBodyElement.removeEventListener('scroll', this.handleDrawerBodyScroll)
      }
    }
  }
}
</script>

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

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

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