| | |
| | | <template> |
| | | <div class="cataLogBox"> |
| | | <My-bread |
| | | :list="[ |
| | | <My-bread :list="[ |
| | | `${$t('dataManage.dataManage')}`, |
| | | `${$t('dataManage.catalogueManage')}`, |
| | | ]" |
| | | ></My-bread> |
| | | ]"></My-bread> |
| | | <el-divider /> |
| | | <div class="cataLogContent"> |
| | | <div class="cataLog_leftTree"> |
| | | <el-tree |
| | | ref="tree" |
| | | :props="defaultProps" |
| | | node-key="id" |
| | | :data="dirList" |
| | | :expand-on-click-node="false" |
| | | :default-expand-all="true" |
| | | draggable |
| | | @node-click="handleNodeClick" |
| | | @node-drag-start="handleDragStart" |
| | | @node-drag-end="handleDrop" |
| | | > |
| | | <span class="custom-tree-node" slot-scope="{ node, data }"> |
| | | <span>{{ node.label }}</span> |
| | | <span class="btnBox"> |
| | | <el-button |
| | | type="text" |
| | | size="mini" |
| | | @click="() => append(node, data)" |
| | | > |
| | | <i class="el-icon-circle-plus"></i> |
| | | </el-button> |
| | | <el-button |
| | | type="text" |
| | | size="mini" |
| | | @click="() => remove(node, data)" |
| | | > |
| | | <i class="el-icon-delete-solid"></i> |
| | | </el-button> |
| | | </span> |
| | | </span> |
| | | </el-tree> |
| | | <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-expand-all="true" |
| | | @node-click="handleNodeClick" |
| | | > |
| | | |
| | | </el-tree> |
| | | </div> |
| | | </div> |
| | | <div class="cataLog_rightContent"> |
| | | <el-breadcrumb separator="/"> |
| | | <el-breadcrumb-item :to="{ path: '/' }">{{ |
| | | <div style="display:flex;justify-content:space-between"> |
| | | <el-breadcrumb separator="/"> |
| | | <el-breadcrumb-item :to="{ path: '/' }">{{ |
| | | $t('dataManage.dictionaryManageObj.particulars') |
| | | }}</el-breadcrumb-item> |
| | | </el-breadcrumb> |
| | | </el-breadcrumb> |
| | | <div> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setEditNode(1)" |
| | | type="info" |
| | | icon="el-icon-top" |
| | | size="mini" |
| | | >向上移动</el-button> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setEditNode(2)" |
| | | type="info" |
| | | icon="el-icon-bottom" |
| | | size="mini" |
| | | >向下移动</el-button> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setNewNode(1)" |
| | | type="success" |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | >新增同级</el-button> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setNewNode(2)" |
| | | type="success" |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | >新增子级</el-button> |
| | | <el-button |
| | | @click="setDelNode()" |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | type="danger" |
| | | icon="el-icon-delete" |
| | | size="mini" |
| | | >删除</el-button> |
| | | </div> |
| | | </div> |
| | | <el-divider /> |
| | | <el-form :model="itemdetail" ref="itemdetail" :rules="rules"> |
| | | <el-form |
| | | :model="itemdetail" |
| | | ref="itemdetail" |
| | | :rules="rules" |
| | | > |
| | | <el-form-item |
| | | prop="name" |
| | | :label="$t('dataManage.dataUpObj.directoryName')" |
| | |
| | | :label="$t('dataManage.dataUpObj.catalogRemarks')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.bak" type="textarea" resize="none" /> |
| | | <el-input |
| | | v-model="itemdetail.bak" |
| | | type="textarea" |
| | | resize="none" |
| | | /> |
| | | </el-form-item> |
| | | <div class="btnBox"> |
| | | <el-button class="primary" @click="updCata('itemdetail')">{{ |
| | | <el-button |
| | | class="primary" |
| | | @click="updCata('itemdetail')" |
| | | >{{ |
| | | $t('common.preservation') |
| | | }}</el-button> |
| | | <el-button type="info" @click="reset">{{ |
| | | <el-button |
| | | type="info" |
| | | @click="reset" |
| | | >{{ |
| | | $t('common.cancel') |
| | | }}</el-button> |
| | | </div> |
| | |
| | | :visible.sync="dialogFormVisible" |
| | | :before-close="handleClose" |
| | | > |
| | | <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> |
| | | <el-form |
| | | :model="ruleForm" |
| | | ref="ruleForm" |
| | | :rules="rules" |
| | | > |
| | | <el-form-item |
| | | :label="$t('dataManage.dataUpObj.directoryName')" |
| | | prop="name" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.name" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.name" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('dataManage.dataUpObj.catalogDescription')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.descr" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.descr" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('dataManage.dataUpObj.catalogRemarks')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.bak" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <div |
| | | slot="footer" |
| | | class="dialog-footer" |
| | | > |
| | | <el-button @click="resetForm('ruleForm')">{{ |
| | | $t('common.cancel') |
| | | }}</el-button> |
| | |
| | | class="primary" |
| | | @click="submitForm('ruleForm')" |
| | | v-loading.fullscreen.lock="fullscreenLoading" |
| | | >{{ $t('common.preservation') }}</el-button |
| | | > |
| | | >{{ $t('common.preservation') }}</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | rules: { |
| | | name: [{ required: true, validator: validName, trigger: 'blur' }], |
| | | }, |
| | | newNode: null, |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | this.oriData = res.result; |
| | | this.newData = res.result; |
| | | this.dirList = this.treeData(res.result); |
| | | |
| | | if (this.itemdetail.id != null) { |
| | | this.$nextTick(() => { |
| | | this.$refs.tree.setCurrentKey(this.itemdetail.id); |
| | | }); |
| | | } |
| | | |
| | | |
| | | } else { |
| | | console.log('接口报错'); |
| | | } |
| | |
| | | .then((_) => { |
| | | this.resetForm(); |
| | | }) |
| | | .catch((_) => {}); |
| | | .catch((_) => { }); |
| | | }, |
| | | treeData(source) { |
| | | let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆 |
| | |
| | | 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 |
| | | var 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) |
| | | } |
| | | |
| | | }) |
| | | 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; |
| | | var 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) |
| | | } |
| | | }) |
| | | this.newData = arr; |
| | | this.sendChange(); |
| | | } else { |
| | | this.$message({ |
| | | message: '处于底端,不能继续下移', |
| | | type: 'warning' |
| | | }); |
| | | |
| | | } |
| | | break; |
| | | |
| | | } |
| | | }, |
| | | setDelNode() { |
| | | this.remove(this.newNode, this.itemdetail) |
| | | }, |
| | | setNewNode(res) { |
| | | var id, lever, orderNum; |
| | | if (res == 1) {//新增同级 |
| | | id = this.itemdetail.pid; |
| | | orderNum = this.getMaxOrderNum(this.newNode.parent.childNodes) |
| | | |
| | | lever = this.itemdetail.level; |
| | | } else if (res == 2) {//新增子级 |
| | | id = this.itemdetail.id; |
| | | orderNum = this.getMaxOrderNum(this.newNode.childNodes) |
| | | |
| | | 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; |
| | |
| | | updateDirTrees(children), |
| | | ]) |
| | | .then((res) => { |
| | | console.log(res); |
| | | if (res[0].code == 200 && res[1].code == 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功!', |
| | | }); |
| | | this.itemdetail = {}; |
| | | this.getDirTree(); |
| | | } else if (res[0].code == 200) { |
| | | this.$message.error('删除成功,位置调整失败'); |
| | | } else if (res[1].code == 200) { |
| | |
| | | alert('修改失败,请重试!'); |
| | | }); |
| | | }, |
| | | handleNodeClick(data) { |
| | | handleNodeClick(data, node) { |
| | | // console.log(data); |
| | | this.newNode = node; |
| | | this.backUpData = JSON.stringify(data); |
| | | this.itemdetail = JSON.parse(JSON.stringify(data)); |
| | | }, |
| | |
| | | }, |
| | | reset(formName) { |
| | | this.itemdetail = {}; |
| | | this.$refs[formName].resetFields(); |
| | | // this.$refs[formName].resetFields(); |
| | | if (this.backUpData != '') { |
| | | this.itemdetail = JSON.parse(this.backUpData); |
| | | } |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | .cataLogBox { |
| | | height: 80%; |
| | | width: 97%; |
| | | |
| | | position: absolute; |
| | | height: 98%; |
| | | width: 98%; |
| | | padding: 1%; |
| | | .cataLogContent { |
| | | width: 100%; |
| | | height: 92%; |
| | |
| | | justify-content: space-between; |
| | | .cataLog_leftTree { |
| | | width: 15%; |
| | | height: 96%; |
| | | height: 91%; |
| | | border: 1px solid white; |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | max-height: 670px; |
| | | overflow-y: auto; |
| | | } |
| | | .cataLog_rightContent { |
| | | width: 80%; |
| | | height: 96%; |
| | | height: 91%; |
| | | border: 1px solid white; |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | max-height: 670px; |
| | | overflow-y: auto; |
| | | } |
| | | } |
| | | // .cataSettings_tree { |