164 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			164 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <section class="AppInterview">
 | |
|     <ai-list v-if="!isDetail">
 | |
|       <template #title>
 | |
|         <ai-title title="事务记录" isShowBottomBorder/>
 | |
|       </template>
 | |
|       <template #content>
 | |
|         <ai-search-bar>
 | |
|           <template #left>
 | |
|             <ai-search label="创建日期">
 | |
|               <el-date-picker
 | |
|                   size="small"
 | |
|                   v-model="search.startTime"
 | |
|                   placeholder="开始日期"
 | |
|                   @change="page.current = 1, getTableData()"
 | |
|                   value-format="yyyy-MM-dd"/>
 | |
|               <el-date-picker
 | |
|                   size="small"
 | |
|                   v-model="search.endTime"
 | |
|                   placeholder="结束日期"
 | |
|                   @change="page.current = 1, getTableData()"
 | |
|                   value-format="yyyy-MM-dd"/>
 | |
|             </ai-search>
 | |
|           </template>
 | |
|           <template #right>
 | |
|             <el-input
 | |
|                 suffix-icon="iconfont iconSearch"
 | |
|                 v-model="search.title"
 | |
|                 placeholder="标题"
 | |
|                 clearable
 | |
|                 v-throttle="() => {page.current = 1, getTableData()}"
 | |
|                 @clear="page.current = 1, search.title = '', getTableData()"
 | |
|                 size="small"/>
 | |
|           </template>
 | |
|         </ai-search-bar>
 | |
|         <ai-table
 | |
|             :tableData="tableData"
 | |
|             :colConfigs="colConfigs"
 | |
|             :total="page.total"
 | |
|             :current.sync="page.current"
 | |
|             :size.sync="page.size"
 | |
|             @getList="getTableData">
 | |
|           <el-table-column label="操作" align="center" slot="options" fixed="right" width="160">
 | |
|             <template slot-scope="{row}">
 | |
|               <div class="table-options">
 | |
|                 <el-button type="text" title="详情" @click="handleShow(row.id)">详情</el-button>
 | |
|                 <el-button type="text" title="删除" @click="handleDelete(row.id)"
 | |
|                            v-if="permissions('app_appinterview_del')">删除
 | |
|                 </el-button>
 | |
|               </div>
 | |
|             </template>
 | |
|           </el-table-column>
 | |
|         </ai-table>
 | |
|       </template>
 | |
|     </ai-list>
 | |
|     <interview-detail v-else/>
 | |
|   </section>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import InterviewDetail from "./interviewDetail";
 | |
| import {mapState} from "vuex";
 | |
| 
 | |
| export default {
 | |
|   name: "AppInterview",
 | |
|   label: "调查走访",
 | |
|   components: {InterviewDetail},
 | |
|   provide() {
 | |
|     return {
 | |
|       interview: this
 | |
|     }
 | |
|   },
 | |
|   props: {
 | |
|     instance: Function,
 | |
|     dict: Object,
 | |
|     permissions: Function
 | |
|   },
 | |
|   computed: {
 | |
|     ...mapState(['user']),
 | |
|     colConfigs() {
 | |
|       return [
 | |
|         {label: "标题", prop: "title"},
 | |
|         {label: "时间", prop: "createTime"},
 | |
|         {label: "操作人", prop: "createUserId", openType: 'userName'},
 | |
|         {slot: "options"}
 | |
|       ]
 | |
|     },
 | |
|     isDetail() {
 | |
|       return !!this.$route.query.id
 | |
|     }
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       search: {startTime: null, endTime: null, title: ""},
 | |
|       page: {current: 1, size: 10, total: 0},
 | |
|       tableData: []
 | |
|     }
 | |
|   },
 | |
|   created() {
 | |
|     if (this.isDetail) {
 | |
|     } else this.getTableData()
 | |
|   },
 | |
|   methods: {
 | |
|     getTableData() {
 | |
|       this.instance.post("/app/appinterview/list", null, {
 | |
|         params: {...this.search, ...this.page}
 | |
|       }).then(res => {
 | |
|         if (res?.data) {
 | |
|           this.tableData = res.data.records
 | |
|           this.page.total = res.data.total
 | |
|           this.$initWxOpenData()
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     handleShow(id) {
 | |
|       if (id) {
 | |
|         this.$router.push({query: {id}})
 | |
|       } else this.$message.error('该条数据异常,无法打开!')
 | |
|     },
 | |
|     handleDelete(ids) {
 | |
|       this.$confirm("是否要删除该调查走访?").then(() => {
 | |
|         this.instance.post("/app/appinterview/delete", null, {params: {ids}}).then(res => {
 | |
|           if (res?.code == 0) {
 | |
|             this.$message.success("删除成功!")
 | |
|             this.getTableData()
 | |
|           }
 | |
|         })
 | |
|       }).catch(() => 0)
 | |
|     },
 | |
|     back() {
 | |
|       this.$router.push({query: null})
 | |
|       this.getTableData()
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .AppInterview {
 | |
|   height: 100%;
 | |
| 
 | |
|   ::v-deep .dateRange {
 | |
|     .dateLabel {
 | |
|       height: 32px;
 | |
|       border: 1px solid #D0D4DC;
 | |
|       line-height: 32px;
 | |
|       padding: 0 8px;
 | |
|       background: #F5F5F5;
 | |
|     }
 | |
| 
 | |
|     .el-input__inner {
 | |
|       border-radius: 0;
 | |
|       transform: translateX(-1px);
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   ::v-deep .ai-list__content--right-wrapper {
 | |
|     display: flex;
 | |
|     flex-direction: column;
 | |
|     gap: 10px;
 | |
|   }
 | |
| }
 | |
| </style>
 |