<template>
|
<div class="subpage_Box">
|
<My-bread :list="[
|
`${$t('dataManage.dataManage')}`,
|
`${$t('dataManage.projectManagement')}`,
|
]"></My-bread>
|
<el-divider />
|
<div class="mainBox">
|
|
<div class="cataLogContent leftTree subpage_Div"
|
style="border: 1px solid #dcdfe6;">
|
<div style="min-width: 450px">
|
<el-tree ref="tree"
|
:props="defaultProps"
|
node-key="id"
|
:data="dirList"
|
:highlight-current="true"
|
:expand-on-click-node="false"
|
:default-expanded-keys="expandData"
|
@node-click="handleNodeClick"
|
@node-contextmenu="openTreeMenu">
|
</el-tree>
|
<div class="right_menu box_divm"
|
id="menu"
|
v-show="showRightMenu">
|
<ul>
|
<li @click="setMenuDataCopy">复制</li>
|
<li @click="setMenuDataPaste">粘贴</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="cataLog_rightContent right subpage_Div">
|
<div class="inquire"
|
style="
|
align-items: center;
|
display: flex;
|
justify-content: space-between;
|
">
|
<el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/' }">{{
|
|
}}</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div style="margin-right: -5px">
|
<div class="menuTop">
|
<el-form :inline="true"
|
class="demo-form-inline">
|
<el-form-item>
|
|
<el-button v-show="directoryFlag"
|
icon="el-icon-download"
|
type="info"
|
size="small"
|
@click="setDirectoryDownload">{{ $t("shuJuGuanLi.butten.folderDownload") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
|
<el-button icon="el-icon-download"
|
type="info"
|
size="small"
|
@click="setTemplateDownload">{{ $t("shuJuGuanLi.butten.templateDownload") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-upload action
|
accept=".xlsx, .xls"
|
:auto-upload="false"
|
:show-file-list="false"
|
:on-change="handleChange"
|
:file-list="fileList">
|
<el-button type="success"
|
icon="el-icon-plus"
|
size="small">{{ $t("shuJuGuanLi.butten.uploads") }}</el-button>
|
</el-upload>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="menuStatus.insert"
|
:disabled="itemdetail.pid == null ? true : false"
|
@click="setNewNode(1)"
|
type="success"
|
icon="el-icon-plus"
|
size="small">{{ $t("shuJuGuanLi.butten.NewPeer") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="menuStatus.insert"
|
:disabled="itemdetail.pid == null ? true : false"
|
@click="setNewNode(2)"
|
type="success"
|
icon="el-icon-plus"
|
size="small">{{ $t("shuJuGuanLi.butten.AddChild") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="menuStatus.delete"
|
@click="setDelNode()"
|
:disabled="itemdetail.pid == null ? true : false"
|
type="danger"
|
icon="el-icon-delete"
|
size="small">{{ $t("shuJuGuanLi.butten.Delete") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="menuStatus.update"
|
:disabled="itemdetail.pid == null ? true : false"
|
@click="setEditNode(1)"
|
type="info"
|
icon="el-icon-top"
|
size="small">{{ $t("shuJuGuanLi.butten.MoveUp") }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="menuStatus.update"
|
:disabled="itemdetail.pid == null ? true : false"
|
@click="setEditNode(2)"
|
type="info"
|
icon="el-icon-bottom"
|
size="small">{{ $t("shuJuGuanLi.butten.MoveDown") }}</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
|
</div>
|
<div class="dividing-line"></div>
|
|
<el-form :model="itemdetail"
|
ref="itemdetail"
|
:rules="rules"
|
style="position: relative; padding-top: 18px">
|
<el-form-item prop="name"
|
:label="$t('dataManage.dataUpObj.name')"
|
:label-width="formLabelWidth">
|
<el-input v-model="itemdetail.name"
|
size="small"
|
style=" max-width: 420px"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueName')"
|
clearable />
|
<!-- style="max-width: 400px"-->
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.explain')"
|
:label-width="formLabelWidth">
|
<el-input v-model="itemdetail.descr"
|
type="textarea"
|
style=" max-width: 420px"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueexplain')"
|
clearable />
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.inspectionItems')"
|
:label-width="formLabelWidth">
|
<el-select style="width: 420px"
|
v-model="itemdetail.checks"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueexamine')"
|
multiple>
|
<el-option v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<!-- <el-input
|
|
type="textarea"
|
style=" max-width: 420px"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueone')"
|
clearable
|
/> -->
|
<!-- resize="none"-->
|
<!-- style="height: 100%; overflow: auto; max-width: 400px"-->
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.fileExtension')"
|
:label-width="formLabelWidth">
|
<el-input v-model="itemdetail.exts"
|
type="textarea"
|
style=" max-width: 420px"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuesuffix')"
|
clearable />
|
</el-form-item>
|
<!-- <el-form-item
|
:label="$t('dataManage.dataUpObj.inspectionItems')"
|
:label-width="formLabelWidth"
|
>
|
<el-input
|
v-model="itemdetail.checks"
|
type="textarea"
|
resize="none"
|
style="height: 100%; overflow: auto; max-width: 400px"
|
/>
|
</el-form-item>-->
|
<el-form-item :label="$t('dataManage.dataUpObj.code')"
|
:label-width="formLabelWidth">
|
<el-input v-model="itemdetail.code"
|
disabled
|
type="textarea"
|
style=" max-width: 420px"
|
autosize />
|
</el-form-item>
|
<!-- <el-form-item
|
:label="$t('dataManage.dataUpObj.catalogRemarks')"
|
:label-width="formLabelWidth"
|
>
|
<el-input
|
v-model="itemdetail.bak"
|
type="textarea"
|
resize="none"
|
style="max-width: 400px"
|
/>
|
</el-form-item>-->
|
<!-- <div class="btnBox">
|
<el-button
|
v-if="menuStatus.update"
|
class="primary"
|
size="small"
|
@click="updCata('itemdetail')"
|
>{{ $t("common.preservation") }}</el-button
|
>
|
<el-button
|
v-if="menuStatus.update"
|
type="info"
|
size="small"
|
@click="reset"
|
>{{ $t("common.cancel") }}</el-button
|
>
|
</div>-->
|
</el-form>
|
<div slot="footer"
|
class="dialog-footer"
|
style="padding-left: 45% ;padding-top: 20px">
|
<el-button v-if="menuStatus.update"
|
type="primary"
|
size="small"
|
@click="updCata('itemdetail')">{{ $t("common.preservation") }}</el-button>
|
<el-button v-if="menuStatus.update"
|
size="small"
|
@click="reset">{{ $t("common.cancel") }}</el-button>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="cataSettings_tree"> -->
|
|
<!-- <div class="cataTreeBox">
|
|
</div> -->
|
<!-- </div> -->
|
<!-- <div class="itemSettings"> -->
|
<!-- <div class="title_box">
|
<h4>详细信息</h4>
|
</div> -->
|
<!-- <div class="form_box">
|
|
</div> -->
|
<!-- </div> -->
|
<el-dialog :title="$t('dataManage.dataUpObj.newDirectory')"
|
:visible.sync="dialogFormVisible"
|
:before-close="handleClose">
|
<el-form :model="ruleForm"
|
ref="ruleForm"
|
:rules="rules">
|
<el-form-item :label="$t('dataManage.dataUpObj.name')"
|
prop="name"
|
:label-width="formLabelWidth">
|
<el-input v-model="ruleForm.name"
|
autocomplete="off"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueName')"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.explain')"
|
:label-width="formLabelWidth">
|
<el-input v-model="ruleForm.descr"
|
autocomplete="off"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueexplain')"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.fileExtension')"
|
:label-width="formLabelWidth">
|
<el-input v-model="ruleForm.exts"
|
type="textarea"
|
resize="none"
|
style="height: 100%; overflow: auto"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuesuffix')" />
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.inspectionItems')"
|
:label-width="formLabelWidth">
|
<!-- <el-input
|
|
type="textarea"
|
resize="none"
|
|
/> -->
|
<el-select v-model="ruleForm.checks"
|
multiple
|
style="width:100%;"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueexamine')">
|
<el-option v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.code')"
|
:label-width="formLabelWidth">
|
<el-input v-model="ruleForm.code"
|
disabled
|
type="textarea"
|
resize="none"
|
style="height: 100%; overflow: auto" />
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.dataUpObj.Remarks')"
|
:label-width="formLabelWidth">
|
<el-input v-model="ruleForm.bak"
|
autocomplete="off"
|
:placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueRemarks')"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer"
|
class="dialog-footer">
|
<el-button @click="resetForm('ruleForm')">{{
|
$t("common.cancel")
|
}}</el-button>
|
<el-button class="primary"
|
@click="submitForm('ruleForm')"
|
v-loading.fullscreen.lock="fullscreenLoading">{{ $t("common.preservation") }}</el-button>
|
</div>
|
</el-dialog>
|
|
<iframe id="Iframe1"
|
src=""
|
style="display: none; border: 0; padding: 0; height: 0; width: 0"></iframe>
|
<div class="loadBox"
|
v-if="loadDialogVisible">
|
<div style="widht:100%; margin:20px; color:white">
|
<div style="margin-left:99%">
|
<!-- <el-link
|
@click="setloadDialogVisible()"
|
style="color:white"
|
> X</el-link> -->
|
</div>
|
</div>
|
<div v-loading="true"
|
element-loading-background="rgba(0, 0, 0, 0.0) "
|
element-loading-text="目录上传中,请等待..."
|
style="margin: 0px 20px;widht:100%;height:calc(100% - 80px); ">
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
queryDirTree,
|
queryMaxId,
|
updateDirTree,
|
updateDirTrees,
|
insertDir,
|
deleteDir,
|
getPerms,
|
} from "../../api/api";
|
import * as XSLX from "xlsx";
|
import MyBread from "../../components/MyBread.vue";
|
import clone from "@turf/clone";
|
import $ from 'jquery'
|
import { getToken } from '../../utils/auth';
|
export default {
|
name: "catalogueManage",
|
components: {
|
MyBread,
|
},
|
data () {
|
let validName=(rule,value,callback) => {
|
if(value===""||value===null||value===undefined) {
|
return callback(new Error("目录名称不能为空"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
directoryData: null,
|
directoryFlag: false,
|
menuStatus: {
|
delete: false,
|
insert: false,
|
update: false,
|
},
|
defaultProps: {
|
children: "children",
|
label: "name",
|
},
|
fullscreenLoading: false,
|
oriData: [], //原始树数据
|
dirList: [], //el树数据
|
old_dirDat: [], //el树数据(拖动前)
|
newData: [], //拖动后原始数据
|
itemdetail: {
|
checks: [],
|
},
|
itemaName: null,
|
backUpData: "",
|
formLabelWidth: "150px",
|
delChildID: "",
|
delChildIDs: [],
|
dialogFormVisible: false,
|
ruleForm: {
|
level: null,
|
orderNum: null,
|
pid: null,
|
name: "",
|
descr: "",
|
bak: "",
|
checks: []
|
},
|
rules: {
|
name: [{ required: true,validator: validName,trigger: "blur" }],
|
},
|
newNode: null,
|
expandData: [],
|
fileList: [],
|
file: null,
|
tableData: [],
|
options: [
|
{
|
value: 'checkMain',
|
label: '总质检'
|
},{
|
value: 'checkOsgb',
|
label: 'OSGB检查'
|
},{
|
value: 'checkXls',
|
label: '表格数据检查'
|
},{
|
value: 'checkLaz',
|
label: '点云检查'
|
},{
|
value: 'checkDem',
|
label: '高程检查'
|
},{
|
value: 'checkAttrs',
|
label: '属性检查'
|
},{
|
value: 'checkTopology',
|
label: '拓扑检查'
|
},{
|
value: 'checkDecorate',
|
label: '图面整饰检查'
|
},{
|
value: 'checkOrigin',
|
label: '原点检查'
|
},{
|
value: 'checkDom',
|
label: '栅格检查'
|
},{
|
value: 'checkMath',
|
label: '数学基础检查'
|
},{
|
value: 'checkMeta',
|
label: '元数据检查'
|
},{
|
value: 'checkLogical',
|
label: '逻辑一致性检查'
|
},{
|
value: 'checkSingleIntegrity',
|
label: '单项成果完整性检查'
|
}
|
|
],
|
currentData: null,
|
showRightMenu: false,
|
checksData: null,
|
checksCopyData: null,
|
loadDialogVisible: false
|
};
|
},
|
methods: {
|
// 复制
|
setMenuDataCopy () {
|
this.checksCopyData=this.checksData;
|
},
|
//粘贴
|
setMenuDataPaste () {
|
if(!this.checksCopyData) {
|
return this.$message('未选中要复制的节点');
|
}
|
var val=this.$refs.tree.getNode(this.checksCopyData).data;
|
|
var level=this.$refs.tree.getNode(this.checksData).data.level+1;
|
this.setInsertCopyData([val],this.checksData,level);
|
},
|
setInsertCopyData (val,pid,level) {
|
for(var i in val) {
|
var data=val[i];
|
var pchildNodes=[];
|
|
if(this.$refs.tree.getNode(pid)&&this.$refs.tree.getNode(pid).childNodes) {
|
pchildNodes=this.$refs.tree.getNode(pid).childNodes
|
}
|
var orderNum=this.getMaxOrderNum(pchildNodes);
|
var obj={
|
bak: data.bak,
|
level: level,
|
orderNum: orderNum+1,
|
pid: pid,
|
checks: data.checks,
|
name: data.name,
|
descr: data.descr,
|
exts: data.exts,
|
}
|
insertDir(obj).then((res) => {
|
if(res.code==200) {
|
this.getDirTree();
|
if(data.children&&data.children.length>0) {
|
|
this.setInsertCopyData(data.children,res.result,level+1)
|
}
|
}
|
})
|
}
|
},
|
|
|
|
|
|
handleNodeClick (data,node) {
|
this.showRightMenu=false;
|
document.removeEventListener('click',this.closeRightMenu)
|
this.layerFormInline(data)
|
|
},
|
//右键菜单
|
openTreeMenu (event,data,node,obj) {
|
this.showRightMenu=true;
|
let menu=document.getElementById('menu')
|
menu.style.left=event.clientX+20+'px'
|
menu.style.top=event.clientY+'px'
|
document.addEventListener('click',this.closeRightMenu)
|
this.checksData=data.id;
|
console.log(this.checksData)
|
},
|
closeRightMenu () {
|
this.showRightMenu=false;
|
document.removeEventListener('click',this.closeRightMenu)
|
|
},
|
setTemplateDownload () {
|
var url=window.location.href;
|
var testurl=window.location.origin+"/";
|
if(url.indexOf("web")!=-1) {
|
testurl=testurl+"/web/";
|
}
|
testurl+=dirTemplateFile
|
$("#Iframe1").attr("src",testurl).click()
|
},
|
handleChange (file,fileList) {
|
this.file=file;
|
if(fileList.length>0) {
|
this.fileList=[fileList[fileList.length-1]]; //这一步，是 展示最后一次选择文件;
|
this.handle();
|
}
|
},
|
async handle () {
|
let file=this.file?.raw;
|
if(!this.file) {
|
console.log("文件打开失败");
|
return;
|
} else {
|
const reader=new FileReader();
|
let that=this;
|
reader.readAsArrayBuffer(file);
|
reader.onload=function() {
|
const buffer=reader.result;
|
const bytes=new Uint8Array(buffer);
|
const length=bytes.byteLength;
|
let binary="";
|
for(let i=0;i<length;i++) {
|
binary+=String.fromCharCode(bytes[i]);
|
}
|
const XLSX=require("xlsx");
|
const wb=XLSX.read(binary,{
|
type: "binary",
|
});
|
const outdata=XLSX.utils.sheet_to_json(
|
wb.Sheets[wb.SheetNames[0]],
|
{ defval: null }
|
); // 默认第一行下为空也能解析出第一四行
|
var data=[...outdata];
|
that.setLeToFc(data);
|
};
|
}
|
},
|
|
setLeToFc (res) {
|
var arr=[];
|
for(var i in res) {
|
var value=this.getNameAndPname(res[i],res,i)
|
arr.push({
|
name: value[0],
|
pname: value[1],
|
descr: res[i].explain,
|
checks: res[i].checks,
|
bak: res[i].bak,
|
exts: res[i].exts,
|
orderNum: null,
|
pid: null,
|
tid: parseInt(value[2])+1,
|
sid: parseInt(value[3])+1
|
})
|
}
|
|
this.tableData=arr;
|
|
this.setInsertData(this.tableData);
|
},
|
getNameAndPname (res,result,flag) {
|
var chLevel=null;
|
var faLevel=null;
|
|
for(var i=1;i<8;i++) {
|
var lel='L'+i;
|
if(res[lel]!=null) {
|
chLevel=i
|
}
|
}
|
if(chLevel==1) {
|
return [res['L'+chLevel],null,flag,-1]
|
} else {
|
faLevel=chLevel-1;
|
for(var i=flag;i>=0;i--) {
|
var val=result[i]
|
if(val['L'+faLevel]) {
|
return [res['L'+chLevel],val['L'+faLevel],flag,i]
|
break;
|
}
|
}
|
}
|
},
|
setInsertData (res) {
|
var list=this.excelData(res);
|
if(list.length!=0) {
|
if(list[0].pname!=null) {
|
return this.$message.error("上传数据错误，第一条数据不为空");
|
}
|
this.getAllNodeId(res);
|
}
|
},
|
async getAllNodeId (res) {
|
this.loadDialogVisible=true;
|
for(let i=0;i<res.length;i++) {
|
var val=res[i];
|
if(val.pname==null) {
|
val.orderNum=this.dirList[this.dirList.length-1].orderNum+1;
|
val.pid=0;
|
} else {
|
this.tableData.filter((child) => {
|
if(child.tid==val.sid) {
|
val.pid=child.id;
|
val.orderNum=i+1;
|
}
|
});
|
}
|
|
const data=await insertDir(val);
|
if(data.code!=200) {
|
this.$message.error("目录上传失败"+data.msg);
|
this.loadDialogVisible=false;
|
break;
|
}
|
|
this.tableData.filter((child) => {
|
|
if(child.name==val.name&&child.tid==val.tid) {
|
child.id=data.result;
|
}
|
});
|
this.itemaName=data.result;
|
// this.getDirTree();
|
|
// if (res[i].children) {
|
// this.getAllNodeId(res[i].children);
|
// }
|
}
|
this.getDirTree();
|
this.loadDialogVisible=false;
|
|
},
|
excelData (source) {
|
let cloneData=JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr=cloneData.filter((child) => father.tid==child.sid); // 对比ID，分别上下级菜单，并返回数据
|
|
branchArr.length>0? (father.children=branchArr):""; // 给父级添加一个children属性，并赋值
|
// 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
|
// 由此循环多次后，就能形成相应的树形数据结构
|
return father.sid==0; // 返回一级菜单
|
});
|
},
|
readFile (file) {
|
//文件读取
|
return new Promise((resolve) => {
|
let reader=new FileReader();
|
reader.readAsBinaryString(file); //以二进制的方式读取
|
reader.onload=(ev) => {
|
resolve(ev.target.result);
|
};
|
});
|
},
|
|
// 请求目录树
|
async getDirTree () {
|
//获取目录树最大ID，新建节点使用
|
// queryMaxId().then((res) => {
|
// this.id = res.data;
|
// });
|
// 获取目录树数据
|
const data=await queryDirTree();
|
|
if(data.code!=200) {
|
return this.$message.error("项目列表查询失败");
|
}
|
this.oriData=data.result;
|
this.newData=data.result;
|
this.dirList=this.treeData(data.result);
|
|
|
var cdata;
|
if(this.currentData) {
|
var rs=JSON.parse(this.currentData);
|
cdata=this.$refs.tree.getNode(rs.id).data;
|
} else {
|
cdata=this.dirList[this.dirList.length-1]
|
}
|
this.$nextTick(() => {
|
this.expandData=[cdata.id];
|
this.$refs.tree.setCurrentKey(cdata.id);
|
this.layerFormInline(cdata)
|
});
|
|
|
// queryDirTree().then((res) => {
|
// // console.log(res);
|
|
|
// if (res.code == 200) {
|
|
|
// // this.$nextTick(() => {
|
|
// // this.expandData=[15]
|
// // this.$refs.tree.setCurrentKey(15);
|
|
// // });
|
|
// } else {
|
// console.log("接口报错");
|
// }
|
// });
|
},
|
handleClose () {
|
this.$confirm("关闭后无法保存，是否关闭?")
|
.then((_) => {
|
this.resetForm();
|
})
|
.catch((_) => { });
|
},
|
treeData (source) {
|
let cloneData=JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr=cloneData.filter((child) => father.id==child.pid); // 对比ID，分别上下级菜单，并返回数据
|
if(branchArr.length>0) {
|
branchArr.sort(function(a,b) {
|
return a.orderNum-b.orderNum
|
})
|
}
|
|
branchArr.length>0? (father.children=branchArr):""; // 给父级添加一个children属性，并赋值
|
// 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
|
// 由此循环多次后，就能形成相应的树形数据结构
|
return father.pid==0; // 返回一级菜单
|
});
|
},
|
//向上向下移动
|
setEditNode (res) {
|
let node=this.$refs.tree.getCurrentNode();
|
let pchildNodes=this.$refs.tree.getNode(node.id).parent.childNodes;
|
let currentId={};
|
for(let i=0;i<pchildNodes.length;i++) {
|
if(pchildNodes[i].data.id==node.id) {
|
currentId=i;
|
}
|
}
|
switch(res) {
|
case 1: //向上移动
|
if(currentId!=0) {
|
const tempChildrenNodex1=pchildNodes[currentId-1];
|
const tempChildrenNodex2=pchildNodes[currentId];
|
// tempChildrenNodex2.orderNum =
|
// pchildNodes[currentId - 1].data.orderNum;
|
// tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum;
|
|
const arr=[];
|
this.oriData.filter((res) => {
|
if(res.id==tempChildrenNodex2.data.id) {
|
// res.orderNum = tempChildrenNodex2.orderNum;
|
arr.push(res);
|
} else if(res.id==tempChildrenNodex1.data.id) {
|
// res.orderNum = tempChildrenNodex1.orderNum;
|
arr.push(res);
|
}
|
});
|
|
const orderNum=arr[1].orderNum
|
arr[1].orderNum=arr[0].orderNum
|
arr[0].orderNum=orderNum
|
|
this.newData=arr;
|
this.sendChange();
|
} else {
|
this.$message({
|
message: "处于顶端，不能继续上移",
|
type: "warning",
|
});
|
}
|
break;
|
case 2: //向下移动
|
if(currentId<pchildNodes.length-1) {
|
const tempChildrenNodex1=pchildNodes[currentId+1];
|
const tempChildrenNodex2=pchildNodes[currentId];
|
// tempChildrenNodex2.orderNum =
|
// pchildNodes[currentId + 1].data.orderNum;
|
// tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum;
|
|
const arr=[];
|
this.oriData.filter((res) => {
|
if(res.id==tempChildrenNodex2.data.id) {
|
// res.orderNum = tempChildrenNodex2.orderNum;
|
arr.push(res);
|
} else if(res.id==tempChildrenNodex1.data.id) {
|
// res.orderNum = tempChildrenNodex1.orderNum;
|
arr.push(res);
|
}
|
});
|
const orderNum=arr[1].orderNum
|
arr[1].orderNum=arr[0].orderNum
|
arr[0].orderNum=orderNum
|
this.newData=arr;
|
this.sendChange();
|
} else {
|
this.$message({
|
message: "处于底端，不能继续下移",
|
type: "warning",
|
});
|
}
|
break;
|
}
|
},
|
setDelNode () {
|
this.$confirm("此操作将永久删除该目录, 是否继续?","提示",{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.remove(this.newNode,this.itemdetail);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
},
|
insertStart () {
|
this.ruleForm={
|
level: null,
|
orderNum: null,
|
pid: null,
|
name: "",
|
descr: "",
|
bak: "",
|
checks: []
|
}
|
},
|
setNewNode (res) {
|
this.insertStart();
|
var node=this.$refs.tree.getCurrentNode();
|
this.newNode=node;
|
var id,lever,orderNum;
|
if(res==1) {
|
//新增同级
|
id=this.itemdetail.pid;
|
let pchildNodes=this.$refs.tree.getNode(this.newNode.id).parent.childNodes
|
orderNum=this.getMaxOrderNum(pchildNodes);
|
lever=this.itemdetail.level;
|
} else if(res==2) {
|
//新增子级
|
id=this.itemdetail.id;
|
let pchildNodes=this.$refs.tree.getNode(this.newNode.id).childNodes
|
orderNum=this.getMaxOrderNum(pchildNodes);
|
lever=this.itemdetail.level+1;
|
}
|
|
this.ruleForm.pid=id;
|
this.ruleForm.level=lever;
|
this.ruleForm.orderNum=orderNum;
|
this.dialogFormVisible=true;
|
},
|
getMaxOrderNum (res) {
|
var val=-100;
|
for(var i in res) {
|
if(res[i].data.orderNum>val) {
|
val=res[i].data.orderNum;
|
}
|
}
|
val=val+1;
|
return val;
|
},
|
append (node,data) {
|
this.dialogFormVisible=true;
|
this.ruleForm.pid=data.id;
|
this.ruleForm.orderNum=node.childNodes.length+1;
|
this.ruleForm.level=data.level+1;
|
},
|
resetForm (formName) {
|
this.dialogFormVisible=false;
|
this.ruleForm={};
|
this.$nextTick(() => {
|
this.ruleForm={};
|
// this.$refs[formName].resetFields();
|
});
|
},
|
submitForm (formName) {
|
this.$nextTick(() => {
|
this.$refs[formName].validate((valid) => {
|
if(valid) {
|
this.fullscreenLoading=true;
|
var val=this.ruleForm;
|
if(this.ruleForm.checks) {
|
val.checks=this.ruleForm.checks.toString()
|
} else {
|
val.checks=''
|
}
|
// var val = JSON.parse(JSON.stringify(this.ruleForm))
|
// this.itemdetail = val
|
insertDir(val)
|
.then((res) => {
|
setTimeout(() => {
|
this.fullscreenLoading=false;
|
|
if(res.code==200) {
|
this.$message({
|
message: "添加成功",
|
type: "success",
|
});
|
|
// this.itemdetail = {};
|
// this.ruleForm = {};
|
this.dialogFormVisible=false;
|
this.$refs[formName].resetFields();
|
this.getDirTree();
|
}
|
},500);
|
})
|
.catch((res) => {
|
this.itemdetail={};
|
this.$message.error("添加失败");
|
this.fullscreenLoading=false;
|
console.log(res);
|
});
|
} else {
|
// alert("目录名称不能为空");
|
return false;
|
}
|
});
|
});
|
},
|
remove (node,data) {
|
this.itemaName=node.parent.data.id;
|
|
this.$confirm("此操作将删除该节点, 是否继续?","提示",{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
//兄弟重新排序
|
const parent=node.parent;
|
const children=parent.data.children||parent.data;
|
children.splice(data.orderNum-1,1);
|
children.forEach((item,index) => {
|
item.orderNum=index+1;
|
});
|
|
this.traverseArr(data); //获取删除的子ID
|
this.delChildIDs.push(data.id); //要删除的全部ID
|
let delIDs=this.delChildIDs;
|
Promise.all([
|
deleteDir({ ids: delIDs.toString() }),
|
updateDirTrees(children),
|
])
|
.then((res) => {
|
if(res[0].code==200&&res[1].code==200) {
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
let pchildNodes=this.$refs.tree.getNode(this.itemdetail.id).parent;
|
if(pchildNodes.data.id) {
|
this.currentData=JSON.stringify(pchildNodes.data)
|
} else {
|
this.currentData=null
|
}
|
this.itemdetail={};
|
|
this.getDirTree();
|
} else if(res[0].code==200) {
|
this.$message.error("删除成功，位置调整失败");
|
} else if(res[1].code==200) {
|
this.$message.error("删除失败,位置调整成功");
|
} else {
|
this.$message.error("删除失败");
|
}
|
})
|
.catch(() => {
|
// this.$message.error("删除失败");
|
// this.itemdetail = {};
|
});
|
//重置要删除的子ID
|
this.delChildIDs=[];
|
})
|
.catch(() => {
|
this.$message("已取消删除");
|
});
|
// this.dialogMessage="是否删除"
|
// this.dialogFlag = 1;
|
// this.dialogFrom ={
|
// node:node,
|
// val:data
|
// }
|
// this.dialogVisible=true;//目录树更改弹窗
|
// const parent = node.parent;
|
// const children = parent.data.children || parent.data;
|
// const index = children.findIndex((d) => d.id === data.id);
|
// let res = children.splice(index, 1);
|
// // console.log(res);
|
// // console.log(data);
|
// console.log(this.flaten(res));
|
},
|
traverseArr (obj) {
|
if(obj.children) {
|
return obj.children.forEach((item) => {
|
// console.log(item.id + "---" + item.name);
|
// this.delChildID += "id=" + item.id + "&";
|
this.delChildIDs.push(item.id);
|
this.traverseArr(item);
|
});
|
}
|
return;
|
},
|
flaten (arr) {
|
return arr.reduce((p,v,i) => {
|
for(let i=0;i<p.length;i++) {
|
if(p[i].children) {
|
delete p[i].children;
|
}
|
}
|
return p.concat(v.children? this.flaten(v.children).concat(v):v);
|
},[]);
|
},
|
handleDragStart (node,ev) {
|
this.old_dirDat=JSON.parse(JSON.stringify(this.dirList)); //将备份的dir重新赋值
|
},
|
handleDrop (draggingNode,dropNode,dropType,ev) {
|
this.$confirm("此操作将保存目录更改, 是否继续?","提示",{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
//父节点
|
let data=dropType!="inner"? dropNode.parent.data:dropNode.data;
|
// 父节点中全部子节点
|
let nodeData=
|
dropNode.level==1&&dropType!="inner"? data:data.children;
|
//变更节点
|
nodeData.forEach((item,i) => {
|
if(dropType!="inner") {
|
if(draggingNode.data.pid===dropNode.data.pid) {
|
item.pid=item.pid;
|
} else {
|
item.pid=dropNode.data.pid;
|
}
|
} else {
|
item.pid=data.id;
|
}
|
item.orderNum=i+1;
|
});
|
|
let arr=[];
|
this.oriData.forEach((e) => {
|
nodeData.forEach((item) => {
|
if(item.id===e.id) e=item;
|
});
|
arr.push(e);
|
});
|
this.newData=arr;
|
this.sendChange();
|
})
|
.catch(() => {
|
this.$message("已取消更改");
|
this.dirList=this.old_dirDat; //将备份的dir重新赋值
|
});
|
},
|
async sendChange () {
|
const data=await updateDirTrees(this.newData)
|
|
if(data.code!=200) {
|
return this.$message.error("移动失败");
|
}
|
this.getDirTree();
|
// this.getLayerTree()
|
// .then((res) => {
|
// if (res.code == 200) {
|
//
|
// return;
|
// } else {
|
// this.$message.error("移动失败，请重试！");
|
// }
|
// })
|
// .catch(() => {
|
// this.$message.error("移动失败，请重试！");
|
// });
|
},
|
|
setDirectoryDownload () {
|
var url=BASE_URL+'/dir/downloadDir?token='+getToken()+'&id='+this.directoryData.id
|
console.log(url)
|
$("#Iframe1").attr("src",url).click()
|
},
|
|
layerFormInline (data) {
|
if(data.pid==0) {
|
this.directoryData=data;
|
this.directoryFlag=true;
|
} else {
|
this.directoryFlag=false;
|
}
|
|
this.newNode=this.$refs.tree.getNode(data.id);
|
this.backUpData=JSON.stringify(data);
|
var val=this.$refs.tree.getNode(data.id).data;
|
this.itemdetail=val;
|
this.currentData=JSON.stringify(data)
|
|
var checks=[];
|
if(val.checks) {
|
if(val.checks.indexOf(',')>-1) {
|
var value=val.checks.split(',');
|
for(var i in value) {
|
checks.push(value[i])
|
}
|
} else if(val.checks.indexOf('[]')>-1) {
|
|
} else {
|
checks.push(val.checks)
|
}
|
this.itemdetail.checks=checks;
|
} else {
|
this.itemdetail.checks=[]
|
}
|
},
|
|
|
async updCata (formName) {
|
this.fullscreenLoading=true;
|
var val=JSON.parse(JSON.stringify(this.itemdetail));
|
val.orderNum=this.newNode.data.orderNum;
|
|
var value=this.itemdetail.checks.toString()
|
val.checks=value;
|
const data=await updateDirTree(val);
|
this.currentData=JSON.stringify(this.itemdetail)
|
|
if(data.code!=200) {
|
this.fullscreenLoading=false;
|
return this.$message.error("修改失败");
|
}
|
this.$message({
|
message: '修改成功',
|
type: 'success'
|
});
|
this.fullscreenLoading=false;
|
this.getDirTree();
|
|
// this.$nextTick(() => {
|
// this.$refs[formName].validate((valid) => {
|
// if (valid) {
|
//
|
|
// var val = this.itemdetail
|
// var value = this.itemdetail.checks.toString()
|
// val.checks = value;
|
//
|
// let res = JSON.parse(JSON.stringify(this.itemdetail));
|
// this.itemdetail = res;
|
//
|
// updateDirTree(val)
|
// .then((res) => {
|
// setTimeout(() => {
|
// this.fullscreenLoading = false;
|
// if (res.code == 200) {
|
// this.getDirTree();
|
// // this.itemdetail = {};
|
// this.dialogFormVisible = false;
|
// }
|
// }, 500);
|
// })
|
// .catch((res) => {
|
// this.$message.error("修改失败，请重试！");
|
// this.fullscreenLoading = false;
|
// });
|
// } else {
|
// return false;
|
// }
|
// });
|
// });
|
},
|
reset (formName) {
|
this.itemdetail={};
|
// this.$refs[formName].resetFields();
|
if(this.backUpData!="") {
|
this.itemdetail=JSON.parse(this.backUpData);
|
var val=JSON.parse(this.backUpData);
|
var checks=[];
|
if(val.checks) {
|
if(val.checks.indexOf(',')>-1) {
|
var value=val.checks.split(',');
|
for(var i in value) {
|
checks.push(value[i])
|
}
|
} else {
|
checks.push(val.checks)
|
}
|
this.itemdetail.checks=checks;
|
} else {
|
this.itemdetail.checks=[]
|
}
|
}
|
},
|
showPermsMenu (res) {
|
switch(res.tag) {
|
case "/delete":
|
this.menuStatus.delete=true;
|
break;
|
case "/insert":
|
this.menuStatus.insert=true;
|
break;
|
case "/update":
|
this.menuStatus.update=true;
|
break;
|
}
|
},
|
getPerms () {
|
var val=this.$store.state.currentPerms;
|
var permsEntity=this.$store.state.permsEntity;
|
if(!permsEntity||!permsEntity.length) {
|
getPerms().then((res) => {
|
if(res.code==200) {
|
permsEntity=res.result;
|
}
|
});
|
}
|
for(var i=0;i<permsEntity.length;i++) {
|
if(val===permsEntity[i].perms) {
|
this.showPermsMenu(permsEntity[i]);
|
}
|
}
|
},
|
},
|
mounted () {
|
this.getDirTree();
|
this.getPerms();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.subpage_Box {
|
//height: 96%;
|
width: calc(98% - 20px);
|
height: calc(95% - 20px);
|
padding: 1%;
|
border-radius: 10px;
|
background: #f4f8ff;
|
margin: 10px;
|
// .cataLogContent {
|
// width: 100%;
|
// height: 100%;
|
// display: flex;
|
// // align-items: center;
|
// justify-content: space-between;
|
// .cataLog_leftTree {
|
// width: 30%;
|
// height: 98%;
|
// border-radius: 5px;
|
// padding: 10px;
|
// overflow-y: auto;
|
// }
|
// .cataLog_rightContent {
|
// width: 66%;
|
// height: 98%;
|
// border-radius: 5px;
|
// padding: 10px;
|
// .menuTop {
|
// /deep/ .el-form-item {
|
// margin-bottom: 0px;
|
// }
|
// }
|
// }
|
// }
|
}
|
|
.mainBox {
|
padding-top: 10px;
|
width: 100%;
|
height: calc(100% - 75px);
|
display: flex;
|
justify-content: space-around;
|
.leftTree {
|
width: calc(32% - 0px);
|
height: 100%;
|
padding: 10px;
|
border-radius: 5px;
|
box-sizing: border-box;
|
overflow-y: auto;
|
}
|
.right {
|
width: 65%;
|
height: 100%;
|
border-radius: 5px;
|
padding: 10px;
|
box-sizing: border-box;
|
border: 1px solid #dcdfe6;
|
.inquire {
|
// margin-bottom: 10px;
|
padding: 8px;
|
// margin-top: 10px;
|
border-radius: 5px;
|
//border: 1px solid #dcdfe6;
|
//margin-bottom: 20px;
|
.el-form-item {
|
margin: 5px;
|
}
|
}
|
}
|
.right_menu {
|
position: fixed;
|
display: block;
|
z-index: 10000;
|
padding: 10px;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
ul {
|
width: 100%;
|
height: 100%;
|
list-style: none;
|
margin: 0;
|
padding: 0;
|
border-radius: 2%;
|
li {
|
margin: 0 0 1px 0;
|
color: rgb(77, 77, 73);
|
text-align: center;
|
font-size: 14px;
|
padding: 4%;
|
width: 100%;
|
height: 9.7%;
|
float: left;
|
}
|
li:hover {
|
color: #409eff !important;
|
}
|
}
|
}
|
}
|
.loadBox {
|
z-index: 2002;
|
background: rgba(0, 0, 0, 0.2);
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
position: absolute;
|
.el-loading-mask {
|
background: transparent !important;
|
}
|
}
|
.btnBox {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
}
|
</style>
|
