crmeb/admin/src/views/ck/ckoutbound/components/StockChoose/index.vue

<template>
  <div style="display: flex;flex-direction: column;" v-loading="loading">


    <el-row :gutter="6" type="flex" align="middle">
      <el-col :span="1.5">
        <label >备案号</label>
      </el-col>
      <el-col :span="4">
        <el-input v-model="searchGdsSeqno" placeholder="请输入备案号" id="gdsSeqno"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getList">查询</el-button>
      </el-col>

    </el-row>


    <el-table ref="table" style="flex: 1;" height="70vh" :data="list" @select="select" @select-all="selectAll"
      @selection-change="selectionChange" @current-change="handleCurrentChange" highlight-current-row border stripe>

      <el-table-column type="selection" width="55" align="center" :selectable="selectable" />

      <el-table-column type="expand" label="更多">
        <template slot-scope="scope">
          <el-descriptions class="desc-table" size="mini" :column="5" border>
            <el-descriptions-item label="仓库名称">
              {{scope.row.stockName}}/{{scope.row.shelfName}}/{{scope.row.locationName}}
            </el-descriptions-item>
            <el-descriptions-item label="HS编号">{{ scope.row.hsCode }}</el-descriptions-item>
            <el-descriptions-item label="自然序号">{{ scope.row.cargoNumber }}</el-descriptions-item>
            <el-descriptions-item label="商品料号">{{ scope.row.itemNumber }}</el-descriptions-item>
            <el-descriptions-item label="电子账册项号">{{ scope.row.bookNumber }}</el-descriptions-item>
            <el-descriptions-item label="报关单号">{{ scope.row.customsNo }}</el-descriptions-item>
            <el-descriptions-item label="核注清单号">{{ scope.row.listNumber }}</el-descriptions-item>
            <el-descriptions-item label="有效期至">{{ scope.row.expiryDate }}</el-descriptions-item>
            <el-descriptions-item label="规格类型品质">{{ scope.row.cargoSpec }}</el-descriptions-item>
            <el-descriptions-item label="原产国">{{ scope.row.originCountry }}</el-descriptions-item>
            <el-descriptions-item label="备案号">{{ scope.row.gdsSeqno }}</el-descriptions-item>


          </el-descriptions>
        </template>
      </el-table-column>

      <el-table-column label="单据编号" prop="billNumber">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.billNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column label="货物" prop="cargoName">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="仓库" prop="stockName">
        <template slot-scope="scope">
          <div class="nomal-text">
            {{scope.row.stockName}}/{{scope.row.shelfName}}/{{scope.row.locationName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="件数" prop="cargoNum">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoNum }}</div>
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="cargoWt">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoWt }}</div>
        </template>
      </el-table-column>
      <el-table-column label="体积" prop="cargoVol">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoVol }}</div>
        </template>
      </el-table-column>
      <el-table-column label="价值" prop="cargoValue">
        <template slot-scope="scope">
          <div class="nomal-text">{{ scope.row.cargoValue }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="stock-btns">
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-button type="primary" @click="save">确认</el-button>
    </div>
  </div>
</template>

<script>
import { listCkstock } from "@/api/ckcargostock";
import WarehouseName from '@/components/WarehouseName';

export default {
  name: 'StockChoose',
  components: {
    WarehouseName,
  },
  props: {
    custId: {
      type: String | Number,
      default: ''
    },
    disableItems: {
      type: Array,
      default() {
        return [];
      }
    },
    single: {
      type: Boolean,
      default: false,
    },
    singleItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      list: [],
      selectedList: [],
      loading: false,
      searchGdsSeqno: '',
    }
  },
  watch: {
    custId() {
      this.getList();
    }
  },
  created() {
    this.getList();
  },
  methods: {
    selectable(row, index) {
      if (this.disableItems && this.disableItems.length) {
        return !this.disableItems.some(val => val.outBillNumber === row.billNumber && val.outStockId === row.stockId && val.cargoId === row.cargoId);
      }
      return true;
    },

    // 点击全选
    selectAll(selection) {
      if (this.single) {
        // 单选时多选框取消选中
        this.$refs.table.clearSelection();
      }
    },
    select(selection, row) {
      if (this.single) {
        // 单选时取消选中所有再选中
        this.$nextTick(() => {
          this.$refs.table.clearSelection();
          this.$nextTick(() => {
            this.$refs.table.toggleRowSelection(row);
          });
        });

      }
    },
    // 选中项变化
    selectionChange(sel) {
      console.log('选中项变化', sel);
      if (sel.length === 0) {
        // 清空选中
        this.$refs.table.setCurrentRow();
      }
      this.selectedList = sel;
    },
    // 当前选中某一项
    handleCurrentChange(currentRow) {
      if (this.single) {
        // 单选时取消选中所有再选中
        this.$nextTick(() => {
          this.$refs.table.clearSelection();
          this.$nextTick(() => {
            if (currentRow) {
              this.$refs.table.toggleRowSelection(currentRow);
            }
          });
        });
      }

    },
    save() {
      this.$emit('confirm', this.selectedList);
    },
    getList() {
      this.list = [];
      if (!this.custId) return;
      this.loading = true;
      listCkstock({
        custId: this.custId,
        gdsSeqno: this.searchGdsSeqno,
      }).then(res => {
        this.loading = false;
        this.list = res || [];
        if (this.singleItem.stockId) {
          const findex = this.list.findIndex(val => val.billNumber === this.singleItem.billNumber && val.stockId === this.singleItem.stockId && val.cargoId === this.singleItem.cargoId);
          if (findex > -1) {
            this.$nextTick(() => {
              this.$refs.table.toggleRowSelection(this.list[findex]);
            });
          }
        }
        this.$emit('updateList', this.list);
      }).catch(e => {
        this.loading = false;
      });
    }
  }
}
</script>

<style scoped>
.stock-btns {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}

.nomal-text {
  padding: 8px 10px;
}

.desc-table {
  padding: 5px;
}

/* ::v-deep .el-table td.el-table__cell {
  padding: 10px;
}

::v-deep .el-table--border .el-table__cell {
  padding: 10px;
}

::v-deep .el-table .cell {
  padding: 10px;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px;
} */</style>