yudao-dev/src/views/group/monitoring/groupTeamView/components/groupTeamViewDetail.vue

<template>
  <div>
    <el-drawer title="查看详情" :visible.sync="visible" size="70%">
      <div class="box">
        <el-row class="topBox">
          <el-col :span="6">
            <p class="boldTitle">工单名称</p>
            <p class="lightText">{{ queryParams.workOrderName ? queryParams.workOrderName : '-' }}</p>
          </el-col>
          <el-col :span="6">
            <p class="boldTitle">班组名称</p>
            <p class="lightText">{{ queryParams.teamName ? queryParams.teamName : '-' }}</p>
          </el-col>
        </el-row>
        <base-table
          :table-props="tableProps"
          :table-data="tableData"
          :max-height="tableH"
        />
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getByTeam } from '@/api/monitoring/groupTeamView'
import { parseTime } from '@/utils/ruoyi'
const tableProps = [
  {
    prop: 'startTime',
    label: '开始时间',
    filter: parseTime,
    minWidth: 160
  },
  {
    prop: 'endTime',
    label: '结束时间',
    filter: parseTime,
    minWidth: 160
  },
  {
    prop: 'num',
    label: '人数'
  },
  {
    prop: 'workTime',
    label: '工作时长'
  }
]
export default {
  name: 'GroupTeamViewDetail',
  data() {
    return {
      visible: false,
      tableProps,
      tableData: [],
      tableH: this.tableHeight(260),
      queryParams: {}
    }
  },
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
  },
  methods: {
    init(params) {
      this.visible = true
      this.queryParams = params
      getByTeam({
        teamId: this.queryParams.teamId,
        workOrderId: this.queryParams.workOrderId
      }).then(res => {
        this.tableData = res.data || []
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 32px;
  .topBox {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #E9E9E9;
    .boldTitle {
      font-size: 14px;
      font-weight: 600;
      color: rgba(0,0,0,0.85);
      margin: 0;
      margin-bottom: 10px;
    }
    .lightText {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102,102,102,0.75);
      margin: 0;
    }
  }
}
</style>