Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit ba782d7f by Tianqing Liu
Options

feat: 批量操作功能布局

1 parent 4d72ca27
Inline Side-by-side
Showing 1 changed file with 86 additions and 19 deletions
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
...@@ -132,27 +132,38 @@ ...@@ -132,27 +132,38 @@
<span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span> <span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
<!--修正组类型数据--> <!--修正组类型数据-->
<a-popconfirm
title="将从本组中剔除，您确认吗？"
ok-text="是"
cancel-text="否"
@confirm="deletePersonRecord(person)"
>
<a-tooltip placement="bottom">
<template #title>按住cmd或alt键可多选</template>
<span class="expandWord">剔除</span>
</a-tooltip>
</a-popconfirm>
<a-tooltip placement="bottom">
<template #title>按住cmd或alt键可多选</template>
<span class="expandWord" @click="movePersonRecord(person)">移动</span>
</a-tooltip>
<span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span> <span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span>
<span class="expandWord" @click='searchPersonInfoByGroup(person)'>搜索</span> <span class="expandWord" @click='searchPersonInfoByGroup(person)'>搜索</span>
<el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox> <el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox>
人id:{{ ' ' + person.person_unid }} 人id:{{ ' ' + person.person_unid }}
图片数量:{{ person.perrsonList.length }} 图片数量:{{ person.perrsonList.length }}
<!--批量操作-->
<div class="multiple-operation">
<el-button type="text" @click="handleMutipleOperation">
{{mutipleOperationText}}
<i class="el-icon-arrow-right el-icon--right"></i>
</el-button>
<!--批量子操作-->
<el-button type="text" :disabled="mutipleOperationDisabled" @click="movePersonRecord(person)">移动</el-button>
<a-popconfirm
title="将从本组中剔除，您确认吗？"
ok-text="是"
cancel-text="否"
@confirm="deletePersonRecord(person)"
>
<el-button type="text" :disabled="mutipleOperationDisabled">剔除</el-button>
</a-popconfirm>
<a-popconfirm
title="将彻底删除，您确认吗？"
ok-text="是"
cancel-text="否"
@confirm="deleteRealPersonRecord(person)"
>
<el-button type="text" :disabled="mutipleOperationDisabled">删除</el-button>
</a-popconfirm>
</div>
</div> </div>
<el-row v-for="row in getPagedList(person.perrsonList, 8)"> <el-row v-for="row in getPagedList(person.perrsonList, 8)">
<el-col :span="3" v-for="item in row"> <el-col :span="3" v-for="item in row">
...@@ -593,8 +604,26 @@ export default { ...@@ -593,8 +604,26 @@ export default {
// isShowGroupEditor.value = true // isShowGroupEditor.value = true
personGroupEditorRef.value.initDialog(data); personGroupEditorRef.value.initDialog(data);
} }
// 批量操作
const isMultipleOperation = ref(false)
const handleMutipleOperation = () => {
isMultipleOperation.value = !isMultipleOperation.value
if (!isMultipleOperation.value) {
selectedPersonList.value = []
}
}
const mutipleOperationText = computed(() => {
return isMultipleOperation.value ? '取消操作' : '批量操作'
})
const mutipleOperationDisabled = computed(() => {
return !(isMultipleOperation.value && selectedPersonList.value.length > 0)
})
const isSelectedPerson = (id) => {
return selectedPersonList.value.some(item => item.id === id)
}
// 剔除人员 // 剔除人员
const selectedPersonList = ref([]) const selectedPersonList = ref([]) // 批量操作，选中的图片
const deletePersonRecord = (data) => { const deletePersonRecord = (data) => {
console.log('deletePersonRecord', data, selectedPersonList) console.log('deletePersonRecord', data, selectedPersonList)
if (selectedPersonList.value.length < 1) { if (selectedPersonList.value.length < 1) {
...@@ -630,8 +659,36 @@ export default { ...@@ -630,8 +659,36 @@ export default {
} }
) )
} }
const isSelectedPerson = (id) => { // 删除人员
return selectedPersonList.value.some(item => item.id === id) const deleteRealPersonRecord = (data) => {
console.log('deletePersonRecord', data, selectedPersonList)
const unidList = selectedPersonList.value.map(item => item.unid)
const params = {
unid: unidList.join(','),
personUnid: '',
countdate: selectedPersonList.value[0].counttime
}
// TODO: 需要增加方法
clusterResultApi.updateRecognition(params).then(
(r) => {
if(r.msg_code==200){
ElMessage({
message: `剔除成功`,
type: 'success'
})
selectedPersonList.value = []
// 刷新列表
clickSearch()
} else {
ElMessage({
message: `剔除失败`,
type: 'error'
})
}
}
)
} }
// 移动人员 // 移动人员
const personGroupMoverRef = ref(); const personGroupMoverRef = ref();
...@@ -675,7 +732,7 @@ export default { ...@@ -675,7 +732,7 @@ export default {
const handleClick = function(data, event){ const handleClick = function(data, event){
console.log('handleClick', event) console.log('handleClick', event)
// 多选 // 多选
if (event.metaKey || event.altKey) { if (isMultipleOperation.value) {
selectedPersonList.value.push(data) selectedPersonList.value.push(data)
} else { } else {
currentItemId.value = data.id currentItemId.value = data.id
...@@ -865,6 +922,12 @@ export default { ...@@ -865,6 +922,12 @@ export default {
DetailDialogComparisonRef, DetailDialogComparisonRef,
singleImgComparisonRef, singleImgComparisonRef,
personGroupMoverRef, personGroupMoverRef,
isMultipleOperation,
handleMutipleOperation,
mutipleOperationText,
mutipleOperationDisabled,
deleteRealPersonRecord,
} }
} }
} }
...@@ -924,5 +987,9 @@ export default { ...@@ -924,5 +987,9 @@ export default {
.downBtn1{ .downBtn1{
float: right; float: right;
} }
.multiple-operation {
display: inline-block;
margin-left: 20px;
}
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!