|
|
@@ -1,26 +1,34 @@
|
|
|
<template>
|
|
|
+ <!-- 成本验证数据页面主容器 -->
|
|
|
<div class="log">
|
|
|
+ <!-- 顶部按钮区域 -->
|
|
|
<div class='btn-box'>
|
|
|
+ <!-- 筛选条件按钮：显示已选项数量或默认文本 -->
|
|
|
<el-button type="primary" plain class='query-btn'
|
|
|
@click='dialogShow'>{{selectedKeys.length?`已选${selectedKeys.length}项`:'筛选条件'}}</el-button>
|
|
|
+ <!-- 导出按钮 -->
|
|
|
<div class='query-btn'>
|
|
|
<DowButton @endAnim='downloadFile'></DowButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 查询表单组件 -->
|
|
|
<QueryForm :option="listOption" @query='query' @delSelect='delSelect' ref='queryFormRef'></QueryForm>
|
|
|
|
|
|
- <!-- 表格 -->
|
|
|
+ <!-- 数据表格：展示成本验证数据列表 -->
|
|
|
<ComplexTable :tableData="tableData" :showSelect='false' :columns="listOption.columns" :showIndex="false"
|
|
|
:columnwidth="120" :pageInfo="pageInfo" @getList="getList">
|
|
|
+ <!-- 操作列：明细按钮 -->
|
|
|
<template v-slot:operation="scope">
|
|
|
<el-button type="primary" link @click='agreementEdit(scope.operationData.id)'>明细</el-button>
|
|
|
</template>
|
|
|
|
|
|
+ <!-- 排序组件插槽 -->
|
|
|
<template v-slot:search="scope">
|
|
|
<Sort :scope="scope.slotData" :globalSortKey="globalSortKey" :globalSortOrder="globalSortOrder"
|
|
|
@update:sort="handleSortUpdate"></Sort>
|
|
|
</template>
|
|
|
|
|
|
+ <!-- 自定义列内容插槽：处理特殊格式显示 -->
|
|
|
<template #customSlot="{ bodyCell: { scope, column } }">
|
|
|
<template v-if="column.prop == 'pendingReviewNum'">
|
|
|
{{ scope.row.pendingReviewNum }} 笔
|
|
|
@@ -40,6 +48,7 @@
|
|
|
</template>
|
|
|
</ComplexTable>
|
|
|
|
|
|
+ <!-- 筛选弹窗：用于配置查询表单字段 -->
|
|
|
<FilterDialog :show='isShow' @close='isShow=false' @sure='filterSure' ref='filterDialogRef' @selectedKeys='selected'
|
|
|
routerKey='routerKey'>
|
|
|
</FilterDialog>
|
|
|
@@ -47,33 +56,54 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { useRouter } from "vue-router";
|
|
|
-import api from "@/api";
|
|
|
-import QueryForm from "../../components/queryForm.vue";
|
|
|
-import FilterDialog from "../../components/filterDialog.vue";
|
|
|
-import DowButton from "../../components/button.vue";
|
|
|
-import Sort from "../../components/sort.vue";
|
|
|
-import useUserStore from "@/store/modules/message";
|
|
|
-import PageInfo from "@/api/types/agreementTypes";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
+/**
|
|
|
+ * 成本验证数据页面
|
|
|
+ * 功能：展示保险公司成本验证数据列表，支持筛选、排序、分页、导出等操作
|
|
|
+ */
|
|
|
+import { useRouter } from "vue-router"; // 路由工具
|
|
|
+import api from "@/api"; // API接口
|
|
|
+import QueryForm from "../../components/queryForm.vue"; // 查询表单组件
|
|
|
+import FilterDialog from "../../components/filterDialog.vue"; // 筛选弹窗组件
|
|
|
+import DowButton from "../../components/button.vue"; // 导出按钮组件
|
|
|
+import Sort from "../../components/sort.vue"; // 排序组件
|
|
|
+import useUserStore from "@/store/modules/message"; // 用户状态管理
|
|
|
+import PageInfo from "@/api/types/agreementTypes"; // 分页类型定义
|
|
|
+import { ElMessage } from "element-plus"; // 消息提示
|
|
|
|
|
|
+// 路由实例
|
|
|
const router = useRouter();
|
|
|
+// 用户状态存储
|
|
|
const userStore = useUserStore();
|
|
|
+// 筛选弹窗显示状态
|
|
|
const isShow = ref(false);
|
|
|
|
|
|
+// 排序状态（未使用）
|
|
|
const isSort = ref();
|
|
|
+
|
|
|
+/**
|
|
|
+ * 分页信息
|
|
|
+ * @property {number} pageNum - 当前页码
|
|
|
+ * @property {number} pageSize - 每页条数
|
|
|
+ * @property {number[]} sizes - 可选每页条数
|
|
|
+ * @property {number} total - 总记录数
|
|
|
+ */
|
|
|
const pageInfo = ref({
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
sizes: [10, 20, 30, 40, 50],
|
|
|
total: 0,
|
|
|
});
|
|
|
+
|
|
|
+/**
|
|
|
+ * 列表配置选项
|
|
|
+ * @property {string} rowKey - 行唯一标识字段
|
|
|
+ * @property {Array} queryFormFields - 查询表单字段列表
|
|
|
+ * @property {Array} columns - 表格列配置
|
|
|
+ */
|
|
|
const listOption = reactive({
|
|
|
rowKey: "costVerId",
|
|
|
- //查询
|
|
|
- queryFormFields: [],
|
|
|
- // 表格列
|
|
|
- columns: [
|
|
|
+ queryFormFields: [], // 查询表单字段
|
|
|
+ columns: [ // 表格列配置
|
|
|
{
|
|
|
prop: "companyName",
|
|
|
label: "保险公司",
|
|
|
@@ -122,30 +152,49 @@ const listOption = reactive({
|
|
|
],
|
|
|
});
|
|
|
|
|
|
+// 已选择的筛选字段ID列表
|
|
|
const selectedKeys = ref([]);
|
|
|
+
|
|
|
+/**
|
|
|
+ * 更新已选择字段列表
|
|
|
+ * @param {Array} val - 选中的字段ID数组
|
|
|
+ */
|
|
|
const selected = function (val) {
|
|
|
selectedKeys.value = val;
|
|
|
};
|
|
|
|
|
|
-//查询数据
|
|
|
+// 当前登录用户账号（从localStorage获取）
|
|
|
const phone = JSON.parse(localStorage.getItem("userInfo")).username;
|
|
|
|
|
|
-//获取默认选择数据
|
|
|
+// 查询表单结果
|
|
|
const queryFormRes = ref();
|
|
|
+// 当前页面路由标识（用于区分不同页面的筛选配置）
|
|
|
const routerKey = ref("costVerificationData");
|
|
|
+// 默认选择的字段列表
|
|
|
const defaultList = ref();
|
|
|
-const pageHiddenList = ref([]); //页面不显示的数据
|
|
|
+// 页面不显示的字段列表（默认隐藏的字段）
|
|
|
+const pageHiddenList = ref([]);
|
|
|
+
|
|
|
+/**
|
|
|
+ * 初始化默认筛选字段配置
|
|
|
+ * 从服务端获取当前用户在该页面的默认筛选配置
|
|
|
+ */
|
|
|
const initDefaultList = async () => {
|
|
|
const { data } = await api.manageApi.getSearchDefaultList({
|
|
|
routerKey: routerKey.value,
|
|
|
userId: phone,
|
|
|
});
|
|
|
+ // 筛选出需要显示的字段
|
|
|
listOption.queryFormFields = data.filter((e) => e.showFlag);
|
|
|
-
|
|
|
+ // 筛选出默认隐藏的字段
|
|
|
pageHiddenList.value = data.filter((e) => !e.showFlag);
|
|
|
+ // 保存所有字段ID作为默认列表
|
|
|
defaultList.value = data.map((e) => e.id);
|
|
|
+ // 设置已选字段
|
|
|
selectedKeys.value = defaultList.value;
|
|
|
+ // 初始化查询表单默认值
|
|
|
queryFormRes.value = queryFormRef.value?.initDefaultSaveForm();
|
|
|
+ // 执行初始查询
|
|
|
queryList();
|
|
|
};
|
|
|
|
|
|
@@ -190,9 +239,18 @@ const filterSure = (item, index) => {
|
|
|
selectedKeys.value = item.list.filter((item) => item.id);
|
|
|
};
|
|
|
|
|
|
+// 全局排序字段
|
|
|
const globalSortKey = ref("");
|
|
|
+// 全局排序方向（升序/降序）
|
|
|
const globalSortOrder = ref<"asc" | "desc">("asc");
|
|
|
-// 处理子组件传递的排序更新
|
|
|
+
|
|
|
+/**
|
|
|
+ * 处理排序更新事件
|
|
|
+ * @param {Object} sortInfo - 排序信息
|
|
|
+ * @param {string} sortInfo.key - 排序字段
|
|
|
+ * @param {string} sortInfo.order - 排序方向
|
|
|
+ * @param {string} sortInfo.name - 排序字段名称
|
|
|
+ */
|
|
|
const handleSortUpdate = (sortInfo: {
|
|
|
key: string;
|
|
|
order: string;
|
|
|
@@ -200,17 +258,27 @@ const handleSortUpdate = (sortInfo: {
|
|
|
}) => {
|
|
|
globalSortKey.value = sortInfo.key;
|
|
|
globalSortOrder.value = sortInfo.order;
|
|
|
+ // 重新查询数据
|
|
|
queryList();
|
|
|
};
|
|
|
|
|
|
-//查询
|
|
|
+/**
|
|
|
+ * 处理查询表单提交
|
|
|
+ * @param {Object} item - 查询条件
|
|
|
+ */
|
|
|
const query = (item) => {
|
|
|
queryFormRes.value = item;
|
|
|
+ // 重新查询数据
|
|
|
queryList();
|
|
|
};
|
|
|
|
|
|
-//数据查询
|
|
|
+// 表格数据
|
|
|
const tableData = ref([]);
|
|
|
+
|
|
|
+/**
|
|
|
+ * 查询成本验证数据列表
|
|
|
+ * 支持分页、排序、筛选条件
|
|
|
+ */
|
|
|
const queryList = async () => {
|
|
|
let query = { ...queryFormRes.value };
|
|
|
const { data } = await api.manageApi.costVerificationDataPageList({
|
|
|
@@ -223,7 +291,9 @@ const queryList = async () => {
|
|
|
: "",
|
|
|
...query,
|
|
|
});
|
|
|
+ // 更新表格数据
|
|
|
tableData.value = data.records;
|
|
|
+ // 更新分页信息
|
|
|
pageInfo.value.pageNum = data.current;
|
|
|
pageInfo.value.pageSize = data.size;
|
|
|
pageInfo.value.total = data.total;
|
|
|
@@ -267,19 +337,25 @@ const agreementEdit = (id) => {
|
|
|
|
|
|
onMounted(() => {
|
|
|
initDefaultList();
|
|
|
+ console.log(listOption.queryFormFields);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+// 页面容器样式
|
|
|
.log {
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 120px);
|
|
|
background: #ffffff;
|
|
|
padding: 24px;
|
|
|
overflow-y: auto;
|
|
|
+
|
|
|
+ // 查询按钮样式
|
|
|
.query-btn {
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
+
|
|
|
+ // 按钮区域样式
|
|
|
.btn-box {
|
|
|
padding-bottom: 15px;
|
|
|
margin-bottom: 24px;
|
|
|
@@ -288,7 +364,9 @@ onMounted(() => {
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 隐藏排序组件的下拉箭头
|
|
|
:deep(.caret-wrapper) {
|
|
|
display: none !important;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
