tenant-Platform/src/views/insurancePolicy/adjustRecord.vue

<script setup lang="ts">
import api from '@/api';
import { useRoute, useRouter } from 'vue-router';
import { dictData } from '@/views/localDict/index';
import { loadDicts, getDict } from '@/utils/composables/dictService';
import { downloadByData } from '@/utils/composables/download';

interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
// router
const route = useRoute();
const router = useRouter();
// state
const typeData = dictData.ADJUST_TYPEDATA;
const statusData = dictData.ADJUST_STATUSDATA;
const companyData = ref([]);
// table
const tableData = ref([]);
const pageInfo = ref<PageInfo>({
	pageNum: 1,
	pageSize: 10,
	sizes: [10, 20, 30, 40, 50],
	total: 0,
});
const columns: any = [
	{
		prop: "orderNo", label: "订单号", width: 200,
	},
	{
		prop: "licenseNo", label: "车牌号", width: 100,
	},
	{
		prop: "companyName", label: "保险公司", width: 200,
	},
	{
		prop: "premium", label: "保费", width: 150,
		formatter: (row: any) => {
			return '¥' + row.premium
		}
	},
	{
		prop: "status", label: "批单状态", width: 150, component: "Tag",
		formatter: (row: any) => {
			// let name = getDict('is_enable').find(val => val.value == 1).label;
			// 批单状态 0.订单批改中 1.待审核 2.审核通过 3.退回修改 4.拒绝批改
			let name = statusData.find(val => val.value == row.status)?.label;
			let type = 'primary';
			if (row.status === 4) {
				type = 'danger';
			} else if (row.status === 3) {
				type = 'warning';
			}
			return { type: type, text: name };
		}
	},
	{
		prop: "type", label: "批改类型", width: 150,
		formatter: (row: any) => {
			let name = typeData.find(val => val.value == row.type)?.label;
			return name;
		}
	},
	{
		prop: "changePremium", label: "保费变化", width: 150,
		formatter: (row: any) => {
			if (!row.afterPremium) {
				return '--';
			}
			let val = (((row.premium * 100) - (row.afterPremium * 100)) / 100);
			return val > 0 ? `-¥${val}` : `¥${Math.abs(val)}`;
		}
	},
	{
		prop: "afterPremium", label: "批改后保费", width: 150,
		formatter: (row: any) => {
			return row.afterPremium ? `¥${row.afterPremium}` : '--';
		}
	},
	{
		prop: "createBy", label: "批改人", width: 150,
	},
	{
		prop: "createTime", label: "批改时间", width: 200,
	},
];
// search
const fields = computed(() => {
	return [
		{
			label: "订单号", model: "orderNo", type: "input", placeholder: "输入订单号查找",
		},
		{
			label: "车牌号", model: "licenseNo", type: "input", placeholder: "输入车牌号查找",
		},
		{
			label: "保险公司", model: "companyId", type: "select", filterable: true, options: companyData.value,
		},
		{
			label: "业务员信息", model: "salesman", type: "input", placeholder: "输入业务员姓名、手机号查找",
		},
		{
			label: "录入类型", model: "entryStatus", type: "select", closeable: false, options: dictData.ADJUST_ENTRYSTATUSDATA,
		},
		{
			label: "批改状态", model: "status", type: "select", options: statusData,
		},
		{
			label: "批改类型", model: "type", type: "select", options: typeData,
		},
		{
			label: "批改时间", model: "time", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
      format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DD HH:mm:ss", timeFormat: "HH:mm:ss",
			onChange: (value: any) => {
				if (value) {
					formInline.value.endDate = value[1];
					formInline.value.startDate = value[0];
				} else {
					formInline.value.endDate = '';
					formInline.value.startDate = '';
				}
			}
		},
	]
});
const initialForm = {
	time: [],
	endDate: '',
	startDate: '',
	entryStatus: 1
};
const formInline = ref<any>({ ...initialForm });

// 生命周期
onBeforeMount(async () => {
	// 路由参数
	if (route.query.orderNo) formInline.value.orderNo = route.query.orderNo;
	// 获取多个字典
	// await loadDicts(['valid_status', 'is_enable', 'audit_status', 'insurance_type']);
	api.insuranceApi.leftList('').then((res: any) => {
        if(res.code == 200) {
            companyData.value = res.data.map((item: any) => ({
				label: item.name,
				value: item.id
			}));
        }
    });
	// table数据
	getData();
});

// 分页数据
const getData = () => {
	const { time, ...params } = formInline.value;
	api.insurancePolicyApi.adjustList({
		pages: pageInfo.value.pageNum,
		size: pageInfo.value.pageSize,
		...params
	}).then((res: any) => {
		if (res.code == '200') {
			tableData.value = res.data.records;
			// 分页
			pageInfo.value.total = res.data.total;
			pageInfo.value.pageNum = res.data.current;
			pageInfo.value.pageSize = res.data.size;
		}
	});
};
// 搜索事件
const searchForm = () => {
	getData();
}
const resetForm = () => {
	formInline.value = { ...initialForm };
	getData();
}
// 分页事件
const getList = (item: PageInfo) => {
	pageInfo.value.pageNum = item.pageNum;
	pageInfo.value.pageSize = item.pageSize;
	getData();
};
// 多选事件
const selectionChange = (val: any) => {
	console.log('sel', val)
};
// 导出事件
const exportLoading = ref(false);
const handleExport = () => {
	exportLoading.value = true;
	const { time, ...params } = formInline.value;
    api.insurancePolicyApi.exportAdjustList(params).then((res: any) => {
        const fileName = '批改明细' + new Date().getTime() + '.xlsx';
		downloadByData(res, fileName, 'application/vnd.ms-excel');
    }).finally(() => {
		exportLoading.value = false;
	});
}
// 详情
const toDetail = (e: any) => {
    router.push({
        path: '/insurancePolicy/adjustRecord/detail',
        query: {
            id: e.operationData.id,
			orderNo: e.operationData.orderNo,
        }
    });
	// window.open(`/#/insurancePolicy/adjustRecord/detail?id=${e.operationData.id}&orderNo=${e.operationData.orderNo}`, '_blank');
}

defineOptions({
	name: 'InsurancePolicyRecord',
})
</script>

<template>
	<PageMain class="vh100">
		<SearchForm :isOffset="true"
			:fields="fields" :formInline="formInline"
			:onSearch="searchForm" :onReset="resetForm"
		/>
		<ComplexTable
			:columns="columns" :columnwidth="200"
			:showIndex="false" :showSelect="true"
			:pageInfo="pageInfo"
			:tableData="tableData"
			@getList="getList"
			@selectionChange="selectionChange">
			<template v-slot:table-title-btn>
				<el-button class="radius-2px width-100" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
			</template>
			<template v-slot:operation="scope">
				<el-button type="primary" link
					@click="toDetail(scope)">
					详情
				</el-button>
			</template>
		</ComplexTable>
	</PageMain>
</template>

<style lang="scss" scoped>
/* 样式 */
</style>