|
@@ -5,13 +5,13 @@
|
|
|
<a-row :gutter="48">
|
|
|
<a-col :md="6" :sm="24">
|
|
|
<a-form-item label="用户名称">
|
|
|
- <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入用户名称" id="userList-name" @pressEnter="$refs.table.refresh(true)"/>
|
|
|
+ <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入用户名称" id="userList-name" @pressEnter="$refs.table.refresh(true)" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
|
|
|
<a-col :md="6" :sm="24">
|
|
|
<a-form-item label="手机号码">
|
|
|
- <a-input allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码" id="userList-phone" @pressEnter="$refs.table.refresh(true)"/>
|
|
|
+ <a-input allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码" id="userList-phone" @pressEnter="$refs.table.refresh(true)" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
|
|
@@ -20,13 +20,14 @@
|
|
|
<v-select code="CHECK_ENABLE_STATE" v-model="queryParam.loginFlag" allowClear placeholder="请选择状态" id="userList-check-enable-state"></v-select>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :md="4" :sm="24">
|
|
|
- <a-button type="primary" @click="$refs.table.refresh(true)" id="userList-handSubmit">查询</a-button>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-button type="primary" @click="$refs.table.refresh(true)" id="userList-handSubmit" style="margin-right: 10px;">查询</a-button>
|
|
|
+ <a-button type="" @click="reset" id="userList-reset">重置</a-button>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
- <a-divider/>
|
|
|
+ <a-divider />
|
|
|
<div class="table-operator">
|
|
|
<a-button type="primary" icon="plus" @click="openModal" id="userList-openModal">新建</a-button>
|
|
|
</div>
|
|
@@ -37,10 +38,14 @@
|
|
|
rowKey="id"
|
|
|
:columns="columns"
|
|
|
:data="loadData"
|
|
|
- bordered
|
|
|
- >
|
|
|
+ bordered>
|
|
|
<span slot="status" slot-scope="text, record">
|
|
|
- <a-switch checkedChildren="启用" unCheckedChildren="禁用" v-model="record.loginFlag" @change="changeFlagHandle(text, record)" id="userList-changeFlagHandle"/>
|
|
|
+ <a-switch
|
|
|
+ checkedChildren="启用"
|
|
|
+ unCheckedChildren="禁用"
|
|
|
+ v-model="record.loginFlag"
|
|
|
+ @change="changeFlagHandle(text, record)"
|
|
|
+ id="userList-changeFlagHandle" />
|
|
|
</span>
|
|
|
<div slot="roleNames" slot-scope="text, record" :title="record.roleNames">
|
|
|
<span v-if="record.roleNames">{{ record.roleNames.substr(0,12) + '...' }}</span>
|
|
@@ -48,7 +53,7 @@
|
|
|
</div>
|
|
|
<span slot="action" slot-scope="text, record">
|
|
|
<template>
|
|
|
- <div >
|
|
|
+ <div>
|
|
|
<a class="action-button" @click="handleEdit(record)" id="userList-handleEdit">修改</a>
|
|
|
<a v-if="record.loginFlag" class="action-button reset-text" @click="resetPassword(record)" id="userList-resetPassword">重置密码</a>
|
|
|
<a v-if="!record.loginFlag" class="action-button red-text" @click="delect(record)" id="userList-delect">删除</a>
|
|
@@ -61,13 +66,23 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { STable, VSelect } from '@/components'
|
|
|
+import {
|
|
|
+ STable,
|
|
|
+ VSelect
|
|
|
+} from '@/components'
|
|
|
import userModal from './userModal.vue'
|
|
|
-import { resetPSD, updateEnableStatus, getPowerUserList, delectUserPower } from '@/api/power-user.js'
|
|
|
+import {
|
|
|
+ resetPSD,
|
|
|
+ updateEnableStatus,
|
|
|
+ getPowerUserList,
|
|
|
+ delectUserPower
|
|
|
+} from '@/api/power-user.js'
|
|
|
export default {
|
|
|
name: 'UserList',
|
|
|
components: {
|
|
|
- STable, VSelect, userModal
|
|
|
+ STable,
|
|
|
+ VSelect,
|
|
|
+ userModal
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
@@ -80,49 +95,54 @@ export default {
|
|
|
showModal: false,
|
|
|
itemData: {}, // 编辑行数据
|
|
|
// 表头
|
|
|
- columns: [
|
|
|
- {
|
|
|
- title: '序号',
|
|
|
- dataIndex: 'no',
|
|
|
- width: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '创建时间',
|
|
|
- dataIndex: 'createDate',
|
|
|
- width: '120',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '用户名称',
|
|
|
- dataIndex: 'name',
|
|
|
- width: '100',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '手机号码',
|
|
|
- dataIndex: 'phone',
|
|
|
- width: '100',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '角色',
|
|
|
- width: '100',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: { customRender: 'roleNames' }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- width: '100',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: { customRender: 'status' }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- width: '100',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: { customRender: 'action' }
|
|
|
+ columns: [{
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'no',
|
|
|
+ width: '40',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ dataIndex: 'createDate',
|
|
|
+ width: '120',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: '100',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '手机号码',
|
|
|
+ dataIndex: 'phone',
|
|
|
+ width: '100',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '角色',
|
|
|
+ width: '100',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'roleNames'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ width: '100',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'status'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ width: '100',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'action'
|
|
|
}
|
|
|
+ }
|
|
|
],
|
|
|
// 加载数据方法 必须为 Promise 对象
|
|
|
loadData: parameter => {
|
|
@@ -154,6 +174,13 @@ export default {
|
|
|
this.showModal = true
|
|
|
this.itemData = {}
|
|
|
},
|
|
|
+ // 重置
|
|
|
+ reset () {
|
|
|
+ this.queryParam.name = ''
|
|
|
+ this.queryParam.phone = '',
|
|
|
+ this.queryParam.loginFlag = ''
|
|
|
+ this.refreshTable()
|
|
|
+ },
|
|
|
// 重置密码
|
|
|
resetPassword (row) {
|
|
|
resetPSD({
|
|
@@ -222,22 +249,25 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- .table-page-search-wrapper .ant-form-inline .ant-form-item{
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- .action-button{
|
|
|
- line-height: 40px;
|
|
|
- white-space: nowrap;
|
|
|
- padding: 5px 10px;
|
|
|
- background-color: #1890ff;
|
|
|
- border-radius: 4px;
|
|
|
- color: #fff;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- .red-text{
|
|
|
- background-color: red;
|
|
|
- }
|
|
|
- .reset-text {
|
|
|
- background-color: #31b50b;
|
|
|
- }
|
|
|
+ .table-page-search-wrapper .ant-form-inline .ant-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-button {
|
|
|
+ line-height: 40px;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 5px 10px;
|
|
|
+ background-color: #1890ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red-text {
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reset-text {
|
|
|
+ background-color: #31b50b;
|
|
|
+ }
|
|
|
</style>
|