<template>
|
<div>
|
<div class="vol-table">
|
<div class="mask" v-show="loading"></div>
|
<div class="message" v-show="loading">加载中.....</div>
|
<el-table
|
:show-summary="summary"
|
:summary-method="(columns,row)=>{return this.summaryData;}"
|
@selection-change="selectionChange"
|
@row-click="rowClick"
|
@cell-mouse-leave="rowEndEdit"
|
ref="table"
|
class="v-table"
|
@sort-change="sortChange"
|
tooltip-effect="dark"
|
:height="realHeight"
|
:max-height="realMaxHeight"
|
:data="url?rowData:tableData"
|
border
|
:row-class-name="initIndex"
|
style="width: 100%"
|
>
|
<el-table-column v-if="ck" type="selection" width="55"></el-table-column>
|
<el-table-column
|
v-for="(column,cindex) in filterColumns()"
|
:key="cindex"
|
:prop="column.field"
|
:label="column.title"
|
:min-width="column.width"
|
:formatter="formatter"
|
:fixed="column.fixed"
|
:align="column.align"
|
:sortable="column.sort||cindex==0?'custom':false"
|
>
|
<template slot-scope="scope">
|
<!-- 2020.06.18增加render渲染自定义内容 -->
|
<table-render
|
v-if="column.render&&typeof column.render=='function'"
|
:row="scope.row"
|
:index="scope.$index"
|
:column="column"
|
:render="column.render"
|
></table-render>
|
<!-- 启用双击编辑功能，带编辑功能的不会渲染下拉框文本背景颜色 -->
|
<!-- @click="rowBeginEdit(scope.$index,cindex)" -->
|
<div v-else-if="column.edit" class="edit-el">
|
<div v-if="column.edit.keep|| edit.rowIndex==scope.$index" class="e-item">
|
<div>
|
<!-- 2020.07.24增加日期onChange事件 -->
|
<DatePicker
|
:transfer="true"
|
v-if="column.edit.type=='date'||column.edit.type=='datetime'"
|
:type="column.edit.type"
|
:format="column.edit.type=='date'? 'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
|
:placeholder="column.title"
|
:value="scope.row[column.field]"
|
@on-change="(time)=>{scope.row[column.field]=time; column.onChange&&column.onChange(time,column); return time}"
|
></DatePicker>
|
<i-switch
|
v-else-if="column.edit.type=='switch'"
|
:true-value="typeof scope.row[column.field]=='boolean' ? true:1"
|
:false-value="typeof scope.row[column.field]=='boolean' ? false:0"
|
v-model="scope.row[column.field]"
|
@on-change="(value)=>{column.onChange&&column.onChange(column,scope.row,url?rowData:tableData,value);}"
|
>
|
<span slot="open">是</span>
|
<span slot="close">否</span>
|
</i-switch>
|
<!--如果是1或0请加上属性 true-value="1" false-value="0"
|
如果value是字符串数字则使用 :true-value="1" :false-value="0"
|
-->
|
<Select
|
:transfer="true"
|
v-else-if="column.edit.type=='select'"
|
v-model="scope.row[column.field]"
|
:filterable="(column.filter||getSelectedOptions(column).length>10)?true:false"
|
:placeholder="'请选择'+column.title"
|
@on-change="column.onChange&&column.onChange(column,scope.row,url?rowData:tableData)"
|
clearable
|
>
|
<Option
|
v-for="(kv,kvIndex) in getSelectedOptions(column)"
|
:key="kvIndex"
|
:value="kv.key===undefined?'':kv.key"
|
>{{kv.value}}</Option>
|
</Select>
|
<Input
|
v-else
|
clearable
|
@on-change="(event)=>{onChange (scope,scope.row[column.field],event,column);}"
|
v-model="scope.row[column.field]"
|
:placeholder="'请输入'+column.title"
|
></Input>
|
</div>
|
<div class="extra" v-if="column.extra&&edit.rowIndex==scope.$index">
|
<a
|
:style="column.extra.style"
|
@click="()=>{column.extra.click&&column.extra.click(column,scope.row,url?rowData:tableData)}"
|
>
|
<Icon v-if="column.extra.icon" :type="column.extra.icon" />
|
{{column.extra.text}}
|
</a>
|
</div>
|
</div>
|
<template v-else>
|
<div v-if="column.formatter" v-html="column.formatter(scope.row,column)"></div>
|
<div v-else>{{formatter(scope.row,column,true)}}</div>
|
</template>
|
</div>
|
<!--没有编辑功能的直接渲染标签-->
|
<div v-else>
|
<a
|
href="javascript:void(0)"
|
@click="link(scope.row,column)"
|
v-if="column.link"
|
v-text="scope.row[column.field]"
|
></a>
|
<img
|
v-else-if="column.type=='img'"
|
v-for="(file,vIndex ) in getFilePath(scope.row[column.field])"
|
:key="vIndex"
|
:onerror="defaultImg"
|
@click="viewImg(scope.row,column,file.path)"
|
class="table-img"
|
:src="file.path"
|
/>
|
<a
|
style="margin-right: 15px;"
|
v-else-if="column.type=='file'||column.type=='excel'"
|
class="t-file"
|
v-for="(file,vIndex ) in getFilePath(scope.row[column.field])"
|
:key="vIndex"
|
@click="dowloadFile(file)"
|
>{{file.name}}</a>
|
<Tag v-else-if="column.type=='date'">{{formatterDate(scope.row,column)}}</Tag>
|
<div
|
v-else-if="column.formatter"
|
@click="formatterClick(scope.row,column)"
|
v-html="column.formatter(scope.row,column)"
|
></div>
|
<div
|
v-else-if="column.click"
|
@click="formatterClick(scope.row,column)"
|
>{{scope.row[column.field]}}</div>
|
<Tag
|
v-else-if="(column.bind)"
|
:color="getColor(scope.row,column)"
|
>{{formatter(scope.row,column,true)}}</Tag>
|
<div v-else>{{formatter(scope.row,column,true)}}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="!doubleEdit" :min-width="100" label="操作" fixed="right">
|
<template slot-scope="scope">
|
<Button type="info" size="small" @click="beginWithButtonEdit(scope)" ghost>编辑</Button>
|
<Button type="info" size="small" @click="endWithButtonEdit(scope)" ghost>完成</Button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="block pagination" v-if="!paginationHide">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="paginations.page"
|
:page-sizes="paginations.sizes"
|
:page-size="paginations.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="paginations.total"
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
var $vue;
|
import VolTableRender from "./VolTable/VolTableRender";
|
export default {
|
components: { "table-render": VolTableRender },
|
props: {
|
tableData: {
|
//表数据源,配置了url就不用传这个参数了
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
columns: {
|
type: Array,
|
default: [],
|
//[ {
|
// field: "columnType",
|
// title: "数据类型",
|
// width: 120,
|
// hidden:false,
|
// edit: { type: "text", status: false, data: [], key: "" }
|
// }] //列的的数据格式edit格式： type类型(text,date,datetime,select,switch),status是否默认为编辑状态
|
//data如果是select这里data应该有数据源，如果没有数据请设置key字典编号
|
},
|
height: {
|
type: Number,
|
default: 0,
|
},
|
maxHeight: {
|
type: Number,
|
default: 0,
|
},
|
linkView: {
|
type: Function,
|
default: function () {
|
return 1;
|
},
|
},
|
pagination: {
|
type: Object,
|
default: function () {
|
return { total: 0, size: 0, sortName: "" };
|
},
|
},
|
url: {
|
type: String,
|
default: "",
|
},
|
paginationHide: {
|
type: Boolean,
|
default: true,
|
},
|
color: {
|
type: Boolean,
|
default: true,
|
},
|
index: {
|
//是否创建索引号,如果需要表格编辑功能，这里需要设置为true
|
type: Boolean,
|
default: false,
|
},
|
allowEmpty: {
|
//表格数据为空时是否默认为--
|
type: Boolean,
|
default: true,
|
},
|
defaultLoadPage: {
|
//传入了url，是否默认加载表格数据
|
type: Boolean,
|
default: true,
|
},
|
loadKey: {
|
//是否自动从后台加载数据源,如【审核状态】字段是的值是数字，但要显示对应的文字，1=审核中，2=审核通过
|
type: Boolean,
|
default: false,
|
},
|
single: {
|
type: Boolean, //是否单选
|
default: false,
|
},
|
doubleEdit: {
|
type: Boolean, //是否双击启用编辑功能
|
default: true,
|
},
|
beginEdit: {
|
//编辑开始
|
type: Function,
|
default: function (row, column, index) {
|
return true;
|
},
|
},
|
endEditBefore: {
|
//结束编辑前
|
type: Function,
|
default: function (row, column, index) {
|
return true;
|
},
|
},
|
endEditAfter: {
|
//结束编辑前
|
type: Function,
|
default: function (row, column, index) {
|
return true;
|
},
|
},
|
ck: {
|
//是否显示checkbox
|
type: Boolean,
|
default: true,
|
},
|
},
|
data() {
|
return {
|
visiblyColumns: [],
|
key: "",
|
realHeight: 0,
|
realMaxHeight: 0,
|
enableEdit: false, //是否启表格用编辑功能
|
empty: this.allowEmpty ? "" : "--",
|
defaultImg: 'this.src="' + require("@/assets/imgs/error.png") + '"',
|
loading: false,
|
footer: {},
|
total: 0,
|
formatConfig: {},
|
defaultColor: "default",
|
colors: [
|
"success",
|
"primary",
|
"error",
|
"warning",
|
"magenta",
|
"red",
|
"volcano",
|
"orange",
|
"gold",
|
"green",
|
"cyan",
|
"blue",
|
"geekblue",
|
"#FFA2D3",
|
"default",
|
],
|
rule: {
|
phone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
|
decimal: /(^[\-0-9][0-9]*(.[0-9]+)?)$/,
|
number: /(^[\-0-9][0-9]*([0-9]+)?)$/,
|
},
|
columnNames: [],
|
rowData: [],
|
paginations: {
|
sort: "",
|
order: "desc",
|
Foots: "",
|
total: 0,
|
//2020.08.29增加自定义分页条大小
|
sizes: [30, 60, 100, 120],
|
size: 30, //默认分页大小
|
Wheres: [],
|
page: 1,
|
rows: 30,
|
},
|
errorFiled: "",
|
edit: { columnIndex: -1, rowIndex: -1 }, //当前双击编辑的行与列坐标
|
editStatus: {},
|
summary: false, //是否显示合计
|
//目前只支持从后台返回的summaryData数据
|
summaryData: [],
|
summaryIndex: {},
|
remoteColumns: [], //需要每次刷新或分页后从后台加载字典数据源的列配置
|
};
|
},
|
created() {
|
this.realHeight = this.getHeight();
|
this.realMaxHeight = this.getMaxHeight();
|
|
//从后台加下拉框的[是否启用的]数据源
|
let keys = [];
|
let columnBind = [];
|
this.summaryData.push("合计");
|
this.columns.forEach((x, _index) => {
|
if (!x.hidden) {
|
this.summaryIndex[x.field] = _index;
|
this.summaryData.push("");
|
}
|
//求和
|
if (x.summary && !this.summary) {
|
//强制开启选择框
|
this.ck = true;
|
this.summary = true;
|
}
|
if (x.bind && x.bind.key && (!x.bind.data || x.bind.data.length == 0)) {
|
//写入远程
|
if (!x.bind.data) x.bind.data = [];
|
if (x.bind.remote) {
|
this.remoteColumns.push(x);
|
} else if (this.loadKey) {
|
keys.push(x.bind.key);
|
x.bind.valueTyoe = x.type;
|
columnBind.push(x.bind);
|
}
|
}
|
});
|
if (keys.length > 0) {
|
this.http
|
.post("/api/Sys_Dictionary/GetVueDictionary", keys)
|
.then((dic) => {
|
dic.forEach((x) => {
|
columnBind.forEach((c) => {
|
//转换数据源的类型与列的类型一致(2020.04.04)
|
if (c.valueTyoe == "int" || c.valueTyoe == "sbyte") {
|
x.data.forEach((d) => {
|
//2020.09.01增加对数字类型的二次判断
|
if (!isNaN(d.key)) {
|
d.key = ~~d.key;
|
}
|
});
|
}
|
if (c.key == x.dicNo) c.data.push(...x.data);
|
});
|
});
|
});
|
}
|
|
this.paginations.sort = this.pagination.sortName;
|
//2020.08.29增加自定义分页条大小
|
Object.assign(this.paginations, this.pagination);
|
if (this.pagination.size) {
|
this.paginations.rows = this.pagination.size;
|
}
|
this.enableEdit = this.columns.some((x) => {
|
return x.hasOwnProperty("edit");
|
});
|
let keyColumn = this.columns.find((x) => {
|
return x.isKey;
|
});
|
if (keyColumn) {
|
this.key = keyColumn.field;
|
}
|
//如果下拉框，判断bind或edit.data是否有数据源，妱果没有则获取数据源bind
|
$vue = this;
|
// this.$emit
|
this.defaultLoadPage && this.load();
|
},
|
methods: {
|
rowClick(row, column) {
|
if (!this.doubleEdit) {
|
return;
|
}
|
this.rowBeginEdit(row, column);
|
},
|
dowloadFile(file) {
|
this.base.dowloadFile(
|
file.path,
|
file.name,
|
{
|
Authorization: this.$store.getters.getToken(),
|
},
|
this.http.ipAddress
|
);
|
},
|
getFilePath(pathSring) {
|
//获取表的图片与文件显示
|
if (!pathSring) return "";
|
let filePath = pathSring.replace(/\\/g, "/").split(",");
|
let fileInfo = [];
|
for (let index = 0; index < filePath.length; index++) {
|
let file = filePath[index];
|
if (file.indexOf(".") != -1) {
|
let splitFile = file.split("/");
|
if (splitFile.length > 0) {
|
fileInfo.push({
|
name: splitFile[splitFile.length - 1],
|
path: this.base.isUrl(file) ? file : this.http.ipAddress + file,
|
});
|
}
|
}
|
}
|
return fileInfo;
|
},
|
//重置table
|
reset() {
|
if (this.tableData && this.tableData.length > 0) {
|
this.tableData.splice(0);
|
}
|
if (this.rowData && this.rowData.length > 0) {
|
this.rowData.splice(0);
|
}
|
if (!this.paginationHide) {
|
this.paginations.page = 1;
|
// this.paginations.rows = 30;
|
if (this.paginations.wheres && this.paginations.wheres.length > 0) {
|
this.paginations.wheres.splice(0);
|
}
|
}
|
this.errorFiled = "";
|
this.edit.columnIndex = -1;
|
this.edit.rowIndex = -1;
|
},
|
getHeight() {
|
//没有定义高度与最大高度，使用table默认值
|
if (!this.height && !this.maxHeight) {
|
return null;
|
}
|
//定义了最大高度则不使用高度
|
if (this.maxHeight) {
|
return null;
|
}
|
//使用当前定义的高度
|
return this.height;
|
},
|
getMaxHeight() {
|
//没有定义高度与最大高度，使用table默认值
|
if (!this.height && !this.maxHeight) {
|
return null;
|
}
|
//定义了最大高度使用最大高度
|
if (this.maxHeight) {
|
return this.maxHeight;
|
}
|
//不使用最大高度
|
return null;
|
},
|
getSelectedOptions(column) {
|
if (column.bind && column.bind.data && column.bind.data.length > 0) {
|
return column.bind.data;
|
}
|
return [];
|
},
|
formatterClick(row, column, event) {
|
column.click && column.click(row, column, event);
|
},
|
initIndex(obj) {
|
if (this.index) {
|
obj.row.elementIdex = obj.rowIndex;
|
}
|
return "";
|
},
|
toggleEdit(event) {},
|
setEditStatus(status) {
|
this.columns.forEach((x) => {
|
if (x.hasOwnProperty("edit")) {
|
this.$set(x.edit, "status", status);
|
}
|
});
|
},
|
//通过button按钮启用编辑
|
beginWithButtonEdit(scope) {
|
//url?rowData:tableData
|
this.rowBeginEdit(scope.row, this.columns[scope.$index]);
|
},
|
//通过button结束编辑
|
endWithButtonEdit(scope) {
|
if (this.edit.rowIndex == -1) return;
|
|
if (
|
!this.endEditBefore(scope.row, this.columns[scope.$index], scope.$index)
|
)
|
return;
|
|
for (let index = 0; index < this.columns.length; index++) {
|
let column = this.columns[index];
|
if (!column.hidden && (column.required || column.require)) {
|
if (!this.validateColum(column, scope.row)) return;
|
}
|
}
|
this.edit.rowIndex = -1;
|
if (
|
!this.endEditAfter(scope.row, this.columns[scope.$index], scope.$index)
|
)
|
return;
|
},
|
rowBeginEdit(row, column) {
|
if (this.edit.rowIndex != -1) {
|
return;
|
}
|
if (!this.enableEdit) return;
|
//编辑前
|
if (!this.beginEdit(row, column, row.elementIdex)) return;
|
if (row.hasOwnProperty("elementIdex")) {
|
if (this.edit.rowIndex == row.elementIdex) {
|
return;
|
}
|
this.edit.rowIndex = row.elementIdex;
|
}
|
},
|
validateColum(option, data) {
|
if (option.hidden || option.bind) return true;
|
let val = data[option.field];
|
if (option.require || option.required) {
|
if (val != "0" && (val == "" || val == undefined)) {
|
if (!this.errorFiled) {
|
// event.focus();
|
this.$Message.error(option.title + "不能为空");
|
}
|
return false;
|
}
|
}
|
if (!option.edit) {
|
return true;
|
}
|
let editType = option.edit.type;
|
//验证数字
|
if (editType == "int" || editType == "decimal" || editType == "number") {
|
if (val == "" || val == undefined) return true;
|
if (editType == "decimal") {
|
if (!this.rule.decimal.test(val)) {
|
this.$Message.error(option.title + "只能是数字");
|
return false;
|
}
|
} else if (!this.rule.decimal.test(val)) {
|
this.$Message.error(option.title + "只能是整数");
|
return false;
|
}
|
if (
|
option.edit.min != undefined &&
|
typeof option.edit.min == "number" &&
|
val < option.edit.min
|
) {
|
this.$Message.error(option.title + "不能小于" + option.edit.min);
|
return false;
|
}
|
if (
|
option.edit.max != undefined &&
|
typeof option.edit.max == "number" &&
|
val > option.edit.max
|
) {
|
this.$Message.error(option.title + "不能大于" + option.edit.min);
|
return false;
|
}
|
return true;
|
}
|
|
//验证字符串
|
if (val && (editType == "text" || editType == "string")) {
|
if (
|
option.edit.min != undefined &&
|
typeof option.edit.min == "number" &&
|
val.length < option.edit.min
|
) {
|
this.$Message.error(
|
option.title + "至少" + option.edit.min + "个字符"
|
);
|
return false;
|
}
|
if (
|
option.edit.max != undefined &&
|
typeof option.edit.max == "number" &&
|
val.length > option.edit.max
|
) {
|
this.$Message.error(
|
option.title + "最多" + option.edit.max + "个字符"
|
);
|
return false;
|
}
|
return true;
|
}
|
return true;
|
},
|
rowEndEdit(row, column, event) {
|
if (!this.enableEdit) {
|
if (!this.errorFiled) {
|
this.edit.rowIndex = -1;
|
}
|
return;
|
}
|
if (!this.doubleEdit && event) {
|
return;
|
}
|
//结束编辑前
|
if (!this.endEditBefore(row, column, this.edit.rowIndex)) return;
|
|
if (
|
this.edit.rowIndex != -1 &&
|
(!this.errorFiled || this.errorFiled == column.property)
|
) {
|
let data = (this.url ? this.rowData : this.tableData)[
|
this.edit.rowIndex
|
];
|
let option = this.columns.find((x) => {
|
return x.field == column.property;
|
});
|
if (!option || !option.edit) {
|
return;
|
}
|
if (
|
option.edit.type == "datetime" ||
|
option.edit.type == "date" ||
|
option.edit.type == "select"
|
) {
|
if (this.edit.rowIndex == row.elementIdex) {
|
return;
|
}
|
}
|
if (!this.validateColum(option, data)) {
|
this.errorFiled = option.field;
|
return false;
|
} else {
|
this.errorFiled = "";
|
}
|
}
|
if (this.errorFiled) {
|
return;
|
}
|
if (!this.endEditAfter(row, column, this.edit.rowIndex)) return;
|
// this.errorFiled = "";
|
this.edit.rowIndex = -1;
|
//this.edit.columnIndex=-1;
|
},
|
delRow() {
|
let rows = this.getSelected();
|
if (rows.length == 0) return this.$Message.error("请选择要删除的行!");
|
|
let data = this.url ? this.rowData : this.tableData;
|
let indexArr = this.getSelectedIndex();
|
if (indexArr.length == 0) {
|
return this.$Message.error(
|
"删除操作必须设置VolTable的属性index='true'"
|
);
|
}
|
// if (indexArr.length == 0 || !this.key) {
|
// return this.$message.error(
|
// "请设置index=true属性或指columns的字段为key"
|
// );
|
// }
|
if (indexArr.length == 0) {
|
// let keyValues=[]
|
// rows.forEach(x=>{
|
// if (x[this.key]) {
|
// }
|
// keyValues.push(x[this.key])
|
// })
|
// data.find(x=>)
|
} else {
|
for (let i = data.length - 1; i >= 0; i--) {
|
if (indexArr.indexOf(i) != -1) {
|
data.splice(i, 1);
|
}
|
}
|
}
|
this.edit.rowIndex = -1;
|
return rows;
|
},
|
addRow(row) {
|
if (!row) {
|
row = {};
|
}
|
this.columns.forEach((x) => {
|
if (x.edit && x.edit.type == "switch") {
|
if (!row.hasOwnProperty(x.field)) {
|
row[x.field] = x.type == "bool" ? false : 0;
|
}
|
}
|
});
|
if (!this.url) {
|
this.tableData.push(row);
|
return;
|
}
|
this.rowData.push(row);
|
},
|
viewImg(row, column, url) {
|
this.base.previewImg(url, this.http.ipAddress);
|
// window.open(row[column.field]);
|
},
|
link(row, column) {
|
this.$props.linkView(row, column);
|
},
|
getSelected() {
|
return this.$refs.table.selection;
|
},
|
getSelectedIndex() {
|
if (!this.index) {
|
//只有设置了属性index才有索引行
|
return [];
|
}
|
let indexArr = this.$refs.table.selection.map((x) => {
|
return x.elementIdex;
|
});
|
return indexArr ? indexArr : [];
|
},
|
GetTableDictionary(rows) {
|
//分页或刷新或重新绑定数据源
|
if (this.remoteColumns.length == 0 || !rows || rows.length == 0) return;
|
let remoteInfo = {};
|
for (let index = 0; index < this.remoteColumns.length; index++) {
|
const column = this.remoteColumns[index];
|
// column.bind.data.splice(0);
|
let key = column.bind.key;
|
let data = [];
|
rows.forEach((row) => {
|
if (data.indexOf(row[column.field]) == -1) {
|
data.push(row[column.field]);
|
}
|
});
|
if (data.length > 0) {
|
remoteInfo[key] = data;
|
}
|
}
|
if (remoteInfo.length == 0) return;
|
//ha= Object.assign([], ha, hb)
|
this.http
|
.post("/api/Sys_Dictionary/GetTableDictionary", remoteInfo)
|
.then((dic) => {
|
dic.forEach((x) => {
|
this.remoteColumns.forEach((column) => {
|
if (column.bind.key == x.key) {
|
column.bind.data = Object.assign([], column.bind.data, x.data);
|
//column.bind.data.push(...x.data);
|
}
|
});
|
});
|
});
|
},
|
load(query, isResetPage) {
|
//isResetPage重置分页数据
|
if (!this.url) return;
|
if (isResetPage) {
|
this.resetPage();
|
}
|
let param = {
|
page: this.paginations.page,
|
rows: this.paginations.rows,
|
sort: this.paginations.sort,
|
order: this.paginations.order,
|
wheres: [], //查询条件，格式为[{ name: "字段", value: "xx" }]
|
};
|
let status = true;
|
//合并查询信息(包查询分页、排序、查询条件等)
|
if (query) {
|
param = Object.assign(param, query);
|
}
|
/*查询前处理(如果需要查询条件，实现组件方法loadBefore方法即可:
|
loadBefore=(param, callBack)=>{
|
param.wheres = [{ name: "PhoneNo", value: "13419098211" }];
|
callBack(true);
|
})
|
*/
|
this.$emit("loadBefore", param, (result) => {
|
status = result;
|
});
|
if (!status) return;
|
|
if (param.wheres && param.wheres instanceof Array) {
|
param.wheres = JSON.stringify(param.wheres);
|
}
|
this.loading = true;
|
this.http.post(this.url, param).then(
|
(data) => {
|
this.loading = false;
|
//查询返回结果后处理
|
this.$emit("loadAfter", data.rows || [], (result) => {
|
status = result;
|
});
|
if (!status) return;
|
this.GetTableDictionary(data.rows);
|
this.rowData = data.rows || [];
|
this.paginations.total = data.total;
|
//合计
|
this.getSummaries(data);
|
},
|
(error) => {
|
this.loading = false;
|
// this.$Message.error(error || "网络异常");
|
}
|
);
|
}, //获取统计
|
getSummaries(data) {
|
if (!this.summary || !data.summary) return;
|
this.summaryData.splice(0);
|
//如果有checkbox，应该算作是第一行
|
if (this.ck) {
|
this.summaryData.push(0);
|
}
|
this.columns.forEach((col) => {
|
if (!col.hidden) {
|
if (data.summary.hasOwnProperty(col.field)) {
|
this.summaryData.push(data.summary[col.field]);
|
} else {
|
this.summaryData.push("");
|
}
|
}
|
});
|
if (this.summaryData.length > 0 && this.summaryData[0] == "") {
|
this.summaryData[0] = "合计";
|
}
|
},
|
getInputChangeSummaries() {},
|
filterColumns() {
|
return this.columns.filter((x) => {
|
return !x.hidden;
|
});
|
},
|
handleSizeChange(val) {
|
this.paginations.rows = val;
|
this.load();
|
},
|
handleCurrentChange(val) {
|
this.paginations.page = val;
|
this.load();
|
},
|
sortChange(sort) {
|
this.paginations.sort = sort.prop;
|
this.paginations.order = sort.order == "ascending" ? "asc" : "desc";
|
this.load();
|
},
|
resetPage() {
|
//重置查询分页
|
// this.paginations.rows = 30;
|
this.paginations.page = 1;
|
},
|
selectionChange(selection) {
|
// console.log(selection);
|
//选择行事件,只有单选才触发
|
if (this.single && selection.length == 1) {
|
this.$emit("rowChange", selection[0]); //
|
}
|
if (this.single && selection.length > 1) {
|
this.$refs.table.toggleRowSelection(selection[0]);
|
}
|
// this.rowChange(selection[0]);
|
},
|
getColor(row, column) {
|
let val = row[column.field];
|
|
// if (val == "" || val == null || val == undefined) {
|
// return "none";
|
// }
|
if (column.getColor && typeof column.getColor == "function") {
|
let _color = column.getColor(row, column);
|
if (_color) {
|
return _color;
|
}
|
}
|
if (!val && val != "0") {
|
return this.defaultColor;
|
}
|
if (!this.formatConfig[column.field]) {
|
this.formatConfig[column.field] = [val];
|
return this.colors[0];
|
}
|
let index = this.formatConfig[column.field].indexOf(val);
|
if (index != -1) {
|
return this.colors[index];
|
}
|
if (this.formatConfig[column.field].length > 15) {
|
return this.defaultColor;
|
}
|
|
if (index == -1) {
|
this.formatConfig[column.field].push(val);
|
index = this.formatConfig[column.field].length - 1;
|
}
|
return this.colors[index];
|
},
|
formatterDate(row, column) {
|
return (row[column.field] || "").substr(0, 10);
|
},
|
formatter(row, column, template) {
|
if (!template) return row[column.property];
|
let val = row[column.field];
|
//是否值
|
if (column.edit && column.edit.type == "switch") {
|
return val ? "是" : "否";
|
}
|
if (!column.bind || !column.bind.data) {
|
return row[column.field];
|
}
|
if (!val && val != 0) return val;
|
//编辑多选table显示
|
if (
|
(column.bind.type == "selectList" || column.bind.type == "checkbox") &&
|
typeof val == "string" &&
|
val.indexOf(",") != -1
|
) {
|
return this.getSelectFormatter(column, val);
|
}
|
let source = column.bind.data.filter((x) => {
|
// return x.key != "" && x.key == val;
|
//2020.06.06修复单独使用table组件时,key为数字0时转换成文本失败的问题
|
return x.key !== "" && x.key !== undefined && x.key + "" === val + "";
|
});
|
if (source && source.length > 0) val = source[0].value;
|
return val;
|
},
|
getSelectFormatter(column, val) {
|
//编辑多选table显示
|
let valArr = val.split(",");
|
for (let index = 0; index < valArr.length; index++) {
|
column.bind.data.forEach((x) => {
|
//2020.06.06修复数据源为selectList时,key为数字0时不能转换文本的问题
|
if (
|
x.key !== "" &&
|
x.key !== undefined &&
|
x.key + "" == valArr[index] + ""
|
) {
|
valArr[index] = x.value;
|
}
|
});
|
}
|
return valArr.join(",");
|
},
|
onChange(scope, val, event, column) {
|
let row = scope.row;
|
if (row.onChange && !row.onChange(row, val, event)) {
|
return;
|
}
|
//输入框求和实时计算
|
this.getInputSummaries(scope, val, event, column);
|
},
|
//input输入实时求和
|
getInputSummaries(scope, val, event, column) {
|
//column列设置了summary属性的才计算值
|
if (!column.summary) return;
|
let sum = 0;
|
let _index = 0;
|
(this.url ? this.rowData : this.tableData).forEach((x, index) => {
|
if (x.hasOwnProperty(column.field) && !isNaN(x[column.field])) {
|
_index = index;
|
sum += x[column.field] * 1;
|
}
|
});
|
this.$set(this.summaryData, this.summaryIndex[column.field] - 1, sum);
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.vol-table {
|
position: relative;
|
.mask {
|
opacity: 0.2;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
background: #d0d0d0;
|
z-index: 100;
|
}
|
.message {
|
text-align: center;
|
color: #635c5c;
|
font-size: 15px;
|
font-weight: 600;
|
background: #eee;
|
transform: translateY(-50%);
|
top: 50%;
|
position: absolute;
|
z-index: 200;
|
left: 0;
|
right: 0;
|
width: 150px;
|
margin: 0 auto;
|
line-height: 40px;
|
border-radius: 4px;
|
border: 1px solid #a09e9e;
|
}
|
}
|
.e-item {
|
display: flex;
|
> div:first-child {
|
flex: 1;
|
}
|
}
|
</style>
|
|
|
<style scoped>
|
/*表头错行 .el-table th.gutter{
|
display: table-cell!important;
|
} */
|
.pagination {
|
text-align: right;
|
/* margin-top: 8px; */
|
padding: 2px 28px;
|
border: 1px solid #eee;
|
border-top: 0px;
|
}
|
.v-table >>> .el-table__header th {
|
padding: 1.5px !important;
|
|
background-color: #f8f8f9 !important;
|
font-size: 13px;
|
}
|
.v-table >>> .el-table__body .cell {
|
word-break: inherit !important;
|
white-space: nowrap !important;
|
}
|
.v-table >>> .el-table__body td {
|
padding: 7px 0 !important;
|
}
|
|
.v-table >>> .el-table__footer td {
|
padding: 5px 0 !important;
|
}
|
.vol-table >>> .el-table th > .cell {
|
white-space: inherit !important;
|
}
|
.vol-table >>> .el-table__body-wrapper::-webkit-scrollbar {
|
width: 10px;
|
height: 10px;
|
}
|
.vol-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
background: #ddd;
|
}
|
.vol-table .table-img {
|
height: 40px;
|
border-radius: 5px;
|
margin-right: 10px;
|
width: 40px;
|
object-fit: cover;
|
}
|
.vol-table .table-img:hover {
|
cursor: pointer;
|
}
|
.v-table >>> .ivu-tag-default {
|
border: none !important;
|
background: none !important;
|
}
|
/* .spin-icon-load{
|
animation: ani-demo-spin 1s linear infinite;
|
}
|
@keyframes ani-demo-spin {
|
from { transform: rotate(0deg);}
|
50% { transform: rotate(180deg);}
|
to { transform: rotate(360deg);}
|
}
|
.message{
|
height: 50px;
|
position: relative;
|
border: 1px solid #eee;
|
} */
|
</style>
|
