style: 修复表格抖动bug

This commit is contained in:
q4speed 2020-08-25 17:47:58 +08:00
parent 8531e7e176
commit 954262a631
2 changed files with 317 additions and 316 deletions

View File

@ -12,8 +12,9 @@
<el-table-column prop="description" :label="$t('commons.description')"/>
<el-table-column :label="$t('commons.member')">
<template v-slot:default="scope">
<el-button type="text" class="member-size" @click="cellClick(scope.row)">{{scope.row.memberSize}}
</el-button>
<el-link type="primary" class="member-size" @click="cellClick(scope.row)">
{{ scope.row.memberSize }}
</el-link>
</template>
</el-table-column>
<el-table-column :label="$t('commons.operating')">
@ -27,7 +28,8 @@
</el-card>
<!-- dialog of organization member -->
<el-dialog :visible.sync="dialogOrgMemberVisible" width="70%" :destroy-on-close="true" @close="closeFunc" class="dialog-css">
<el-dialog :visible.sync="dialogOrgMemberVisible" width="70%" :destroy-on-close="true" @close="closeFunc"
class="dialog-css">
<ms-table-header :condition.sync="dialogCondition" @create="addMember" @search="dialogSearch"
:create-tip="$t('member.create')" :title="$t('commons.member')"/>
<!-- organization member table -->
@ -43,7 +45,8 @@
</el-table-column>
<el-table-column :label="$t('commons.operating')">
<template v-slot:default="scope">
<ms-table-operator :tip2="$t('commons.remove')" @editClick="editMember(scope.row)" @deleteClick="delMember(scope.row)"/>
<ms-table-operator :tip2="$t('commons.remove')" @editClick="editMember(scope.row)"
@deleteClick="delMember(scope.row)"/>
</template>
</el-table-column>
</el-table>
@ -146,7 +149,8 @@
<el-form-item :label="$t('commons.phone')" prop="phone">
<el-input v-model="memberForm.phone" autocomplete="off" :disabled="true"/>
</el-form-item>
<el-form-item :label="$t('commons.role')" prop="roleIds" :rules="{required: true, message: $t('role.please_choose_role'), trigger: 'change'}">
<el-form-item :label="$t('commons.role')" prop="roleIds"
:rules="{required: true, message: $t('role.please_choose_role'), trigger: 'change'}">
<el-select v-model="memberForm.roleIds" multiple :placeholder="$t('role.please_choose_role')"
class="select-width">
<el-option
@ -171,333 +175,331 @@
</template>
<script>
import MsCreateBox from "../CreateBox";
import MsTablePagination from "../../common/pagination/TablePagination";
import MsTableHeader from "../../common/components/MsTableHeader";
import MsRolesTag from "../../common/components/MsRolesTag";
import MsTableOperator from "../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
import MsDialogFooter from "../../common/components/MsDialogFooter";
import {
getCurrentOrganizationId,
getCurrentUser, listenGoBack,
refreshSessionAndCookies,
removeGoBackListener
} from "../../../../common/js/utils";
import {DEFAULT, ORGANIZATION} from "../../../../common/js/constants";
import MsDeleteConfirm from "../../common/components/MsDeleteConfirm";
import MsCreateBox from "../CreateBox";
import MsTablePagination from "../../common/pagination/TablePagination";
import MsTableHeader from "../../common/components/MsTableHeader";
import MsRolesTag from "../../common/components/MsRolesTag";
import MsTableOperator from "../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
import MsDialogFooter from "../../common/components/MsDialogFooter";
import {
getCurrentOrganizationId,
getCurrentUser,
listenGoBack,
refreshSessionAndCookies,
removeGoBackListener
} from "@/common/js/utils";
import {DEFAULT, ORGANIZATION} from "@/common/js/constants";
import MsDeleteConfirm from "../../common/components/MsDeleteConfirm";
export default {
name: "MsOrganization",
components: {
MsDeleteConfirm,
MsCreateBox,
MsTablePagination,
MsTableHeader,
MsRolesTag,
MsTableOperator,
MsDialogFooter,
MsTableOperatorButton
},
data() {
return {
queryPath: '/organization/list',
deletePath: '/organization/delete/',
createPath: '/organization/add',
updatePath: '/organization/update',
result: {},
dialogOrgAddVisible: false,
dialogOrgUpdateVisible: false,
dialogOrgMemberVisible: false,
dialogOrgMemberAddVisible: false,
dialogOrgMemberUpdateVisible: false,
multipleSelection: [],
currentPage: 1,
pageSize: 5,
total: 0,
dialogCurrentPage: 1,
dialogPageSize: 5,
dialogTotal: 0,
currentRow: {},
condition: {},
dialogCondition: {},
tableData: [],
memberLineData: [],
form: {},
memberForm: {},
rule: {
name: [
{required: true, message: this.$t('organization.input_name'), trigger: 'blur'},
{min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'},
{
required: true,
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
message: this.$t('organization.special_characters_are_not_supported'),
trigger: 'blur'
}
],
description: [
{max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur'}
]
},
orgMemberRule: {
userIds: [
{required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
],
roleIds: [
{required: true, message: this.$t('role.please_choose_role'), trigger: ['blur']}
]
}
export default {
name: "MsOrganization",
components: {
MsDeleteConfirm,
MsCreateBox,
MsTablePagination,
MsTableHeader,
MsRolesTag,
MsTableOperator,
MsDialogFooter,
MsTableOperatorButton
},
data() {
return {
queryPath: '/organization/list',
deletePath: '/organization/delete/',
createPath: '/organization/add',
updatePath: '/organization/update',
result: {},
dialogOrgAddVisible: false,
dialogOrgUpdateVisible: false,
dialogOrgMemberVisible: false,
dialogOrgMemberAddVisible: false,
dialogOrgMemberUpdateVisible: false,
multipleSelection: [],
currentPage: 1,
pageSize: 5,
total: 0,
dialogCurrentPage: 1,
dialogPageSize: 5,
dialogTotal: 0,
currentRow: {},
condition: {},
dialogCondition: {},
tableData: [],
memberLineData: [],
form: {},
memberForm: {},
rule: {
name: [
{required: true, message: this.$t('organization.input_name'), trigger: 'blur'},
{min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'},
{
required: true,
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
message: this.$t('organization.special_characters_are_not_supported'),
trigger: 'blur'
}
],
description: [
{max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur'}
]
},
orgMemberRule: {
userIds: [
{required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
],
roleIds: [
{required: true, message: this.$t('role.please_choose_role'), trigger: ['blur']}
]
}
}
},
activated() {
this.initTableData();
},
methods: {
create() {
this.dialogOrgAddVisible = true;
listenGoBack(this.closeFunc);
},
activated() {
this.initTableData();
addMember() {
this.dialogOrgMemberAddVisible = true;
this.memberForm = {};
this.result = this.$get('/user/list/', response => {
this.$set(this.memberForm, "userList", response.data);
});
this.result = this.$get('/role/list/org', response => {
this.$set(this.memberForm, "roles", response.data);
})
},
methods: {
create() {
this.dialogOrgAddVisible = true;
listenGoBack(this.closeFunc);
},
addMember() {
this.dialogOrgMemberAddVisible = true;
this.memberForm = {};
this.result = this.$get('/user/list/', response => {
this.$set(this.memberForm, "userList", response.data);
});
this.result = this.$get('/role/list/org', response => {
this.$set(this.memberForm, "roles", response.data);
})
},
edit(row) {
this.dialogOrgUpdateVisible = true;
this.form = Object.assign({}, row);
listenGoBack(this.closeFunc);
},
editMember(row) {
this.dialogOrgMemberUpdateVisible = true;
this.memberForm = Object.assign({}, row);
let roleIds = this.memberForm.roles.map(r => r.id);
this.result = this.$get('/role/list/org', response => {
this.$set(this.memberForm, "allroles", response.data);
})
//
this.$set(this.memberForm, 'roleIds', roleIds);
listenGoBack(this.closeFunc);
},
cellClick(row) {
// currentRow
this.currentRow = row;
this.dialogOrgMemberVisible = true;
let param = {
name: '',
organizationId: row.id
};
let path = "/user/special/org/member/list";
this.result = this.$post(path + "/" + this.dialogCurrentPage + "/" + this.dialogPageSize, param, res => {
let data = res.data;
this.memberLineData = data.listObject;
let url = "/userrole/list/org/" + row.id;
for (let i = 0; i < this.memberLineData.length; i++) {
this.$get(url + "/" + encodeURIComponent(this.memberLineData[i].id), response => {
let roles = response.data;
this.$set(this.memberLineData[i], "roles", roles);
})
edit(row) {
this.dialogOrgUpdateVisible = true;
this.form = Object.assign({}, row);
listenGoBack(this.closeFunc);
},
editMember(row) {
this.dialogOrgMemberUpdateVisible = true;
this.memberForm = Object.assign({}, row);
let roleIds = this.memberForm.roles.map(r => r.id);
this.result = this.$get('/role/list/org', response => {
this.$set(this.memberForm, "allroles", response.data);
})
//
this.$set(this.memberForm, 'roleIds', roleIds);
listenGoBack(this.closeFunc);
},
cellClick(row) {
// currentRow
this.currentRow = row;
this.dialogOrgMemberVisible = true;
let param = {
name: '',
organizationId: row.id
};
let path = "/user/special/org/member/list";
this.result = this.$post(path + "/" + this.dialogCurrentPage + "/" + this.dialogPageSize, param, res => {
let data = res.data;
this.memberLineData = data.listObject;
let url = "/userrole/list/org/" + row.id;
for (let i = 0; i < this.memberLineData.length; i++) {
this.$get(url + "/" + encodeURIComponent(this.memberLineData[i].id), response => {
let roles = response.data;
this.$set(this.memberLineData[i], "roles", roles);
})
}
this.dialogTotal = data.itemCount;
});
listenGoBack(this.closeFunc);
},
dialogSearch() {
let row = this.currentRow;
this.dialogOrgMemberVisible = true;
let param = this.dialogCondition;
this.$set(param, 'organizationId', row.id);
let path = "/user/special/org/member/list";
this.result = this.$post(path + "/" + this.dialogCurrentPage + "/" + this.dialogPageSize, param, res => {
let data = res.data;
this.memberLineData = data.listObject;
let url = "/userrole/list/org/" + row.id;
for (let i = 0; i < this.memberLineData.length; i++) {
this.$get(url + "/" + encodeURIComponent(this.memberLineData[i].id), response => {
let roles = response.data;
this.$set(this.memberLineData[i], "roles", roles);
})
}
this.dialogTotal = data.itemCount;
});
},
handleDelete(organization) {
this.$refs.deleteConfirm.open(organization);
},
_handleDelete(organization) {
this.$confirm(this.$t('organization.delete_confirm'), '', {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: 'warning'
}).then(() => {
this.result = this.$get(this.deletePath + organization.id, () => {
let lastOrganizationId = getCurrentOrganizationId();
let sourceId = organization.id;
if (lastOrganizationId === sourceId) {
refreshSessionAndCookies(DEFAULT, sourceId);
}
this.dialogTotal = data.itemCount;
this.$success(this.$t('commons.delete_success'));
this.initTableData();
});
listenGoBack(this.closeFunc);
},
dialogSearch() {
let row = this.currentRow;
this.dialogOrgMemberVisible = true;
let param = this.dialogCondition;
this.$set(param, 'organizationId', row.id);
let path = "/user/special/org/member/list";
this.result = this.$post(path + "/" + this.dialogCurrentPage + "/" + this.dialogPageSize, param, res => {
let data = res.data;
this.memberLineData = data.listObject;
let url = "/userrole/list/org/" + row.id;
for (let i = 0; i < this.memberLineData.length; i++) {
this.$get(url + "/" + encodeURIComponent(this.memberLineData[i].id), response => {
let roles = response.data;
this.$set(this.memberLineData[i], "roles", roles);
})
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('commons.delete_cancelled')
});
});
},
delMember(row) {
this.$confirm(this.$t('member.remove_member'), '', {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: 'warning'
}).then(() => {
this.result = this.$get('/user/special/org/member/delete/' + this.currentRow.id + '/' + encodeURIComponent(row.id), () => {
let sourceId = this.currentRow.id;
let currentUser = getCurrentUser();
let userId = row.id;
if (currentUser.id === userId) {
refreshSessionAndCookies(ORGANIZATION, sourceId);
}
this.dialogTotal = data.itemCount;
this.$success(this.$t('commons.remove_success'))
this.cellClick(this.currentRow);
});
},
handleDelete(organization) {
this.$refs.deleteConfirm.open(organization);
},
_handleDelete(organization) {
this.$confirm(this.$t('organization.delete_confirm'), '', {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: 'warning'
}).then(() => {
this.result = this.$get(this.deletePath + organization.id, () => {
let lastOrganizationId = getCurrentOrganizationId();
let sourceId = organization.id;
if (lastOrganizationId === sourceId) {
let sign = DEFAULT;
refreshSessionAndCookies(sign, sourceId);
}
this.$success(this.$t('commons.delete_success'));
}).catch(() => {
this.$info(this.$t('commons.remove_cancel'));
});
},
createOrganization(createOrganizationForm) {
this.$refs[createOrganizationForm].validate(valid => {
if (valid) {
this.result = this.$post(this.createPath, this.form, () => {
this.$success(this.$t('commons.save_success'));
this.initTableData();
this.dialogOrgAddVisible = false;
});
} else {
return false;
}
})
},
updateOrganization(updateOrganizationForm) {
this.$refs[updateOrganizationForm].validate(valid => {
if (valid) {
this.result = this.$post(this.updatePath, this.form, () => {
this.$success(this.$t('commons.modify_success'));
this.dialogOrgUpdateVisible = false;
this.initTableData();
});
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('commons.delete_cancelled')
});
});
},
delMember(row) {
this.$confirm(this.$t('member.remove_member'), '', {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: 'warning'
}).then(() => {
this.result = this.$get('/user/special/org/member/delete/' + this.currentRow.id + '/' + encodeURIComponent(row.id), () => {
} else {
return false;
}
})
},
initTableData() {
this.result = this.$post(this.queryPath + "/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
let data = response.data;
this.tableData = data.listObject;
for (let i = 0; i < this.tableData.length; i++) {
let param = {
name: '',
organizationId: this.tableData[i].id
}
let path = "user/special/org/member/list/all";
this.$post(path, param, res => {
let member = res.data;
this.$set(this.tableData[i], "memberSize", member.length);
})
}
this.total = data.itemCount;
})
},
closeFunc() {
this.memberLineData = [];
this.initTableData();
this.form = {};
removeGoBackListener(this.closeFunc);
this.dialogOrgAddVisible = false;
this.dialogOrgUpdateVisible = false;
this.dialogOrgMemberVisible = false;
this.dialogOrgMemberAddVisible = false;
this.dialogOrgMemberUpdateVisible = false;
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let param = {
userIds: this.memberForm.userIds,
roleIds: this.memberForm.roleIds,
organizationId: this.currentRow.id
};
this.result = this.$post("user/special/org/member/add", param, () => {
let sign = "other";
let sourceId = this.currentRow.id;
let currentUser = getCurrentUser();
let userId = row.id;
if (currentUser.id === userId) {
let sign = ORGANIZATION;
refreshSessionAndCookies(sign, sourceId);
}
this.$success(this.$t('commons.remove_success'))
refreshSessionAndCookies(sign, sourceId);
this.cellClick(this.currentRow);
this.dialogOrgMemberAddVisible = false;
})
} else {
return false;
}
});
},
updateOrgMember(formName) {
let param = {
id: this.memberForm.id,
name: this.memberForm.name,
email: this.memberForm.email,
phone: this.memberForm.phone,
roleIds: this.memberForm.roleIds,
organizationId: this.currentRow.id
}
this.$refs[formName].validate((valid) => {
if (valid) {
this.result = this.$post("/organization/member/update", param, () => {
this.$success(this.$t('commons.modify_success'));
this.dialogOrgMemberUpdateVisible = false;
this.cellClick(this.currentRow);
});
}).catch(() => {
this.$info(this.$t('commons.remove_cancel'));
});
},
createOrganization(createOrganizationForm) {
this.$refs[createOrganizationForm].validate(valid => {
if (valid) {
this.result = this.$post(this.createPath, this.form, () => {
this.$success(this.$t('commons.save_success'));
this.initTableData();
this.dialogOrgAddVisible = false;
});
} else {
return false;
}
})
},
updateOrganization(updateOrganizationForm) {
this.$refs[updateOrganizationForm].validate(valid => {
if (valid) {
this.result = this.$post(this.updatePath, this.form, () => {
this.$success(this.$t('commons.modify_success'));
this.dialogOrgUpdateVisible = false;
this.initTableData();
});
} else {
return false;
}
})
},
initTableData() {
this.result = this.$post(this.queryPath + "/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
let data = response.data;
this.tableData = data.listObject;
for (let i = 0; i < this.tableData.length; i++) {
let param = {
name: '',
organizationId: this.tableData[i].id
}
let path = "user/special/org/member/list/all";
this.$post(path, param, res => {
let member = res.data;
this.$set(this.tableData[i], "memberSize", member.length);
})
}
this.total = data.itemCount;
})
},
closeFunc() {
this.memberLineData = [];
this.initTableData();
this.form = {};
removeGoBackListener(this.closeFunc);
this.dialogOrgAddVisible = false;
this.dialogOrgUpdateVisible = false;
this.dialogOrgMemberVisible = false;
this.dialogOrgMemberAddVisible = false;
this.dialogOrgMemberUpdateVisible = false;
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let param = {
userIds: this.memberForm.userIds,
roleIds: this.memberForm.roleIds,
organizationId: this.currentRow.id
};
this.result = this.$post("user/special/org/member/add", param, () => {
let sign = "other";
let sourceId = this.currentRow.id;
refreshSessionAndCookies(sign, sourceId);
this.cellClick(this.currentRow);
this.dialogOrgMemberAddVisible = false;
})
} else {
return false;
}
});
},
updateOrgMember(formName) {
let param = {
id: this.memberForm.id,
name: this.memberForm.name,
email: this.memberForm.email,
phone: this.memberForm.phone,
roleIds: this.memberForm.roleIds,
organizationId: this.currentRow.id
}
this.$refs[formName].validate((valid) => {
if (valid) {
this.result = this.$post("/organization/member/update", param, () => {
this.$success(this.$t('commons.modify_success'));
this.dialogOrgMemberUpdateVisible = false;
this.cellClick(this.currentRow);
});
}
});
},
}
});
},
}
}
</script>
<style scoped>
.member-size {
text-decoration: underline;
cursor: pointer;
}
.member-size {
text-decoration: underline;
}
.org-member-id {
float: left;
}
.org-member-id {
float: left;
}
.org-member-email {
float: right;
color: #8492a6;
font-size: 13px;
}
.org-member-email {
float: right;
color: #8492a6;
font-size: 13px;
}
.select-width {
width: 100%;
}
.select-width {
width: 100%;
}
.dialog-css >>> .el-dialog__header {
padding: 0px;
}
.dialog-css >>> .el-dialog__header {
padding: 0;
}
</style>

View File

@ -12,9 +12,9 @@
<el-table-column prop="organizationName" :label="$t('workspace.organization_name')"/>
<el-table-column :label="$t('commons.member')">
<template v-slot:default="scope">
<el-button type="text" class="member-size" @click="cellClick(scope.row)">
<el-link type="primary" class="member-size" @click="cellClick(scope.row)">
{{scope.row.memberSize}}
</el-button>
</el-link>
</template>
</el-table-column>
<el-table-column :label="$t('commons.operating')">
@ -200,12 +200,11 @@
import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
import MsDialogFooter from "../../common/components/MsDialogFooter";
import {
getCurrentOrganizationId,
getCurrentUser,
getCurrentWorkspaceId, listenGoBack,
refreshSessionAndCookies, removeGoBackListener
} from "../../../../common/js/utils";
import {DEFAULT, WORKSPACE} from "../../../../common/js/constants";
} from "@/common/js/utils";
import {DEFAULT, WORKSPACE} from "@/common/js/constants";
import MsDeleteConfirm from "../../common/components/MsDeleteConfirm";
export default {
@ -537,7 +536,7 @@
}
.dialog-css >>> .el-dialog__header {
padding: 0px;
padding: 0;
}
</style>