FE_sandTable/src/views/finance/Fund.vue

<template>
  <div>
    <h6 class="pl-3 mb-4 text-lg font-semibold text-[#333] border-l-[5px] border-l-[#006BFF]">保险市场</h6>
    <div class="filter block">
      <dl>
        <dt>申购费率：</dt>
        <div class="vals">
          <dd v-for="(item, i) in rates"
              :key="i"
              :class="{ active: params.insuranceType === item.id }"
              @click="filterClick(item, 'insuranceType')">{{ item.name }}</dd>
        </div>
      </dl>
      <dl>
        <dt>成立年限：</dt>
        <div class="vals">
          <dd v-for="(item, i) in times"
              :key="i"
              :class="{ active: params.guarantyStyleId === item.id }"
              @click="filterClick(item, 'guarantyStyleId')">{{ item.name }}</dd>
        </div>
      </dl>
      <dl>
        <dt>基金规模：</dt>
        <div class="vals">
          <dd v-for="(item, i) in scales"
              :key="i"
              :class="{ active: params.loanPeriod === item.name }"
              @click="filterClick(item, 'loanPeriod')">{{ item.name }}</dd>
        </div>
      </dl>
    </div>
    <div class="block mt-3">
      <div class="search mb-2">
        <input type="text"
               placeholder="搜索"
               maxlength="20" />
        <img src="@/assets/images/search.png"
             alt=""
             class="icon" />
      </div>
      <el-table ref="table"
                v-loading="loading"
                :data="list">
        <el-table-column prop="productName"
                         label="基金代码"
                         min-width="80"></el-table-column>
        <el-table-column prop="productTypeText"
                         label="基金名称"
                         min-width="110"></el-table-column>
        <el-table-column prop="guarantyStyle"
                         label="现净值"
                         min-width="80"></el-table-column>
        <el-table-column prop="loanPeriod"
                         label="日增长率(%)"
                         min-width="80"></el-table-column>
        <el-table-column prop="loanLimit"
                         label="近1周(%)"
                         min-width="80"></el-table-column>
        <el-table-column prop="userName"
                         label="近1月(%)"
                         min-width="80"></el-table-column>
        <el-table-column prop="userName"
                         label="近3月(%)"
                         min-width="80"></el-table-column>
        <el-table-column prop="userName"
                         label="成立来(%)"
                         min-width="80"></el-table-column>
        <el-table-column prop="userName"
                         label="基金规模(万元)"
                         min-width="80"></el-table-column>
        <el-table-column prop="operationTime"
                         label="产品经理"
                         min-width="80"></el-table-column>
        <el-table-column prop="operationTime"
                         label="发布日期"
                         min-width="80"></el-table-column>
        <el-table-column prop="id"
                         label="操作"
                         width="100">
          <template #default="{ row }">
            <el-button type="text"
                       size="small"
                       @click="toDetail(row)">查看详情</el-button>
          </template></el-table-column>
      </el-table>
      <el-pagination v-model:currentPage="currentPage"
                     v-model:pageSize="pageSize"
                     :total="total"
                     :page-sizes="pageSizes"
                     :layout="pageLayout"
                     @size-change="getList()"
                     @current-change="getList()"
                     small
                     background
                     class="px-3 py-2 justify-end"></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { pageSizes, pageLayout, toParams } from '@/utils/common';
import { fundProductList, batchDeletion } from '@/api/fund';
import { useRouter, useRoute } from 'vue-router';
import Cookies from 'js-cookie';

const router = useRouter();
const route = useRoute();
const projectId = +Cookies.get('sand-projectId');
const levelId = +Cookies.get('sand-level');
const params = reactive({
  createDateSort: '',
  fundName: '',
  checkPointId: levelId,
  projectId,
});
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const table = ref<any>();
const rates = ref<Record<string, any>[]>([
  {
    id: '',
    name: '不限',
  },
  {
    id: 1,
    name: '0',
  },
  {
    id: 2,
    name: '0-0.5%',
  },
  {
    id: 3,
    name: '>0.5%',
  },
]);
const times = ref<Record<string, any>[]>([
  {
    id: '',
    name: '不限',
  },
  {
    id: 1,
    name: '<=1个月',
  },
  {
    id: 2,
    name: '1-6个月',
  },
  {
    id: 3,
    name: '6个月-1年',
  },
  {
    id: 4,
    name: '>1年',
  },
]);
const scales = ref<Record<string, any>[]>([
  {
    id: '',
    name: '不限',
  },
  {
    id: 1,
    name: '<=300万',
  },
  {
    id: 2,
    name: '300-500万',
  },
  {
    id: 3,
    name: '500-1000万',
  },
  {
    id: 4,
    name: '>1000万',
  },
]);

const list = ref<Record<string, any>[]>([]);
const loading = ref<boolean>(false);
const stop = () => {};
// 列表
const getList = async () => {
  loading.value = true;
  try {
    const { data } = await fundProductList({ pageNum: currentPage.value, pageSize: pageSize.value, ...toParams(params) });
    list.value = data.data.records;
    total.value = data.data.total;
  } finally {
    loading.value = false;
  }
};
// 重置列表
const initList = async () => {
  currentPage.value = 1;
  getList();
};
onMounted(() => {
  getList();
});

watch([params, () => route.query], initList);
const handleSort = ({ column, prop, order }: { column: any; prop: string; order: string }) => {
  params.createDateSort = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : '';
  getList();
};
// 新增
const toAdd = () => {
  router.push({
    path: `/product/fund/add`,
  });
};
// 产品详情
const toDetail = async (path: string, id: number) => {
  router.push(`${path}?id=${id}&name=${params.fundName}`);
};
// 卡片模式
const toCardList = () => {
  router.push(`/product/fund/${list.value.length ? `detail?id=${list.value[0].id}&name=${params.fundName}` : `add?name=${params.fundName}`}`);
};

const handleDelete = async (id: number) => {
  await batchDeletion([id]);
  getList();
  ElMessage.success('删除成功！');
};
</script>
<style lang="scss" scoped>
.filter {
  dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 17px;
    &:last-child {
      margin-bottom: 0;
    }
    dt,
    dd {
      font-size: 14px;
      font-family: MiSans;
      color: #333;
    }
    .vals {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      margin-left: 10px;
    }
    dd {
      padding: 6px 10px;
      margin-right: 10px;
      cursor: pointer;
    }
    .active {
      color: #fff;
      background: #006bff;
      border-radius: 4px;
    }
  }
}
.search {
  position: relative;
  width: 320px;
  padding: 0 12px;
  background-color: #f6f8fc;
  border-radius: 8px;
  input {
    width: 90%;
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    color: #333;
    border: 0;
    background-color: transparent;
    &:focus {
      outline: none;
    }
  }
  .icon {
    position: absolute;
    top: 9px;
    right: 12px;
    cursor: pointer;
  }
}
</style>