设备管理首页按照需求进行样式开发

zhaowei

3 天以前 d78dad29ee493b68dd6ac2e34df08431685c3734

 src/views/dashboard/TodoList.vue

@@ -1,24 +1,12 @@
<template>
  <div>
    <a-spin :spinning="loading">
      <div class="todo-container">
        <el-dropdown
          v-for="(item, index) in todoList"
          :key="index"
          class="todo-item"
          @click.native="handelDetail(item)"
        >
          <span class="todo-title" >{{ item.description }}</span>
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item @click.native="handelDetail(item)">执行/审批</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
          <div class="todo-info">
            <div class="todo-node">{{ item.name }}</div>
            <div class="todo-time">{{ item.createTime }}</div>
          </div>
        </el-dropdown>
      </div>
    </a-spin>
  <a-list :dataSource="todoList" :loading="loading" class="list-container">
    <a-list-item slot="renderItem" slot-scope="item,index" style="cursor: pointer"
                 @click.native="handelDetail(item)">
      <a-list-item-meta :description="item.description">
        <span slot="title" style="font-weight: bold">{{item.category_dictText}}</span>
      </a-list-item-meta>
      <div style="text-align: right">{{item.name}}<br/>{{item.createTime}}</div>
    </a-list-item>

    <AssignFileStreamHandle
      ref='modalFormApproval'
@@ -136,7 +124,7 @@
      :selectShenpiData='selectEquipmentSealUpData'
      @searchReset='searchReset'
    ></AssignEquipmentFileStreamHandle>
  </div>
  </a-list>
</template>

<script>
@@ -158,7 +146,8 @@
import EquipmentReturnApprovalModal from '@views/flowable/workflow/leanOut/EquipmentReturnApprovalModal.vue'
import SecondMaintenanceApprovalModal
  from '@views/flowable/workflow/secondMaintenance/SecondMaintenanceApprovalModal.vue'
import ThirdMaintenanceApprovalModal from '@views/flowable/workflow/thirdMaintenance/ThirdMaintenanceApprovalModal.vue'
  import ThirdMaintenanceApprovalModal
    from '@views/flowable/workflow/thirdMaintenance/ThirdMaintenanceApprovalModal.vue'
import OutBoundOrderHandle from '@views/flowable/workflow/outBoundOrder/OutBoundOrderHandle.vue'
import EquipmentSealUpApprovalModal from '@views/flowable/workflow/sealUp/EquipmentSealUpApprovalModal.vue'
import InboundOrderHandle from '@views/flowable/workflow/inboundOrder/InboundOrderHandle.vue'
@@ -172,7 +161,7 @@
import { getAction } from '@api/manage'

export default {
  name: "TodoList",
    name: 'TodoList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    lossBoundHandle,
@@ -235,7 +224,7 @@
      dataId: undefined,
      loading: false,
      disableMixinCreated: true
    };
      }
  },

  computed: {
@@ -249,20 +238,14 @@

  methods: {
    loadData(arg) {

      this.todoList = []

      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
        this.ipagination.page = 1
        this.ipagination.pageSize = 50
      }
      this.queryParam.categoryList = this.defaultCategories;
        this.queryParam.categoryList = this.defaultCategories
      // 封装查询条件
      let formData = {
        pageNo: arg,
@@ -290,10 +273,7 @@
      })
    },

    handelDetail(item, index) {
      console.log('点击了详情')
      console.log('item----->', item)
      console.log('index----->', index)
      handelDetail(item) {
      let processType = this.splitAprocessType(item.category)
      console.log('processType--->', processType)
      switch (processType) {
@@ -579,64 +559,13 @@
      this.$refs.assignEquipmentFileStreamHandle.getAllApproveData(item)
    }
  }
};
  }
</script>
<style scoped>
.todo-container {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  /* 新增：设置容器最大高度（可根据页面布局调整，如500px/80vh） */
  max-height: 100vh;
  /* 新增：垂直方向溢出时显示滚动条，水平方向溢出隐藏（避免布局错乱） */
  overflow-y: auto;
  overflow-x: hidden;
  /* 可选：添加滚动条样式优化（适配Chrome/Safari，可选） */
  &::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
<style scoped lang="less">
  .list-container {
    height: 100%;
    /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
      height: 100%;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #e5e7eb; /* 滚动条滑块颜色 */
    border-radius: 3px; /* 滚动条圆角 */
  }
  &::-webkit-scrollbar-track {
    background-color: #f9fafb; /* 滚动条轨道颜色 */
  }
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
  min-width: 300px;
  box-sizing: border-box;
  cursor: pointer;
}
.todo-title {
  flex: 1;
  margin-right: 100px;
  font-size: 14px;

}
.todo-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120px;
  font-size: 12px;
}
.todo-node {
  margin-bottom: 5px;
  white-space: nowrap;
}
.el-dropdown {
  width: 100%;
}
.el-dropdown-menu {
  min-width: 200px;
  align-items: center;
}
</style>