<template> <app-container> <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput" > <!--一般查询条件--> <search-item> <el-input v-model.trim="listQuery.keywords" size="small" placeholder="访客姓名" clearable /> </search-item> <search-item> <el-select v-model="listQuery.visitReason" size="small" placeholder="访问目的" clearable> <el-option v-for="item in reasonList" :key="item.value" :label="item.name" :value="item.value"/> </el-select> </search-item> <search-item> <el-select v-model="listQuery.area" size="small" placeholder="访问区域" clearable> <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value"/> </el-select> </search-item> <search-item> <el-date-picker v-model="timeRange" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="起始日期" end-placeholder="终止日期" size="small"/> </search-item> </search-area> <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage" @selectionChange="handleSelectionChange"> <template slot="btns"> <el-button size="small" class="edit_btn" icon="el-icon-edit" @click="add()"> 添加 </el-button> <el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()"> 删除 </el-button> </template> <template slot="columns"> <el-table-column label="操作" align="center" width="120"> <template slot-scope="scope"> <el-button type="text" size="small" @click.stop="detail(scope.row)"> 详情 </el-button> <el-button type="text" size="small" @click.stop="edit(scope.row)"> 编辑 </el-button> <el-button type="text" size="small" @click.stop="del(scope.row)"> 删除 </el-button> </template> </el-table-column> </template> </normal-table> <edit-application v-show="dialogFormVisible" ref="editApplication" @watchChild="fetchData" /> </app-container> </template> <script> import NormalTable from '@/components/NormalTable' import AppContainer from '@/components/layout/AppContainer' import SearchArea from '@/components/SearchArea/SearchArea' import SearchItem from '@/components/SearchArea/SearchItem' import { getApplicationListPage, delApplication, batchDelApplication } from '@/api/device' import { getDictByCode } from '@/api/system/dict' import EditApplication from "./editApplication"; export default { name: 'ApplicationList', components: {EditApplication, SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { listQuery: { keywords: '', visitReason: '', area: '', startTime:'', endTime:'', offset: 1, limit: 20 }, // 筛选条件 columns: [ { text: '访客姓名', value: 'visitName', align: 'center', width: 100 }, { text: '访客身份证号', value: 'IDcardm', align: 'center' }, { text: '访客联系方式', value: 'visitPhone', align: 'center' }, { text: '访问目的', value: 'visitReasonName', align: 'center', width: 100 }, { text: '访问区域', value: 'areaName', align: 'center' }, { text: '进入时间', value: 'inTime', align: 'center' }, { text: '离开时间', value: 'outTime', align: 'center' }, { text: '申请者工号', value: 'staffCode', align: 'center' }, { text: '申请者姓名', value: 'staffName', align: 'center', width: 100 }, { text: '申请者联系方式', value: 'staffPhone', align: 'center' }, { text: '备注', value: 'remarks', align: 'center' }, { text: '状态', value: 'statusName', align: 'center', width: 80 } ], // 显示列 dialogFormVisible: false, // 是否显示编辑框 timeRange: [], // 时间范围 multipleSelection: [], // 多选选中项 list: [], // 列表数据 reasonList: [], areaList: [], total: 0, // 数据总数 listLoading: true, // 列表加载动画 tableOption: { head: { show: true, // 是否需要标题栏, text: '数据列表' // 标题名称 }, options: { needIndex: true // 是否需要序号列 }, toolsOption: { selectColumns: false, // 是否需要筛选列 refresh: false, // 是否需要刷新按钮 needCheckBox: true } } // 表格属性 } }, watch: { timeRange(val) { if (val && val.length > 0) { this.listQuery.startTime = val[0] this.listQuery.endTime = val[1] } else { this.listQuery.startTime = '' this.listQuery.endTime = '' } } }, created() { this.fetchOptions() this.fetchData() }, methods: { fetchOptions() { getDictByCode('visitReason').then(response => { if (response.code === 200) { this.reasonList = response.data } }) getDictByCode('areaType').then(response => { if (response.code === 200) { this.areaList = response.data } }) }, encrypIdCardNo(idCard) { if (idCard.length > 6) { return idCard.substr(0, 6) + '********' + idCard.substr(14) } else if (idCard) { return idCard } else { return '' } }, fetchData() { this.listLoading = true // getApplicationListPage(this.listQuery).then(response => { // if (response.code === 200) { // this.list = response.data.rows.map(item => { // item.IDcardm = this.encrypIdCardNo(item.IDcard) // item.statusName = item.status === '1'? '通过': '拒绝' // return item // }) // this.total = parseInt(response.data.total) // this.listLoading = false // } // }) const that = this setTimeout(function() { that.list = [ {id:'', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area:'0', areaName:'一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1',remarks:''}, {id:'', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area:'0', areaName:'一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1',remarks:''}, {id:'', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area:'0', areaName:'一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1',remarks:''}, {id:'', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area:'0', areaName:'一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1',remarks:''}, {id:'', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area:'0', areaName:'一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1',remarks:''}, {id:'', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area:'0', areaName:'一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1',remarks:''}, {id:'', visitName: '李思思', IDcard: '220100000000004124', visitPhone: '13268643243', inTime: '2022-05-06 19:12:00', outTime: '2022-05-06 19:36:00', enterWay: '身份证', visitReason: '0', visitReasonName: '商务会议', area:'0', areaName:'一期主楼', staffCode: 'gh004356', staffName: '张三', staffPhone: '1320067636', status: '1',remarks:''}, ] that.list = that.list.map(item => { item.IDcardm = that.encrypIdCardNo(item.IDcard) item.statusName = item.status === '1'? '通过': '拒绝' return item }) that.total = 200 that.listLoading = false }, 100) }, // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 changePage(val) { if (val && val.size) { this.listQuery.limit = val.size } if (val && val.page) { this.listQuery.offset = val.page } this.fetchData() }, batchDel(){ const ids = this.multipleSelection.map(item => item.id) if(ids.length === 0) { this.$message.warning('请至少选择一行') return } this.$confirm( '确定要删除所选数据吗?', '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { batchDelApplication(ids).then(response => { if (response.code === 200) { this.$message.success('删除成功') this.fetchData() } }) }) }, // 打开详情对话框 detail(row) { this.$refs.editApplication.initDialog('detail', row) }, // 新增区域 add() { this.dialogFormVisible = true this.$refs.editApplication.initDialog('create') }, // 编辑区域信息 edit(row) { this.dialogFormVisible = true this.$refs.editApplication.initDialog('update', row) }, del(row) { this.$confirm( '确定要删除该条数据吗?', '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { delApplication(row.id).then(response => { if (response.code === 200) { this.$message.success('删除成功') this.fetchData() } }) }) }, handleSelectionChange(val) { this.multipleSelection = val }, clearInput() { this.listQuery = { keywords: '', visitReason: '', area: '', startTime:'', endTime:'', offset: 1, limit: 20 } this.timeRange = [] this.fetchData() } } } </script> <style scoped> </style>