zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

table.js 修改

This commit is contained in:
曹前明 2022-06-16 16:01:35 +08:00
parent f8dee855bd
commit c034317790
4 changed files with 529 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/model/hrm.js
View File

@ -6,8 +6,8 @@ export default {
list: { list: {
url: `${config.API_URL}/hrm/employee/`, url: `${config.API_URL}/hrm/employee/`,
name: "获取企业员工", name: "获取企业员工",
get: async function(){ get: async function(data){
return await http.get(this.url); return await http.get(this.url, data);
} }
} }
}, },

487
src/components/scTable/index.vue
View File

@ -8,15 +8,46 @@
--> -->
<template> <template>
<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading"> <div
<div class="scTable-table" :style="{'height':_table_height}"> class="scTable"
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange"> :style="{ height: _height }"
ref="scTableMain"
v-loading="loading"
>
<div class="scTable-table" :style="{ height: _table_height }">
<el-table
v-bind="$attrs"
:data="tableData"
:row-key="rowKey"
:key="toggleIndex"
ref="scTable"
:height="height == 'auto' ? null : '100%'"
:size="config.size"
:border="config.border"
:stripe="config.stripe"
:summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod"
@sort-change="sortChange"
@filter-change="filterChange"
>
<slot></slot> <slot></slot>
<template v-for="(item, index) in userColumn" :key="index"> <template v-for="(item, index) in userColumn" :key="index">
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip"> <el-table-column
v-if="!item.hide"
:column-key="item.prop"
:label="item.label"
:prop="item.prop"
:width="item.width"
:sortable="item.sortable"
:fixed="item.fixed"
:filters="item.filters"
:filter-method="
remoteFilter || !item.filters ? null : filterHandler
"
:show-overflow-tooltip="item.showOverflowTooltip"
>
<template #default="scope"> <template #default="scope">
<slot :name="item.prop" v-bind="scope"> <slot :name="item.prop" v-bind="scope">
{{scope.row[item.prop]}} {{ scope.row[item.prop] }}
</slot> </slot>
</template> </template>
</el-table-column> </el-table-column>
@ -29,30 +60,92 @@
</div> </div>
<div class="scTable-page" v-if="!hidePagination || !hideDo"> <div class="scTable-page" v-if="!hidePagination || !hideDo">
<div class="scTable-pagination"> <div class="scTable-pagination">
<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination> <el-pagination
v-if="!hidePagination"
background
:small="true"
:layout="paginationLayout"
:total="total"
:page-size="scPageSize"
:page-sizes="pageSizes"
v-model:currentPage="currentPage"
@current-change="paginationChange"
@update:page-size="pageSizeChange"
></el-pagination>
</div> </div>
<div class="scTable-do" v-if="!hideDo"> <div class="scTable-do" v-if="!hideDo">
<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button> <el-button
<el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false"> v-if="!hideRefresh"
@click="refresh"
icon="el-icon-refresh"
circle
style="margin-left: 15px"
></el-button>
<el-button
v-if="!hideRefresh"
@click="reload"
icon="el-icon-refresh-right"
circle
style="margin-left: 15px"
></el-button>
<el-popover
v-if="column"
placement="top"
title="列设置"
:width="500"
trigger="click"
:hide-after="0"
@show="customColumnShow = true"
@after-leave="customColumnShow = false"
>
<template #reference> <template #reference>
<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button> <el-button
icon="el-icon-set-up"
circle
style="margin-left: 15px"
></el-button>
</template> </template>
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting> <columnSetting
v-if="customColumnShow"
ref="columnSetting"
@userChange="columnSettingChange"
@save="columnSettingSave"
@back="columnSettingBack"
:column="userColumn"
></columnSetting>
</el-popover> </el-popover>
<el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0"> <el-popover
v-if="!hideSetting"
placement="top"
title="表格设置"
:width="400"
trigger="click"
:hide-after="0"
>
<template #reference> <template #reference>
<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button> <el-button
icon="el-icon-setting"
circle
style="margin-left: 15px"
></el-button>
</template> </template>
<el-form label-width="80px" label-position="left"> <el-form label-width="80px" label-position="left">
<el-form-item label="表格尺寸"> <el-form-item label="表格尺寸">
<el-radio-group v-model="config.size" size="small" @change="configSizeChange"> <el-radio-group
v-model="config.size"
size="small"
@change="configSizeChange"
>
<el-radio-button label="large">大</el-radio-button> <el-radio-button label="large">大</el-radio-button>
<el-radio-button label="default">正常</el-radio-button> <el-radio-button label="default">正常</el-radio-button>
<el-radio-button label="small">小</el-radio-button> <el-radio-button label="small">小</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="样式"> <el-form-item label="样式">
<el-checkbox v-model="config.border" label="纵向边框"></el-checkbox> <el-checkbox
v-model="config.border"
label="纵向边框"
></el-checkbox>
<el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox> <el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -63,20 +156,20 @@
</template> </template>
<script> <script>
import config from "@/config/table"; import config from "@/config/table";
import columnSetting from './columnSetting' import columnSetting from "./columnSetting";
export default { export default {
name: 'scTable', name: "scTable",
components: { components: {
columnSetting columnSetting,
}, },
props: { props: {
tableName: { type: String, default: "" }, tableName: { type: String, default: "" },
apiObj: { type: Object, default: () => {} }, apiObj: { type: Object, default: () => {} },
params: { type: Object, default: () => ({}) }, params: { type: Object, default: () => ({}) },
data: { type: Object, default: () => {} }, data: { type: Object, default: () => {} },
height: { type: [String,Number], default: "100%" }, height: { type: [String, Number], default: "100%" },
size: { type: String, default: "default" }, size: { type: String, default: "default" },
border: { type: Boolean, default: false }, border: { type: Boolean, default: false },
stripe: { type: Boolean, default: false }, stripe: { type: Boolean, default: false },
@ -96,22 +189,22 @@
}, },
watch: { watch: {
//监听从props里拿到值了 //监听从props里拿到值了
data(){ data() {
this.tableData = this.data; this.tableData = this.data;
this.total = this.tableData.length; this.total = this.tableData.length;
}, },
apiObj(){ apiObj() {
this.tableParams = this.params; this.tableParams = this.params;
this.refresh(); this.refresh();
} },
}, },
computed: { computed: {
_height() { _height() {
return Number(this.height)?Number(this.height)+'px':this.height return Number(this.height) ? Number(this.height) + "px" : this.height;
}, },
_table_height() { _table_height() {
return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)" return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)";
} },
}, },
data() { data() {
return { return {
@ -125,7 +218,7 @@
prop: null, prop: null,
order: null, order: null,
loading: false, loading: false,
tableHeight:'100%', tableHeight: "100%",
tableParams: this.params, tableParams: this.params,
userColumn: [], userColumn: [],
customColumnShow: false, customColumnShow: false,
@ -133,268 +226,318 @@
config: { config: {
size: this.size, size: this.size,
border: this.border, border: this.border,
stripe: this.stripe stripe: this.stripe,
} },
} };
}, },
mounted() { mounted() {
//判断是否开启自定义列 //判断是否开启自定义列
if(this.column){ if (this.column) {
this.getCustomColumn() this.getCustomColumn();
}else{ } else {
this.userColumn = this.column this.userColumn = this.column;
} }
//判断是否静态数据 //判断是否静态数据
if(this.apiObj){ if (this.apiObj) {
this.getData(); this.getData();
}else if(this.data){ } else if (this.data) {
this.tableData = this.data; this.tableData = this.data;
this.total = this.tableData.length this.total = this.tableData.length;
} }
}, },
activated(){ activated() {
if(!this.isActivat){ if (!this.isActivat) {
this.$refs.scTable.doLayout() this.$refs.scTable.doLayout();
} }
}, },
deactivated(){ deactivated() {
this.isActivat = false; this.isActivat = false;
}, },
methods: { methods: {
//获取列 //获取列
async getCustomColumn(){ async getCustomColumn() {
const userColumn = await config.columnSettingGet(this.tableName, this.column) const userColumn = await config.columnSettingGet(
this.userColumn = userColumn this.tableName,
this.column
);
this.userColumn = userColumn;
}, },
//获取数据 //获取数据
async getData(){ async getData() {
this.loading = true; this.loading = true;
var reqData = { var reqData = {
[config.request.page]: this.currentPage, [config.request.page]: this.currentPage,
[config.request.pageSize]: this.scPageSize, [config.request.pageSize]: this.scPageSize,
[config.request.prop]: this.prop, // [config.request.prop]: this.prop,
[config.request.order]: this.order [config.request.order]: this.order,
};
if (this.hidePagination) {
reqData[config.request.page] = 0;
// delete reqData[config.request.page]
// delete reqData[config.request.pageSize]
} }
if(this.hidePagination){ Object.assign(reqData, this.tableParams);
delete reqData[config.request.page]
delete reqData[config.request.pageSize]
}
Object.assign(reqData, this.tableParams)
try { try {
var res = await this.apiObj.get(reqData); var res = await this.apiObj.get(reqData);
}catch(error){ if (this.hidePagination) {
this.tableData = res;
if (res.length == 0) {
this.emptyText = "暂无数据";
}
this.loading = false;
this.$refs.scTable.setScrollTop(0);
this.$emit("dataChange", res, this.tableData);
}
} catch (error) {
this.loading = false; this.loading = false;
this.emptyText = error.response.data.err_msg || error.statusText; this.emptyText = error.response.data.err_msg || error.statusText;
return false; return false;
} }
try { try {
var response = config.parseData(res); var response = config.parseData(res);
if (response.total == 0){ if (response.total == 0) {
this.emptyText = "暂无数据"; this.emptyText = "暂无数据";
} }
if(this.hidePagination){ if (this.hidePagination) {
this.tableData = response.data || []; this.tableData = response.data || [];
}else{ } else {
this.tableData = response.rows || []; this.tableData = response.rows || [];
} }
this.total = response.total || 0; this.total = response.total || 0;
this.summary = response.summary || {}; this.summary = response.summary || {};
this.loading = false; this.loading = false;
}catch(error){ this.$refs.scTable.setScrollTop(0);
this.$emit("dataChange", res, this.tableData);
} catch (error) {
this.loading = false; this.loading = false;
this.emptyText = "数据格式错误"; this.emptyText = "数据格式错误";
return false; return false;
} }
this.$refs.scTable.setScrollTop(0)
this.$emit('dataChange', res, this.tableData)
}, },
//分页点击 //分页点击
paginationChange(){ paginationChange() {
this.getData(); this.getData();
}, },
//条数变化 //条数变化
pageSizeChange(size){ pageSizeChange(size) {
this.scPageSize = size this.scPageSize = size;
this.getData(); this.getData();
}, },
//刷新数据 //刷新数据
refresh(){ refresh() {
this.$refs.scTable.clearSelection(); this.$refs.scTable.clearSelection();
this.getData(); this.getData();
}, },
//更新数据 合并上一次params //更新数据 合并上一次params
upData(params, page=1){ upData(params, page = 1) {
this.currentPage = page; this.currentPage = page;
this.$refs.scTable.clearSelection(); this.$refs.scTable.clearSelection();
Object.assign(this.tableParams, params || {}) Object.assign(this.tableParams, params || {});
this.getData() this.getData();
}, },
//重载数据 替换params //重载数据 替换params
reload(params, page=1){ reload(params, page = 1) {
this.currentPage = page; this.currentPage = page;
this.tableParams = params || {} this.tableParams = params || {};
this.$refs.scTable.clearSelection(); this.$refs.scTable.clearSelection();
this.$refs.scTable.clearSort() this.$refs.scTable.clearSort();
this.$refs.scTable.clearFilter() this.$refs.scTable.clearFilter();
this.getData() this.getData();
}, },
//自定义变化事件 //自定义变化事件
columnSettingChange(userColumn){ columnSettingChange(userColumn) {
this.userColumn = userColumn; this.userColumn = userColumn;
this.toggleIndex += 1; this.toggleIndex += 1;
}, },
//自定义列保存 //自定义列保存
async columnSettingSave(userColumn){ async columnSettingSave(userColumn) {
this.$refs.columnSetting.isSave = true this.$refs.columnSetting.isSave = true;
try { try {
await config.columnSettingSave(this.tableName, userColumn) await config.columnSettingSave(this.tableName, userColumn);
}catch(error){ } catch (error) {
this.$message.error('保存失败') this.$message.error("保存失败");
this.$refs.columnSetting.isSave = false this.$refs.columnSetting.isSave = false;
} }
this.$message.success('保存成功') this.$message.success("保存成功");
this.$refs.columnSetting.isSave = false this.$refs.columnSetting.isSave = false;
}, },
//自定义列重置 //自定义列重置
async columnSettingBack(){ async columnSettingBack() {
this.$refs.columnSetting.isSave = true this.$refs.columnSetting.isSave = true;
try { try {
const column = await config.columnSettingReset(this.tableName, this.column) const column = await config.columnSettingReset(
this.userColumn = column this.tableName,
this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[])) this.column
}catch(error){ );
this.$message.error('重置失败') this.userColumn = column;
this.$refs.columnSetting.isSave = false this.$refs.columnSetting.usercolumn = JSON.parse(
JSON.stringify(this.userColumn || [])
);
} catch (error) {
this.$message.error("重置失败");
this.$refs.columnSetting.isSave = false;
} }
this.$refs.columnSetting.isSave = false this.$refs.columnSetting.isSave = false;
}, },
//排序事件 //排序事件
sortChange(obj){ sortChange(obj) {
if(!this.remoteSort){ if (!this.remoteSort) {
return false return false;
} }
if(obj.column && obj.prop){ if (obj.column && obj.prop) {
this.prop = obj.prop // this.prop = obj.prop
this.order = obj.order if (obj.order == "descending") {
}else{ this.order = "-" + obj.prop;
this.prop = null } else {
this.order = null this.order = obj.prop;
} }
this.getData() // this.order = obj.order
} else {
// this.prop = null
this.order = null;
}
this.getData();
}, },
//本地过滤 //本地过滤
filterHandler(value, row, column){ filterHandler(value, row, column) {
const property = column.property; const property = column.property;
return row[property] === value; return row[property] === value;
}, },
//过滤事件 //过滤事件
filterChange(filters){ filterChange(filters) {
if(!this.remoteFilter){ if (!this.remoteFilter) {
return false return false;
} }
Object.keys(filters).forEach(key => { Object.keys(filters).forEach((key) => {
filters[key] = filters[key].join(',') filters[key] = filters[key].join(",");
}) });
this.upData(filters) this.upData(filters);
}, },
//远程合计行处理 //远程合计行处理
remoteSummaryMethod(param){ remoteSummaryMethod(param) {
const {columns} = param const { columns } = param;
const sums = [] const sums = [];
columns.forEach((column, index) => { columns.forEach((column, index) => {
if(index === 0) { if (index === 0) {
sums[index] = '合计' sums[index] = "合计";
return return;
} }
const values = this.summary[column.property] const values = this.summary[column.property];
if(values){ if (values) {
sums[index] = values sums[index] = values;
}else{ } else {
sums[index] = '' sums[index] = "";
} }
}) });
return sums return sums;
}, },
configSizeChange(){ configSizeChange() {
this.$refs.scTable.doLayout() this.$refs.scTable.doLayout();
}, },
//插入行 unshiftRow //插入行 unshiftRow
unshiftRow(row){ unshiftRow(row) {
this.tableData.unshift(row) this.tableData.unshift(row);
}, },
//插入行 pushRow //插入行 pushRow
pushRow(row){ pushRow(row) {
this.tableData.push(row) this.tableData.push(row);
}, },
//根据key覆盖数据 //根据key覆盖数据
updateKey(row, rowKey=this.rowKey){ updateKey(row, rowKey = this.rowKey) {
this.tableData.filter(item => item[rowKey]===row[rowKey] ).forEach(item => { this.tableData
Object.assign(item, row) .filter((item) => item[rowKey] === row[rowKey])
}) .forEach((item) => {
Object.assign(item, row);
});
}, },
//根据index覆盖数据 //根据index覆盖数据
updateIndex(row, index){ updateIndex(row, index) {
Object.assign(this.tableData[index], row) Object.assign(this.tableData[index], row);
}, },
//根据index删除 //根据index删除
removeIndex(index){ removeIndex(index) {
this.tableData.splice(index, 1) this.tableData.splice(index, 1);
}, },
//根据index批量删除 //根据index批量删除
removeIndexes(indexes=[]){ removeIndexes(indexes = []) {
indexes.forEach(index => { indexes.forEach((index) => {
this.tableData.splice(index, 1) this.tableData.splice(index, 1);
}) });
}, },
//根据key删除 //根据key删除
removeKey(key, rowKey=this.rowKey){ removeKey(key, rowKey = this.rowKey) {
this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1) this.tableData.splice(
this.tableData.findIndex((item) => item[rowKey] === key),
1
);
}, },
//根据keys批量删除 //根据keys批量删除
removeKeys(keys=[], rowKey=this.rowKey){ removeKeys(keys = [], rowKey = this.rowKey) {
keys.forEach(key => { keys.forEach((key) => {
this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1) this.tableData.splice(
}) this.tableData.findIndex((item) => item[rowKey] === key),
1
);
});
}, },
//原生方法转发 //原生方法转发
clearSelection(){ clearSelection() {
this.$refs.scTable.clearSelection() this.$refs.scTable.clearSelection();
}, },
toggleRowSelection(row, selected){ toggleRowSelection(row, selected) {
this.$refs.scTable.toggleRowSelection(row, selected) this.$refs.scTable.toggleRowSelection(row, selected);
}, },
toggleAllSelection(){ toggleAllSelection() {
this.$refs.scTable.toggleAllSelection() this.$refs.scTable.toggleAllSelection();
}, },
toggleRowExpansion(row, expanded){ toggleRowExpansion(row, expanded) {
this.$refs.scTable.toggleRowExpansion(row, expanded) this.$refs.scTable.toggleRowExpansion(row, expanded);
}, },
setCurrentRow(row){ setCurrentRow(row) {
this.$refs.scTable.setCurrentRow(row) this.$refs.scTable.setCurrentRow(row);
}, },
clearSort(){ clearSort() {
this.$refs.scTable.clearSort() this.$refs.scTable.clearSort();
}, },
clearFilter(columnKey){ clearFilter(columnKey) {
this.$refs.scTable.clearFilter(columnKey) this.$refs.scTable.clearFilter(columnKey);
}, },
doLayout(){ doLayout() {
this.$refs.scTable.doLayout() this.$refs.scTable.doLayout();
}, },
sort(prop, order){ sort(prop, order) {
this.$refs.scTable.sort(prop, order) this.$refs.scTable.sort(prop, order);
} },
} },
} };
</script> </script>
<style scoped> <style scoped>
.scTable {} .scTable {
.scTable-table {height: calc(100% - 50px);} }
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;} .scTable-table {
.scTable-do {white-space: nowrap;} height: calc(100% - 50px);
.scTable:deep(.el-table__footer) .cell {font-weight: bold;} }
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;} .scTable-page {
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;} height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}
.scTable-do {
white-space: nowrap;
}
.scTable:deep(.el-table__footer) .cell {
font-weight: bold;
}
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
height: 12px;
border-radius: 12px;
}
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
width: 12px;
border-radius: 12px;
}
</style> </style>

2
src/config/table.js
View File

@ -21,7 +21,7 @@ export default {
page: 'page', //规定当前分页字段 page: 'page', //规定当前分页字段
pageSize: 'page_size', //规定一页条数字段 pageSize: 'page_size', //规定一页条数字段
prop: 'prop', //规定排序字段名字段 prop: 'prop', //规定排序字段名字段
order: 'order' //规定排序规格字段 order: 'ordering' //规定排序规格字段
}, },
/** /**
* 自定义列保存处理 * 自定义列保存处理

4
src/views/hrm/employee.vue
View File

@ -14,7 +14,7 @@
</div> </div>
</el-header> </el-header>
<el-main class="nopadding"> <el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe> <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe remoteSort remoteFilter>
<el-table-column type="selection" width="50"></el-table-column> <el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="#" type="index" width="50"></el-table-column> <el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="姓名" prop="name" width="150"></el-table-column> <el-table-column label="姓名" prop="name" width="150"></el-table-column>
@ -25,7 +25,7 @@
<span v-if="scope.row.belong_dept_">{{scope.row.belong_dept_.name}}</span> <span v-if="scope.row.belong_dept_">{{scope.row.belong_dept_.name}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" prop="create_time" width="180"></el-table-column> <el-table-column label="创建时间" prop="create_time" width="180" sortable='custom'></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="170"> <el-table-column label="操作" fixed="right" align="right" width="170">
<template #default="scope"> <template #default="scope">
<el-button-group> <el-button-group>