kd-aiot-frontend-aps/src/views/materialPlan/components/detail/material.vue

<template>
  <div class="pane-box">
    <HeaderTitle title="物料信息表"> </HeaderTitle>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :needPage="false"
      :initLoad="false"
      :datasource="datasource"
    >
    </ele-pro-table>
  </div>
</template>
<script>
  import { getMaterialinfo } from '@/api/productionPlan/index';
  export default {
    props: {
      planId: {
        type: [String, Number],
        default: ''
      }
    },
    data () {
      return {
        columns: [
          {
            type: 'index',
            label: '序号',
            width: '80'
          },
          {
            prop: 'materialCode',
            label: '编码'
          },
          {
            prop: 'materialName',
            label: '名称'
          },
          {
            prop: 'materialType',
            label: '类型'
          },
          {
            prop: 'materialUnit',
            label: '单位'
          },
          {
            prop: 'requiredNum',
            label: '需求数量'
          },
          {
            prop: 'claimNum',
            label: '领用数量'
          },
          {
            prop: 'inputNum',
            label: '投入数量'
          },
          {
            prop: 'returnNum',
            label: '退还数量'
          }
        ]
      };
    },
    watch: {
      planId: {
        immediate: true,
        handler (val) {
          if (val) {
            this.$nextTick(() => {
              this.$refs.table.reload();
            });
          }
        }
      }
    },
    methods: {
      async datasource () {
        return getMaterialinfo(this.planId);
      }
    }
  };
</script>