imcs_yj_fe/imcs-ui/src/views/zuihou/qualityCenter/qualityMgr/components/View.vue

<template>
  <el-dialog
    title="补单信息"
    width="1200px"
    :append-to-body="true"
    :visible.sync="isVisible"
    class="tenant-view"
  >
    <div>
    	<!-- 列表数据 -->
	    <el-table
	      :key="tableKey"
	      ref="table"
	      v-loading="loading"
	      :data="tableData.records"
	      border
	      fit
	      style="width: 100%;"
	    >
	    	<!-- 序号 -->
	    	<el-table-column :label='$t("common.serialNo")' width="55px" align="center">
		      <template slot-scope="scope">
		        <div>
		          {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
		        </div>
		      </template>
	      </el-table-column>
	      <el-table-column prop="furnaceBatchNo" label='产品名称' :show-overflow-tooltip="true" width="150px"></el-table-column>
	      <el-table-column prop="meterialCode" label='产品唯一码' :show-overflow-tooltip="true" width="200px"></el-table-column>
		  	<el-table-column prop="factory" label='质检结果' :show-overflow-tooltip="true" width="150px"></el-table-column>
	      <el-table-column prop="meterialBatchNo" label='数量' :show-overflow-tooltip="true" width="150px"></el-table-column>
	      <el-table-column prop="factoryDate" label='质检人' :show-overflow-tooltip="true" width="150px"></el-table-column>
	      <el-table-column prop="batchStand" label='补单单号' :show-overflow-tooltip="true" width="150px"></el-table-column>
	      <el-table-column prop="createUser" label='所属订单号' :show-overflow-tooltip="true" width="150px"></el-table-column>
	      <el-table-column prop="createTime" label='所属计划' :show-overflow-tooltip="true" width="150px"></el-table-column>
	      <el-table-column prop="usedNum" label='生成单据时间' :show-overflow-tooltip="true" width="150px"></el-table-column>
        <el-table-column prop="lastNum" label='生成人' :show-overflow-tooltip="true" width="150px"></el-table-column>
        <el-table-column prop="lastNum" label='处理时间' :show-overflow-tooltip="true" width="150px"></el-table-column>
        <el-table-column prop="lastNum" label='处理人' :show-overflow-tooltip="true" width="150px"></el-table-column>
	    </el-table>

	    <!-- 分页组件 -->
	    <pagination
	      v-show="tableData.total > 0"
	      :limit.sync="queryParams.size"
	      :page.sync="queryParams.current"
	      :total="Number(tableData.total)"
	      @pagination="fetch"
	    />
    </div>
  </el-dialog>
</template>
<script>
	// 【分页】组件
	import Pagination from "@/components/Pagination"
	// 【原材料接收管理】-API
	import ReceiveApi from "@/api/prepareProductMgr/receive"
	// 【共通-工具】
	import { initQueryParams } from '@/utils/commons'
export default {
  name: 'TenantView',
  components: { Pagination },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      screenWidth: 0,
      width: this.initWidth(),
      tenant: {},
      tableKey: 0,
      queryParams: initQueryParams({}),
      selection: [],
      loading: false,
      tableData: {
        total: 0
      },
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
      }
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
    initWidth () {
      this.screenWidth = document.body.clientWidth
      if (this.screenWidth < 550) {
        return '95%'
      } else if (this.screenWidth < 990) {
        return '580px'
      } else if (this.screenWidth < 1400) {
        return '600px'
      } else {
        return '650px'
      }
    },
    
    // 接收来自其他组件的-函数
    setTenant (val) {
      this.tenant = { ...val }
      // 获取列表数据
			this.fetch();
    },
    
    // 分页列表
    fetch (params = {}) {
      this.loading = true
      if (this.queryParams.timeRange) {
        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
      }
			//
      this.queryParams.current = params.current ? params.current : this.queryParams.current
      this.queryParams.size = params.size ? params.size : this.queryParams.size
      // 搜索条件添加-材料的id
      this.queryParams.model.meterialId = this.tenant.id;
      ReceiveApi.page(this.queryParams).then(response => {
        const res = response.data
        if (res.isSuccess) {
          this.tableData = res.data
        }
        // eslint-disable-next-line no-return-assign
      }).finally(() => this.loading = false)

    },
    
    close () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.tenant-view {
  .img-wrapper {
    text-align: center;
    margin-top: -1.5rem;
    margin-bottom: 10px;
    img {
      width: 4rem;
      border-radius: 50%;
    }
  }
  .view-item {
    margin: 7px;
    i {
      font-size: 0.97rem;
    }
    span {
      margin-left: 5px;
    }
  }
}
</style>