X-web/src/views/modules/trace/product-list.vue

<!-- 产品追溯列表 -->
<template>
  <div class="product-list">
    <div class="my-title" v-if="!detailsVisible">产品追溯</div>
    <template v-if="!detailsVisible">
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="productName"
          header-align="center"
          align="center"
          min-width="140"
          :show-tooltip-when-overflow="true"
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="prodCode"
          header-align="center"
          align="center"
          min-width="100"
          :show-tooltip-when-overflow="true"
          label="产品编号">
        </el-table-column>
        <el-table-column
          prop="orderCode"
          header-align="center"
          align="center"
          min-width="140"
          :show-tooltip-when-overflow="true"
          label="订单编号">
        </el-table-column>
        <el-table-column
          prop="customerName"
          header-align="center"
          align="center"
          min-width="160"
          :show-tooltip-when-overflow="true"
          label="客户名称">
        </el-table-column>
        <el-table-column
          prop="state"
          header-align="center"
          align="center"
          label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.state?optionsState[Number(scope.row.state) - 3].value:''}}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="isAuth('trace:search:prod:detail')" type="text" size="small" @click="detail(scope.row.id, scope.row.prodCode, true)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">返回</el-button>
      </span>
    </template>
    <!-- 弹窗, 查看 -->
    <detail v-if="detailsVisible" ref="details" @onChose="onChildClose"/>
  </div>
</template>

<script>
  import Detail from './product-detail'
  import { getProductByCode } from '@/api/trace'
  export default {
    name: 'product-list',
    components: {Detail},
    props: {
      // 默认第一页的数据
      defaultList: {
        type: Array,
        default: []
      },
      // 订单编码
      productCode: {
        type: String,
        default: ''
      },
      defaultTotalPage: {
        type: [Number, String],
        default: 0
      }
    },
    data () {
      return {
        detailsVisible: false,
        dataForm: {},
        dataList: this.defaultList,
        pageIndex: 1,
        pageSize: 10,
        totalPage: Number(this.defaultTotalPage),
        dataListLoading: false,
        dataListSelections: [],
        // 状态：1：待排产，2:生产中，3:生产完成
        optionsState: [
          {
            code: '1',
            value: '待排产'
          },
          {
            code: '2',
            value: '生产中'
          },
          {
            code: '3',
            value: '生产完成'
          }
        ]
      }
    },
    created () {
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      onChildClose () {
        this.detailsVisible = false
      },
      // 查询
      queryPage () {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let params = {
          'current': this.pageIndex,
          'size': this.pageSize,
          'prodCode': this.productCode
        }
        getProductByCode(params).then(({data}) => {
          if (data && data.code === '200') {
            this.dataList = data.data.records
            this.totalPage = Number(data.data.total)
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          console.log('monitor')
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      detail (id, prodCode, disable) {
        this.detailsVisible = true
        this.$nextTick(() => {
          this.$refs.details.init(id, prodCode, disable)
        })
      },
      // 创建新产品
      createNewProduct () {
        this.$message.warning('功能暂未开放')
      },
      closeDialogEvent () {
        this.detailsVisible = false
      }
    }
  }
</script>

<style scoped>

</style>