| | |
| | | <el-container> |
| | | <el-aside> |
| | | <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;"> |
| | | <avue-tree :option="option" :data="data" v-model="form" style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px"></avue-tree> |
| | | <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata" :defaultExpandAll="false" |
| | | :option="Treeoption" |
| | | style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px" |
| | | @node-click=" nodeClick" |
| | | @check-change="checkChange" |
| | | ></avue-tree> |
| | | </basic-container> |
| | | </el-aside> |
| | | <el-main> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {getAtrrList, TreeCheckDel, TreeDel, TreeSave} from "@/api/template/templateAttr"; |
| | | |
| | | export default { |
| | | name: "items.vue", |
| | | data(){ |
| | | return{ |
| | | form:{}, |
| | | data:[ |
| | | { |
| | | value:0, |
| | | label:'一级部门', |
| | | children:[ |
| | | { |
| | | value:1, |
| | | label:'一级部门1', |
| | | },{ |
| | | value:2, |
| | | label:'一级部门2', |
| | | } |
| | | ] |
| | | },{ |
| | | value:3, |
| | | label:'二级部门', |
| | | children:[ |
| | | { |
| | | value:4, |
| | | label:'二级部门1', |
| | | },{ |
| | | value:5, |
| | | label:'二级部门2', |
| | | } |
| | | ] |
| | | CloneTreeAvueform:{}, |
| | | loading:false, |
| | | CloneTreedata:[], |
| | | Treeoption: { |
| | | addBtn: false, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | defaultExpandAll: false, |
| | | menu: false, |
| | | // //这个是多选 |
| | | // multiple: true, |
| | | }, |
| | | nodeClickList: "", |
| | | } |
| | | }, |
| | | created() { |
| | | this.getAttr() |
| | | }, |
| | | methods:{ |
| | | getAttr() { |
| | | getAtrrList().then(res => { |
| | | this.Treedata = res.data; |
| | | this.CloneTreedata = res.data; |
| | | this.Treedata.forEach((item) => { |
| | | for (let i = 0; i < this.Treedata.length; i++) { |
| | | this.Treedata[i].value = i; |
| | | } |
| | | }) |
| | | //调用修改属性名方法 |
| | | this.ModifyProperties(this.CloneTreedata, 'name', 'label'); |
| | | }).catch(res => { |
| | | this.$message.error(res) |
| | | }) |
| | | }, |
| | | //定义一个修改数据属性名的方法 |
| | | ModifyProperties(obj, oldName, newName) { |
| | | for (let key in obj) { |
| | | if (key === oldName) { |
| | | obj[newName] = obj[key]; |
| | | delete obj[key]; |
| | | } |
| | | ], |
| | | option:{ |
| | | title:'我是标题', |
| | | filterText:"搜索关键字自定义", |
| | | defaultExpandAll:true, |
| | | addBtnText:'新增自定义文案', |
| | | editBtnText:'修改自定义文案', |
| | | delBtnText:'删除自定义文案', |
| | | defaultExpandedKeys:[1], |
| | | height:900, |
| | | formOption:{ |
| | | labelWidth:100, |
| | | column:[{ |
| | | label:'自定义项', |
| | | prop:'label' |
| | | }], |
| | | }, |
| | | props:{ |
| | | labelText:'标题', |
| | | label:'label', |
| | | value:'value', |
| | | children:'children' |
| | | if (typeof obj[key] === 'object') { |
| | | this.ModifyProperties(obj[key], oldName, newName); |
| | | } |
| | | } |
| | | }, |
| | | //树节点添加按钮 |
| | | TreeAdd() { |
| | | this.TreeAddFormVisible = true; |
| | | // 判断当前是否有点击子项 |
| | | if (this.nodeClickList !== "") { |
| | | this.TreeFlag = true |
| | | } |
| | | }, |
| | | //树节点添加事件 |
| | | TreeAddHandler() { |
| | | const data = this.TreeAddform |
| | | this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid) |
| | | TreeSave(data).then(() => { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '添加成功!' |
| | | }); |
| | | this.getAttr(); |
| | | this.TreeAddFormVisible = false |
| | | this.TreeAddform = "" |
| | | }).catch(res => { |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: res |
| | | }); |
| | | }) |
| | | }, |
| | | //树节点删除按钮 |
| | | TreeDel() { |
| | | this.$confirm('是否删除当前选择的分类,将会把子分类一并删除,如果存在编码数据将不能被删除,是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | customClass: 'my-messagebox', |
| | | }).then(() => { |
| | | TreeCheckDel(this.nodeClickList).then(res => { |
| | | if (res.data.data) { |
| | | TreeDel(this.nodeClickList).then(() => { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | }); |
| | | this.getAttr(); |
| | | }).catch(res => { |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: res |
| | | }); |
| | | }) |
| | | } else { |
| | | this.$confirm('当前数据包含有下级数据,要删除的话会和下级数据一起删除,你确认继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | customClass: 'my-messageboxs', |
| | | }).then(() => { |
| | | TreeDel(this.nodeClickList).then(() => { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | }); |
| | | this.getAttr(); |
| | | }).catch(res => { |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: res |
| | | }); |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }); |
| | | }); |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }); |
| | | }); |
| | | }, |
| | | nodeClick(data){ |
| | | this.nodeClickList = data |
| | | console.log(data) |
| | | } |
| | | } |
| | | } |