创建新仓库
This commit is contained in:
236
src/renderer/components/dialog/adddirectory.vue
Normal file
236
src/renderer/components/dialog/adddirectory.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="adddirectory">
|
||||
<div class="box" v-draggable>
|
||||
<div class="boxHeader nav">
|
||||
<!-- <span></span> -->
|
||||
<span class="label">{{ title }}</span>
|
||||
<div class="close-box" @click="close">
|
||||
<span class="close"></span>
|
||||
<i>x</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxBody">
|
||||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" @keyup.enter.native="submit">
|
||||
<el-form-item label="名称：" prop="source_name">
|
||||
<!-- @input="removeSpaces" -->
|
||||
<el-input size="mini" v-model.trim="form.source_name" placeholder="图层文件夹"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="btnOption">
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addSource } from "../../api/gisAPI";
|
||||
import {
|
||||
getKeyOfSelectedNode,
|
||||
getSelectedNode,
|
||||
cusAddNodes,
|
||||
getNodeData,
|
||||
} from "../Tree/treeNode.js";
|
||||
export default {
|
||||
name: "adddirectory",
|
||||
data() {
|
||||
return {
|
||||
title: '添加文件夹',
|
||||
form: {
|
||||
source_id: "",
|
||||
source_name: "图层",
|
||||
},
|
||||
rules: {
|
||||
source_name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
removeSpaces(value) {
|
||||
this.form.source_name = value.replace(/\s/g, '');
|
||||
},
|
||||
close() {
|
||||
this.$changeComponentShow(".adddirectory", false);
|
||||
},
|
||||
submit() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.add();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
add() {
|
||||
console.log(window.treeObj);
|
||||
let p_id = getKeyOfSelectedNode(window.treeObj, "source_id");
|
||||
let option = {
|
||||
source_name: this.form.source_name,
|
||||
source_id: this.$md5(new Date().getTime() + "图层"),
|
||||
source_type: "directory",
|
||||
p_id,
|
||||
};
|
||||
let node = getNodeData(option, {});
|
||||
let treeArr = window.treeObj.getNodesByParam("level", 0);
|
||||
//循环treeArr，找到tree_index最大的节点，然后node.tree_index = tree_index + 1
|
||||
let max_tree_index = 0;
|
||||
treeArr.forEach(item => {
|
||||
if (item.tree_index > max_tree_index) {
|
||||
max_tree_index = item.tree_index;
|
||||
}
|
||||
});
|
||||
node.tree_index = max_tree_index + 1;
|
||||
// node.tree_index = tree_index;
|
||||
addSource(node).then((res) => {
|
||||
cusAddNodes(
|
||||
window.treeObj,
|
||||
getSelectedNode(window.treeObj),
|
||||
[node]
|
||||
);
|
||||
this.cancel()
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.$changeComponentShow(".adddirectory", false);
|
||||
this.form = {
|
||||
source_id: "",
|
||||
source_name: "图层",
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.adddirectory {
|
||||
user-select: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.box {
|
||||
width: 20vw;
|
||||
height: 10vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--color-sdk-auxiliary-public);
|
||||
font-size: 14px;
|
||||
// z-index: 999999;
|
||||
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
border: 1.5px solid;
|
||||
backdrop-filter: blur(2px);
|
||||
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
|
||||
text-align: left;
|
||||
font-family: "sy-boldface";
|
||||
|
||||
.boxHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
line-height: 46px;
|
||||
padding: 5px 16px 5px 16px;
|
||||
height: 46px;
|
||||
|
||||
.label {
|
||||
font-family: "Ali-mother-counts-bold";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
text-shadow: 0px 0px 9px rgb(20 118 255);
|
||||
}
|
||||
|
||||
.close-box {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
border-radius: 0 0 0 90%;
|
||||
overflow: hidden;
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(var(--color-sdk-base-rgb), 1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxBody {
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
|
||||
.el-form--label-top .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.btnOption {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
color: #ffffff;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.el-button:hover {
|
||||
border-color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user