|
@@ -0,0 +1,176 @@
|
|
|
+<template>
|
|
|
+ <div class="open-mgmt">
|
|
|
+ <!-- 列表 -->
|
|
|
+ <div class="open-mgmt-left">
|
|
|
+ <div class="open-header">
|
|
|
+ <span>开放平台列表</span>
|
|
|
+ <div class="open-action">
|
|
|
+ <Icon type="md-add" size="18" style="margin-right: 10px" @click="editOpen(true)" />
|
|
|
+ <Icon type="ios-create" size="18" style="margin-right: 10px" @click="editOpen(true)" />
|
|
|
+ <Icon type="md-trash" size="18" @click="delOpen" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="open-left-list">
|
|
|
+ <div :class="['open-list', index == nowIndex ? 'list-select': '']"
|
|
|
+ v-for="(item, index) in openList"
|
|
|
+ :key="index"
|
|
|
+ @click="list(index)"
|
|
|
+ >
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 信息 -->
|
|
|
+ <div class="open-mgmt-right">
|
|
|
+ <div class="open-header">
|
|
|
+ <span>平台信息</span>
|
|
|
+ <div class="open-action" v-show="isEdit">
|
|
|
+ <div @click="editMgmt(false)">
|
|
|
+ <Icon type="md-checkmark-circle" size="18" />
|
|
|
+ <span>保存平台</span>
|
|
|
+ </div>
|
|
|
+ <div @click="editMgmt(false)">
|
|
|
+ <Icon type="md-close-circle" size="18" />
|
|
|
+ <span>取消编辑</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="open-right-info">
|
|
|
+ <div class="open-info">
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <!-- <div class="open-info-header">
|
|
|
+ <span>基本信息</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="dark-iview-form disabled-iview-input">
|
|
|
+ <Form :model="openMgInfo" label-position="top">
|
|
|
+ <FormItem label="授权学校">
|
|
|
+ <Input v-model="openMgInfo.school" disabled>XXXXXX学校</Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="应用名称">
|
|
|
+ <Input v-model="openMgInfo.name"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="ApiToken" class="api-token" v-show="!isEdit">
|
|
|
+ <div class="api-icon">
|
|
|
+ <Icon type="md-refresh" size="18" style="margin-right: 10px" />
|
|
|
+ <Icon type="ios-copy" size="18" />
|
|
|
+ </div>
|
|
|
+ <Input
|
|
|
+ v-model="openMgInfo.token"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 2, maxRows: 5 }"
|
|
|
+ disabled
|
|
|
+ ></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="描述">
|
|
|
+ <Input v-model="openMgInfo.des" type="textarea"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="状态">
|
|
|
+ <RadioGroup v-model="openMgInfo.type">
|
|
|
+ <Radio label="male">启用</Radio>
|
|
|
+ <Radio label="female">禁用</Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="open-api dark-iview-table">
|
|
|
+ <!-- Api列表 -->
|
|
|
+ <!-- <div class="open-api-header">
|
|
|
+ <span>Api列表</span>
|
|
|
+ </div> -->
|
|
|
+ <Table :columns="apiListCol" :data="apiList"></Table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 开放平台列表
|
|
|
+ openList: [
|
|
|
+ {
|
|
|
+ name: "fvrhrthtyjhtyhregr",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "mfghgjyj",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 平台信息
|
|
|
+ openMgInfo:{
|
|
|
+ school: "XXXXXXXXXX学校",
|
|
|
+ name: "",
|
|
|
+ des: "",
|
|
|
+ type: "",
|
|
|
+ token: "zcnjkdfjoiwfjergerghwfhefvsojfoergjorhbnfbkdnvjeroiguitrghbfdvneavnesvbnrbnkbnbrgeirgre"
|
|
|
+ },
|
|
|
+ // api表头
|
|
|
+ apiListCol: [
|
|
|
+ {
|
|
|
+ title: '全选',
|
|
|
+ key: 'action',
|
|
|
+ render: (h, params) => {
|
|
|
+ return h('div', [
|
|
|
+ h('Checkbox', {
|
|
|
+ props: {
|
|
|
+ size: 'small'
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ // marginRight: '5px'
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ console.log(params);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 'View'),
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "接口名称",
|
|
|
+ key: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "接口地址",
|
|
|
+ key: "address",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "请求方法",
|
|
|
+ key: "method",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "描述",
|
|
|
+ key: "des",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // api列表
|
|
|
+ apiList: [],
|
|
|
+ // 当前下标
|
|
|
+ nowIndex: 0,
|
|
|
+ isEdit: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ editOpen (type) {
|
|
|
+ this.isEdit = type
|
|
|
+ },
|
|
|
+ delOpen () {
|
|
|
+ this.openList
|
|
|
+ },
|
|
|
+ list (index) {
|
|
|
+ this.nowIndex = index
|
|
|
+ },
|
|
|
+ // 编辑平台信息
|
|
|
+ editMgmt (type) {
|
|
|
+ this.isEdit = type
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "./OpenMgmt2.less";
|
|
|
+</style>
|