feat: 数字民警开发
parent
614cc5fc54
commit
f0d82b768c
@ -0,0 +1,295 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="historical-records">
|
||||||
|
<div class="top">
|
||||||
|
<img src="../../assets/police/robot.png" alt="">
|
||||||
|
<span>伏小羲</span>
|
||||||
|
</div>
|
||||||
|
<div class="main-new-item" @click="onBtnClicked">
|
||||||
|
<img src="@/assets/common/new.png" alt="">
|
||||||
|
<span>新对话</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="caseList.length > 0">
|
||||||
|
<div class="main-message-item">
|
||||||
|
<img src="@/assets/common/message.png" alt="">
|
||||||
|
<span>最近半年</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="!delFlag" class="case-list">
|
||||||
|
<span v-for="(item,index) in caseList" :key="index" :class="[selectId === item.conversationId ? 'actived' :'']" class="case-item" @click.stop="selectCase(item)">
|
||||||
|
<span>{{ item.caseName }}</span>
|
||||||
|
<i class="el-icon-delete file-delete" @click.stop="delCase(item)" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="delFlag" class="del-case-list">
|
||||||
|
<el-checkbox-group v-model="checkedCase" class="case-group" @change="handleCheckedChange">
|
||||||
|
<el-checkbox v-for="item in caseList" :key="item.conversationId" :label="item.conversationId">{{ item.caseName }}</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
<div v-if="!delFlag" class="footer" @click="changeDelFlag">
|
||||||
|
<i class="el-icon-delete file-delete" />
|
||||||
|
<span>批量删除</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="delFlag" class="del-footer">
|
||||||
|
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
|
||||||
|
<span class="del-item" @click="delAll">
|
||||||
|
<i class="el-icon-delete file-delete" />
|
||||||
|
<span>删除</span>
|
||||||
|
</span>
|
||||||
|
<span class="logout" @click="changeDelFlag">
|
||||||
|
<i class="el-icon-switch-button" />
|
||||||
|
<span>退出</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="empty">
|
||||||
|
<span>最近半年 无对话内容</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { conversationList, conversationDelete } from '@/api/caseManagement'
|
||||||
|
export default {
|
||||||
|
name: 'HistoricalRecords',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checkAll: false,
|
||||||
|
selectId: '',
|
||||||
|
caseList: [
|
||||||
|
],
|
||||||
|
isIndeterminate: true,
|
||||||
|
checkedCase: [],
|
||||||
|
delFlag: false,
|
||||||
|
showCaseList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
delCase(item) {
|
||||||
|
this.$baseConfirm('你确定要删除吗?', null, async() => {
|
||||||
|
this.delCaseList([item.conversationId])
|
||||||
|
})
|
||||||
|
},
|
||||||
|
delAll() {
|
||||||
|
this.$baseConfirm('你确定要删除吗?', null, async() => {
|
||||||
|
this.delCaseList(this.checkedCase)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async delCaseList(list) {
|
||||||
|
const res = await conversationDelete(list)
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$baseMessage.success('删除成功!')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 开启新对话
|
||||||
|
onBtnClicked() {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 查询列表
|
||||||
|
async getList() {
|
||||||
|
const res = await conversationList({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 99999
|
||||||
|
})
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.caseList = res.data.records
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeDelFlag() {
|
||||||
|
this.delFlag = !this.delFlag
|
||||||
|
},
|
||||||
|
handleCheckAllChange(val) {
|
||||||
|
if (val === true) {
|
||||||
|
const list = []
|
||||||
|
this.caseList.forEach(e => {
|
||||||
|
list.push(e.conversationId)
|
||||||
|
})
|
||||||
|
this.checkedCase = list
|
||||||
|
} else {
|
||||||
|
this.checkedCase = []
|
||||||
|
}
|
||||||
|
this.isIndeterminate = false
|
||||||
|
},
|
||||||
|
handleCheckedChange(value) {
|
||||||
|
const checkedCount = value.length
|
||||||
|
this.checkAll = checkedCount === this.caseList.length
|
||||||
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.caseList.length
|
||||||
|
},
|
||||||
|
selectCase(item) {
|
||||||
|
this.$emit('getDetail', item.conversationId, item.caseId)
|
||||||
|
this.selectId = item.conversationId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.historical-records {
|
||||||
|
min-width: 350px;
|
||||||
|
background: #F9F9FB;
|
||||||
|
border-radius: 8px 0px 0px 8px;
|
||||||
|
padding: 24px;
|
||||||
|
position: relative;
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
display: flex;font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #1C1F23;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-new-item {
|
||||||
|
display: flex;
|
||||||
|
background: rgba(55,99,255,0.1);
|
||||||
|
border-radius: 8px 8px 8px 8px;
|
||||||
|
border: 1px solid #3763FF;
|
||||||
|
height: 49px;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #3763FF;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-message-item {
|
||||||
|
display: flex; height: 49px;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.case-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 430px);
|
||||||
|
overflow: auto;
|
||||||
|
.case-item {
|
||||||
|
height: 34px;font-size: 16px;
|
||||||
|
color: #888888;
|
||||||
|
margin-left: 25px;
|
||||||
|
line-height: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
i {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.actived {
|
||||||
|
background: #FFFFFF;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.case-item:hover {
|
||||||
|
background: #EAECF2;
|
||||||
|
border-radius: 8px 8px 8px 8px;
|
||||||
|
i {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.del-case-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 430px);
|
||||||
|
overflow: auto;
|
||||||
|
.case-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
::v-deep {
|
||||||
|
.el-checkbox {
|
||||||
|
height: 34px;font-size: 16px;
|
||||||
|
color: #888888;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.el-checkbox__label {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
height: 72px;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
cursor: pointer;
|
||||||
|
justify-content: center;
|
||||||
|
border-top: 1px solid #E0E2E9;
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.del-footer {
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
height: 72px;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
cursor: pointer;
|
||||||
|
justify-content: space-around;
|
||||||
|
border-top: 1px solid #E0E2E9;
|
||||||
|
.del-item {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FF3429;
|
||||||
|
cursor: pointer;
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.logout {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue