detail.vue

<template>
  <!-- -账单明细 -->
  <div class="white_bg burt-container custom-info">
    <Goback title="账单详情" />
    <a-form-model ref="form" layout="vertical" :model="form">
      <a-row :gutter="30">
        <a-col :xl="5" :lg="6" :sm="12">
          <a-form-model-item label="病历号">
            <a-input v-model="form.mrnNo" placeholder="请输入病历号" allow-clear disabled/>
          </a-form-model-item>
        </a-col>
        <a-col :xl="5" :lg="6" :sm="12">
          <a-form-model-item label="客户姓名">
            <a-input v-model="form.patientName" placeholder="请输入客户姓名" allow-clear disabled />
          </a-form-model-item>
        </a-col>
        <a-col :xl="5" :lg="6" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select v-model="form.payorId" placeholder="请选择保险公司" allowClear showSearch disabled optionFilterProp="label">
              <a-select-option v-for="item in companyOptions" :key="item.corpCode" :value="item.id" :label="item.longName">
                {{ item.longName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="5" :lg="6" :sm="12">
          <a-form-model-item label="看诊医生">
            <a-input v-model="form.doctorName" placeholder="请输入看诊医生" allow-clear disabled/>
          </a-form-model-item>
        </a-col>
        <a-col :xl="5" :lg="6" :sm="12">
          <a-form-model-item label="收费时间">
            <a-date-picker value-format="YYYY-MM-DD 00:00:00" v-model="form.receiptDate" placeholder="就诊时间" disabled/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <a-table :columns="columns" :data-source="dataList" :scroll="{ x: true }" :pagination="false">
      <template slot="operation" slot-scope="record">
        <a-button type="link" @click.stop="editEvt(record)">修改</a-button>
        <a-popconfirm title="你确定要关闭吗？" ok-text="确定" cancel-text="取消" @confirm="deleteData" >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm>
      </template>
      <template slot="footer">
        <div class="total">总计： <span>{{sumAmount||0}}</span></div>
      </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pagination" @pageChange="_getChargeListDetail" />

    <a-modal title="编辑" :visible="dialogShow" width="700px" :maskClosable="false"
      okText="确定" cancelText="取消"
      @ok="handleEditOK" @cancel="dialogShow = false">
      <a-form-model ref="editForm" :model="editFormObj" :rules="editRules">
        <a-row :gutter="30">
          <a-col :lg="12" :xs="24">
            
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Goback from "@/components/Customers/goback";
import BurtPagination from "@/components/Customers/pagation";
import { mapState } from "vuex"
export default {
  data() {
    const columns = [
      { title: "项目", dataIndex: "itemcatDesc", width: 180 },
      { title: "项目明细", dataIndex: "itemDesc", width: 180},
      { title: "单价", dataIndex: "itemPrice", width: 120},
      { title: "数量", dataIndex: "itemQty", width: 180 },
      { title: "单位", dataIndex: "itemUnitDesc", width: 180 },
      { title: "金额", dataIndex: "chargeAmount", width: 180 },
      { title: "折扣（%）", dataIndex: "discountAmount", width: 180 },
      { title: "减免金额", dataIndex: "reduceAmount", width: 180 },
      { title: "实际金额", dataIndex: "paidAmount", width: 180 },
    ];
    const payColumns = [
      { title: "免赔额", dataIndex: "deductible", width: 180 },
      { title: "自付额", dataIndex: "selfPaid", width: 180 },
      { title: "其他费用", dataIndex: "otherPaid", width: 180 },
      { title: "个人支付", dataIndex: "personalPaid", width: 180 },
      { title: "理赔金额", dataIndex: "ciPaid", width: 180 },
      { title: "支付方式", dataIndex: "paymentType",  width: 180, scopedSlots: { customRender: "paymentType" }},
    ];
    return {
      dialogShow: false,
      receiptNo: "",
      columns,
      payColumns,
      form: {},
      pageForm: {
        doctorCode: "",
        patientName: "",
        mrnNo: "",
        paymentCode: "",
        payorId: 0,
        receiptDate: ""
      },
      patientTypeOptions: [
        {
          name: "商保",
          code: 1,
        },
      ], //客户类型
      companyOptions: [], //保险公司
      doctorOptions: [], //就诊医生
      paymentOptions: [
        {
          name: "商保",
          code: 1,
        },
      ], //支付方式
      dataList: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      payDataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      editFormObj: {
        id: "",
        mrnNo: '',
        patientName: '',
      },
      editRules: {
        mrnNo: [{ required: true, message: "病历号", trigger: "blur" }],
        patientName: [{ required: true, message: "客户姓名", trigger: "blur" }],
      },
    };
  },
  components: {
    Goback,
    BurtPagination,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo
    }),
    sumAmount() {
      let total = 0
      this.dataList.forEach(item => {
        total += Number(item.paidAmount || 0)
      })
      return Number(total.toFixed(2))
    }
  },
  filters: {
    payStyleFilters(value) {
      const styleMap = {
        1: "支付宝",
        2: "微信",
        3: "现金",
      };
      return styleMap[value];
    },
  },
  created() {
    const { receiptNo } = this.$route.query;
    this.receiptNo = receiptNo || "";
    let chargeQueryDetail = localStorage.getItem('chargeQueryDetail');
    this.form = chargeQueryDetail? JSON.parse(chargeQueryDetail): {};
    console.log(this.form)

    this._getChargeListDetail();
    this._getCompanyOptions();//获取保险公司下拉选项
    this._getDoctorListNoPage();//获取看诊医生下拉选项
    this._getReceiptPaymentDetail(); //费用支付明细
  },
  methods: {
    // 获取列表数据
    _getChargeListDetail() {
      const data = {
        receiptNo: this.receiptNo,
        basereceiptId: this.form.externalId,
        ...this.pager,
      };
      this.$apis.getChargeListDetail(data).then((res) => {
        console.log("11111111111获取table信息=", res);
        if (res.returnCode == "0000") {
          this.dataList = (res.content && res.content.list) || [];
          // this.pager.total = (res.content && res.content.total) || 0;
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.getCompanyOptions().then((res) => {
        console.log("获取保险公司下拉选项", res);
        if (res.returnCode == "0000") {
          let existPayor = false
          this.companyOptions = res.content.map(item => {
            item.id = Number(item.id)
            if(item.id === this.form.payorId) {
              existPayor = true
            }
            return item
          }) || [];
          if(!existPayor) {
            this.companyOptions.push({
              id: this.form.payorId,
              longName: this.form.payorName
            })
          }
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    // 获取看诊医生下拉选项
    _getDoctorListNoPage(){
      this.$apis.getDoctorListNoPage({"providerId": this.userInfo.providerId}).then((res) => {
        if (res.returnCode === "0000") {
          this.doctorOptions = res.content || [];
        }else{
          this.$message.success(res.returnMsg);
        }
        
      });
    },
    // 获取费用支付明细
    _getReceiptPaymentDetail() {
      const params = {
        receiptNo: this.receiptNo,
        ...this.payPager,
      };
      this.$apis.getReceiptPaymentDetail(params).then((res) => {
        console.log("获取费用支付明细", res);
        if (res.returnCode == "0000") {
          let content = res.content || {};
          this.payDataList = content;
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    //账单结算
    receiptEvt(){
      this.$modal.confirm({
        title: "结算",
        content: "确定结算该账单？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          this.$apis.receiptSettlement({
            id: this.form.id
          }).then((res) => {
            if (res.returnCode === "0000") {
              this.$message.success('结算成功');
              this.pagination.pageNum = 1;
              this._getChargeListDetail();
            }else{
              this.$message.error(res.returnMsg);
            }
          });
        },
      });
    },
    //打印
    printEvt(){
      this.$apis.receiptPrint({
        id: this.form.id
      }).then(res => {
        if(res.returnCode == '0000'){
          let url = res.content;
          let link = document.createElement('a');
          link.setAttribute('href', url);
          link.setAttribute('target', "_blank");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }else{
          this.$message.error(res.returnMsg);
        }
      })
    },
    // 重置
    handlerReset() {
      const { mrnNo, patientName } = this.form;
      this.form = {mrnNo, patientName};
    },
    editEvt(record) {
      this.editFormObj = {
        id: record.id || "",
      };
      this.dialogShow = true;
    },
    //编辑保存
    handleEditOK() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          console.log(11)
        }
      });
    },
    handlerSearch() {
      this.pagination.pageNum = 1;
      this.pageForm = this.$lodash.cloneDeep(this.form);
      this._getChargeListDetail();
    },
    deleteData() {
      this.$message.success("删除成功");
    },
    // 新建账单信息
    addNewCharge() {
      // this.$router.push("/customer/edit");
    },
  },
};
</script>
<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
.title-div {
  line-height: 56px;
  color: #252631;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.payTable{
  .ant-btn{
    border-color: #1890ff;
    color: #1890ff;
  }
}
.btn-div{
  margin-top: 10px;
  justify-content: flex-end;
}
.total{
  font-weight: 600;
  span{
    color: red;
  }
}
</style>