Browse Source

事项清单 查询 ok 及通讯录tree 封装

Luka 1 month ago
parent
commit
86dfb13004

+ 0 - 9
src/api/address/index.ts

@@ -1,9 +0,0 @@
-import request from '@/utils/request';
-
-// 查询单位机构tree列表
-export function getDeptTree() {
-	return request({
-		url: '/system/user/deptTree',
-		method: 'get',
-	});
-}

+ 42 - 34
src/api/main.ts

@@ -3,61 +3,69 @@ import request from '@/utils/request';
 /** 获取页面的数据 */
 // 获取列表
 export function getPageListData(pageName: string, queryInfo: any) {
-    return request({
-        method: 'get',
-        url: `/business/${pageName}/list`,
-        params: queryInfo,
-    });
+	return request({
+		method: 'get',
+		url: `/business/${pageName}/list`,
+		params: queryInfo,
+	});
 }
 
 // 删除
 export function deletePageData(pageName: string, urlId: any) {
-    return request({
-        method: 'delete',
-        url: `/business/${pageName}/${urlId}`,
-    });
+	return request({
+		method: 'delete',
+		url: `/business/${pageName}/${urlId}`,
+	});
 }
 
 // 新建
 export function newPageData(pageName: string, dataInfo: any) {
-    return request({
-        method: 'post',
-        url: `/business/${pageName}`,
-        data: dataInfo,
-    });
+	return request({
+		method: 'post',
+		url: `/business/${pageName}`,
+		data: dataInfo,
+	});
 }
 
 // 修改
 export function editPageData(pageName: string, dataInfo: any) {
-    return request({
-        method: 'put',
-        url: `/business/${pageName}`,
-        data: dataInfo,
-    });
+	return request({
+		method: 'put',
+		url: `/business/${pageName}`,
+		data: dataInfo,
+	});
 }
 
 // 获取详情
 export function getPageDetail(pageName: string, urlId: any) {
-    return request({
-        method: 'get',
-        url: `/business/${pageName}/` + urlId,
-    });
+	return request({
+		method: 'get',
+		url: `/business/${pageName}/` + urlId,
+	});
 }
 
 // 公共参数 agreeType 协议类型 assetType 资产类型 systemType 操作系统类型 titleType标签类型 expertLevel专家级别
 export function getCommon(value: string) {
-    return request({
-        url: `/system/dict/data/type/${value}`,
-        method: 'get',
-    });
+	return request({
+		url: `/system/dict/data/type/${value}`,
+		method: 'get',
+	});
 }
 
 export function getByDictType(value: string) {
-    return request({
-        url: '/business/parameter/getByDictType',
-        method: 'get',
-        params: {
-            dictType: value,
-        },
-    });
+	return request({
+		url: '/business/parameter/getByDictType',
+		method: 'get',
+		params: {
+			dictType: value,
+		},
+	});
+}
+
+// 查询单位机构tree列表
+export function getDeptTree() {
+	return request({
+		url: '/system/user/deptTree',
+		method: 'get',
+	});
 }

+ 51 - 42
src/libs/commonMeth.ts

@@ -1,51 +1,60 @@
-import { getCommon, getByDictType } from '../api/main';
-import { IOptions } from '../types/global';
+import { getCommon, getByDictType, getDeptTree } from '../api/main';
+import { IOptions, TreeOptions } from '../types/global';
 export function outTypeList(type: string) {
-    const typeList: Array<IOptions> = [];
-    getCommon(type).then(res => {
-        res.data.forEach((item: any) => {
-            typeList.push({
-                label: item.dictLabel,
-                value: item.dictValue,
-            });
-        });
-    });
-    return typeList;
+	const typeList: Array<IOptions> = [];
+	getCommon(type).then(res => {
+		res.data.forEach((item: any) => {
+			typeList.push({
+				label: item.dictLabel,
+				value: item.dictValue,
+			});
+		});
+	});
+	return typeList;
+}
+
+export async function outDeptTree(): Promise<Array<TreeOptions>> {
+	const res: any = await getDeptTree();
+	if (res.code === 200) {
+		return res.data;
+	} else {
+		return [];
+	}
 }
 
 export function outDictTypeList(type: string) {
-    const typeList: Array<IOptions> = [];
-    getByDictType(type).then(res => {
-        res.data.forEach((item: any) => {
-            typeList.push({
-                label: item.dictLabel,
-                value: item.dictValue,
-            });
-        });
-    });
-    return typeList;
+	const typeList: Array<IOptions> = [];
+	getByDictType(type).then(res => {
+		res.data.forEach((item: any) => {
+			typeList.push({
+				label: item.dictLabel,
+				value: item.dictValue,
+			});
+		});
+	});
+	return typeList;
 }
 
 export function computedTypeList(type: string) {
-    const dictList: Array<IOptions> = [];
-    const globalList: Array<IOptions> = [];
-    getByDictType(type).then(res => {
-        res.data.dictList.forEach((item: any) => {
-            dictList.push({
-                label: item.dictLabel,
-                value: item.dictValue,
-            });
-        });
-        res.data.globalList.forEach((item: any) => {
-            globalList.push({
-                label: item.name,
-                value: item.key,
-            });
-        });
-    });
+	const dictList: Array<IOptions> = [];
+	const globalList: Array<IOptions> = [];
+	getByDictType(type).then(res => {
+		res.data.dictList.forEach((item: any) => {
+			dictList.push({
+				label: item.dictLabel,
+				value: item.dictValue,
+			});
+		});
+		res.data.globalList.forEach((item: any) => {
+			globalList.push({
+				label: item.name,
+				value: item.key,
+			});
+		});
+	});
 
-    return {
-        dictList,
-        globalList,
-    };
+	return {
+		dictList,
+		globalList,
+	};
 }

+ 3 - 2
src/router/index.ts

@@ -159,7 +159,8 @@ export const constantRoutes: RouteRecordRaw[] = [
 			},
 			{
 				path: 'inquiryDetails',
-				component: () => import('@/views/notificationInfoInquiry/securityInformationInquiry/components/detail.vue'),
+				component: () =>
+					import('@/views/notificationInfoInquiry/securityInformationInquiry/components/detail.vue'),
 				name: 'inquiryDetails',
 				meta: { title: '查看通报信息', icon: 'user' },
 			},
@@ -266,6 +267,6 @@ const router = createRouter({
 	},
 });
 
-console.log(router.getRoutes()); 
+// console.log(router.getRoutes());
 
 export default router;

+ 9 - 3
src/types/global.d.ts

@@ -1,4 +1,10 @@
 export interface IOptions {
-  label: string;
-  value: string;
-}
+	label: string;
+	value: string;
+}
+
+export interface TreeOptions {
+	id: string;
+	label: string;
+	children?: TreeOptions[];
+}

+ 6 - 20
src/views/notificationInfoManage/addressBook/components/detail.vue

@@ -156,8 +156,8 @@
 import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import useSystemStore from '@/store/main';
-import { getDeptTree } from '@/api/address/index';
-import { outTypeList } from '@/libs/commonMeth';
+import { outTypeList, outDeptTree } from '@/libs/commonMeth';
+import { TreeOptions } from '@/types/global';
 const bj_msg_recipient = outTypeList('bj_msg_recipient'); //短信接收人
 const bj_ab_status = outTypeList('bj_ab_status'); //短信接收人
 import dayjs from 'dayjs';
@@ -227,26 +227,12 @@ const remoteuserNameMethod = (query: string) => {
 // 		return true;
 // 	}
 // };
+
+const unitOptions: any = ref<TreeOptions[]>();
+const belongsDeptOptions: any = ref<TreeOptions[]>();
 onMounted(async () => {
-	getTree();
+	unitOptions.value = await outDeptTree();
 });
-interface Tree {
-	id: number;
-	label: string;
-	children?: Tree[];
-}
-const unitOptions: any = ref<Tree[]>();
-const belongsDeptOptions: any = ref<Tree[]>();
-// 过滤节点(搜索功能)
-const getTree = () => {
-	getDeptTree().then((res: any) => {
-		if (res.code == 200) {
-			unitOptions.value = res.data;
-		} else {
-			unitOptions.value = [];
-		}
-	});
-};
 
 // 定义数据绑定
 const initialForm: any = {};

+ 5 - 21
src/views/notificationInfoManage/addressBook/components/treeSelect.vue

@@ -30,7 +30,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { ElTree } from 'element-plus';
-import { getDeptTree } from '@/api/address/index';
+import { outDeptTree } from '@/libs/commonMeth';
+import { TreeOptions } from '@/types/global';
 
 const emit = defineEmits(['treeCheck']);
 
@@ -39,34 +40,17 @@ const treeProps = {
 	label: 'label',
 	children: 'children',
 };
-interface Tree {
-	id: number;
-	label: string;
-	children?: Tree[];
-}
-
 // 搜索关键词
 const searchKeyword = ref('');
 // 选中的节点ID(受控于v-model:checkedKeys)
 const checkedKeys = ref<(string | number)[]>([]);
 // 树形组件实例
 const treeRef = ref<InstanceType<typeof ElTree>>();
-// 树形结构数据(模拟后端返回数据)
-const treeData = ref<Tree[]>();
 
+const treeData = ref<TreeOptions[]>();
 onMounted(async () => {
-	getTree();
+	treeData.value = await outDeptTree();
 });
-// 过滤节点(搜索功能)
-const getTree = () => {
-	getDeptTree().then((res: any) => {
-		if (res.code == 200) {
-			treeData.value = res.data;
-		} else {
-			treeData.value = [];
-		}
-	});
-};
 
 // 过滤节点(搜索功能)
 const filterNode = (value: string, data: any) => {
@@ -74,7 +58,7 @@ const filterNode = (value: string, data: any) => {
 	return data.label.toLowerCase().includes(value.toLowerCase());
 };
 
-const handleCheckChange = (data: Tree, checked: boolean, indeterminate: boolean) => {
+const handleCheckChange = (data: TreeOptions, checked: boolean, indeterminate: boolean) => {
 	// console.log('勾选状态变化:', {
 	//   nodeId: data.id,
 	//   nodeLabel: data.label,

+ 19 - 12
src/views/notificationInfoManage/notificationListManage/config/content.config.ts

@@ -1,21 +1,28 @@
 const contentConfig = {
-	pageName: 'rentalCompany',
+	pageName: 'lonm',
 	header: {
 		title: '',
 	},
 	propsList: [
 		{ type: 'index', label: '事项编号' },
-		{ type: 'normal', label: '发布单位', prop: 'releaseDeptName' },
-		{ type: 'normal', label: '通报类型', prop: 'reportType', sortable: true, width: 140 },
-		{ type: 'normal', label: '通报事项类别', prop: 'reportMattersType', sortable: true, width: 140 },
-		{ type: 'normal', label: '通报事项', prop: 'mattersContent', sortable: true, width: 100 },
-		{ type: 'normal', label: '通报标准或具体行为列举', prop: 'reportStandard', width: 180 },
-		{ type: 'normal', label: '通报依据', prop: 'reportBasis', width: 90 },
-		{ type: 'custom', label: '发出单位', prop: 'sendDeptName', width: 220 },
-		{ type: 'custom', label: '接收单位', prop: 'receiveDeptName', width: 220 },
-		{ type: 'normal', label: '发布状态', prop: 'reportStatus', width: 140 },
-		{ type: 'normal', label: '创建日期', prop: 'createTime', width: 140 },
-		{ type: 'normal', label: '创建人员', prop: 'creator', width: 140 },
+		{ type: 'normal', label: '发布单位', prop: 'publishingUnitStr' },
+		{
+			type: 'custom',
+			label: '通报类型',
+			prop: 'notificationType',
+			slotName: 'notificationType',
+			sortable: true,
+			width: 140,
+		},
+		{ type: 'custom', label: '通报事项类别', prop: 'conm', slotName: 'conm', sortable: true, width: 140 },
+		{ type: 'normal', label: '通报事项', prop: 'notificationMatters', sortable: true, width: 100 },
+		{ type: 'normal', label: '通报标准或具体行为列举', prop: 'notificationStandards', width: 180 },
+		{ type: 'normal', label: '通报依据', prop: 'notificationBasis', width: 90 },
+		{ type: 'normal', label: '发出单位', prop: 'deliveryUnitStr', width: 220 },
+		{ type: 'normal', label: '接收单位', prop: 'lonmMiddleStr', width: 220 },
+		{ type: 'custom', label: '发布状态', prop: 'releaseStatus', slotName: 'releaseStatus', width: 140 },
+		{ type: 'normal', label: '创建日期', prop: 'addDate', width: 140 },
+		{ type: 'normal', label: '创建人员', prop: 'addName', width: 140 },
 		{ type: 'handler', label: '操作', slotName: 'operate', width: 180, fixed: 'right' },
 	],
 };

+ 1 - 1
src/views/notificationInfoManage/notificationListManage/config/detail.config.ts

@@ -1,5 +1,5 @@
 const modalConfig = {
-	pageName: 'rentalCompany',
+	pageName: 'lonm',
 	addTitle: '违法信息通报事项清单信息',
 	editTitle: '违法信息通报事项清单信息',
 	detailTitle: '违法信息通报事项清单信息',

+ 26 - 121
src/views/notificationInfoManage/notificationListManage/config/search.config.ts

@@ -4,176 +4,81 @@ interface Inew {
 }
 
 const searchConfig = {
-	pageName: 'rentalCompany',
+	pageName: 'lonm',
 	formItems: [
 		{
 			label: '发布单位',
-			prop: 'releaseDeptName',
-			type: 'select',
-			multiple: true,
-			options: [
-				{
-					label: '全部',
-					value: 'all',
-				},
-				{
-					label: '上海海事',
-					value: 'msg',
-				},
-				{
-					label: '广州海事',
-					value: 'assist',
-				},
-			] as Array<Inew>,
-			placeholder: '请选择发出单位',
+			prop: 'publishingUnit',
+			slotName: 'publishingUnit',
+			type: 'custom',
+			options: [] as Array<Inew>,
+			placeholder: '请选择发布单位',
 		},
 		{
 			label: '通报类型',
-			prop: 'reportType',
+			prop: 'notificationType',
 			type: 'select',
 			multiple: true,
-			options: [
-				{
-					label: '全部',
-					value: 'all',
-				},
-				{
-					label: '内部',
-					value: 'inner',
-				},
-				{
-					label: '外部',
-					value: 'outer',
-				},
-			] as Array<Inew>,
+			options: [] as Array<Inew>,
 			placeholder: '请选择通报类型',
 		},
 		{
 			label: '通报事项类别',
-			prop: 'reportMattersType',
+			prop: 'conm',
 			type: 'select',
 			multiple: true,
-			options: [
-				{
-					label: '全部',
-					value: 'all',
-				},
-				{
-					label: '信息告知类',
-					value: 'msg',
-				},
-				{
-					label: '协助处理类',
-					value: 'assist',
-				},
-			] as Array<Inew>,
+			options: [] as Array<Inew>,
 			placeholder: '请选择通报事项类别',
 		},
 		{
 			label: '通报事项',
-			prop: 'mattersContent',
+			prop: 'notificationMatters',
 			type: 'input',
 			placeholder: '请输入通报事项',
 		},
 		{
 			label: '通报依据',
-			prop: 'reportBasis',
+			prop: 'notificationBasis',
 			type: 'input',
 			placeholder: '请输入通报依据',
 		},
 		{
 			label: '发出单位',
-			prop: 'sendDeptIds',
-			type: 'select',
-			multiple: true,
-			options: [
-				{
-					label: '全部',
-					value: 'all',
-				},
-				{
-					label: '上海海事',
-					value: 'msg',
-				},
-				{
-					label: '广州海事',
-					value: 'assist',
-				},
-			] as Array<Inew>,
+			prop: 'deliveryUnit',
+			slotName: 'deliveryUnit',
+			type: 'custom',
+			multiple: false,
+			options: [] as Array<Inew>,
 			placeholder: '请选择发出单位',
 		},
 		{
 			label: '接收单位',
-			prop: 'receiveDeptName',
-			type: 'select',
+			prop: 'lonmMiddle',
+			slotName: 'lonmMiddle',
+			type: 'custom',
 			multiple: true,
-			options: [
-				{
-					label: '全部',
-					value: 'all',
-				},
-				{
-					label: '上海海事',
-					value: 'msg',
-				},
-				{
-					label: '广州海事',
-					value: 'assist',
-				},
-			] as Array<Inew>,
+			options: [] as Array<Inew>,
 			placeholder: '请选择接收单位',
 		},
 		{
 			label: '发布状态',
-			prop: 'reportStatus',
+			prop: 'releaseStatus',
 			type: 'select',
 			multiple: true,
-			options: [
-				{
-					label: '全部',
-					value: '0',
-				},
-				{
-					label: '待提交',
-					value: '1',
-				},
-				{
-					label: '可用',
-					value: '2',
-				},
-				{
-					label: '废止',
-					value: '3',
-				},
-			] as Array<Inew>,
+			options: [] as Array<Inew>,
 			placeholder: '请选择接收单位',
 		},
 		{
 			label: '创建时间',
-			prop: 'createTime',
+			prop: 'createDates',
 			type: 'date-picker',
 			placeholder: '请选择创建时间',
 		},
 		{
 			label: '创建人员',
 			prop: 'createBy',
-			type: 'select',
-			multiple: true,
-			options: [
-				{
-					label: '张三',
-					value: 'inner',
-				},
-				{
-					label: '李四',
-					value: 'outer',
-				},
-				{
-					label: '王五',
-					value: 'outer',
-				},
-			] as Array<Inew>,
-			placeholder: '请选择创建人员',
+			type: 'input',
+			placeholder: '请输入创建人员',
 		},
 	],
 };

+ 187 - 6
src/views/notificationInfoManage/notificationListManage/index.vue

@@ -1,16 +1,96 @@
 <template>
 	<div class="sensitive-words">
-		<pageSearch ref="searchTableRef" :searchConfig="searchConfig" />
+		<pageSearch ref="searchTableRef" :searchConfig="searchConfig">
+			<template #publishingUnit="scope">
+				<el-tree-select
+					v-model="scope.value"
+					:data="treeData"
+					node-key="id"
+					filterable
+					@change="newVal => onMessageChange(scope, newVal)"
+					placeholder="请选择发布单位"
+				/>
+			</template>
+			<template #deliveryUnit="scope">
+				<el-tree-select
+					v-model="scope.value"
+					:data="treeData"
+					node-key="id"
+					filterable
+					@change="newVal => onMessageChange(scope, newVal)"
+					placeholder="请选择发出单位"
+				/>
+			</template>
+			<template #lonmMiddle="scope">
+				<el-tree-select
+					v-model="scope.value"
+					:data="treeData"
+					node-key="id"
+					filterable
+					@change="newVal => onMessageChange(scope, newVal)"
+					placeholder="请选择接收单位"
+				/>
+			</template>
+		</pageSearch>
 
 		<pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
 			<template #button>
 				<el-button type="primary" @click="handleAdd()">新增</el-button>
 			</template>
+			<!-- 通报类型 -->
+			<template #notificationType="scope">
+				<template :index="index" v-for="(item, index) in bj_notification_type">
+					<el-tag :index="index" v-if="item.value == scope.row.notificationType" type="success">{{
+						item.label
+					}}</el-tag>
+				</template>
+			</template>
+			<!-- 通报事项类别 -->
+			<template #conm="scope">
+				<template :index="index" v-for="(item, index) in bj_category_onm">
+					<el-tag :index="index" v-if="item.value == scope.row.conm" type="primary">{{ item.label }}</el-tag>
+				</template>
+			</template>
+
+			<!-- 发布状态 -->
+			<template #releaseStatus="scope">
+				<template :index="index" v-for="(item, index) in bj_nl_released_status">
+					<el-tag
+						:index="index"
+						v-if="item.value == scope.row.releaseStatus"
+						:type="
+							scope.row.releaseStatus == '1' ? 'primary' : scope.row.releaseStatus == '2' ? 'success' : 'info'
+						"
+						>{{ item.label }}</el-tag
+					>
+				</template>
+			</template>
 			<template #operate="scope">
 				<el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)"> 查看 </el-button>
-				<el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)"> 编辑 </el-button>
-				<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)"> 启用 </el-button>
-				<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)"> 废止 </el-button>
+				<el-button
+					type="primary"
+					link
+					@click="handleEdit(scope.row.rentalCompanyId)"
+					v-if="scope.row.releaseStatus == 1"
+				>
+					编辑
+				</el-button>
+				<el-button
+					type="primary"
+					link
+					@click="handleDelete(scope.row.rentalCompanyId)"
+					v-if="scope.row.releaseStatus == 1"
+				>
+					启用
+				</el-button>
+				<el-button
+					type="primary"
+					link
+					@click="handleDelete(scope.row.rentalCompanyId)"
+					v-if="scope.row.releaseStatus == 2"
+				>
+					废止
+				</el-button>
 			</template>
 		</pageContent>
 		<pageDetail :modalConfig="detailConfig" ref="modalRef"> </pageDetail>
@@ -25,6 +105,15 @@ import pageSearch from '@/components/components/pageSearch.vue';
 import detailConfig from './config/detail.config';
 import pageDetail from './components/detail.vue';
 import useSystemStore from '@/store/main';
+import { outTypeList, outDeptTree } from '@/libs/commonMeth';
+import { TreeOptions } from '@/types/global';
+
+// 通报事项类别	bj_category_onm
+
+const bj_notification_type = outTypeList('bj_notification_type'); //通报类型
+const bj_category_onm = outTypeList('bj_category_onm'); //通报事项类别
+const bj_nl_released_status = outTypeList('bj_nl_released_status'); //通报事项清单发布状态
+
 // 使用pinia数据
 const systemStore = useSystemStore();
 const { pageDetailInfo } = storeToRefs(systemStore);
@@ -36,14 +125,25 @@ const tableListRef = ref();
 
 // 操作弹框
 import usePageModal from '@/components/components/hooks/usePageDetails';
+import PageSearch from '@/components/components/pageSearch.vue';
 const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
 	usePageModal();
 
+// const onUnitChange = async (row: any, val) => {
+// 	console.log(row);
+// 	console.log('+++++++++++++++++++++++');
+// 	console.log(val);
+// };
+
 const handleEdit = async (id: string) => {
 	await handlePageDetail(id);
 	await handleEditDataClick();
 };
 
+const onMessageChange = (scope, newVal) => {
+	scope.onInput(newVal);
+};
+
 // 新增按钮
 const handleAdd = () => {
 	handleNewDataClick();
@@ -70,12 +170,93 @@ function handleDelete(value: any) {
 // 筛选-状态赋值
 async function searchItem() {
 	searchConfig.formItems.forEach(item => {
-		if (item.prop === 'status') {
-			// item.options = searchList.value;
+		if (item.prop === 'notificationType') {
+			item.options = bj_notification_type;
+		}
+		if (item.prop === 'conm') {
+			item.options = bj_category_onm;
+		}
+		if (item.prop === 'releaseStatus') {
+			item.options = bj_nl_released_status;
 		}
 	});
 }
+
 searchItem();
+const treeData = ref<TreeOptions[]>();
+onMounted(async () => {
+	// treeData.value = await outDeptTree();
+	treeData.value = [
+		{
+			id: '1',
+			label: 'Level one 1',
+			children: [
+				{
+					id: '1-1',
+					label: 'Level two 1-1',
+					children: [
+						{
+							id: '1-1-1',
+							label: 'Level three 1-1-1',
+						},
+					],
+				},
+			],
+		},
+		{
+			id: '2',
+			label: 'Level one 2',
+			children: [
+				{
+					id: '2-1',
+					label: 'Level two 2-1',
+					children: [
+						{
+							id: '2-1-1',
+							label: 'Level three 2-1-1',
+						},
+					],
+				},
+				{
+					id: '2-2',
+					label: 'Level two 2-2',
+					children: [
+						{
+							id: '2-2-1',
+							label: 'Level three 2-2-1',
+						},
+					],
+				},
+			],
+		},
+		{
+			id: '3',
+			label: 'Level one 3',
+			children: [
+				{
+					id: '3-1',
+					label: 'Level two 3-1',
+					children: [
+						{
+							id: '3-1-1',
+							label: 'Level three 3-1-1',
+						},
+					],
+				},
+				{
+					value: '3-2',
+					label: 'Level two 3-2',
+					children: [
+						{
+							id: '3-2-1',
+							label: 'Level three 3-2-1',
+						},
+					],
+				},
+			],
+		},
+	];
+});
 </script>
 
 <style scoped lang="scss">