opms_frontend/src/views/proj/business/components/ProductTable.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-05 17:43:46
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-07 14:36:08
 * @FilePath: \订单全流程管理系统\src\components\table\ProductTable.vue
-->
<template>
  <div class="table-container">
    <el-table border :data="data">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        align="center"
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="item.prop == 'prodPrice'">
            <amount-input
              v-model.trim="row.prodPrice"
              placeholder="请输入金额"
              :value="row.prodPrice"
              @change="handleChange(row)" />
          </span>
          <span v-else-if="item.prop == 'prodNum'">
            <el-input-number v-model="row.prodNum" :min="0" size="mini" @change="handleChange(row)" />
          </span>
          <span v-else-if="item.label == '合计'">
            {{ calculatedDiscount(row.prodPrice, row.prodNum) }}
          </span>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="68px">
        <template #default="{ row }">
          <el-button type="text" @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import AmountInput from '@/components/currency'

  export default {
    name: 'ProductTable',
    components: {
      AmountInput,
    },
    props: {
      productData: {
        type: Array,
        default() {
          return []
        },
      },
      checkList: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        data: [],
        columns: [
          {
            label: '产品编码',
            width: 'auto',
            prop: 'prodCode',
          },
          {
            label: '产品名称',
            width: 'auto',
            prop: 'prodName',
          },
          {
            label: '产品类别',
            width: 'auto',
            prop: 'prodClass',
          },
          {
            label: '产品单价',
            width: 'auto',
            prop: 'prodPrice',
          },
          {
            label: '数量',
            width: 'auto',
            prop: 'prodNum',
          },
        ],
      }
    },
    watch: {
      productData() {
        this.data = []
        this.data = this.productData.map((item) => {
          return { ...item, prodPrice: item['prodPrice'] }
        })
        console.log(this.data)
      },
    },
    created() {
      this.data = []
      this.data = this.productData.map((item) => {
        return { ...item, prodPrice: item['prodPrice'] }
      })
    },
    methods: {
      // input修改
      handleChange(row) {
        console.log('row', row)
        this.$emit('changeProductData', row)
      },
      // 删除
      handleDel(row) {
        this.$emit('delProductData', row)
      },
      // 计算总价
      calculatedDiscount(price, count) {
        let intPrice = price * 100
        return this.formatPrice((intPrice * count) / 100)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .custom-table-container {
    :deep() {
      i {
        cursor: pointer;
      }
    }

    .stripe-panel,
    .border-panel {
      margin: 0 10px #{$base-margin/2} 10px !important;
    }
  }
</style>
<style lang="scss">
  .table-container {
    width: 100%;
  }
</style>