kd-aiot-frontend-wt/src/views/bpm/handleTask/components/afterSales/spareInfo.vue

<template>
  <el-form ref="spareInfoRef">
    <headerTitle :title="title" style="margin-top: 15px"></headerTitle>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="tableList"
      row-key="id"
      height="30vh"
      :needPage="false"
    >
      <template v-slot:toolbar>
        <div class="toobar toobar_r" v-if="taskDefinitionKey != 'wms_out'">
          <div class="total_price">总计: {{ totalPrice }} (元)</div>
        </div>
      </template>
    </ele-pro-table>
  </el-form>
</template>

<script>
  export default {
    props: {
      detailList: {
        type: Array,
        default: () => []
      },
      types: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: '配件信息'
      },
      taskDefinitionKey: {
        type: String,
        default: ''
      }
    },
    watch: {
      detailList: {
        handler(newVal) {
          console.log(this.taskDefinitionKey,'this.taskDefinitionKeythis.taskDefinitionKeythis.taskDefinitionKeythis.taskDefinitionKey00000')
          this.tableList = JSON.parse(JSON.stringify(newVal));
          this.calculatePrice();
        },
        immediate: true
      }
    },
    data() {
      return {
        tableList: [],
        columns: [
          {
            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: 'totalCount',
            label: '数量',
            align: 'center',
            width: 100,
            show: this.taskDefinitionKey != 'wms_out'
          },
          {
            prop: 'singlePrice',
            label: '单价',
            align: 'center',
            width: 100,
            show: this.taskDefinitionKey != 'wms_out'
          },
          {
            prop: 'totalPrice',
            label: '总价',
            align: 'center',
            width: 100,
            show: this.taskDefinitionKey != 'wms_out'
          },
          {
            prop: 'measureUnit',
            label: '计量单位',
            align: 'center',
            show: this.taskDefinitionKey != 'wms_out'
          },
          {
            prop: 'warehouseName',
            label: '仓库',
            align: 'center'
          }
        ],
        totalPrice: 0 // 总计
      };
    },
    mounted() {
      console.log(this.$store.state.user?.info, '--------------- 这是数据信息');
    },
    methods: {
      // 计算汇总价格 ***
      calculatePrice() {
        let totlal = 0;
        this.tableList.map((el) => (totlal += el.totalPrice || 0));
        this.totalPrice = totlal;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .add-product {
    // width: 70%;
    display: flex;
    align-items: center;
    // justify-content: flex-end;
    font-size: 30px;
    color: #1890ff;
    margin: 10px 0;
    cursor: pointer;
  }

  .toobar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;

    .total_price {
      margin-left: 24px;
      min-width: 50px;
    }
  }

  .toobar_r {
    justify-content: flex-end;
  }
</style>