80 lines
2.8 KiB
Vue
80 lines
2.8 KiB
Vue
<template>
|
|
<div class="head-container">
|
|
<el-input v-model="query.value" clearable placeholder="输入关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
|
|
<el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
|
|
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
|
</el-select>
|
|
<el-select v-model="query.enabled" clearable placeholder="状态" class="filter-item" style="width: 90px" @change="toQuery">
|
|
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
|
|
</el-select>
|
|
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
|
<add v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])" :roles="roles"/>
|
|
<el-button v-if="checkPermission(['ADMIN'])" :loading="downloadLoading" size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="download">导出</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import checkPermission from '@/utils/permission' // 权限判断函数
|
|
import { parseTime } from '@/utils/index'
|
|
import add from './add'
|
|
// 查询条件
|
|
export default {
|
|
components: { add },
|
|
props: {
|
|
roles: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
query: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
downloadLoading: false,
|
|
queryTypeOptions: [
|
|
{ key: 'username', display_name: '用户名' },
|
|
{ key: 'email', display_name: '邮箱' }
|
|
],
|
|
enabledTypeOptions: [
|
|
{ key: 'true', display_name: '激活' },
|
|
{ key: 'false', display_name: '锁定' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
checkPermission,
|
|
toQuery() {
|
|
this.$parent.page = 0
|
|
this.$parent.init()
|
|
},
|
|
download() {
|
|
this.downloadLoading = true
|
|
import('@/vendor/Export2Excel').then(excel => {
|
|
const tHeader = ['ID', '用户名', '邮箱', '头像地址', '状态', '注册日期', '最后修改密码日期']
|
|
const filterVal = ['id', 'username', 'email', 'avatar', 'enabled', 'createTime', 'lastPasswordResetTime']
|
|
const data = this.formatJson(filterVal, this.$parent.data)
|
|
excel.export_json_to_excel({
|
|
header: tHeader,
|
|
data,
|
|
filename: 'table-list'
|
|
})
|
|
this.downloadLoading = false
|
|
})
|
|
},
|
|
formatJson(filterVal, jsonData) {
|
|
return jsonData.map(v => filterVal.map(j => {
|
|
if (j === 'createTime' || j === 'lastPasswordResetTime') {
|
|
return parseTime(v[j])
|
|
} else if (j === 'enabled') {
|
|
return parseTime(v[j]) ? '启用' : '禁用'
|
|
} else {
|
|
return v[j]
|
|
}
|
|
}))
|
|
}
|
|
}
|
|
}
|
|
</script>
|