<template> <div class="eibs-tab" > <div style="width: 100%;height: 80vh;display: flex;"> <!-- 机构管理卡片 --> <div style="width: 360px;margin-right: 20px;"> <el-card shadow="always"> <div slot="header"> <i class="el-icon-menu front-title"></i> {{ $t('statics.机构管理') }} </div> <div class="tree-wrap"> <el-tree :data="orgTree" :empty-text="$t('statics.机构无数据')" :props="defaultProps" @node-click="clickNodes" :expand-on-click-node="false" :default-expanded-keys="expandedKeys" highlight-current ref="treeRef" node-key="branch" v-loading="queryLoading" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span class="top"> <el-tooltip effect="light" :content="node.label" placement="left"> <span class="el-tree-node__label"> {{ nameTrim(node, 10) }} </span> </el-tooltip> <span> <el-button type="text" size="medium" icon="el-icon-plus" @click.stop="() => addOrg(node, data)"></el-button> <el-button type="text" size="medium" icon="el-icon-edit" @click.stop="() => editOrg(node, data)"></el-button> <el-button type="text" size="medium" icon="el-icon-delete" @click.stop="() => deleteOrg(node, data)"></el-button> </span> </span> </span> </el-tree> </div> </el-card> </div> <!-- 机构信息详情 --> <div style="width: calc(100% - 380px);height: 80vh;"> <el-tabs type="border-card"> <el-tab-pane :label="$t('statics.机构信息')"> <div> <el-form :rules="rules" :model="bchInfo" ref="bchInfoForm" label-width="120px" :disabled="bchInfoFormDisable"> <c-col :span="24"> <c-col :span="12" style="padding-right: 20px;"> <c-col :span="20"> <el-form-item :label="$t('statics.核心机构编码')" prop="accbch"> <c-input v-model="bchInfo.accbch" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.机构类型')" prop="bchtyp"> <c-select v-model="bchInfo.bchtyp" autocomplete="off" dbCode="BCHTXT" :isCache="false"></c-select> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.机构中文名称')" prop="bchname"> <c-input v-model="bchInfo.bchname" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.业务编号标识')" prop="bchflg"> <c-input v-model="bchInfo.bchflg" autocomplete="off" maxlength='2' clearable > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.电话')" prop="tel"> <c-input v-model="bchInfo.tel" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.中文地址')" prop="adr"> <c-input v-model="bchInfo.adr" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.英文地址')" prop="adren"> <c-input v-model="bchInfo.adren" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.联行行号')" prop="lhanum"> <c-input v-model="bchInfo.lhanum" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.电证联行行号')" prop="dzlhhh"> <c-input v-model="bchInfo.dzlhhh" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.核心记账柜员')" prop="bchusr"> <c-input v-model="bchInfo.bchusr" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.自贸区标志')" prop="zmqflg"> <c-radio-group v-model="bchInfo.zmqflg"> <el-radio label="X">{{$t('statics.是')}}</el-radio> <el-radio label="">{{$t('statics.否')}}</el-radio> </c-radio-group> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.机构负责人')" prop="bchfzr"> <c-input v-model="bchInfo.bchfzr" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.业务编号机构编码')" prop="bchref"> <c-input v-model="bchInfo.bchref" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.备注')"> <c-input :value="$t('statics.已启用此行')"> </c-input> </el-form-item> </c-col> </c-col> <c-col :span="12" style="padding-right: 20px;"> <c-col :span="20"> <el-form-item :label="$t('statics.国结机构编码')" prop="branch"> <c-input v-model="bchInfo.branch" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.机构级别')" prop="lev"> <c-select v-model="bchInfo.lev" autocomplete="off" dbCode="bchlev" :isCache="false"></c-select> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.机构英文名称')" prop="namen"> <c-input v-model="bchInfo.namen" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.金融机构编码')" prop="decnum"> <c-input v-model="bchInfo.decnum" autocomplete="off" clearable > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.传真')" prop="fax"> <c-input v-model="bchInfo.fax" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.中文地址2')" prop="adr2"> <c-input v-model="bchInfo.adr2" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.英文地址2')" prop="adren2"> <c-input v-model="bchInfo.adren2" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.联行名称')" prop="lhanam"> <c-input v-model="bchInfo.lhanam" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.电证联行名称')" prop="dzlhmc"> <c-input v-model="bchInfo.dzlhmc" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.核心记账柜员2')" prop="bchusr2"> <c-input v-model="bchInfo.bchusr2" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.所属全辖机构')" prop="qxbranch" :rules="[{required: bchInfo.branch != bchInfo.upbranch, message: this.$t('components.必输项') }]"> <c-input v-model="bchInfo.qxbranch" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.外汇局印单代码')" prop="ydjcod"> <c-input v-model="bchInfo.ydjcod" autocomplete="off" > </c-input> </el-form-item> </c-col> <c-col :span="20"> <el-form-item :label="$t('statics.BIC编码')" prop="swfcod"> <c-input v-model="bchInfo.swfcod" autocomplete="off" > </c-input> </el-form-item> </c-col> </c-col> </c-col> <div style="width: 100%;display: flex;justify-content: center;"> <c-button type="primary" style="margin-right: 10px" @click="handleSub()" v-if="this.subBtnVifFlg" >{{ $t('statics.提 交') }}</c-button > <c-button type="primary" @click="handleCancel()" v-if="this.subBtnVifFlg" >{{ $t('statics.返 回') }}</c-button > </div> </el-form> </div> </el-tab-pane> <el-tab-pane :label="$t('statics.扩展信息')"> </el-tab-pane> </el-tabs> </div> </div> </div> </template> <script> import event from "../event"; import Jgdetails from "./Jgdetails"; import BchModel,{Pattern} from "../model"; import CodeTable from "~/config/CodeTable"; import Api from "~/service/Api" export default { inject: ["root"], components: { 'm-jgdetails': Jgdetails }, provide() { return { root: this, }; }, data() { return { rules: Pattern, codes: { ...CodeTable }, orgTree: [], defaultProps: { children: 'children', label: this.$i18n.locale === 'zh' ? 'bchname':'namen', }, bchInfo: new BchModel().data.bchInfo, subBtnVifFlg: false, bchInfoFormDisable: true, nodeData:null, nodeP:null, expandedKeys:[], queryLoading:true, } }, created() { this.getOrgTree() }, methods: { ...event, clickNodes(data,node) { this.nodeData = data; this.nodeP = node; this.getJgDetails(data); (this.subBtnVifFlg = false), (this.bchInfoFormDisable = true); }, nameTrim(name, len) { if (name.level <= 2) { return name.label } let nam = name.label + ""; if (nam.length > len) { return nam.substring(0, len) + "···"; } return nam }, handleSub(){ this.$refs['bchInfoForm'].validate((valid) => { if (valid) { let uri="" let $this = this if (this.bchInfo.id ==null ||this.bchInfo.id==""){ //新增 uri='/admin/bch/addBch' Api.post(uri, this.bchInfo).then(res=>{ if (res.respCode == SUCCESS) { this.$notify.success("添加成功!"); let addNodedata={ "id":res.data.id, "inr":res.data.inr, "branch":res.data.branch, "qxbranch": res.data.qxbranch, "bchname": res.data.bchname, } this.$nextTick(() => { //插入父节点下最后 this.$refs.treeRef.append(addNodedata,this.nodeP); this.$refs.treeRef.setCurrentNode(addNodedata,true); this.expandedKeys.push(addNodedata.id); (this.subBtnVifFlg = false), (this.bchInfoFormDisable = true); }) }else{ this.$notify.error("添加失败!"+res.respMsg); } } ) }else{ //修改 uri='/admin/bch/updateBchById' Api.post(uri, this.bchInfo).then(res=>{ if (res.respCode == SUCCESS) { this.$notify.success("修改成功!"); this.nodeData.id = this.bchInfo.id; this.nodeData.inr = this.bchInfo.inr; this.nodeData.branch = this.bchInfo.branch; this.nodeData.qxbranch = this.bchInfo.qxbranch; this.nodeData.bchname = this.bchInfo.bchname; this.clickNodes(this.nodeData,this.nodeP) }else{ this.$notify.error("修改失败!"+res.respMsg); } } ) } } else { this.$notify.error(validMsg); return false; } }); }, handleCancel(){ //this.$refs.treeRef.setAttribute(current-node-key,this.nodeData.id) this.clickNodes(this.nodeData,this.nodeP) }, addOrg(node, data) { console.log("node----", node); //增加树节点 if (!node.isCurrent) { this.$message({ message: this.$t('statics.请选中当前节点再操作!'), center: true, type: "warning", }); return; } this.$refs.bchInfoForm.resetFields(); this.bchInfo.id = ""; this.bchInfo.qxbranch = data.branch; console.log("this.menuInfo--",this.bchInfo); (this.subBtnVifFlg = true), (this.bchInfoFormDisable = false); }, editOrg(node, data) { console.log(data, 1111111111) console.log("node----", node); //增加树节点 if (!node.isCurrent) { this.$message({ message: this.$t('statics.请选中当前节点再操作!'), center: true, type: "warning", }); return; } //this.$refs.menuInfoForm.resetFields(); this.getJgDetails(data); (this.subBtnVifFlg = true), (this.bchInfoFormDisable = false); }, deleteOrg(node, data) { if (!node.isCurrent) { this.$message({ message: this.$t('statics.请选中当前节点再操作!'), center: true, type: "warning", }); return; } //删除树节点 if (data.nodes != null) { this.deleteMsg("包含以下子节点,确定一起删除?", data); } else { this.deleteMsg("确定删除?", data); } }, deleteMsg(msg, data) { //删除通讯 var $this = this; this.$confirm(msg, "提示", { confirmButtonText: this.$t('statics.确定'), cancelButtonText: this.$t('statics.取消'), type: "warning", }) .then(() => { //发送删除请求 Api.post('/admin/bch/deleteBchById', { "id": data.id }).then( (res) => { if (res.respCode == SUCCESS) { this.$notify.success("删除成功!"); $this.$refs.treeRef.remove(data); $this.$refs.bchInfoForm.resetFields(); } else { this.$notify.error("删除失败!"+res.respMsg); } } ); }) .catch(() => { this.$message({ type: "info", message: this.$t('statics.已取消删除') }); }); }, } } </script> <style scoped lang="less"> ::v-deep .el-card__body { width: 100%; height: calc(80vh - 42px); overflow-x: auto; overflow-y: auto; } .tree-wrap { width: 100%; height: 100%; .top { width: 100%; justify-content: space-between; .el-tree-node__label { width: calc(100% - 100px); font-size: 12px; word-break: normal; white-space: nowrap; overflow: hidden; } } } .custom-tree-node>span .el-button { margin-left: 0px; padding: 0px 5px !important; } .eibs-tab ::v-deep .el-tabs__content { overflow: auto; } </style>