表格tooltip 字段修改统一

This commit is contained in:
fengachen
2021-08-24 14:09:28 +08:00
parent b237c799c0
commit 246a3010d8
13 changed files with 348 additions and 550 deletions
+26 -241
View File
@@ -21,7 +21,7 @@
</div>
<!-- 操作按钮区域 -->
<div class="table-operator" style="margin: 5px 0 10px 2px">
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:role:add'">新建角色</a-button>
<a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:role:add'">添加角色</a-button>
<a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
</div>
<div style="margin-top: 15px">
@@ -36,12 +36,18 @@
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:expandedRowKeys="expandedRowKeys"
@expandedRowsChange="handleExpandedRowsChange"
@change="handleTableChange">
<span slot="action" class="action-span-cell" slot-scope="text, record">
<a @click="handlePerssion(record.id)">授权</a>
<a @click="handleEdit(record)" v-has="'sys:role:edit'">编辑</a>
<a @click="handleDelete1(record.id)" v-has="'sys:role:del'">删除</a>
<a @click="handleDelete(record.id)" v-has="'sys:role:del'">删除</a>
</span>
<template slot-scope="text" slot="text">
<j-ellipsis v-if="text" :length="20" :value="text"></j-ellipsis>
<span v-else></span>
</template>
</a-table>
</div>
@@ -51,10 +57,11 @@
</template>
<script>
import { JeroListMixin } from "@/mixins/JeroListMixin";
import { deleteAction, postAction, getAction } from "@/api/manage";
import {postAction, getAction } from "@/api/manage";
import RoleModal from "./modules/RoleModal";
import { filterObj } from "@/utils/util";
import UserRoleModal from "./modules/UserRoleModal";
import JEllipsis from "@comp/jero/JEllipsis";
import moment from "moment";
export default {
@@ -63,6 +70,7 @@ export default {
components: {
UserRoleModal,
RoleModal,
JEllipsis,
moment
},
data() {
@@ -70,70 +78,30 @@ export default {
model1: {},
model2: {},
currentRoleId: "",
queryParam1: {},
queryParam2: {},
dataSource1: [],
dataSource2: [],
selectedRowKeys: [],
ipagination1: {
current: 1,
pageSize: 10,
pageSizeOptions: ["10", "20", "30"],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条";
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
ipagination2: {
current: 1,
pageSize: 10,
pageSizeOptions: ["10", "20", "30"],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条";
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
isorter1: {
column: "createTime",
order: "desc"
},
isorter2: {
column: "createTime",
order: "desc"
},
filters1: {},
filters2: {},
loading1: false,
loading2: false,
selectedRowKeys1: [],
selectedRowKeys2: [],
selectionRows1: [],
selectionRows2: [],
test: {},
rightcolval: 0,
expandedRowKeys:[],
columns:
[
{
title: "角色编码",
align: "center",
dataIndex: "roleCode"
dataIndex: "roleCode",
scopedSlots: {customRender: 'text'}
},
{
title: "角色名称",
align: "center",
dataIndex: "roleName"
dataIndex: "roleName",
scopedSlots: {customRender: 'text'}
},
{
title: "创建时间",
dataIndex: "createTime",
align: "center",
sorter: true,
scopedSlots: {customRender: 'text'},
customRender: (text) => {
return moment(text).format("YYYY-MM-DD");
return moment(text).format("YYYY-MM-DD HH:mm:ss");
}
},
{
@@ -143,37 +111,6 @@ export default {
scopedSlots: { customRender: "action" }
}
],
columns2: [{
title: "用户账号",
align: "center",
dataIndex: "username",
width: 120
},
{
title: "用户名称",
align: "center",
width: 100,
dataIndex: "realname"
},
{
title: "状态",
align: "center",
width: 80,
dataIndex: "status_dictText"
},
{
title: "操作",
dataIndex: "action",
scopedSlots: { customRender: "action" },
align: "center",
width: 120
}],
// 高级查询参数
superQueryParams2: "",
// 高级查询拼接条件
superQueryMatchType2: "and",
url: {
list: "/sys/role/page",
delete: "/sys/role/delete",
@@ -190,157 +127,13 @@ export default {
computed: {
importExcelUrl: function() {
return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
},
leftColMd() {
return this.selectedRowKeys1.length === 0 ? 24 : 12;
},
rightColMd() {
return this.selectedRowKeys1.length === 0 ? 0 : 12;
}
},
methods: {
onSelectChange2(selectedRowKeys, selectionRows) {
this.selectedRowKeys2 = selectedRowKeys;
this.selectionRows2 = selectionRows;
},
onClearSelected2() {
this.selectedRowKeys2 = [];
this.selectionRows2 = [];
},
onClearSelected1() {
onClearSelected() {
this.selectedRowKeys1 = [];
this.selectionRows1 = [];
},
onSelectChange1(selectedRowKeys, selectionRows) {
this.rightcolval = 1;
this.selectedRowKeys1 = selectedRowKeys;
this.selectionRows1 = selectionRows;
this.model1 = Object.assign({}, selectionRows[0]);
console.log(this.model1);
this.currentRoleId = selectedRowKeys[0];
this.loadData2();
},
onClearSelected() {
},
getQueryParams2() {
//获取查询条件
let sqp = {};
if (this.superQueryParams2) {
sqp["superQueryParams"] = encodeURI(this.superQueryParams2);
sqp["superQueryMatchType"] = this.superQueryMatchType2;
}
var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2);
param.field = this.getQueryField2();
param.pageNo = this.ipagination2.current;
param.pageSize = this.ipagination2.pageSize;
return filterObj(param);
},
getQueryField2() {
//TODO 字段权限控制
var str = "id,";
this.columns2.forEach(function(value) {
str += "," + value.dataIndex;
});
return str;
},
handleEdit2: function(record) {
this.$refs.modalForm2.title = "编辑";
this.$refs.modalForm2.roleDisabled = true;
this.$refs.modalForm2.edit(record);
},
handleAdd2: function() {
if (this.currentRoleId == "") {
this.$message.error("请选择一个角色!");
} else {
this.$refs.modalForm2.roleDisabled = true;
this.$refs.modalForm2.selectedRole = [this.currentRoleId];
this.$refs.modalForm2.add();
this.$refs.modalForm2.title = "新增";
}
},
modalFormOk2() {
// 新增/修改 成功时,重载列表
this.loadData2();
},
loadData2(arg) {
if (!this.url.list2) {
this.$message.error("请设置url.list2属性!");
return;
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination2.current = 1;
}
if (this.currentRoleId === "") return;
let params = this.getQueryParams2();//查询条件
params.roleId = this.currentRoleId;
this.loading2 = true;
getAction(this.url.list2, params).then((res) => {
if (res.success) {
this.dataSource2 = res.result.records;
this.ipagination2.total = res.result.total;
}
this.loading2 = false;
});
},
handleDelete1: function(id) {
this.handleDelete(id);
this.dataSource2 = [];
this.currentRoleId = "";
},
handleDelete2: function(id) {
if (!this.url.delete2) {
this.$message.error("请设置url.delete2属性!");
return;
}
var that = this;
deleteAction(that.url.delete2, { roleId: this.currentRoleId, userId: id }).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData2();
} else {
that.$message.warning(res.message);
}
});
},
batchDel2: function() {
if (!this.url.deleteBatch2) {
this.$message.error("请设置url.deleteBatch2属性!");
return;
}
if (this.selectedRowKeys2.length <= 0) {
this.$message.warning("请选择一条记录!");
return;
} else {
var ids = "";
for (var a = 0; a < this.selectedRowKeys2.length; a++) {
ids += this.selectedRowKeys2[a] + ",";
}
var that = this;
console.log(this.currentDeptId);
this.$confirm({
title: "确认删除",
content: "是否删除选中数据?",
onOk: function() {
deleteAction(that.url.deleteBatch2, { roleId: that.currentRoleId, userIds: ids }).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData2();
that.onClearSelected();
} else {
that.$message.warning(res.message);
}
});
}
});
}
},
selectOK(data) {
let params = {};
params.roleId = this.currentRoleId;
@@ -381,23 +174,15 @@ export default {
this.queryParam2 = {};
this.loadData2(1);
},
handleTableChange2(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter2.column = sorter.field;
this.isorter2.order = "ascend" == sorter.order ? "asc" : "desc";
}
this.ipagination2 = pagination;
this.loadData2();
},
hideUserList() {
//this.rightcolval = 0
this.selectedRowKeys1 = [];
},
/*
* 授权
* */
handlePerssion(roleId) {
this.$refs.modalUserRole.show(roleId);
}
},
handleExpandedRowsChange(expandedRows) {
this.expandedRowKeys = expandedRows
},
}
};
</script>