Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 9ec2fec0 by 李金轩
Options

ljx

1 parent ed715e56
Inline Side-by-side
Showing 8 changed files with 315 additions and 248 deletions
src/views/DataRepair/DataRepair.vue
...@@ -6,13 +6,10 @@ ...@@ -6,13 +6,10 @@
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onAccountChange" @change="onAccountChange"
:options="accountList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场:" style="padding: 5px 0"> <a-form-item label="广场:" style="padding: 5px 0">
...@@ -21,12 +18,10 @@ ...@@ -21,12 +18,10 @@
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onPlazaChange" @change="onPlazaChange"
:options="plazaList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="监控点名称:" style="padding: 5px 0"> <a-form-item label="监控点名称:" style="padding: 5px 0">
...@@ -35,12 +30,10 @@ ...@@ -35,12 +30,10 @@
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onGateChange" @change="onGateChange"
:options="gateList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in gateList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="设备通道号:" style="padding: 5px 0"> <a-form-item label="设备通道号:" style="padding: 5px 0">
...@@ -48,12 +41,10 @@ ...@@ -48,12 +41,10 @@
style="width: 280px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
:options="channelList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in channelList"
:value="item">
{{ item }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="修补日期:" style="padding: 5px 0"> <a-form-item label="修补日期:" style="padding: 5px 0">
...@@ -219,7 +210,15 @@ export default { ...@@ -219,7 +210,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
plazaList.value = r for (const item of r)
{
plazaList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -232,7 +231,15 @@ export default { ...@@ -232,7 +231,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
accountList.value = r for (const item of r)
{
accountList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -256,7 +263,15 @@ export default { ...@@ -256,7 +263,15 @@ export default {
if (isArray(r)) if (isArray(r))
{ {
tempList.push(...r) for (const item of r)
{
tempList.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
} }
...@@ -279,7 +294,15 @@ export default { ...@@ -279,7 +294,15 @@ export default {
if (isArray(r)) if (isArray(r))
{ {
tempList.push(...r) for (const item of r)
{
tempList.push(
{
value: item,
label: item,
}
)
}
} }
} }
channelList.value = tempList channelList.value = tempList
......
src/views/DataRerun/DataRerun.vue
<template> <template>
<a-form :model="queryForm" layout="inline"> <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
<a-form-item label="集团："> <a-form-item label="集团：">
<a-select v-model:value="queryForm.account_id" <a-select v-model:value="queryForm.account_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
:options="accountList"
@change="onAccountChange" @change="onAccountChange"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场："> <a-form-item label="广场：">
<a-select v-model:value="queryForm.plaza_id" <a-select v-model:value="queryForm.plaza_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
:options="plazaList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="数据类型："> <a-form-item label="数据类型：">
...@@ -54,7 +49,7 @@ ...@@ -54,7 +49,7 @@
</a-form> </a-form>
<div class="result-wrapper-2"> <div class="result-wrapper-2">
<el-row v-for="item in resultList" style="padding: 5px 0"> <el-row v-for="item in resultList">
<el-col :span="3"> <el-col :span="3">
{{ progressMap[item.scheduleType] + '：' }} {{ progressMap[item.scheduleType] + '：' }}
</el-col> </el-col>
...@@ -135,7 +130,15 @@ export default { ...@@ -135,7 +130,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
plazaList.value = r for (const item of r)
{
plazaList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -148,7 +151,15 @@ export default { ...@@ -148,7 +151,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
accountList.value = r for (const item of r)
{
accountList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
......
src/views/FeatureLibraryRebuild/FeatureLibraryRebuild.vue
...@@ -2,34 +2,29 @@ ...@@ -2,34 +2,29 @@
<a-form :model="queryForm" layout="inline"> <a-form :model="queryForm" layout="inline">
<a-form-item label="集团："> <a-form-item label="集团：">
<a-select v-model:value="queryForm.account_id" <a-select v-model:value="queryForm.account_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onAccountChange" @change="onAccountChange"
:options="accountList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场："> <a-form-item label="广场：">
<a-select v-model:value="queryForm.plaza_id" <a-select v-model:value="queryForm.plaza_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
:options="plazaList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="特征重提类型："> <a-form-item label="特征重提类型：">
<a-select v-model:value="queryForm.featureRevisitType" style="width: 200px"> <a-select v-model:value="queryForm.featureRevisitType" style="width: 280px">
<a-select-option :value="1">店员库重建</a-select-option> <a-select-option :value="1">店员库重建</a-select-option>
<a-select-option :value="2">顾客库重建</a-select-option> <a-select-option :value="2">顾客库重建</a-select-option>
</a-select> </a-select>
...@@ -62,7 +57,6 @@ export default { ...@@ -62,7 +57,6 @@ export default {
let webSocket = undefined let webSocket = undefined
const resultList = ref([]) const resultList = ref([])
// sequence // sequence
const dataList = ref([])
const accountList = ref([]) const accountList = ref([])
const plazaList = ref([]) const plazaList = ref([])
const zoneList = ref([]) const zoneList = ref([])
...@@ -92,7 +86,15 @@ export default { ...@@ -92,7 +86,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
plazaList.value = r for (const item of r)
{
plazaList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -105,7 +107,15 @@ export default { ...@@ -105,7 +107,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
accountList.value = r for (const item of r)
{
accountList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
......
src/views/FeatureReExtract/FeatureReExtract.vue
<template> <template>
<a-form :model="queryForm" layout="inline"> <a-form :model="queryForm" layout="inline">
<a-form-item label="集团："> <a-form-item label="集团：" style="padding: 5px 0">
<a-select v-model:value="queryForm.account_id" <a-select v-model:value="queryForm.account_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onAccountChange" @change="onAccountChange"
:options="accountList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场："> <a-form-item label="广场：" style="padding: 5px 0">
<a-select v-model:value="queryForm.plaza_id" <a-select v-model:value="queryForm.plaza_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
:options="plazaList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="特征重提类型："> <a-form-item label="特征重提类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.featureRevisitType" style="width: 200px"> <a-select v-model:value="queryForm.featureRevisitType" style="width: 280px">
<a-select-option :value="0">人脸+全身照特征</a-select-option> <a-select-option :value="0">人脸+全身照特征</a-select-option>
<a-select-option :value="1">人脸特征</a-select-option> <a-select-option :value="1">人脸特征</a-select-option>
<a-select-option :value="2">全身照特征</a-select-option> <a-select-option :value="2">全身照特征</a-select-option>
<a-select-option :value="3">店员特征</a-select-option> <a-select-option :value="3">店员特征</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="选择日期：" v-if="queryForm.featureRevisitType !== 3"> <a-form-item label="选择日期：" v-if="queryForm.featureRevisitType !== 3" style="padding: 5px 0">
<a-date-picker v-model:value="queryForm.date"/> <a-date-picker v-model:value="queryForm.date" style="width: 280px"/>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item style="padding: 5px 0">
<a-button type="primary" @click="initializeWebSocket">开始</a-button> <a-button type="primary" @click="initializeWebSocket">开始</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
...@@ -95,7 +90,15 @@ export default { ...@@ -95,7 +90,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
plazaList.value = r for (const item of r)
{
plazaList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -108,7 +111,15 @@ export default { ...@@ -108,7 +111,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
accountList.value = r for (const item of r)
{
accountList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
......
src/views/PeopleReContrast/PeopleReContrast.vue
...@@ -2,40 +2,35 @@ ...@@ -2,40 +2,35 @@
<a-form :model="queryForm" layout="inline"> <a-form :model="queryForm" layout="inline">
<a-form-item label="集团："> <a-form-item label="集团：">
<a-select v-model:value="queryForm.account_id" <a-select v-model:value="queryForm.account_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onAccountChange" @change="onAccountChange"
:options="accountList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场："> <a-form-item label="广场：">
<a-select v-model:value="queryForm.plaza_id" <a-select v-model:value="queryForm.plaza_id"
style="width: 200px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
:options="plazaList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="比对类型："> <a-form-item label="比对类型：">
<a-select v-model:value="queryForm.featureRevisitType" style="width: 200px"> <a-select v-model:value="queryForm.featureRevisitType" style="width: 280px">
<a-select-option :value="1">店员对比</a-select-option> <a-select-option :value="1">店员对比</a-select-option>
<a-select-option :value="2">顾客对比</a-select-option> <a-select-option :value="2">顾客对比</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="选择日期："> <a-form-item label="选择日期：">
<a-date-picker v-model:value="queryForm.date"/> <a-date-picker v-model:value="queryForm.date" style="width: 280px"/>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button type="primary" @click="initializeWebSocket">开始</a-button> <a-button type="primary" @click="initializeWebSocket">开始</a-button>
...@@ -92,7 +87,15 @@ export default { ...@@ -92,7 +87,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
plazaList.value = r for (const item of r)
{
plazaList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -105,7 +108,15 @@ export default { ...@@ -105,7 +108,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
accountList.value = r for (const item of r)
{
accountList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
......
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
...@@ -6,13 +6,10 @@ ...@@ -6,13 +6,10 @@
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onAccountChange" @change="onAccountChange"
:options="accountList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场：" style="padding: 5px 0"> <a-form-item label="广场：" style="padding: 5px 0">
...@@ -21,12 +18,10 @@ ...@@ -21,12 +18,10 @@
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onPlazaChange" @change="onPlazaChange"
:options="plazaList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="出入类型：" style="padding: 5px 0"> <a-form-item label="出入类型：" style="padding: 5px 0">
...@@ -43,26 +38,23 @@ ...@@ -43,26 +38,23 @@
style="width: 280px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onZoneChange"> @change="onZoneChange"
<a-select-option :options="zoneList"
v-for="item in zoneList" optionFilterProp="label"
:value="item.id" show-search
> >
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="监控点：" style="padding: 5px 0"> <a-form-item label="监控点：" style="padding: 5px 0">
<a-select v-model:value="queryForm.gate_id" <a-select v-model:value="queryForm.gate_id"
style="width: 280px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1"> :maxTagCount="1"
<a-select-option :options="gateList"
v-for="item in gateList" optionFilterProp="label"
:value="item.id" show-search
> >
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="方向：" style="padding: 5px 0"> <a-form-item label="方向：" style="padding: 5px 0">
...@@ -202,10 +194,6 @@ export default { ...@@ -202,10 +194,6 @@ export default {
confirmSearch() confirmSearch()
} }
const onSubmit = function() {
}
const onAccountChange = function() { const onAccountChange = function() {
getPlazaList() getPlazaList()
getZoneList() getZoneList()
...@@ -232,7 +220,15 @@ export default { ...@@ -232,7 +220,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
plazaList.value = r for (const item of r)
{
plazaList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -250,7 +246,15 @@ export default { ...@@ -250,7 +246,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
zoneList.value = r for (const item of r)
{
zoneList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -270,7 +274,15 @@ export default { ...@@ -270,7 +274,15 @@ export default {
(r) => { (r) => {
if (isArray(r.data)) if (isArray(r.data))
{ {
gateList.value = r.data for (const item of r.data)
{
gateList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -283,7 +295,15 @@ export default { ...@@ -283,7 +295,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
accountList.value = r for (const item of r)
{
accountList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -379,7 +399,6 @@ export default { ...@@ -379,7 +399,6 @@ export default {
// function // function
onPageNumChange, onPageNumChange,
onPageSizeChange, onPageSizeChange,
onSubmit,
onAccountChange, onAccountChange,
onPlazaChange, onPlazaChange,
onZoneChange, onZoneChange,
......
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecord.vue
...@@ -6,13 +6,10 @@ ...@@ -6,13 +6,10 @@
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onAccountChange" @change="onAccountChange"
:options="accountList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场：" style="padding: 5px 0"> <a-form-item label="广场：" style="padding: 5px 0">
...@@ -21,12 +18,10 @@ ...@@ -21,12 +18,10 @@
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onPlazaChange" @change="onPlazaChange"
:options="plazaList"
optionFilterProp="label"
show-search
> >
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="出入类型：" style="padding: 5px 0"> <a-form-item label="出入类型：" style="padding: 5px 0">
...@@ -43,26 +38,22 @@ ...@@ -43,26 +38,22 @@
style="width: 280px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onZoneChange"> @change="onZoneChange"
<a-select-option :options="zoneList"
v-for="item in zoneList" optionFilterProp="label"
:value="item.id" show-search
> >
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="监控点：" style="padding: 5px 0"> <a-form-item label="监控点：" style="padding: 5px 0">
<a-select v-model:value="queryForm.gate_id" <a-select v-model:value="queryForm.gate_id"
style="width: 280px" style="width: 280px"
mode="multiple" mode="multiple"
:maxTagCount="1"> :maxTagCount="1"
<a-select-option :options="gateList"
v-for="item in gateList" optionFilterProp="label"
:value="item.id" show-search
> >
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="方向：" style="padding: 5px 0"> <a-form-item label="方向：" style="padding: 5px 0">
...@@ -192,10 +183,6 @@ export default { ...@@ -192,10 +183,6 @@ export default {
confirmSearch() confirmSearch()
} }
const onSubmit = function() {
}
const onAccountChange = function() { const onAccountChange = function() {
getPlazaList() getPlazaList()
getZoneList() getZoneList()
...@@ -222,7 +209,15 @@ export default { ...@@ -222,7 +209,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
plazaList.value = r for (const item of r)
{
plazaList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -240,7 +235,15 @@ export default { ...@@ -240,7 +235,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
zoneList.value = r for (const item of r)
{
zoneList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -260,7 +263,15 @@ export default { ...@@ -260,7 +263,15 @@ export default {
(r) => { (r) => {
if (isArray(r.data)) if (isArray(r.data))
{ {
gateList.value = r.data for (const item of r.data)
{
gateList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -273,7 +284,15 @@ export default { ...@@ -273,7 +284,15 @@ export default {
(r) => { (r) => {
if (isArray(r)) if (isArray(r))
{ {
accountList.value = r for (const item of r)
{
accountList.value.push(
{
value: item.id,
label: item.name,
}
)
}
} }
} }
) )
...@@ -358,7 +377,6 @@ export default { ...@@ -358,7 +377,6 @@ export default {
// function // function
onPageNumChange, onPageNumChange,
onPageSizeChange, onPageSizeChange,
onSubmit,
onAccountChange, onAccountChange,
onPlazaChange, onPlazaChange,
onZoneChange, onZoneChange,
......
src/views/Test/Test.vue
<template> <template>
<div style="width: 256px"> <a-select
<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px"> v-model:value="value"
<MenuUnfoldOutlined v-if="collapsed"/> show-search
<MenuFoldOutlined v-else/> mode="multiple"
</a-button> :maxTagCount="1"
<a-menu style="width: 280px"
mode="inline" :options="options"
theme="dark" optionFilterProp="label"
:inline-collapsed="collapsed"
v-model:selectedKeys="selectedKeys"
> >
<a-menu-item key="1"> <a-select-option
<template #icon> v-for="item in options"
<PieChartOutlined/> :value="item.value"
</template> >
<span>Option 1</span> {{ item.label }}
</a-menu-item> </a-select-option>
<a-menu-item key="2"> </a-select>
<template #icon>
<DesktopOutlined/>
</template>
<span>Option 2</span>
</a-menu-item>
<a-menu-item key="3">
<template #icon>
<InboxOutlined/>
</template>
<span>Option 3</span>
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<MailOutlined/>
</template>
<template #title>Navigation One</template>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<AppstoreOutlined/>
</template>
<template #title>Navigation Two</template>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-sub-menu>
</a-menu>
</div>
</template> </template>
<script> <script>
import {defineComponent, reactive, toRefs, watch} from 'vue' import {defineComponent, ref} from 'vue'
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
MailOutlined,
DesktopOutlined,
InboxOutlined,
AppstoreOutlined,
} from '@ant-design/icons-vue'
export default defineComponent({ export default defineComponent({
setup() { setup() {
const state = reactive({ const options = ref([
collapsed: false, {
selectedKeys: ['1'], value: 'jack',
openKeys: ['sub1'], label: '飞飞飞飞飞飞飞',
preOpenKeys: ['sub1'], },
}) {
watch( value: 'lucy',
() => state.openKeys, label: 'lllll',
(val, oldVal) => { },
state.preOpenKeys = oldVal {
value: 'tom',
label: 'tttttt',
}, },
) ])
const toggleCollapsed = () => { const handleChange = value => {
state.collapsed = !state.collapsed console.log(`selected ${value}`)
state.openKeys = state.collapsed ? [] : state.preOpenKeys
} }
return {...toRefs(state), toggleCollapsed} const handleBlur = () => {
}, console.log('blur')
}
components: { const handleFocus = () => {
MenuFoldOutlined, console.log('focus')
MenuUnfoldOutlined, }
PieChartOutlined,
MailOutlined, const filterOption = (input, option) => {
DesktopOutlined, return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
InboxOutlined, }
AppstoreOutlined,
return {
value: ref(undefined),
filterOption,
handleBlur,
handleFocus,
handleChange,
options,
}
}, },
}) })
</script> </script>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!