<template> <rk-layout :breadcrumb="breadcrumb"> <div class="org-query-page-body"> <div class="util-block"> <elara-form ref="orgForm" :rules="rules" :label-position="labelPosition" :model="orgForm" label-width="80px" class="demo-dynamic" > <elara-form-item prop="orgName" label="机构名称:"> <elara-input v-model="orgForm.orgName" placeholder="请输出机构名称" style="width: 214px;" clearable /> </elara-form-item> <elara-form-item prop="orgCode" label="机构编码:"> <elara-input v-model="orgForm.orgCode" placeholder="请输出机构编码" style="width: 214px;" clearable /> </elara-form-item> <elara-form-item> <elara-button type="primary" @click="submitForm('orgForm')" >搜寻</elara-button > <elara-button @click="resetForm('orgForm')">重置</elara-button> </elara-form-item> </elara-form> </div> <div class="util-block util-mt-20"> <elara-row> <p> 共{{ pager.total }}条 机构记录 <elara-button type="normal" style="float: right;width: 136px;margin-bottom: 10px;" @click="addOrg" > <span class="icon-elara-icon-plus"> <span class="path3" /> </span> 新增机构定义 </elara-button> </p> </elara-row> <elara-table :data="orgTableList" style="width: 100%;" border :cell-style="cellStyle" > <elara-table-column v-if="false" prop="id" label="id" align="center" /> <elara-table-column prop="orgCode" label="机构编码" align="center" show-overflow-tooltip /> <elara-table-column prop="orgName" label="机构名称" align="center" show-overflow-tooltip /> <elara-table-column prop="isEnabled" label="状态" align="center" show-overflow-tooltip :formatter="formatter" /> <elara-table-column label="操作" width="120" align="center"> <template slot-scope="scope"> <elara-button type="text" size="medium" @click.native.prevent="editRow(scope.$index, orgTableList)" > 编辑 </elara-button> </template> </elara-table-column> </elara-table> <risk-page :pager="pager" @current-change="handleCurrentChange" ></risk-page> </div> </div> </rk-layout></template><script>import rkLayout from "../../../component/layout";import { bizparamOrgApi } from "../../../api";import riskPage from "../../../component/page/riskpage";import http from "../../../lib/httpRequest";export default { data: function() { return { breadcrumb: [{ title: "业务参数定义" }, { title: "机构定义" }], labelPosition: "right", orgForm: { orgName: null, orgCode: null }, rules: { orgCode: [ { min: 1, max: 7, message: "必须为数字且不超过7位", trigger: "change" }, { pattern: /^[0-9]*$/, message: "只能为数字", trigger: "change" } ], orgName: [ { min: 1, max: 10, message: "不能超过10个汉字", trigger: "change" }, { pattern: /^[\u4E00-\u9FA5]+$/, message: "只能为中文", trigger: "change" } ] }, orgTableList: null, // showPage: false, pageShow: null, showEmptyDiv: true, emptyText: "暂无相干记录", emptyTextTwo: "", pager: { total: 0, currPage: 1, pageSize: 20, pages: 0 } }; }, components: { rkLayout, riskPage }, mounted() { this.loadList(); }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.loadList(); } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, editRow(index, rows) { this.$router.push({ path: "/bizparam/org/add", query: { id: rows[index].id } }); }, cellStyle(row) { // 依据报警级别显示色彩 if (row.column.label === "状态" && row.row.isEnabled === 1) { return "color:#1BB500"; } }, formatter(row) { if (row.isEnabled === 1) { return "失效"; } else { return "生效"; } }, loadList() { var params = { orgCode: this.orgForm.orgCode, orgName: this.orgForm.orgName, currPage: this.pager.currPage, pageSize: this.pager.pageSize }; http .get(bizparamOrgApi.query, params) .then(res => { if (res.respCode === "000000") { this.orgTableList = res.data.list; this.pager.total = res.data.total; this.pager.pages = res.data.pages; console.log("getList res:", res); } }) .catch(err => { console.log("getList err:", err); }); }, handleCurrentChange(val) { if (val > 0) { this.pager.currPage = val; this.loadList(); console.log(`当前页: ${val}`); } }, addOrg() { this.$router.push({ path: "/bizparam/org/add" }); } }};</script>