lanan-system-vue/src/views/repair/stockOperate/Components/SoTable.vue

<template>
  <el-table v-loading="loading"
            :data="list"
            :stripe="true"
            :show-overflow-tooltip="true"
            show-summary
            :summary-method="getSummaries"
            :key="randomKey"
            @cell-dblclick="editData"
  >
    <el-table-column label="序号" align="center">
      <template scope="scope">
        <span>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" align="center" prop="name" width="200"/>
    <el-table-column label="规格" align="center" width="180" prop="model"/>
    <el-table-column label="商品编码" align="center" width="180" prop="code"/>
    <el-table-column label="仓库" align="center" width="150" prop="warehouse"/>
    <el-table-column label="库存" align="center" width="150" prop="stock"/>
    <el-table-column label="单位" align="center" width="150" prop="unit"/>
    <el-table-column label="数量" align="center" width="150" prop="count">
      <template slot-scope="scope">
        <el-input v-if="scope.row[scope.column.property + 'isShow']"
                  :ref="scope.column.property"
                  v-model="scope.row.count"
                  @blur="alterData(scope.row,scope.column)"></el-input>
        <span v-else>{{ scope.row.count }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="soByType ? '上次进价' : '成本'" align="center" width="150" prop="price"/>
    <el-table-column v-if="soByType" label="采购单价" align="center" width="150" prop="newPrice">
      <template slot-scope="scope">
        <el-input v-if="scope.row[scope.column.property + 'isShow']"
                  :ref="scope.column.property"
                  v-model="scope.row.newPrice"
                  @blur="alterData(scope.row,scope.column)"></el-input>
        <span v-else>{{ scope.row.newPrice }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="soByType ? '采购金额' : '合计'" align="center" width="150" prop="totalPrice"/>
    <el-table-column label="备注" align="center" width="180" prop="remark">
      <template slot-scope="scope">
        <el-input v-if="scope.row[scope.column.property + 'isShow']"
                  :ref="scope.column.property"
                  v-model="scope.row.remark"
                  @blur="alterData(scope.row,scope.column)"></el-input>
        <span v-else>{{ scope.row.remark }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" align="center" width="150">
      <template v-slot="scope">
        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteItem(scope.$index)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "SoTable",
  props: {
    soByType: {
      type: Boolean,
      defaultValue: true,
      required: true
    },
    partList: {
      type: Array,
      defaultValue: false,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      includeColumn: ['count', 'totalPrice'],
      randomKey: Math.random(),
    }
  },
  watch: {
    partList(val) {
      const data = val[val.length - 1]
      const newData = {
        ...data,
        count: 1,
        totalPrice: data.price * 1,
        remark: '',
        newPrice: data.price,
      }
      this.list.push(newData)
    },
    list: {
      handler(newVal, oldVal) {
        this.$emit("tableData", newVal)
      },
      deep: true
    }
  },
  methods: {
    // 通知父组件，删除数据
    deleteItem(index) {
      this.$emit("deleteItem", index)
    },
    // 设置不统计的字段
    getSummaries(param) {
      const {columns, data} = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (this.includeColumn.includes(column.property)) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums
    },
    editData(row, column) {
      row[column.property + "isShow"] = true
      //refreshTable是table数据改动时，刷新table的
      this.refreshTable()
      this.$nextTick(() => {
        this.$refs[column.property] && this.$refs[column.property].focus()
      })
    },
    alterData(row, column) {
      row[column.property + "isShow"] = false
      const data = this.list.find(item => item.id === row.id)
      data.totalPrice = data.newPrice * data.count
      this.refreshTable()
    },
    refreshTable() {
      this.randomKey = Math.random()
    },
  }
}
</script>

<style scoped lang="scss">

</style>