<template>
<div style="padding: 1.25rem;" v-cloak v-clickoutside="outsideClose">
<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="108px">
<el-form-item label="科目名称:">
<el-input v-model="queryParams.code" placeholder="科目名称" clearable></el-input>
</el-form-item>
<el-form-item label="费用类型:">
<el-input v-model="queryParams.name" placeholder="费用类型" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
v-hasPermi="['finance:finance:get']"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-row>
</el-form>
<el-row :gutter="10" class="" style="background: #fff; margin: 2px 0 !important; padding: 5px 8px">
<el-button
v-hasPermi="['finance:finance:post']"
type="primary"
plain
:icon="'el-icon-plus'"
size="mini"
@click="handleAdd()"
>新增
</el-button>
</el-row>
<div class="dev-type-main-left">
<el-tree
:data="data"
@node-contextmenu="floderOption"
@node-click="handleNodeClick"
node-key="id"
>
<span class="custom-tree-node"
slot-scope="{ node, data}"
style="width:100%"
>
<i class="el-icon-folder" style="color:#DFBA49;margin-right:59x"></i>
<span style="font-size:15px">{{node.label}}</span>
</span>
</el-tree>
<div :style="{'z-index':999,'position':'fixed',left:optionCardX + 'px',
top: optionCardY + 'px',
width:'100px',
background:'white','box-shadow':'0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)'}"
v-show="optionCardShow"
id="option-button-group">
<el-button @click="append" class="option-card-button">新建</el-button>
<el-button @click="remove" class="option-card-button">删除</el-button>
<el-button @click="rename" class="option-card-button">重命名</el-button>
<el-button @click="reBack" class="option-card-button">取消</el-button>
</div>
</div>
</div>
</template>
<script>
import { getFinanceExpense,addFinanceExpense,updateFinanceExpense,delFinanceExpense } from '@/api/finance/finance';
export default {
components:{},
data() {
return {
queryParams: {
pageNum: 0,
pageSize: 10,
code: '',
name: ''
},
total: 0,
showRightMenu: false,
fianceList: [],
deptOptions: [{
label: '一级 1',
id: '01',
children: [{
label: '二级 1-1',
id: '04',
children: [{
label: '三级 1-1-1',
id: '09'
}]
}]
}, {
label: '一级 2',
id: '02',
children: [{
label: '二级 2-1',
id: '05',
children: [{
label: '三级 2-1-1',
id: '10'
}]
}, {
label: '二级 2-2',
id: '06',
children: [{
label: '三级 2-2-1',
id: '11'
}]
}]
}, {
label: '一级 3',
id: '03',
children: [{
label: '二级 3-1',
id: '07',
children: [{
label: '三级 3-1-1',
id: '12'
}]
}, {
label: '二级 3-2',
id: '08',
children: [{
label: '三级 3-2-1',
id: '13'
}]
}]
}],
defaultProps: {
children: "children",
label: "label"
},
optionCardX:'',
optionCardY:'',
optionCardShow:false,
optionData:[],
clickNode:0,
node:null,
tree:null,
data:[{
id:1,
label:'主营业务成本',
children: [{
label: '二级 3-1',
id: '07',
children: [{
label: '三级 3-1-1',
id: '12'
}]
}, {
label: '二级 3-2',
id: '08',
children: [{
label: '三级 3-2-1',
id: '13'
}]
}]
},{
id:2,
label:'销售费用',
children: [{
label: '二级 3-1',
id: '07',
children: [{
label: '三级 3-1-1',
id: '12'
}]
}, {
label: '二级 3-2',
id: '08',
children: [{
label: '三级 3-2-1',
id: '13'
}]
}]
},{
id:3,
label:'管理费用',
children: [{
label: '二级 3-1',
id: '07',
children: [{
label: '三级 3-1-1',
id: '12'
}]
}, {
label: '二级 3-2',
id: '08',
children: [{
label: '三级 3-2-1',
id: '13'
}]
}]
}],
testData:[
{
name:'影像'
},
{
name:'地形'
},
{
name:'模型'
},
{
name:'矢量'
},
],
testData2:[
{
id:0,
name:''
},
{
id:1,
name:'图层树'
},
]
};
},
watch: {
},
created() {
this.getList()
},
mounted() {
/*
var currentCli = document.getElementById("option-button-group");
console.log(!currentCli.contains(event.target))
if (currentCli) {
if (!currentCli.contains(event.target)) { //点击到了id为option-button-group以外的区域，就隐藏菜单
this.optionCardShow = false;
}
} */
},
directives: {
clickoutside: {
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
function KeyUp(e) {
if (e.keyCode == 27) {
if (binding.expression) {
binding.value(e)
}
}
}
el.__vueClickOutSize__ = documentHandler
el.__vueKeyup__ = KeyUp
document.addEventListener('keyup', KeyUp)
document.addEventListener('click', documentHandler)
},
unbind(el, binding) {
document.removeEventListener('click', el.__vueClickOutSize__)
delete el.__vueClickOutSize__
document.removeEventListener('keyup', el.__vueKeyup__)
delete el.__vueKeyup__
}
}
},
methods: {
outsideClose(){
this.optionCardShow = false
},
append(){
},
remove(){
},
rename(){
},
reBack(){
this.optionCardShow = false
},
floderOption(e,data,n,t){
this.optionCardShow = false
this.optionCardX =e.x
this.optionCardY = e.y - 110
this.optionData = data
this.node = n
this.tree = t
this.optionCardShow = true
},
// 点击框外区域 隐藏菜单
/* OptionCardClose(event) {
var currentCli = document.getElementById("option-button-group");
if (currentCli) {
if (!currentCli.contains(event.target)) { //点击到了id为option-button-group以外的区域，就隐藏菜单
this.optionCardShow = false;
}
}
}, */
// 创建
append() {
this.optionCardShow = false
this.$prompt('请输⼊⽂件名', '提⽰', { // 弹出框⽤于输⼊⽂件名
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^\S{1,10}$/,
inputErrorMessage: '命名不合法，请重新命名'
}).then(({
value
}) => {
if (this.node.level >= 3) {
this.$message.error("最多只⽀持三级！")
return false;
}
console.log(this.optionData.id);
const newChild = { // 新建⼀个⼦节点
id: id++,
label: value,
children: []
};
// TODO 测试修改
//测试，在树形控件下方显示创建后的内容
const newSet = {
id: id++,
name:value
}
console.log(this.optionData.children);
if (!this.optionData.children) { // 如果当前节点没有⼦节点，那就新建⼀个空的⼦节点数组，⽤来存放新建⼦⽂件夹
this.$set(this.optionData, 'children', []);
this.$set(this.testData2, 'children', []) //测试，在树形控件下方显示创建后的内容
}
this.optionData.children.push(newChild); // 插⼊
this.testData2.push(newSet)
//同时展开节点
if (!this.node.expanded) {
this.node.expanded = true
}
this.$message({
type: 'success',
message: '⽂件夹新建成功！'
});
}).catch(() => {
this.$message({
type: 'info',
message: '创建失败'
});
});
},
// 删除
remove() {
this.optionCardShow = false
this.$confirm('此操作将永久删除该⽂件夹, 是否继续?', '提⽰', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const parent = this.node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === this.data.id);
children.splice(index, 1);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 重命名
rename(){
console.log(this.node)
this.optionCardShow = false
this.$prompt('请输⼊⽂件名', '提⽰', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPlaceholder: this.node.data.label,
inputPattern: /^\S{1,10}$/,
inputErrorMessage: '⽂件名长度在1到10之间'
}).then(({
value
}) => {
this.node.data.label = value
this.$message({
type: 'success',
message: '⽂件夹已重命名！'
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消输⼊'
});
});
},
test(node) {
console.log(node.id);
this.clickNode = node.id
},
handleNodeClick(item, data) {
console.log('item: ',item,'data: ', data);
this.test(data)
},
addDevHandle() {
},
editDevHandle() {
},
// 删除操作
delDevHandle() {
},
getList() {
getFinanceExpense().then((res)=>{
let treeDataNode = res.data
})
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleNodeClick(){
},
handleDelete(){
},
handleUpdate(){
},
handleAdd(){
},
resetQuery(){
},
handleQuery(){
}
},
};
</script>
<style scoped>
.folder-box {
height: 100%;
}
.option-card-button {
width: 100%;
margin-left: 0;
font-size: 10px;
border-radius: 0;
}
</style>
04-06
489
489
03-02
709
709
08-24
410
410
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
