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

<template>
  <div>
    <el-card>
      <div class="publiccss">会员卡记账</div>
      <div style="display: flex;margin-top:20px">
        <div :style="'display: block; width:' + (window.pageWidth - 120 - 70) + 'px;'">
          <div style="display: flex; flex-wrap: wrap; height:80px;">
            <div class="query">
              <span>记账日期</span>
              <el-date-picker v-model="query.dateRange" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="small"
                style="width: 240px">
              </el-date-picker>
            </div>
            <div class="query">
              <span>记账标志：</span>
              <el-select v-model="query.billFlag" placeholder="请选择" filterable clearable size="small" style="width: 100px">
                <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.payModeId" placeholder="请选择" filterable clearable size="small" style="width: 100px">
                <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: 150px" />
            </div>
            <div class="query">
              <span>卡主姓名：</span>
              <el-input placeholder="卡主姓名" v-model="query.customerName" size="small" clearable style="width: 100px" />
            </div>
            <div class="query">
              <span>身份证号：</span>
              <el-input placeholder="身份证号" v-model="query.idNo" size="small" clearable style="width: 200px" />
            </div>
            <div class="query">
              <span>手机号：</span>
              <el-input placeholder="手机号" v-model="query.mobileTelephone" size="small" clearable style="width: 150px" />
            </div>
          </div>
          <el-table :data="dataList" border width="100%" :height="window.pageHeight < 600 ? 370 : window.pageHeight - 230"
            row-key="id" size="small" highlight-current-row ref="dataList" @selection-change="handleSelectionChange"
            @row-click="rowClick">            
            <el-table-column prop="cardNo" label="会员卡号" width="150" />            
            <el-table-column prop="customerName" label="卡主姓名" width="80" />            
            <el-table-column prop="mobileTelephone" label="手机号" width="150" />
            <el-table-column prop="payModeId" label="支付方式" width="100">
              <template slot-scope="scope">
                <div>{{ dddw(dict.payMode, "id", scope.row.payModeId, "displayName") }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="billMoney" label="记账金额" width="80" />
            <el-table-column prop="billFlag" label="记账标志" width="100">
              <template slot-scope="scope">
                <div>{{ dddw(dict.billFlag, "id", scope.row.billFlag, "displayName") }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="creatorId" label="创建人员" width="100" />
            <el-table-column prop="creationTime" label="创建日期" width="150">
              <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="lastModifierId" label="修改人员" width="100" />
            <el-table-column prop="lastModificationTime" label="修改日期" width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.lastModificationTime">
                  {{ moment(scope.row.lastModificationTime).format("yyyy-MM-DD") }}
                </div>
              </template>
            </el-table-column>
          </el-table>

        </div>
        <div style=" margin-left: 10px;width:110px;">
          <div class="listBtn">
            <el-button class="btnClass" @click="btnQuery">查询</el-button>
          </div>
          <div class="listBtn">
            <el-button type="success" class="btnClass" @click="add">新增</el-button>
          </div>
          <div class="listBtn">
            <el-button type="primary" class="btnClass" @click="edit">编辑</el-button>
          </div>
          <div class="listBtn">
            <el-button type="danger" class="btnClass" @click="edit">删除</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules" size="small">
        <el-row>
          <el-col :span="8">
            <el-form-item label="卡类别" prop="cardTypeId">
              <el-select v-model="form.cardTypeId" placeholder="请选择" filterable>
                <el-option v-for="item in dict.cardType" :key="item.id" :label="item.displayName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会员卡号" prop="cardNo">
              <el-input v-model="form.cardNo" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣率" prop="discount">
              <el-input type="number" v-model="form.discount" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="有效期限" prop="expiryDate">
              <el-input type="date" v-model="form.expiryDate" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡主姓名" prop="customerName">
              <el-input v-model="form.customerName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡主身份证" prop="idNo">
              <el-input v-model="form.idNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="卡主电话" prop="telephone">
              <el-input type="tel" v-model="form.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡主手机号" prop="mobileTelephone">
              <el-input type="tel" v-model="form.mobileTelephone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="启用" prop="cardFlag">
              <el-radio v-model="form.cardFlag" label="1">是</el-radio>
              <el-radio v-model="form.cardFlag" label="0">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="创建人员" label-width="80px">
              <el-input v-model="form.creatorId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" label-width="80px">
              <el-input :value="form.creationTime ? moment(form.creationTime).format('yyyy-MM-DD') : ''"
                disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改人员" label-width="80px">
              <el-input v-model="form.lastModifierId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改时间" label-width="80px">
              <el-input :value="form.lastModificationTime
                ? moment(form.lastModificationTime).format('yyyy-MM-DD') : ''" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit('form')">确定</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </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 } from "@/utlis/proFunc";


export default {
  components: {

  },
  data() {
    return {
      query: {
        dateType:'createDate',
        dateType:'createDate',
      },  //查询条件
      dataList: [], //列表数据
      multipleSelection: [], //选中的数据列表
      dialogVisible: false,
      form: {
        id: null,
        cardTypeId: null,
        cardNo: '',
        discount: 100,
        expiryDate: null,
        customerName: '',
        idNo: '',
        telephone: '',
        mobileTelephone: '',
        cardFlag: '0',
        remark: '',
      },

      formInit: {},

      rules: {
        cardTypeId: [
          { required: true, message: "请填写卡类别", trigger: "blur" },
        ],
        cardNo: [
          { required: true, message: "请填写卡号", trigger: "blur" },
        ],
        discount: [
          { required: true, message: "请填写卡折扣", trigger: "blur" },
        ],
        expiryDate: [
          { required: true, message: "请填写卡有效期", trigger: "blur" },
        ],
        customerName: [
          { required: true, message: "请填写卡主姓名", trigger: "blur" },
        ],
        idNo: [
          { required: true, message: "请填写卡主身份证", trigger: "blur" },
        ],
        mobileTelephone: [
          { required: true, message: "请填写卡主身份证", trigger: "blur" },
        ],
        cardFlag: [
          { required: true, message: "请填写卡启用状态", trigger: "blur" },
        ]
      },

      curChoosedRow: {}, //当前选择的行数据
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  created() {
    this.formInit = { ...this.form };
  },

  //挂载完成
  mounted() { 
    this.dicInit();
  },
  computed: {
    ...mapState(["window", "dict"]),
  },
  methods: {
    ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),
    dddw, moment,

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    rowClick(row) {
      this.curChoosedRow = row;
    },

    add() {
      this.form = { ...this.formInit };
      this.dialogVisible = true;
    },

    edit() {
      if (!this.curChoosedRow.id) {
        this.$message.warning("请先选择要操作的数据！");
        return;
      }
      this.form = { ...this.curChoosedRow };
      this.dialogVisible = true;
    },

    del() {
      let lfind = -1;
      if (!this.curChoosedRow.id) {
        this.$message.warning("请先选择要操作的数据！");
        return;
      }
      //执行删除操作
      lfind = arrayExistObj(this.dataList, 'id', this.curChoosedRow.id);
      if (lfind > - 1) this.dataList.splice(lfind, 1);
      this.curChoosedRow.id = null;
    },



    //按条码号查个人数据
    signByPatientRegisterNo() {
      let val = this.form.patientRegisterNo
      console.log(`/api/app/patient-register/patient-register-or-patient?SType=1&PatientRegisterNo=${val}`)
      getapi(`/api/app/patient-register/patient-register-or-patient?SType=1&PatientRegisterNo=${val}`)
        .then((res) => {
          if (res.code != -1) {
            if (res.data) {
              this.signCore([res.data.id])
              this.form.patientRegisterNo = ''
            }
          }
        });
    },

    //提交
    onSubmit(formName) {
      this.$refs[formName].validate((valid, fields) => {
        if (!valid) {
          //console.log('fields',fields,Object.keys(fields));
          this.$message.error(fields[Object.keys(fields)[0]][0].message);
          return;
        }
        //编辑
        if (this.form.id) {

        } else {
          //新增
        }
      });
    },


    //查询
    btnQuery() {
      let body = {}

      console.log(`this.patientRegister.query`, this.patientRegister.query)
      if (this.patientRegister.query.customerOrgFlag) {
        if (this.patientRegister.query.CustomerOrgParentId) {
          body.customerOrgId = this.patientRegister.query.CustomerOrgParentId
        } else {
          if (this.patientRegister.query.customerOrgId) body.customerOrgId = this.patientRegister.query.customerOrgId
        }
      }

      if (this.patientRegister.query.sex) body.sexId = this.patientRegister.query.sex

      if (this.patientRegister.query.patientName) body.patientName = this.patientRegister.query.patientName

      if (this.patientRegister.query.completeFlag) body.completeFlag = this.patientRegister.query.completeFlag

      //StartDate EndDate
      if (this.patientRegister.query.dateRange) {
        body.startDate = moment(new Date(this.patientRegister.query.dateRange[0])).format("yyyy-MM-DD")
        body.endDate = moment(new Date(this.patientRegister.query.dateRange[1])).format("yyyy-MM-DD")
      }


      if (this.patientRegister.query.idCardNo) body = { idNo: this.patientRegister.query.idCardNo }

      if (this.patientRegister.query.patientNo) body = { patientNo: this.patientRegister.query.patientNo }

      if (this.patientRegister.query.patientRegisterNo) body = { patientRegisterNo: this.patientRegister.query.patientRegisterNo }


      console.log('/api/app/patientregister/getlistinfilter', body)
      postapi('/api/app/patientregister/getlistinfilter', body)
        .then((res) => {
          this.dataList = res.data;
        });
    },

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

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

  },
};
</script>
<style scoped>
.query {
  margin-left: 10px;
}

.listBtn {
  margin-top: 20px;
}

.btnClass {
  width: 110px;
  text-align: center;
}

.btnClass {
  width: 110px;
}
</style>