<template>
|
<div class="table-container">
|
<vab-query-form>
|
<vab-query-form-left-panel>
|
<el-form
|
ref="form"
|
:model="queryForm"
|
:inline="true"
|
@submit.native.prevent
|
>
|
<el-form-item>
|
<el-input
|
v-model="queryForm.name"
|
placeholder="姓名/用户名/手机号"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
icon="el-icon-search"
|
type="primary"
|
native-type="submit"
|
@click="handleQuery"
|
>查询</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</vab-query-form-left-panel>
|
<vab-query-form-right-panel>
|
<el-button icon="el-icon-plus" type="primary" @click="handleAdd">
|
添加</el-button
|
>
|
<el-button icon="el-icon-delete" type="danger" @click="handleDelete"
|
>删除</el-button
|
>
|
</vab-query-form-right-panel>
|
</vab-query-form>
|
|
<el-table
|
ref="tableSort"
|
v-loading="listLoading"
|
stripe
|
:data="list"
|
:element-loading-text="elementLoadingText"
|
:height="height"
|
@selection-change="setSelectRows"
|
>
|
<!-- <el-table-column show-overflow-tooltip type="selection" width="55"></el-table-column> -->
|
<el-table-column show-overflow-tooltip label="序号" width="95">
|
<template #default="scope">{{ scope.$index + 1 }}</template>
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="username"
|
label="用户名"
|
></el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="name"
|
label="姓名"
|
></el-table-column>
|
<el-table-column prop="tel" label="手机号"> </el-table-column>
|
<el-table-column label="权限">
|
<template #default="{ row }">
|
<el-tag :type="row.permissions == 'admin' ? 'danger' : 'success'">{{
|
row.permissions
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="创建时间"
|
prop="createdAt"
|
width="200"
|
></el-table-column>
|
<el-table-column label="操作" width="180px">
|
<template #default="{ row }">
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
<el-button
|
type="text"
|
style="color: red"
|
@click="handleDeleteRow(row)"
|
>删除</el-button
|
>
|
<el-button type="text" @click="resetPassword(row)"
|
>重置密码</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
:background="background"
|
:current-page="queryForm.pageNo"
|
:layout="layout"
|
:page-size="queryForm.pageSize"
|
:total="total"
|
@current-change="handleCurrentChange"
|
@size-change="handleSizeChange"
|
></el-pagination>
|
<table-edit ref="edit" @fetch-data="fetchData"></table-edit>
|
</div>
|
</template>
|
|
<script>
|
import { getUsers, deleteUser, updatePassword } from "@/api/user";
|
|
import TableEdit from "./components/UserEdit.vue";
|
export default {
|
name: "ComprehensiveTable",
|
components: {
|
TableEdit,
|
},
|
data() {
|
return {
|
list: [],
|
listLoading: true,
|
layout: "total, sizes, prev, pager, next, jumper",
|
|
total: 0,
|
background: true,
|
selectRows: "",
|
elementLoadingText: "正在加载...",
|
queryForm: {
|
pageNo: 1,
|
pageSize: 20,
|
name: "",
|
},
|
};
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight();
|
},
|
},
|
mounted() {
|
this.fetchData();
|
},
|
methods: {
|
setSelectRows(val) {
|
this.selectRows = val;
|
},
|
handleAdd() {
|
this.$refs["edit"].showEdit();
|
},
|
handleEdit(row) {
|
this.$refs["edit"].showEdit(row);
|
},
|
handleDelete(row) {
|
if (this.selectRows.length > 0) {
|
const ids = this.selectRows.map((item) => item.id).join();
|
this.$baseConfirm("你确定要删除选中项吗", null, async () => {
|
const { msg } = await doDelete({ ids: ids });
|
this.$baseMessage(msg, "success");
|
this.fetchData();
|
});
|
} else {
|
this.$baseMessage("未选中任何行", "error");
|
return false;
|
}
|
},
|
handleDeleteRow(row) {
|
if (row.id) {
|
this.$baseConfirm("你确定要删除当前项吗", null, async () => {
|
const { msg } = await deleteUser(row.id);
|
this.$baseMessage(msg, "success");
|
this.fetchData();
|
});
|
}
|
},
|
handleSizeChange(val) {
|
this.queryForm.pageSize = val;
|
this.fetchData();
|
},
|
handleCurrentChange(val) {
|
this.queryForm.pageNo = val;
|
this.fetchData();
|
},
|
handleQuery() {
|
this.queryForm.pageNo = 1;
|
this.fetchData();
|
},
|
async fetchData() {
|
this.listLoading = true;
|
this.list = [];
|
const { data, total } = await getUsers(this.queryForm);
|
|
if (data) {
|
this.list = data;
|
}
|
|
this.total = total;
|
setTimeout(() => {
|
this.listLoading = false;
|
}, 500);
|
},
|
|
resetPassword(row) {
|
const h = this.$createElement;
|
let desc = ""; // 这里保存输入的值
|
this.$msgbox({
|
// msgbox里面如果是dom元素，只能是原生的dom，如果想用elmentui，就应该手动给他添加类
|
title: "重置密码",
|
message: h(
|
"div",
|
{
|
class: {
|
"el-input": true,
|
"el-input--small": true,
|
"el-input--suffix": true,
|
},
|
},
|
[
|
h("input", {
|
domProps: {
|
type: "text",
|
value: desc,
|
placeholder: "请输入6位以上密码",
|
},
|
class: {
|
"el-input__inner": true,
|
},
|
on: {
|
change: function (event) {
|
desc = event.target.value; // 监听change事件，手动的将值给保存到desc中
|
},
|
},
|
}),
|
]
|
),
|
showCancelButton: true,
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputPattern: /^[0-9A-Za-z]{6,}$/,
|
inputErrorMessage: "密码长度要大于6位",
|
beforeClose: (action, instance, done) => {
|
if (action === "confirm") {
|
instance.confirmButtonLoading = true;
|
instance.confirmButtonText = "提交...";
|
updatePassword(row.id, { newPassword: desc }).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$baseMessage(rsp.msg, "success");
|
done();
|
}
|
|
instance.confirmButtonLoading = false;
|
});
|
} else {
|
done();
|
}
|
},
|
});
|
},
|
},
|
};
|
</script>
|
