|
@@ -0,0 +1,318 @@
|
|
|
+<template>
|
|
|
+ <div class="school-container">
|
|
|
+ <!--<Loading v-show="isLoading"></Loading>-->
|
|
|
+ <div class="school-container-left">
|
|
|
+ <div class="school-container-header">
|
|
|
+ <span>开放平台设置</span>
|
|
|
+ </div>
|
|
|
+ <vuescroll>
|
|
|
+ <div class="school-list-wrap">
|
|
|
+ <!--<div v-if="mySchoolList.length === 0">
|
|
|
+ <EmptyData :top="50"></EmptyData>
|
|
|
+ </div>-->
|
|
|
+ <div class="list-wrap">
|
|
|
+ <!--<Menu active-name="mge" :open-names="['1']">
|
|
|
+ <Submenu name="1" >
|
|
|
+ <template slot="title">
|
|
|
+ <Icon type="ios-analytics" />
|
|
|
+ 应用管理
|
|
|
+ </template>
|
|
|
+ <MenuItem name="mge">应用列表</MenuItem>
|
|
|
+ <MenuItem name="add">添加应用</MenuItem>
|
|
|
+ </Submenu>
|
|
|
+ </Menu>-->
|
|
|
+ <div class="school-item" @click="getSelect('mge')">
|
|
|
+ <span class="school-item-name">
|
|
|
+ <span>应用管理</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="school-item" @click="getSelect('add')">
|
|
|
+ <span class="school-item-name">
|
|
|
+ <span>添加应用</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ <div class="school-container-right">
|
|
|
+ <div class="school-container-header">
|
|
|
+ <span>应用列表</span>
|
|
|
+ <div>
|
|
|
+ <Input placeholder="请输入搜索名称或appkey">
|
|
|
+ <Icon type="ios-search" slot="prefix" />
|
|
|
+ </Input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-wrap" v-show="index == 'mge'">
|
|
|
+ <Table :data="tableData1" :columns="tableColumns1">
|
|
|
+ <template slot-scope="{ row, index }" slot="status">
|
|
|
+ <div v-show="row.status == 0">
|
|
|
+ <Button type="primary" size="small" style="margin-right: 5px">通过</Button>
|
|
|
+ <Button type="error" size="small">不通过</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row, index }" slot="action">
|
|
|
+ <Button type="primary" size="small" style="margin-right: 5px">编辑</Button>
|
|
|
+ <Button type="error" size="small">删除</Button>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ <div style="margin: 10px;overflow: hidden">
|
|
|
+ <div style="float: right;">
|
|
|
+ <Page :total="100" :current="1" @on-change="changePage"></Page>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:45%;margin-top:30px;color:#fff;margin-left:30px" v-show="index == 'add'">
|
|
|
+ <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
|
|
|
+ <FormItem label="应用名称:" prop="name">
|
|
|
+ <Input v-model="formValidate.name" placeholder="请输入应用名称"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="app key:" prop="key">
|
|
|
+ <Input v-model="formValidate.key" placeholder="请输入appkey"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="app_secret:" prop="secret">
|
|
|
+ <Input v-model="formValidate.secret" placeholder="请输入app_secret"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="应用图标:">
|
|
|
+ <Upload>
|
|
|
+ <Button icon="ios-cloud-upload-outline">点击上传图片</Button>
|
|
|
+ </Upload>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="功能模块" prop="model">
|
|
|
+ <CheckboxGroup v-model="formValidate.model">
|
|
|
+ <Checkbox label="模块一"></Checkbox>
|
|
|
+ <Checkbox label="模块二"></Checkbox>
|
|
|
+ <Checkbox label="模块三"></Checkbox>
|
|
|
+ <Checkbox label="模块四"></Checkbox>
|
|
|
+ <Checkbox label="模块四"></Checkbox>
|
|
|
+ <Checkbox label="模块四"></Checkbox>
|
|
|
+ <Checkbox label="模块四"></Checkbox>
|
|
|
+ <Checkbox label="模块四"></Checkbox>
|
|
|
+ <Checkbox label="模块四"></Checkbox>
|
|
|
+ <Checkbox label="模块四"></Checkbox>
|
|
|
+ </CheckboxGroup>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="限制连接次数:" prop="num">
|
|
|
+ <Select v-model="formValidate.num" :autosize="{minRows: 2,maxRows: 5}" placeholder="不限制"></Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="账号ID:" prop="id">
|
|
|
+ <Input v-model="formValidate.id" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入账号ID"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem>
|
|
|
+ <Button type="primary">提交</Button>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ teacherInfo: {
|
|
|
+ defaultschool: ''
|
|
|
+ },
|
|
|
+ index: 'mge',
|
|
|
+ tableData1: this.mockTableData1(),
|
|
|
+ tableColumns1: [
|
|
|
+ {
|
|
|
+ title: 'appkey',
|
|
|
+ key: 'key'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '应用图标',
|
|
|
+ key: 'pic'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '应用名称',
|
|
|
+ key: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '开发者',
|
|
|
+ key: 'author'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '申请机构',
|
|
|
+ key: 'company'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '审核状态',
|
|
|
+ slot: 'status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ slot: 'action',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ formValidate: {
|
|
|
+ name: '',
|
|
|
+ key: '',
|
|
|
+ secret: '',
|
|
|
+ id: '',
|
|
|
+ model: [],
|
|
|
+ num:0
|
|
|
+ },
|
|
|
+ ruleValidate: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入应用名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ key: [
|
|
|
+ { required: true, message: '请输入appkey', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ secret: [
|
|
|
+ { required: true, message: '请输入app_secret', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ id: [
|
|
|
+ { required: true, message: '请输入使用者ID', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ num: [
|
|
|
+ { required: true, type: 'number', min: 1,message: '请输入使用者ID', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ model: [
|
|
|
+ { required: true, type: 'array', min: 1, message: '选择需要的功能模块', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ mockTableData1() {
|
|
|
+ let data = [];
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ data.push({
|
|
|
+ name: 'Business' + Math.floor(Math.random() * 100 + 1),
|
|
|
+ status: Math.floor(Math.random(0,3)),
|
|
|
+ key: 'hjfgdhfdjkshkjhgjk',
|
|
|
+ author: 'SOUL',
|
|
|
+ company: 'habook',
|
|
|
+ action: Math.floor(Math.random() * 7 + 1),
|
|
|
+ update: new Date()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ getSelect(data) {
|
|
|
+ this.index = data || ''
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ const y = date.getFullYear();
|
|
|
+ let m = date.getMonth() + 1;
|
|
|
+ m = m < 10 ? '0' + m : m;
|
|
|
+ let d = date.getDate();
|
|
|
+ d = d < 10 ? ('0' + d) : d;
|
|
|
+ return y + '-' + m + '-' + d;
|
|
|
+ },
|
|
|
+ changePage() {
|
|
|
+ this.tableData1 = this.mockTableData1();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "./OpenMgmt.less";
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ @borderColor: #424242;
|
|
|
+ @second-textColor: #CBCBCB;
|
|
|
+
|
|
|
+ //文本副级颜色
|
|
|
+ .school-container-header {
|
|
|
+ .ivu-input
|
|
|
+
|
|
|
+ {
|
|
|
+ background: transparent;
|
|
|
+ width: 200px;
|
|
|
+ border-color: #4a4a4a;
|
|
|
+ color: @second-textColor;
|
|
|
+ &::-webkit-input-placeholder
|
|
|
+
|
|
|
+ {
|
|
|
+ /* WebKit browsers */
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .school-container-right {
|
|
|
+ .search-wrap
|
|
|
+
|
|
|
+ {
|
|
|
+ .ivu-input
|
|
|
+
|
|
|
+ {
|
|
|
+ background: transparent;
|
|
|
+ width: 250px;
|
|
|
+ border-color: #4a4a4a;
|
|
|
+ color: @second-textColor;
|
|
|
+ &::-webkit-input-placeholder
|
|
|
+
|
|
|
+ {
|
|
|
+ /* WebKit browsers */
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-select {
|
|
|
+ width: 200px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-wrap {
|
|
|
+ .ivu-table
|
|
|
+
|
|
|
+ {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-table th,
|
|
|
+ .ivu-table td {
|
|
|
+ background: transparent;
|
|
|
+ color: @second-textColor;
|
|
|
+ border-color: @borderColor;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-table:before,
|
|
|
+ .ivu-table-border:after,
|
|
|
+ .ivu-table-wrapper-with-border {
|
|
|
+ background: @borderColor;
|
|
|
+ border-color: @borderColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
|
|
|
+ .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
|
|
|
+ background: #2a2a2a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-table-stripe .ivu-table-body tr.ivu-table-row-hover td,
|
|
|
+ .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-hover td {
|
|
|
+ .ivu-btn
|
|
|
+
|
|
|
+ {
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ background: #5C5A5A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|