kd-aiot-frontend-wt/src/views/bpm/outgoingManagement/components/AssetsDialog.vue

<template>
  <el-dialog
    :visible.sync="visible"
    title="物品信息"
    width="80vw"
    :append-to-body="true"
  >
    <el-form :model="searchForm" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="列表维度:" prop="dimension">
            <template>
              <el-select
                style="width: 100%"
                @change="changeDimensionHandler"
                v-model="dimension"
                :disabled="bizType === 10 && !hasMixedReturnSources()"
                placeholder="请选择"
              >
                <!-- <el-option label="物料维度" value="4"> </el-option> -->
                <el-option label="包装维度" value="3"> </el-option>
                <el-option label="批次维度" value="2"> </el-option>
                <el-option label="物品维度" value="1"> </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字:">
            <el-input
              type="text"
              placeholder="请输入关键字"
              v-model="searchForm.keyWord"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物品编码:">
            <el-input
              type="text"
              placeholder="搜索物品编码"
              v-model="searchForm.categoryCode"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物品名称:">
            <el-input
              type="text"
              placeholder="搜索物品名称"
              v-model="searchForm.categoryName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="批次号:">
            <el-input
              type="text"
              placeholder="搜索批次号"
              v-model="searchForm.batchNo"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="dimension != 1">
          <el-form-item label="系统批次:">
            <el-input
              clearable
              type="text"
              placeholder="请输入完整系统内部批次号"
              v-model.trim="searchForm.systemBatchNo"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="刻码">
            <el-input
              type="text"
              placeholder="搜索物品刻码"
              v-model="searchForm.engrave"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发货码">
            <el-input
              type="text"
              placeholder="搜索发货码"
              v-model="searchForm.barcodes"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属工厂" prop="factoryId">
            <el-select
              filterable
              placeholder="请选择"
              v-model="searchForm.factoryId"
              clearable
              class="w100"
              @change="getWarehouseListHandle"
            >
              <el-option
                v-for="item in factoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="仓库">
            <el-select
              clearable
              style="width: 100%"
              v-model="searchForm.warehouseId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in warehouseList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="牌号">
            <el-input
              type="text"
              placeholder="搜索牌号"
              v-model="searchForm.brandNum"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="颜色">
            <el-input
              type="text"
              placeholder="搜索颜色"
              v-model="searchForm.colorKey"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col style="text-align: right">
          <el-button type="primary" @click="doSearch">搜索</el-button>
          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-container class="assets-dialog">
      <el-aside width="200px" class="wrapper-assets">
        <AssetTree
          ref="treeList"
          :treeIds="treeIds"
          @handleNodeClick="handleNodeClick"
        />
      </el-aside>
      <el-main>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          height="50vh"
          border
          row-key="id"
          style="width: 100%"
          :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
          @selection-change="handleSelectionChange"
          :key="productLists.length"
        >
          <el-table-column
            v-if="dimension == 1"
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
            fixed="left"
            :selectable="
              (row) => {
                return (
                  !this.productLists.some(
                    (it) => it.categoryId == row.categoryId
                  ) && this.getAvailableQuantity(row) > 0
                );
              }
            "
          >
          </el-table-column>
          <el-table-column
            v-else-if="dimension != 1"
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
            fixed="left"
            :selectable="(row) => this.canSelectBatch(row)"
          >
          </el-table-column>
          <el-table-column label="序号" type="index" width="50" fixed="left">
          </el-table-column>
          <el-table-column
            prop="categoryCode"
            label="物品编码"
            min-width="120"
            fixed="left"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="categoryName"
            width="200"
            label="物品名称"
            fixed="left"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="dimension != 4"
            label="出库数量"
            type="index"
            width="100"
          >
            <template slot-scope="{ row }">
              <el-input
                type="text"
                placeholder="请输入"
                v-model="row.outboundNum"
                @input="handleInput(row, $event)"
                :class="{ password: errorVerify(row) }"
                :disabled="dimension == '3'"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="brandNum"
            label="牌号"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="categoryModel"
            label="型号"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="specification"
            label="规格"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="colorKey"
            label="颜色"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <template v-if="dimension == 1">
            <el-table-column
              v-for="(item, index) in newColumns"
              :label="item.label"
              :align="item.align"
              :prop="item.prop"
              :show-overflow-tooltip="item.showOverflowTooltip"
            ></el-table-column>
          </template>
          <el-table-column
            v-else
            prop="batchNo"
            key="batchNo"
            label="批次号"
            min-width="80"
          ></el-table-column>
          <el-table-column
            v-if="dimension != 1"
            prop="systemBatchNo"
            label="系统内部批次号"
            min-width="180"
            :formatter="formatSystemBatchNo"
          ></el-table-column>
          <el-table-column prop="level" label="级别"></el-table-column>
          <el-table-column
            v-if="dimension != 1"
            prop="inventoryCycle"
            label="存货周期(天)"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="measureQuantity"
            label="计量数量"
            width="120"
            :formatter="formatMeasureQuantity"
          ></el-table-column>
          <el-table-column
            prop="measureUnit"
            label="计量单位"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="weight"
            label="重量"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="weightUnit"
            label="重量单位"
            min-width="120"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3"
            prop="packageNo"
            label="包装编码"
            min-width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3"
            prop="packingQuantity"
            label="包装数量"
            min-width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3"
            prop="packingUnit"
            label="单位"
            min-width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3 || dimension == 4"
            label="发货条码"
            prop="barcodes"
            width="80"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 4"
            prop="no"
            label="物料编码"
            min-width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3 || dimension == 4"
            prop="materielDesignation"
            label="物料代号"
            min-width="100"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3 || dimension == 4"
            prop="clientCode"
            label="客户代号"
            min-width="100"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3 || dimension == 4"
            prop="engrave"
            label="刻码"
            min-width="120"
          ></el-table-column>
          <el-table-column
            v-if="dimension == 3 || dimension == 4"
            prop="warehouseName"
            label="仓库"
            min-width="200"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="supplierName"
            label="供应商"
            min-width="200"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="supplierCode"
            label="供应商代号"
            min-width="200"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
        <div style="text-align: right; padding: 10px">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[5, 10, 20, 50]"
            :page-size.sync="searchForm.size"
            :current-page.sync="searchForm.pageNum"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>

    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import storageApi from '@/api/warehouseManagement';
  import { getWarehouseList } from '@/api/bpm/components/wms';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';

  import AssetTree from '../../stockManagement/components/assetTree.vue';
  import { getDetailById, quantityDelivery } from '@/api/classifyManage';
  import { forEach } from 'lodash';
  export default {
    components: { AssetTree },
    props: {
      treeIds: { type: Array, default: () => [] },
      returnProductList: { type: Array, default: () => [] },
      bizType: { type: Number, default: null }
    },
    data() {
      return {
        newColumns: [], // 动态表头
        isShowTable: true,
        qualityResultOption: [
          {
            value: 0,
            label: '合格'
          },
          {
            value: 1,
            label: '不合格'
          }
        ],
        qualityStatusOption: [
          {
            value: 1,
            label: '已质检'
          },
          {
            value: 0,
            label: '未质检'
          }
        ],
        visible: false,
        tableData: [],
        total: 0,
        categoryLevelId: '',
        searchForm: {
          keyWord: '',
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          systemBatchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          batchNo: '',
          categoryLevelId: '',
          pageNum: 1,
          size: 20,
          factoryId: '',
          warehouseId: ''
        },
        selectionList: [],
        materialType: '',
        dimension: '1',
        productLists: [],
        warehouseList: [],
        allWarehouseList: [],
        factoryList: []
      };
    },
    created() {
      this.getFieldModel();
      this.getFactoryList();
      this.getWarehouse()
    },
    watch: {
      tableData(val) {
        this.doLayout();
      }
    },
    methods: {
      //获取工厂列表
      formatSystemBatchNo(row) {
        return row.systemBatchNo || '-';
      },
      // 批次入库数量不会随出库变化，发货选择必须使用当前库存余额扣除锁定量。
      getAvailableQuantity(row) {
        const inventoryBalance =
          Number(
            this.dimension == 2 ? row.availableCountBase : row.measureQuantity
          ) || 0;
        const lockQuantity = Number(row.lockQuantity) || 0;
        return Math.max(
          0,
          Math.round((inventoryBalance - lockQuantity) * 100) / 100
        );
      },
      canSelectBatch(row) {
        if (this.bizType !== 10) {
          return (
            !this.productLists.some((item) => item.id == row.id) &&
            this.getAvailableQuantity(row) > 0
          );
        }
        if (this.dimension == 3) {
          return this.returnPackages().some((source) => this.matchesReturnPackage(source, row))
            && this.getAvailableQuantity(row) > 0
            && !this.productLists.some((item) => (item.outInDetailRecordRequestList || [])
              .some((record) => record.packageNo === row.packageNo));
        }
        const source = this.returnProductList.find((item) =>
          !(item.packageSources || []).length && this.matchesReturnProduct(item, row));
        return !!source && this.getAvailableQuantity(row) > 0;
      },
      hasMixedReturnSources() {
        return this.returnPackages().length > 0 && this.returnProductList.some(
          (product) => !(product.packageSources || []).length
        );
      },
      returnPackages() {
        return this.returnProductList.flatMap((product) =>
          (product.packageSources || []).map((source) => ({ ...source, product }))
        );
      },
      matchesReturnPackage(source, row) {
        return String(source.packageNo) === String(row.packageNo)
          && String(source.product.productId) === String(row.categoryId)
          && String(source.product.receiveProductId) === String(row.sourceReceiveProductId)
          && String(source.product.warehouseId) === String(row.warehouseId)
          && String(source.product.batchNo || '') === String(row.batchNo || '')
          && String(source.product.systemBatchNo || '') === String(row.systemBatchNo || '');
      },
      matchesReturnProduct(product, row) {
        return String(product.productId) === String(row.categoryId)
          && String(product.receiveProductId) === String(row.sourceReceiveProductId)
          && String(product.warehouseId) === String(row.warehouseId)
          && String(product.batchNo || '') === String(row.batchNo || '')
          && String(product.systemBatchNo || '') === String(row.systemBatchNo || '');
      },
      formatMeasureQuantity(row) {
        return this.dimension == 2
          ? this.getAvailableQuantity(row)
          : row.measureQuantity;
      },
      async getFactoryList() {
        const res = await warehouseDefinition.getFactoryarea({
          pageNum: 1,
          size: 9999,
          type: 1
        });
        this.factoryList = res.list;
      },

      async getWarehouse() {
        const { data } = await getWarehouseList();
        this.allWarehouseList = data;
      },

      getWarehouseListHandle(val) {
        this.searchForm.warehouseId = '';
        this.warehouseList = this.allWarehouseList.filter(
          (item) => item.factoryId === val
        );
      },

      errorVerify(row) {
        return (
          !row.outboundNu &&
          this.selectionList.some((item) => item.id == row.id)
        );
      },
      doLayout() {
        let that = this;
        this.$nextTick(() => {
          that.$refs.multipleTable.doLayout();
        });
      },
      // 获取动态表头
      getFieldModel() {
        storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });
          this.newColumns = [...newRes];
        });
      },
      // 出库数量限制
      handleInput(row, value) {
        const availableQuantity = this.getAvailableQuantity(row);
        if (row.outboundNum <= availableQuantity) {
          // return (row.outboundNum = value.replace(/^(0+)|[^\d]+/g, ''));

          // 过滤掉非数字和小数点的字符
          const filteredValue = value.replace(/[^0-9.]/g, '');
          // 限制只能有一个小数点
          const singleDotValue = filteredValue.replace(/(\..*)\./g, '$1');

          let finalValue = '';
          const dotIndex = singleDotValue.indexOf('.');
          if (dotIndex !== -1) {
            // 截取小数点后最多两位
            finalValue = singleDotValue.slice(0, dotIndex + 3);
          } else {
            finalValue = singleDotValue;
          }
          return (row.outboundNum = finalValue);
        } else {
          row.outboundNum = availableQuantity;
        }
      },
      // 切换维度
      changeDimensionHandler(e) {
        this.searchForm.pageNum = 1;
        this.selectionList = [];
        this.$refs.multipleTable.clearSelection();
        this.changeDimension(e);
      },
      async changeDimension(e) {
        console.log('changeDimension');
        this.dimension = e;
        if (this.dimension == 1) {
          // 物品维度
          const data = await storageApi.getProductList(this.searchForm);
          this.tableData = data.list;
          this.total = data.count;
        } else if (this.dimension == 2) {
          // 批次维度
          const legacyProducts = this.returnProductList.filter((item) => !(item.packageSources || []).length);
          const receiveProductIds = legacyProducts.map((item) => item.receiveProductId).filter(Boolean);
          if (this.bizType === 10 && receiveProductIds.length !== legacyProducts.length) {
            this.tableData = [];
            this.total = 0;
            this.$message.error('退货产品缺少采购收货明细，无法查询不良库存');
            return;
          }
          const params = this.bizType === 10
            ? { ...this.searchForm, sourceReceiveProductIds: receiveProductIds.join(','), result: 2 }
            : this.searchForm;
          const data = await storageApi.getBatchList(params);
          for (let i = 0; i < data.list.length; i++) {
            data.list[i].outboundNum = this.getAvailableQuantity(data.list[i]);
          }
          this.tableData = data.list;
          this.total = data.count;
        } else if (this.dimension == 4) {
          // 物料维度
          const data = await storageApi.getMaterialList(this.searchForm);
          this.tableData = data.list;
          this.total = data.count;
        } else {
          // 包装维度
          const packageSources = this.returnPackages();
          const params = this.bizType === 10
            ? { ...this.searchForm,
                ...(packageSources.length ? {
                  packageNos: [...new Set(packageSources.map((source) => source.packageNo))].join(','),
                  sourceReceiveProductIds: [...new Set(packageSources.map((source) => source.product.receiveProductId))].join(',')
                } : {}),
                result: 2 }
            : this.searchForm;
          const data = await storageApi.getPackingList(params);
          for (let i = 0; i < data.list.length; i++) {
            data.list[i].outboundNum = data.list[i].measureQuantity;
          }
          this.tableData = data.list;
          this.total = data.count;
        }
        this.updateProductOutboundNums(this.tableData);
      },
      updateProductOutboundNums(list) {
        console.log(this.productLists, 'this.productLists');

        if (this.dimension == 1) {
          //物品层
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            const matchedProduct = this.productLists.find((product) => {
              const isMatch = product.categoryId === item.categoryId;
              return isMatch;
            });

            if (matchedProduct) {
              this.$set(item, 'outboundNum', matchedProduct.measureQuantity);
            }
            const isSelection = this.selectionList.find(
              (product) => product.categoryId === item.categoryId
            );
            if (isSelection) {
              this.$set(item, 'outboundNum', isSelection.outboundNum);
            }
          }
        } else {
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            if (this.dimension == 2 && this.bizType === 10) {
              const returnProduct = this.returnProductList.find((product) => this.matchesReturnProduct(product, item));
              if (returnProduct) {
                this.$set(
                  item,
                  'outboundNum',
                  Math.min(
                    Number(returnProduct.totalCount) || 0,
                    this.getAvailableQuantity(item)
                  )
                );
                continue;
              }
            }
            const matchedProduct = this.productLists.find((product) => {
              const isMatch = product.id === item.id;
              return isMatch;
            });

            if (matchedProduct) {
              this.$set(item, 'outboundNum', matchedProduct.measureQuantity);
            }
            const isSelection = this.selectionList.find(
              (product) => product.id === item.id
            );
            if (isSelection) {
              this.$set(item, 'outboundNum', isSelection.outboundNum);
            }
          }
        }
      },
      open(val) {
        this.productLists = val || [];
        if (this.bizType === 10) {
          this.dimension = this.returnPackages().length ? '3' : '2';
        }
        this.visible = true;
        this.$nextTick(() => {
          this.$refs.treeList.getTreeData().then(async (data) => {
            await this.handleNodeClick(data);
          });
        });
      },
      async confirm() {
        if (!this.selectionList.length) {
          this.$message.error('请至少选择一条数据！');
          return;
        }
        if (this.dimension == 1) {
          let boolen = this.selectionList.every((item) => item.outboundNum > 0);
          if (!boolen) {
            this.$message.error('请输入出库数量！');
            return;
          }
        }
        if (this.bizType === 10) {
          if (!this.hasMixedReturnSources() && this.dimension != (this.returnPackages().length ? 3 : 2)) {
            this.$message.error('采购退货库存选择维度不正确！');
            return;
          }
          const invalidBatch = this.selectionList.some((item) =>
            this.dimension == 3
              ? !this.returnPackages().some((source) => this.matchesReturnPackage(source, item))
              : !this.returnProductList.some((source) =>
                  !(source.packageSources || []).length && this.matchesReturnProduct(source, item)));
          if (invalidBatch) {
            this.$message.error('所选批次与采购退货来源批次不一致！');
            return;
          }
          const exceededReturn = this.dimension == 3
            ? this.selectionList.some((item) => {
                const quantity = this.returnPackages()
                  .filter((source) => this.matchesReturnPackage(source, item))
                  .reduce((sum, source) => sum + Number(source.measureQuantity || 0), 0);
                return quantity <= 0 || quantity > this.getAvailableQuantity(item);
              })
            : this.selectionList.some((item) => {
            const source = this.returnProductList.find((product) =>
              !(product.packageSources || []).length && this.matchesReturnProduct(product, item));
            return (
              !source ||
              Number(item.outboundNum) <= 0 ||
              Number(item.outboundNum) > Number(source.totalCount) ||
              Number(item.outboundNum) > this.getAvailableQuantity(item)
            );
          });
          if (exceededReturn) {
            this.$message.error('出库数量不能超过采购退货数量！');
            return;
          }
        }
        console.log(this.selectionList);
        let data = null;
        if (this.dimension == 3) {
          data = await storageApi.getHierarchyList({
            ids: this.selectionList.map((item) => item.id).join(','),
            type: this.dimension,
            result: this.bizType === 10 ? 2 : null
          });
          if (this.bizType === 10) {
            data.forEach((detail) => {
              detail.outInDetailRecordRequestList.forEach((record) => {
                const sources = this.returnPackages().filter((source) =>
                  this.matchesReturnPackage(source, { ...detail, ...record,
                    sourceReceiveProductId: detail.sourceReceiveProductId }));
                const quantity = sources.reduce((sum, source) => sum + Number(source.measureQuantity || 0), 0);
                const originalQuantity = Number(record.measureQuantity);
                record.measureQuantity = quantity;
                record.weight = originalQuantity > 0
                  ? Number(record.weight || 0) * quantity / originalQuantity
                  : 0;
              });
              detail.measureQuantity = detail.outInDetailRecordRequestList
                .reduce((sum, record) => sum + Number(record.measureQuantity), 0);
              detail.weight = detail.outInDetailRecordRequestList
                .reduce((sum, record) => sum + Number(record.weight || 0), 0);
            });
          }
        } else if (this.dimension == 2) {
          const returnProducts = this.returnProductList;
          data = await storageApi.getHierarchyFifo({
            type: this.dimension,
            result: this.bizType === 10 ? 2 : null,
            ids: this.selectionList.map((item) => item.id),
            builders: this.selectionList.map((item) => {
              return {
                categoryId: item.categoryId,
                batchNo: item.batchNo,
                // 历史数据保持空值，由后端按外部批次号兼容匹配
                systemBatchNo: item.systemBatchNo || '',
                warehouseId: item.warehouseId,
                num:
                  this.bizType === 10
                    ? Math.min(
                        Number(item.outboundNum),
                        Number(
                          returnProducts.find((product) =>
                            !(product.packageSources || []).length && this.matchesReturnProduct(product, item))?.totalCount || 0
                        )
                      )
                    : item.outboundNum,
                id: item.id
              };
            })
          });
        } else if (this.dimension == 1) {
          data = await storageApi.getHierarchyFifo({
            type: this.dimension,
            builders: this.selectionList.map((item) => {
              return {
                categoryId: item.categoryId,
                num: item.outboundNum
              };
            })
          });
        }
        console.log('data-------------------', data);
        this.$emit('detailData', data, this.dimension);
        this.cancel();
      },
      cancel() {
        this.selectionList = [];
        this.$refs.multipleTable.clearSelection();
        this.visible = false;
      },
      handleSelectionChange(val) {
        this.selectionList = val;
      },
      handleNodeClick(data) {
        console.log(data);
        this.categoryLevelId = data.id;
        this.searchForm.categoryLevelId = data.id;
        this.doSearch();
      },
      handleCurrentChange() {
        this.changeDimension(this.dimension);
      },
      reset() {
        this.searchForm = {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          systemBatchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          batchNo: '',
          categoryLevelId: this.categoryLevelId,
          pageNum: 1,
          size: 20
        };
        this.doSearch();
      },
      doSearch() {
        this.searchForm.pageNum = 1;
        this.changeDimension(this.dimension);
      },
      handleSizeChange() {
        this.searchForm.pageNum = 1;
        this.changeDimension(this.dimension, 'page');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper {
    ::v-deep .el-aside {
      background-color: #fff !important;
      border: 1px solid #ccc;
    }
  }

  .wrapper-assets {
    max-height: 53vh;
    overflow: auto;
  }

  ::v-deep .password .el-input__inner {
    border-color: red !important;
  }
</style>