jiaoyixt/src/pages/Account/index.vue

<template>
  <div>
    <modal
      :show.sync="modal.visible"
      body-classes="p-0"
      modal-classes="modal-dialog-centered modal-sm"
    >
      <card
        type="secondary"
        header-classes="bg-white pb-5"
        body-classes="px-lg-5 py-lg-5"
        class="border-0 mb-0"
      >
        <template>
          <div class="text-muted text-center mb-3">
            <small>新建账号</small>
          </div>
          <form role="form">
            <!-- 账号AccessKey -->
            <base-input
              label="账号AccessKey"
              placeholder="请填写账号AccessKey"
              v-model="form.AccessKey"
            >
            </base-input>
            <!-- 账号SecretKey -->
            <base-input
              label="账号SecretKey"
              placeholder="请填写账号SecretKey"
              v-model="form.SecretKey"
            >
            </base-input>
            <!-- 账户类型 -->
            <p class="form-label" style="color:rgba(255, 255, 255, 0.6)">
              账号类型：
            </p>
            <el-select
              class="select-danger mb-4"
              style="width:100%"
              placeholder="选择账号类型"
              v-model="form.AccountType"
            >
              <el-option
                v-for="item in accountTypes"
                class="select-danger"
                :value="item.value"
                :label="item.title"
                :key="item.value"
              >
              </el-option>
            </el-select>

            <div class="text-center">
              <base-button
                type="primary"
                class="my-4"
                @click="createRobot"
                :loading="createLoading"
                >新建</base-button
              >
            </div>
          </form>
        </template>
      </card>
    </modal>

    <base-button @click="modal.visible = true">添加账号</base-button>

    <custom-base-table
      :data="tableData"
      :columns="columns"
      thead-classes="text-primary"
    >
      <template slot="type" slot-scope="item">
        {{
          accountTypes.filter(a => a.value == item.row.item.AccountType)[0]
            .title
        }}
      </template>
    </custom-base-table>
  </div>
</template>

<script>
import CustomBaseTable from "../../../src/components/CustomBaseTable";
import { Modal } from "@/components";
import { accountTypes } from "../prePages/js/selectoptions";

const tableColumns = [
  { name: "账号名称", prop: "Name" },
  { name: "账号AccessKey", prop: "AccessKey" },
  { name: "账号SecretKey", prop: "SecretKey" },
  { name: "帐号类型", prop: "AccountType", customSlot: "type" },
  { name: "创建时间", prop: "CreateTime" }
];

export default {
  components: { CustomBaseTable, Modal },
  data() {
    return {
      type: 0,
      tableData: [],
      form: {},
      accountTypes,
      accountList: [],
      allSymbol: [],
      modal: { visible: false },
      createLoading: false,
      columns: tableColumns
    };
  },
  created() {
    this.type = this.$route.params.type;
    this.getAccountList();
    // this.getAllSymbol();
    // this.getAccountList();
  },

  methods: {
    //获取所有的交易所账号
    getAccountList() {
      this.$http
        .get(`/Api/StockExchangeAccount/GetList?policyType=${this.type}`)
        .then(res => {
          if (res.Code == 200) {
            this.tableData = res.Data;
          }
        });
    },

    getMatchTitle(value, sourceArray) {
      let title = "";
      sourceArray.forEach(element => {
        if (element.value == value) title = element.title;
      });
      return title;
    },

    //请求创建新的账号
    createRobot() {
      this.createLoading = true;
      this.$http
        .post("/Api/StockExchangeAccount/Add", {
          ...this.form,
          PolicyType: this.type
        })
        .then(res => {
          this.createLoading = false;
          if (res.Code == 200) {
            this.modal.visible = false;
            this.sMessage("success", "创建成功");
            this.getAccountList();
          } else {
            this.sMessage("danger", res.Message);
          }
        });
    },

    // 封装showNotification
    sMessage(type, message) {
      this.$notify({
        type: type,
        message,
        timeout: 1800
      });
    }
  }
};
</script>

<style scoped>
.form-label {
  /* width: 50px; */
  font-size: 0.75rem;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.6);
}
</style>