【ECCS-商保-1213】添加账单明细页面

src/api/apis_moudles/charge-query.js

@@ -2,4 +2,5 @@
 export default {
   getChargeList: "/backstage/auth/receiptList",
   getCompanyOptions: "/backstage/auth/payorListNopage", 
+  getChargeListDetail:"/backstage/auth/receiptDetailList",//账单明细
 };

src/api/funcs_modules/charge-query.js

@@ -9,8 +9,13 @@ const GETCHARGELIST = function (data) {
 const GETCOMPANYOPTIONS = function (data) {
   return req.post(apis.getCompanyOptions, data);
 };
+// get charge detail list
+const GETCHARGELISTDETAIL = function (data) {
+  return req.post(apis.getChargeListDetail, data);
+};
 // 对象数组
 export default {
   GETCHARGELIST,
   GETCOMPANYOPTIONS,
+  GETCHARGELISTDETAIL
 };

src/views/charge-query/detail.vue

 <template>
-  <div>账单明细页面</div>
+  <!-- -账单明细 -->
+  <div class="white_bg burt-container custom-info">
+    <!-- form -->
+    <a-form-model ref="form" layout="vertical" :model="form">
+      <a-row :gutter="30">
+        <a-col :xl="4" :lg="6" :sm="12">
+          <a-form-model-item label="病历号">
+            <a-input
+              v-model="form.patientNo"
+              placeholder="请输入病历号"
+              allow-clear
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="4" :lg="6" :sm="12">
+          <a-form-model-item label="客户姓名">
+            <a-input
+              v-model="form.patientName"
+              placeholder="请输入客户姓名"
+               allow-clear
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="4" :lg="6" :sm="12">
+          <a-form-model-item label="客户类型">
+            <a-select v-model="form.patientType" placeholder="请选择客户类型" allowClear>
+              <a-select-option
+                v-for="item in patientTypeOptions"
+                :key="item.code"
+                :value="item.code"
+              >
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="4" :lg="6" :sm="12">
+          <a-form-model-item label="保险公司">
+            <a-select v-model="form.payorId" placeholder="请选择保险公司" allowClear>
+              <a-select-option
+                v-for="item in companyOptions"
+                :key="item.corpCode"
+                :value="item.id"
+              >
+                {{ item.longName }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="4" :lg="6" :sm="12">
+          <a-form-model-item label="看诊医生">
+            <a-select v-model="form.doctorCode" placeholder="请选择看诊医生" allowClear>
+              <a-select-option
+                v-for="item in doctorOptions"
+                :key="item.code"
+                :value="item.code"
+              >
+                {{ item.name }}
+              </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-range-picker format="YYYY-MM-DD" v-model="form.dateRange" :placeholder="['开始时间','结束时间']"  @change="onSelectVisitTime" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="3" :lg="6" :sm="12">
+          <a-form-model-item label="支付方式">
+            <a-select v-model="form.paymentCode" placeholder="请选择支付方式" allowClear>
+              <a-select-option
+                v-for="item in paymentOptions"
+                :key="item.code"
+                :value="item.code"
+                 allow-clear
+              >
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="12" :lg="12" :sm="12" class="none-label">
+          <a-form-model-item label="button">
+            <a-button>更新数据</a-button>
+            <a-button class="mar-left10" type="primary" @click="addNewCharge">
+              <Icon name="ssiadd" :size="14" />新建预授权</a-button
+            >
+            <a-button class="mar-left10" type="primary" @click="handlerReset">
+              <Icon name="ssireset" :size="14" />重置
+            </a-button>
+            <a-button class="mar-left10" type="primary" @click="handlerSearch">
+              <Icon name="ssisearch_active" :size="14" />查询
+            </a-button>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+
+    <!-- table -->
+    <a-table
+      :columns="columns"
+      :data-source="dataList"
+      row-key="id"
+      :scroll="{ x: true }"
+      :customRow="handlerRowClick"
+      :pagination="true"
+    >
+      <template slot="operation" slot-scope="record">
+        <a-button
+          v-if="record.isEdit"
+          type="link"
+          @click.stop="saveChange(record)"
+          >保存</a-button
+        >
+        <a-button v-else type="link" @click.stop="changeDataStatus(record)"
+          >修改</a-button
+        >
+        <!-- <a-button type="link" class="success">查看</a-button> -->
+        <a-popconfirm
+          title="你确定要关闭吗？"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="deleteData"
+        >
+          <a-button type="link" class="danger">删除</a-button>
+        </a-popconfirm>
+      </template>
+    </a-table>
+    <!--分页-->
+    <BurtPagination :pagination="pager" @pageChange="_getChargeListDetail" />
+
+    <div class="title-div">费用支付明细</div>
+    <a-table
+      :columns="payColumns"
+      :data-source="payDataList"
+      row-key="id"
+      :scroll="{ x: true }"
+      :pagination="false"
+    >
+    </a-table>
+  </div>
 </template>
 
 <script>
+import BurtPagination from "@/components/CUSTOMER/pagation";
 export default {
+  data() {
+    const columns = [
+      { title: "项目", dataIndex: "itemDesc", width: 180 },
+      {
+        title: "项目明细",
+        dataIndex: "itemDesc",
+        width: 180,
+      },
+      {
+        title: "单价",
+        dataIndex: "itemPrice",
+        width: 120,
+      },
+      { title: "数量", dataIndex: "itemQty", width: 180 },
+      { title: "单位", dataIndex: "itemUnit", width: 180 },
+      { title: "金额", dataIndex: "", width: 180 },
+      { title: "折扣（%）", dataIndex: "discountAmount", width: 180 },
+      { title: "折后金额", dataIndex: "", width: 180 },
+      { title: "减免金额", dataIndex: "reduceAmount", width: 180 },
+      { title: "实际金额", dataIndex: "paidAmount", width: 180 },
 
-}
-</script>
+      { title: "免赔额", dataIndex: "", width: 180 },
+      { title: "自付额", dataIndex: "", width: 180 },
+      { title: "其他费用", dataIndex: "", width: 180 },
+      { title: "实际金额", dataIndex: "", width: 180 },
+      {
+        title: "操作",
+        key: "operation",
+        width: "175px",
+        fixed: "right",
+        scopedSlots: { customRender: "operation" },
+      },
+    ];
+    const payColumns = [
+      { title: "免赔额", dataIndex: "", width: 180 },
+      { title: "自付额", dataIndex: "", width: 180 },
+      { title: "其他费用", dataIndex: "", width: 180 },
+      { title: "个人支付", dataIndex: "", width: 180 },
+      { title: "商报支付", dataIndex: "", width: 180 },
+      { title: "支付方式", dataIndex: "", width: 180 },
+    ]
+    return {
+      receiptNo:'',
+      columns,
+      payColumns,
+      form: {},
+      pageForm: {
+        doctorCode: "",
+        patientName: "",
+        patientNo: "",
+        paymentCode: "",
+        payorId: 0,
+        visitTimeEnd: "",
+        visitTimeStart: "",
+      },
+      patientTypeOptions: [
+        {
+          name: "商保",
+          code: 1,
+        },
+      ], //客户类型
+      companyOptions: [
+
+      ], //保险公司
+      doctorOptions: [
+        {
+          name: "医生1",
+          code: 1,
+        },
+      ], //就诊医生
+      paymentOptions: [
+        {
+          name: "商保",
+          code: 1,
+        },
+      ], //支付方式
+      dataList: [],
+      pager: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      payDataList:[]
+    };
+  },
+  components: {
+    BurtPagination,
+  },
+  created() {
+    const { receiptNo } = this.$route.query
+    this.receiptNo = receiptNo || ''
 
-<style>
+    this._getChargeListDetail();
+    this._getCompanyOptions();
+  },
+  methods: {
+    // 获取列表数据
+    _getChargeListDetail() {
+      const data = {
+       "receiptNo": this.receiptNo,
+       ...this.pager
+      };
+      this.$apis.GETCHARGELISTDETAIL(data).then((res) => {
+        console.log("11111111111获取table信息=", res);
+        this.dataList = (res.content && res.content.list) || [];
+        // this.pager.total = (res.content && res.content.total) || 0;
+      });
+    },
+    // 获取保险公司下拉选项
+    _getCompanyOptions() {
+      this.$apis.GETCOMPANYOPTIONS().then((res) => {
+        console.log("获取保险公司下拉选项", res);
+        this.companyOptions = res.content || [];
+      });
+    },
 
+    // 选中就诊时间
+    onSelectVisitTime(date, dateString) {
+      console.log(date, dateString);
+    },
+    // 重置
+    handlerReset() {
+      this.form = {}
+    },
+    
+    //设置行属性 
+    handlerRowClick(record) {
+      const { receiptNo } = record;
+      console.log('receiptNo=',receiptNo);
+      return {
+        style: {
+          color: record.isEdit ? "#2B63FF" : "#252631",
+        },
+        on: {
+      // 点击行
+          click: () => {
+            if (record.isEdit) {
+              return true;
+            }
+            this.$router.push({
+              name: "chargeQueryDetail",
+              query: { receiptNo },
+            });
+          },
+        },
+      };
+    },
+    // 修改按钮
+    changeDataStatus(record) {
+      this.$set(record, "isEdit", true);
+    },
+    saveChange(record) {
+      record.isEdit = undefined;
+      record.isNew = undefined;
+    },
+    handlerSearch() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.pager.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;
+}
 </style>