peisweb/src/views/fee-settings/cardBill.vue

<template>
  <div>
    <div style="position: relative">
      <div class="middlebox">
        <div class="contenttitle">
          收费 /
          <span class="contenttitleBold">会员卡记账记录</span>
        </div>
      </div>
      <div style="margin-top:7px">
        <div
          style="background-color: #fff; padding: 15px; border-radius: 8px;display: flex;flex-wrap: wrap;    margin-bottom: 10px;height:80px;margin-top: 7px;">
          <div class="query">
            <span>记账日期：</span>
            <el-date-picker v-model="query.startDate" type="date" placeholder="起始日期" size="small"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions"/>
            <span>--</span>
            <el-date-picker v-model="query.endDate" type="date" placeholder="截止日期" size="small"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions"/>
          </div>
          <div class="query">
            <span>记账标志：</span>
            <el-select v-model="query.billFlag" placeholder="请选择" filterable clearable size="small">
              <el-option v-for="item in dict.billFlag" :key="item.id" :label="item.displayName" :value="item.id" />
            </el-select>
          </div>
          <div class="query">
            <span>支付方式：</span>
            <el-select v-model="query.payModeIds" placeholder="请选择" filterable clearable size="small" multiple
              collapse-tags>
              <el-option v-for="item in dict.payMode" :key="item.id" :label="item.displayName" :value="item.id" />
            </el-select>
          </div>
          <div class="query">
            <span>卡号：</span>
            <el-input placeholder="卡号" v-model="query.cardNo" size="small" clearable style="width: 190px" />
          </div>
          <div class="query">
            <span>卡主姓名：</span>
            <el-input placeholder="卡主姓名" v-model="query.customerName" size="small" clearable style="width: 190px" />
          </div>
          <div class="query">
            <span>身份证号：</span>
            <el-input placeholder="身份证号" v-model="query.idNo" size="small" clearable style="width: 190px" />
          </div>
          <div class="query">
            <span>电话：</span>
            <el-input placeholder="手机号/电话" v-model="query.mobileTelephone" size="small" clearable
              style="width: 190px" />
          </div>
          <div class="query">
            <span>收费员</span>
            <el-select v-model="query.operateUserIds" placeholder="请选择" style="margin-left: 10px;width: 170px;" filterable
              clearable size="small" multiple collapse-tags>
              <el-option v-for="item in users" :key="item.id" :label="item.surname" :value="item.id" />
            </el-select>
          </div>
          <div class="query">
            <el-button class="commonbutton" @click="btnQuery">查询</el-button>
          </div>
        </div>
        <div style="background-color: #fff; padding: 15px; border-radius: 8px;">
          <el-table :data="dataList" width="100%" :height="window.pageHeight < 600 ? 330 : window.pageHeight - 250"
            row-key="id" highlight-current-row ref="dataList" border show-summary :summary-method="getSummaries">
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column prop="cardNo" label="会员卡号" width="150" align="center" />
            <el-table-column prop="customerName" label="卡主姓名" />
            <el-table-column prop="mobileTelephone" label="手机号" align="center" />
            <el-table-column prop="payModeId" label="支付方式" align="center">
              <template slot-scope="scope">
                <div>{{ dddw(dict.payMode, "id", scope.row.payModeId, "displayName") }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="billMoney" label="记账金额" align="center">
              <template slot-scope="scope">
                <div :style="`color: ${scope.row.billFlag == '1' ? 'red':''};`">{{ scope.row.billFlag == '1' ? '-'+scope.row.billMoney : scope.row.billMoney  }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="billFlag" label="记账标志" align="center">
              <template slot-scope="scope">
                <div>{{ dddw(dict.billFlag, "id", scope.row.billFlag, "displayName") }}</div>
              </template>
            </el-table-column>
            <!--
            <el-table-column prop="creatorName" label="创建人员" align="center"/>
            <el-table-column prop="creationTime" label="创建日期" width="150" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.creationTime">
                  {{ moment(scope.row.creationTime).format("yyyy-MM-DD") }}
                </div>
              </template>
            </el-table-column>
            -->
            <el-table-column prop="lastModifierName" label="修改人员" align="center" />
            <el-table-column prop="lastModificationTime" label="修改日期" width="150" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { dddw, objCopy, arrayReduce, arrayExistObj, deepCopy } from "@/utlis/proFunc";


export default {
  components: {

  },
  data() {
    return {
      query: {
        startDate: '',
        endDate: '',
        billFlag: '',
        payModeIds: [],
        cardNo: '',
        customerName: '',
        idNo: '',
        mobileTelephone: '',
        operateUserIds: []
      },  //查询条件
      dataList: [], //列表数据   
      users: [],
    };
  },

  created() {
    this.query.startDate = moment(new Date()).format("yyyy-MM-DD");
    this.query.endDate = this.query.startDate;
  },

  //挂载完成
  mounted() {
    this.dicInit();
    this.enterToQuery()
  },

  updated() {
    this.$nextTick(() => {
      this.$refs['dataList'].doLayout() //刷新显示合计
    })
  },

  computed: {
    ...mapState(["pickerOptions","window", "dict"]),
  },
  methods: {
    ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),
    dddw, moment,


    //查询
    btnQuery(queryType) {
      let body = deepCopy(this.query)

      switch (queryType) {
        case 'idNo':
          if (!this.query.idNo) return;
          body = { idNo: this.query.idNo };
          break;
        case 'cardNo':
          if (!this.query.cardNo) return;
          body = { cardNo: this.query.cardNo };
          break;
        default:
          if (this.query.idNo) {
            body = { idNo: this.query.idNo };
          } else if (this.query.cardNo) {
            body = { cardNo: this.query.cardNo };
          } else {
            // if(!this.query.startDate) this.query.startDate = moment(new Date()).format('yyyy-MM-DD');
            // if(!this.query.endDate) this.query.endDate = moment(new Date()).format('yyyy-MM-DD');
            if (this.query.startDate > this.query.endDate) {
              this.$message.error("数据不合法，起始日期不能大于截止日期！");
              return;
            }
            if (!body.cardNo) delete body.cardNo
            if (!body.billFlag) delete body.billFlag
            if (!body.customerName) delete body.customerName
            if (!body.idNo) delete body.idNo
            if (!body.mobileTelephone) delete body.mobileTelephone
            if (body?.payModeIds.length == 0) delete body.payModeIds
          }
          break;
      }

      // {
      //   "cardNo": "string",
      //   "customerName": "string",
      //   "idNo": "string",
      //   "mobileTelephone": "string",
      //   "billFlag": "string",
      //   "startDate": "string",
      //   "endDate": "string"
      // }

      postapi('/api/app/cardbill/getcardbilllist', body)
        .then((res) => {
          if (res.code != -1) {
            this.dataList = res.data;
          }
        });
    },

    //合计
    getSummaries(param) {
      //console.log('getSummaries param', param)
      // if(!param){
      //   param = {
      //     columns:[{}, {}, {}, {}, {}, {}, {property: 'asbitemMoney'},{property: 'customerOrgGroupDetailMoney'}],
      //     data:this.customerOrgGroupAsbitems
      //   }
      // }

      const { columns, data } = param;
      const sumCol = [5]  //需合计的列
      const sums = [];
      columns.forEach((column, index) => {
        //console.log('column, index,data',column, index,data)
        //显示合计列
        if (index === 1) {
          sums[index] = '合计';
          return;
        }

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

        sums[index] = 0
        data.forEach(e => {
          if (!isNaN(e[column.property])) sums[index] += Number(e[column.property])// * e['amount']
        })
        sums[index] = sums[index].toFixed(2) //+ ' 元';

      });
      // this.groupPrice = sums[7];
      //console.log('getSummaries',sums)
      // if (!this.totalFoucs) this.total = sums[5];
      // if (!this.discountFoucs) this.discount = Number(this.total * 100 / this.totalStand).toFixed(2);
      return sums;
    },

    dicInit() {
      //支付方式
      getapi("/api/app/pay-mode").then((res) => {
        if (res.code == 1) {
          this.dict.payMode = res.data;
        }
      });

      // 获取收费员
      postapi('/api/identity/users/GetUserListBySaleRole', { roleSysParmId: "fee_role_id" })
        .then(res => {
          if (res.code > -1) {
            this.users = res.data
          }
        })
    },
    //回车替代查询
    enterToQuery() {
      // console.log('enterToTab');
      this.$nextTick(() => {
        let inputs = document.querySelectorAll(["input"]); //用数组可以读取多个标签的元素  //.inline-input

        // 为每个输入框添加键盘事件监听器
        inputs.forEach((input, i) => {
          // console.log('input',input);
          input.addEventListener('keydown', (event) => {
            if (event.keyCode === 13) {
              // 阻止回车键的默认行为（换行）            
              event.preventDefault();

              // 如果按下的是回车查询
              // console.log(input.getAttribute('placeholder'),input.value)
              let placeholder = input.getAttribute('placeholder')
              switch (placeholder) {
                case '卡号':
                  if (input.value) this.btnQuery()
                  input.select()
                  break;
                case '身份证号':
                  if (input.value) this.btnQuery()
                  input.select()
                  break;
              }
            }
          });

          input.addEventListener('click', (event) => {
            let placeholder = input.getAttribute('placeholder')
            switch (placeholder) {
              case '卡号':
                input.select()
                break;
              case '身份证号':
                input.select()
                break;
            }
          });
        });
      });
    },
  },

  //监听事件
  watch: {
    //触发查询事件
    "patientRegister.query.times"(newVal, oldVal) {
      if (newVal != oldVal) {
        //alert('触发查询事件')
        this.query();
      }
    },

  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";

::v-deep .el-input__inner {
  /*text-align: center;*/
  padding-left: 5px;
  padding-right: 25px;
}

::v-deep .el-icon-date:before {
  content: ""
}

.query {
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #232748;
  font-size: 400;
  font-family: "NotoSansSC-Regular";
}

.box {
  display: flex;
  flex-direction: column;
}

:deep .el-form-item {
  margin-bottom: 14px;
}

/* el-dialog的头部样式 */
:deep .el-dialog__header {
  padding: 11px 20px 11px;
}

/* el-dialog的主体样式 */
:deep .el-dialog__body {
  padding: 0px 20px 0px;
}

/* el-divider样式 */
:deep .el-divider--horizontal {
  margin: 0px 0 12px;
}

/* el-dialog的底部样式 */
:deep .el-dialog__footer {
  padding: 0px 20px 14px;
}

.query:last-child {
  margin-right: 0;
}
</style>