kd-aiot-frontend-eom/src/BIZComponents/cBom-list.vue

<template>
  <el-dialog
    title="选择"
    :visible.sync="cBomListDialogFlag"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="5vh"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <el-card shadow="never">
      <el-form
        size="small"
        label-width="60px"
        @keyup.enter.native="search"
        @submit.native.prevent
      >
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="编码">
              <el-input
                clearable
                size="small"
                v-model="where.code"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input
                clearable
                size="small"
                v-model="where.name"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="规格">
              <el-input
                clearable
                size="small"
                v-model="where.specification"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="search"
              >
                查询
              </el-button>

              <el-button
                @click="reset"
                icon="el-icon-refresh"
                class="ele-btn-icon"
                size="medium"
                >重置
              </el-button>
              <slot></slot>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <ele-pro-table
        ref="table"
        :need-page="false"
        :columns="cBomColumns"
        :datasource="datasource"
        v-loading="loading"
        row-key="id"
        height="calc(100vh - 480px)"
        class="dict-table"
        :selection.sync="selection"
      >
        <!-- 表头工具栏 -->
        <template v-slot:action="{ row }">
          <el-radio class="radio" v-model="radio" :label="row.code">
            <i></i>
          </el-radio>
        </template>
      </ele-pro-table>
    </el-card>

    <div slot="footer">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getCBomAPI } from '@/api/main';
  import {getInventoryTotalAPI} from "@/api/wms";

  export default {
    props: {
      /*是否需要获取仓库产品数量*/
      isGetInventoryTotal: {
        type: Boolean,
        default: false
      },
      /*已选择的产品*/
      currentRow: {
        type: Object,
        default: () => {}
      },
      cBomListDialogFlag: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        selection: [],
        datasource: [],
        oldDatasource: [],
        loading: false,
        where: {
          name: '',
          code: ''
        }
      };
    },
    watch: {},
    computed: {
      cBomColumns() {
        return [
          {
            label: '选择',
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'category.categoryLevelPath',
            label: '分类',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'category.brandNum',
            align: 'center',
            label: '牌号',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'dosage',
            label: '用量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'unit',
            label: '单位',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'versions',
            label: '版本',
            align: 'center',
            showOverflowTooltip: true
          }
        ];
      }
    },
    methods: {
      open(item) {
        this.getCBomDatasource();
      },
      /* 表格数据源 */
      async getCBomDatasource() {
        this.loading = true;
        this.datasource = await getCBomAPI({
          categoryId: this.currentRow?.id,
          bomType: 1,
          produceType: 2
        });
        this.oldDatasource = this.datasource;
        this.loading = false;
        /*
  * this.$util.toTreeData({
    data: list,
    idField: 'id',
    parentIdField: 'parentId'
  });*/
      },
      search() {
        //tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
        this.loading = true;
        this.loading = false;
        this.datasource = this.oldDatasource.filter((data) => {
          return (
            data.name.toLowerCase().includes(this.where.name.toLowerCase()) &&
            data.code.toLowerCase().includes(this.where.code.toLowerCase()) &&
            data.specification
              .toLowerCase()
              .includes(this.where.specification.toLowerCase())
          );
        });
      },
      /* 刷新表格 */
      reset() {
        this.where = {
          name: '',
          code: '',
          specification: ''
        };
        this.datasource = this.oldDatasource;
      },
      handleClose() {
        this.$emit('update:cBomListDialogFlag', false);
      },

      async selected() {
        if (!this.selection.length) {
          return this.$message.warning('请至少选择一条数据');
        }
        let codeList = [];
        let list = this.selection;
        //获取仓库库存
        if (this.isGetInventoryTotal) {
          codeList = list.map((item) => item.code);
          let inventoryTotalList = await getInventoryTotalAPI(codeList);
          list.forEach((item) => {
            let find =
              inventoryTotalList.find((key) => key.code == item.code) || {};
            item.availableCountBase = find.availableCountBase;
          });
        }
        this.$emit('changeParent', list);

        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
  }

  .table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }

  .pagination {
    text-align: right;
    padding: 10px 0;
  }

  .btns {
    text-align: center;
    padding: 10px 0;
  }

  .topsearch {
    margin-bottom: 15px;
  }
</style>