敏感词聊天记录
This commit is contained in:
		| @@ -35,7 +35,6 @@ instance.interceptors.request.use(config => { | ||||
|   if (['/qxn', '/analysis'].includes(config.baseURL)) { | ||||
|     config.url = config.url.replace(/(app|auth|admin)\//, "api/") | ||||
|   } | ||||
|   config.url = config.url.replace(/(app|auth|admin)\//, "api/") | ||||
|   return config | ||||
| }, error => Message.error(error)) | ||||
| export default instance | ||||
|   | ||||
| @@ -1,329 +1,65 @@ | ||||
| <template> | ||||
|   <section class="AppSensitive"> | ||||
|     <ai-list> | ||||
|       <template #content> | ||||
|         <ai-search-bar> | ||||
|           <template #left> | ||||
|             <!-- <ai-area-get | ||||
|               style="width: 180px;" | ||||
|               placeholder="请选择地区" | ||||
|               :instance="instance" | ||||
|               v-model="search.areaId" | ||||
|               @select="onAreaChange"/> --> | ||||
|             <el-cascader ref="cascader1" clearable v-model="departIdList" :options="girdOptions" placeholder="所属部门" size="small" | ||||
|               :props="defaultProps" :show-all-levels="false" @change="gridChange"></el-cascader> | ||||
|               <ai-select v-model="search.integralType" placeholder="会话类型" @change="current=1, getTableData()" | ||||
|             :selectList="dict.getDict('integralType')"/> | ||||
|             <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd" | ||||
|               range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange"> | ||||
|             </el-date-picker> | ||||
|           </template> | ||||
|           <template #right> | ||||
|             <el-input size="small" placeholder="敏感词、涉及对象、姓名、手机号" v-model="search.name" clearable | ||||
|               @clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch" | ||||
|               v-throttle="() => {(current = 1), getTableData();}"/> | ||||
|           </template> | ||||
|         </ai-search-bar> | ||||
|         <ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size" | ||||
|                   @getList="getTableData()" :col-configs="colConfigs" :dict="dict"> | ||||
|           <el-table-column slot="options" label="操作"  align="center"> | ||||
|             <template slot-scope="{ row }"> | ||||
|               <el-button type="text" @click="edit(row)">编辑</el-button> | ||||
|               <el-button type="text" @click="del(row)">删除</el-button> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|         </ai-table> | ||||
|       </template> | ||||
|     </ai-list> | ||||
|     <ai-dialog | ||||
|         title="分类信息详情" | ||||
|         :visible.sync="dialog" | ||||
|         :destroyOnClose="true" | ||||
|         width="720px" | ||||
|         @onConfirm="onConfirm" | ||||
|         @closed="form={}"> | ||||
|       <ai-wrapper> | ||||
|         <ai-info-item label="姓名" :value="form.name"></ai-info-item> | ||||
|         <ai-info-item label="部门" :value="form.departmentName"></ai-info-item> | ||||
|         <ai-info-item label="手机号" :value="form.phone"></ai-info-item> | ||||
|         <ai-info-item label="行政区划" :value="form.areaName"></ai-info-item> | ||||
|       </ai-wrapper> | ||||
|       <el-form ref="form" :model="form" :rules="rules" label-width="80px"> | ||||
|         <el-form-item label="登记数" prop="registerCount"> | ||||
|           <el-input v-model.trim="form.registerCount" placeholder="请输入正整数" size="small"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="朋友数" prop="friendCount"> | ||||
|           <el-input v-model.trim="form.friendCount" placeholder="请输入正整数" size="small"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="知己数" prop="confidantCount"> | ||||
|           <el-input v-model.trim="form.confidantCount" placeholder="请输入正整数" size="small"></el-input> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     </ai-dialog> | ||||
|   </section> | ||||
|  | ||||
|   <div class="AppSensitive"> | ||||
|     <keep-alive :include="['List']"> | ||||
|       <component | ||||
|         ref="component" | ||||
|         :is="component" | ||||
|         @change="onChange" | ||||
|         :params="params" | ||||
|         :instance="instance" | ||||
|         :dict="dict" | ||||
|       ></component> | ||||
|     </keep-alive> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { mapState } from "vuex"; | ||||
| import List from "./components/List"; | ||||
| import Detail from "./components/Detail"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppSensitive", | ||||
|   label: '敏感词触发', | ||||
|   label: "敏感词触发", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function, | ||||
|     menuName:String | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       search: { | ||||
|         name: '', | ||||
|         departmentId: '', | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|         areaId: '', | ||||
|       }, | ||||
|       departIdList: [], | ||||
|       tableData: [], | ||||
|       size: 10, | ||||
|       total: 0, | ||||
|       current: 1, | ||||
|       girdList: [], | ||||
|       form: { | ||||
|         registerCount: 0, | ||||
|         friendCount: 0, | ||||
|         confidantCount: 0 | ||||
|       }, | ||||
|       personList: [], | ||||
|       dialog: false, | ||||
|       girdOptions: [], | ||||
|       defaultProps: { | ||||
|         label: 'name', | ||||
|         value: 'id', | ||||
|         checkStrictly: true, | ||||
|       }, | ||||
|       chooseUserList: [], | ||||
|       flag: false, | ||||
|     } | ||||
|       component: "List", | ||||
|       params: {}, | ||||
|       include: [], | ||||
|     }; | ||||
|   }, | ||||
|   created() { | ||||
|     this.$dict.load('integralCalcType') | ||||
|     this.getTableData() | ||||
|     this.getGridList() | ||||
|   }, | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         { prop: "name", label: '触发敏感词', align: "left"}, | ||||
|         { prop: "departmentName", label: '会话类型'}, | ||||
|         // { prop: "areaName", label: '行政区划'}, | ||||
|         { prop: "phone", label: '部门'}, | ||||
|         { prop: "registerCount", label: '涉及对象'}, | ||||
|         { prop: "friendCount", label: '姓名'}, | ||||
|         { prop: "confidantCount", label: '手机号'}, | ||||
|         { prop: "createTime", label: '日期', width:220}, | ||||
|         { slot: "options" }, | ||||
|       ] | ||||
|     }, | ||||
|     rules() { | ||||
|       return { | ||||
|         registerCount: [{required: true, message: '请输入登记数', trigger: 'blur' }, | ||||
|           {pattern: /^[0-9]+$/, message: '请输入正整数'}], | ||||
|         friendCount: [{required: true, message: '请输入朋友数', trigger: 'blur' }, | ||||
|           {pattern: /^[0-9]+$/, message: '请输入正整数'}], | ||||
|         confidantCount: [{required: true, message: '请输入知己数', trigger: 'blur' }, | ||||
|           {pattern: /^[0-9]+$/, message: '请输入正整数'}], | ||||
|       } | ||||
|     }, | ||||
|   components: { | ||||
|     Detail, | ||||
|     List, | ||||
|   }, | ||||
|   methods: { | ||||
|     getTableData() { | ||||
|       this.instance.post(`/app/appwxuserfamiliarityrate/list`,null,{ | ||||
|         params: { | ||||
|           ...this.search, | ||||
|           current: this.current, | ||||
|           size: this.size, | ||||
|           total: this.total | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if(res?.data) { | ||||
|           this.tableData = res.data.records | ||||
|           this.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     onAreaChange () { | ||||
|       this.search.current = 1 | ||||
|     onChange(data) { | ||||
|       if (data.type === "Detail") { | ||||
|         this.component = "Detail"; | ||||
|         this.params = data.params; | ||||
|       } | ||||
|       if (data.type === "List") { | ||||
|         this.component = "List"; | ||||
|         this.params = data.params; | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getTableData() | ||||
|       }) | ||||
|     }, | ||||
|     del(row) { | ||||
|       this.$confirm('确定删除该数据?').then(() => { | ||||
|         this.instance.post(`/app/appwxuserfamiliarityrate/delete?id=${row.id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success('删除成功!') | ||||
|             this.getTableData() | ||||
|         this.$nextTick(() => { | ||||
|           if (data.isRefresh) { | ||||
|             this.$refs.component.getTableData(); | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     edit(row) { | ||||
|       this.dialog = true | ||||
|       this.form = {...row} | ||||
|     }, | ||||
|  | ||||
|     selectPerson(val) { | ||||
|       console.log(val) | ||||
|       if (val) { | ||||
|         this.personList = val | ||||
|         this.form.ids = [...this.personList.map(e => e.sysUserId)] | ||||
|       } else { | ||||
|         this.form.ids = this.chooseUserList.map(e => e.sysUserId) | ||||
|         }); | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     getGridList() { | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.girdOptions = this.toTree(res.data) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 转树形结构 | ||||
|     toTree(data) { | ||||
|       let result = []; | ||||
|       if (!Array.isArray(data)) { | ||||
|         return result | ||||
|       } | ||||
|       let map = {}; | ||||
|       data.forEach(item => { | ||||
|         map[item.id] = item; | ||||
|       }); | ||||
|       data.forEach(item => { | ||||
|         let parent = map[item.parentid]; | ||||
|         if (parent) { | ||||
|           (parent.children || (parent.children = [])).push(item); | ||||
|         } else { | ||||
|           result.push(item); | ||||
|         } | ||||
|       }); | ||||
|       return result; | ||||
|     }, | ||||
|  | ||||
|     gridChange(val) { | ||||
|       this.departIdList = val | ||||
|       this.search.departmentId = val?.[val.length - 1] | ||||
|       this.$refs.cascader1.dropDownVisible = false; | ||||
|       this.getTableData() | ||||
|     }, | ||||
|  | ||||
|     onConfirm() { | ||||
|       if(this.flag) return | ||||
|  | ||||
|       this.$refs.form.validate((valid)=> { | ||||
|         if(valid) { | ||||
|           this.flag = true | ||||
|           this.instance.post(`/app/appwxuserfamiliarityrate/webUpdate`,{...this.form}).then(res => { | ||||
|             if(res?.code == 0) { | ||||
|               this.$message.success('分类信息修改成功') | ||||
|               setTimeout(() =>{ | ||||
|                 this.dialog = false | ||||
|                 this.getTableData() | ||||
|                 this.flag = false | ||||
|               }, 600) | ||||
|             } else { | ||||
|               this.flag = false | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|  | ||||
|     }, | ||||
|  | ||||
|     toDetail(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Detail', | ||||
|         params: { | ||||
|           id: id | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
| } | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| <style lang="scss"> | ||||
| .AppSensitive { | ||||
|   height: 100%; | ||||
|  | ||||
|   :deep( .ai-dialog .ai-dialog__content ){ | ||||
|     max-height: 600px!important; | ||||
|   } | ||||
|  | ||||
|  | ||||
|  | ||||
|   .userlist { | ||||
|     display: inline-block; | ||||
|   } | ||||
|  | ||||
|   .userlist, .user { | ||||
|     display: inline-block; | ||||
|   } | ||||
|  | ||||
|   .user { | ||||
|     position: relative; | ||||
|     width: 70px; | ||||
|     text-align: center; | ||||
|  | ||||
|     .remove-icon { | ||||
|       position: absolute; | ||||
|       right: 7px; | ||||
|       top: -4px; | ||||
|       line-height: 1; | ||||
|       padding: 6px 0; | ||||
|       font-size: 16px; | ||||
|       cursor: pointer; | ||||
|  | ||||
|       &:hover { | ||||
|         color: crimson; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     img, h2 { | ||||
|       display: block; | ||||
|       width: 40px; | ||||
|       height: 40px; | ||||
|       line-height: 40px; | ||||
|       text-align: center; | ||||
|       margin: 0 auto 4px; | ||||
|       font-size: 14px; | ||||
|       color: #fff; | ||||
|       border-radius: 50%; | ||||
|     } | ||||
|  | ||||
|     h2 { | ||||
|       background-color: $primaryColor; | ||||
|     } | ||||
|  | ||||
|     span { | ||||
|       color: #666; | ||||
|       font-size: 14px; | ||||
|       white-space: nowrap; | ||||
|       overflow: hidden; | ||||
|       word-break: break-all; | ||||
|       text-overflow: ellipsis; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   :deep( .selectCont .pagination ){ | ||||
|     width: 100%!important; | ||||
|     background: pink; | ||||
|   } | ||||
|   background: #f3f6f9; | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
|   | ||||
							
								
								
									
										854
									
								
								project/pidu/app/AppSensitive/components/Detail.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										854
									
								
								project/pidu/app/AppSensitive/components/Detail.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,854 @@ | ||||
|  <template> | ||||
|   <ai-list v-loading="isLoading" class="detail"> | ||||
|     <template slot="title"> | ||||
|       <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title> | ||||
|     </template> | ||||
|     <template #left> | ||||
|       <div class="addressBook-left"> | ||||
|         <div class="addressBook-left__title"> | ||||
|           <h2 :class="[tabIndex == 1 ? 'tab-active' : '']" @click="typeClick(1)">群聊会话</h2> | ||||
|           <h2 :class="[tabIndex == 0 ? 'tab-active' : '']" @click="typeClick(0)">私聊会话</h2> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--title"> | ||||
|           <el-input | ||||
|             size="mini" | ||||
|             :placeholder="tabIndex == 1 ? '请输入群名称' : '请输入昵称'" | ||||
|             v-model="searchName" | ||||
|             clearable | ||||
|             @clear="current = 1, searchName = '', getListInit()" | ||||
|             v-throttle="() => {(current = 1), getListInit();}" | ||||
|             suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--wrapper"> | ||||
|           <div class="addressBook-left__list--item" v-for="(item, index) in list" :key="index" :class="leftActiveIndex == index ? 'active' : ''" @click="leftClick(index)"> | ||||
|             <div v-if="tabIndex == 1" class="flex-left"> | ||||
|               <img src="./img/group-img.png" alt="">{{item.roomName}} | ||||
|             </div> | ||||
|             <div v-else> | ||||
|               <img :src="item.toUserAvatar" alt="">{{item.toUserName}} | ||||
|             </div> | ||||
|             <div class="flex-right" :class="`type`+item.roomType" v-if="tabIndex == 1 && item.roomType > 0">{{item.roomType == 1 ? '内部' : '外部'}}</div> | ||||
|             <div class="flex-right" :class="`type`+item.toUserType" v-if="tabIndex != 1 && item.toUserType > 0">{{item.toUserType == 1 ? '内部' : '外部'}}</div> | ||||
|           </div> | ||||
|           <AiEmpty v-if="!list.length"></AiEmpty> | ||||
|         </div> | ||||
|         <el-pagination class="pagination" | ||||
|           layout="prev, pager, next" | ||||
|           :total="total" @current-change="currentChange" :current-page="current" :page-size="20"> | ||||
|         </el-pagination> | ||||
|       </div> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <div class="content-right-title"> | ||||
|         <div class="tab-content"> | ||||
|           <h2 v-for="(item, index) in msgTypeList" :key="index" :class="msgType == index ? 'tab-active' : ''" @click="msgTypeClick(index)">{{item.name}}</h2> | ||||
|         </div> | ||||
|         <div class="search-content"> | ||||
|           <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"  | ||||
|             range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange"> | ||||
|           </el-date-picker> | ||||
|           <el-input size="small" placeholder="输入搜索内容" v-model="searchMsg" clearable | ||||
|             @clear="msgCurrent = 1, searchMsg = '', getMsgListInit()" suffix-icon="iconfont iconSearch" | ||||
|           v-throttle="() => {(msgCurrent = 1), getMsgListInit();}"/> | ||||
|           <!-- <ai-download :instance="instance" url="/app/appconvenientaddressbook/export" :params="search" fileName="会话存档" | ||||
|                        :disabled="msgList.length == 0"> | ||||
|             <el-button icon="iconfont iconExported" :disabled="msgList.length == 0">导出</el-button> | ||||
|           </ai-download> --> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="content-right-info" @scroll='msgScroll'> | ||||
|         <div v-for="(item, index) in msgList" :key="index"> | ||||
|           <div class="item" :class="item.userId == id ? 'item-right' : 'item-left'"> | ||||
|             <!-- <p class="time" v-if="index == 0">{{item.msgSendTime}}</p> --> | ||||
|             <p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p> | ||||
|             <div class="item-content-flex"> | ||||
|               <i class="el-icon-warning" v-if="item.userId == id && item.isKeyword == 1"></i> | ||||
|               <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != id"> | ||||
|               <img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != id && !item.userAvatar"> | ||||
|  | ||||
|               <div class="content" v-if="item.msgType == 'text'"> | ||||
|                 <span></span> | ||||
|                 <p>{{item.content}}</p> | ||||
|               </div> | ||||
|  | ||||
|               <div class="img-list" v-if="item.msgType == 'image'"> | ||||
|                 <img :src="item.sdkFileUrl" alt="" v-viewer> | ||||
|               </div> | ||||
|  | ||||
|               <div class="voice-info" v-if="item.msgType == 'voice'"> | ||||
|                 <ai-audio :src="item.sdkFileUrl" skin="flat" /> | ||||
|               </div> | ||||
|  | ||||
|               <video style="width: 300px; object-fit: fill;" controls :src="item.sdkFileUrl" v-if="item.msgType == 'video'"></video> | ||||
|  | ||||
|               <ai-file-list v-if="item.msgType == 'file'"  | ||||
|                 :fileList="item.files" | ||||
|                 :fileOps="{ name: 'name', size: 'fileSizeStr' }" | ||||
|               ></ai-file-list> | ||||
|  | ||||
|               <div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div> | ||||
|  | ||||
|               <div class="revoke-text" v-if="item.msgType == 'disagree'">对方不同意会话存档内容,你将无法继续提供服务</div> | ||||
|  | ||||
|               <div class="revoke-text" v-if="item.msgType == 'agree'">对方同意会话存档内容,你可以继续提供服务</div> | ||||
|  | ||||
|               <div class="card-info" v-if="item.msgType == 'card'"> | ||||
|                 <div class="top"> | ||||
|                   <div class="card-left"> | ||||
|                     <h3>{{item.cardCorpName}}</h3> | ||||
|                     <p>{{item.cardUserName}}</p> | ||||
|                     <!-- <div>{{item.cardUserId}}</div> --> | ||||
|                   </div> | ||||
|                   <div class="card-right"> | ||||
|                     <img :src="item.cardUserAvatar" alt="" v-if="item.cardUserAvatar"> | ||||
|                     <img src="./img/user-img.png" alt="" v-else> | ||||
|                   </div> | ||||
|                 </div> | ||||
|                 <div class="bottom">个人名片</div> | ||||
|               </div> | ||||
|  | ||||
|               <img :src="item.sdkFileUrl" alt="" v-if="item.msgType == 'emotion'" :style="[{width: item.width/2+'px'}, {height: item.height/2+'px'}]"> | ||||
|  | ||||
|               <div class="map-info" v-if="item.msgType == 'location'"> | ||||
|                 <div :id="`map${index}`" class="map-content"></div> | ||||
|                 <div class="address-text"> | ||||
|                   <p>{{item.title}}</p> | ||||
|                   <p>{{item.address}}</p> | ||||
|                 </div> | ||||
|               </div> | ||||
|  | ||||
|               <div class="card-info" v-if="item.msgType == 'weapp'"> | ||||
|                 <div class="top"> | ||||
|                   <div class="card-left"> | ||||
|                     <h3>{{item.description}}</h3> | ||||
|                     <p>{{item.title}}</p> | ||||
|                     <div>{{item.username}}{{item.displayname}}</div> | ||||
|                   </div> | ||||
|                 </div> | ||||
|                 <div class="bottom">小程序</div> | ||||
|               </div> | ||||
|  | ||||
|               <div class="card-info pointer" v-if="item.msgType == 'link'" @click="openLink(item)"> | ||||
|                 <div class="top"> | ||||
|                   <div class="card-left"> | ||||
|                     <p>{{item.title}}</p> | ||||
|                     <div>{{item.username}}</div> | ||||
|                   </div> | ||||
|                   <div class="card-right" v-if="item.imageUrl"> | ||||
|                     <img :src="item.imageUrl" alt="" > | ||||
|                   </div> | ||||
|                 </div> | ||||
|                 <div class="bottom">分享链接</div> | ||||
|               </div> | ||||
|  | ||||
|               <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == id"> | ||||
|               <i class="el-icon-warning" v-if="item.userId != id && item.isKeyword == 1"></i> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|         <AiEmpty v-if="!msgList.length"></AiEmpty> | ||||
|       </div> | ||||
|       <!-- <el-pagination class="msg-list-pagination" | ||||
|         layout="prev, pager, next" | ||||
|         :total="msgTotal" @current-change="msgCurrentChange" :current-page="msgCurrent" :page-size="20"> | ||||
|       </el-pagination> --> | ||||
|     </template> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|   import { mapState } from 'vuex' | ||||
|   import Viewer from 'v-viewer' | ||||
|   import AMapLoader from '@amap/amap-jsapi-loader' | ||||
|   import Vue from 'vue' | ||||
|   Vue.use(Viewer); | ||||
|    | ||||
|   export default { | ||||
|     name: 'Detail', | ||||
|     props: { | ||||
|       instance: Function, | ||||
|       dict: Object, | ||||
|       params: Object | ||||
|     }, | ||||
|     data () { | ||||
|       return { | ||||
|         isLoading: false, | ||||
|         tabIndex: 1, | ||||
|         searchName: '', | ||||
|         time: [], | ||||
|         search: { | ||||
|           name: '' | ||||
|         }, | ||||
|         current: 1, | ||||
|         total: 0, | ||||
|         list: [], | ||||
|         leftActiveIndex: 0, | ||||
|         msgCurrent: 0, | ||||
|         msgPreCurrent: 0, | ||||
|         msgTotal: 0, | ||||
|         msgPages: 2, | ||||
|         msgList: [], | ||||
|         msgType: 0, | ||||
|         msgTypeList: [ | ||||
|           {name: '全部', value: ''}, | ||||
|           {name: '图片/视频', value: 'imagevideo'}, | ||||
|           {name: '语音', value: 'voice'}, | ||||
|           {name: '文件', value: 'file'}, | ||||
|         ], | ||||
|         searchMsg: '', | ||||
|         listInfo: {}, | ||||
|         id: '', | ||||
|  | ||||
|         // userId: 'ChenChen', | ||||
|         // toUserId: 'LiuYe', | ||||
|         // toName: '刘烨', | ||||
|         // type: '0', | ||||
|         // seq: '12659' | ||||
|  | ||||
|       } | ||||
|     }, | ||||
|     computed: { | ||||
|       ...mapState(['user']), | ||||
|     }, | ||||
|     created () { | ||||
|       this.isLoading = true | ||||
|       if (this.params && this.params.userId) { | ||||
|         this.listInfo = {...this.params} | ||||
|         this.id = this.params.userId | ||||
|         this.searchName = this.listInfo.toName | ||||
|         this.tabIndex = this.listInfo.type | ||||
|         this.getList() | ||||
|       } | ||||
|  | ||||
|       // this.listInfo = { | ||||
|       //   userId: 'ChenChen', | ||||
|       //   toUserId: 'LiuYe', | ||||
|       //   toName: '刘烨', | ||||
|       //   type: '0', | ||||
|       //   seq: '12481' | ||||
|       // } | ||||
|       // this.searchName = this.listInfo.toName | ||||
|       // this.id = this.listInfo.userId | ||||
|       // this.tabIndex = this.listInfo.type | ||||
|       // this.getList() | ||||
|  | ||||
|     }, | ||||
|  | ||||
|     methods: { | ||||
|       msgScroll(e) { | ||||
|         if(e.target.offsetHeight + e.target.scrollTop == e.target.scrollHeight && this.msgPreCurrent > 1) { //往下拉加载上一页 | ||||
|           this.msgPreCurrent -- | ||||
|           this.getMsgListPre() | ||||
|         } | ||||
|         if(e.target.scrollTop == 0) { | ||||
|           if(this.msgCurrent > this.msgPages) { | ||||
|             return this.$message('已加载完成,没有更多数据'); | ||||
|           }else { | ||||
|             this.msgCurrent ++ | ||||
|             this.isLoading = true | ||||
|             this.getMsgList() | ||||
|           } | ||||
|         } | ||||
|       }, | ||||
|       getListInit() { | ||||
|         this.isLoading = true | ||||
|         this.current = 1 | ||||
|         this.leftActiveIndex = 0 | ||||
|         this.getList() | ||||
|       }, | ||||
|       getList () { | ||||
|         this.instance.post(`/app/appsessionarchiveindex/list`, null, { | ||||
|           params: { | ||||
|             userId: this.id, | ||||
|             type: this.tabIndex, | ||||
|             size: 20, | ||||
|             current: this.current, | ||||
|             toUserName: this.tabIndex == 1 ? '' : this.searchName, | ||||
|             roomName: this.tabIndex == 1 ? this.searchName : '', | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.list = res.data.records | ||||
|             this.total = res.data.total || 0 | ||||
|             // this.getMsgList() | ||||
|             this.getKeyWordList() | ||||
|           } | ||||
|           this.isLoading = false | ||||
|         }).catch(() => { | ||||
|           this.isLoading = false | ||||
|         }) | ||||
|       }, | ||||
|       getMsgListInit() { | ||||
|         this.isLoading = true | ||||
|         this.msgCurrent = 1 | ||||
|         this.msgPages = 2 | ||||
|         this.getMsgList() | ||||
|       }, | ||||
|       getKeyWordList() { | ||||
|         this.instance.post(`/app/appsessionarchiveinfo/listByKeywordRecord`, null, { | ||||
|           params: { | ||||
|             userId: this.id, | ||||
|             type: this.tabIndex, | ||||
|             size: 8, | ||||
|             current: this.msgCurrent == 0 ? '' : this.msgCurrent, | ||||
|             msgType: this.msgTypeList[this.msgType].value, | ||||
|             // msgType: 'file', | ||||
|             toUserId: this.list[this.leftActiveIndex].type == 1 ? '' : this.list[this.leftActiveIndex].toUserId, | ||||
|             roomId: this.list[this.leftActiveIndex].type == 1 ? this.list[this.leftActiveIndex].roomId : '', | ||||
|             type: this.list[this.leftActiveIndex].type, | ||||
|             content: this.searchMsg, | ||||
|             startTime: this.time ? this.time[0] : '', | ||||
|             endTime: this.time ? this.time[1] : '', | ||||
|             seq: this.msgCurrent == 0 ? this.listInfo.seq : '', | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.msgCurrent = res.data.current | ||||
|             this.msgPreCurrent = res.data.current | ||||
|             res.data.records.map((item, index) => { | ||||
|               if(item.msgType == 'file') { | ||||
|                 item.files = [{url: item.sdkFileUrl, accessUrl: item.sdkFileUrl, name: item.sdkFileName, fileSizeStr: item.fileSizeStr}] | ||||
|               } | ||||
|               if(item.msgType == 'location') { | ||||
|                 this.initMap(item.lng, item.lat, item.zoom, index) | ||||
|               } | ||||
|             }) | ||||
|             this.msgList = res.data.records | ||||
|             this.msgPages = res.data.pages || 2 | ||||
|           } | ||||
|           this.isLoading = false | ||||
|         }).catch(() => { | ||||
|           this.isLoading = false | ||||
|         }) | ||||
|       }, | ||||
|       getMsgList() { | ||||
|         var preveHeight = document.querySelector('.content-right-info').scrollHeight | ||||
|         this.instance.post(`/app/appsessionarchiveinfo/list`, null, { | ||||
|           params: { | ||||
|             userId: this.id, | ||||
|             type: this.tabIndex, | ||||
|             size: 8, | ||||
|             current: this.msgCurrent, | ||||
|             msgType: this.msgTypeList[this.msgType].value, | ||||
|             // msgType: 'file', | ||||
|             toUserId: this.list[this.leftActiveIndex].type == 1 ? '' : this.list[this.leftActiveIndex].toUserId, | ||||
|             roomId: this.list[this.leftActiveIndex].type == 1 ? this.list[this.leftActiveIndex].roomId : '', | ||||
|             type: this.list[this.leftActiveIndex].type, | ||||
|             content: this.searchMsg, | ||||
|             startTime: this.time ? this.time[0] : '', | ||||
|             endTime: this.time ? this.time[1] : '' | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             res.data.records.map((item, index) => { | ||||
|               if(item.msgType == 'file') { | ||||
|                 item.files = [{url: item.sdkFileUrl, accessUrl: item.sdkFileUrl, name: item.sdkFileName, fileSizeStr: item.fileSizeStr}] | ||||
|               } | ||||
|               if(item.msgType == 'location') { | ||||
|                 this.initMap(item.lng, item.lat, item.zoom, index) | ||||
|               } | ||||
|             }) | ||||
|             this.msgList = this.msgCurrent > 1 ? [ ...res.data.records, ...this.msgList]: res.data.records | ||||
|             this.msgPages = res.data.pages || 2 | ||||
|             this.$nextTick(() => { | ||||
|               if(this.msgCurrent == 1) { | ||||
|                 document.querySelector('.content-right-info').scrollTo(0, 999999999) | ||||
|               }else { | ||||
|                 var height = document.querySelector('.content-right-info').scrollHeight - preveHeight | ||||
|                 document.querySelector('.content-right-info').scrollTop = height | ||||
|               } | ||||
|                | ||||
|             }) | ||||
|           } | ||||
|           this.isLoading = false | ||||
|         }).catch(() => { | ||||
|           this.isLoading = false | ||||
|         }) | ||||
|       }, | ||||
|       getMsgListPre() { //下拉加载上一页 | ||||
|         this.instance.post(`/app/appsessionarchiveinfo/list`, null, { | ||||
|           params: { | ||||
|             userId: this.id, | ||||
|             type: this.tabIndex, | ||||
|             size: 8, | ||||
|             current: this.msgPreCurrent, | ||||
|             msgType: this.msgTypeList[this.msgType].value, | ||||
|             // msgType: 'file', | ||||
|             toUserId: this.list[this.leftActiveIndex].type == 1 ? '' : this.list[this.leftActiveIndex].toUserId, | ||||
|             roomId: this.list[this.leftActiveIndex].type == 1 ? this.list[this.leftActiveIndex].roomId : '', | ||||
|             type: this.list[this.leftActiveIndex].type, | ||||
|             content: this.searchMsg, | ||||
|             startTime: this.time ? this.time[0] : '', | ||||
|             endTime: this.time ? this.time[1] : '' | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             res.data.records.map((item, index) => { | ||||
|               if(item.msgType == 'file') { | ||||
|                 item.files = [{url: item.sdkFileUrl, accessUrl: item.sdkFileUrl, name: item.sdkFileName, fileSizeStr: item.fileSizeStr}] | ||||
|               } | ||||
|               if(item.msgType == 'location') { | ||||
|                 this.initMap(item.lng, item.lat, item.zoom, index) | ||||
|               } | ||||
|             }) | ||||
|             this.msgList = [...this.msgList, ...res.data.records] | ||||
|             this.msgPages = res.data.pages || 2 | ||||
|             this.$nextTick(() => { | ||||
|               if(this.msgCurrent == 1) { | ||||
|                 document.querySelector('.content-right-info').scrollTo(0, 999999999) | ||||
|               }else { | ||||
|                 var height = document.querySelector('.content-right-info').scrollHeight - preveHeight | ||||
|                 document.querySelector('.content-right-info').scrollTop = height | ||||
|               } | ||||
|                | ||||
|             }) | ||||
|           } | ||||
|           this.isLoading = false | ||||
|         }).catch(() => { | ||||
|           this.isLoading = false | ||||
|         }) | ||||
|       }, | ||||
|       initMap(lng, lat, zoom, index) { | ||||
|         AMapLoader.load({ | ||||
|           key: '54a02a43d9828a8f9cd4f26fe281e74e', | ||||
|           version: '2.0', | ||||
|         }).then((AMap) => { | ||||
|           this.map = new AMap.Map(`map${index}`, { | ||||
|             resizeEnable: true, | ||||
|             zooms: [6, 20], | ||||
|             center: [lng, lat], | ||||
|             zoom: zoom, | ||||
|             scrollWheel: false, | ||||
|           }) | ||||
|         }) | ||||
|       }, | ||||
|       typeClick(index) { | ||||
|         this.tabIndex = index | ||||
|         this.msgType = 0 | ||||
|         this.getListInit() | ||||
|       }, | ||||
|       onChange() { | ||||
|         this.getMsgListInit() | ||||
|       }, | ||||
|       currentChange(e) { | ||||
|         this.current = e | ||||
|         this.getList() | ||||
|       }, | ||||
|       msgCurrentChange(e) { | ||||
|         this.msgCurrent = e | ||||
|         this.getMsgList() | ||||
|       }, | ||||
|       leftClick(index) { | ||||
|         this.leftActiveIndex = index | ||||
|         this.msgType = 0 | ||||
|         this.getMsgListInit() | ||||
|       }, | ||||
|       msgTypeClick(index) { | ||||
|         this.msgType = index | ||||
|         this.getMsgListInit() | ||||
|       }, | ||||
|       openLink(row) { | ||||
|         document.write('<a href="" target="new"></a>'); | ||||
|         window.open(row.linkUrl, "new");  | ||||
|       }, | ||||
|       cancel () { | ||||
|         this.$emit('change', { | ||||
|           type: 'List', | ||||
|           isRefresh: true | ||||
|         }) | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|   .detail { | ||||
|     .addressBook-left { | ||||
|       width: 100%; | ||||
|       height: auto; | ||||
|       background: #FAFAFB; | ||||
|       position: relative; | ||||
|  | ||||
|       .addressBook-left__title { | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         width: 100%; | ||||
|         height: 40px; | ||||
|         background: #ffffff; | ||||
|  | ||||
|         h2 { | ||||
|           flex: 1; | ||||
|           height: 100%; | ||||
|           line-height: 40px; | ||||
|           color: #222; | ||||
|           font-size: 14px; | ||||
|           text-align: center; | ||||
|           cursor: pointer; | ||||
|           border-bottom: 2px solid transparent; | ||||
|  | ||||
|           &.tab-active { | ||||
|             color: #2266FF; | ||||
|             border-bottom: 2px solid #2266FF; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .addressBook-left__list--wrapper { | ||||
|         height: calc(100% - 110px); | ||||
|         padding: 8px; | ||||
|         width: 100%; | ||||
|         box-sizing: border-box; | ||||
|         overflow-y: scroll; | ||||
|         .addressBook-left__list--item { | ||||
|           width: 100%; | ||||
|           line-height: 44px; | ||||
|           font-size: 16px; | ||||
|           color: #333; | ||||
|           margin-bottom: 8px; | ||||
|           padding: 8px; | ||||
|           display: flex; | ||||
|           justify-content: space-between; | ||||
|           cursor: pointer; | ||||
|           img { | ||||
|             width: 44px; | ||||
|             height: 44px; | ||||
|             border-radius: 50%; | ||||
|             margin-right: 8px; | ||||
|             vertical-align: middle; | ||||
|           } | ||||
|           .flex-left { | ||||
|             padding-right: 8px; | ||||
|             box-sizing: border-box; | ||||
|           } | ||||
|           .flex-right { | ||||
|             font-size: 12px; | ||||
|             margin-top: 8px; | ||||
|             border-radius: 4px; | ||||
|             width: 56px; | ||||
|             height: 28px; | ||||
|             line-height: 28px; | ||||
|             text-align: center; | ||||
|             border-radius: 4px; | ||||
|           } | ||||
|           .type1 { | ||||
|             background-color: #EAF4FF; | ||||
|             color: #267EF0; | ||||
|           } | ||||
|           .type2 { | ||||
|             background-color: #FDEEE1; | ||||
|             color: #FB7D29; | ||||
|           } | ||||
|         } | ||||
|         .addressBook-left__list--item:hover { | ||||
|           background-color: #E8EFFF; | ||||
|         } | ||||
|         .active { | ||||
|           background-color: #E8EFFF; | ||||
|           color: #26f; | ||||
|         } | ||||
|       } | ||||
|       .addressBook-left__list--title { | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         margin: 8px 8px 0; | ||||
|  | ||||
|         .addressBook-left__list--search { | ||||
|           flex: 1; | ||||
|  | ||||
|           :deep( input ){ | ||||
|             width: 100%; | ||||
|           } | ||||
|         } | ||||
|  | ||||
|         .el-button { | ||||
|           width: 84px; | ||||
|           flex-shrink: 1; | ||||
|           margin-right: 8px; | ||||
|         } | ||||
|       } | ||||
|       .pagination { | ||||
|         position: absolute; | ||||
|         bottom: 0; | ||||
|         width: 100%; | ||||
|         text-align: center; | ||||
|         background-color: #fff; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     :deep( .ai-list__content--right ){ | ||||
|       flex: 1; | ||||
|       min-width: 0; | ||||
|       margin-left: 1px; | ||||
|       box-shadow: none; | ||||
|  | ||||
|       .ai-list__content--right-wrapper { | ||||
|         width: 100%; | ||||
|         position: relative; | ||||
|         padding: 0!important; | ||||
|         height: 100%; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .content-right-title { | ||||
|       height: 40px; | ||||
|       border-bottom: 1px solid #ddd; | ||||
|       display: flex; | ||||
|       justify-content: space-between; | ||||
|       box-sizing: content-box; | ||||
|       .tab-content { | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         width: 300px; | ||||
|         height: 40px; | ||||
|         background: #ffffff; | ||||
|  | ||||
|         h2 { | ||||
|           flex: 1; | ||||
|           height: 100%; | ||||
|           line-height: 40px; | ||||
|           color: #222; | ||||
|           font-size: 14px; | ||||
|           text-align: center; | ||||
|           cursor: pointer; | ||||
|           border-bottom: 2px solid transparent; | ||||
|  | ||||
|           &.tab-active { | ||||
|             color: #2266FF; | ||||
|             border-bottom: 2px solid #2266FF; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       .search-content { | ||||
|         display: flex; | ||||
|         padding: 4px 8px 4px 0; | ||||
|         .ai-download, | ||||
|         .el-input { | ||||
|           margin-left: 8px; | ||||
|         } | ||||
|         .el-input { | ||||
|           width: 240px; | ||||
|         } | ||||
|         .el-date-editor--daterange { | ||||
|           width: 240px; | ||||
|         } | ||||
|         :deep .el-date-editor .el-range-separator { | ||||
|           width: 30px; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     .content-right-info { | ||||
|       padding: 24px 16px; | ||||
|       height: calc(100% - 80px); | ||||
|       overflow-y: scroll; | ||||
|       .item { | ||||
|         margin-bottom: 48px; | ||||
|         .user-name { | ||||
|           color: #666; | ||||
|           font-size: 12px; | ||||
|           line-height: 20px; | ||||
|           padding:0 0 0 64px; | ||||
|           span { | ||||
|             display: inline-block; | ||||
|             margin: 0 12px; | ||||
|             color: #999; | ||||
|           } | ||||
|         } | ||||
|         .item-content-flex { | ||||
|           display: flex; | ||||
|           .user-img { | ||||
|             width: 44px; | ||||
|             height: 44px; | ||||
|             border-radius: 50%; | ||||
|             margin-right: 8px; | ||||
|           } | ||||
|           .content { | ||||
|             max-width: calc(100% - 144px); | ||||
|             position: relative; | ||||
|             background-color: #f3f6f9; | ||||
|              | ||||
|             span { | ||||
|               width: 0px; | ||||
|               height: 0px; | ||||
|               border: 10px solid transparent; | ||||
|               position: absolute; | ||||
|               top: 50%; | ||||
|               margin-top: -10px; | ||||
|             } | ||||
|             p { | ||||
|               display: inline-block; | ||||
|               padding: 8px; | ||||
|               line-height: 28px; | ||||
|               font-family: PingFangSC-Regular; | ||||
|               font-size: 16px; | ||||
|               color: #333; | ||||
|               word-break: break-all; | ||||
|             } | ||||
|           } | ||||
|           .img-list { | ||||
|             img { | ||||
|               max-width: 400px; | ||||
|             } | ||||
|           } | ||||
|           .voice-info { | ||||
|             .ai-audio { | ||||
|               margin-top: 8px; | ||||
|             } | ||||
|           } | ||||
|           .el-icon-warning { | ||||
|             font-size: 32px; | ||||
|             color: #f46; | ||||
|             margin-top: 8px; | ||||
|           } | ||||
|           .revoke-text { | ||||
|             line-height: 44px; | ||||
|             padding: 0 6px; | ||||
|             border-radius: 4px; | ||||
|             background-color: #EEE; | ||||
|             color: #999; | ||||
|             margin-top: 4px; | ||||
|           } | ||||
|           .card-info { | ||||
|             width: 300px; | ||||
|             position: relative; | ||||
|             border-radius: 8px; | ||||
|             background-color: #fff; | ||||
|             border: 1px solid #eee; | ||||
|  | ||||
|             .top { | ||||
|               display: flex; | ||||
|               padding: 16px; | ||||
|               .card-left { | ||||
|                 width: calc(100% - 60px); | ||||
|                 h3 { | ||||
|                   line-height: 60px; | ||||
|                   font-size: 24px; | ||||
|                   font-weight: 500; | ||||
|                   color: #333; | ||||
|                   margin-bottom: 10px; | ||||
|                 } | ||||
|                 p { | ||||
|                   color: #000; | ||||
|                   line-height: 24px; | ||||
|                   font-size: 18px; | ||||
|                 } | ||||
|                 div { | ||||
|                   color: #666; | ||||
|                   font-size: 14px; | ||||
|                   line-height: 24px; | ||||
|                 } | ||||
|               } | ||||
|               .card-right { | ||||
|                 img { | ||||
|                   width: 50px; | ||||
|                   height: 50px; | ||||
|                   border-radius: 4px; | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|             .bottom { | ||||
|               padding-left: 16px; | ||||
|               line-height: 44px; | ||||
|               font-size: 16px; | ||||
|               color: #666; | ||||
|               border-top: 1px solid #eee; | ||||
|             } | ||||
|           } | ||||
|           .pointer { | ||||
|             cursor: pointer; | ||||
|           } | ||||
|           .map-info { | ||||
|             width: 600px; | ||||
|             height: 400px; | ||||
|             position: relative; | ||||
|             .map-content { | ||||
|               width: 600px; | ||||
|               height: 400px; | ||||
|             } | ||||
|             .address-text { | ||||
|               position: absolute; | ||||
|               bottom: 0; | ||||
|               left: 0; | ||||
|               z-index: 9999; | ||||
|               width: 600px; | ||||
|               background-color: rgba(0, 0, 0, .7); | ||||
|               p { | ||||
|                 color: #fff; | ||||
|                 line-height: 34px; | ||||
|                 font-size: 16px; | ||||
|                 padding-left: 16px; | ||||
|                 word-break: break-all; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       .item-left { | ||||
|         .item-content-flex {  | ||||
|           .user-img { | ||||
|             margin: 0 20px 0 0; | ||||
|           } | ||||
|           .content { | ||||
|             span { | ||||
|               left: -18px; | ||||
|               border-right-color: #f3f6f9; | ||||
|             } | ||||
|           } | ||||
|           .el-icon-warning { | ||||
|             margin-left: 16px; | ||||
|           } | ||||
|         } | ||||
|          | ||||
|       } | ||||
|       .item-right { | ||||
|         width: 100%; | ||||
|         justify-content: right; | ||||
|         .user-name { | ||||
|           text-align: right; | ||||
|           padding: 0 52px 0 0; | ||||
|         } | ||||
|         .item-content-flex { | ||||
|           justify-content: end; | ||||
|           .user-img { | ||||
|             margin: 0 0 0 20px; | ||||
|           } | ||||
|           .content { | ||||
|             background-color: #90e287; | ||||
|             span { | ||||
|               border-left-color:#90e287; | ||||
|               right: -18px; | ||||
|             } | ||||
|           } | ||||
|           .el-icon-warning { | ||||
|             margin-right: 16px; | ||||
|           } | ||||
|           .voice-info { | ||||
|             text-align: right; | ||||
|           } | ||||
|         } | ||||
|          | ||||
|       } | ||||
|     } | ||||
|     .addressBook-left__list--wrapper::-webkit-scrollbar, | ||||
|     .content-right-info::-webkit-scrollbar { | ||||
|       width: 4px; | ||||
|     } | ||||
|     .addressBook-left__list--wrapper::-webkit-scrollbar-thumb, | ||||
|     .content-right-info::-webkit-scrollbar-thumb { | ||||
|       border-radius: 10px; | ||||
|       background: rgba(0,0,0,0.2); | ||||
|     } | ||||
|     .addressBook-left__list--wrapper::-webkit-scrollbar-track | ||||
|     .content-right-info::-webkit-scrollbar-track { | ||||
|       border-radius: 0; | ||||
|       background: rgba(0,0,0,0.1); | ||||
|     } | ||||
|     .msg-list-pagination { | ||||
|       position: absolute; | ||||
|       bottom: 0; | ||||
|       width: calc(100% - 32px); | ||||
|       text-align: center; | ||||
|     } | ||||
|   } | ||||
|  | ||||
| </style> | ||||
							
								
								
									
										251
									
								
								project/pidu/app/AppSensitive/components/List.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										251
									
								
								project/pidu/app/AppSensitive/components/List.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,251 @@ | ||||
| <template> | ||||
|   <section class="list"> | ||||
|     <ai-list> | ||||
|       <template #content> | ||||
|         <ai-search-bar> | ||||
|           <template #left> | ||||
|             <!-- <ai-area-get | ||||
|               style="width: 180px;" | ||||
|               placeholder="请选择地区" | ||||
|               :instance="instance" | ||||
|               v-model="search.areaId" | ||||
|               @select="onAreaChange"/> --> | ||||
|             <el-cascader ref="cascader1" clearable v-model="departIdList" :options="girdOptions" placeholder="所属部门" size="small" | ||||
|               :props="defaultProps" :show-all-levels="false" @change="gridChange"></el-cascader> | ||||
|               <ai-select v-model="search.type" placeholder="会话类型" @change="current=1, getTableData()" | ||||
|             :selectList="dict.getDict('appSessionType')"/> | ||||
|             <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd" | ||||
|               range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange"> | ||||
|             </el-date-picker> | ||||
|           </template> | ||||
|           <template #right> | ||||
|             <el-input size="small" placeholder="敏感词、涉及对象、姓名、手机号" v-model="search.wordName" clearable | ||||
|               @clear="current = 1, search.wordName = '', getTableData()" suffix-icon="iconfont iconSearch" | ||||
|               v-throttle="() => {(current = 1), getTableData();}"/> | ||||
|           </template> | ||||
|         </ai-search-bar> | ||||
|         <ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size" | ||||
|                   @getList="getTableData()" :col-configs="colConfigs" :dict="dict"> | ||||
|           <el-table-column slot="options" label="操作"  align="center"> | ||||
|             <template slot-scope="{ row }"> | ||||
|               <el-button type="text" @click="toDetail(row)">详情</el-button> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|         </ai-table> | ||||
|       </template> | ||||
|     </ai-list> | ||||
|   </section> | ||||
|  | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { mapState } from "vuex"; | ||||
| export default { | ||||
|   name: "list", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       search: { | ||||
|         wordName: '', | ||||
|         departmentId: '', | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|         areaId: '', | ||||
|         type: '' | ||||
|       }, | ||||
|       departIdList: [], | ||||
|       tableData: [], | ||||
|       size: 10, | ||||
|       total: 0, | ||||
|       current: 1, | ||||
|       girdOptions: [], | ||||
|       defaultProps: { | ||||
|         label: 'name', | ||||
|         value: 'id', | ||||
|         checkStrictly: true, | ||||
|       }, | ||||
|       flag: false, | ||||
|       time: null | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.$dict.load('appSessionType').then(() => { | ||||
|       this.getTableData() | ||||
|     }) | ||||
|     this.getGridList() | ||||
|   }, | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         { prop: "wordName", label: '触发敏感词', align: "left"}, | ||||
|         { prop: "type", label: '会话类型', dict: 'appSessionType'}, | ||||
|         // { prop: "areaName", label: '行政区划'}, | ||||
|         { prop: "departmentName", label: '部门'}, | ||||
|         { prop: "toName", label: '涉及对象'}, | ||||
|         { prop: "userName", label: '姓名'}, | ||||
|         { prop: "phone", label: '手机号'}, | ||||
|         { prop: "createTime", label: '日期', width:220}, | ||||
|         { slot: "options" }, | ||||
|       ] | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     getTableData() { | ||||
|       this.instance.post(`/app/appsessionarchivekeywordrecord/list`,null,{ | ||||
|         params: { | ||||
|           ...this.search, | ||||
|           current: this.current, | ||||
|           size: this.size, | ||||
|           total: this.total, | ||||
|           startTime: this.time && this.time.length ? this.time[0] : '', | ||||
|           endTime: this.time && this.time.length ? this.time[1] : '' | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if(res?.data) { | ||||
|           this.tableData = res.data.records | ||||
|           this.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     onAreaChange () { | ||||
|       this.search.current = 1 | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getTableData() | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onChange(e) { | ||||
|       this.time = e | ||||
|       this.getTableData() | ||||
|     }, | ||||
|  | ||||
|     selectPerson(val) { | ||||
|       console.log(val) | ||||
|       if (val) { | ||||
|         this.personList = val | ||||
|         this.form.ids = [...this.personList.map(e => e.sysUserId)] | ||||
|       } else { | ||||
|         this.form.ids = this.chooseUserList.map(e => e.sysUserId) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     getGridList() { | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.girdOptions = this.toTree(res.data) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     // 转树形结构 | ||||
|     toTree(data) { | ||||
|       let result = []; | ||||
|       if (!Array.isArray(data)) { | ||||
|         return result | ||||
|       } | ||||
|       let map = {}; | ||||
|       data.forEach(item => { | ||||
|         map[item.id] = item; | ||||
|       }); | ||||
|       data.forEach(item => { | ||||
|         let parent = map[item.parentid]; | ||||
|         if (parent) { | ||||
|           (parent.children || (parent.children = [])).push(item); | ||||
|         } else { | ||||
|           result.push(item); | ||||
|         } | ||||
|       }); | ||||
|       return result; | ||||
|     }, | ||||
|  | ||||
|     gridChange(val) { | ||||
|       this.departIdList = val | ||||
|       this.search.departmentId = val?.[val.length - 1] | ||||
|       this.$refs.cascader1.dropDownVisible = false; | ||||
|       this.getTableData() | ||||
|     }, | ||||
|  | ||||
|     toDetail(row) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Detail', | ||||
|         params:row | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .list { | ||||
|   height: 100%; | ||||
|  | ||||
|   :deep( .ai-dialog .ai-dialog__content ){ | ||||
|     max-height: 600px!important; | ||||
|   } | ||||
|  | ||||
|  | ||||
|  | ||||
|   .userlist { | ||||
|     display: inline-block; | ||||
|   } | ||||
|  | ||||
|   .userlist, .user { | ||||
|     display: inline-block; | ||||
|   } | ||||
|  | ||||
|   .user { | ||||
|     position: relative; | ||||
|     width: 70px; | ||||
|     text-align: center; | ||||
|  | ||||
|     .remove-icon { | ||||
|       position: absolute; | ||||
|       right: 7px; | ||||
|       top: -4px; | ||||
|       line-height: 1; | ||||
|       padding: 6px 0; | ||||
|       font-size: 16px; | ||||
|       cursor: pointer; | ||||
|  | ||||
|       &:hover { | ||||
|         color: crimson; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     img, h2 { | ||||
|       display: block; | ||||
|       width: 40px; | ||||
|       height: 40px; | ||||
|       line-height: 40px; | ||||
|       text-align: center; | ||||
|       margin: 0 auto 4px; | ||||
|       font-size: 14px; | ||||
|       color: #fff; | ||||
|       border-radius: 50%; | ||||
|     } | ||||
|  | ||||
|     h2 { | ||||
|       background-color: $primaryColor; | ||||
|     } | ||||
|  | ||||
|     span { | ||||
|       color: #666; | ||||
|       font-size: 14px; | ||||
|       white-space: nowrap; | ||||
|       overflow: hidden; | ||||
|       word-break: break-all; | ||||
|       text-overflow: ellipsis; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   :deep( .selectCont .pagination ){ | ||||
|     width: 100%!important; | ||||
|     background: pink; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										
											BIN
										
									
								
								project/pidu/app/AppSensitive/components/img/group-img.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								project/pidu/app/AppSensitive/components/img/group-img.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 13 KiB | 
							
								
								
									
										
											BIN
										
									
								
								project/pidu/app/AppSensitive/components/img/user-img.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								project/pidu/app/AppSensitive/components/img/user-img.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 3.9 KiB | 
| @@ -196,7 +196,6 @@ | ||||
|           {name: '文件', value: 'file'}, | ||||
|         ], | ||||
|         searchMsg: '', | ||||
|         id: 'LiuYe', | ||||
|         id: '' | ||||
|       } | ||||
|     }, | ||||
|   | ||||
| @@ -630,9 +630,7 @@ export default { | ||||
|       this.$emit('change', { | ||||
|         type: 'Detail', | ||||
|         params: { | ||||
|           id: id || '', | ||||
|           departmentId: this.search.departmentId || '', | ||||
|           departmentName: this.departmentName || '' | ||||
|           id: id || '' | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user