Vue分页插件的前后端配置与使用(2)

<!-- 组织机构管理 --> <!-- 新页面 --> <template> <div> <!--查询部分 --> <el-form :inline="true" :model="searchKeywords"> <el-form-item label="组织名称"> <el-input type="text" v-model="searchKeywords.name" placeholder="组织名称"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="searchItem(1)">查询</el-button> </el-form-item> </el-form> <br /><br /><br /> <!-- 操作区 --> <div> <el-button type="text" @click="showAddDialog">增加</el-button><label>&nbsp;&nbsp;&nbsp;&nbsp;</label> <el-button type="text" @click="deleteMultipleItems()">删除</el-button><label>&nbsp;&nbsp;&nbsp;&nbsp;</label> <el-button type="text" @click="multipleUpdateAttemptProcess()">修改</el-button> </div> <!-- 显示数据字典的表单 --> <div> <el-table ref="multipleTable" :data="items" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="loading" @row-dblclick="editRow"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="机构名称" sortable></el-table-column> <el-table-column prop="code" label="机构代码" sortable></el-table-column> <el-table-column prop="master" label="负责人"></el-table-column> <el-table-column prop="tel" label="电话"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="status" label="是否启用" sortable :formatter="statusFormat"></el-table-column> <el-table-column prop="operate" label="操作"> <template slot-scope="scope"> <el-button type="text" @click="showAddDialog"></el-button> <el-button type="text" @click="deleteSingleItem(scope.row)"></el-button> <el-button type="text" @click="showEditDialog(scope.row)"></el-button> </template> </el-table-column> </el-table> </div> <!--添加与修改字典弹窗--> <div> <el-form :model="dialogDataValues" :label-position="labelPosition" :rules="rules" ref="itemModify"> <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="isDialogShowed"> <el-form-item label="组织机构名" :label-width="formLabelWidth" prop="name"> <el-input v-model="dialogDataValues.name" placeholder="组织机构名"></el-input> </el-form-item> <el-form-item label="机构代码" :label-width="formLabelWidth" prop="code"> <el-input v-model="dialogDataValues.code" placeholder="机构代码"></el-input> </el-form-item> <el-form-item label="负责人" :label-width="formLabelWidth" prop="master"> <el-input v-model="dialogDataValues.master" placeholder="负责人"></el-input> </el-form-item> <el-form-item label="电话" :label-width="formLabelWidth" prop="tel"> <el-input v-model="dialogDataValues.tel" placeholder="电话"></el-input> </el-form-item> <el-form-item label="地址" :label-width="formLabelWidth" prop="address"> <el-input v-model="dialogDataValues.address" placeholder="地址"></el-input> </el-form-item> <el-form-item label="是否启用" :label-width="formLabelWidth" prop="status"> <el-radio v-model="dialogDataValues.status" :label="1">是</el-radio> <el-radio v-model="dialogDataValues.status" :label="0">否</el-radio> </el-form-item> <span slot="footer"> <el-button size="mini" @click="cancelEdit">取 消</el-button> <el-button size="mini" type="primary" :style="{display: visibleSave}" @click="submitAddForm('itemModify')">保 存</el-button> <el-button size="mini" type="primary" :style="{display: visibleEdit}" @click="submitUpdateForm('itemModify')">修 改</el-button> </span> </el-dialog> </el-form> </div> <div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="currentPageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordNumber"> </el-pagination> </div> </div> </template> <script> import { queryOrganization, addOrganization, updateOrganization, deleteOrganization } from "../../api/systemcenter"; export default { data() { return { // =========================== // 前端属性 // =========================== //默认隐藏编辑按钮 visibleEdit: "none", //默认显示新增按钮 visibleSave: "", // 添加弹窗显示与否 isDialogShowed: false, // 标签宽度 formLabelWidth: "120px", // 在表格中显示的数据 items: [], // 添加弹窗中的数值 dialogDataValues: { id: "", name: "", code: "", master: "", tel: "", address: "", status: "" }, // 修改弹窗数值 form: {}, // 前端校验 @blur 当元素失去焦点时触发blur事件 rules: { name: [{ required: true, message: "组织机构名称必填", trigger: "blur" }], code: [{ required: true, message: "组织机构代码必填", trigger: "blur" }], // tel: [{ required: true, message: "组织机构电话号码必填", trigger: "blur" }], // master: [{ required: true, message: "组织机构负责人必填", trigger: "blur" }], // address: [{ required: true, message: "组织机构地址必填", trigger: "blur" }], status: [{ required: true, message: "状态必选", trigger: "blur" }] }, // 弹窗数据右对齐 labelPosition: "right", // 导入 fileUploadBtnText: "导入", // 通过checkbox进行多选的数据 selectedItems: {}, // 搜索框数据 searchKeywords: {}, //数据总量 recordNumber: 0, //当前页数 currentPage: 1, //当前每页数量： currentPageSize: 10, loading: true }; }, // 页面加载完成后加载数据 mounted: function() { this.loadDataList(); }, methods: { // ========================== // 页面处理 // ========================== editRow(row){ this.showEditDialog(row) }, //参数校验 submitAddForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.addItem(); } else { return false; } }); }, submitUpdateForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.updateItem(); } else { return false; } }); }, //状态值的转化 statusFormat(row, column) { if (row.status === 0) { return "否"; } else if (row.status === 1) { return "是"; } }, // 每一行多选选中时触发该方法 handleSelectionChange(selectedItems) { this.selectedItems = selectedItems; }, // 显示添加数据弹窗 showAddDialog() { this.visibleSave = ""; this.visibleEdit = "none"; this.dialogTitle = "添加组织机构"; this.isDialogShowed = true; this.dialogDataValues.name = ""; this.dialogDataValues.code = ""; this.dialogDataValues.master = ""; this.dialogDataValues.tel = ""; this.dialogDataValues.address = ""; this.dialogDataValues.status = 1; this.dialogDataValues.id = ""; this.dialogDataValues.version = ""; }, // 显示修改数据弹窗 showEditDialog(obj) { this.visibleSave = "none"; this.visibleEdit = ""; this.dialogTitle = "修改组织机构"; this.isDialogShowed = true; this.dialogDataValues.name = obj.name; this.dialogDataValues.code = obj.code; this.dialogDataValues.master = obj.master; this.dialogDataValues.tel = obj.tel; this.dialogDataValues.address = obj.address; this.dialogDataValues.status = obj.status; this.dialogDataValues.id = obj.id; this.dialogDataValues.version = obj.version; }, // 取消弹窗 cancelEdit() { this.isDialogShowed = false; this.dialogDataValues.name = ""; this.dialogDataValues.code = ""; this.dialogDataValues.master = ""; this.dialogDataValues.tel = ""; this.dialogDataValues.address = ""; this.dialogDataValues.status = ""; this.dialogDataValues.id = ""; this.dialogDataValues.version = ""; }, // 多选修改处理 multipleUpdateAttemptProcess() { if (this.selectedItems.length == 1) { this.showEditDialog(this.selectedItems[0]); } else if (this.selectedItems.length == null || this.selectedItems.length == 0) { this.$message({type: "info", message: "未选中数据", duration: 1000}); } else { this.$message({type: "error", message: "无法一次修改多个数据", duration: 1000}); } }, // ========================== // 数据处理 // ========================== queryData(queryCondition) { var _this = this; _this.loading = true; queryOrganization(queryCondition).then(resp => { if (resp && resp.responseHead.code === "0") { _this.recordNumber = resp.body.total; _this.items = resp.body.list; _this.loading = false; } }).catch(() => { _this.$message({showClose: true, message: "网络异常", type: 'error'}) _this.loading = false; }); }, // 加载数据方法 loadDataList() { this.queryData({ pageNum: this.currentPage, pageSize: this.currentPageSize }); }, // 搜索功能 searchItem(currentPage) { this.queryData({ pageNum: currentPage, pageSize: this.currentPageSize, name: this.searchKeywords.name }); }, handleSizeChange: function(currentPageSize) { this.currentPageSize = currentPageSize; this.currentPage = 1; this.searchItem(1); }, handleCurrentChange: function(currentPage) { this.currentPage = currentPage; this.searchItem(currentPage); }, // 增加数据 addItem() { addOrganization({ name: this.dialogDataValues.name, code: this.dialogDataValues.code, master: this.dialogDataValues.master, tel: this.dialogDataValues.tel, address: this.dialogDataValues.address, status: this.dialogDataValues.status }).then(resp => { if (resp && resp.responseHead.code == "0") { this.$notify({title: "成功",message: "数据已成功插入",type: "success",duration: 1500}); this.loadDataList(); this.isDialogShowed = false; } else { this.$message({ type: "error", message: "数据插入失败 错误码："+resp.responseHead.code+" 错误信息：" +resp.responseHead.message, duration: 1000 }); } }).catch(() => {}); }, // 编辑数据 updateItem() { updateOrganization({ name: this.dialogDataValues.name, code: this.dialogDataValues.code, master: this.dialogDataValues.master, tel: this.dialogDataValues.tel, address: this.dialogDataValues.address, status: this.dialogDataValues.status, id: this.dialogDataValues.id, version: this.dialogDataValues.version }).then(resp => { if (resp && resp.responseHead.code == "0") { this.$notify({title: "成功", message: "数据已成功修改", type: "success", duration: 1000}); this.loadDataList(); this.isDialogShowed = false; } else { this.$message({ type: "error", message: "数据修改失败 错误码："+resp.responseHead.code+" 错误信息：" +resp.responseHead.message, duration: 1000 }); } }).catch(() => {}); }, //删除数据 deleteData(datalist) { deleteOrganization(datalist).then(resp => { if (resp && resp.responseHead.code === "0") { this.$notify({title: "成功", message: "数据已成功删除", type: "success", duration: 1000}); // 若删除成功则重新刷新页面 this.loadDataList(); } else { this.$notify({ title: "失败", message: "数据删除失败 错误码："+resp.responseHead.code+" 错误信息：" +resp.responseHead.message, type: "error", duration: 1000 }); } }); }, deleteSingleItem(obj) { this.$confirm("确认要删除该数据吗?", "信息", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.deleteData([{id: obj.id, version: obj.version}]); }).catch(() => { this.$message({type: "info",message: "已取消删除", duration: 1000}); }); }, // 批量删除数据 deleteMultipleItems() { if (this.selectedItems.length == null || this.selectedItems.length == 0) { this.$message({ type: "error", message: "未选择任何数据", duration: 1000 }); } else { this.$confirm("确认要删除该数据吗?", "信息", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.deleteData(this.selectedItems); }).catch(() => { this.$message({type: "info",message: "已取消删除", duration: 1000}); }); } } } }; </script>