P0006/src/view/authentication-radius.vue

<template>
  <Card :bordered="false">
    <p slot="title">RADIUS</p>
    <Alert show-icon>
      RADIUS（远程用户拨号认证系统）
      <Icon type="ios-bulb-outline" slot="icon"></Icon>
      <template slot="desc">
        使用 RADIUS（Remote Authentication Dial In User Service，远程用户拨号认证系统）可以实现对防火墙、堡垒机、Wi-Fi 等设备的统一认证。
 IDaaS RADIUS Server 安装包，并配合列表中 RADIUS 可下载的配置文件使用。
      </template>
    </Alert>
    <div class="search-box box-pack-between">
      <div class="search-left-box" style="width: 50%;">
        <div class="search-left-tools">
          <!--<Button type="primary">添加应用</Button>-->
        </div>
        <div class="search">
          <Input search enter-button placeholder="搜索认证源"/>
        </div>
      </div>
      <div class="search-right-tools"></div>
    </div>
    <Table :columns="articleColumns" :data="datalist"></Table>
    <Page class="page" :total="100" show-total show-sizer show-elevator/>
  </Card>
</template>
<script>
import {articleList,deleteContent} from '@/api/data'
import store from '@/store'
import qs from 'qs'

export default {
  name: 'articleList',
  props: {

  },
  components: {},
  data () {
    return {
      contentType:'',
      pageSizeOpts:[10,20,30,40,50,100],
      loading: true,
      pageNow:1,
      pageSize:50,
      articlePage:{},
      defaultList: [],
      imgName: '',
      dirname: '',
      selectedItems: [],
      breadData: [],
      busy: false,
      nextMarker: '',
      buckets: [],
      currentBucket: '',
      articleColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: 'RADIUS 名称',
          align: 'left',
          key: 'title'
        },
        {
          title: '认证端口',
          align: 'center',
          key: 'size'
        },
        {
          title: '计费端口',
          align: 'center',
          key: 'size'
        },
        {
          title: '连接超时时间',
          align: 'center',
          key: 'createTime',
          sortable: true
        },
        {
          title: '认证方式',
          align: 'center',
          key: 'updateTime',
          sortable: true
        },
        {
          title: 'RADIUS 服务提供商',
          align: 'center',
          key: 'updateTime',
          sortable: true
        },
        {
          title: '启用计费',
          align: 'center',
          key: 'updateTime',
          sortable: true
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'updateTime',
          sortable: true
        },
        {
          title: '备注',
          align: 'center',
          key: 'updateTime',
          sortable: true
        },
        {
          title: '操作',
          align: 'right',
          key: 'opt',
          fixed: 'right',
          render: (h, params) => {
            let item = this.articlePage.list[params.index]
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small',
                  to:'/admin/article/edit/'+item.id
                },
                on: {
                  click: () => {

                  }
                }
              }, 'Edit'),
              h('span',{
                style:"margin:0 8px"
              }),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    const msg = this.$Message.loading({
                      content: '删除中...',
                      duration: 0
                    })
                    deleteContent(item.id).then(res=>{
                      msg();
                      this.remove(params.index)
                    }).catch(function (error) {
                      msg();
                      console.log(error)
                    })
                  }
                }
              }, 'Delete')
            ])
          }
        }
      ],
      datalist: [],
      uploadList: [],
      accessKey: '---',
      uploadParam: {},
      showUploadList: true,
      currentPath: '',
      formValidate: {
        pathName: ''
      },
      ruleValidate: {
        pathName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' },
          { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' },
          { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' },
          { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' },
          { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' }
        ]
      },
      styles: {
        height: 'calc(100% - 105px)',
        overflow: 'auto',
        paddingBottom: '53px'
      }
    }
  },
  methods: {
    remove (index) {
      this.articlePage.list.splice(index, 1)
    },

    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.formValidate.pathName)

          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    refresh () {
      this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize});
    },
    listArticles(){
      var _this = this;
      articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => {
        _this.loading = false
        this.articlePage = res.data
      }).catch(function (error) {
        _this.loading = false
        console.log(error)
      })
    },
    toPage(page){
      console.log("page:"+page)
      this.loading = true
      this.pageNow = page;
      this.listArticles();
    },
    changePageSize(pageSize){
      this.loading = true
      this.pageNow = 1;
      this.pageSize = pageSize;
      this.listArticles();
    }
  },
  mounted () {
    this.contentType = this.$route.query.contentType;
    this.listArticles();
  },
  watch:{
    '$route':{
      handler(val){
        if(val.query.contentType){
          this.contentType = val.query.contentType? val.query.contentType:'post'
          this.listArticles()
        }
      }
    }
  }
}
</script>
<style>
  .search-box{
    position:relative;
    width:100%;
    display:-webkit-flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:15px
  }
  .search-box .search-left-box {
    width:50%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
  }
  .search-box .search-left-tools{
    display:inline-block;
    margin-right:5px
  }
  .search-box .total{
    position:absolute;
    right:0;
    font-weight:700
  }
  .search-box .total .icon{
    font-size:20px;
    font-weight:800;
    color:#199be6
  }
  .search-box .search-right-tools{
    text-align:right
  }
</style>