statistical.vue

<template>
 <!-- 统计用户管理 -->
  <div class="user-wrapper height100">
      <div class="search-container">
          <el-form :inline="true" :model="form">
            <el-form-item>
                <el-input
                 v-model="form.user" 
                 placeholder="请输入用户名"
                 suffix-icon="el-icon-search"
                ></el-input>
            </el-form-item>
             <el-form-item>
               <el-select 
                v-model="form.status" 
                 placeholder="请选择账号状态"
                clearable 
               >
                 <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                    ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item>
                <div class="btn-group">
                   <el-button type="primary" @click="handleSubmit">查询</el-button>
                   <el-button @click="handleReset">重置</el-button>
                </div>     
            </el-form-item>
        </el-form>
        <div class="page-tip">
            <span class="page-tip-title">页面说明:</span>
            <span class="page-tips">可按按照用户名及账号状态进行信息筛选。可新增统计账号，“*”为必填项。</span>
        </div>
      </div>
      <div class="table-content">
          <div class="btn-group">
               <el-button type="primary">新建统计账户</el-button>
          </div>
           <!-- <party-table :feildList="feildList" :list="list"></party-table> -->
           <account-table
            :feildList="feildList"
            :list="list"
            @action="handleAction"
           />
           <party-pagination/>
      </div>
      <!-- <user-dialog/> -->
  </div>
</template>
<script>
import { partyPagination } from '@/components/index'
import accountTable from './components/accountTable'
// import userDialog from './userDialog/index'
export default {
    data(){
        return{
            form:{
                user:'',
                status:''
            },
            addForm:{

            },
            options:[
               {label:'待激活',value:0},
               {label:'活跃',value:1},
               {label:'禁用待审核',value:2},
               {label:'禁用',value:3},
            ],
            feildList:[
                {prop:'username',label:'平台用户名'},
                {prop:'org',label:'所在机构'},
                {prop:'endTime',label:'到期时间'},
                {prop:'type',label:'账号类型'},
                {prop:'status',label:'账号状态'},
                {prop:'',label:'操作',isEdit:true, width:280},
            ],
            list: [
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
                { username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'}, 
              ]
        }
    },
    components:{ partyPagination, accountTable},
    mounted(){

    },
    methods:{
        handleSubmit(){

        },
        handleReset(){
            this.form.user = ''
        },
        // 弹窗关闭
        handleClose(){
          this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        handleAction(params){
            console.log(params.type)
        }
    }
}
</script>
<style lang="less" scoped>

</style>