|
|
@@ -71,7 +71,7 @@
|
|
|
layout="prev, pager, next, jumper"
|
|
|
:current-page.sync="currentPage"
|
|
|
:page-size="pageSize"
|
|
|
- :total="total"
|
|
|
+ :total="data.length"
|
|
|
@current-change="handleCurrentChange"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
@@ -81,6 +81,7 @@
|
|
|
<!-- 添加账号弹窗区域 -->
|
|
|
<el-dialog
|
|
|
:title="popTitle"
|
|
|
+ :destroy-on-close="clean"
|
|
|
width="30%"
|
|
|
:visible.sync="dialogVisible"
|
|
|
:close-on-click-modal="false"
|
|
|
@@ -116,8 +117,8 @@
|
|
|
|
|
|
<el-form-item label="角色" prop="identity">
|
|
|
<el-select v-model="ruleForm.identity" placeholder="请选择角色">
|
|
|
- <el-option label="超级管理员" value="shanghai"></el-option>
|
|
|
- <el-option label="管理员" value="beijing"></el-option>
|
|
|
+ <el-option label="超级管理员" value="超级管理员"></el-option>
|
|
|
+ <el-option label="管理员" value="管理员"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="权限分配" prop="type">
|
|
|
@@ -152,6 +153,8 @@ export default {
|
|
|
dialogVisible: false,
|
|
|
// 添加账号弹窗标题
|
|
|
popTitle: "添加账号",
|
|
|
+ // 表格显示多少条数据
|
|
|
+ data: [],
|
|
|
// 表格数据
|
|
|
tableData: [
|
|
|
{
|
|
|
@@ -164,6 +167,76 @@ export default {
|
|
|
name: "张三",
|
|
|
identity: "管理员",
|
|
|
},
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645898888",
|
|
|
+ name: "张三",
|
|
|
+ identity: "管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645898888",
|
|
|
+ name: "张三",
|
|
|
+ identity: "管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645898888",
|
|
|
+ name: "张三",
|
|
|
+ identity: "管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645898888",
|
|
|
+ name: "张三",
|
|
|
+ identity: "管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645898888",
|
|
|
+ name: "张三",
|
|
|
+ identity: "管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645898888",
|
|
|
+ name: "张三",
|
|
|
+ identity: "管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "13645895689",
|
|
|
+ name: "王小虎",
|
|
|
+ identity: "超级管理员",
|
|
|
+ },
|
|
|
],
|
|
|
// 搜索框绑定数据
|
|
|
searchValue: "",
|
|
|
@@ -180,6 +253,8 @@ export default {
|
|
|
identity: "",
|
|
|
type: [],
|
|
|
},
|
|
|
+ // 弹窗表格绑定数据清空
|
|
|
+ clean: false,
|
|
|
// 添加账号弹窗表格验证规则
|
|
|
rules: {
|
|
|
name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
|
|
|
@@ -206,28 +281,30 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.data = this.tableData;
|
|
|
+ this.handleCurrentChange(this.currentPage);
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 添加账号按钮回调
|
|
|
handleAdd() {
|
|
|
- this.ruleForm.name = "";
|
|
|
- this.ruleForm.phone = "";
|
|
|
- this.ruleForm.identity = "";
|
|
|
+ this.clean = true;
|
|
|
this.ruleForm.type = [];
|
|
|
this.dialogVisible = true;
|
|
|
this.popTitle = "添加账号";
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.ruleForm.resetFields();
|
|
|
});
|
|
|
+ this.clean = false;
|
|
|
},
|
|
|
// 编辑按钮回调
|
|
|
handleEdit(row) {
|
|
|
- console.log(row);
|
|
|
+ // console.log(row);
|
|
|
this.ruleForm.phone = row.number;
|
|
|
this.ruleForm.name = row.name;
|
|
|
this.ruleForm.identity = row.identity;
|
|
|
this.dialogVisible = true;
|
|
|
this.popTitle = "编辑账号";
|
|
|
- Object.assign(this.ruleForm, row);
|
|
|
},
|
|
|
// 删除按钮回调
|
|
|
handleDelete(row) {
|
|
|
@@ -238,6 +315,14 @@ export default {
|
|
|
type: "warning",
|
|
|
})
|
|
|
.then(() => {
|
|
|
+ this.data.forEach((item, index) => {
|
|
|
+ console.log(row.number == item.number);
|
|
|
+ if (row.number == item.number) {
|
|
|
+ this.data.splice(index, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.currentPage = Math.ceil(this.data.length / this.pageSize);
|
|
|
+ this.handleCurrentChange(this.currentPage);
|
|
|
this.$message.success("删除成功");
|
|
|
})
|
|
|
.catch(() => {
|
|
|
@@ -246,8 +331,12 @@ export default {
|
|
|
},
|
|
|
// 分页器换页回调
|
|
|
handleCurrentChange(value) {
|
|
|
- console.log(value);
|
|
|
this.currentPage = value;
|
|
|
+ if (this.data.length >= 8) {
|
|
|
+ this.tableData = this.data.slice((value - 1) * 8, value * 8);
|
|
|
+ } else {
|
|
|
+ this.tableData = this.data;
|
|
|
+ }
|
|
|
},
|
|
|
// 添加账号弹窗关闭弹窗回调
|
|
|
handleClose(done) {
|
|
|
@@ -268,7 +357,9 @@ export default {
|
|
|
identity: this.ruleForm.identity,
|
|
|
type: this.ruleForm.type,
|
|
|
};
|
|
|
- this.tableData.push(arr);
|
|
|
+ this.data.push(arr);
|
|
|
+ this.currentPage = Math.ceil(this.data.length / this.pageSize);
|
|
|
+ this.handleCurrentChange(this.currentPage);
|
|
|
this.dialogVisible = false;
|
|
|
} else {
|
|
|
console.log("error submit!!");
|
|
|
@@ -340,6 +431,9 @@ export default {
|
|
|
}
|
|
|
tr {
|
|
|
height: 64px;
|
|
|
+ td {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
}
|
|
|
th {
|
|
|
font-weight: 400;
|