群众留言界面完成
This commit is contained in:
		
							
								
								
									
										35
									
								
								project/xiushan/apps/AppMassMessage/AppMassMessage.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										35
									
								
								project/xiushan/apps/AppMassMessage/AppMassMessage.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,35 @@ | ||||
| <template> | ||||
|   <section class="AppMassMessage"> | ||||
|     <component :is="currentComponent" :instance="instance" :dict="dict" :permissions="permissions"/> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|  | ||||
| import PumDetail from "./mmDetail"; | ||||
| import PumList from "./mmList"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppMassMessage", | ||||
|   components: {PumList, PumDetail}, | ||||
|   label: "群众留言", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   computed: { | ||||
|     currentComponent() { | ||||
|       return !!this.$route.query.id ? PumDetail : PumList | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AppMassMessage { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										110
									
								
								project/xiushan/apps/AppMassMessage/mmDetail.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										110
									
								
								project/xiushan/apps/AppMassMessage/mmDetail.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,110 @@ | ||||
| <template> | ||||
|   <section class="mmDetail"> | ||||
|     <ai-detail> | ||||
|       <ai-title slot="title" title="留言详情" isShowBottomBorder isShowBack @onBackClick="$router.push({query:{}})"> | ||||
|         <template #rightBtn> | ||||
|           <el-button type="primary">回复留言</el-button> | ||||
|           <el-button>关闭留言</el-button> | ||||
|         </template> | ||||
|       </ai-title> | ||||
|       <template #content> | ||||
|         <el-form size="small"> | ||||
|           <ai-card class="header"> | ||||
|             <template #title> | ||||
|               <b v-text="detail.title||'标题'"/> | ||||
|               <el-row type="flex"> | ||||
|                 <el-form-item label="留言编号">{{ detail.createTime || "-" }}</el-form-item> | ||||
|                 <el-form-item label="留言时间">{{ detail.createTime || "-" }}</el-form-item> | ||||
|                 <el-form-item label="留言人">{{ detail.createUserName || "-" }}</el-form-item> | ||||
|               </el-row> | ||||
|               <ai-icon type="svg" :icon="statusImages[detail.status||0]"/> | ||||
|             </template> | ||||
|             <template #content> | ||||
|               <div v-html="detail.content"/> | ||||
|             </template> | ||||
|           </ai-card> | ||||
|           <ai-card title="沟通记录"> | ||||
|             <template #content> | ||||
|  | ||||
|             </template> | ||||
|           </ai-card> | ||||
|         </el-form> | ||||
|       </template> | ||||
|     </ai-detail> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "mmDetail", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   computed: { | ||||
|     statusImages() { | ||||
|       return { | ||||
|         0: "iconno_response", | ||||
|         1: "iconreplied", | ||||
|         2: "iconfinished" | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       detail: {}, | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     getDetail() { | ||||
|       let {id} = this.$route.query | ||||
|       this.instance.post("/appportaluserenterprise/queryDetailById", null, { | ||||
|         params: {id} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.detail = res.data | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.getDetail() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .mmDetail { | ||||
|   height: 100%; | ||||
|  | ||||
|   ::v-deep.header { | ||||
|     position: relative; | ||||
|  | ||||
|     .el-form-item { | ||||
|       width: 33%; | ||||
|     } | ||||
|  | ||||
|     .aibar { | ||||
|       height: auto; | ||||
|  | ||||
|       .aibar-left { | ||||
|         width: 100%; | ||||
|         font-weight: normal; | ||||
|       } | ||||
|  | ||||
|       b { | ||||
|         line-height: 56px; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .AiIcon { | ||||
|       position: absolute; | ||||
|       right: 0; | ||||
|       bottom: 0; | ||||
|       width: 80px; | ||||
|       height: 80px; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										96
									
								
								project/xiushan/apps/AppMassMessage/mmList.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										96
									
								
								project/xiushan/apps/AppMassMessage/mmList.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,96 @@ | ||||
| <template> | ||||
|   <section class="mmList"> | ||||
|     <ai-list> | ||||
|       <ai-title slot="title" title="群众留言" isShowBottomBorder/> | ||||
|       <template #content> | ||||
|         <ai-search-bar> | ||||
|           <template #left> | ||||
|             <ai-select v-model="search.type" placeholder="留言状态"/> | ||||
|             <ai-select v-model="search.type" placeholder="留言类型"/> | ||||
|           </template> | ||||
|           <template #right> | ||||
|             <el-input size="small" placeholder="搜索企业名称、法人姓名、登录账号" v-model="search.enterpriseName" clearable | ||||
|                       @change="page.current=1,getTableData()"/> | ||||
|           </template> | ||||
|         </ai-search-bar> | ||||
|         <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size" | ||||
|                   @getList="getTableData" :col-configs="colConfigs" :dict="dict"> | ||||
|           <el-table-column slot="options" label="操作" fixed="right" align="center"> | ||||
|             <template slot-scope="{row}"> | ||||
|               <el-button v-if="row.status==0" type="text" @click="handleEnable(row)">公示</el-button> | ||||
|               <el-button v-else-if="row.status==1" type="text" @click="handleEnable(row)">取消公示</el-button> | ||||
|               <el-button type="text" @click="showDetail(row.id)">详情</el-button> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|         </ai-table> | ||||
|       </template> | ||||
|     </ai-list> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import {mapState} from "vuex"; | ||||
|  | ||||
| export default { | ||||
|   name: "mmList", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   computed: { | ||||
|     ...mapState(['user']) | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       search: {name: ""}, | ||||
|       page: {current: 1, size: 10, total: 0}, | ||||
|       tableData: [], | ||||
|       colConfigs: [ | ||||
|         {label: "标题", prop: "enterpriseName"}, | ||||
|         {label: "类型", prop: "enterpriseType", dict: "enterpriseType"}, | ||||
|         {label: "内容", prop: "content"}, | ||||
|         {label: "留言人", prop: "createUserName"}, | ||||
|         {label: "留言提交时间", prop: "createTime"}, | ||||
|         {label: "最后回复时间", prop: "loginAccount"}, | ||||
|         {slot: "options"} | ||||
|       ] | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     getTableData() { | ||||
|       this.instance.post("/appportaluserenterprise/list", null, { | ||||
|         params: {...this.page, ...this.search, status: 1} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.tableData = res.data?.records | ||||
|           this.page.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     showDetail(id) { | ||||
|       this.$router.push({query: {id}}) | ||||
|     }, | ||||
|     handleEnable(row) { | ||||
|       let status = (Number(row.status) + 1) % 2 | ||||
|       this.$confirm(`是否要${this.dict.getLabel('portalUserStatus', status)}留言?`).then(() => { | ||||
|         this.instance.post("/appportaluser/addOrUpdate", {...row, status}).then(res => { | ||||
|           if (res?.code == 0) { | ||||
|             this.$message.success(this.dict.getLabel('portalUserStatus', status) + "成功!") | ||||
|             this.getTableData() | ||||
|           } | ||||
|         }) | ||||
|       }).catch(() => 0) | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.getTableData() | ||||
|     this.search.areaId = this.user.info.areaId | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .mmList { | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user