imcs_yj_fe/imcs-ui/src/views/zuihou/qualityCenter/qualityResult/Index.vue

<template>
  <div class="app-container">
    <!-- 搜索模块 -->
    <div class="filter-container">
    	<span>
    		<span>{{$t("machining.searchForm.offset.workpieceName")}}：</span>
    		<el-input v-model="queryParams.model.workpieceName" :placeholder='$t("common.pleaseEnter")' style="width: 120px;" size="medium"/>
    	</span>
      <span style="margin-left: 10px;">
    		<span>{{$t("machining.searchForm.offset.orderNo")}}：</span>
    		<el-input v-model="queryParams.model.orderNo" :placeholder='$t("common.pleaseEnter")' style="width: 120px;" size="medium"/>
    	</span>
      <span style="margin-left: 10px;">
    		<span>{{$t("machining.searchForm.offset.workpieceId")}}：</span>
    		<el-input v-model="queryParams.model.workpieceId" :placeholder='$t("common.pleaseEnter")' style="width: 120px;" size="medium"/>
    	</span>
      <span style="margin-left: 10px;">
    		<span>{{$t("machining.searchForm.offset.createTime")}}：</span>
        <!--    		<el-input v-model="queryParams.model.createTime" :placeholder='$t("common.pleaseEnter")' style="width: 120px;" size="medium"/>-->
        <el-date-picker
          v-model="queryParams.model.createTime"
          type="datetime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 20%;"
        />
    	</span>
      <span style="margin-left: 10px;">
	      <el-button plain type="primary" icon="el-icon-search" size="medium" @click="search">
	        {{ $t("table.search") }}
	      </el-button>
	      <el-button plain type="warning" icon="el-icon-refresh" size="medium" @click="reset">
	        {{ $t("table.reset") }}
	      </el-button>
      </span>
    </div>
    <!-- 列表数据 -->
    <el-table
      :key="tableKey"
      ref="table"
      v-loading="loading"
      :data="tableData.records"
      border
      fit
      row-key="id"
      style="width: 100%;margin-top:50px;"
    >

      <!-- 序号 -->
      <el-table-column align="center" type="selection" width="50" :reserve-selection="true" />
      <!-- 序号 -->
      <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="orderNo" :label='$t("machining.table.qualityResult.orderNo")' :show-overflow-tooltip="true"></el-table-column>
      <!-- '零件名称 -->
      <el-table-column prop="workpieceName" :label='$t("machining.table.qualityResult.workpieceName")' :show-overflow-tooltip="true"></el-table-column>
      <!-- 零件编号 -->
      <el-table-column prop="uniqueCode" :label='$t("machining.table.qualityResult.uniqueCode")'  :show-overflow-tooltip="true"></el-table-column>
      <!-- 工序名称 -->
      <el-table-column prop="procedureName" :label='$t("machining.table.qualityResult.procedureName")' :show-overflow-tooltip="true"></el-table-column>
      <!-- X -->
      <el-table-column prop="okFlag" :label='$t("machining.table.qualityResult.okFlag")' :show-overflow-tooltip="true"></el-table-column>
      <!-- Y -->
      <el-table-column prop="measuringReport" :label='$t("machining.table.qualityResult.measuringReport")' :show-overflow-tooltip="true"></el-table-column>
      <!-- 所属计划 -->
      <el-table-column prop="createTime" :label='$t("machining.table.qualityResult.createTime")' :show-overflow-tooltip="true"></el-table-column>

      <!-- 操作 -->
      <el-table-column
        :label="$t('table.operation')"
        fixed="right"
        align="center"
        column-key="operation"
        width="80px"
      >
        <template slot-scope="{ row }">
          <el-tooltip class="item" :content="$t('machining.common.downloadReport')" effect="dark" placement="top-start">
            <i
              class="el-icon-view table-operation"
              style="color: #87d068"
              @click ="downloadReport(row)"
            />
          </el-tooltip>
        </template>
      </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>
</template>

<script>
  // 【分页】组件
  import Pagination from "@/components/Pagination"
  // 【不合格产品管理】-API
  import measuringOffsetMgrApi from "@/api/machiningClient/measuringOffsetMgr"
  // 共通函数
  import { downloadFile, initQueryParams } from '@/utils/commons'

  export default {
    name: "measuringOffsetMgr",
    directives: { },
    components: { Pagination },
    props: {
    },
    data () {
      return {
        tableKey: 0,
        queryParams: initQueryParams({
        }),
        selection: [],
        loading: false,
        tableData: {
          total: 0
        }
      }
    },
    // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
    created() {
      // 加载列表数据
      this.fetch()
    },
    computed: {
      currentUser () {
        return this.$store.state.account.user
      }
    },
    mounted () {
    },
    methods: {
      search () {
        this.fetch({
          ...this.queryParams
        })
      },
      reset () {
        this.queryParams = initQueryParams({})
        this.$refs.table.clearSort()
        this.$refs.table.clearFilter()
        this.search()
      },
      downloadReport (row) {
        this.queryParams.id = row.workpieceId
        measuringOffsetMgrApi.download(this.queryParams).then(response => {
          downloadFile(response)
        })
      },
      fetch (params = {}) {
        this.loading = true
        this.queryParams.current = params.current ? params.current : this.queryParams.current
        this.queryParams.size = params.size ? params.size : this.queryParams.size
        console.log(this.queryParams.model.workpieceName)
        measuringOffsetMgrApi.getList(this.queryParams).then(response => {
          const res = response.data
          if (res.isSuccess) {
            this.tableData = res.data
          }
        }).finally(() => this.loading = false)
      }
    }
  }
</script>
<style lang="scss" scoped></style>