作者 xiaoqiu

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

1 # 页面标题 1 # 页面标题
2 -VITE_APP_TITLE = 若依管理系统 2 +VITE_APP_TITLE = 车险登记平台
3 3
4 # 开发环境配置 4 # 开发环境配置
5 VITE_APP_ENV = 'development' 5 VITE_APP_ENV = 'development'
1 # 页面标题 1 # 页面标题
2 -VITE_APP_TITLE = 若依管理系统 2 +VITE_APP_TITLE = 车险登记平台
3 3
4 # 生产环境配置 4 # 生产环境配置
5 VITE_APP_ENV = 'production' 5 VITE_APP_ENV = 'production'
1 <template> 1 <template>
2 - <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> 2 + <div
  3 + class="sidebar-logo-container"
  4 + :class="{ collapse: collapse }"
  5 + :style="{
  6 + backgroundColor:
  7 + sideTheme === 'theme-dark'
  8 + ? variables.menuBackground
  9 + : variables.menuLightBackground,
  10 + }"
  11 + >
3 <transition name="sidebarLogoFade"> 12 <transition name="sidebarLogoFade">
4 - <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> 13 + <router-link
  14 + v-if="collapse"
  15 + key="collapse"
  16 + class="sidebar-logo-link"
  17 + to="/"
  18 + >
5 <img v-if="logo" :src="logo" class="sidebar-logo" /> 19 <img v-if="logo" :src="logo" class="sidebar-logo" />
6 - <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1> 20 + <h1
  21 + v-else
  22 + class="sidebar-title"
  23 + :style="{
  24 + color:
  25 + sideTheme === 'theme-dark'
  26 + ? variables.logoTitleColor
  27 + : variables.logoLightTitleColor,
  28 + }"
  29 + >
  30 + {{ title }}
  31 + </h1>
7 </router-link> 32 </router-link>
8 <router-link v-else key="expand" class="sidebar-logo-link" to="/"> 33 <router-link v-else key="expand" class="sidebar-logo-link" to="/">
9 <img v-if="logo" :src="logo" class="sidebar-logo" /> 34 <img v-if="logo" :src="logo" class="sidebar-logo" />
10 - <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1> 35 + <h1
  36 + class="sidebar-title"
  37 + :style="{
  38 + color:
  39 + sideTheme === 'theme-dark'
  40 + ? variables.logoTitleColor
  41 + : variables.logoLightTitleColor,
  42 + }"
  43 + >
  44 + {{ title }}
  45 + </h1>
11 </router-link> 46 </router-link>
12 </transition> 47 </transition>
13 </div> 48 </div>
14 </template> 49 </template>
15 50
16 <script setup> 51 <script setup>
17 -import variables from '@/assets/styles/variables.module.scss'  
18 -import logo from '@/assets/logo/logo.png'  
19 -import useSettingsStore from '@/store/modules/settings' 52 +import variables from "@/assets/styles/variables.module.scss";
  53 +import logo from "@/assets/logo/logo.png";
  54 +import useSettingsStore from "@/store/modules/settings";
20 55
21 defineProps({ 56 defineProps({
22 collapse: { 57 collapse: {
23 type: Boolean, 58 type: Boolean,
24 - required: true  
25 - }  
26 -}) 59 + required: true,
  60 + },
  61 +});
27 62
28 -const title = ref('若依管理系统'); 63 +const title = ref(import.meta.env.VITE_APP_TITLE);
29 const settingsStore = useSettingsStore(); 64 const settingsStore = useSettingsStore();
30 const sideTheme = computed(() => settingsStore.sideTheme); 65 const sideTheme = computed(() => settingsStore.sideTheme);
31 </script> 66 </script>
@@ -78,4 +113,4 @@ const sideTheme = computed(() => settingsStore.sideTheme); @@ -78,4 +113,4 @@ const sideTheme = computed(() => settingsStore.sideTheme);
78 } 113 }
79 } 114 }
80 } 115 }
81 -</style>  
  116 +</style>
@@ -60,15 +60,7 @@ export const constantRoutes = [ @@ -60,15 +60,7 @@ export const constantRoutes = [
60 { 60 {
61 path: '', 61 path: '',
62 component: Layout, 62 component: Layout,
63 - redirect: '/index',  
64 - children: [  
65 - {  
66 - path: '/index',  
67 - component: () => import('@/views/index'),  
68 - name: 'Index',  
69 - meta: { title: '首页', icon: 'dashboard', affix: true }  
70 - }  
71 - ] 63 + redirect: '/policy/pending'
72 }, 64 },
73 { 65 {
74 path: '/user', 66 path: '/user',
1 -<template>  
2 - <div>审核名单</div>  
3 -</template>  
4 -  
5 -<script>  
6 -export default {};  
7 -</script>  
8 -  
9 -<style></style>  
1 <template> 1 <template>
2 - <div>已作废</div> 2 + <div class="app-container">
  3 + <!-- 筛选条件 -->
  4 + <el-form
  5 + :model="queryParams"
  6 + ref="queryRef"
  7 + v-show="showSearch"
  8 + :inline="true"
  9 + label-width="68px"
  10 + >
  11 + <el-form-item label="用户姓名" prop="name">
  12 + <el-input
  13 + v-model="queryParams.name"
  14 + placeholder="请输入名称"
  15 + clearable
  16 + style="width: 200px"
  17 + @keyup.enter="handleQuery"
  18 + />
  19 + </el-form-item>
  20 + <el-form-item label="车牌号" prop="carNum">
  21 + <el-input
  22 + v-model="queryParams.carNum"
  23 + placeholder="请输入车牌号"
  24 + clearable
  25 + style="width: 200px"
  26 + @keyup.enter="handleQuery"
  27 + />
  28 + </el-form-item>
  29 + <el-form-item label="操作人员" prop="editAuth">
  30 + <el-input
  31 + v-model="queryParams.editAuth"
  32 + placeholder="填写操作人员"
  33 + clearable
  34 + style="width: 200px"
  35 + @keyup.enter="handleQuery"
  36 + />
  37 + </el-form-item>
  38 + <el-form-item>
  39 + <el-button type="primary" icon="Search" @click="handleQuery"
  40 + >查询</el-button
  41 + >
  42 + <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  43 + </el-form-item>
  44 + </el-form>
  45 +
  46 + <!-- 表格数据 -->
  47 + <el-table
  48 + v-loading="loading"
  49 + :data="policyList"
  50 + @selection-change="handleSelectionChange"
  51 + >
  52 + <el-table-column type="selection" width="55" align="center" />
  53 + <el-table-column
  54 + label="序号"
  55 + prop="policyId"
  56 + width="120"
  57 + align="center"
  58 + />
  59 + <el-table-column
  60 + label="登记时间"
  61 + prop="createTime"
  62 + width="150"
  63 + align="center"
  64 + />
  65 + <el-table-column
  66 + label="车牌号"
  67 + prop="carNum"
  68 + width="150"
  69 + align="center"
  70 + />
  71 + <el-table-column label="车架号" prop="frameNum" align="center" />
  72 + <el-table-column
  73 + label="车主姓名"
  74 + prop="name"
  75 + width="100"
  76 + align="center"
  77 + />
  78 + <el-table-column
  79 + label="联系电话"
  80 + prop="phone"
  81 + width="180"
  82 + align="center"
  83 + />
  84 + <el-table-column
  85 + label="操作时间"
  86 + align="center"
  87 + prop="authTime"
  88 + width="150"
  89 + />
  90 + <el-table-column
  91 + label="操作人员"
  92 + align="center"
  93 + prop="editAuth"
  94 + width="120"
  95 + />
  96 + <el-table-column label="作废备注" fixed="right" width="120" prop="remark">
  97 + <template #default>
  98 + <el-button type="primary">查阅</el-button>
  99 + </template>
  100 + </el-table-column>
  101 + </el-table>
  102 +
  103 + <pagination
  104 + v-show="total > 0"
  105 + :total="total"
  106 + v-model:page="queryParams.pageNum"
  107 + v-model:limit="queryParams.pageSize"
  108 + @pagination="getList"
  109 + />
  110 + </div>
3 </template> 111 </template>
4 112
5 -<script>  
6 -export default {}; 113 +<script setup>
  114 +const { proxy } = getCurrentInstance();
  115 +const loading = ref(false);
  116 +const total = ref(5);
  117 +const showSearch = ref(true);
  118 +const queryParams = reactive({
  119 + pageNum: 1,
  120 + pageSize: 10,
  121 + name: "",
  122 + carNum: "",
  123 + editAuth: "",
  124 + assignment: "",
  125 + status: "",
  126 +});
  127 +
  128 +const statusOption = ref([
  129 + {
  130 + value: 0,
  131 + label: "疑难件",
  132 + },
  133 + {
  134 + value: 1,
  135 + label: "已办结",
  136 + },
  137 +]);
  138 +
  139 +const options = [
  140 + {
  141 + value: 0,
  142 + label: "系统分配",
  143 + },
  144 + {
  145 + value: 1,
  146 + label: "人工分配",
  147 + },
  148 +];
  149 +
  150 +const policyList = ref([
  151 + {
  152 + policyId: 1,
  153 + createTime: "2024-01-01",
  154 + carNum: "桂A 1234",
  155 + frameNum: "123456789012345678",
  156 + name: "张三",
  157 + phone: "12345678901",
  158 + company: "中国平安",
  159 + editAuth: "管理员",
  160 + authTime: "2024-01-01",
  161 + assignment: 0,
  162 + handler: "张三",
  163 + statue: 0,
  164 + },
  165 + {
  166 + policyId: 2,
  167 + createTime: "2024-01-02",
  168 + carNum: "粤B 1234",
  169 + frameNum: "123456789012345678",
  170 + name: "李四",
  171 + phone: "12345678902",
  172 + company: "中国平安",
  173 + editAuth: "管理员",
  174 + authTime: "2024-01-01",
  175 + assignment: 0,
  176 + handler: "张三",
  177 + status: 0,
  178 + },
  179 + {
  180 + policyId: 3,
  181 + createTime: "2024-01-03",
  182 + carNum: "粤C 1234",
  183 + frameNum: "123456789012345678",
  184 + name: "王五",
  185 + phone: "12345678903",
  186 + company: "中国平安",
  187 + editAuth: "管理员",
  188 + authTime: "2024-01-01",
  189 + assignment: 0,
  190 + handler: "张三",
  191 + status: 0,
  192 + },
  193 + {
  194 + policyId: 4,
  195 + createTime: "2024-01-04",
  196 + carNum: "粤D 1234",
  197 + frameNum: "123456789012345678",
  198 + name: "赵六",
  199 + phone: "12345678904",
  200 + company: "中国平安",
  201 + editAuth: "管理员",
  202 + authTime: "2024-01-01",
  203 + assignment: 1,
  204 + handler: "张三",
  205 + status: 1,
  206 + },
  207 + {
  208 + policyId: 5,
  209 + createTime: "2024-01-05",
  210 + carNum: "粤E 1234",
  211 + frameNum: "123456789012345678",
  212 + name: "孙七",
  213 + phone: "12345678905",
  214 + company: "中国平安",
  215 + editAuth: "管理员",
  216 + authTime: "2024-01-01",
  217 + assignment: 1,
  218 + handler: "张三",
  219 + status: 1,
  220 + },
  221 +]);
  222 +
  223 +/** 多选框选中数据 */
  224 +function handleSelectionChange(selection) {
  225 + // ids.value = selection.map(item => item.roleId);
  226 + // single.value = selection.length != 1;
  227 + // multiple.value = !selection.length;
  228 + console.log(selection);
  229 +}
  230 +
  231 +const getList = () => {};
  232 +
  233 +/** 搜索按钮操作 */
  234 +function handleQuery() {
  235 + queryParams.value.pageNum = 1;
  236 + getList();
  237 +}
  238 +/** 重置按钮操作 */
  239 +function resetQuery() {
  240 + proxy.resetForm("queryRef");
  241 + handleQuery();
  242 +}
7 </script> 243 </script>
8 244
9 <style></style> 245 <style></style>
1 -<template>  
2 - <div>已完结</div>  
3 -</template>  
4 -  
5 -<script>  
6 -export default {};  
7 -</script>  
8 -  
9 -<style></style>  
  1 +<template>
  2 + <div class="app-container">
  3 + <!-- 筛选条件 -->
  4 + <el-form
  5 + :model="queryParams"
  6 + ref="queryRef"
  7 + v-show="showSearch"
  8 + :inline="true"
  9 + label-width="68px"
  10 + >
  11 + <el-form-item label="用户姓名" prop="name">
  12 + <el-input
  13 + v-model="queryParams.name"
  14 + placeholder="请输入名称"
  15 + clearable
  16 + style="width: 200px"
  17 + @keyup.enter="handleQuery"
  18 + />
  19 + </el-form-item>
  20 + <el-form-item label="车牌号" prop="carNum">
  21 + <el-input
  22 + v-model="queryParams.carNum"
  23 + placeholder="请输入车牌号"
  24 + clearable
  25 + style="width: 200px"
  26 + @keyup.enter="handleQuery"
  27 + />
  28 + </el-form-item>
  29 + <el-form-item label="操作人员" prop="editAuth">
  30 + <el-input
  31 + v-model="queryParams.editAuth"
  32 + placeholder="填写操作人员"
  33 + clearable
  34 + style="width: 200px"
  35 + @keyup.enter="handleQuery"
  36 + />
  37 + </el-form-item>
  38 + <el-form-item label="分配机制" prop="assignment">
  39 + <el-select
  40 + v-model="queryParams.assignment"
  41 + placeholder="系统分配"
  42 + clearable
  43 + style="width: 200px"
  44 + >
  45 + <el-option
  46 + v-for="dict in options"
  47 + :key="dict.value"
  48 + :label="dict.label"
  49 + :value="dict.value"
  50 + />
  51 + </el-select>
  52 + </el-form-item>
  53 + <el-form-item label="保单状态" prop="status">
  54 + <el-select
  55 + v-model="queryParams.status"
  56 + placeholder="选择进度"
  57 + clearable
  58 + style="width: 200px"
  59 + >
  60 + <el-option
  61 + v-for="dict in statusOption"
  62 + :key="dict.value"
  63 + :label="dict.label"
  64 + :value="dict.value"
  65 + />
  66 + </el-select>
  67 + </el-form-item>
  68 + <el-form-item>
  69 + <el-button type="primary" icon="Search" @click="handleQuery"
  70 + >查询</el-button
  71 + >
  72 + <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  73 + </el-form-item>
  74 + </el-form>
  75 +
  76 + <!-- 表格数据 -->
  77 + <el-table
  78 + v-loading="loading"
  79 + :data="policyList"
  80 + @selection-change="handleSelectionChange"
  81 + >
  82 + <el-table-column type="selection" width="55" align="center" />
  83 + <el-table-column
  84 + label="序号"
  85 + prop="policyId"
  86 + width="120"
  87 + align="center"
  88 + />
  89 + <el-table-column
  90 + label="登记时间"
  91 + prop="createTime"
  92 + width="150"
  93 + align="center"
  94 + />
  95 + <el-table-column
  96 + label="车牌号"
  97 + prop="carNum"
  98 + width="150"
  99 + align="center"
  100 + />
  101 + <el-table-column
  102 + label="车架号"
  103 + prop="frameNum"
  104 + width="240"
  105 + align="center"
  106 + />
  107 + <el-table-column
  108 + label="车主姓名"
  109 + prop="name"
  110 + width="100"
  111 + align="center"
  112 + />
  113 + <el-table-column
  114 + label="联系电话"
  115 + prop="phone"
  116 + width="180"
  117 + align="center"
  118 + />
  119 + <el-table-column
  120 + align="center"
  121 + label="分配机制"
  122 + width="120"
  123 + prop="assignment"
  124 + >
  125 + <template #default="scope">
  126 + <span>{{
  127 + scope.row.assignment === 0 ? "系统分配" : "人工分配"
  128 + }}</span>
  129 + </template>
  130 + </el-table-column>
  131 + <el-table-column
  132 + label="承保公司"
  133 + prop="company"
  134 + width="150"
  135 + align="center"
  136 + />
  137 + <el-table-column
  138 + label="办理人"
  139 + prop="handler"
  140 + width="100"
  141 + align="center"
  142 + />
  143 + <el-table-column label="保单状态" width="100" prop="statue">
  144 + <template #default="scope">
  145 + <span
  146 + :style="{ color: scope.row.status === 0 ? '#409EFF' : '#67C23A' }"
  147 + >{{ scope.row.status === 0 ? "疑难件" : "已办结" }}</span
  148 + >
  149 + </template>
  150 + </el-table-column>
  151 + <el-table-column
  152 + label="保单回馈"
  153 + fixed="right"
  154 + width="100"
  155 + prop="Feedback"
  156 + >
  157 + <template #default>
  158 + <el-button type="primary">查阅</el-button>
  159 + </template>
  160 + </el-table-column>
  161 + </el-table>
  162 +
  163 + <pagination
  164 + v-show="total > 0"
  165 + :total="total"
  166 + v-model:page="queryParams.pageNum"
  167 + v-model:limit="queryParams.pageSize"
  168 + @pagination="getList"
  169 + />
  170 + </div>
  171 +</template>
  172 +
  173 +<script setup>
  174 +const { proxy } = getCurrentInstance();
  175 +const loading = ref(false);
  176 +const total = ref(5);
  177 +const showSearch = ref(true);
  178 +const queryParams = reactive({
  179 + pageNum: 1,
  180 + pageSize: 10,
  181 + name: "",
  182 + carNum: "",
  183 + editAuth: "",
  184 + assignment: "",
  185 + status: "",
  186 +});
  187 +
  188 +const statusOption = ref([
  189 + {
  190 + value: 0,
  191 + label: "疑难件",
  192 + },
  193 + {
  194 + value: 1,
  195 + label: "已办结",
  196 + },
  197 +]);
  198 +
  199 +const options = [
  200 + {
  201 + value: 0,
  202 + label: "系统分配",
  203 + },
  204 + {
  205 + value: 1,
  206 + label: "人工分配",
  207 + },
  208 +];
  209 +
  210 +const policyList = ref([
  211 + {
  212 + policyId: 1,
  213 + createTime: "2024-01-01",
  214 + carNum: "桂A 1234",
  215 + frameNum: "123456789012345678",
  216 + name: "张三",
  217 + phone: "12345678901",
  218 + company: "中国平安",
  219 + editAuth: "管理员",
  220 + authTime: "2024-01-01",
  221 + assignment: 0,
  222 + handler: "张三",
  223 + statue: 0,
  224 + },
  225 + {
  226 + policyId: 2,
  227 + createTime: "2024-01-02",
  228 + carNum: "粤B 1234",
  229 + frameNum: "123456789012345678",
  230 + name: "李四",
  231 + phone: "12345678902",
  232 + company: "中国平安",
  233 + editAuth: "管理员",
  234 + authTime: "2024-01-01",
  235 + assignment: 0,
  236 + handler: "张三",
  237 + status: 0,
  238 + },
  239 + {
  240 + policyId: 3,
  241 + createTime: "2024-01-03",
  242 + carNum: "粤C 1234",
  243 + frameNum: "123456789012345678",
  244 + name: "王五",
  245 + phone: "12345678903",
  246 + company: "中国平安",
  247 + editAuth: "管理员",
  248 + authTime: "2024-01-01",
  249 + assignment: 0,
  250 + handler: "张三",
  251 + status: 0,
  252 + },
  253 + {
  254 + policyId: 4,
  255 + createTime: "2024-01-04",
  256 + carNum: "粤D 1234",
  257 + frameNum: "123456789012345678",
  258 + name: "赵六",
  259 + phone: "12345678904",
  260 + company: "中国平安",
  261 + editAuth: "管理员",
  262 + authTime: "2024-01-01",
  263 + assignment: 1,
  264 + handler: "张三",
  265 + status: 1,
  266 + },
  267 + {
  268 + policyId: 5,
  269 + createTime: "2024-01-05",
  270 + carNum: "粤E 1234",
  271 + frameNum: "123456789012345678",
  272 + name: "孙七",
  273 + phone: "12345678905",
  274 + company: "中国平安",
  275 + editAuth: "管理员",
  276 + authTime: "2024-01-01",
  277 + assignment: 1,
  278 + handler: "张三",
  279 + status: 1,
  280 + },
  281 +]);
  282 +
  283 +/** 多选框选中数据 */
  284 +function handleSelectionChange(selection) {
  285 + // ids.value = selection.map(item => item.roleId);
  286 + // single.value = selection.length != 1;
  287 + // multiple.value = !selection.length;
  288 + console.log(selection);
  289 +}
  290 +
  291 +const getList = () => {};
  292 +
  293 +/** 搜索按钮操作 */
  294 +function handleQuery() {
  295 + queryParams.value.pageNum = 1;
  296 + getList();
  297 +}
  298 +/** 重置按钮操作 */
  299 +function resetQuery() {
  300 + proxy.resetForm("queryRef");
  301 + handleQuery();
  302 +}
  303 +</script>
  304 +
  305 +<style></style>
1 <template> 1 <template>
2 - <div>进行中</div> 2 + <div class="app-container">
  3 + <!-- 筛选条件 -->
  4 + <el-form
  5 + :model="queryParams"
  6 + ref="queryRef"
  7 + v-show="showSearch"
  8 + :inline="true"
  9 + label-width="68px"
  10 + >
  11 + <el-form-item label="用户姓名" prop="name">
  12 + <el-input
  13 + v-model="queryParams.name"
  14 + placeholder="请输入名称"
  15 + clearable
  16 + style="width: 200px"
  17 + @keyup.enter="handleQuery"
  18 + />
  19 + </el-form-item>
  20 + <el-form-item label="车牌号" prop="carNum">
  21 + <el-input
  22 + v-model="queryParams.carNum"
  23 + placeholder="请输入车牌号"
  24 + clearable
  25 + style="width: 200px"
  26 + @keyup.enter="handleQuery"
  27 + />
  28 + </el-form-item>
  29 + <el-form-item label="操作人员" prop="editAuth">
  30 + <el-input
  31 + v-model="queryParams.editAuth"
  32 + placeholder="填写操作人员"
  33 + clearable
  34 + style="width: 200px"
  35 + @keyup.enter="handleQuery"
  36 + />
  37 + </el-form-item>
  38 + <el-form-item label="分配机制" prop="assignment">
  39 + <el-select
  40 + v-model="queryParams.assignment"
  41 + placeholder="系统分配"
  42 + clearable
  43 + style="width: 200px"
  44 + >
  45 + <el-option
  46 + v-for="dict in options"
  47 + :key="dict.value"
  48 + :label="dict.label"
  49 + :value="dict.value"
  50 + />
  51 + </el-select>
  52 + </el-form-item>
  53 + <el-form-item label="保单进度" prop="progress">
  54 + <el-select
  55 + v-model="queryParams.progress"
  56 + placeholder="选择进度"
  57 + clearable
  58 + style="width: 200px"
  59 + >
  60 + <el-option
  61 + v-for="dict in progressOption"
  62 + :key="dict.value"
  63 + :label="dict.label"
  64 + :value="dict.value"
  65 + />
  66 + </el-select>
  67 + </el-form-item>
  68 + <el-form-item>
  69 + <el-button type="primary" icon="Search" @click="handleQuery"
  70 + >查询</el-button
  71 + >
  72 + <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  73 + </el-form-item>
  74 + </el-form>
  75 +
  76 + <!-- 表格数据 -->
  77 + <el-table
  78 + v-loading="loading"
  79 + :data="policyList"
  80 + @selection-change="handleSelectionChange"
  81 + >
  82 + <el-table-column type="selection" width="55" align="center" />
  83 + <el-table-column
  84 + label="序号"
  85 + prop="policyId"
  86 + width="120"
  87 + align="center"
  88 + />
  89 + <el-table-column
  90 + label="登记时间"
  91 + prop="createTime"
  92 + width="150"
  93 + align="center"
  94 + />
  95 + <el-table-column
  96 + label="车牌号"
  97 + prop="carNum"
  98 + width="150"
  99 + align="center"
  100 + />
  101 + <el-table-column
  102 + label="车架号"
  103 + prop="frameNum"
  104 + width="240"
  105 + align="center"
  106 + />
  107 + <el-table-column
  108 + label="车主姓名"
  109 + prop="name"
  110 + width="100"
  111 + align="center"
  112 + />
  113 + <el-table-column
  114 + label="联系电话"
  115 + prop="phone"
  116 + width="180"
  117 + align="center"
  118 + />
  119 + <el-table-column
  120 + label="操作时间"
  121 + prop="authTime"
  122 + width="150"
  123 + align="center"
  124 + />
  125 + <el-table-column
  126 + label="操作人员"
  127 + prop="editAuth"
  128 + width="120"
  129 + align="center"
  130 + />
  131 + <el-table-column
  132 + align="center"
  133 + label="分配机制"
  134 + width="120"
  135 + prop="assignment"
  136 + >
  137 + <template #default="scope">
  138 + <span>{{ scope.row.progress === 0 ? "系统分配" : "人工分配" }}</span>
  139 + </template>
  140 + </el-table-column>
  141 + <el-table-column
  142 + label="承保公司"
  143 + prop="company"
  144 + width="150"
  145 + align="center"
  146 + />
  147 + <el-table-column
  148 + label="办理人"
  149 + prop="handler"
  150 + width="100"
  151 + align="center"
  152 + />
  153 + <el-table-column label="保单进度" width="100" prop="progress">
  154 + <template #default="scope">
  155 + <span
  156 + :style="{ color: scope.row.progress === 0 ? '#409EFF' : '#67C23A' }"
  157 + >{{ scope.row.progress === 0 ? "待承接" : "已承接" }}</span
  158 + >
  159 + </template>
  160 + </el-table-column>
  161 + </el-table>
  162 +
  163 + <pagination
  164 + v-show="total > 0"
  165 + :total="total"
  166 + v-model:page="queryParams.pageNum"
  167 + v-model:limit="queryParams.pageSize"
  168 + @pagination="getList"
  169 + />
  170 + </div>
3 </template> 171 </template>
4 172
5 -<script>  
6 -export default {}; 173 +<script setup>
  174 +const { proxy } = getCurrentInstance();
  175 +const loading = ref(false);
  176 +const total = ref(5);
  177 +const showSearch = ref(true);
  178 +const queryParams = reactive({
  179 + pageNum: 1,
  180 + pageSize: 10,
  181 + name: "",
  182 + carNum: "",
  183 + editAuth: "",
  184 + assignment: "",
  185 + progress: "",
  186 +});
  187 +
  188 +const progressOption = ref([
  189 + {
  190 + value: 0,
  191 + label: "待承接",
  192 + },
  193 + {
  194 + value: 1,
  195 + label: "已承接",
  196 + },
  197 +]);
  198 +
  199 +const options = [
  200 + {
  201 + value: 0,
  202 + label: "系统分配",
  203 + },
  204 + {
  205 + value: 1,
  206 + label: "人工分配",
  207 + },
  208 +];
  209 +
  210 +const policyList = ref([
  211 + {
  212 + policyId: 1,
  213 + createTime: "2024-01-01",
  214 + carNum: "桂A 1234",
  215 + frameNum: "123456789012345678",
  216 + name: "张三",
  217 + phone: "12345678901",
  218 + company: "中国平安",
  219 + editAuth: "管理员",
  220 + authTime: "2024-01-01",
  221 + assignment: 0,
  222 + handler: "张三",
  223 + progress: 0,
  224 + },
  225 + {
  226 + policyId: 2,
  227 + createTime: "2024-01-02",
  228 + carNum: "粤B 1234",
  229 + frameNum: "123456789012345678",
  230 + name: "李四",
  231 + phone: "12345678902",
  232 + company: "中国平安",
  233 + editAuth: "管理员",
  234 + authTime: "2024-01-01",
  235 + assignment: 0,
  236 + handler: "张三",
  237 + progress: 0,
  238 + },
  239 + {
  240 + policyId: 3,
  241 + createTime: "2024-01-03",
  242 + carNum: "粤C 1234",
  243 + frameNum: "123456789012345678",
  244 + name: "王五",
  245 + phone: "12345678903",
  246 + company: "中国平安",
  247 + editAuth: "管理员",
  248 + authTime: "2024-01-01",
  249 + assignment: 0,
  250 + handler: "张三",
  251 + progress: 0,
  252 + },
  253 + {
  254 + policyId: 4,
  255 + createTime: "2024-01-04",
  256 + carNum: "粤D 1234",
  257 + frameNum: "123456789012345678",
  258 + name: "赵六",
  259 + phone: "12345678904",
  260 + company: "中国平安",
  261 + editAuth: "管理员",
  262 + authTime: "2024-01-01",
  263 + assignment: 1,
  264 + handler: "张三",
  265 + progress: 1,
  266 + },
  267 + {
  268 + policyId: 5,
  269 + createTime: "2024-01-05",
  270 + carNum: "粤E 1234",
  271 + frameNum: "123456789012345678",
  272 + name: "孙七",
  273 + phone: "12345678905",
  274 + company: "中国平安",
  275 + editAuth: "管理员",
  276 + authTime: "2024-01-01",
  277 + assignment: 1,
  278 + handler: "张三",
  279 + progress: 1,
  280 + },
  281 +]);
  282 +
  283 +/** 多选框选中数据 */
  284 +function handleSelectionChange(selection) {
  285 + // ids.value = selection.map(item => item.roleId);
  286 + // single.value = selection.length != 1;
  287 + // multiple.value = !selection.length;
  288 + console.log(selection);
  289 +}
  290 +
  291 +const getList = () => {};
  292 +
  293 +/** 搜索按钮操作 */
  294 +function handleQuery() {
  295 + queryParams.value.pageNum = 1;
  296 + getList();
  297 +}
  298 +/** 重置按钮操作 */
  299 +function resetQuery() {
  300 + proxy.resetForm("queryRef");
  301 + handleQuery();
  302 +}
7 </script> 303 </script>
8 304
9 <style></style> 305 <style></style>
1 <template> 1 <template>
2 - <div>待处理</div> 2 + <div class="app-container">
  3 + <!-- 表格数据 -->
  4 + <el-table
  5 + v-loading="loading"
  6 + :data="policyList"
  7 + @selection-change="handleSelectionChange"
  8 + >
  9 + <el-table-column type="selection" width="55" align="center" />
  10 + <el-table-column
  11 + label="序号"
  12 + prop="policyId"
  13 + width="120"
  14 + align="center"
  15 + />
  16 + <el-table-column
  17 + label="登记时间"
  18 + prop="createTime"
  19 + width="150"
  20 + align="center"
  21 + />
  22 + <el-table-column
  23 + label="车牌号"
  24 + prop="carNum"
  25 + width="150"
  26 + align="center"
  27 + />
  28 + <el-table-column label="车架号" prop="frameNum" align="center" />
  29 + <el-table-column
  30 + label="车主姓名"
  31 + prop="name"
  32 + width="100"
  33 + align="center"
  34 + />
  35 + <el-table-column
  36 + label="联系电话"
  37 + prop="phone"
  38 + width="180"
  39 + align="center"
  40 + />
  41 + <el-table-column
  42 + label="上年承保公司"
  43 + prop="company"
  44 + width="150"
  45 + align="center"
  46 + />
  47 + <el-table-column label="操作" align="center" width="360" fixed="right">
  48 + <template #default="scope">
  49 + <el-popconfirm
  50 + title="是否通过该保单?"
  51 + confirm-button-text="确定"
  52 + cancel-button-text="取消"
  53 + @confirm="handleSuccess(scope.row)"
  54 + >
  55 + <template #reference>
  56 + <el-button type="success">通过</el-button>
  57 + </template>
  58 + </el-popconfirm>
  59 +
  60 + <el-button
  61 + @click="handleFallback(scope.row)"
  62 + v-hasPermi="['system:role:remove']"
  63 + >退回</el-button
  64 + >
  65 + <el-button
  66 + type="danger"
  67 + @click="handleVoid(scope.row)"
  68 + v-hasPermi="['system:role:edit']"
  69 + >作废</el-button
  70 + >
  71 + <el-button
  72 + type="primary"
  73 + @click="handleAuthCompany(scope.row)"
  74 + v-hasPermi="['system:role:edit']"
  75 + >分配承保公司</el-button
  76 + >
  77 + </template>
  78 + </el-table-column>
  79 + </el-table>
  80 +
  81 + <pagination
  82 + v-show="total > 0"
  83 + :total="total"
  84 + v-model:page="queryParams.pageNum"
  85 + v-model:limit="queryParams.pageSize"
  86 + @pagination="getList"
  87 + />
  88 + </div>
3 </template> 89 </template>
4 90
5 -<script>  
6 -export default {}; 91 +<script setup>
  92 +const loading = ref(false);
  93 +const total = ref(5);
  94 +const queryParams = reactive({
  95 + pageNum: 1,
  96 + pageSize: 10,
  97 +});
  98 +const policyList = ref([
  99 + {
  100 + policyId: 1,
  101 + createTime: "2024-01-01",
  102 + carNum: "桂A 1234",
  103 + frameNum: "123456789012345678",
  104 + name: "张三",
  105 + phone: "12345678901",
  106 + company: "中国平安",
  107 + },
  108 + {
  109 + policyId: 2,
  110 + createTime: "2024-01-02",
  111 + carNum: "粤B 1234",
  112 + frameNum: "123456789012345678",
  113 + name: "李四",
  114 + phone: "12345678902",
  115 + company: "中国平安",
  116 + },
  117 + {
  118 + policyId: 3,
  119 + createTime: "2024-01-03",
  120 + carNum: "粤C 1234",
  121 + frameNum: "123456789012345678",
  122 + name: "王五",
  123 + phone: "12345678903",
  124 + company: "中国平安",
  125 + },
  126 + {
  127 + policyId: 4,
  128 + createTime: "2024-01-04",
  129 + carNum: "粤D 1234",
  130 + frameNum: "123456789012345678",
  131 + name: "赵六",
  132 + phone: "12345678904",
  133 + company: "中国平安",
  134 + },
  135 + {
  136 + policyId: 5,
  137 + createTime: "2024-01-05",
  138 + carNum: "粤E 1234",
  139 + frameNum: "123456789012345678",
  140 + name: "孙七",
  141 + phone: "12345678905",
  142 + company: "中国平安",
  143 + },
  144 +]);
  145 +
  146 +/** 多选框选中数据 */
  147 +function handleSelectionChange(selection) {
  148 + // ids.value = selection.map(item => item.roleId);
  149 + // single.value = selection.length != 1;
  150 + // multiple.value = !selection.length;
  151 + console.log(selection);
  152 +}
  153 +
  154 +const getList = () => {
  155 + loading.value = false;
  156 +};
  157 +const handleSuccess = () => {
  158 + console.log("通过");
  159 +};
  160 +const handleFallback = () => {
  161 + console.log("退回");
  162 +};
  163 +const handleVoid = () => {
  164 + console.log("作废");
  165 +};
  166 +const handleAuthCompany = () => {
  167 + console.log("分配承保公司");
  168 +};
7 </script> 169 </script>
8 170
9 <style></style> 171 <style></style>
1 <template> 1 <template>
2 - <div>已处理</div> 2 + <div class="app-container">
  3 + <!-- 筛选条件 -->
  4 + <el-form
  5 + :model="queryParams"
  6 + ref="queryRef"
  7 + v-show="showSearch"
  8 + :inline="true"
  9 + label-width="68px"
  10 + >
  11 + <el-form-item label="用户姓名" prop="name">
  12 + <el-input
  13 + v-model="queryParams.name"
  14 + placeholder="请输入名称"
  15 + clearable
  16 + style="width: 200px"
  17 + @keyup.enter="handleQuery"
  18 + />
  19 + </el-form-item>
  20 + <el-form-item label="车牌号" prop="carNum">
  21 + <el-input
  22 + v-model="queryParams.carNum"
  23 + placeholder="请输入车牌号"
  24 + clearable
  25 + style="width: 200px"
  26 + @keyup.enter="handleQuery"
  27 + />
  28 + </el-form-item>
  29 + <el-form-item label="操作人员" prop="editAuth">
  30 + <el-input
  31 + v-model="queryParams.editAuth"
  32 + placeholder="填写操作人员"
  33 + clearable
  34 + style="width: 200px"
  35 + @keyup.enter="handleQuery"
  36 + />
  37 + </el-form-item>
  38 + <el-form-item label="分配机制" prop="assignment">
  39 + <el-select
  40 + v-model="queryParams.assignment"
  41 + placeholder="系统分配"
  42 + clearable
  43 + style="width: 200px"
  44 + >
  45 + <el-option
  46 + v-for="dict in options"
  47 + :key="dict.value"
  48 + :label="dict.label"
  49 + :value="dict.value"
  50 + />
  51 + </el-select>
  52 + </el-form-item>
  53 + <el-form-item>
  54 + <el-button type="primary" icon="Search" @click="handleQuery"
  55 + >查询</el-button
  56 + >
  57 + <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  58 + </el-form-item>
  59 + </el-form>
  60 +
  61 + <!-- 表格数据 -->
  62 + <el-table
  63 + v-loading="loading"
  64 + :data="policyList"
  65 + @selection-change="handleSelectionChange"
  66 + >
  67 + <el-table-column type="selection" width="55" align="center" />
  68 + <el-table-column label="序号" prop="policyId" width="120" />
  69 + <el-table-column label="登记时间" prop="createTime" width="150" />
  70 + <el-table-column label="车牌号" prop="carNum" width="150" />
  71 + <el-table-column label="车架号" prop="frameNum" width="240" />
  72 + <el-table-column label="车主姓名" prop="name" width="100" />
  73 + <el-table-column label="联系电话" prop="phone" width="180" />
  74 + <el-table-column
  75 + label="上年承保公司"
  76 + prop="last_year_company"
  77 + width="150"
  78 + />
  79 + <el-table-column label="操作时间" prop="authTime" width="150" />
  80 + <el-table-column label="操作人员" prop="editAuth" width="120" />
  81 + <el-table-column
  82 + align="center"
  83 + label="分配机制"
  84 + width="120"
  85 + prop="assignment"
  86 + >
  87 + <template #default="scope">
  88 + <span>{{
  89 + scope.row.assignment === 0 ? "系统分配" : "人工分配"
  90 + }}</span>
  91 + </template>
  92 + </el-table-column>
  93 + <el-table-column label="承保公司" prop="company" width="150" />
  94 + </el-table>
  95 +
  96 + <pagination
  97 + v-show="total > 0"
  98 + :total="total"
  99 + v-model:page="queryParams.pageNum"
  100 + v-model:limit="queryParams.pageSize"
  101 + @pagination="getList"
  102 + />
  103 + </div>
3 </template> 104 </template>
4 105
5 -<script>  
6 -export default {}; 106 +<script setup>
  107 +const { proxy } = getCurrentInstance();
  108 +const loading = ref(false);
  109 +const total = ref(5);
  110 +const showSearch = ref(true);
  111 +const queryParams = reactive({
  112 + pageNum: 1,
  113 + pageSize: 10,
  114 + name: "",
  115 + carNum: "",
  116 + editAuth: "",
  117 + assignment: "",
  118 +});
  119 +
  120 +const options = [
  121 + {
  122 + value: 0,
  123 + label: "系统分配",
  124 + },
  125 + {
  126 + value: 1,
  127 + label: "人工分配",
  128 + },
  129 +];
  130 +
  131 +const policyList = ref([
  132 + {
  133 + policyId: 1,
  134 + createTime: "2024-01-01",
  135 + carNum: "桂A 1234",
  136 + frameNum: "123456789012345678",
  137 + name: "张三",
  138 + phone: "12345678901",
  139 + company: "中国平安",
  140 + last_year_company: "中国平安",
  141 + editAuth: "管理员",
  142 + authTime: "2024-01-01",
  143 + assignment: 0,
  144 + },
  145 + {
  146 + policyId: 2,
  147 + createTime: "2024-01-02",
  148 + carNum: "粤B 1234",
  149 + frameNum: "123456789012345678",
  150 + name: "李四",
  151 + phone: "12345678902",
  152 + company: "中国平安",
  153 + last_year_company: "中国平安",
  154 + editAuth: "管理员",
  155 + authTime: "2024-01-01",
  156 + assignment: 1,
  157 + },
  158 + {
  159 + policyId: 3,
  160 + createTime: "2024-01-03",
  161 + carNum: "粤C 1234",
  162 + frameNum: "123456789012345678",
  163 + name: "王五",
  164 + phone: "12345678903",
  165 + company: "中国平安",
  166 + last_year_company: "中国平安",
  167 + editAuth: "管理员",
  168 + authTime: "2024-01-01",
  169 + assignment: 1,
  170 + },
  171 + {
  172 + policyId: 4,
  173 + createTime: "2024-01-04",
  174 + carNum: "粤D 1234",
  175 + frameNum: "123456789012345678",
  176 + name: "赵六",
  177 + phone: "12345678904",
  178 + company: "中国平安",
  179 + last_year_company: "中国平安",
  180 + editAuth: "管理员",
  181 + authTime: "2024-01-01",
  182 + assignment: 0,
  183 + },
  184 + {
  185 + policyId: 5,
  186 + createTime: "2024-01-05",
  187 + carNum: "粤E 1234",
  188 + frameNum: "123456789012345678",
  189 + name: "孙七",
  190 + phone: "12345678905",
  191 + company: "中国平安",
  192 + last_year_company: "中国平安",
  193 + editAuth: "管理员",
  194 + authTime: "2024-01-01",
  195 + assignment: 0,
  196 + },
  197 +]);
  198 +
  199 +/** 多选框选中数据 */
  200 +function handleSelectionChange(selection) {
  201 + // ids.value = selection.map(item => item.roleId);
  202 + // single.value = selection.length != 1;
  203 + // multiple.value = !selection.length;
  204 + console.log(selection);
  205 +}
  206 +
  207 +const getList = () => {};
  208 +
  209 +/** 搜索按钮操作 */
  210 +function handleQuery() {
  211 + queryParams.value.pageNum = 1;
  212 + getList();
  213 +}
  214 +/** 重置按钮操作 */
  215 +function resetQuery() {
  216 + proxy.resetForm("queryRef");
  217 + handleQuery();
  218 +}
7 </script> 219 </script>
8 220
9 <style></style> 221 <style></style>