关于vue.js:vue

<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>