peisweb/src/components/patientRegister/patientRegisterAsbItem.vue

<template>
  <div>
    <div style="display: flex">
      <el-table
        :data="patientRegister.patientRegisterAbs"
        border
        :height="patientRegister.prAsbItemHeight"
        size="small" :row-class-name="tableRowClassName"
        highlight-current-row
        :summary-method="getSummaries"
        show-summary
        ref="patientRegister.patientRegisterAbs"
      >
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="asbitemName" label="已选组合项目" width="120" />
        <el-table-column prop="standardPrice" label="标准价" />
        <el-table-column prop="discount" label="折扣" />
        <el-table-column prop="amount" label="数量" width="50" />
        <el-table-column prop="chargePrice" label="价格" />
        <el-table-column prop="payTypeFlag" label="支付方式">
          <template slot-scope="scope">
            <div>
              {{
                ldddw(dict.payType, "id", scope.row.payTypeFlag, "displayName")
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="isCharge" label="收费" width="50">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.isCharge == 'Y'" />
          </template>
        </el-table-column>
        <el-table-column prop="checkCompleteFlag" label="状态">
          <template slot-scope="scope">
            <div>
              {{
                ldddw(
                  dict.checkCompleteFlag,
                  "id",
                  scope.row.checkCompleteFlag,
                  "displayName"
                )
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="isLock" label="锁" width="50">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.isLock == 'Y'" />
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="登记人"></el-table-column>
        <el-table-column prop="creationTime" label="登记日期" width="90">
          <template slot-scope="scope">
            <div>{{ lmoment(scope.row.creationTime, "yyyy-MM-DD") }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
import { dddw } from "../../utlis/proFunc";
export default {
  components: {},
  data() {
    return {};
  },

  created() {},

  //挂载完成
  mounted() {},

  computed: {
    ...mapState(["dict", "patientRegister"]),
  },
  methods: {
    ldddw(arrayData, key, value, display) {
      return dddw(arrayData, key, value, display);
    },

    lmoment(date, forMat) {
      return moment(new Date(date)).format(forMat);
    },

    tableRowClassName({row, rowIndex}){
      //console.log(row)
      if (row.groupPackageId) {
        //console.log('row.groupPackageId',row.groupPackageId)
        return 'purple-row'; //分组或套餐
      }else{
        return '';
      }      
    },

    //自定义计算列
    getSummaries(param) {
      const { columns, data } = param;
      const sumCol = [2, 5]; //需合计的列
      const sums = [];
      columns.forEach((column, index) => {
        //显示合计列
        if (index === 1) {
          sums[index] = "合计";
          return;
        }

        //不合计的列
        if (sumCol.indexOf(index) == -1) {
          sums[index] = "";
          return;
        }

        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = Math.round(sums[index], 2);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global.css";
.box {
  display: flex;
}
</style>