<!-- 通讯录页 --> <template> <div class="page-item page-callrecords"> <div class="page-content" ref="pageTab"> <div class="page-tab"> <el-form :model="selectForm" ref="selectForm" label-width="80px" class="form"> <el-form-item label="姓名：" class="form-item"> <el-input v-model="selectForm.name" placeholder="请输入姓名"></el-input> </el-form-item> <el-form-item label="电话：" class="form-item"> <el-input v-model="selectForm.phone" placeholder="请输入电话1或电话2"></el-input> </el-form-item> <!-- <el-form-item label="分类" class="form-item"> <el-select v-model="form.classify" placeholder="选择" class="form-item"> <el-option label="分类一" value="shanghai"></el-option> <el-option label="分类二" value="beijing"></el-option> </el-select> </el-form-item> --> <el-form-item> <el-button type="primary" icon="el-icon-search" class="form-btn" @click="onSelect()">搜索</el-button> </el-form-item> <el-button type="primary" icon="el-icon-plus" class="form-btn" @click="onAddRow()">添加</el-button> </el-form> <!-- 表格试视图 v-if="cutLayout"--> <el-table :data="tableDataList" style="width: 100%;" :max-height="tabHeight" border :header-cell-style="{ background: ‘#00abbe‘, color: ‘#fff‘ }" > <!-- <el-table-column type="selection" width="40"></el-table-column> --> <el-table-column prop="id" label="id" width="50" align="center"></el-table-column> <!-- <el-table-column style="color: #828282" align="center" prop="classify" label="分类"></el-table-column> --> <el-table-column align="center" prop="name" label="姓名"></el-table-column> <el-table-column align="center" prop="phone1" min-width="170" label="电话1"> </el-table-column> <el-table-column align="center" prop="phone2" min-width="170" label="电话2"> </el-table-column> <el-table-column align="center" prop="address" width="226" min-width="170" label="地址"> </el-table-column> <el-table-column align="center" prop="remark" label="备注"></el-table-column> <el-table-column align="center" label="操作" width="190"> <template slot-scope="scope"> <!-- size="small" --> <el-button size="mini" class="operation-btn" round @click="handleEdit(scope.$index, scope.row)" >编辑</el-button> <el-button size="mini" class="operation-btn operation-btn-delete" round type="danger" @click="handleDelete(scope.$index, scope.row )" >删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="5" layout="prev, pager, next, sizes, total, jumper" :total="total" ></el-pagination> </div> </div> <!-- 新增 编辑 窗口 --> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="change-pwd" style="width:1300px;" > <table> <tr> <td width="100px;"> </td> <td> <el-form :model="dialogForm" ref="dialogForm"> <el-form-item label="姓名：" class="form-item"> <el-input v-model="dialogForm.name" placeholder="请输入姓名"></el-input> </el-form-item> <el-form-item label="电话1" class="form-item"> <el-input v-model="dialogForm.phone1" placeholder="请输入电话1"></el-input> </el-form-item> <el-form-item label="电话2" class="form-item"> <el-input v-model="dialogForm.phone2" placeholder="请输入电话2"></el-input> </el-form-item> <el-form-item label="地址" class="form-item"> <el-input v-model="dialogForm.address" placeholder="请输入地址"></el-input> </el-form-item> <el-form-item label="备注" class="form-item"> <el-input v-model="dialogForm.remark" placeholder="请输入备注"></el-input> </el-form-item> </el-form> <div> <el-button @click="dialogCancel()">取消</el-button> <el-button type="primary" v-on:click="dialogSave()" :loading="addLoading" >保存</el-button> </div> </td> </tr> </table> </el-dialog> </div> </template> <script> //import { mapState } from ‘vuex‘ var _index; //定义一个全局变量，以获取行数据的行号 export default { name: ‘‘, components: {}, props: {}, data() { return { dialogTitle:‘‘,//对话框标题 dialogVisible: false,//是否显示新增窗口 dialogForm: [],//对话框中的form 新增和编辑 pageCurrentNum:‘‘,//当前页码 addLoading: false, selectForm: { //查询条件的form name: ‘‘, phone: ‘‘, classify: ‘‘ }, tableData: [ { id: ‘100‘, classify: ‘分类一‘, name: ‘刘加料‘, phone1: ‘1381111111‘, phone2: ‘12877777‘, address: ‘中国‘, remark: ‘备注2‘, operation: ‘‘ }, { id: ‘101‘, classify: ‘分类二‘, name: ‘王国为‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘102‘, classify: ‘分类一‘, name: ‘刘辚中‘, phone1: ‘1392274422‘, phone2: ‘12887777788‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘103‘, classify: ‘分类二‘, name: ‘刘珍从‘, phone1: ‘13922456562‘, phone2: ‘12883534888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ }, { id: ‘104‘, classify: ‘分类二‘, name: ‘李国为‘, phone1: ‘1392234222‘, phone2: ‘1282348888‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘105‘, classify: ‘分类一‘, name: ‘王五中‘, phone1: ‘1392226786722‘, phone2: ‘109834588‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘106‘, classify: ‘分类二‘, name: ‘贺炜洁‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ }, { id: ‘107‘, classify: ‘分类一‘, name: ‘刘加料‘, phone1: ‘1381111111‘, phone2: ‘12877777‘, address: ‘中国‘, remark: ‘备注2‘, operation: ‘‘ }, { id: ‘108‘, classify: ‘分类二‘, name: ‘王标准‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘109‘, classify: ‘分类一‘, name: ‘刘宵厅‘, phone1: ‘1392112422‘, phone2: ‘1288327788‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘110‘, classify: ‘分类二‘, name: ‘刘材料‘, phone1: ‘139786456562‘, phone2: ‘122344888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ }, { id: ‘111‘, classify: ‘分类二‘, name: ‘李杰杰‘, phone1: ‘139223422‘, phone2: ‘128234823288‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘112‘, classify: ‘分类一‘, name: ‘王为要‘, phone1: ‘1392222346722‘, phone2: ‘102334588‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘113‘, classify: ‘分类二‘, name: ‘贺炒菜‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ }, { id: ‘114‘, classify: ‘分类一‘, name: ‘刘加料‘, phone1: ‘1381111111‘, phone2: ‘12877777‘, address: ‘中国‘, remark: ‘备注2‘, operation: ‘‘ }, { id: ‘115‘, classify: ‘分类二‘, name: ‘王国为‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘116‘, classify: ‘分类一‘, name: ‘王口水‘, phone1: ‘1392274422‘, phone2: ‘12887777788‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘117‘, classify: ‘分类二‘, name: ‘刘中断‘, phone1: ‘13922456562‘, phone2: ‘12883534888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ }, { id: ‘118‘, classify: ‘分类二‘, name: ‘张灯具‘, phone1: ‘1392234222‘, phone2: ‘1282348888‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘119‘, classify: ‘分类一‘, name: ‘张材要‘, phone1: ‘1392226786722‘, phone2: ‘109834588‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘120‘, classify: ‘分类二‘, name: ‘王可数‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ }, { id: ‘121‘, classify: ‘分类一‘, name: ‘李尖凿‘, phone1: ‘1381111111‘, phone2: ‘12877777‘, address: ‘中国‘, remark: ‘备注2‘, operation: ‘‘ }, { id: ‘122‘, classify: ‘分类二‘, name: ‘王顶替‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘123‘, classify: ‘分类一‘, name: ‘赵酒店‘, phone1: ‘1392112422‘, phone2: ‘1288327788‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘124‘, classify: ‘分类二‘, name: ‘王灯光‘, phone1: ‘139786456562‘, phone2: ‘122344888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ }, { id: ‘125‘, classify: ‘分类二‘, name: ‘刘耧杰‘, phone1: ‘139223422‘, phone2: ‘128234823288‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘126‘, classify: ‘分类一‘, name: ‘李安‘, phone1: ‘1392222346722‘, phone2: ‘102334588‘, address: ‘中国‘, remark: ‘备注1‘, operation: ‘‘ }, { id: ‘127‘, classify: ‘分类二‘, name: ‘王为菜‘, phone1: ‘1392222222‘, phone2: ‘12888888888‘, address: ‘中国‘, remark: ‘备注3‘, operation: ‘‘ } ], tableDataList: [], tableDataSelect: [], currentPage4: 1, tabHeight: 1080, total: 20, pagetRowNum: 5,//每页显示的行数 //cutLayout: false, } }, computed: { //...mapState([‘tableDataAllPage‘]) }, watch: {}, beforeCreate() {}, beforeUpdate() { this.tabHeight = this.$refs.pageTab.offsetHeight - 137 }, beforeMount() {}, mounted() { let _this = this window.onresize = function() { if (_this.$refs.pageTab) { _this.tabHeight = _this.$refs.pageTab.offsetHeight - 137 } } this.ListLoadData();//初始化列表 }, methods: { handleSizeChange(val) { //每页显示条数 变化事件 console.log(`每页的行数 ${val} 条`) this.pagetRowNum= val; this.ListLoadData();//改变每页的行数则 重新计算列表 }, handleCurrentChange(val) { //页码 变化事件 console.log(`当前页: ${val-1}`) this.tableDataList = this.tableDataAllPage[val-1].list; this.pageCurrentNum=val;//当前页码 }, //初始化 列表数据 ListLoadData(){ //-------获取 列表数据 -------Sina API--Axios跨域 Get请求-------------------------------- var dataLength=0; dataLength=this.tableData.length; console.log( "总行数: "+this.tableData.length + " " +dataLength ); /* 分页算法 */ this.tableDataAllPage=[]; this.total=dataLength;//总行数 var pageCount=Math.ceil(dataLength/this.pagetRowNum);//页数=总行数/每页的行数 console.log( "页数: "+pageCount ); //遍历所有的分组 var i=0; var y=0 for(var x=1;x<=pageCount;x++){ var tabData={"list":[]}; //console.log("第 "+x+"页---------------------------------------------"); for(y;y<dataLength;y++){//for(var y in response.data){ //console.log("插入数据: "+ y ); var objList={"id":this.tableData[y].id,"classify":this.tableData[y].classify ,"name":this.tableData[y].name ,"phone1":this.tableData[y].phone1,"phone2":this.tableData[y].phone2 ,"address":this.tableData[y].address,"remark":this.tableData[y].remark ,"operation":this.tableData[y].operation }; tabData.list.push(objList); //console.log("插入数据: "+response.data[y].userID+" "+response.data[y].userName+" "+response.data[y].userExten+""); i++; if(i>=x*this.pagetRowNum){//当数页码 * 每页的行数 //console.log("当数页码: "+ i +" " + x*this.pagetRowNum ); y++;//加一 break; } } this.tableDataAllPage.push(tabData); } this.tableDataList = this.tableDataAllPage[0].list; //-------------------------------------------------------------- }, //查询 onSelect() { console.log(‘onSelect 查询 ‘ + this.selectForm.name +" " + this.selectForm.phone); var url = ‘http://192.168.1.75:5011/httpCli?action=query‘+"&name="+this.selectForm.name+"&phone="+this.selectForm.phone ; this.$http.get(url).then((data) => { console.log(data) //this.tableform = data.body; }).catch((err) => { console.log(err) }) /* this.tableDataSelect=this.tableData; var i=0;var len=this.tableData.length; for(i;i<len;i++){ if(this.selectForm.name!=""){ if(this.selectForm.name!=this.tableData[i].name){ console.log(‘onSelect name去除 ‘ + i +" " + this.tableData[i].name); this.tableData.splice(i, 1); } } if(this.selectForm.phone!=""){ if(this.selectForm.phone!=this.tableData[i].phone1){ this.tableData.splice(i, 1); console.log(‘onSelect phone1去除 ‘ + i +" " + this.tableData[i].phone1); } } }*/ }, //新增数据 onAddRow() { _index=-1;//-1为新增 this.dialogTitle=‘新增‘; this.dialogVisible = true; this.dialogForm = { name: ‘‘, phone1: ‘‘, phone2: ‘‘, address: ‘‘, remark: ‘‘ } }, //编辑数据-------------------------------------------------------- handleEdit(index, row) { console.log("handleEdit index:"+index+" name:"+row.name); this.dialogTitle=‘编辑‘; this.dialogVisible = true; this.dialogForm = Object.assign({}, row); _index = index;//用于判断是新增还是编辑 //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中 }, //取消按扭 dialogCancel() { this.dialogVisible = false;//对话框 不显示 }, //对话框 保存按钮 dialogSave(){ if(_index==-1){ this.sumbitAddRow(); //保存 新增 }else{ this.sumbitEditRow();//保存 编辑 } }, //将新增的数据添加到表格中 sumbitAddRow() { console.log( "name: "+ this.dialogForm.name); var new_id=this.tableData[this.tableData.length-1].id; new_id= parseInt(new_id) + 1;//id 自动加 1 console.log( "new_id "+ new_id); this.tableform = this.tableform || [] this.tableData.push({ id: new_id, name: this.dialogForm.name, phone1: this.dialogForm.phone1, phone2: this.dialogForm.phone2, address: this.dialogForm.address, remark: this.dialogForm.remark, }) //storage.set(‘url‘, this.url); this.ListLoadData();//重新加载 数据 this.handleCurrentChange(this.tableDataAllPage.length);//页码变化事件 跳到最后一页 this.dialogVisible = false;//对话框 不显示 }, //保存编辑 sumbitEditRow() { console.log("sumbitEditRow _index:"+_index+" name:"+this.dialogForm.name); this.dialogVisible = false;//对话框 不显示 //更新当前列表的行内容 var editData_index = _index;//当前页的行号 this.tableDataList[editData_index].name = this.dialogForm.name; this.tableDataList[editData_index].phone1 = this.dialogForm.phone1; this.tableDataList[editData_index].phone2 = this.dialogForm.phone2; this.tableDataList[editData_index].address = this.dialogForm.address; this.tableDataList[editData_index].remark = this.dialogForm.remark; //同步更新 原始数据 var edit_id=this.tableDataList[editData_index].id; var i=0; for(i;i<this.tableData.length;i++){ //console.log("遍历数据: "+ this.tableData[i].name ); if(this.tableData[i].id==edit_id){ this.tableData[i].name = this.dialogForm.name; this.tableData[i].phone1 = this.dialogForm.phone1; this.tableData[i].phone2 = this.dialogForm.phone2; this.tableData[i].address = this.dialogForm.address; this.tableData[i].remark = this.dialogForm.remark; } } // }, //删除数据------------------------------------------------- handleDelete(index, row) { console.log("handleDelete index:"+index+" name:"+row.name); this.$confirm(‘确认要删除该数据, 是否继续?‘, ‘提示‘, { confirmButtonText: ‘确定‘, cancelButtonText: ‘取消‘, type: ‘warning‘ }).then(() => { //删除 //第一步 取这个 id 所在的 行号 var i=0;var del_index=-1; for(i;i<this.tableData.length;i++){ //console.log("遍历数据: "+ this.tableData[i].name ); if(this.tableData[i].id==row.id){ del_index=i; } } console.log( "删除前 总行数: "+this.tableData.length + " " ); this.tableData.splice(del_index, 1); console.log( "删除后 总行数: "+this.tableData.length + " " ); this.ListLoadData();//重新加载 数据 //console.log( "当前页: "+this.pageCurrentNum + " " ); this.handleCurrentChange(this.pageCurrentNum);//跳转至 当前页 this.$message({ type: ‘success‘, message: ‘删除成功!‘, }); }).catch((err) => { if(err!=‘cancel‘){ this.$message({ type: ‘error‘, message: ‘删除失败! ‘+ err }); } }) }, //--------------------------------------------------------------- } } </script> <style lang="scss"> @import ‘./AddressGridView.scss‘; </style>