<template>
|
<div>
|
<!--表格基础按钮-->
|
<div v-if="type === 'table' || type === 'TreeTable'">
|
<!--top展示表格上方区域 menu展示表格操作栏区域 无就是默认 -->
|
<el-tooltip v-if="LocationType === 'top'" v-for="item in basicButtonList.top" :content="item.description || item.name" placement="top">
|
<el-button :key="item.oid"
|
:type="item.paramVOS && item.paramVOS.btnType ? item.paramVOS.btnType : 'primary'" plain
|
size="small"
|
@click="buttonClick(item)">
|
<icon-show :name="item.iconPath"></icon-show>{{ item.name }}
|
</el-button>
|
</el-tooltip>
|
|
<el-button type="text" @click="handleDefaultAddChildren(scope.row)" v-if="(LocationType === 'menu' && type === 'TreeTable')">新增子级</el-button>
|
<el-button type="text" icon="el-icon-view" size="small" plain @click="$emit('rowView',scope.row,scope.index)" v-if="LocationType === 'menu'">查看</el-button>
|
|
<el-tooltip v-if="LocationType === 'menu'" v-for="item in basicButtonList.menu" :content="item.description || item.name" placement="top">
|
<el-button :key="item.oid"
|
:type="item.paramVOS.btnType || 'text'" plain
|
size="small"
|
@click="buttonClick(item,scope.row)">
|
<icon-show v-if="item.iconPath" :name="item.iconPath"></icon-show>
|
<i v-else :class="item.id === 'edit' ? 'el-icon-edit' : (item.id === 'delete' ||item.id === 'del' ? 'el-icon-delete' : '')"></i>
|
{{ item.name }}
|
</el-button>
|
</el-tooltip>
|
|
<!-- 表格内按钮操作对话框表单 -->
|
<dynamic-table-form ref="dynamicForm" :formList="formList" :title="formName" :visible.sync="visible"
|
style="display: none"></dynamic-table-form>
|
</div>
|
<div v-else-if="type === 'form'">
|
<el-tooltip v-for="item in basicButtonList" :content="item.description || item.name" placement="top">
|
<el-button :key="item.oid"
|
:type="item.paramVOS && item.paramVOS.btnType ? item.paramVOS.btnType : 'primary'" plain
|
plain
|
size="small"
|
@click="buttonClick(item)">
|
<icon-show :name="item.iconPath"></icon-show>{{ item.name }}
|
</el-button>
|
</el-tooltip>
|
</div>
|
<div v-else-if="type === 'tree'" class="tree-buttons">
|
<el-tooltip v-for="item in basicButtonList" :content="item.description || item.name" placement="top">
|
<el-button :key="item.oid"
|
:type="item.paramVOS && item.paramVOS.btnType ? item.paramVOS.btnType : 'primary'" plain
|
plain
|
size="small"
|
@click="buttonClick(item)">
|
<icon-show :name="item.iconPath"></icon-show>{{ item.name }}
|
</el-button>
|
</el-tooltip>
|
<el-button type="primary"
|
plain
|
size="small"
|
@click="$emit('refresh')">刷新</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import func from "@/util/func";
|
import {validatenull} from "@/util/validate";
|
import {doAction} from '@/components/actions/BaseAction';
|
import Vue from "vue";
|
|
export default {
|
name: "dynamic-button",
|
props: {
|
componentVO: {
|
type: Object,
|
default: {}
|
},
|
type: {
|
type: String
|
},
|
LocationType: {
|
type: String,
|
},
|
scope: {
|
type: Object,
|
},
|
butttonList: {
|
type: Array
|
},
|
sourceData: {
|
//按钮所属区域的上一区域选中数据
|
type: Object,
|
default: {}
|
},
|
dataStore: {
|
//按钮所属区域选中数据
|
type: Array,
|
default: []
|
},
|
},
|
data() {
|
return {
|
visible: false,
|
formName: '',
|
// 表单数据
|
formList: [],
|
}
|
},
|
computed: {
|
basicButtonList() {
|
const basicColumn = this.butttonList;
|
if (!basicColumn || !Array.isArray(basicColumn)) {
|
return []; // 如果 basicColumn 未定义或者不是数组，返回空数组
|
}
|
|
if (this.type === 'form') {
|
return basicColumn;
|
}else if (this.type === 'tree') {
|
const treeBtn = basicColumn.filter(item => {
|
if (item.id != "refresh") {
|
return true;
|
}
|
return false
|
});
|
return treeBtn;
|
} else if (this.type === 'table' || this.type === 'TreeTable') {
|
const top = basicColumn.filter(item => {
|
if (item.paramVOS && item.paramVOS.showLocation && item.paramVOS.showLocation !== 'menu') {
|
return true;
|
} else if (item.id != "edit" && item.id != "del" && item.id != "delete" && item.id != "refresh") {
|
return true;
|
}
|
return false
|
});
|
const menu = basicColumn.filter(item => {
|
if (item.paramVOS && item.paramVOS.showLocation && item.paramVOS.showLocation === 'menu') {
|
return true
|
} else if (item.id == "edit" || item.id == "del" || item.id == "delete"){
|
return true;
|
}
|
return false;
|
});
|
return {
|
top: top,
|
menu: menu,
|
};
|
}
|
}
|
},
|
methods: {
|
//表格树默认新增子项
|
handleDefaultAddChildren(row) {
|
this.visible = true;
|
this.formName = '新增子级'
|
this.$refs.dynamicForm.form = row;
|
},
|
buttonClick(buttonitem,rowData) {
|
const paramVOS = buttonitem.paramVOS;
|
const DefineVO = this.componentVO.treeDefineVO || this.componentVO.tableDefineVO || this.componentVO.treeTableDefineVO || this.componentVO.formDefineVO;
|
if (!paramVOS['title']) {
|
paramVOS['title'] = buttonitem.name + (DefineVO.title || '');
|
}
|
|
if (!paramVOS['type']) {
|
paramVOS['type'] = DefineVO.btmType;
|
}
|
|
if (paramVOS['BSContent'] || paramVOS['BSContext']) {
|
paramVOS['context'] = paramVOS['BSContext'] || paramVOS['BSContent']
|
paramVOS['content'] = paramVOS['BSContext'] || paramVOS['BSContent'];
|
}
|
|
const that = this;
|
//paramVOS.customBtn //弹窗默认有保存按钮,customBtn为true时内容展示自定义按钮
|
doAction(buttonitem, {
|
paramVOS: paramVOS,
|
dataStore: rowData?[rowData] :(this.dataStore || []),
|
sourceData: this.sourceData || {}
|
}, function (actionType,data) {
|
that.$emit("afterMethod",actionType,data);
|
});
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
