kd-aiot-frontend/src/views/material/product/components/index-data.vue

<template>
  <div>
    <!-- 数据表格 -->
    <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :need-page="true" :selection.sync="selection"
      height="calc(100vh - 412px)" full-height="calc(100vh - 116px)" tool-class="ele-toolbar-form"
      cache-key="systemDictDataTable">
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit({}, 2)">
          新建
        </el-button>
      </template>
      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" icon="el-icon-copy-document" @click="openEdit(row, 1)">
          复制
        </el-link>
        <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row, 0)">
          修改
        </el-link>
        <el-popconfirm class="ele-action" title="确定要删除此物料吗？" @confirm="remove(row)">
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>


        <el-link v-if="row.isProduct == 1" type="primary" :underline="false" @click="openMaterial(row)">
          物料BOM
        </el-link>


      </template>
    </ele-pro-table>
    <!-- 编辑弹窗 -->
    <!--    <dict-edit :visible.sync="showEdit" :id="id" @done="reload" /> -->

    <!-- 选择物料 -->
    <MaterialModal :visible.sync="materialEdit" :data="current" ref="materialRefs"></MaterialModal>
  </div>
</template>

<script>
import { getMaterialList, removeMaterial } from '@/api/material/manage.js';
import MaterialModal from './MaterialModal.vue'
export default {
  components: {
    MaterialModal
  },
  props: {
    // 物料组id
    currentId: [Number, String],
    data: Object,
    rootId: [Number, String],
  },
  data() {
    return {
      // 表格列配置
      columns: [
        {
          columnKey: 'index',
          type: 'index',
          width: 50,
          align: 'center',
          showOverflowTooltip: true,
          label: '序号'
        },
        {
          prop: 'code',
          label: '编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'name',
          label: '名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          prop: 'brandNum',
          align: 'center',
          label: '牌号',
          showOverflowTooltip: true
        },
        {
          prop: 'modelType',
          label: '型号',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'specification',
          label: '规格',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'measuringUnit',
          label: '计量单位',
          showOverflowTooltip: true,
          minWidth: 90
        },

        {
          prop: 'weightUnit',
          label: '重量单位',
          showOverflowTooltip: true,
          minWidth: 90
        },

        {
          prop: 'roughWeight',
          label: '毛重',
          showOverflowTooltip: true,
          minWidth: 90
        },

        {
          prop: 'netWeight',
          label: '净重',
          showOverflowTooltip: true,
          minWidth: 90
        },


        {
          prop: 'packingUnit',
          align: 'center',
          label: '包装单位',
          showOverflowTooltip: true
        },
        {
          prop: 'categoryLevelPath',
          label: '分类',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: 'right'
        }
      ],

      // 表格选中数据
      selection: [],
      // 是否显示编辑弹窗
      showEdit: false,
      id: null,

      materialEdit: false,
      current: null,
    };
  },

  methods: {
    /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      return getMaterialList({
        pageNum: page,
        size: limit,
        ...where,
        categoryLevelId: this.currentId
      });
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({
        page: 1,
        where: where,
        categoryLevelId: this.currentId
      });
    },
    /* 显示编辑 */
    openEdit(row, status) {
      this.$router.push({
        path: '/material/product/detail',
        query: {
          id: row.id ? row.id : null,
          status: status,
          rootId: this.rootId
        }
      });
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      removeMaterial(row.id)
        .then((msg) => {
          loading.close();
          this.$message.success('删除' + msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          // this.$message.error(e.message);
        });
    },


    openMaterial(row) {
      this.current = row;
      this.materialEdit = true;
      this.$refs.materialRefs.$refs.form &&
        this.$refs.materialRefs.$refs.form.clearValidate();
    }



  },
  watch: {
    // 监听物料组id变化
    currentId() {
      this.reload();
    }
  }
};
</script>