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

<template>
  <el-dialog
    :visible.sync="visible1"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="80vw"
  >
    <el-form :model="searchForm" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="仓库名称:">
            <el-select v-model="searchForm.warehouseId" style="width: 100%">
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option> </el-select
          ></el-form-item>
        </el-col>

        <el-col :span="6" style="height: 43px">
          <el-form-item label="列表维度:" prop="dimension">
            <template>
              <el-select
                style="width: 100%"
                @change="changeDimensionHandler"
                v-model="dimension"
                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
              style="width: 100%"
              type="text"
              placeholder="搜索物品编码"
              v-model="searchForm.categoryCode"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物品名称:">
            <el-input
              style="width: 100%"
              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">
          <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="牌号">
            <el-input
              type="text"
              placeholder="搜索牌号"
              v-model="searchForm.brandNum"
            ></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="[6]"
          @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"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
          >
          </el-table-column>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column
            prop="categoryCode"
            label="物品编码"
            min-width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="categoryName"
            width="200"
            label="物品名称"
            :show-overflow-tooltip="true"
          ></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
       
            label="出库数量"
            type="index"
            width="100"
          >
            <template slot-scope="{ row }">
              <el-input
                type="text"
                placeholder="请输入"
                v-model="row.outboundNum"
                @input="handleInput(row, $event)"
              ></el-input>
            </template>
          </el-table-column> -->
          <el-table-column
            v-if="dimension == 3"
            prop="batchNo"
            label="批次号"
            key="batchNo"
            min-width="80"
          ></el-table-column>
          <el-table-column prop="level" label="级别"></el-table-column>
          <el-table-column
            prop="measureQuantity"
            label="计量数量"
            width="120"
          ></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>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="tableList"
          :selection.sync="selection"
          row-key="id"
          height="20vh"
          :needPage="false"
        >
          <template v-slot:toolbar>
            <el-button type="primary" size="small" @click="add">添加</el-button>
            <el-button size="small" @click="del">移除</el-button></template
          >
        </ele-pro-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 AssetTree from './assetTree.vue';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';

  export default {
    components: { AssetTree },
    props: {
      treeIds: { type: Array, default: () => [] }
    },
    data() {
      return {
        isShowTable: true,
        qualityResultOption: [
          {
            value: 0,
            label: '合格'
          },
          {
            value: 1,
            label: '不合格'
          }
        ],
        qualityStatusOption: [
          {
            value: 1,
            label: '已质检'
          },
          {
            value: 0,
            label: '未质检'
          }
        ],
        visible1: false,
        tableData: [],
        total: 0,
        categoryLevelId: '',
        warehouseList: [],
        searchForm: {
          categoryCode: '',
          categoryName: '',
          batchNo: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          categoryLevelId: '',
          warehouseId: '',
          pageNum: 1,
          size: 20
        },
        selectionList: [],
        materialType: '',
        warehouseList: [],
        dimension: '1',
        selection: [],
        tableList: [],
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'categoryCode',
            label: '物品编码',
            align: 'center'
          },
          {
            prop: 'categoryName',
            label: '物品名称',
            align: 'center'
          },

          {
            prop: 'categoryModel',
            label: '型号',
            align: 'center'
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center'
          },
          {
            prop: 'level',
            label: '级别',
            align: 'center'
          },
          {
            prop: 'measureQuantity',
            label: '库存',
            align: 'center'
          },
          {
            prop: 'measureUnit',
            label: '计量单位',
            align: 'center'
          },

          {
            prop: 'warehouseName',
            label: '仓库',
            align: 'center'
          }
        ]
      };
    },
    created() {
      warehouseDefinition.list({}).then((res) => {
        this.warehouseList = res;
      });
    },
    methods: {
      getRowKeys(row) {
        return row.id;
      },

      // 切换维度
      changeDimensionHandler(e) {
        this.searchForm.pageNum = 1;
        this.selectionList = [];
        this.$refs.multipleTable.clearSelection();
        this.changeDimension(e);
      },
      async changeDimension(e) {
        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 data = await storageApi.getBatchList(this.searchForm);
          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 data = await storageApi.getPackingList(this.searchForm);
          this.tableData = data.list;
          this.total = data.count;
        }
        console.log(this.tableData);
      },
      open(tableList) {
        this.visible1 = true;
        this.tableList = JSON.parse(JSON.stringify(tableList));
        this.$nextTick(() => {
          console.log(this.$refs, 'this.$refs.treeList');
          this.$refs.treeList.getTreeData().then((data) => {
            this.handleNodeClick(data);
          });
        });
      },
      async confirm() {
        this.$emit('choose', this.tableList, this.dimension);
        this.cancel();
      },
      async add() {
        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;
        //   }
        // }
        // let data = null;
        // if (this.dimension != 1) {
        //   data = await storageApi.getHierarchyList({
        //     ids: this.selectionList.map((item) => item.id).join(','),
        //     type: this.dimension
        //   });
        // } else {
        //   data = await storageApi.getHierarchyFifo({
        //     type: this.dimension,
        //     builders: this.selectionList.map((item) => {
        //       return {
        //         categoryId: item.categoryId,
        //         num: item.outboundNum || item.measureQuantity
        //       };
        //     })
        //   });
        // }

        this.selectionList = this.selectionList.filter((item) => {
          if (item.warehouseList.length > 0) {
            item['warehouseId'] = item.warehouseList[0].warehouse_id;
            item['warehouseName'] = item.warehouseList[0].warehouse_name;
          }
          return !this.tableList
            .map((item) => item.categoryCode)
            .includes(item.categoryCode);
        });
        this.tableList.push(...this.selectionList);
      },
      del() {
        let ids = this.selection.map((item) => item.id);
        this.tableList = this.tableList.filter(
          (item) => !ids.includes(item.id)
        );
      },
      cancel() {
        this.selectionList = [];
        this.$refs.multipleTable.clearSelection();
        this.visible1 = 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: '',
          brandNum: '',
          engrave: '',
          barcodes: '',
          categoryLevelId: this.categoryLevelId,
          pageNum: 1,
          warehouseId: '',
          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;
  }
</style>