作者 xiaoqiu

完成保险大厅页面功能搭建

# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 车险登记平台
# 开发环境配置
VITE_APP_ENV = 'development'
... ...
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 车险登记平台
# 生产环境配置
VITE_APP_ENV = 'production'
... ...
<template>
<div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<div
class="sidebar-logo-container"
:class="{ collapse: collapse }"
:style="{
backgroundColor:
sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground,
}"
>
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<router-link
v-if="collapse"
key="collapse"
class="sidebar-logo-link"
to="/"
>
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
<h1
v-else
class="sidebar-title"
:style="{
color:
sideTheme === 'theme-dark'
? variables.logoTitleColor
: variables.logoLightTitleColor,
}"
>
{{ title }}
</h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
<h1
class="sidebar-title"
:style="{
color:
sideTheme === 'theme-dark'
? variables.logoTitleColor
: variables.logoLightTitleColor,
}"
>
{{ title }}
</h1>
</router-link>
</transition>
</div>
</template>
<script setup>
import variables from '@/assets/styles/variables.module.scss'
import logo from '@/assets/logo/logo.png'
import useSettingsStore from '@/store/modules/settings'
import variables from "@/assets/styles/variables.module.scss";
import logo from "@/assets/logo/logo.png";
import useSettingsStore from "@/store/modules/settings";
defineProps({
collapse: {
type: Boolean,
required: true
}
})
required: true,
},
});
const title = ref('若依管理系统');
const title = ref(import.meta.env.VITE_APP_TITLE);
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>
... ...
... ... @@ -60,15 +60,7 @@ export const constantRoutes = [
{
path: '',
component: Layout,
redirect: '/index',
children: [
{
path: '/index',
component: () => import('@/views/index'),
name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true }
}
]
redirect: '/policy/pending'
},
{
path: '/user',
... ...
<template>
<div>审核名单</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<div>已作废</div>
<div class="app-container">
<!-- 筛选条件 -->
<el-form
:model="queryParams"
ref="queryRef"
v-show="showSearch"
:inline="true"
label-width="68px"
>
<el-form-item label="用户姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="车牌号" prop="carNum">
<el-input
v-model="queryParams.carNum"
placeholder="请输入车牌号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="操作人员" prop="editAuth">
<el-input
v-model="queryParams.editAuth"
placeholder="填写操作人员"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>查询</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格数据 -->
<el-table
v-loading="loading"
:data="policyList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="序号"
prop="policyId"
width="120"
align="center"
/>
<el-table-column
label="登记时间"
prop="createTime"
width="150"
align="center"
/>
<el-table-column
label="车牌号"
prop="carNum"
width="150"
align="center"
/>
<el-table-column label="车架号" prop="frameNum" align="center" />
<el-table-column
label="车主姓名"
prop="name"
width="100"
align="center"
/>
<el-table-column
label="联系电话"
prop="phone"
width="180"
align="center"
/>
<el-table-column
label="操作时间"
align="center"
prop="authTime"
width="150"
/>
<el-table-column
label="操作人员"
align="center"
prop="editAuth"
width="120"
/>
<el-table-column label="作废备注" fixed="right" width="120" prop="remark">
<template #default>
<el-button type="primary">查阅</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
export default {};
<script setup>
const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(5);
const showSearch = ref(true);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
name: "",
carNum: "",
editAuth: "",
assignment: "",
status: "",
});
const statusOption = ref([
{
value: 0,
label: "疑难件",
},
{
value: 1,
label: "已办结",
},
]);
const options = [
{
value: 0,
label: "系统分配",
},
{
value: 1,
label: "人工分配",
},
];
const policyList = ref([
{
policyId: 1,
createTime: "2024-01-01",
carNum: "桂A 1234",
frameNum: "123456789012345678",
name: "张三",
phone: "12345678901",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
statue: 0,
},
{
policyId: 2,
createTime: "2024-01-02",
carNum: "粤B 1234",
frameNum: "123456789012345678",
name: "李四",
phone: "12345678902",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
status: 0,
},
{
policyId: 3,
createTime: "2024-01-03",
carNum: "粤C 1234",
frameNum: "123456789012345678",
name: "王五",
phone: "12345678903",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
status: 0,
},
{
policyId: 4,
createTime: "2024-01-04",
carNum: "粤D 1234",
frameNum: "123456789012345678",
name: "赵六",
phone: "12345678904",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
handler: "张三",
status: 1,
},
{
policyId: 5,
createTime: "2024-01-05",
carNum: "粤E 1234",
frameNum: "123456789012345678",
name: "孙七",
phone: "12345678905",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
handler: "张三",
status: 1,
},
]);
/** 多选框选中数据 */
function handleSelectionChange(selection) {
// ids.value = selection.map(item => item.roleId);
// single.value = selection.length != 1;
// multiple.value = !selection.length;
console.log(selection);
}
const getList = () => {};
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
</script>
<style></style>
... ...
<template>
<div>已完结</div>
</template>
<script>
export default {};
</script>
<style></style>
<template>
<div class="app-container">
<!-- 筛选条件 -->
<el-form
:model="queryParams"
ref="queryRef"
v-show="showSearch"
:inline="true"
label-width="68px"
>
<el-form-item label="用户姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="车牌号" prop="carNum">
<el-input
v-model="queryParams.carNum"
placeholder="请输入车牌号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="操作人员" prop="editAuth">
<el-input
v-model="queryParams.editAuth"
placeholder="填写操作人员"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="分配机制" prop="assignment">
<el-select
v-model="queryParams.assignment"
placeholder="系统分配"
clearable
style="width: 200px"
>
<el-option
v-for="dict in options"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="保单状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="选择进度"
clearable
style="width: 200px"
>
<el-option
v-for="dict in statusOption"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>查询</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格数据 -->
<el-table
v-loading="loading"
:data="policyList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="序号"
prop="policyId"
width="120"
align="center"
/>
<el-table-column
label="登记时间"
prop="createTime"
width="150"
align="center"
/>
<el-table-column
label="车牌号"
prop="carNum"
width="150"
align="center"
/>
<el-table-column
label="车架号"
prop="frameNum"
width="240"
align="center"
/>
<el-table-column
label="车主姓名"
prop="name"
width="100"
align="center"
/>
<el-table-column
label="联系电话"
prop="phone"
width="180"
align="center"
/>
<el-table-column
align="center"
label="分配机制"
width="120"
prop="assignment"
>
<template #default="scope">
<span>{{
scope.row.assignment === 0 ? "系统分配" : "人工分配"
}}</span>
</template>
</el-table-column>
<el-table-column
label="承保公司"
prop="company"
width="150"
align="center"
/>
<el-table-column
label="办理人"
prop="handler"
width="100"
align="center"
/>
<el-table-column label="保单状态" width="100" prop="statue">
<template #default="scope">
<span
:style="{ color: scope.row.status === 0 ? '#409EFF' : '#67C23A' }"
>{{ scope.row.status === 0 ? "疑难件" : "已办结" }}</span
>
</template>
</el-table-column>
<el-table-column
label="保单回馈"
fixed="right"
width="100"
prop="Feedback"
>
<template #default>
<el-button type="primary">查阅</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(5);
const showSearch = ref(true);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
name: "",
carNum: "",
editAuth: "",
assignment: "",
status: "",
});
const statusOption = ref([
{
value: 0,
label: "疑难件",
},
{
value: 1,
label: "已办结",
},
]);
const options = [
{
value: 0,
label: "系统分配",
},
{
value: 1,
label: "人工分配",
},
];
const policyList = ref([
{
policyId: 1,
createTime: "2024-01-01",
carNum: "桂A 1234",
frameNum: "123456789012345678",
name: "张三",
phone: "12345678901",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
statue: 0,
},
{
policyId: 2,
createTime: "2024-01-02",
carNum: "粤B 1234",
frameNum: "123456789012345678",
name: "李四",
phone: "12345678902",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
status: 0,
},
{
policyId: 3,
createTime: "2024-01-03",
carNum: "粤C 1234",
frameNum: "123456789012345678",
name: "王五",
phone: "12345678903",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
status: 0,
},
{
policyId: 4,
createTime: "2024-01-04",
carNum: "粤D 1234",
frameNum: "123456789012345678",
name: "赵六",
phone: "12345678904",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
handler: "张三",
status: 1,
},
{
policyId: 5,
createTime: "2024-01-05",
carNum: "粤E 1234",
frameNum: "123456789012345678",
name: "孙七",
phone: "12345678905",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
handler: "张三",
status: 1,
},
]);
/** 多选框选中数据 */
function handleSelectionChange(selection) {
// ids.value = selection.map(item => item.roleId);
// single.value = selection.length != 1;
// multiple.value = !selection.length;
console.log(selection);
}
const getList = () => {};
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
</script>
<style></style>
... ...
<template>
<div>进行中</div>
<div class="app-container">
<!-- 筛选条件 -->
<el-form
:model="queryParams"
ref="queryRef"
v-show="showSearch"
:inline="true"
label-width="68px"
>
<el-form-item label="用户姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="车牌号" prop="carNum">
<el-input
v-model="queryParams.carNum"
placeholder="请输入车牌号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="操作人员" prop="editAuth">
<el-input
v-model="queryParams.editAuth"
placeholder="填写操作人员"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="分配机制" prop="assignment">
<el-select
v-model="queryParams.assignment"
placeholder="系统分配"
clearable
style="width: 200px"
>
<el-option
v-for="dict in options"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="保单进度" prop="progress">
<el-select
v-model="queryParams.progress"
placeholder="选择进度"
clearable
style="width: 200px"
>
<el-option
v-for="dict in progressOption"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>查询</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格数据 -->
<el-table
v-loading="loading"
:data="policyList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="序号"
prop="policyId"
width="120"
align="center"
/>
<el-table-column
label="登记时间"
prop="createTime"
width="150"
align="center"
/>
<el-table-column
label="车牌号"
prop="carNum"
width="150"
align="center"
/>
<el-table-column
label="车架号"
prop="frameNum"
width="240"
align="center"
/>
<el-table-column
label="车主姓名"
prop="name"
width="100"
align="center"
/>
<el-table-column
label="联系电话"
prop="phone"
width="180"
align="center"
/>
<el-table-column
label="操作时间"
prop="authTime"
width="150"
align="center"
/>
<el-table-column
label="操作人员"
prop="editAuth"
width="120"
align="center"
/>
<el-table-column
align="center"
label="分配机制"
width="120"
prop="assignment"
>
<template #default="scope">
<span>{{ scope.row.progress === 0 ? "系统分配" : "人工分配" }}</span>
</template>
</el-table-column>
<el-table-column
label="承保公司"
prop="company"
width="150"
align="center"
/>
<el-table-column
label="办理人"
prop="handler"
width="100"
align="center"
/>
<el-table-column label="保单进度" width="100" prop="progress">
<template #default="scope">
<span
:style="{ color: scope.row.progress === 0 ? '#409EFF' : '#67C23A' }"
>{{ scope.row.progress === 0 ? "待承接" : "已承接" }}</span
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
export default {};
<script setup>
const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(5);
const showSearch = ref(true);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
name: "",
carNum: "",
editAuth: "",
assignment: "",
progress: "",
});
const progressOption = ref([
{
value: 0,
label: "待承接",
},
{
value: 1,
label: "已承接",
},
]);
const options = [
{
value: 0,
label: "系统分配",
},
{
value: 1,
label: "人工分配",
},
];
const policyList = ref([
{
policyId: 1,
createTime: "2024-01-01",
carNum: "桂A 1234",
frameNum: "123456789012345678",
name: "张三",
phone: "12345678901",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
progress: 0,
},
{
policyId: 2,
createTime: "2024-01-02",
carNum: "粤B 1234",
frameNum: "123456789012345678",
name: "李四",
phone: "12345678902",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
progress: 0,
},
{
policyId: 3,
createTime: "2024-01-03",
carNum: "粤C 1234",
frameNum: "123456789012345678",
name: "王五",
phone: "12345678903",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
handler: "张三",
progress: 0,
},
{
policyId: 4,
createTime: "2024-01-04",
carNum: "粤D 1234",
frameNum: "123456789012345678",
name: "赵六",
phone: "12345678904",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
handler: "张三",
progress: 1,
},
{
policyId: 5,
createTime: "2024-01-05",
carNum: "粤E 1234",
frameNum: "123456789012345678",
name: "孙七",
phone: "12345678905",
company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
handler: "张三",
progress: 1,
},
]);
/** 多选框选中数据 */
function handleSelectionChange(selection) {
// ids.value = selection.map(item => item.roleId);
// single.value = selection.length != 1;
// multiple.value = !selection.length;
console.log(selection);
}
const getList = () => {};
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
</script>
<style></style>
... ...
<template>
<div>待处理</div>
<div class="app-container">
<!-- 表格数据 -->
<el-table
v-loading="loading"
:data="policyList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="序号"
prop="policyId"
width="120"
align="center"
/>
<el-table-column
label="登记时间"
prop="createTime"
width="150"
align="center"
/>
<el-table-column
label="车牌号"
prop="carNum"
width="150"
align="center"
/>
<el-table-column label="车架号" prop="frameNum" align="center" />
<el-table-column
label="车主姓名"
prop="name"
width="100"
align="center"
/>
<el-table-column
label="联系电话"
prop="phone"
width="180"
align="center"
/>
<el-table-column
label="上年承保公司"
prop="company"
width="150"
align="center"
/>
<el-table-column label="操作" align="center" width="360" fixed="right">
<template #default="scope">
<el-popconfirm
title="是否通过该保单?"
confirm-button-text="确定"
cancel-button-text="取消"
@confirm="handleSuccess(scope.row)"
>
<template #reference>
<el-button type="success">通过</el-button>
</template>
</el-popconfirm>
<el-button
@click="handleFallback(scope.row)"
v-hasPermi="['system:role:remove']"
>退回</el-button
>
<el-button
type="danger"
@click="handleVoid(scope.row)"
v-hasPermi="['system:role:edit']"
>作废</el-button
>
<el-button
type="primary"
@click="handleAuthCompany(scope.row)"
v-hasPermi="['system:role:edit']"
>分配承保公司</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
export default {};
<script setup>
const loading = ref(false);
const total = ref(5);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
});
const policyList = ref([
{
policyId: 1,
createTime: "2024-01-01",
carNum: "桂A 1234",
frameNum: "123456789012345678",
name: "张三",
phone: "12345678901",
company: "中国平安",
},
{
policyId: 2,
createTime: "2024-01-02",
carNum: "粤B 1234",
frameNum: "123456789012345678",
name: "李四",
phone: "12345678902",
company: "中国平安",
},
{
policyId: 3,
createTime: "2024-01-03",
carNum: "粤C 1234",
frameNum: "123456789012345678",
name: "王五",
phone: "12345678903",
company: "中国平安",
},
{
policyId: 4,
createTime: "2024-01-04",
carNum: "粤D 1234",
frameNum: "123456789012345678",
name: "赵六",
phone: "12345678904",
company: "中国平安",
},
{
policyId: 5,
createTime: "2024-01-05",
carNum: "粤E 1234",
frameNum: "123456789012345678",
name: "孙七",
phone: "12345678905",
company: "中国平安",
},
]);
/** 多选框选中数据 */
function handleSelectionChange(selection) {
// ids.value = selection.map(item => item.roleId);
// single.value = selection.length != 1;
// multiple.value = !selection.length;
console.log(selection);
}
const getList = () => {
loading.value = false;
};
const handleSuccess = () => {
console.log("通过");
};
const handleFallback = () => {
console.log("退回");
};
const handleVoid = () => {
console.log("作废");
};
const handleAuthCompany = () => {
console.log("分配承保公司");
};
</script>
<style></style>
... ...
<template>
<div>已处理</div>
<div class="app-container">
<!-- 筛选条件 -->
<el-form
:model="queryParams"
ref="queryRef"
v-show="showSearch"
:inline="true"
label-width="68px"
>
<el-form-item label="用户姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="车牌号" prop="carNum">
<el-input
v-model="queryParams.carNum"
placeholder="请输入车牌号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="操作人员" prop="editAuth">
<el-input
v-model="queryParams.editAuth"
placeholder="填写操作人员"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="分配机制" prop="assignment">
<el-select
v-model="queryParams.assignment"
placeholder="系统分配"
clearable
style="width: 200px"
>
<el-option
v-for="dict in options"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"
>查询</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格数据 -->
<el-table
v-loading="loading"
:data="policyList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" prop="policyId" width="120" />
<el-table-column label="登记时间" prop="createTime" width="150" />
<el-table-column label="车牌号" prop="carNum" width="150" />
<el-table-column label="车架号" prop="frameNum" width="240" />
<el-table-column label="车主姓名" prop="name" width="100" />
<el-table-column label="联系电话" prop="phone" width="180" />
<el-table-column
label="上年承保公司"
prop="last_year_company"
width="150"
/>
<el-table-column label="操作时间" prop="authTime" width="150" />
<el-table-column label="操作人员" prop="editAuth" width="120" />
<el-table-column
align="center"
label="分配机制"
width="120"
prop="assignment"
>
<template #default="scope">
<span>{{
scope.row.assignment === 0 ? "系统分配" : "人工分配"
}}</span>
</template>
</el-table-column>
<el-table-column label="承保公司" prop="company" width="150" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
export default {};
<script setup>
const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(5);
const showSearch = ref(true);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
name: "",
carNum: "",
editAuth: "",
assignment: "",
});
const options = [
{
value: 0,
label: "系统分配",
},
{
value: 1,
label: "人工分配",
},
];
const policyList = ref([
{
policyId: 1,
createTime: "2024-01-01",
carNum: "桂A 1234",
frameNum: "123456789012345678",
name: "张三",
phone: "12345678901",
company: "中国平安",
last_year_company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
},
{
policyId: 2,
createTime: "2024-01-02",
carNum: "粤B 1234",
frameNum: "123456789012345678",
name: "李四",
phone: "12345678902",
company: "中国平安",
last_year_company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
},
{
policyId: 3,
createTime: "2024-01-03",
carNum: "粤C 1234",
frameNum: "123456789012345678",
name: "王五",
phone: "12345678903",
company: "中国平安",
last_year_company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 1,
},
{
policyId: 4,
createTime: "2024-01-04",
carNum: "粤D 1234",
frameNum: "123456789012345678",
name: "赵六",
phone: "12345678904",
company: "中国平安",
last_year_company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
},
{
policyId: 5,
createTime: "2024-01-05",
carNum: "粤E 1234",
frameNum: "123456789012345678",
name: "孙七",
phone: "12345678905",
company: "中国平安",
last_year_company: "中国平安",
editAuth: "管理员",
authTime: "2024-01-01",
assignment: 0,
},
]);
/** 多选框选中数据 */
function handleSelectionChange(selection) {
// ids.value = selection.map(item => item.roleId);
// single.value = selection.length != 1;
// multiple.value = !selection.length;
console.log(selection);
}
const getList = () => {};
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
</script>
<style></style>
... ...