<template>
<div class="toolBarBody">
<!--需支持自定义合计值，如无自定义合计值则走默认总条数展示，需考虑自定义合计值的实现及格式-->
<span class="text">共有<label class="unit">{{totalCount}}</label>条</span>
<!--列设置左侧页签动作--->
<div v-if="toolbar && toolbar.length > 0" class="commomBtnGroup" :style="{right:noShowColSet ? '75px' : '0px'}">
<div class="commonBtn" v-for='(val,index) in toolbar' :key='index'>
<Button v-if="!val.children && displayButtonShow[val.action]" :type='val.type ? val.type : "function"' size="small" @click='onClick(val.action, val.param)' :loading='getLoading(val.action)' :disabled='isDisabledToolBtn(val.action)'>{{val.title}}</Button>
<Button v-else-if="val.children && val.children.length == 1 && displayButtonShow[val.action]" :type='val.type ? val.type : "function"' size="small" @click="onClick(val.children[0].action, val.children[0].param)" :loading="getLoading(val.children[0].action)" :disabled="isDisabledToolBtn(val.children[0].action)">{{val.children[0].title}}</Button>
<Dropdown v-else-if="val.children && val.children.length > 1" trigger="click" transfer @on-click="onDropdownClick">
<a>{{val.title}}<Icon type="ios-arrow-down" class='stricle'></Icon></a>
<DropdownMenu slot="list">
<DropdownItem
v-for='(VAL,INDEX) in val.children'
:key='INDEX'
:name='VAL.name'
:disabled='isDisabledToolBtn(VAL.action)'
>{{VAL.title}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</div>
<!--列设置-->
<div v-if='noShowColSet' class="colSet">
<Dropdown placement="bottom-end">
<a>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-_lieshezhi"></use>
</svg>
列设置
</a>
<DropdownMenu slot="list">
<CheckboxGroup v-model="canChoseCol" @on-change='checkGroupChange'>
<span v-for="(val,index) in canChoseColData" :key='index' :title='val.title'>
<Checkbox :label="val.title"></Checkbox><br>
</span>
</CheckboxGroup>
</DropdownMenu>
</Dropdown>
</div>
</div>
</template>
<script>
import queryUtil from "./queryUtil.js";
export default {
name: "ToolBar",
data() {
let displayButtonShow = {};
for(let define of this.toolbar){
displayButtonShow[define.action]=false;
}
return {
canChoseCol: [],
canChoseColData: [],
noShowColSet: true,
loadingArray: [],
displayButtonShow
};
},
props: {
toolbar: {
type: Array,
default: function () {
return [];
}
},
tableData: {
type: [Array, Object],
required: true
},
//元数据配置中的table配置内容
table: {
type: Object,
required: true
},
totalCount: {
type: Number,
default: function () {
return 0;
}
},
tableSelection: {
type: Array,
default: function () {
return null;
}
},
queryHandler: {
type: Object
},
//自定义合计值对象，需将资产默认信息改为动态
cardInfo: {
type: Object,
default: function () {
return {
shul: 0,
jiaz: 0.0
};
}
},
//暂未使用该属性
disabledBtnGroup: {
type: Array,
default: function () {
return new Array();
}
},
extraActionObject: {
type: [Object, Array]
},
queryBus: {
type: Object,
require: true
}
},
watch: {
//资产指定字段后的逻辑处理，并不通用
toolbar: {
handler(newval, oldval) {
if (localStorage.getItem("renlfw")) {
window.GAMS.Util.invokeServer({
path: "/gams/realnamemanage/getRealnameConfig",
contentType: "application/json",
type: "POST",
}).then((data) => {
this.zicgxhFucntion(newval, data)
});
} else {
window.GMS.vbus.$on("on-show-action", (data) => {
this.zicgxhFucntion(newval, data)
});
}
for (let val of newval) {
this.displayButton(val.action, val.param)
}
},
deep: true
},
table: {
handler: function () {
this.getCanChoseColData();
}
}
},
methods: {
displayButton(val, param) {
let that = this,
currentNameObject = {
queryName: this.queryBus.config.name,
tabName: this.queryBus.currGroup.name
};
if (queryUtil.hasActionDisplay(val)) {
queryUtil.actionDisplay(this, null, val, param, null, currentNameObject).then(data => {
that.$set(that.displayButtonShow, val, data.result)
})
} else {
that.displayButtonShow[val] = true
}
},
//资产个性化字段逻辑处理方法
zicgxhFucntion(newval, data) {
if (data.code == 0) {
for (var i in data.content) {
if (i == "shifzcyjbf" && data.content[i] == 0) {
for (let item = 0; item < newval.length; item++) {
if (newval[item].action == "yijbf" && newval[item].display == "true") {
newval.splice(item, 1);
}
}
} else if (i == "shifkqtx" && data.content[i] == 0) {
for (let item = 0; item < newval.length; item++) {
if (newval[item].action == "tix" && newval[item].display == "true") {
newval.splice(item, 1);
}
}
} else if (i == "shifxyrl" && data.content[i] == 0) {
for (let item = 0; item < newval.length; item++) {
if (newval[item].name == "pilcz" && newval[item].children) {
for (var value = 0; value < newval[item].children.length; value++) {
if (newval[item].children[value].name == "distributionTable_fp" && newval[item].children[value].display && newval[item].children[value].display == "true") {
newval[item].children.splice(value, 1);
} else if (newval[item].children[value].name == "distributionTable_qx" && newval[item].children[value].display && newval[item].children[value].display == "true") {
newval[item].children.splice(value, 1);
} else if (newval[item].children[value].name == "distributionTable_qz") {
newval[item].children[value].title = "分配";
}
}
}
}
} else if (data.content["shifxyrl"] == 1 && data.content["shifzcqzsmz"] == 0) {
for (var item = 0; item < newval.length; item++) {
if (newval[item].name == "pilcz" && newval[item].children) {
for (let value = 0; value < newval[item].children.length; value++) {
if (newval[item].children[value].name == "distributionTable_qz") {
newval[item].children.splice(value, 1);
}
}
}
}
}
}
}
},
//根据是否具有可禁止动作判断动作是否可点击状态
isDisabledToolBtn(action) {
if (this.disabledBtnGroup.length == 0) {
return false;
} else {
if (this.disabledBtnGroup.indexOf(action) != -1) {
return true;
}
return false;
}
},
//选中状态改变触发
checkGroupChange() {
this.changeCol("change");
},
changeCol(fromtype) {
if (fromtype == "change") {
let canChoseCol = JSON.parse(JSON.stringify(this.canChoseCol));
this.$emit("getChangeColData", canChoseCol);
}
},
//页签动作执行实现
onClick(val, param) {
let that = this;
if (param && param.sync) {
that.loadingArray.push(val);
}
queryUtil.executeAction(this, this.tableSelection, val, param, null, this.extraActionObject, this.queryHandler, this.queryBus.currentDataQueryConditionSet, function (response) {
if (response) {
let index = that.loadingArray.indexOf(val);
if (index > -1) {
that.loadingArray.splice(index, 1);
}
}
}
);
},
//按钮loading状态
getLoading(val) {
if (!val) {
return false;
}
return this.loadingArray.indexOf(val) > -1;
},
//下拉类型动作执行实现
onDropdownClick(val) {
for (let i = 0, len = this.toolbar.length; i < len; i++) {
let v = this.toolbar[i];
if (!v.children || v.children.length == 0) {
if (v.name == val) {
queryUtil.executeAction(this, this.tableSelection, v.action, v.param, null, this.extraActionObject, this.queryHandler, this.queryBus.currentDataQueryConditionSet);
return;
}
} else {
for (let index = 0, size = v.children.length; index < size; index++) {
let item = v.children[index];
if (item.name == val) {
queryUtil.executeAction(this, this.tableSelection, item.action, item.param, null, this.extraActionObject, this.queryHandler, this.queryBus.currentDataQueryConditionSet);
return;
}
}
}
}
},
//获取可以在列设置中选择的字段信息
getCanChoseColData() {
if (!this.table || !this.table.columns) {
return;
}
let colLen = this.table.columns.length,
tableColData = this.table.columns,
arr = [];
for (let i = 0; i < colLen; i++) {
if (tableColData[i].columnType && tableColData[i].columnType.name == "select") {
arr.push(tableColData[i]);
}
}
this.canChoseColData = arr; //列设置中可进行选择的所有列
let arrOther = [];
for (let i = 0; i < colLen; i++) {
if (tableColData[i].columnType && tableColData[i].columnType.name == "select" && tableColData[i].columnType.data.selected && tableColData[i].columnType.data.selected != false) {
arrOther.push(tableColData[i].title);
}
}
setTimeout(() => {
this.canChoseCol = arrOther; //列设置中已经被选择展示的所有列
}, 0);
}
},
mounted(){
for (let val of this.toolbar) {
this.displayButton(val.action, val.param)
}
},
created() {
var that = this;
window.GMS.vbus.$on("onCurrentChange", function (val, oldVal) {});
// window.GMS.vbus.$on('onSelectionChange',function(val){
// that.tableSelection=JSON.parse(JSON.stringify(val))
// })
window.GMS.vbus.$on("onSelectAll", function (val) {});
window.GMS.vbus.$on("onSelectAllCancle", function (val) {});
window.GMS.vbus.$on("custom-query-refresh", function () {
that.tableSelection = null;
});
}
};
</script>
<style lang="less" scoped>
.toolBarBody {
height: 36px;
line-height: 36px;
background: #f8f8f9;
padding: 0 15px;
position: relative;
.text {
font-family: Microsoft YaHei;
font-size: 12px;
color: #555555;
letter-spacing: 0;
font-weight: 600;
.unit {
color: #ff9902;
padding: 0 3px;
}
}
.commomBtnGroup {
position: absolute;
top: -2px;
right: 75px;
.commonBtn {
vertical-align: middle;
display: inline-block;
// background: #ffffff;
// border: 1px solid #dfdfeb;
border-radius: 2px;
font-family: Microsoft YaHei;
font-size: 12px;
color: #222222;
letter-spacing: 0;
height: 26px;
line-height: 26px;
// padding: 0 12px;
text-align: center;
margin-right: 10px;
cursor: pointer;
.stricle {
margin-left: 5px;
}
/deep/.ivu-btn-small {
height: 26px;
padding: 0 12px;
}
}
}
/deep/.ivu-dropdown {
padding: 0 8px;
border: 1px solid #dfdfeb;
background: #ffffff;
height: 26px;
vertical-align: middle;
a {
color: #222;
}
}
.colSet {
display: inline-block;
position: absolute;
bottom: 6px;
right: 10px;
padding-left: 2px;
cursor: pointer;
/deep/.ivu-dropdown {
border: none;
background: none;
}
/deep/.ivu-dropdown-menu {
padding: 0 10px;
}
/deep/.ivu-select-dropdown {
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 200px;
overflow-y: auto;
.ivu-select-arrow {
margin-top: 0;
}
}
}
}
</style>