kd-aiot-frontend/src/views/material/materialBOM/components/view-dialog.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="BOM详情"
    width="80%"
    @close="cancel"
  >
    <headerTitle title="基本信息"></headerTitle>
    <el-form label-width="100px" label-position="left">
      <el-row>
        <el-col :span="8">
          <el-form-item label="BOM编码" prop="code">
            {{ formData.code }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="BOM名称" prop="name">
            {{ formData.name }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属工厂" prop="factoryId">
            {{ formData.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品编码" prop="categoryCode">
            {{ formData.categoryCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品名称" prop="categoryName">
            {{ formData.categoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="版本号" prop="version">
            {{ formData.version }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="基本数量" prop="baseCount">
            {{ formData.baseCount }}
            {{ formData.baseCountUnit }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            {{ statusOpt[formData.status] }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工序" prop="taskName">
            {{ formData.taskName }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 350px)"
      :initLoad="false"
    >
    </ele-pro-table>

    <!-- <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div> -->
  </ele-modal>
</template>

<script>
  import factorySelect from '@/components/CommomSelect/factory-select.vue';
  import { getById, detailPage } from '@/api/material/BOM';
  export default {
    components: { factorySelect },
    props: {
      statusOpt: Object
    },
    data () {
      return {
        visible: false,
        row: {},
        formData: {
          code: '',
          name: '',
          factoryId: '',
          categoryCode: '',
          categoryId: '',
          categoryName: '',
          categoryType: '',
          baseCount: '',
          baseCountUnit: '',
          status: '-1'
        },
        columns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '子项编号',
            prop: 'subCode'
          },
          {
            label: '物料名称',
            prop: 'categoryName'
          },
          {
            label: '物料编码',
            prop: 'categoryCode'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },
          {
            label: '型号',
            prop: 'model'
          },
          {
            label: '数量',
            prop: 'count'
          },
          {
            label: '单位',
            prop: 'unit'
            // },
            // {
            //   action: 'action',
            //   slot: 'action',
            //   label: '操作'
          }
        ],

        categoryList: [
          {
            value: '1',
            label: '产品'
          },
          {
            value: '2',
            label: '部件'
          },
          {
            value: '3',
            label: '零件'
          }

        ],
      };
    },
    methods: {
      open (row) {
        this.visible = true;
        this._getById(row.id);
        
        this.$nextTick(() => {
          this.$refs.table.reload({ where: { bomId: row.id } });
        });
      },
      async _getById (id) {
        const data = await getById(id);
        this.formData = data;
      },
      cancel () {
        this.visible = false;
      },
      datasource (res) {
        const { page, limit, where } = res;
        return detailPage({
          pageNum: page,
          size: limit,
          ...where
        });
      }
    }
  };
</script>