tft-fe/src/views/qualityManagement/processFullInspection/fullInspectionDetail.vue

<template>
  <div class="full-inspection-detail">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <div class="plot-total">
      <defect-scatter-plot-total
        ref="fullInspectionDetailPlot"
        :detailObj="detailObj"
        class="plot-total-box"
      />
    </div>
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="80"
        label="操作"
        fixed="right"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :total="total"
      @pagination="getList()"
    />
    <BaseDialog
      dialogTitle="查看图片"
      :dialogVisible="centervisible"
      :close-on-click-modal="false"
      :before-close="handleCancel"
    >
      <el-image
        style="width: 100px; height: 100px"
        src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
        :preview-src-list="arr"
      >
      </el-image>
      <el-row slot="footer" type="flex" justify="end">
        <el-col :span="12">
          <el-button size="small" class="btnTextStyle" @click="handleCancel"
            >关闭</el-button
          >
        </el-col>
      </el-row>
    </BaseDialog>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import {
  processCompleteInspetionListType,
  processCompleteInspetionDetails,
  pageIIS
} from '@/api/qualityManagement'
import defectScatterPlotTotal from './../components/defectScatterPlotTotal.vue'
const tableProps = [
  {
    prop: 'ypos',
    label: 'Y轴位置(mm)'
  },
  {
    prop: 'xpos',
    label: 'X轴位置(mm)'
  },
  {
    prop: 'defectclass',
    label: '缺陷尺寸等级'
  },
  {
    prop: 'defecttype',
    label: '缺陷类型'
  },
  {
    prop: 'length',
    label: '长度(mm)'
  },
  {
    prop: 'width',
    label: '宽度(mm)'
  }
]
const tableBtn = [
  {
    type: 'viewPic',
    btnName: '查看图片'
  }
]
export default {
  name: 'FullInspectionDetail',
  components: { defectScatterPlotTotal },
  data() {
    return {
      arr: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
      ],
      formConfig: [
        {
          type: 'select',
          label: '缺陷类型',
          selectOptions: [],
          param: 'defectType',
          labelField: 'defectType',
          valueField: 'defectType',
          defaultSelect: '',
          filterable: true,
          width: 200
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: 'button',
          btnName: '返回',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      detailObj: {},
      tableProps,
      tableData: [],
      tableH: tableHeight(425),
      tableBtn,
      total: 0,
      listQuery: {
        current: 1,
        size: 20,
        glassId: '',
        defectType: ''
      },
      // 查看图片
      centervisible: false
    }
  },
  mounted() {
    const { virtualcode, filetype, time } = this.$route.query
    this.listQuery.glassId = virtualcode
    this.getDetail(virtualcode, filetype, time)
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(425)
    })
    this.getListType()
    this.getList()
  },
  methods: {
    getDetail(virtualcode, filetype, time) {
      processCompleteInspetionDetails({
        virtualcode,
        time,
        defectType: decodeURIComponent(filetype)
      }).then((res) => {
        console.log(res)
        this.detailObj = res.data
        this.$nextTick(() => {
          this.$refs.fullInspectionDetailPlot.init(this.detailObj)
        })
      })
    },
    getListType() {
      processCompleteInspetionListType({
        size: 500,
        current: 1
      }).then((res) => {
        this.formConfig[0].selectOptions = res.data
      })
    },
    getList() {
      pageIIS({ ...this.listQuery }).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.defectType = val.defectType
          this.listQuery.current = 1
          this.getList()
          break
        default:
          this.$router.push({
            path: '/qualityManagement/processFullInspection/fullInspection'
          })
      }
    },
    handleClick(val) {
      if (val.type === 'viewPic') {
        if (val.data.defectid) {
          this.centervisible = true
        } else {
          this.$message({
            message: '暂无图片',
            type: 'warning'
          })
        }
      }
    },
    handleCancel() {
      this.centervisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.full-inspection-detail {
  margin: 0 16px;
  padding: 16px;
  border-radius: 8px;
  height: calc(100vh - 205px);
  background-color: #fff;
  .plot-total {
    position: relative;
    height: 115px;
    .plot-total-box {
      position: absolute;
      width: 100%;
      top: 25px;
      left: 0px;
    }
  }
}
</style>