<template>
|
<el-main>
|
<el-row>
|
<el-form class="el-InputForm" :inline="true" :model="searchForm" ref="ruleForm">
|
<el-form-item :label="$t('person.userId')" label-width="60px">
|
<el-input v-model="searchForm.userId" :placeholder="$t('person.placeholderUserId')" clearable></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('person.name')" label-width="80px">
|
<el-input v-model="searchForm.name" :placeholder="$t('person.placeholderName')" clearable></el-input>
|
</el-form-item>
|
<div style="position: absolute; right: 25px; bottom: 25px;">
|
<el-button type="info" style="margin-left:10px;border:none;" size='medium' icon="el-icon-search"
|
@click="search">{{ $t('common.query') }}</el-button>
|
<el-button type="warning" style="border:none;" size='medium' icon="el-icon-refresh-right" @click="doReset">{{
|
$t('common.reset') }}</el-button>
|
</div>
|
</el-form>
|
<el-col :span="24" style="margin:20px 0">
|
<el-button type="primary" style="border:none;" size='mini' icon="el-icon-plus" @click="doAdd">{{
|
$t('person.addUser') }}</el-button>
|
<el-button type="warning" style="border:none;" size='mini' icon="el-icon-delete" @click="batchDelete">{{
|
$t('common.batchDelete') }}</el-button>
|
<el-button type="danger" style="border:none;" size='mini' icon="el-icon-delete-solid" @click="doClear">{{
|
$t('person.oneClickClear') }}</el-button>
|
</el-col>
|
<!-- 新增人员 -->
|
<AddOrEdit ref="addOrEdit" @addOrEditSuccess='fetchData'></AddOrEdit>
|
<!-- Table -->
|
<el-col :span="24" style="padding: 0">
|
<Table :table-label="tableHeader" v-loading="isSubmitLoading" :table-data="tableData"
|
:table-option="tableOption" :table-selection="tableSelection"
|
@onHandleSelectionChange="handleSelectionChange"></Table>
|
</el-col>
|
<!-- 分页 -->
|
<el-col :span="24" style="text-align: center">
|
<Pagination ref="page" :total="total" @pageChange="pageChange"></Pagination>
|
</el-col>
|
</el-row>
|
</el-main>
|
</template>
|
<script>
|
import Table from "@/components/table/tableList";
|
import Pagination from "@/components/table/pagination";
|
import AddOrEdit from "./addOrEdit.vue"
|
import { removeEmptyValues, resetObjectValues } from '@/utils/index.js'
|
export default {
|
components: {
|
Pagination,
|
Table,
|
AddOrEdit
|
},
|
data () {
|
return {
|
tableHeader: [
|
{ label: this.$t('person.userId'), list: 'userId', overflowShow: 'hidden' },
|
{ label: this.$t('person.name'), list: 'name', overflowShow: 'hidden' },
|
],
|
tableSelection: {
|
key: true,
|
type: "selection",
|
detaile: false,
|
},
|
tableOption: {
|
label: this.$t('common.operation'),
|
width: "300px",
|
value: 0,
|
options: [
|
{
|
label: this.$t('common.edit'),
|
key: 0,
|
type: "text",
|
State: true,
|
method: (row) => {
|
this.$refs.addOrEdit.open('edit', { ...row })
|
},
|
},
|
{
|
label: this.$t('common.delete'),
|
key: 1,
|
type: "text",
|
State: true,
|
method: (row) => {
|
this.handleDelete(row.userId)
|
},
|
}
|
]
|
},
|
tableHeight: 450,
|
currentPage: 0,
|
pageSize: 20,
|
total: 0,
|
tableData: [],
|
searchForm: {
|
userId: '',
|
name: '',
|
},
|
selectIdList: [],
|
isSubmitLoading: false,
|
};
|
},
|
created () {
|
this.fetchData()
|
},
|
methods: {
|
async fetchData () {
|
let searchForm = removeEmptyValues({ ...this.searchForm })
|
searchForm.page = this.currentPage
|
searchForm.size = this.pageSize
|
try {
|
const res = await this.$http.post("/getUser", { data: searchForm });
|
if (res.code == 200) {
|
this.tableData = res.data.content
|
this.total = res.data.total
|
} else {
|
this.$message.error(res.message);
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
},
|
|
doAdd () {
|
this.$refs.addOrEdit.open('add')
|
},
|
|
doReset () {
|
resetObjectValues(this.searchForm)
|
this.fetchData()
|
},
|
|
handleDelete (userId) {
|
let that = this
|
this.$confirm(
|
this.$t('common.deleteTips'),
|
this.$t('common.tips'),
|
{
|
confirmButtonText: this.$t('common.confirm'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
}
|
).then(async () => {
|
try {
|
const res = await that.$http.post("delUser", { data: [userId] })
|
if (res.code == 200) {
|
that.$message.success(this.$t('common.deleteSuccess'))
|
that.fetchData()
|
} else {
|
that.$message.error(res.message)
|
}
|
} catch (even) {
|
console.log(even)
|
}
|
}).catch(() => { })
|
},
|
|
batchDelete () {
|
let that = this
|
if (this.selectIdList.length <= 0) {
|
this.$message.warning(this.$t('common.placeholderSelect'));
|
return;
|
}
|
this.$confirm(this.$t('common.deleteTips'),
|
this.$t('common.tips'),
|
{
|
confirmButtonText: this.$t('common.confirm'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
})
|
.then(async () => {
|
that.isSubmitLoading = true;
|
const res = await this.$http.post("delUser", { data: this.selectIdList });
|
that.isSubmitLoading = false;
|
if (res.code == 200) {
|
that.$message.success(this.$t('common.deleteSuccess'))
|
that.fetchData()
|
} else {
|
that.$message.error(res.message)
|
}
|
})
|
.catch(() => {
|
return false;
|
});
|
},
|
|
doClear () {
|
let that = this
|
this.$confirm(this.$t('person.clearTips'),
|
this.$t('common.tips'),
|
{
|
confirmButtonText: this.$t('common.confirm'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
})
|
.then(async () => {
|
that.isSubmitLoading = true;
|
try {
|
const res = await this.$http.post("/clearUser", {});
|
that.isSubmitLoading = false;
|
if (res.code == 200) {
|
that.$message.success(this.$t('person.clearSuccess'))
|
that.fetchData()
|
} else {
|
that.$message.error(that.$t('person.clearFailed'))
|
}
|
} catch (error) {
|
console.log(error)
|
}
|
|
})
|
.catch(() => {
|
return false;
|
});
|
},
|
|
handleSelectionChange (vals) {
|
this.selectIdList = [];
|
vals.map(v => {
|
this.selectIdList.push(v.userId);
|
});
|
},
|
|
pageChange (item) {
|
this.pageSize = item.limit;
|
this.currentPage = item.page - 1;
|
this.fetchData()
|
},
|
|
search () {
|
this.currentPage = 0
|
this.$refs.page.Page(1);
|
this.fetchData();
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.el-InputForm {
|
position: relative;
|
background-color: #fff;
|
padding: 10px 20px;
|
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
|
border-radius: 15px;
|
}
|
|
.card {
|
width: 96%;
|
height: 85%;
|
border-radius: 5px;
|
box-shadow: 0px 10px 30px 10px rgba(211, 215, 221, 0.4);
|
padding: 20px;
|
margin: 20px auto;
|
font-size: 14px;
|
}
|
</style>
|
