<template>
|
<div class="layout-container">
|
<div class="view-container">
|
<div class="grid-search">
|
<div class="fiexd-search-box" v-show="true">
|
<vol-form ref="searchForm" style="padding: 0 15px" :label-width="100" :formRules="searchFormOptions"
|
:formFields="searchFormFields">
|
</vol-form>
|
<div v-if="fiexdSearchForm" class="fs-line"></div>
|
</div>
|
<div class="view-header">
|
<div class="desc-text">
|
<i class="el-icon-s-grid" />
|
<span>{{ title }}</span>
|
</div>
|
<div class="notice">
|
<a class="text" title="{{title}}"></a>
|
</div>
|
|
<div class="btn-group">
|
<template :key="bIndex" v-for="(btn, bIndex) in Mybuttons.slice(0, 6)">
|
<el-button :type="btn.type" size="small" :dark="btn.dark" :plain="btn.plain"
|
@click="changeDropdown(btn.name)">
|
<i :class="btn.icon"></i>
|
{{ btn.name }}
|
</el-button>
|
</template>
|
<el-dropdown size="small" @click="changeDropdown"
|
v-if="Mybuttons.length > 5">
|
<el-button type="primary" plain size="small">
|
更多<i class="el-icon-arrow-down el-icon--right"></i>
|
</el-button>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="changeDropdown(item.name)" :name="item.name"
|
v-show="!item.hidden" v-for="(item, dIndex) in Mybuttons.slice(6)" :key="dIndex">
|
<i :class="item.icon"></i>
|
{{ item.name }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
|
<div class="grid-container">
|
<el-table ref="table" stripe :data="tableData" :height="heigth" style="width: 100%" border
|
@selection-change="selectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="order_id" label="主键" v-if="false"></el-table-column>
|
<el-table-column type="expand">
|
<template #default="props">
|
<h4>明细数据</h4>
|
<div m="4">
|
<el-table stripe :data="props.row.boxingInfoDetails" max-height="400"
|
style="width: 100%" border>
|
<el-table-column label="序号" type="index" fixed="left" width="55"></el-table-column>
|
<el-table-column :key="index" v-for="(item, index) in detailColumns"
|
:label="item.title" :prop="item.field" :width="item.width"
|
show-overflow-tooltip></el-table-column>
|
</el-table>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column v-for="(item, index) in columns" :key="index" :label="item.title"
|
:prop="item.field" sortable="true" show-overflow-tooltip>
|
<template #default="scope" v-if="item.type == 'tag'">
|
<el-tag size="small">
|
{{ getDictionary(scope.row, item) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
<template v-if="true">
|
<div class="block pagination" key="pagination-01" style="display: flex">
|
<div style="flex: 1"></div>
|
<el-pagination key="pagination-02" @size-change="handleSizeChange"
|
@current-change="handleCurrentChange" :current-page="currentPage1.page"
|
:page-sizes="currentPage1.sizes" :page-size="currentPage1.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="currentPage1.total"></el-pagination>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import VolForm from "../VolForm.vue";
|
import VolBox from "../VolBox.vue";
|
import VolTable from "../VolTable.vue";
|
import buttons from "@/api/buttons";
|
import methodss from './methodsDetail.jsx';
|
export default {
|
components: {
|
'vol-form': VolForm,
|
'vol-table': VolTable,
|
'vol-box': VolBox
|
},
|
|
name: 'CustomTableComponent',
|
data() {
|
return {
|
tableData: [],
|
Mybuttons: [],
|
currentPage1: {
|
sort: "",
|
order: "desc",
|
Foots: "",
|
total: 0,
|
// 2020.08.29增加自定义分页条大小
|
sizes: [30, 60, 100, 120],
|
size: 30, // 默认分页大小
|
Wheres: [],
|
page: 1,
|
rows: 30,
|
},
|
selectRows: [],
|
};
|
},
|
props: {
|
url: String,
|
title: String,
|
columns: {
|
type: Array,
|
default: []
|
},
|
detailColumns: Array,
|
searchFormOptions: Object,
|
searchFormFields: Array,
|
dropdownItems: Array,
|
heigth: String,
|
table: String,
|
},
|
methods: {
|
...methodss.methods,
|
...methodss.data,
|
changeDropdown(btnName, v1) {
|
let button = this.dropdownItems.filter((x) => {
|
return x.name == btnName
|
})
|
if (button && button.length > 0) {
|
button[0].onClick.apply(this)
|
}
|
},
|
handleSizeChange(val) {
|
this.currentPage1.pageSize = val;
|
},
|
handleCurrentChange(val) {
|
this.currentPage1.currentPage = val;
|
},
|
|
getPageData() {
|
// 获取分页数据
|
var query = this.getSearchParameters();
|
let param = {
|
page: this.currentPage1.page,
|
rows: this.currentPage1.rows,
|
sort: this.currentPage1.sort,
|
order: this.currentPage1.order,
|
wheres: "", // 查询条件，格式为[{ name: "字段", value: "xx" }]
|
};
|
param = Object.assign(param, query);
|
param.wheres = JSON.stringify(param.wheres);
|
this.http.post(this.url, param, "查询中").then((x) => {
|
this.tableData = x.rows;
|
this.currentPage1.total = x.total;
|
});
|
},
|
search() {
|
this.getPageData();
|
},
|
|
getSearchParameters() {
|
//获取查询参数
|
let query = { wheres: [] };
|
for (const key in this.searchFormFields) {
|
let value = this.searchFormFields[key];
|
if (this.emptyValue(value)) continue;
|
|
if (typeof value == "number") {
|
value = value + "";
|
}
|
let displayType = this.getSearchItem(key);
|
|
//联级只保留选中节点的最后一个值
|
if (displayType == "cascader") {
|
//查询下面所有的子节点，如：选中的是父节点，应该查询下面所有的节点数据--待完
|
value = value.length ? value[value.length - 1] + "" : "";
|
}
|
//2021.05.02增加区间查询
|
if (
|
typeof value == "string" ||
|
["date", "datetime", "range"].indexOf(displayType) == -1
|
) {
|
query.wheres.push({
|
name: key,
|
value:
|
typeof value == "string" ? (value + "").trim() : value.join(","),
|
displayType: displayType,
|
});
|
continue;
|
}
|
for (let index = 0; index < value.length; index++) {
|
if (!this.emptyValue(value[index])) {
|
query.wheres.push({
|
name: key,
|
value: (value[index] + "").trim(),
|
displayType: (() => {
|
if (["date", "datetime", "range"].indexOf(displayType) != -1) {
|
return index ? "lessorequal" : "thanorequal";
|
}
|
return displayType;
|
})(),
|
});
|
}
|
}
|
}
|
return query;
|
},
|
|
getSearchItem(field) {
|
//获取查询的参数
|
let data;
|
for (let index = 0; index < this.searchFormOptions.length; index++) {
|
if (data) return data.type;
|
const item = this.searchFormOptions[index];
|
data = item.find((x) => {
|
return x.field == field;
|
});
|
}
|
|
return (data || {}).type;
|
},
|
|
emptyValue(value) {
|
if (typeof value == "string" && value.trim() === "") {
|
return true;
|
}
|
if (value instanceof Array && !value.length) {
|
return true;
|
}
|
return value === null || value === undefined || value === "";
|
},
|
|
|
filterPermission(tableName, permission) {
|
//2021.03.19判断是否有某个表的按钮权限
|
//:["Search","Add","Delete","Update","Import","Export","Upload","Audit"]
|
const _result = (this.$store.state.permission || []).find((x) => {
|
return x.url == '/' + tableName
|
})
|
return _result
|
},
|
getButtons() {
|
console.log(buttons);
|
buttons.forEach(element => {
|
this.dropdownItems.push(element);
|
});
|
}
|
},
|
created() {
|
this.getPageData();
|
let permission = this.filterPermission(this.table);
|
console.log(permission);
|
this.getButtons();
|
this.Mybuttons = this.dropdownItems.filter(item => permission.permission.includes(item.value));
|
}
|
};
|
</script>
|
|
<style>
|
@import "./ViewGrid.less";
|
|
.pagination {
|
text-align: right;
|
padding: 2px 28px;
|
border: 1px solid #eee;
|
border-top: 0px;
|
}
|
</style>
|
