tenant-Platform/src/views/partnerManagement/purchaseHistory.vue

<!-- 模板区域 -->
<template>
  <div>
    <PageMain class="vh100 flex-1 overflow-hidden flex flex-col">
      <SearchForm :fields="fields" :formInline="formInline" :onSearch="findpage" :onReset="resetForm" />
      <div class="flex-1 overflow-auto">
        <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="250"
          :showOperation="false" :showSelect="false" :pageInfo="pageInfo" @getList="getList">
          <template #customSlot="{ bodyCell: { scope, column } }">
            <template v-if="column.prop == 'apperId'">
              <el-button link type="primary" @click="purchaseVoucher(scope.row.apperId)">查看凭证</el-button>
            </template>
          </template>
          <template v-slot:search="scope">
            {{ scope.slotData.label }}
          </template>
        </ComplexTable>
      </div>
    </PageMain>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import api from '@/api'

// 页面加载时获取机构列表
onBeforeMount(() => {
  getGradeOptions();
  findpage();
});
interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
// 机构树相关变量
const tableData = ref([
  {
    "id": "2008711122119659522",
    "name": "杨密",
    "mobile": "15513920005",
    "userId": "99140602006",
    "deptId": null,
    "deptName": "朔州朔城区营业部",
    "grade": "3",
    "gradeAfter": "4",
    "lockCommission": 0,
    "purchasingTime": "2026-01-07 09:23:46",
    "apperId": "2008711122077716482",
    "pageNum": 1,
    "pageSize": 10,
    "startTime": null
  }
]);//表格数据
const showViewer = ref(false);//是否显示查看凭证弹窗
const formInline = reactive({
  name: "",//姓名
  mobile: "",//手机号
  userId: "",//工号
  signingTime: [],
})
const pageInfo = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
});
// 获取人员等级列表
const userGradeList = ref()
const getGradeOptions = () => {
  api.partnerApi.queryGradeName().then((res: any) => {
    if (res.code === 200) {
      userGradeList.value = res.data;
    }
  })
}
//表格字段数据
const fields = ref([
  { label: "姓名", model: "name", type: "input", placeholder: "请输入姓名" },
  {
    label: "手机号", model: "mobile", type: "input", placeholder: "请输入手机号"
  },
  {
    label: "工号", model: "userId", type: "input", placeholder: "请输入工号"
  },
  {
    label: "购买时间", model: "signingTime", type: "date", dateType: "daterange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    format: "YYYY-MM-DD", valueFormat: "YYYY-MM-DD",
  },
]);
const columns = [
  { prop: "name", label: "姓名", },
  { prop: "mobile", label: "手机号", width: '200' },
  { prop: "userId", label: "工号", width: '200' },
  { prop: "deptName", label: "所属机构", width: '200' },
  {
    prop: "grade", label: "降级前", width: '200',
    formatter: (row: any) => {
      return userGradeList.value?.find((item: any) => item.grade === row.grade)?.gradeName || '未知等级';
    }
  },
  {
    prop: "gradeAfter", label: "降级后", width: '200',
    formatter: (row: any) => {
      return userGradeList.value?.find((item: any) => item.grade === row.gradeAfter)?.gradeName || '未知等级';
    }
  },
  { prop: "lockCommission", label: "锁定佣金", width: '200' },
  { prop: "purchasingTime", label: "购买时间", width: '200' },
  { prop: "apperId", label: "购买凭证", width: '200', component: "customSlot" },
];

//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  findpage();

};
const resetForm = () => {
  Object.assign(formInline, {
    name: "",//姓名
    mobile: "",//手机号
    userId: "",//工号
    signingTime: [],
  })
  findpage();
}
//数据查询
function findpage() {
  let query = { ...formInline }
  api.partnerApi.kickbackChangeQueryPage({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...query }).then((res: any) => {
    if (res.code == '200') {
      // tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.pageSize = res.data.size;
      pageInfo.value.total = res.data.total;
    } else {
    }
  });
}
const purchaseVoucher = (id: any) => {
  api.partnerApi.purchaseviewVouchers(id).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
      });
      showViewer.value = true;
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
      });
    }
  });
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

:deep(.el-dropdown-link) {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  margin-left: 15px;
}
</style>