kd-aiot-frontend/src/views/ItemInformation/components/production-device.vue

<!-- 生产设备 -->
<template>
  <div class="productionDevice">
    <div class="tabs">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="匹配模具" name="first">
          <div class="table">
            <ele-pro-table
              ref="table"
              :columns="columns"
              :datasource="datasource"
              height="calc(100vh - 500px)"
              class="dict-table"
            >
              <template v-slot:toolbar>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  class="ele-btn-icon"
                  @click="add"
                >
                  添加
                </el-button>
              </template>
              <!-- 表头工具栏 -->
              <template v-slot:action="{ row }">
                <el-link
                  type="danger"
                  :underline="false"
                  icon="el-icon-delete"
                  @click="handleDel(row)"
                >
                  删除
                </el-link>
              </template>
            </ele-pro-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="匹配备品备件" name="second">
          <div class="one">
            <el-button type="primary">添加</el-button>
          </div>
          <div class="table">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="序号" width="60">
              </el-table-column>
              <el-table-column prop="wpmc" label="物品名称"> </el-table-column>
              <el-table-column prop="wpmc" label="物品名称"> </el-table-column>
              <el-table-column prop="wpmc" label="型号"> </el-table-column>
              <el-table-column prop="wpmc" label="物品类型"> </el-table-column>
              <el-table-column prop="wpmc" label="分类"> </el-table-column>
              <el-table-column prop="wpmc" label="操作"> </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <addTable
      ref="addTableRef"
      @successTable="addTableList"
      :categoryLevelId="categoryLevelId"
    />
  </div>
</template>

<script>
  import addTable from './add-table.vue';
  export default {
    components: { addTable },
    props: {
      categoryLevelId: {
        typeof: String,
        default: ''
      }
    },
    data() {
      return {
        tableData: [],
        activeName: 'first',
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            reserveSelection: true,
            label: '序号',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '物品编码',
            minWidth: 100
          },
          {
            prop: 'name',
            label: '物品名称',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'brandNum',
            label: '牌号',
            width: 70
          },
          {
            prop: 'modelType',
            label: '型号',
            minWidth: 130
          },
          {
            prop: 'ssxs',
            label: '收缩系数',
            width: 80
          },
          {
            prop: 'dmtxh',
            label: '大模体型号',
            width: 80
          },
          {
            prop: 'weightUnit',
            label: '物品类型',
            width: 80
          },

          {
            prop: 'productCategoryLevelName',
            label: '分类',
            width: 100
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ],
        datasource: []
      };
    },
    methods: {
      handleDel(row) {
        const index = this.datasource.indexOf(row);
        if (index !== -1) {
          this.datasource.splice(index, 1);
        }
      },
      addTableList(list) {
        this.datasource = list;
      },

      add() {
        const dialogParams = { title: '选择设备' };
        this.$refs.addTableRef.open(dialogParams, this.datasource);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .table {
    margin-top: 10px;
  }
</style>