kd-aiot-frontend-eom/src/views/salesServiceManagement/components/AssetsDialog.vue

<template>
  <ele-modal
    :visible.sync="visible1"
    :close-on-click-modal="false"
    width="80%"
    append-to-body
    @close="visible1 = false"
    :maxable="true"
  >
    <el-form :model="searchForm" label-width="100px" @submit.native.prevent>
      <el-row v-if="fieldShow">
        <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-row>
        <el-row>
          <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-row>
      <el-row v-else>
        <el-row :gutter="10">
          <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
            <el-form-item label="编码">
              <el-input @keyup.enter.native="doSearch" clearable size="small" v-model="searchForm.code" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
            <el-form-item label="名称">
              <el-input @keyup.enter.native="doSearch" clearable size="small" v-model="searchForm.name" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
            <el-form-item label="型号">
              <el-input @keyup.enter.native="doSearch"  clearable size="small" v-model="searchForm.modelType" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { md: 6 } : { span: 4 }">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="doSearch"
              >查询</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-row :gutter="10">
          <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
            <el-form-item label="牌号">
              <el-input @keyup.enter.native="doSearch" clearable size="small" v-model="searchForm.brandNum" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
            <el-form-item label="规格">
              <el-input
              @keyup.enter.native="doSearch"
                clearable
                size="small"
                v-model="searchForm.specification"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
            <el-form-item label="关键字">
              <el-input @keyup.enter.native="doSearch" clearable size="small" v-model="searchForm.searchKey" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </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="25vh"
          border
          row-key="id"
          style="width: 100%"
          :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
          highlight-current-row
          @current-change="currentChange"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
            v-if="isAll"
          ></el-table-column>
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column
            prop="categoryCode"
            :label="!fieldShow?'编码':'物品编码'"
            min-width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="categoryName"
            width="200"
            :label="!fieldShow?'名称':'物品名称'"
            :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" v-if="fieldShow" label="计量数量" width="120"></el-table-column>
          <el-table-column prop="measureUnit" v-if="fieldShow" 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"
          v-if="isAll"
          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>
  </ele-modal>
</template>

<script>
import {
  getOutindetailtwoList,
  getBatchList,
  getMaterialList,
  getPackingList
} from '@/api/wms';
import AssetTree from './assetTree.vue';
import { getProductList } from '@/api/saleManage/quotation';
import { getWarehouseList } from '@/api/saleManage/saleorder';
// import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';

export default {
  components: { AssetTree },
  props: {
    treeIds: { type: Array, default: () => [] },
    isAll: {
      default: true
    }
  },
  computed: {
    // 物品字段
    fieldShow() {
      return this.dataSources == '0';
    },
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  data() {
    return {
      fullscreen: false,
      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: !this.fieldShow ? '编码' : '物品编码',
          align: 'center'
        },
        {
          prop: 'categoryName',
          // label: '物品名称',
          label: !this.fieldShow ? '名称' : '物品名称',
          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',
          show: this.dataSources == '0'
        },

        {
          prop: 'warehouseName',
          label: '仓库',
          align: 'center'
        }
      ],
      currentRow: {},
      dataSources: '0' // 0：仓库；1：主数据
    };
  },
  created() {
    getWarehouseList({}).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);
    },
    currentChange(val) {
      this.currentRow = val;
    },
    async warehouseData() {
      const res = await getProductList(this.searchForm);
      this.tableData = res.list.map((el) => {
        el.categoryModel = el.modelType;
        el.categoryName = el.name;
        el.categoryCode = el.code;
        return el;
      });
      this.total = res.count;
    },
    async changeDimension(e) {
      // 查询主数据
      if (this.dataSources == '1') {
        this.warehouseData();
        return;
      }
      this.dimension = e;
      if (this.dimension == 1) {
        // 物品维度
        const data = await getOutindetailtwoList(this.searchForm);
        this.tableData = data.list;
        this.total = data.count;
      } else if (this.dimension == 2) {
        // 批次维度
        const data = await getBatchList(this.searchForm);
        this.tableData = data.list;
        this.total = data.count;
      } else if (this.dimension == 4) {
        // 物料维度
        const data = await getMaterialList(this.searchForm);
        this.tableData = data.list;
        this.total = data.count;
      } else {
        // 包装维度
        const data = await getPackingList(this.searchForm);
        this.tableData = data.list;
        this.total = data.count;
      }
      console.log(this.tableData);
    },
    open(tableList, value) {
      this.dataSources = value || '0';
      console.log(value, 'value -- ==');
      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.isAll ? this.tableList : this.currentRow,
        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>