diff --git a/openhis-ui-vue3/src/views/charge/cliniccharge/components/api.js b/openhis-ui-vue3/src/views/charge/cliniccharge/components/api.js
new file mode 100644
index 00000000..74888860
--- /dev/null
+++ b/openhis-ui-vue3/src/views/charge/cliniccharge/components/api.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+/**
+ * 收费患者列表
+ */
+export function getList(queryParams) {
+    return request({
+      url: '/charge-manage/charge/encounter-patient-page',
+      method: 'get',
+      params: queryParams
+    })
+}
+  
+/**
+ * 患者处方列表
+ */
+export function getChargeList(encounterId) {
+    return request({
+      url: '/charge-manage/charge/patient-prescription?encounterId=' + encounterId,
+      method: 'get',
+    })
+}
+  
+  
+/**
+ * 医保转自费
+ */
+export function changeToSelfPay(encounterId) {
+    return request({
+      url: '/charge-manage/charge/self-pay?encounterId=' + encounterId,
+      method: 'put',
+    })
+}
+  
+  
+/**
+ * 自费转医保
+ */
+export function changeToMedicalInsurance(encounterId) {
+    return request({
+      url: '/charge-manage/charge/medical-insurance?encounterId=' + encounterId,
+      method: 'put',
+    })
+}
+  
\ No newline at end of file
diff --git a/openhis-ui-vue3/src/views/charge/cliniccharge/index.vue b/openhis-ui-vue3/src/views/charge/cliniccharge/index.vue
new file mode 100644
index 00000000..a354f92b
--- /dev/null
+++ b/openhis-ui-vue3/src/views/charge/cliniccharge/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div
+    style="display: flex; justify-content: space-between"
+    class="app-container"
+  >
+    <div style="width: 30%">
+      <el-table
+        ref="patientListRef"
+        height="700"
+        :data="patientList"
+        row-key="encounterId"
+        @cell-click="clickRow"
+        highlight-current
+        width=""
+      >
+        <el-table-column label="病历号" align="center" prop="patientBusNo" />
+        <el-table-column label="姓名" align="center" prop="patientName" />
+        <el-table-column label="时间" align="center" prop="startTime">
+          <template #default="scope">
+            {{ formatDate(scope.row.startTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收费状态"
+          align="center"
+          prop="statusEnum_enumText"
+        />
+      </el-table>
+    </div>
+    <div style="width: 65%">
+      <div></div>
+      <el-button type="primary" @click="addEmr()" :disabled="buttonDisabled"
+        >确认收费</el-button
+      >
+      <el-button
+        type="primary"
+        @click="payToSelt()"
+        style="margin-left: 20px"
+        :disabled="buttonDisabled"
+        >医保转自费</el-button
+      >
+      <el-button
+        type="primary"
+        @click="patToMedicalInsurance()"
+        style="margin-left: 20px"
+        :disabled="buttonDisabled"
+        >自费转医保</el-button
+      >
+      <el-table
+        ref="chargeListRef"
+        height="400"
+        :data="chargeList"
+        row-key="encounterId"
+        @cell-click="clickRow"
+        v-loading="chargeLoading"
+        width=""
+      >
+        <el-table-column
+          label="收费项目"
+          align="center"
+          prop="contextEnum_enumText"
+        />
+        <el-table-column
+          label="收费状态"
+          align="center"
+          prop="statusEnum_enumText"
+        />
+        <el-table-column label="总价" align="center" prop="totalPrice" />
+        <el-table-column label="处方号" align="center" prop="prescriptionNo" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup name="clinicCharge">
+import {
+  getList,
+  getChargeList,
+  changeToSelfPay,
+  changeToMedicalInsurance,
+} from "./components/api";
+import { formatDate } from "@/utils/index";
+
+const { proxy } = getCurrentInstance();
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 50,
+  statusEnum: 1,
+});
+
+const patientList = ref([]);
+const chargeList = ref([]);
+const chargeLoading = ref(false);
+const encounterId = ref("");
+getPatientList();
+/**
+ * 患者列表
+ */
+function getPatientList() {
+  getList(queryParams.value).then((res) => {
+    patientList.value = res.data.data.records;
+  });
+}
+
+/**
+ * 点击患者列表行 获取处方列表
+ */
+function clickRow(row) {
+  chargeLoading.value = true;
+  encounterId.value = row.encounterId;
+  getChargeList(row.encounterId).then((res) => {
+    chargeList.value = res.data.data;
+    setTimeout(() => {
+      chargeLoading.value = false;
+    }, 100);
+  });
+}
+
+/**
+ * 医保转自费
+ */
+function payToSelt() {
+  changeToSelfPay(encounterId.value).then((res) => {
+    if (res.code == 200) {
+      proxy.$modal.msgSuccess("操作成功");
+    }
+  });
+}
+
+/**
+ * 自费转医保
+ */
+function patToMedicalInsurance() {
+  changeToMedicalInsurance(encounterId.value).then((res) => {
+    if (res.code == 200) {
+      proxy.$modal.msgSuccess("操作成功");
+    }
+  });
+}
+</script>
+<style scoped>
+::v-deep .el-table__row:hover > td {
+  background-color: #cde5ff !important; /* 设置为透明或其他你想要的颜色 */
+}
+</style>
\ No newline at end of file
diff --git a/openhis-ui-vue3/src/views/charge/clinicrefund/components/api.js b/openhis-ui-vue3/src/views/charge/clinicrefund/components/api.js
new file mode 100644
index 00000000..34fc61d2
--- /dev/null
+++ b/openhis-ui-vue3/src/views/charge/clinicrefund/components/api.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+/**
+ * 收费患者列表
+ */
+export function getList(queryParams) {
+    return request({
+      url: '/charge-manage/refund/encounter-patient-page',
+      method: 'get',
+      params: queryParams
+    })
+}
+
+/**
+ * 患者退费账单
+ */
+export function getRefundList(encounterId) {
+    return request({
+      url: '/charge-manage/refund/patient-payment?encounterId=' + encounterId,
+      method: 'get',
+    })
+}
+
+/**
+ * 退费
+ */
+export function refund(data) {
+    return request({
+      url: '/charge-manage/refund/refund-payment',
+      method: 'post',
+      data: data
+    })
+}
diff --git a/openhis-ui-vue3/src/views/charge/clinicrefund/index.vue b/openhis-ui-vue3/src/views/charge/clinicrefund/index.vue
new file mode 100644
index 00000000..fa6b39d3
--- /dev/null
+++ b/openhis-ui-vue3/src/views/charge/clinicrefund/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div
+    style="display: flex; justify-content: space-between"
+    class="app-container"
+  >
+    <div style="width: 30%">
+      <el-table
+        ref="patientListRef"
+        height="800"
+        :data="patientList"
+        row-key="encounterId"
+        @cell-click="clickRow"
+        highlight-current
+        width=""
+      >
+        <el-table-column label="病历号" align="center" prop="patientBusNo" />
+        <el-table-column label="姓名" align="center" prop="patientName" />
+        <el-table-column label="时间" align="center" prop="startTime">
+          <template #default="scope">
+            {{ formatDate(scope.row.startTime) }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column
+          label="收费状态"
+          align="center"
+          prop="statusEnum_enumText"
+        /> -->
+      </el-table>
+    </div>
+    <div style="width: 65%">
+      <div></div>
+      <el-button type="primary" @click="addEmr()" :disabled="buttonDisabled"
+        >确认收费</el-button
+      >
+      <el-table
+        ref="chargeListRef"
+        height="400"
+        :data="chargeList"
+        row-key="encounterId"
+        @cell-click="clickRow"
+        v-loading="chargeLoading"
+        width=""
+      >
+        <el-table-column
+          label="收费项目"
+          align="center"
+          prop="contextEnum_enumText"
+        />
+        <el-table-column
+          label="收费状态"
+          align="center"
+          prop="statusEnum_enumText"
+        />
+        <el-table-column label="总价" align="center" prop="totalPrice" />
+        <el-table-column label="处方号" align="center" prop="prescriptionNo" />
+      </el-table>
+    </div>
+  </div>
+</template>
+  
+<script setup name="clinicCharge">
+import { getList, getRefundList, refund } from "./components/api";
+import { formatDate } from "@/utils/index";
+const { proxy } = getCurrentInstance();
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 50,
+});
+
+const patientList = ref([]);
+const chargeList = ref([]);
+const chargeLoading = ref(false);
+const encounterId = ref("");
+getPatientList();
+/**
+ * 患者列表
+ */
+function getPatientList() {
+  getList(queryParams.value).then((res) => {
+    patientList.value = res.data.data.records;
+  });
+}
+
+/**
+ * 点击患者列表行 获取处方列表
+ */
+function clickRow(row) {
+  chargeLoading.value = true;
+  encounterId.value = row.encounterId;
+  getRefundList(row.encounterId).then((res) => {
+    chargeList.value = res.data.data;
+    setTimeout(() => {
+      chargeLoading.value = false;
+    }, 100);
+  });
+}
+</script>
+<style scoped>
+::v-deep .el-table__row:hover > td {
+  background-color: #cde5ff !important; /* 设置为透明或其他你想要的颜色 */
+}
+</style>
\ No newline at end of file
diff --git a/openhis-ui-vue3/src/views/charge/outpatientregistration/components/patientList.vue b/openhis-ui-vue3/src/views/charge/outpatientregistration/components/patientList.vue
new file mode 100644
index 00000000..cd4b5e2f
--- /dev/null
+++ b/openhis-ui-vue3/src/views/charge/outpatientregistration/components/patientList.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <el-table
+      height="400"
+      :data="patientList"
+      row-key="id"
+      @cell-click="clickRow"
+    >
+      <el-table-column label="姓名" align="center" prop="name" />
+      <el-table-column label="性别" align="center" prop="genderEnum_enumText" />
+      <el-table-column label="证件号" align="center" prop="idCard" />
+      <el-table-column label="联系电话" align="center" prop="phone" />
+      <el-table-column label="年龄" align="center" prop="age" />
+    </el-table>
+  </div>
+</template>
+        
+<script setup>
+import { getOutpatientRegistrationList } from "./outpatientregistration";
+const props = defineProps({
+  searchkey: {
+    type: String,
+    default: "",
+  },
+});
+const emit = defineEmits(["selsectPatient"]);
+const total = ref(0);
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 50,
+});
+const patientList = ref([]);
+
+watch(
+  () => props.searchkey,
+  (newValue) => {
+    queryParams.value.searchKey = newValue;
+    getList();
+  },
+  { immdiate: true }
+);
+
+getList();
+function getList() {
+  getOutpatientRegistrationList(queryParams.value).then((res) => {
+    patientList.value = res.data.records;
+    total.value = res.data.total;
+  });
+}
+
+function clickRow(row) {
+  emit("selsectPatient", row);
+}
+</script>
+      
+<style scoped>
+::v-deep .el-table__row:hover > td {
+  background-color: #cde5ff !important; /* 设置为透明或其他你想要的颜色 */
+}
+</style>
\ No newline at end of file