test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(表格组件): 滚动条&用例表格操作栏宽度调整

This commit is contained in:
baiqi 2024-11-01 16:43:42 +08:00 committed by Craftsman
parent 6477892630
commit 42d5619af5
3 changed files with 850 additions and 594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
framework/sdk-parent/frontend/src/components/MsTableOperators.vue
View File

@ -1,14 +1,23 @@
<template> <template>
<span class="operator-btn-group"> <div class="operator-btn-group">
<ms-table-operator-button v-for="(btn, index) in buttons" :key="index" <ms-table-operator-button
v-permission="btn.permissions" v-for="(btn, index) in buttons"
:disabled="isDisable(btn)" :key="index"
:class="btn.class" :row-data="row" v-permission="btn.permissions"
:tip="tip(btn)" :icon="btn.icon" :type="btn.type" :disabled="isDisable(btn)"
:isDivButton="btn.isDivButton" :is-text-button="btn.isTextButton" :class="btn.class"
:is-more-operate="btn.isMoreOperate" :child-operate="btn.childOperate" :row-data="row"
@exec="click(btn)" @click.stop="clickStop(btn)"/> :tip="tip(btn)"
</span> :icon="btn.icon"
:type="btn.type"
:isDivButton="btn.isDivButton"
:is-text-button="btn.isTextButton"
:is-more-operate="btn.isMoreOperate"
:child-operate="btn.childOperate"
@exec="click(btn)"
@click.stop="clickStop(btn)"
/>
</div>
</template> </template>
<script> <script>
@ -16,11 +25,11 @@ import MsTableOperatorButton from "./MsTableOperatorButton";
export default { export default {
name: "MsTableOperators", name: "MsTableOperators",
components: {MsTableOperatorButton}, components: { MsTableOperatorButton },
props: { props: {
row: Object, row: Object,
buttons: Array, buttons: Array,
index: Number index: Number,
}, },
methods: { methods: {
click(btn) { click(btn) {
@ -49,11 +58,18 @@ export default {
} else { } else {
return btn.tip; return btn.tip;
} }
} },
} },
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.operator-btn-group {
display: flex;
align-items: center;
gap: 10px;
.el-button {
margin-right: 0;
}
}
</style> </style>

345
framework/sdk-parent/frontend/src/components/new-ui/MsTable.vue
View File

@ -8,11 +8,14 @@
v-loading="tableIsLoading" v-loading="tableIsLoading"
:data="data" :data="data"
:default-sort="defaultSort" :default-sort="defaultSort"
:class="{'ms-select-all-fixed': (showSelectAll && !hidePopover), 'row-click': rowClickStyle}" :class="{
'ms-select-all-fixed': showSelectAll && !hidePopover,
'row-click': rowClickStyle,
}"
:height="screenHeight" :height="screenHeight"
:row-key="rowKey" :row-key="rowKey"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
:row-style='rowStyle' :row-style="rowStyle"
:cell-class-name="addPaddingColClass" :cell-class-name="addPaddingColClass"
:highlight-current-row="highlightCurrentRow" :highlight-current-row="highlightCurrentRow"
:border="enableHeaderDrag" :border="enableHeaderDrag"
@ -25,21 +28,20 @@
@cell-mouse-enter="showPopover" @cell-mouse-enter="showPopover"
@row-click="handleRowClick" @row-click="handleRowClick"
:max-height="enableMaxHeight ? maxHeight : 'auto'" :max-height="enableMaxHeight ? maxHeight : 'auto'"
ref="table"> ref="table"
>
<el-table-column v-if="enableSelection" width="50" type="selection" />
<el-table-column <ms-table-header-select-popover
v-if="enableSelection" v-if="enableSelection && showSelectAll && !hidePopover"
width="50" :page-size="pageSize > total ? total : pageSize"
type="selection"/> :table-data-count-in-page="data.length"
:total="total"
<ms-table-header-select-popover v-if="enableSelection && showSelectAll && !hidePopover" :select-type="condition.selectAll"
:page-size="pageSize > total ? total : pageSize" @selectPageAll="isSelectDataAll(false)"
:table-data-count-in-page="data.length" @selectAll="isSelectDataAll(true)"
:total="total" ref="selectPopover"
:select-type="condition.selectAll" />
@selectPageAll="isSelectDataAll(false)"
@selectAll="isSelectDataAll(true)"
ref="selectPopover"/>
<el-table-column width="1"> <el-table-column width="1">
<template v-slot:header> <template v-slot:header>
@ -51,11 +53,12 @@
<el-table-column <el-table-column
v-if="enableOrderDrag" v-if="enableOrderDrag"
width="20" width="20"
column-key="tableRowDropCol"> column-key="tableRowDropCol"
>
<template v-slot:default="scope"> <template v-slot:default="scope">
<div class="table-row-drop-bar"> <div class="table-row-drop-bar">
<i class="el-icon-more ms-icon-more"/> <i class="el-icon-more ms-icon-more" />
<i class="el-icon-more ms-icon-more"/> <i class="el-icon-more ms-icon-more" />
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -66,36 +69,57 @@
v-if="operators && operators.length > 0" v-if="operators && operators.length > 0"
:fixed="operatorFixed" :fixed="operatorFixed"
:min-width="operatorWidth" :min-width="operatorWidth"
:label="$t('commons.operating')"> :label="$t('commons.operating')"
>
<template slot="header"> <template slot="header">
<header-label-operate <header-label-operate
v-if="fieldKey" v-if="fieldKey"
:disable-header-config="disableHeaderConfig" :disable-header-config="disableHeaderConfig"
@exec="openCustomHeader"/> @exec="openCustomHeader"
/>
</template> </template>
<template <template v-slot:default="scope">
v-slot:default="scope">
<div> <div>
<slot <slot name="opt-before" :row="scope.row"> </slot>
name="opt-before"
:row="scope.row">
</slot>
<ms-table-operators <ms-table-operators
:buttons="operators" :buttons="operators"
:row="scope.row" :row="scope.row"
:index="scope.$index"/> :index="scope.$index"
<slot />
name="opt-behind" <slot name="opt-behind" :row="scope.row"> </slot>
:row="scope.row">
</slot>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<template #empty> <template #empty>
<div style="width: 100%;height: 300px;display: flex;flex-direction: column;justify-content: start;align-items: center"> <div
<img :src="refreshBySearch ? '/assets/module/figma/icon_search_none.svg' : '/assets/module/figma/icon_none.svg'" style="height: 100px;width: 100px;margin-bottom: 0.6rem; margin-top: 3rem"/> style="
<span class="addition-info-title">{{ refreshBySearch ? $t("home.dashboard.public.no_search_data") : $t("home.dashboard.public.no_data") }}</span> width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
"
>
<img
:src="
refreshBySearch
? '/assets/module/figma/icon_search_none.svg'
: '/assets/module/figma/icon_none.svg'
"
style="
height: 100px;
width: 100px;
margin-bottom: 0.6rem;
margin-top: 3rem;
"
/>
<span class="addition-info-title">{{
refreshBySearch
? $t("home.dashboard.public.no_search_data")
: $t("home.dashboard.public.no_data")
}}</span>
</div> </div>
</template> </template>
</el-table> </el-table>
@ -105,8 +129,8 @@
:type="fieldKey" :type="fieldKey"
:custom-fields="customFields" :custom-fields="customFields"
@reload="resetHeader" @reload="resetHeader"
ref="customTableHeader"/> ref="customTableHeader"
/>
</div> </div>
</template> </template>
@ -134,7 +158,7 @@ import MsTableOperators from "../MsTableOperators";
import HeaderLabelOperate from "../head/HeaderLabelOperate"; import HeaderLabelOperate from "../head/HeaderLabelOperate";
import HeaderCustom from "../head/HeaderCustom"; import HeaderCustom from "../head/HeaderCustom";
import MsCustomTableHeader from "../table/MsCustomTableHeader"; import MsCustomTableHeader from "../table/MsCustomTableHeader";
import {getUUID, lineToHump} from "../../utils"; import { getUUID, lineToHump } from "../../utils";
/** /**
* 参考 ApiList * 参考 ApiList
@ -153,7 +177,12 @@ export default {
components: { components: {
MsCustomTableHeader, MsCustomTableHeader,
HeaderLabelOperate, HeaderLabelOperate,
MsTableOperators, MsTableColumn, ShowMoreBtn, MsTablePagination, MsTableHeaderSelectPopover, HeaderCustom MsTableOperators,
MsTableColumn,
ShowMoreBtn,
MsTablePagination,
MsTableHeaderSelectPopover,
HeaderCustom,
}, },
data() { data() {
return { return {
@ -172,13 +201,13 @@ export default {
type: Boolean, type: Boolean,
default() { default() {
return true; return true;
} },
}, },
maxHeight: { maxHeight: {
type: String, type: String,
default() { default() {
return 'calc(100vh)'; return "calc(100vh)";
} },
}, },
screenHeight: { screenHeight: {
type: [String, Number], type: [String, Number],
@ -188,91 +217,91 @@ export default {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
} },
}, },
selectNodeIds: { selectNodeIds: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
data: { data: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
condition: { condition: {
type: Object, type: Object,
default() { default() {
return {}; return {};
} },
}, },
pageSize: { pageSize: {
type: Number, type: Number,
default() { default() {
return 10; return 10;
} },
}, },
total: { total: {
type: Number, type: Number,
default() { default() {
return 10; return 10;
} },
}, },
// 操作按钮 // 操作按钮
operators: { operators: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
//批量操作按钮 //批量操作按钮
batchOperators: { batchOperators: {
type: Array, type: Array,
default() { default() {
return []; return [];
} },
}, },
// 操作列的宽度 // 操作列的宽度
operatorWidth: { operatorWidth: {
type: String, type: String,
default() { default() {
return "150px"; return "150px";
} },
}, },
// 操作列的宽度 // 操作列的宽度
operatorFixed: { operatorFixed: {
type: [String, Boolean], type: [String, Boolean],
default() { default() {
return "right"; return "right";
} },
}, },
//开启全选 //开启全选
enableSelection: { enableSelection: {
type: Boolean, type: Boolean,
default() { default() {
return true; return true;
} },
}, //开启全选 }, //开启全选
showSelectAll: { showSelectAll: {
type: Boolean, type: Boolean,
default() { default() {
return true; return true;
} },
}, },
// 添加鼠标移入小手样式 // 添加鼠标移入小手样式
rowClickStyle: { rowClickStyle: {
type: Boolean, type: Boolean,
default() { default() {
return false; return false;
} },
}, },
tableIsLoading: { tableIsLoading: {
type: [Boolean, Promise], type: [Boolean, Promise],
default() { default() {
return false; return false;
} },
}, },
disableHeaderConfig: Boolean, disableHeaderConfig: Boolean,
fields: Array, fields: Array,
@ -291,11 +320,10 @@ export default {
type: Boolean, type: Boolean,
default() { default() {
return true; return true;
} },
} },
},
created() {
}, },
created() {},
mounted() { mounted() {
this.setDefaultOrders(); this.setDefaultOrders();
this.preventSortableEventPropagation(); this.preventSortableEventPropagation();
@ -324,21 +352,22 @@ export default {
}, },
selectDataCounts(value) { selectDataCounts(value) {
this.$emit("selectCountChange", value); this.$emit("selectCountChange", value);
} },
}, },
methods: { methods: {
preventSortableEventPropagation() { preventSortableEventPropagation() {
document.body.ondrop = function (event) { document.body.ondrop = function (event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} };
}, },
// 批量操作提示, 第一次勾选提示, 之后不提示 // 批量操作提示, 第一次勾选提示, 之后不提示
// 先添加 batch-popper 样式, 全选后再移除样式, 只保留可见框内第一条数据的提示 // 先添加 batch-popper 样式, 全选后再移除样式, 只保留可见框内第一条数据的提示
removeBatchPopper() { removeBatchPopper() {
let elements = window.document.getElementsByClassName('batch-popper'); let elements = window.document.getElementsByClassName("batch-popper");
let tableHeader = window.document.getElementsByClassName('table-column-mark'); let tableHeader =
let columns = window.document.getElementsByClassName('table-more-icon'); window.document.getElementsByClassName("table-column-mark");
let columns = window.document.getElementsByClassName("table-more-icon");
let tableTop = tableHeader[0].getBoundingClientRect().top; let tableTop = tableHeader[0].getBoundingClientRect().top;
let index = 0; let index = 0;
for (let i = 0; i < columns.length; i++) { for (let i = 0; i < columns.length; i++) {
@ -351,7 +380,7 @@ export default {
if (elements) { if (elements) {
for (let i = 0; i < elements.length; i++) { for (let i = 0; i < elements.length; i++) {
if (i == index) { if (i == index) {
elements[i].classList.remove('batch-popper'); elements[i].classList.remove("batch-popper");
setTimeout(() => { setTimeout(() => {
this.hasBatchTipShow = true; this.hasBatchTipShow = true;
}, 1500); }, 1500);
@ -362,15 +391,20 @@ export default {
// 拖拽排序 // 拖拽排序
listenRowDrop() { listenRowDrop() {
if (this.rowOrderGroupId) { if (this.rowOrderGroupId) {
handleRowDrop(this.data, (param) => { handleRowDrop(
param.groupId = this.rowOrderGroupId; this.data,
if (this.rowOrderFunc) { (param) => {
this.rowOrderFunc(param); param.groupId = this.rowOrderGroupId;
} if (this.rowOrderFunc) {
}, this.msTableKey); this.rowOrderFunc(param);
}
},
this.msTableKey
);
} }
}, },
isScrollShow(column, tableTop) { //判断元素是否因为超过表头 isScrollShow(column, tableTop) {
//判断元素是否因为超过表头
let columnTop = column.getBoundingClientRect().top; let columnTop = column.getBoundingClientRect().top;
return columnTop - tableTop > 30; return columnTop - tableTop > 30;
}, },
@ -378,13 +412,13 @@ export default {
setDefaultOrders() { setDefaultOrders() {
let orders = this.condition.orders; let orders = this.condition.orders;
if (orders) { if (orders) {
orders.forEach(item => { orders.forEach((item) => {
this.defaultSort = { this.defaultSort = {
prop: lineToHump(item.name), prop: lineToHump(item.name),
order: 'descending' order: "descending",
}; };
if (item.type === 'asc') { if (item.type === "asc") {
this.defaultSort.order = 'ascending'; this.defaultSort.order = "ascending";
} }
return; return;
}); });
@ -392,22 +426,36 @@ export default {
}, },
handleSelectAll(selection) { handleSelectAll(selection) {
if (this.condition.selectAll && selection && selection.length > 0) { if (this.condition.selectAll && selection && selection.length > 0) {
this.isSelectDataAll(true) this.isSelectDataAll(true);
return; return;
} else if (this.condition.selectAll && selection && selection.length === 0){ } else if (
this.condition.selectAll &&
selection &&
selection.length === 0
) {
this.$emit("clearTableSelect"); this.$emit("clearTableSelect");
return; return;
} }
_handleSelectAll(this, selection, this.data, this.selectRows, this.condition); _handleSelectAll(
this,
selection,
this.data,
this.selectRows,
this.condition
);
if (this.condition.selectAll) { if (this.condition.selectAll) {
this.condition.unSelectIds = []; this.condition.unSelectIds = [];
} else { } else {
setUnSelectIds(this.data, this.condition, this.selectRows); setUnSelectIds(this.data, this.condition, this.selectRows);
} }
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows); this.selectDataCounts = getSelectDataCounts(
this.selectIds = Array.from(this.selectRows).map(o => o.id); this.condition,
this.total,
this.selectRows
);
this.selectIds = Array.from(this.selectRows).map((o) => o.id);
//有的组件需要回调父组件的函数，做下一步处理 //有的组件需要回调父组件的函数，做下一步处理
this.$emit('callBackSelectAll', selection); this.$emit("callBackSelectAll", selection);
this.$nextTick(function () { this.$nextTick(function () {
setTimeout(this.removeBatchPopper, 1); setTimeout(this.removeBatchPopper, 1);
}); });
@ -421,10 +469,14 @@ export default {
let selectRow = Array.from(selectRowMap.values()); let selectRow = Array.from(selectRowMap.values());
this.selectRows = new Set(selectRow); this.selectRows = new Set(selectRow);
setUnSelectIds(this.data, this.condition, this.selectRows); setUnSelectIds(this.data, this.condition, this.selectRows);
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows); this.selectDataCounts = getSelectDataCounts(
this.selectIds = Array.from(this.selectRows).map(o => o.id); this.condition,
this.total,
this.selectRows
);
this.selectIds = Array.from(this.selectRows).map((o) => o.id);
//有的组件需要回调父组件的函数，做下一步处理 //有的组件需要回调父组件的函数，做下一步处理
this.$emit('callBackSelect', selection); this.$emit("callBackSelect", selection);
this.$nextTick(function () { this.$nextTick(function () {
setTimeout(this.removeBatchPopper, 1); setTimeout(this.removeBatchPopper, 1);
}); });
@ -433,11 +485,11 @@ export default {
let selectArr = []; let selectArr = [];
rows.forEach((row, index) => { rows.forEach((row, index) => {
this.data.forEach((item, i) => { this.data.forEach((item, i) => {
if(item.id == row.id){ if (item.id == row.id) {
selectArr.push(i) selectArr.push(i);
} }
}) });
}) });
this.highlightRowIndexArr = selectArr; this.highlightRowIndexArr = selectArr;
}, },
isSelectDataAll(data) { isSelectDataAll(data) {
@ -449,9 +501,13 @@ export default {
//设置未选择ID(更新) //设置未选择ID(更新)
this.condition.unSelectIds = []; this.condition.unSelectIds = [];
//更新统计信息 //更新统计信息
this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows); this.selectDataCounts = getSelectDataCounts(
this.selectIds = Array.from(this.selectRows).map(o => o.id); this.condition,
this.$emit(data ? 'callBackSelectAll' : 'callBackSelect'); this.total,
this.selectRows
);
this.selectIds = Array.from(this.selectRows).map((o) => o.id);
this.$emit(data ? "callBackSelectAll" : "callBackSelect");
}, },
headerDragend(newWidth, oldWidth, column, event) { headerDragend(newWidth, oldWidth, column, event) {
if (column) { if (column) {
@ -467,7 +523,7 @@ export default {
saveCustomTableWidth(this.fieldKey, column.columnKey, newWidth); saveCustomTableWidth(this.fieldKey, column.columnKey, newWidth);
}, },
showPopover(row, column, cell) { showPopover(row, column, cell) {
if (column.property === 'name') { if (column.property === "name") {
this.currentCaseId = row.id; this.currentCaseId = row.id;
} }
}, },
@ -481,7 +537,7 @@ export default {
}, },
filter(filters) { filter(filters) {
_filter(filters, this.condition); _filter(filters, this.condition);
this.$emit('filter'); this.$emit("filter");
this.handleRefresh(); this.handleRefresh();
}, },
sort(column) { sort(column) {
@ -491,9 +547,12 @@ export default {
} }
_sort(column, this.condition); _sort(column, this.condition);
if (this.rememberOrder) { if (this.rememberOrder) {
saveLastTableSortField(this.fieldKey, JSON.stringify(this.condition.orders)); saveLastTableSortField(
this.fieldKey,
JSON.stringify(this.condition.orders)
);
} }
this.$emit('order', column); this.$emit("order", column);
this.handleRefresh(); this.handleRefresh();
}, },
handleBatchEdit() { handleBatchEdit() {
@ -501,17 +560,21 @@ export default {
this.$refs.batchEdit.open(); this.$refs.batchEdit.open();
}, },
handleBatchMove() { handleBatchMove() {
this.$refs.testBatchMove.open(this.treeNodes, Array.from(this.selectRows).map(row => row.id), this.moduleOptions); this.$refs.testBatchMove.open(
this.treeNodes,
Array.from(this.selectRows).map((row) => row.id),
this.moduleOptions
);
}, },
handleRowClick(row, column) { handleRowClick(row, column) {
this.$emit("handleRowClick", row, column); this.$emit("handleRowClick", row, column);
}, },
handleRefresh() { handleRefresh() {
this.clear(); this.clear();
this.$emit('refresh'); this.$emit("refresh");
}, },
handlePageChange() { handlePageChange() {
this.$emit('pageChange'); this.$emit("pageChange");
}, },
cancelCurrentRow() { cancelCurrentRow() {
this.$refs.table.setCurrentRow(-1); this.$refs.table.setCurrentRow(-1);
@ -523,7 +586,13 @@ export default {
this.clearSelectRows(); this.clearSelectRows();
}, },
checkTableRowIsSelect() { checkTableRowIsSelect() {
checkTableRowIsSelect(this, this.condition, this.data, this.$refs.table, this.selectRows); checkTableRowIsSelect(
this,
this.condition,
this.data,
this.$refs.table,
this.selectRows
);
}, },
clearSelection() { clearSelection() {
this.clearSelectRows(); this.clearSelectRows();
@ -543,7 +612,10 @@ export default {
this.$refs.customTableHeader.open(this.fields); this.$refs.customTableHeader.open(this.fields);
}, },
resetHeader(callback) { resetHeader(callback) {
this.$emit('update:fields', getCustomTableHeader(this.fieldKey, this.customFields)); this.$emit(
"update:fields",
getCustomTableHeader(this.fieldKey, this.customFields)
);
this.tableActive = false; this.tableActive = false;
this.$nextTick(() => { this.$nextTick(() => {
this.doLayout(); this.doLayout();
@ -562,32 +634,34 @@ export default {
this.doLayout(); this.doLayout();
}); });
}, },
addPaddingColClass({column}) { addPaddingColClass({ column }) {
if (column.columnKey === 'tableRowDropCol' if (
|| column.columnKey === 'selectionCol' column.columnKey === "tableRowDropCol" ||
|| column.columnKey === 'batchBtnCol') { column.columnKey === "selectionCol" ||
return 'padding-col'; column.columnKey === "batchBtnCol"
) {
return "padding-col";
} }
}, },
rowStyle({row}) { rowStyle({ row }) {
return row.hidden ? {"display": "none"} : {}; return row.hidden ? { display: "none" } : {};
}, },
tableRowClassName({row, rowIndex}) { tableRowClassName({ row, rowIndex }) {
let selectIndex = this.highlightRowIndexArr; let selectIndex = this.highlightRowIndexArr;
for(let i = 0; i < selectIndex.length; i++){ for (let i = 0; i < selectIndex.length; i++) {
if(rowIndex === selectIndex[i]){ if (rowIndex === selectIndex[i]) {
return 'hignlight-row' return "hignlight-row";
} }
} }
}, },
} },
}; };
</script> </script>
<style scoped> <style scoped>
.batch-popper { .batch-popper {
top: 300px; top: 300px;
color: #1FDD02; color: #1fdd02;
} }
.el-table :deep(.padding-col) .cell { .el-table :deep(.padding-col) .cell {
@ -623,30 +697,33 @@ export default {
} }
.ms-table :deep(.el-table__body) tr.hover-row.current-row > td, .ms-table :deep(.el-table__body) tr.hover-row.current-row > td,
.ms-table :deep(.el-table__body) tr.hover-row.el-table__row--striped.current-row > td, .ms-table
:deep(.el-table__body)
tr.hover-row.el-table__row--striped.current-row
> td,
.ms-table :deep(.el-table__body) tr.hover-row.el-table__row--striped > td, .ms-table :deep(.el-table__body) tr.hover-row.el-table__row--striped > td,
.ms-table :deep(.el-table__body) tr.hover-row > td { .ms-table :deep(.el-table__body) tr.hover-row > td {
background-color: rgba(31, 35, 41, 0.1)!important; background-color: rgba(31, 35, 41, 0.1) !important;
cursor: pointer!important; cursor: pointer !important;
} }
/* focus行背景色 */ /* focus行背景色 */
.ms-table :deep(.el-table__body) tr.current-row > td { .ms-table :deep(.el-table__body) tr.current-row > td {
background-color: #FFFFFF!important; background-color: #ffffff !important;
} }
/* 选中某行时的背景色*/ /* 选中某行时的背景色*/
.ms-table :deep(.el-table__body tr.hignlight-row > td) { .ms-table :deep(.el-table__body tr.hignlight-row > td) {
background-color: rgba(120, 56, 135, 0.1)!important; background-color: rgba(120, 56, 135, 0.1) !important;
} }
/* 解决拖拽排序后hover阴影错乱问题 */ /* 解决拖拽排序后hover阴影错乱问题 */
.ms-table :deep(.el-table__body) tr:hover > td { .ms-table :deep(.el-table__body) tr:hover > td {
background-color: #F5F7FA; background-color: #f5f7fa;
} }
.disable-hover :deep(tr:hover>td) { .disable-hover :deep(tr:hover > td) {
background-color: #FFFFFF!important; background-color: #ffffff !important;
} }
.row-click { .row-click {
@ -655,14 +732,14 @@ export default {
:deep(.ms-table-header-cell) { :deep(.ms-table-header-cell) {
height: 46px; height: 46px;
background-color: #F5F6F7; background-color: #f5f6f7;
font-family: 'PingFang SC'; font-family: "PingFang SC";
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border: 1px solid rgba(31, 35, 41, 0.15); border: 1px solid rgba(31, 35, 41, 0.15);
border-right-width: 0; border-right-width: 0;
border-left-width: 0; border-left-width: 0;
color: #646A73; color: #646a73;
line-height: 22px; line-height: 22px;
padding: 0px; padding: 0px;
align-items: center; align-items: center;
@ -672,21 +749,25 @@ export default {
} }
:deep(.el-table__body-wrapper) { :deep(.el-table__body-wrapper) {
font-family: 'PingFang SC'; font-family: "PingFang SC";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: #1F2329; color: #1f2329;
flex: none; flex: none;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: auto; flex-basis: auto;
order: 1; order: 1;
flex-grow: 0; flex-grow: 0;
margin-bottom: -1px; /* 解决表格竖向滚动条问题 */
} }
:deep(.ms-select-all-fixed th.el-table-column--selection.is-leaf.ms-table-header-cell.el-table__cell) { :deep(
.ms-select-all-fixed
th.el-table-column--selection.is-leaf.ms-table-header-cell.el-table__cell
) {
border-radius: 0; border-radius: 0;
border: 0; border: 0;
display: inline-block; display: inline-block;
@ -695,7 +776,11 @@ export default {
border-bottom: 1px solid rgba(31, 35, 41, 0.15); border-bottom: 1px solid rgba(31, 35, 41, 0.15);
} }
:deep(.ms-select-all-fixed th.el-table-column--selection.is-leaf.ms-table-header-cell.el-table__cell .el-checkbox) { :deep(
.ms-select-all-fixed
th.el-table-column--selection.is-leaf.ms-table-header-cell.el-table__cell
.el-checkbox
) {
margin-left: 8px; margin-left: 8px;
margin-top: 5px; margin-top: 5px;
} }

1051
test-track/frontend/src/business/case/components/TestCaseList.vue
View File

File diff suppressed because it is too large Load Diff