kd-aiot-frontend/src/views/material/BOMmanage/components/detailedList.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <BOMSearch
        @search="reload"
        :statusOpt="statusOpt"
        :categoryCode="where.categoryCode"
      />
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :initLoad="false"
        class="dict-table"
        tool-class="ele-toolbar-actions"
      >
      
      <template v-slot:toolbar>
    
        <div class="toolbar_box">
                <div
                  ><span>基本数量</span>
                  <el-input placeholder="请输入" v-model.number="attributeData.baseCount">
                  </el-input>
                  <DictSelection dictName="计量单位" v-model="attributeData.unit"
                /></div>
              </div>
        </template>

        <!-- 表头工具栏 -->
        <template v-slot:action="{ row }">
          <el-switch
            :active-value="'1'"
            :inactive-value="'0'"
            @change="openBom(row, $event)"
            v-model="row.status"
          >
          </el-switch>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import BOMSearch from './BOM-search.vue';
  import { getBomPageCategoryId, startAndStop } from '@/api/material/BOM';

  export default {
    name: 'SystemDictionary',
    components: { BOMSearch },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: 'BOM编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: 'BOM名称',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '产品编码',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '产品名称',
            showOverflowTooltip: true
          },
          {
            prop: 'dosage',
            label: '用量',
            showOverflowTooltip: true
          },

          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true
          },
          {
            prop: 'versions',
            label: '版本'
          },
          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },
          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            showOverflowTooltip: true
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ],
        statusOpt: {
          '': '全部',
          0: '已停用',
          1: '已发布'
        },
        loading: false,
        loadingInstance: null,
        where: {},

        attrObj: {}
      };
    },
    mounted() {},
    props: {
      attributeData: {
        type: Object,
        default: {}
      }
    },

    watch: {
      attributeData(val) {
        this.attrObj = val;
        this.$refs.table.setData([]);
        this.$nextTick(() => {
          this.$refs.table.reload({
            pageNum: 1
          });
        });
      }
    },

    methods: {
      /* 启用关闭BOM */
      openBom(row, boolean) {
        this.loadingInstance = this.$loading({
          lock: true,
          text: boolean ? '启用中...' : '关闭中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        startAndStop({ id: row.id, status: row.status }).then(() => {
          this.$message.success('操作成功');
          this.loadingInstance.close();
        });
        setTimeout(() => {}, 2000);
      },
      /* 表格数据源 */
      datasource({ where, page, limit }) {
        if (!this.attrObj.id) {
          return false;
        }
        return getBomPageCategoryId({
          ...where,
          pageNum: page,
          size: limit,
          id: this.attrObj.id,
          bomType: this.attrObj.bomType
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    height: 100%;
    ::v-deep .el-card {
      height: 100%;
      .el-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;
        .dict-table {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            overflow-y: auto;
          }
        }
      }
    }
  }


  .toolbar_box {
    float: right;
    margin-right: 10px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      > span {
        width: 150px;
      }
      > div {
        margin-left: 10px;
      }
    }
  }
  
</style>