維度

1. EID查詢（OMS）
2. 在「玄武智能風控系統」中新增維度定義模塊
3. 經過前端頁面的設計，更加熟悉了vue框架和elara組件的使用。

<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="100px"
          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 prop="dimension" label="組成維度包含:">
            <elara-select 
              v-model="orgForm.dimension" 
              multiple placeholder="請選擇"
              style="width: 214px;">
              <elara-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </elara-option>
            </elara-select>






          </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,
        options: 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>