'init'
This commit is contained in:
258
src/renderer/src/components/dialog/directory.vue
Normal file
258
src/renderer/src/components/dialog/directory.vue
Normal file
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="adddirectory">
|
||||
<div class="box">
|
||||
<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="submitForm(ruleForm)"
|
||||
>
|
||||
<el-form-item label="名称：" prop="source_name">
|
||||
<!-- @input="removeSpaces" -->
|
||||
<el-input v-model.trim="form.source_name" placeholder="图层文件夹"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="btnOption">
|
||||
<el-button type="primary" @click="submitForm(ruleForm)">确定</el-button>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { $changeComponentPop } from '@/utils/communication'
|
||||
import { throttle } from '@/utils/index'
|
||||
import { ElMessage, FormInstance } from 'element-plus'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
|
||||
const { getKeyOfSelectedNode, getSelectedNode, cusAddNodes, getSameLevel } = useTreeNode()
|
||||
const title = ref('添加文件夹')
|
||||
let form: any = reactive({
|
||||
source_name: '图层'
|
||||
})
|
||||
const ruleForm = ref()
|
||||
const rules = reactive({
|
||||
source_name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
||||
})
|
||||
const removeSpaces = (value: string) => {
|
||||
form.source_name = value.replace(/\s/g, '')
|
||||
}
|
||||
const close = () => {
|
||||
$changeComponentPop('.adddirectory', false)
|
||||
}
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
add()
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
const add = throttle(async () => {
|
||||
let p_id = getKeyOfSelectedNode(window.treeObj, 'source_id')
|
||||
let fnone = getSelectedNode(window.treeObj)
|
||||
const res = await TreeApi.addDirectory({
|
||||
source_name: form.source_name,
|
||||
p_id
|
||||
})
|
||||
if (res.code == 0) {
|
||||
const node = {
|
||||
...res.data
|
||||
}
|
||||
let addNode = cusAddNodes(window.treeObj, getSelectedNode(window.treeObj), [node], true) //添加节点
|
||||
//获取该节点下的同级节点
|
||||
const someNode: any = getSameLevel(window.treeObj, addNode[0])
|
||||
const newNode = someNode.map((item: any) => {
|
||||
let index = item.getIndex()
|
||||
item.tree_index = index
|
||||
return {
|
||||
...item,
|
||||
tree_index: item.getIndex()
|
||||
}
|
||||
})
|
||||
await updateTree(newNode)
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '添加失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
// console.log(res)
|
||||
}, 3000)
|
||||
//上传或修改树的层级
|
||||
const updateTree = async (newNode: any) => {
|
||||
const list = newNode.map((item: any) => {
|
||||
return {
|
||||
source_id: item.source_id,
|
||||
tree_index: item.tree_index,
|
||||
p_id: item.p_id
|
||||
}
|
||||
})
|
||||
console.log(list)
|
||||
const res = await TreeApi.updateTree({ list })
|
||||
if (res.code == 0) {
|
||||
ElMessage({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
|
||||
cancel()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '添加失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
$changeComponentPop('.adddirectory', false)
|
||||
form.source_name = '图层'
|
||||
ruleForm.value?.resetFields()
|
||||
}
|
||||
</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__wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 0.2px solid rgba(0, 255, 255, 0.5);
|
||||
box-shadow: 0 0 0 0.2px rgba(0, 255, 255, 0.5) inset !important; /* 新增此行 */
|
||||
}
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
// border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.btnOption {
|
||||
margin-top: 5px;
|
||||
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