web/src/views/social/reconciliationRecord.vue

<template>
  <div class="container-wrapper">
    <div class="search">
      <div class="left">
        <el-form :inline="true" :model="searchModel">
          <!--            <el-form-item>-->
          <!--              <el-date-picker-->
          <!--                  v-model="selectedDate"-->
          <!--                  type="daterange"-->
          <!--                  range-separator="-"-->
          <!--                  @change="handleDateChange"-->
          <!--                  start-placeholder="开始时间"-->
          <!--                  end-placeholder="结束时间"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <el-form-item>
            <el-select
                v-model="searchModel.reconciliationType"
                placeholder="清算类别"
            >
              <el-option
                  v-for="item in clrTypeOptions"
                  :key="item"
                  :label="item.value"
                  :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
                v-model="searchModel.insuranceType"
                placeholder="险种类型"
            >
              <el-option
                  v-for="item in insutypesOptions"
                  :key="item"
                  :label="item.value"
                  :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="searchModel.handlingInstitution"
                placeholder="经办机构"
                style="width: 200px"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <div class="default-btn" @click="resetSearch">
          <span class="iconfont icon-RectangleCopy1"></span>
          重置
        </div>
        <div class="default-btn" @click="getList" style="margin-left: 24px">
          <span class="iconfont icon-RectangleCopy"></span>
          搜索
        </div>
      </div>
    </div>
    <el-table :data="list" style="width: 100%;flex: 1;min-height: 0">
      <el-table-column label="清算类别" prop="reconciliationType">
        <template #default="scope">
          {{ getKey(clrType, scope.row.reconciliationType) }}
        </template>
      </el-table-column>
      <el-table-column label="险种类型" prop="insuranceType">
        <template #default="scope">
          {{ getKey(insutypes, scope.row.insuranceType) }}
        </template>
      </el-table-column>
      <el-table-column label="经办机构" prop="handlingInstitution" show-overflow-tooltip></el-table-column>
      <el-table-column label="医疗费用总额" prop="totalMedicalCost" show-overflow-tooltip></el-table-column>
      <el-table-column label="基金支付总额" prop="totalFundPayment" show-overflow-tooltip></el-table-column>
      <el-table-column label="个账支付总额" prop="totalPersonalAccountPayment" show-overflow-tooltip></el-table-column>
      <el-table-column label="结算笔数" prop="settlementCount" show-overflow-tooltip></el-table-column>
      <el-table-column label="对账结果" prop="reconciliationResult" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.reconciliationResult == null" type="info">未对账</el-tag>
          <el-tag v-if="scope.row.reconciliationResult == 0" type="success">{{ reconciliationResult[0] }}</el-tag>
          <el-tag v-if="scope.row.reconciliationResult != null&&scope.row.reconciliationResult != 0" type="danger">{{
              reconciliationResult[scope.row.reconciliationResult as keyof typeof reconciliationResult] || '未知状态'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开始对账时间" prop="beginTime" show-overflow-tooltip>
        <template #default="scope">
          {{ formatDate(scope.row.beginTime) }}
        </template>
      </el-table-column>
      <el-table-column label="结束对账时间" prop="endTime" show-overflow-tooltip>
        <template #default="scope">
          {{ formatDate(scope.row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column label="详细信息" prop="resultDesc" width="200" show-overflow-tooltip></el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination background layout="prev, pager, next" v-model:current-page="pageNum" v-model:page-size="pageSize"
                     @change="changePageNumHandler" :total="total"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import {reconciliationResult} from "@/assets/config/constants.ts";
import clrType from "@/assets/config/directory/clrType.json"
import insutypes from "@/assets/config/directory/insutypes.json"
import {getKey} from "@/utils/discrotyUtil.ts";
import {formatDate} from "@/utils/dateUtils.ts";
import {API} from "@/assets/config/API.ts";

const pageSize = ref(20);
const pageNum = ref(1);
const total = ref(0);

interface ClrType {
  [key: string]: string;
}

const clrTypeOptions = Object.entries(clrType as ClrType).map(([key, value]) => ({
  key: key,
  value: value
}))

interface Insutypes {
  [key: string]: string;
}

const insutypesOptions = Object.entries(insutypes as Insutypes).map(([key, value]) => ({
  key: key,
  value: value
}))

interface queryParams {
  pageNum: number;
  pageSize: number;
  beginTime?: string;
  endTime?: string;
  reconciliationType?: string;
  insuranceType?: string;
  handlingInstitution?: string;
}

const changePageNumHandler = (pageNum: number) => {
  getList()

};

interface TypeMapping {
  [key: number]: string;
}

const list = ref<any>();
const getList = () => {
  const query: queryParams = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    ...searchModel.value
  }
  post(API.Social.Reconciliation.HistoryList, {query: query}).then(
      (res: any) => {
        list.value = res.list;
        total.value = res.total_count;
      }
  )
}

onMounted(() => {
  getList()
})

//  搜索
const searchModel = ref<any>({});
const resetSearch = () => {
  searchModel.value = {}
  getList()
}
</script>
<style scoped lang="scss">
.container-wrapper {
  width: 100%;
  height: 100%;
  padding:24px 24px 0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;

  .search {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}

:deep(.el-select__wrapper) {
  width: 150px;
  height: 42px;
}

:deep(.el-input__wrapper) {
  width: 150px;
  height: 42px;
}
.footer{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
}
</style>