Merge remote-tracking branch 'origin/dev_New' into dev_New

chenhj

2 天以前 cac302f302084ab310d0e35339f30966a4829a4e

 src/views/financialManagement/loanManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,271 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="借款人姓名:">
        <el-input
          v-model="filters.borrowerName"
          placeholder="请输入借款人姓名"
          clearable
          style="width: 200px;"
        />
      </el-form-item>
      <el-form-item label="借款日期:">
        <el-date-picker
          v-model="filters.borrowDate"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="changeDaterange"
        />
      </el-form-item>
      <el-form-item label="借款状态:">
        <el-select
          v-model="filters.status"
          placeholder="请选择"
          clearable
          style="width: 200px;"
        >
          <el-option label="待还款" :value="1" />
          <el-option label="已还款" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> æ–°å¢ž </el-button>
          <el-button @click="handleOut" icon="download">导出</el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            @click="deleteRow(multipleList.map((item) => item.id))"
          >
            æ‰¹é‡åˆ é™¤
          </el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
        <template #operation="{ row }">
          <el-button type="primary" link @click="edit(row)">
            ç¼–辑
          </el-button>
          <el-button
            :disabled="row.status !== 1"
            type="primary"
            link
            @click="repay(row)"
          >
            è¿˜æ¬¾
          </el-button>
        </template>
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { listPage, delAccountLoan } from "@/api/financialManagement/loanManagement";
import { onMounted, getCurrentInstance, ref, nextTick } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";

defineOptions({
  name: "借款管理",
});

// è¡¨æ ¼å¤šé€‰æ¡†é€‰ä¸­é¡¹
const multipleList = ref([]);
const { proxy } = getCurrentInstance();
const modalRef = ref();

const {
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  listPage,
  {
    borrowerName: undefined,
    borrowDate: undefined,
    status: undefined,
  },
  [
    {
      label: "借款人姓名",
      prop: "borrowerName",
    },
    {
      label: "借款金额（元）",
      prop: "borrowAmount",
      formatData: (val) => {
        return val ? `Â¥${parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : 'Â¥0.00';
      },
    },
    {
      label: "借款利率（%）",
      prop: "interestRate",
      formatData: (val) => {
        return val ? `${parseFloat(val).toFixed(2)}%` : '-';
      },
    },
    {
      label: "借款日期",
      prop: "borrowDate",
    },
    {
      label: "实际还款日期",
      prop: "repayDate",
    },
    {
      label: "借款状态",
      prop: "status",
      dataType: "tag",
         align: 'center',
      formatData: (params) => {
        if (params == 1) {
          return "待还款";
        } else if (params == 2) {
          return "已还款";
        }
        return null;
      },
      formatType: (params) => {
        if (params == 1) {
          return "error";
        } else if (params == 2) {
          return "success";
        }
        return null;
      },
    },
    {
      fixed: "right",
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: "120px",
    },
  ],
  null,
  {
    // å°†å‰ç«¯å€Ÿæ¬¾æ—¥æœŸèŒƒå›´è½¬æ¢ä¸ºåŽç«¯éœ€è¦çš„ entryDateStart / entryDateEnd，并且不传 borrowDate
    borrowDate: (val) => {
      if (val && val.length === 2) {
        return {
          entryDateStart: dayjs(val[0]).format("YYYY-MM-DD"),
          entryDateEnd: dayjs(val[1]).format("YYYY-MM-DD"),
        };
      }
      return {};
    },
  }
);

// å¤šé€‰åŽåšä»€ä¹ˆ
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};

const add = () => {
  modalRef.value.openModal();
};

const edit = (row) => {
  modalRef.value.loadForm(row);
};

const repay = (row) => {
  modalRef.value.repay(row);
};

const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  onCurrentChange(page);
};

const deleteRow = (id) => {
  ElMessageBox.confirm("此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delAccountLoan(id);
    if (code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getTableData();
    }
  });
};

const changeDaterange = (value) => {
  if (value) {
    filters.borrowDate = value;
  } else {
    filters.borrowDate = null;
  }
  getTableData();
};

const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download(`/borrowInfo/export`, {}, "借款台账.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>