积分兑换
This commit is contained in:
		| @@ -12,9 +12,14 @@ | ||||
|               @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 | ||||
|             <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> | ||||
| @@ -111,14 +116,14 @@ export default { | ||||
|     ...mapState(['user']), | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         { prop: "name", label: '提交人', align: "left"}, | ||||
|         { prop: "departmentName", label: '部门'}, | ||||
|         { 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}, | ||||
|         { prop: "phone", label: '部门'}, | ||||
|         { prop: "registerCount", label: '涉及对象'}, | ||||
|         { prop: "friendCount", label: '姓名'}, | ||||
|         { prop: "confidantCount", label: '手机号'}, | ||||
|         { prop: "createTime", label: '日期', width:220}, | ||||
|         { slot: "options" }, | ||||
|       ] | ||||
|     }, | ||||
|   | ||||
| @@ -1,932 +1,70 @@ | ||||
| <template> | ||||
|   <ai-list class="AppSessionArchive"> | ||||
|     <template slot="title"> | ||||
|       <ai-title title="会话存档" isShowBottomBorder></ai-title> | ||||
|     </template> | ||||
|     <template #left> | ||||
|       <div class="addressBook-left"> | ||||
|         <div class="addressBook-left__title"> | ||||
|           <h2 @click="tabIndex = 0, search.current = 1, getList()" :class="[tabIndex === 0 ? 'tab-active' : '']"> | ||||
|             组织架构</h2> | ||||
|           <h2 @click="tabIndex = 1, search.current = 1, getList()" :class="[tabIndex === 1 ? 'tab-active' : '']">行政区划</h2> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--title" v-if="tabIndex === 0"> | ||||
|           <el-input | ||||
|               size="mini" | ||||
|               placeholder="请输入部门名称" | ||||
|               v-model="unitName" | ||||
|               clearable | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--title" v-if="tabIndex === 1"> | ||||
|           <el-input | ||||
|               class="addressBook-left__list--search" | ||||
|               size="mini" | ||||
|               clearable | ||||
|               style="width: 154px;" | ||||
|               placeholder="请输入地区名称" | ||||
|               v-model="tagName" | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--wrapper"> | ||||
|           <div class="addressBook-left__list" v-show="tabIndex === 0"> | ||||
|             <el-tree | ||||
|               :filter-node-method="filterNode" | ||||
|               ref="tree" | ||||
|               :props="defaultProps" | ||||
|               node-key="id" | ||||
|               :data="unitList" | ||||
|               highlight-current | ||||
|               @node-contextmenu="nodeContextmenu" | ||||
|               :current-node-key="search.departmentId" | ||||
|               :default-expanded-keys="defaultExpanded" | ||||
|               :default-checked-keys="defaultChecked" | ||||
|               @current-change="onTreeChange"> | ||||
|             </el-tree> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <ai-search-bar class="search-bar"> | ||||
|         <template #left> | ||||
|           <!-- <el-button size="small" type="primary" icon="iconfont iconAdd" v-if="tabIndex === 0" @click="toAdd('')">添加成员 | ||||
|           </el-button> | ||||
|           <ai-import :instance="instance" :dict="dict" v-if="tabIndex === 0" type="wxcp/wxuser" name="会话存档" | ||||
|                      :importParams="{departmentId:search.departmentId}" @success="getList"/> --> | ||||
|           <el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncMembers">同步部门</el-button> | ||||
|           <el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncUser">同步成员</el-button> | ||||
|           <ai-wechat-selecter refs="addTags" :instance="instance" v-model="users" @change="onChooseUser" | ||||
|                               :disabled="currIndex < 0" v-if="tabIndex === 1"> | ||||
|             <!-- <el-button size="small" :disabled="currIndex < 0" type="primary" icon="iconfont iconAdd">添加成员</el-button> --> | ||||
|           </ai-wechat-selecter> | ||||
|         </template> | ||||
|         <template slot="right"> | ||||
|           <el-input | ||||
|               v-model="search.name" | ||||
|               size="small" | ||||
|               v-throttle="() => {search.current = 1, getList()}" | ||||
|               placeholder="请输入成员姓名、手机号或标签名称" | ||||
|               clearable | ||||
|               @clear="search.current = 1, search.name = '', getList()" | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-table | ||||
|           :tableData="tableData" | ||||
|           :col-configs="colConfigs" | ||||
|           :total="total" | ||||
|           v-loading="loading" | ||||
|           style="margin-top: 6px;" | ||||
|           :current.sync="search.current" | ||||
|           :size.sync="search.size" | ||||
|           @handleSelectionChange="handleSelectionChange" | ||||
|           @getList="getList"> | ||||
|         <el-table-column slot="avatar" label="" align="right" width="100px"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <img class="table-avatar" :src="row.avatar || 'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'"> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|         <el-table-column slot="tags" label="标签" align="left"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <div class="table-tags" v-if="row.tagNames"> | ||||
|               <el-tag type="info" v-for="(item, index) in row.tagNames.split('、')" size="small" :key="index">{{ | ||||
|                   item | ||||
|                 }} | ||||
|               </el-tag> | ||||
|             </div> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|         <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <div class="table-options"> | ||||
|               <el-button type="text" @click="toAdd(row.id)">查看会话记录</el-button> | ||||
|             </div> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|         <div slot="paginationBtns" class="addressBook-table__btns"> | ||||
|           <span style="margin-right: 8px;" @click="removeAll">{{ tabIndex === 0 ? '批量删除' : '批量移除' }}</span> | ||||
|           <ai-wechat-selecter :instance="instance" v-model="department" isChooseUnit @change="onDepartment" | ||||
|                               v-if="tabIndex === 0"> | ||||
|             <span>批量导出</span> | ||||
|           </ai-wechat-selecter> | ||||
|         </div> | ||||
|       </ai-table> | ||||
|     </template> | ||||
|   </ai-list> | ||||
|   <div class="AppSessionArchive"> | ||||
|     <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: 'AppSessionArchive', | ||||
|   name: "AppSessionArchive", | ||||
|   label: "会话存档", | ||||
|  | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object | ||||
|     dict: Object, | ||||
|   }, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       users: [], | ||||
|       isShowMenu: false, | ||||
|       department: [], | ||||
|       btnLoading: false, | ||||
|       menuInfo: { | ||||
|         x: '', | ||||
|         y: '', | ||||
|         node: {} | ||||
|       }, | ||||
|       search: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|         title: '', | ||||
|         tagname: '', | ||||
|         name: '', | ||||
|         tagIds: '', | ||||
|         departmentId: '' | ||||
|       }, | ||||
|       tagForm: { | ||||
|         tagname: '' | ||||
|       }, | ||||
|       isShowDepart: false, | ||||
|       departForm: { | ||||
|         name: '' | ||||
|       }, | ||||
|       loading: false, | ||||
|       isShowTags: false, | ||||
|       defaultChecked: [], | ||||
|       defaultExpanded: [], | ||||
|       tabIndex: 0, | ||||
|       currIndex: -1, | ||||
|       areaList: [], | ||||
|       total: 0, | ||||
|       colConfigs: [ | ||||
|         {type: 'selection', label: ''}, | ||||
|         {slot: 'avatar', label: ''}, | ||||
|         {prop: 'name', label: '姓名'}, | ||||
|         {prop: 'position', label: '职务'}, | ||||
|         {prop: 'departmentNames', label: '部门'}, | ||||
|         {prop: 'mobile', label: '手机号'}, | ||||
|         // {slot: 'tags', label: '标签'}, | ||||
|         // {prop: 'status', label: '账号状态', align: 'center', format: v => v == 1 ? '已激活' : '未激活'} | ||||
|       ], | ||||
|       defaultProps: { | ||||
|         children: 'children', | ||||
|         label: 'name' | ||||
|       }, | ||||
|       unitName: '', | ||||
|       rootId: '', | ||||
|       unitList: [], | ||||
|       tagsList: [], | ||||
|       tagName: '', | ||||
|       sourceTagList: [], | ||||
|       tableData: [], | ||||
|       tagId: '', | ||||
|       departmentName: '', | ||||
|       departId: '', | ||||
|       ids: '' | ||||
|     } | ||||
|       component: "List", | ||||
|       params: {}, | ||||
|       include: [], | ||||
|     }; | ||||
|   }, | ||||
|  | ||||
|   computed: { | ||||
|     ...mapState(['user']) | ||||
|   }, | ||||
|  | ||||
|   watch: { | ||||
|     unitName(val) { | ||||
|       this.$refs.tree.filter(val) | ||||
|     }, | ||||
|  | ||||
|     tagName(val) { | ||||
|       if (!val) { | ||||
|         this.tagsList = this.sourceTagList | ||||
|       } | ||||
|  | ||||
|       this.tagsList = this.sourceTagList.filter(v => v.tagname.indexOf(val) > -1) | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   mounted() { | ||||
|     this.getTree() | ||||
|     this.getList() | ||||
|     this.getTags() | ||||
|     document.querySelector('html').addEventListener('click', this.bindEvent) | ||||
|  | ||||
|     this.$nextTick(() => { | ||||
|     }) | ||||
|   components: { | ||||
|     Detail, | ||||
|     List, | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     changeTag(index) { | ||||
|       this.currIndex = index | ||||
|       this.search.current = 1 | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getList() | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     bindEvent() { | ||||
|       this.isShowMenu = false | ||||
|     }, | ||||
|  | ||||
|     nodeContextmenu(e, node) { | ||||
|       this.isShowMenu = true | ||||
|       let y = e.y + 6 | ||||
|       if (y + 202 > document.body.clientHeight) { | ||||
|         y = y - 202 | ||||
|       } | ||||
|       this.menuInfo = { | ||||
|         x: e.x + 16, y, | ||||
|         node | ||||
|       } | ||||
|     }, | ||||
|     removeTags(id) { | ||||
|       if (this.currIndex < 0) { | ||||
|         return this.$message.error('请选择标签') | ||||
|     onChange(data) { | ||||
|       if (data.type === "Detail") { | ||||
|         this.component = "Detail"; | ||||
|         this.params = data.params; | ||||
|       } | ||||
|  | ||||
|       this.$confirm('确定移除该成员?').then(() => { | ||||
|         this.instance.post(`/app/wxcp/wxtag/removeTag?userIds=${id}&tagId=${this.tagsList[this.currIndex].id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success('移除成功!') | ||||
|             this.search.current = 1 | ||||
|       if (data.type === "List") { | ||||
|         this.component = "List"; | ||||
|         this.params = data.params; | ||||
|  | ||||
|             this.getList() | ||||
|         this.$nextTick(() => { | ||||
|           if (data.isRefresh) { | ||||
|             this.$refs.component.getList(); | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onDepartment(e) { | ||||
|       if (!e.length) { | ||||
|         return this.$message.error('请选择部门') | ||||
|       } | ||||
|       const ids = e.map(v => v.id).join(',') | ||||
|  | ||||
|       this.department = [] | ||||
|       this.instance.post(`/app/wxcp/wxuser/export?departmentId=${ids}`, null, { | ||||
|         responseType: 'blob' | ||||
|       }).then(res => { | ||||
|         if (res?.type == "application/json") { | ||||
|           let reader = new FileReader() | ||||
|           reader.readAsText(res, "utf-8") | ||||
|           reader.onload = e => { | ||||
|             if (e.target.readyState === 2) { | ||||
|               let ret = JSON.parse(e.target.result) | ||||
|               if (ret?.code == 0) { | ||||
|                 this.$message.success(ret.msg) | ||||
|               } else this.$message.error(ret.msg) | ||||
|             } | ||||
|           } | ||||
|         } else { | ||||
|           const link = document.createElement('a') | ||||
|           let blob = new Blob([res], {type: res.type}) | ||||
|           link.style.display = 'none' | ||||
|           link.href = URL.createObjectURL(blob) | ||||
|           link.setAttribute('download', `${e[0].name}.xls`) | ||||
|           document.body.appendChild(link) | ||||
|           link.click() | ||||
|           document.body.removeChild(link) | ||||
|           this.$message.success('导出成功!') | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onChooseUser(e) { | ||||
|       if (!e.length) { | ||||
|         return this.$message.error('请选择成员') | ||||
|       } | ||||
|  | ||||
|       this.instance.post(`/app/wxcp/wxtag/markTag`, null, { | ||||
|         params: { | ||||
|           tagId: this.tagsList[this.currIndex].id, | ||||
|           userIds: e.map(v => v.id).join(',') | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.getList() | ||||
|           this.users = [] | ||||
|           this.search.current = 1 | ||||
|           this.$refs.addTags.reset() | ||||
|         } else { | ||||
|           this.users = [] | ||||
|         } | ||||
|       }).catch(() => { | ||||
|         this.users = [] | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     handleTreeCommand(e, item) { | ||||
|       this.isShowMenu = false | ||||
|  | ||||
|       if (e === 'add') { | ||||
|         this.departForm.id = '' | ||||
|         this.departForm.parentid = item.id | ||||
|         this.departId = '' | ||||
|         this.isShowDepart = true | ||||
|       } else if (e === 'edit') { | ||||
|         this.departForm = { | ||||
|           ...item | ||||
|         } | ||||
|  | ||||
|         this.departId = item.id | ||||
|         this.isShowDepart = true | ||||
|       } else if (e === 'top') { | ||||
|         if (!item.i) { | ||||
|           return false | ||||
|         } | ||||
|  | ||||
|         this.moveDepart(item.id, 0) | ||||
|       } else if (e === 'bottom') { | ||||
|         if ((item.i === item.len - 1) || (!item.i && item.i !== 0)) { | ||||
|           return false | ||||
|         } | ||||
|  | ||||
|         this.moveDepart(item.id, 1) | ||||
|       } else if (e === 'remove') { | ||||
|         this.removeDepart(item.id, item.parentid) | ||||
|         }); | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     removeDepart(id, parentid) { | ||||
|       this.$confirm('确定删除该数据?').then(() => { | ||||
|         this.instance.post(`/app/wxcp/wxdepartment/delete?id=${id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.defaultChecked = [parentid] | ||||
|             this.$message.success('删除成功!') | ||||
|             this.getTree() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     moveDepart(id, type) { | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/move?id=${id}&type=${type}`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.defaultChecked = [id] | ||||
|           this.getTree() | ||||
|           this.$message.success(type === 0 ? '上移成功' : '下移成功') | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onDepartConfirm() { | ||||
|       this.$refs.departForm.validate((valid) => { | ||||
|         if (valid) { | ||||
|           this.instance.post(`/app/wxcp/wxdepartment/addOrUpdate`, { | ||||
|             ...this.departForm, | ||||
|             departId: this.departId | ||||
|           }).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.defaultChecked = [this.departForm.parentid] | ||||
|               this.isShowDepart = false | ||||
|               this.getTree() | ||||
|               this.$message.success(this.departId ? '编辑成功' : '新增成功') | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onFormConfirm() { | ||||
|       this.$refs.tagForm.validate((valid) => { | ||||
|         if (valid) { | ||||
|           this.instance.post(`/app/wxcp/wxtag/addOrUpdate`, { | ||||
|             ...this.tagForm | ||||
|           }).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.isShowTags = false | ||||
|               this.getTags() | ||||
|               this.$message.success(this.tagId ? '编辑成功' : '新增成功') | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     handleCommand(e, item) { | ||||
|       if (e === 'edit') { | ||||
|         this.tagId = item.id | ||||
|         this.tagForm = { | ||||
|           ...item | ||||
|         } | ||||
|  | ||||
|         this.isShowTags = true | ||||
|       } else { | ||||
|         this.$confirm('确定删除该数据?').then(() => { | ||||
|           this.instance.post(`/app/wxcp/wxtag/delete?id=${item.id}`).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success('删除成功!') | ||||
|               this.getTags() | ||||
|               this.getList() | ||||
|             } | ||||
|           }) | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     onClose() { | ||||
|       this.tagId = '' | ||||
|       this.tagForm.tagname = '' | ||||
|       this.departForm.name = '' | ||||
|       this.departId = '' | ||||
|       this.departForm.nameEn = '' | ||||
|       this.departForm.parentid = '' | ||||
|       this.departForm.showIndex = '' | ||||
|     }, | ||||
|  | ||||
|     syncMembers() { | ||||
|       this.btnLoading = true | ||||
|  | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/syncDepart`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success('同步成功') | ||||
|           this.getList() | ||||
|           this.getTree() | ||||
|         } | ||||
|  | ||||
|       }).catch(() => { | ||||
|         this.btnLoading = false | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     syncUser() { | ||||
|       let departId = this.search.departmentId; | ||||
|       if (!departId) departId = 1; | ||||
|       this.btnLoading = true | ||||
|  | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/syncUser?departmentId=${departId}`, null, { | ||||
|         timeout: 1000000 | ||||
|       }).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success('同步成功') | ||||
|           this.getList() | ||||
|           this.getTree() | ||||
|         } | ||||
|  | ||||
|         this.btnLoading = false | ||||
|       }).catch(() => { | ||||
|         this.btnLoading = false | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getTags() { | ||||
|       this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.sourceTagList = res.data.length ? JSON.parse(JSON.stringify(res.data)) : [] | ||||
|           this.tagsList = res.data | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onSwitchChange(id) { | ||||
|       this.instance.post(`/app/wxcp/wxuser/enable?id=${id}`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.getList() | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onTreeChange(e) { | ||||
|       this.departmentName = e.name | ||||
|       this.search.departmentId = e.id || '' | ||||
|       this.search.current = 1 | ||||
|       this.isShowMenu = false | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getList() | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getList() { | ||||
|       this.loading = true | ||||
|       this.instance.post(`/app/wxcp/wxuser/list`, null, { | ||||
|         params: { | ||||
|           ...this.search, | ||||
|           departmentId: this.tabIndex === 0 ? this.search.departmentId : '', | ||||
|           tagIds: this.tabIndex === 1 ? (this.currIndex >= 0 ? this.tagsList[this.currIndex].id : '') : '', | ||||
|           listType: this.tabIndex | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.tableData = res.data.records | ||||
|           this.total = res.data.total | ||||
|  | ||||
|           this.$nextTick(() => { | ||||
|             this.loading = false | ||||
|           }) | ||||
|         } else { | ||||
|           this.loading = false | ||||
|         } | ||||
|       }).catch(() => { | ||||
|         this.loading = false | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     removeAll() { | ||||
|       if (!this.ids) return | ||||
|  | ||||
|       if (this.tabIndex === 1) { | ||||
|         this.removeTags(this.ids) | ||||
|       } else { | ||||
|         this.remove(this.ids) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     handleSelectionChange(e) { | ||||
|       this.ids = e.map(v => v.id).join(',') | ||||
|     }, | ||||
|  | ||||
|     filterNode(value, data) { | ||||
|       if (!value) return true | ||||
|       return data.name.indexOf(value) !== -1 | ||||
|     }, | ||||
|  | ||||
|     changeTab(id, index) { | ||||
|       this.currIndex = index | ||||
|       this.search.areaId = id | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getList() | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getTree() { | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/listAll?unitName=${this.unitName}`).then(res => { | ||||
|         if (res.code === 0) { | ||||
|           let parent = res.data.map(v => { | ||||
|             v.label = v.name | ||||
|             v.children = [] | ||||
|  | ||||
|             return v | ||||
|           }).filter(e => !e.parentid)[0] | ||||
|           this.defaultExpanded = [parent.id] | ||||
|           this.defaultChecked = [parent.id] | ||||
|           this.search.departmentId = parent.id | ||||
|           this.departmentName = parent.name | ||||
|           this.addChild(parent, res.data) | ||||
|           this.unitList = [parent] | ||||
|  | ||||
|           this.$nextTick(() => { | ||||
|             this.$refs.tree.setCurrentKey(parent.id) | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     addChild(parent, list) { | ||||
|       for (let i = 0; i < list.length; i++) { | ||||
|         if (list[i].parentid === parent.id) { | ||||
|           list[i].i = parent.children.length | ||||
|           parent.children.push(list[i]) | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       if (parent.children.length) { | ||||
|         parent.children.forEach(v => { | ||||
|           v.len = parent.children.length | ||||
|         }) | ||||
|       } | ||||
|  | ||||
|       if (list.length > 0) { | ||||
|         parent['children'].map(v => this.addChild(v, list)) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     formatList(list) { | ||||
|       var arr = [] | ||||
|       for (let item of list) { | ||||
|         if (item.childrenUser && item.childrenUser.length) { | ||||
|           delete item.childrenUser | ||||
|         } | ||||
|  | ||||
|         if (item.childrenDept && item.childrenDept.length) { | ||||
|           this.formatList(item.childrenDept) | ||||
|         } | ||||
|  | ||||
|         arr.push(item) | ||||
|       } | ||||
|  | ||||
|       return arr | ||||
|     }, | ||||
|  | ||||
|     remove(id) { | ||||
|       this.$confirm('确定删除该数据?').then(() => { | ||||
|         this.instance.post(`/app/wxcp/wxuser/delete?id=${id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success('删除成功!') | ||||
|             this.getList() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     toAdd(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Add', | ||||
|         params: { | ||||
|           id: id || '', | ||||
|           departmentId: this.search.departmentId || '', | ||||
|           departmentName: this.departmentName || '' | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| <style lang="scss"> | ||||
| .AppSessionArchive { | ||||
|   .addressBook-table__btns { | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|   } | ||||
|  | ||||
|  | ||||
|   .table-tags { | ||||
|     .el-tag { | ||||
|       margin-right: 8px; | ||||
|       margin-bottom: 8px; | ||||
|  | ||||
|       &:last-child { | ||||
|         margin-right: 0; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .import-wrapper { | ||||
|     & > h2 { | ||||
|       margin-bottom: 8px; | ||||
|       font-size: 16px; | ||||
|       color: #222222; | ||||
|       font-weight: Bold; | ||||
|     } | ||||
|  | ||||
|     .import-wrapper__tips { | ||||
|       line-height: 1; | ||||
|       margin-bottom: 24px; | ||||
|  | ||||
|       div { | ||||
|         display: flex; | ||||
|         margin-bottom: 8px; | ||||
|         color: #222222; | ||||
|         font-size: 14px; | ||||
|  | ||||
|         span { | ||||
|           cursor: pointer; | ||||
|           color: #2266FF; | ||||
|  | ||||
|           &:hover { | ||||
|             opacity: 0.8; | ||||
|             text-decoration: underline; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .import-files { | ||||
|       i { | ||||
|         display: block; | ||||
|         margin-top: 8px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     i { | ||||
|       color: #999999; | ||||
|       font-size: 12px; | ||||
|       font-style: normal; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .tree-container { | ||||
|     position: relative; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     justify-content: space-between; | ||||
|     width: 100%; | ||||
|     height: 100%; | ||||
|  | ||||
|     .tree-name { | ||||
|       padding-right: 30px; | ||||
|     } | ||||
|  | ||||
|     i { | ||||
|       position: absolute; | ||||
|       top: 50%; | ||||
|       right: 8px; | ||||
|       transform: translateY(-50%); | ||||
|       padding-right: 8px; | ||||
|       font-weight: normal; | ||||
|       color: #fff; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .el-tag { | ||||
|     margin-right: 8px; | ||||
|     border: 1px solid #D0D4DC; | ||||
|     background: #F3F4F7; | ||||
|     border-radius: 4px; | ||||
|     font-size: 13px; | ||||
|     color: #222222; | ||||
|  | ||||
|     &:last-child { | ||||
|       margin-right: 0; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .table-avatar { | ||||
|     width: 40px; | ||||
|     height: 40px; | ||||
|     margin-top: 3px; | ||||
|     border-radius: 2px; | ||||
|     border: 1px solid #CCCCCC; | ||||
|   } | ||||
|  | ||||
|   .el-button--mini, .el-button--mini.is-round { | ||||
|     height: 28px; | ||||
|     line-height: 28px; | ||||
|     padding: 0; | ||||
|     font-size: 12px; | ||||
|  | ||||
|     :deep( span ){ | ||||
|       margin-left: 0; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .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; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .addressBook-left { | ||||
|     width: 100%; | ||||
|     height: auto; | ||||
|     background: #FAFAFB; | ||||
|  | ||||
|     .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; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     // ::-webkit-scrollbar { | ||||
|     //   width: 1px; | ||||
|     // } | ||||
|  | ||||
|     .addressBook-left__list--wrapper { | ||||
|       height: calc(100% - 68px); | ||||
|       padding: 8px; | ||||
|     } | ||||
|  | ||||
|     .addressBook-left__list { | ||||
|       width: 100%; | ||||
|       height: 100%; | ||||
|       overflow: auto; | ||||
|  | ||||
|       :deep( .el-tree ){ | ||||
|         width: fit-content; | ||||
|         min-width: 100%; | ||||
|       } | ||||
|  | ||||
|       :deep( .el-scrollbar__wrap ){ | ||||
|         margin-bottom: 0 !important; | ||||
|         overflow-x: hidden; | ||||
|  | ||||
|         .el-scrollbar__view { | ||||
|           width: fit-content; | ||||
|           min-width: 100%; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .addressBook-left__tags--item { | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         justify-content: space-between; | ||||
|         height: 40px; | ||||
|         padding: 0 8px 0 16px; | ||||
|         cursor: pointer; | ||||
|         color: #222222; | ||||
|  | ||||
|         &.addressBook-left__tags--item-active, &:hover { | ||||
|           background: #E8EFFF; | ||||
|           color: #2266FF; | ||||
|  | ||||
|           i, span { | ||||
|             color: #2266FF; | ||||
|           } | ||||
|         } | ||||
|  | ||||
|         span { | ||||
|           font-size: 14px; | ||||
|         } | ||||
|  | ||||
|         i { | ||||
|           cursor: pointer; | ||||
|           color: #8e9ebf; | ||||
|           font-size: 16px; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       span { | ||||
|         color: #222222; | ||||
|         font-size: 14px; | ||||
|       } | ||||
|  | ||||
|       :deep( .el-tree ){ | ||||
|         background: transparent; | ||||
|  | ||||
|         .el-tree-node__expand-icon.is-leaf { | ||||
|           color: transparent !important; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__content > .el-tree-node__expand-icon { | ||||
|           padding: 4px; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__content { | ||||
|           height: 32px; | ||||
|         } | ||||
|  | ||||
|         .el-tree__empty-text { | ||||
|           color: #222; | ||||
|           font-size: 14px; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__children .el-tree-node__content { | ||||
|           height: 32px; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__content:hover { | ||||
|           background: #E8EFFF; | ||||
|           color: #222222; | ||||
|           border-radius: 2px; | ||||
|         } | ||||
|  | ||||
|         .is-current > .el-tree-node__content { | ||||
|           &:hover { | ||||
|             background: #2266FF; | ||||
|             color: #fff; | ||||
|           } | ||||
|  | ||||
|           background: #2266FF; | ||||
|  | ||||
|           span { | ||||
|             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%; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   height: 100%; | ||||
|   background: #f3f6f9; | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -1,66 +1,58 @@ | ||||
|  <template> | ||||
|   <ai-detail v-loading="isLoading" class="detail"> | ||||
|   <ai-list v-loading="isLoading" class="detail"> | ||||
|     <template slot="title"> | ||||
|       <ai-title title="订单详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"> | ||||
|       </ai-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 === 0 ? 'tab-active' : '']">群聊会话</h2> | ||||
|           <h2 :class="[tabIndex === 1 ? 'tab-active' : '']">私聊会话</h2> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--title"> | ||||
|           <el-input | ||||
|               size="mini" | ||||
|               placeholder="请输入联系人姓名" | ||||
|               v-model="searchName" | ||||
|               clearable | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--wrapper"> | ||||
|           <div class="addressBook-left__list--item active"> | ||||
|             <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三 | ||||
|           </div> | ||||
|           <div class="addressBook-left__list--item"> | ||||
|             <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三 | ||||
|           </div> | ||||
|           <div class="addressBook-left__list--item"> | ||||
|             <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三 | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <ai-card title="基本信息"> | ||||
|         <template #right> | ||||
|           <el-button type="primary" v-if="info.orderStatus === '0'" @click="isShow = true">订单核销</el-button> | ||||
|         </template> | ||||
|         <template #content> | ||||
|           <ai-wrapper | ||||
|             label-width="120px"> | ||||
|             <ai-info-item label="订单编号" :value="info.orderCode"></ai-info-item> | ||||
|             <ai-info-item label="订单状态" :value="dict.getLabel('merchandiseOrderStatus', info.orderStatus)"></ai-info-item> | ||||
|             <ai-info-item label="兑换人" :value="info.consumerName"></ai-info-item> | ||||
|             <ai-info-item label="兑换时间" :value="info.createTime"></ai-info-item> | ||||
|             <ai-info-item label="备注" isLine :value="info.remark"></ai-info-item> | ||||
|           </ai-wrapper> | ||||
|         </template> | ||||
|       </ai-card> | ||||
|       <ai-card title="操作信息" v-if="info.orderStatus === '1'"> | ||||
|         <template #content> | ||||
|           <ai-wrapper | ||||
|             label-width="120px"> | ||||
|             <ai-info-item label="核销人" :value="info.auditUserName"></ai-info-item> | ||||
|             <ai-info-item label="核销时间" :value="info.auditTime"></ai-info-item> | ||||
|           </ai-wrapper> | ||||
|         </template> | ||||
|       </ai-card> | ||||
|       <ai-card title="商品信息"> | ||||
|         <template #content> | ||||
|           <ai-table | ||||
|             :tableData="tableData" | ||||
|             :isShowPagination="false" | ||||
|             :col-configs="colConfigs" | ||||
|             @getList="() => {}"> | ||||
|             <el-table-column slot="goods" width="240px" label="商品" align="left"> | ||||
|               <template slot-scope="{ row }"> | ||||
|                 <div class="goods"> | ||||
|                   <img :src="row.imageUrl"> | ||||
|                   <span>{{ row.merchandiseName }}</span> | ||||
|                 </div> | ||||
|               </template> | ||||
|             </el-table-column> | ||||
|           </ai-table> | ||||
|         </template> | ||||
|       </ai-card> | ||||
|       <ai-dialog | ||||
|         :visible.sync="isShow" | ||||
|         width="590px" | ||||
|         title="订单核销" | ||||
|         @close="form.code = ''" | ||||
|         @onConfirm="onConfirm"> | ||||
|         <el-form ref="form" :model="form" label-width="110px" label-position="right"> | ||||
|           <el-form-item label="核销码" prop="code" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]"> | ||||
|             <el-input size="small" placeholder="请输入核销码" v-model="form.code"></el-input> | ||||
|           </el-form-item> | ||||
|         </el-form> | ||||
|       </ai-dialog> | ||||
|       <div class="content-right-title"> | ||||
|         <div class="tab-content"> | ||||
|           <h2 class="tab-active">全部</h2> | ||||
|           <h2>图片/视频</h2> | ||||
|           <h2>文件</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="search.name" clearable | ||||
|               @clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch" | ||||
|               v-throttle="() => {(current = 1), getTableData();}"/> | ||||
|               <ai-download :instance="instance" url="/app/appconvenientaddressbook/export" :params="search" fileName="会话存档" | ||||
|                        :disabled="tableData.length == 0"> | ||||
|             <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button> | ||||
|           </ai-download> | ||||
|         </div> | ||||
|       </div> | ||||
|     </template> | ||||
|   </ai-detail> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| @@ -89,15 +81,25 @@ | ||||
|           { prop: 'merchandiseNumber', align: 'center', label: '数量' }, | ||||
|           { prop: 'merchandiseIntegral', align: 'center', label: '小计' } | ||||
|         ], | ||||
|  | ||||
|  | ||||
|  | ||||
|         tabIndex: 0, | ||||
|         searchName: '', | ||||
|         time: [], | ||||
|         search: { | ||||
|           name: '' | ||||
|         }, | ||||
|         current: 1 | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     created () { | ||||
|       this.isLoading = true | ||||
|       // this.isLoading = true | ||||
|       if (this.params && this.params.id) { | ||||
|         this.id = this.params.id | ||||
|         this.dict.load(['merchandiseOrderStatus']).then(() => { | ||||
|           this.getInfo(this.params.id) | ||||
|           // this.getInfo(this.params.id) | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
| @@ -146,22 +148,144 @@ | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|   .detail .goods { | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|   .detail { | ||||
|     .addressBook-left { | ||||
|       width: 100%; | ||||
|       height: auto; | ||||
|       background: #FAFAFB; | ||||
|  | ||||
|     img { | ||||
|       width: 80px; | ||||
|       height: 80px; | ||||
|       margin-right: 20px; | ||||
|       .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% - 68px); | ||||
|         padding: 8px; | ||||
|         .addressBook-left__list--item { | ||||
|           line-height: 44px; | ||||
|           font-size: 16px; | ||||
|           color: #333; | ||||
|           margin-bottom: 8px; | ||||
|           padding: 8px; | ||||
|           cursor: pointer; | ||||
|           img { | ||||
|             width: 44px; | ||||
|             height: 44px; | ||||
|             border-radius: 50%; | ||||
|             margin-right: 8px; | ||||
|             vertical-align: middle; | ||||
|           } | ||||
|         } | ||||
|         .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; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     span { | ||||
|     :deep( .ai-list__content--right ){ | ||||
|       flex: 1; | ||||
|       display: -webkit-box; | ||||
|       overflow: hidden; | ||||
|       -webkit-line-clamp: 2; | ||||
|       -webkit-box-orient: vertical; | ||||
|       min-width: 0; | ||||
|       margin-left: 1px; | ||||
|       box-shadow: none; | ||||
|  | ||||
|       .ai-list__content--right-wrapper { | ||||
|         width: 100%; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     :deep .ai-list__content--right-wrapper { | ||||
|       padding: 0!important; | ||||
|     } | ||||
|  | ||||
|     .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; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   | ||||
							
								
								
									
										931
									
								
								project/pidu/app/AppSessionArchive/components/List.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										931
									
								
								project/pidu/app/AppSessionArchive/components/List.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,931 @@ | ||||
| <template> | ||||
|   <ai-list class="List"> | ||||
|     <template slot="title"> | ||||
|       <ai-title title="会话存档" isShowBottomBorder></ai-title> | ||||
|     </template> | ||||
|     <template #left> | ||||
|       <div class="addressBook-left"> | ||||
|         <div class="addressBook-left__title"> | ||||
|           <h2 @click="tabIndex = 0, search.current = 1, getList()" :class="[tabIndex === 0 ? 'tab-active' : '']"> | ||||
|             组织架构</h2> | ||||
|           <h2 @click="tabIndex = 1, search.current = 1, getList()" :class="[tabIndex === 1 ? 'tab-active' : '']">行政区划</h2> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--title" v-if="tabIndex === 0"> | ||||
|           <el-input | ||||
|               size="mini" | ||||
|               placeholder="请输入部门名称" | ||||
|               v-model="unitName" | ||||
|               clearable | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--title" v-if="tabIndex === 1"> | ||||
|           <el-input | ||||
|               class="addressBook-left__list--search" | ||||
|               size="mini" | ||||
|               clearable | ||||
|               style="width: 154px;" | ||||
|               placeholder="请输入地区名称" | ||||
|               v-model="tagName" | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </div> | ||||
|         <div class="addressBook-left__list--wrapper"> | ||||
|           <div class="addressBook-left__list" v-show="tabIndex === 0"> | ||||
|             <el-tree | ||||
|               :filter-node-method="filterNode" | ||||
|               ref="tree" | ||||
|               :props="defaultProps" | ||||
|               node-key="id" | ||||
|               :data="unitList" | ||||
|               highlight-current | ||||
|               @node-contextmenu="nodeContextmenu" | ||||
|               :current-node-key="search.departmentId" | ||||
|               :default-expanded-keys="defaultExpanded" | ||||
|               :default-checked-keys="defaultChecked" | ||||
|               @current-change="onTreeChange"> | ||||
|             </el-tree> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <ai-search-bar class="search-bar"> | ||||
|         <template #left> | ||||
|           <!-- <el-button size="small" type="primary" icon="iconfont iconAdd" v-if="tabIndex === 0" @click="toAdd('')">添加成员 | ||||
|           </el-button> | ||||
|           <ai-import :instance="instance" :dict="dict" v-if="tabIndex === 0" type="wxcp/wxuser" name="会话存档" | ||||
|                      :importParams="{departmentId:search.departmentId}" @success="getList"/> --> | ||||
|           <el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncMembers">同步部门</el-button> | ||||
|           <el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncUser">同步成员</el-button> | ||||
|           <ai-wechat-selecter refs="addTags" :instance="instance" v-model="users" @change="onChooseUser" | ||||
|                               :disabled="currIndex < 0" v-if="tabIndex === 1"> | ||||
|             <!-- <el-button size="small" :disabled="currIndex < 0" type="primary" icon="iconfont iconAdd">添加成员</el-button> --> | ||||
|           </ai-wechat-selecter> | ||||
|         </template> | ||||
|         <template slot="right"> | ||||
|           <el-input | ||||
|               v-model="search.name" | ||||
|               size="small" | ||||
|               v-throttle="() => {search.current = 1, getList()}" | ||||
|               placeholder="请输入成员姓名、手机号或标签名称" | ||||
|               clearable | ||||
|               @clear="search.current = 1, search.name = '', getList()" | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-table | ||||
|           :tableData="tableData" | ||||
|           :col-configs="colConfigs" | ||||
|           :total="total" | ||||
|           v-loading="loading" | ||||
|           style="margin-top: 6px;" | ||||
|           :current.sync="search.current" | ||||
|           :size.sync="search.size" | ||||
|           @handleSelectionChange="handleSelectionChange" | ||||
|           @getList="getList"> | ||||
|         <el-table-column slot="avatar" label="" align="right" width="100px"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <img class="table-avatar" :src="row.avatar || 'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'"> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|         <el-table-column slot="tags" label="标签" align="left"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <div class="table-tags" v-if="row.tagNames"> | ||||
|               <el-tag type="info" v-for="(item, index) in row.tagNames.split('、')" size="small" :key="index">{{ | ||||
|                   item | ||||
|                 }} | ||||
|               </el-tag> | ||||
|             </div> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|         <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <div class="table-options"> | ||||
|               <el-button type="text" @click="toDetail(row.id)">查看会话记录</el-button> | ||||
|             </div> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|         <div slot="paginationBtns" class="addressBook-table__btns"> | ||||
|           <span style="margin-right: 8px;" @click="removeAll">{{ tabIndex === 0 ? '批量删除' : '批量移除' }}</span> | ||||
|           <ai-wechat-selecter :instance="instance" v-model="department" isChooseUnit @change="onDepartment" | ||||
|                               v-if="tabIndex === 0"> | ||||
|             <span>批量导出</span> | ||||
|           </ai-wechat-selecter> | ||||
|         </div> | ||||
|       </ai-table> | ||||
|     </template> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import {mapState} from 'vuex' | ||||
|  | ||||
| export default { | ||||
|   name: 'List', | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object | ||||
|   }, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       users: [], | ||||
|       isShowMenu: false, | ||||
|       department: [], | ||||
|       btnLoading: false, | ||||
|       menuInfo: { | ||||
|         x: '', | ||||
|         y: '', | ||||
|         node: {} | ||||
|       }, | ||||
|       search: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|         title: '', | ||||
|         tagname: '', | ||||
|         name: '', | ||||
|         tagIds: '', | ||||
|         departmentId: '' | ||||
|       }, | ||||
|       tagForm: { | ||||
|         tagname: '' | ||||
|       }, | ||||
|       isShowDepart: false, | ||||
|       departForm: { | ||||
|         name: '' | ||||
|       }, | ||||
|       loading: false, | ||||
|       isShowTags: false, | ||||
|       defaultChecked: [], | ||||
|       defaultExpanded: [], | ||||
|       tabIndex: 0, | ||||
|       currIndex: -1, | ||||
|       areaList: [], | ||||
|       total: 0, | ||||
|       colConfigs: [ | ||||
|         {type: 'selection', label: ''}, | ||||
|         {slot: 'avatar', label: ''}, | ||||
|         {prop: 'name', label: '姓名'}, | ||||
|         {prop: 'position', label: '职务'}, | ||||
|         {prop: 'departmentNames', label: '部门'}, | ||||
|         {prop: 'mobile', label: '手机号'}, | ||||
|         // {slot: 'tags', label: '标签'}, | ||||
|         // {prop: 'status', label: '账号状态', align: 'center', format: v => v == 1 ? '已激活' : '未激活'} | ||||
|       ], | ||||
|       defaultProps: { | ||||
|         children: 'children', | ||||
|         label: 'name' | ||||
|       }, | ||||
|       unitName: '', | ||||
|       rootId: '', | ||||
|       unitList: [], | ||||
|       tagsList: [], | ||||
|       tagName: '', | ||||
|       sourceTagList: [], | ||||
|       tableData: [], | ||||
|       tagId: '', | ||||
|       departmentName: '', | ||||
|       departId: '', | ||||
|       ids: '' | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   computed: { | ||||
|     ...mapState(['user']) | ||||
|   }, | ||||
|  | ||||
|   watch: { | ||||
|     unitName(val) { | ||||
|       this.$refs.tree.filter(val) | ||||
|     }, | ||||
|  | ||||
|     tagName(val) { | ||||
|       if (!val) { | ||||
|         this.tagsList = this.sourceTagList | ||||
|       } | ||||
|  | ||||
|       this.tagsList = this.sourceTagList.filter(v => v.tagname.indexOf(val) > -1) | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   mounted() { | ||||
|     this.getTree() | ||||
|     this.getList() | ||||
|     this.getTags() | ||||
|     document.querySelector('html').addEventListener('click', this.bindEvent) | ||||
|  | ||||
|     this.$nextTick(() => { | ||||
|     }) | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     changeTag(index) { | ||||
|       this.currIndex = index | ||||
|       this.search.current = 1 | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getList() | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     bindEvent() { | ||||
|       this.isShowMenu = false | ||||
|     }, | ||||
|  | ||||
|     nodeContextmenu(e, node) { | ||||
|       this.isShowMenu = true | ||||
|       let y = e.y + 6 | ||||
|       if (y + 202 > document.body.clientHeight) { | ||||
|         y = y - 202 | ||||
|       } | ||||
|       this.menuInfo = { | ||||
|         x: e.x + 16, y, | ||||
|         node | ||||
|       } | ||||
|     }, | ||||
|     removeTags(id) { | ||||
|       if (this.currIndex < 0) { | ||||
|         return this.$message.error('请选择标签') | ||||
|       } | ||||
|  | ||||
|       this.$confirm('确定移除该成员?').then(() => { | ||||
|         this.instance.post(`/app/wxcp/wxtag/removeTag?userIds=${id}&tagId=${this.tagsList[this.currIndex].id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success('移除成功!') | ||||
|             this.search.current = 1 | ||||
|  | ||||
|             this.getList() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onDepartment(e) { | ||||
|       if (!e.length) { | ||||
|         return this.$message.error('请选择部门') | ||||
|       } | ||||
|       const ids = e.map(v => v.id).join(',') | ||||
|  | ||||
|       this.department = [] | ||||
|       this.instance.post(`/app/wxcp/wxuser/export?departmentId=${ids}`, null, { | ||||
|         responseType: 'blob' | ||||
|       }).then(res => { | ||||
|         if (res?.type == "application/json") { | ||||
|           let reader = new FileReader() | ||||
|           reader.readAsText(res, "utf-8") | ||||
|           reader.onload = e => { | ||||
|             if (e.target.readyState === 2) { | ||||
|               let ret = JSON.parse(e.target.result) | ||||
|               if (ret?.code == 0) { | ||||
|                 this.$message.success(ret.msg) | ||||
|               } else this.$message.error(ret.msg) | ||||
|             } | ||||
|           } | ||||
|         } else { | ||||
|           const link = document.createElement('a') | ||||
|           let blob = new Blob([res], {type: res.type}) | ||||
|           link.style.display = 'none' | ||||
|           link.href = URL.createObjectURL(blob) | ||||
|           link.setAttribute('download', `${e[0].name}.xls`) | ||||
|           document.body.appendChild(link) | ||||
|           link.click() | ||||
|           document.body.removeChild(link) | ||||
|           this.$message.success('导出成功!') | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onChooseUser(e) { | ||||
|       if (!e.length) { | ||||
|         return this.$message.error('请选择成员') | ||||
|       } | ||||
|  | ||||
|       this.instance.post(`/app/wxcp/wxtag/markTag`, null, { | ||||
|         params: { | ||||
|           tagId: this.tagsList[this.currIndex].id, | ||||
|           userIds: e.map(v => v.id).join(',') | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.getList() | ||||
|           this.users = [] | ||||
|           this.search.current = 1 | ||||
|           this.$refs.addTags.reset() | ||||
|         } else { | ||||
|           this.users = [] | ||||
|         } | ||||
|       }).catch(() => { | ||||
|         this.users = [] | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     handleTreeCommand(e, item) { | ||||
|       this.isShowMenu = false | ||||
|  | ||||
|       if (e === 'add') { | ||||
|         this.departForm.id = '' | ||||
|         this.departForm.parentid = item.id | ||||
|         this.departId = '' | ||||
|         this.isShowDepart = true | ||||
|       } else if (e === 'edit') { | ||||
|         this.departForm = { | ||||
|           ...item | ||||
|         } | ||||
|  | ||||
|         this.departId = item.id | ||||
|         this.isShowDepart = true | ||||
|       } else if (e === 'top') { | ||||
|         if (!item.i) { | ||||
|           return false | ||||
|         } | ||||
|  | ||||
|         this.moveDepart(item.id, 0) | ||||
|       } else if (e === 'bottom') { | ||||
|         if ((item.i === item.len - 1) || (!item.i && item.i !== 0)) { | ||||
|           return false | ||||
|         } | ||||
|  | ||||
|         this.moveDepart(item.id, 1) | ||||
|       } else if (e === 'remove') { | ||||
|         this.removeDepart(item.id, item.parentid) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     removeDepart(id, parentid) { | ||||
|       this.$confirm('确定删除该数据?').then(() => { | ||||
|         this.instance.post(`/app/wxcp/wxdepartment/delete?id=${id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.defaultChecked = [parentid] | ||||
|             this.$message.success('删除成功!') | ||||
|             this.getTree() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     moveDepart(id, type) { | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/move?id=${id}&type=${type}`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.defaultChecked = [id] | ||||
|           this.getTree() | ||||
|           this.$message.success(type === 0 ? '上移成功' : '下移成功') | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onDepartConfirm() { | ||||
|       this.$refs.departForm.validate((valid) => { | ||||
|         if (valid) { | ||||
|           this.instance.post(`/app/wxcp/wxdepartment/addOrUpdate`, { | ||||
|             ...this.departForm, | ||||
|             departId: this.departId | ||||
|           }).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.defaultChecked = [this.departForm.parentid] | ||||
|               this.isShowDepart = false | ||||
|               this.getTree() | ||||
|               this.$message.success(this.departId ? '编辑成功' : '新增成功') | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onFormConfirm() { | ||||
|       this.$refs.tagForm.validate((valid) => { | ||||
|         if (valid) { | ||||
|           this.instance.post(`/app/wxcp/wxtag/addOrUpdate`, { | ||||
|             ...this.tagForm | ||||
|           }).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.isShowTags = false | ||||
|               this.getTags() | ||||
|               this.$message.success(this.tagId ? '编辑成功' : '新增成功') | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     handleCommand(e, item) { | ||||
|       if (e === 'edit') { | ||||
|         this.tagId = item.id | ||||
|         this.tagForm = { | ||||
|           ...item | ||||
|         } | ||||
|  | ||||
|         this.isShowTags = true | ||||
|       } else { | ||||
|         this.$confirm('确定删除该数据?').then(() => { | ||||
|           this.instance.post(`/app/wxcp/wxtag/delete?id=${item.id}`).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success('删除成功!') | ||||
|               this.getTags() | ||||
|               this.getList() | ||||
|             } | ||||
|           }) | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     onClose() { | ||||
|       this.tagId = '' | ||||
|       this.tagForm.tagname = '' | ||||
|       this.departForm.name = '' | ||||
|       this.departId = '' | ||||
|       this.departForm.nameEn = '' | ||||
|       this.departForm.parentid = '' | ||||
|       this.departForm.showIndex = '' | ||||
|     }, | ||||
|  | ||||
|     syncMembers() { | ||||
|       this.btnLoading = true | ||||
|  | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/syncDepart`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success('同步成功') | ||||
|           this.getList() | ||||
|           this.getTree() | ||||
|         } | ||||
|  | ||||
|       }).catch(() => { | ||||
|         this.btnLoading = false | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     syncUser() { | ||||
|       let departId = this.search.departmentId; | ||||
|       if (!departId) departId = 1; | ||||
|       this.btnLoading = true | ||||
|  | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/syncUser?departmentId=${departId}`, null, { | ||||
|         timeout: 1000000 | ||||
|       }).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success('同步成功') | ||||
|           this.getList() | ||||
|           this.getTree() | ||||
|         } | ||||
|  | ||||
|         this.btnLoading = false | ||||
|       }).catch(() => { | ||||
|         this.btnLoading = false | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getTags() { | ||||
|       this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.sourceTagList = res.data.length ? JSON.parse(JSON.stringify(res.data)) : [] | ||||
|           this.tagsList = res.data | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onSwitchChange(id) { | ||||
|       this.instance.post(`/app/wxcp/wxuser/enable?id=${id}`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.getList() | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onTreeChange(e) { | ||||
|       this.departmentName = e.name | ||||
|       this.search.departmentId = e.id || '' | ||||
|       this.search.current = 1 | ||||
|       this.isShowMenu = false | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getList() | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getList() { | ||||
|       this.loading = true | ||||
|       this.instance.post(`/app/wxcp/wxuser/list`, null, { | ||||
|         params: { | ||||
|           ...this.search, | ||||
|           departmentId: this.tabIndex === 0 ? this.search.departmentId : '', | ||||
|           tagIds: this.tabIndex === 1 ? (this.currIndex >= 0 ? this.tagsList[this.currIndex].id : '') : '', | ||||
|           listType: this.tabIndex | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.tableData = res.data.records | ||||
|           this.total = res.data.total | ||||
|  | ||||
|           this.$nextTick(() => { | ||||
|             this.loading = false | ||||
|           }) | ||||
|         } else { | ||||
|           this.loading = false | ||||
|         } | ||||
|       }).catch(() => { | ||||
|         this.loading = false | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     removeAll() { | ||||
|       if (!this.ids) return | ||||
|  | ||||
|       if (this.tabIndex === 1) { | ||||
|         this.removeTags(this.ids) | ||||
|       } else { | ||||
|         this.remove(this.ids) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     handleSelectionChange(e) { | ||||
|       this.ids = e.map(v => v.id).join(',') | ||||
|     }, | ||||
|  | ||||
|     filterNode(value, data) { | ||||
|       if (!value) return true | ||||
|       return data.name.indexOf(value) !== -1 | ||||
|     }, | ||||
|  | ||||
|     changeTab(id, index) { | ||||
|       this.currIndex = index | ||||
|       this.search.areaId = id | ||||
|  | ||||
|       this.$nextTick(() => { | ||||
|         this.getList() | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getTree() { | ||||
|       this.instance.post(`/app/wxcp/wxdepartment/listAll?unitName=${this.unitName}`).then(res => { | ||||
|         if (res.code === 0) { | ||||
|           let parent = res.data.map(v => { | ||||
|             v.label = v.name | ||||
|             v.children = [] | ||||
|  | ||||
|             return v | ||||
|           }).filter(e => !e.parentid)[0] | ||||
|           this.defaultExpanded = [parent.id] | ||||
|           this.defaultChecked = [parent.id] | ||||
|           this.search.departmentId = parent.id | ||||
|           this.departmentName = parent.name | ||||
|           this.addChild(parent, res.data) | ||||
|           this.unitList = [parent] | ||||
|  | ||||
|           this.$nextTick(() => { | ||||
|             this.$refs.tree.setCurrentKey(parent.id) | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     addChild(parent, list) { | ||||
|       for (let i = 0; i < list.length; i++) { | ||||
|         if (list[i].parentid === parent.id) { | ||||
|           list[i].i = parent.children.length | ||||
|           parent.children.push(list[i]) | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       if (parent.children.length) { | ||||
|         parent.children.forEach(v => { | ||||
|           v.len = parent.children.length | ||||
|         }) | ||||
|       } | ||||
|  | ||||
|       if (list.length > 0) { | ||||
|         parent['children'].map(v => this.addChild(v, list)) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     formatList(list) { | ||||
|       var arr = [] | ||||
|       for (let item of list) { | ||||
|         if (item.childrenUser && item.childrenUser.length) { | ||||
|           delete item.childrenUser | ||||
|         } | ||||
|  | ||||
|         if (item.childrenDept && item.childrenDept.length) { | ||||
|           this.formatList(item.childrenDept) | ||||
|         } | ||||
|  | ||||
|         arr.push(item) | ||||
|       } | ||||
|  | ||||
|       return arr | ||||
|     }, | ||||
|  | ||||
|     remove(id) { | ||||
|       this.$confirm('确定删除该数据?').then(() => { | ||||
|         this.instance.post(`/app/wxcp/wxuser/delete?id=${id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success('删除成功!') | ||||
|             this.getList() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     toDetail(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Detail', | ||||
|         params: { | ||||
|           id: id || '', | ||||
|           departmentId: this.search.departmentId || '', | ||||
|           departmentName: this.departmentName || '' | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .List { | ||||
|   .addressBook-table__btns { | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|   } | ||||
|  | ||||
|  | ||||
|   .table-tags { | ||||
|     .el-tag { | ||||
|       margin-right: 8px; | ||||
|       margin-bottom: 8px; | ||||
|  | ||||
|       &:last-child { | ||||
|         margin-right: 0; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .import-wrapper { | ||||
|     & > h2 { | ||||
|       margin-bottom: 8px; | ||||
|       font-size: 16px; | ||||
|       color: #222222; | ||||
|       font-weight: Bold; | ||||
|     } | ||||
|  | ||||
|     .import-wrapper__tips { | ||||
|       line-height: 1; | ||||
|       margin-bottom: 24px; | ||||
|  | ||||
|       div { | ||||
|         display: flex; | ||||
|         margin-bottom: 8px; | ||||
|         color: #222222; | ||||
|         font-size: 14px; | ||||
|  | ||||
|         span { | ||||
|           cursor: pointer; | ||||
|           color: #2266FF; | ||||
|  | ||||
|           &:hover { | ||||
|             opacity: 0.8; | ||||
|             text-decoration: underline; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .import-files { | ||||
|       i { | ||||
|         display: block; | ||||
|         margin-top: 8px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     i { | ||||
|       color: #999999; | ||||
|       font-size: 12px; | ||||
|       font-style: normal; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .tree-container { | ||||
|     position: relative; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     justify-content: space-between; | ||||
|     width: 100%; | ||||
|     height: 100%; | ||||
|  | ||||
|     .tree-name { | ||||
|       padding-right: 30px; | ||||
|     } | ||||
|  | ||||
|     i { | ||||
|       position: absolute; | ||||
|       top: 50%; | ||||
|       right: 8px; | ||||
|       transform: translateY(-50%); | ||||
|       padding-right: 8px; | ||||
|       font-weight: normal; | ||||
|       color: #fff; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .el-tag { | ||||
|     margin-right: 8px; | ||||
|     border: 1px solid #D0D4DC; | ||||
|     background: #F3F4F7; | ||||
|     border-radius: 4px; | ||||
|     font-size: 13px; | ||||
|     color: #222222; | ||||
|  | ||||
|     &:last-child { | ||||
|       margin-right: 0; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .table-avatar { | ||||
|     width: 40px; | ||||
|     height: 40px; | ||||
|     margin-top: 3px; | ||||
|     border-radius: 2px; | ||||
|     border: 1px solid #CCCCCC; | ||||
|   } | ||||
|  | ||||
|   .el-button--mini, .el-button--mini.is-round { | ||||
|     height: 28px; | ||||
|     line-height: 28px; | ||||
|     padding: 0; | ||||
|     font-size: 12px; | ||||
|  | ||||
|     :deep( span ){ | ||||
|       margin-left: 0; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .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; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .addressBook-left { | ||||
|     width: 100%; | ||||
|     height: auto; | ||||
|     background: #FAFAFB; | ||||
|  | ||||
|     .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; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     // ::-webkit-scrollbar { | ||||
|     //   width: 1px; | ||||
|     // } | ||||
|  | ||||
|     .addressBook-left__list--wrapper { | ||||
|       height: calc(100% - 68px); | ||||
|       padding: 8px; | ||||
|     } | ||||
|  | ||||
|     .addressBook-left__list { | ||||
|       width: 100%; | ||||
|       height: 100%; | ||||
|       overflow: auto; | ||||
|  | ||||
|       :deep( .el-tree ){ | ||||
|         width: fit-content; | ||||
|         min-width: 100%; | ||||
|       } | ||||
|  | ||||
|       :deep( .el-scrollbar__wrap ){ | ||||
|         margin-bottom: 0 !important; | ||||
|         overflow-x: hidden; | ||||
|  | ||||
|         .el-scrollbar__view { | ||||
|           width: fit-content; | ||||
|           min-width: 100%; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .addressBook-left__tags--item { | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         justify-content: space-between; | ||||
|         height: 40px; | ||||
|         padding: 0 8px 0 16px; | ||||
|         cursor: pointer; | ||||
|         color: #222222; | ||||
|  | ||||
|         &.addressBook-left__tags--item-active, &:hover { | ||||
|           background: #E8EFFF; | ||||
|           color: #2266FF; | ||||
|  | ||||
|           i, span { | ||||
|             color: #2266FF; | ||||
|           } | ||||
|         } | ||||
|  | ||||
|         span { | ||||
|           font-size: 14px; | ||||
|         } | ||||
|  | ||||
|         i { | ||||
|           cursor: pointer; | ||||
|           color: #8e9ebf; | ||||
|           font-size: 16px; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       span { | ||||
|         color: #222222; | ||||
|         font-size: 14px; | ||||
|       } | ||||
|  | ||||
|       :deep( .el-tree ){ | ||||
|         background: transparent; | ||||
|  | ||||
|         .el-tree-node__expand-icon.is-leaf { | ||||
|           color: transparent !important; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__content > .el-tree-node__expand-icon { | ||||
|           padding: 4px; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__content { | ||||
|           height: 32px; | ||||
|         } | ||||
|  | ||||
|         .el-tree__empty-text { | ||||
|           color: #222; | ||||
|           font-size: 14px; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__children .el-tree-node__content { | ||||
|           height: 32px; | ||||
|         } | ||||
|  | ||||
|         .el-tree-node__content:hover { | ||||
|           background: #E8EFFF; | ||||
|           color: #222222; | ||||
|           border-radius: 2px; | ||||
|         } | ||||
|  | ||||
|         .is-current > .el-tree-node__content { | ||||
|           &:hover { | ||||
|             background: #2266FF; | ||||
|             color: #fff; | ||||
|           } | ||||
|  | ||||
|           background: #2266FF; | ||||
|  | ||||
|           span { | ||||
|             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%; | ||||
|     } | ||||
|   } | ||||
|  | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user