完成PBS编码规则管理

src/api/APIs.ts

@@ -754,6 +754,14 @@ export const GetBoPage_api = (params) => {
     params
   });
 };
+// 根据ID业务对象建模获得表格
+export const GetBoById_api = (params) => {
+  return request({
+    method: 'get',
+    url:`/tofly-sxgk/bo/${params.id}`,
+    params
+  });
+};
 /**业务对象-已存在的组 */
 export const getExsitBoGroup = (params) => {
   return request({

src/views/OnlineImport/widgets/PbsManagement/widget.vue

@@ -4,11 +4,11 @@
       <el-row class="halfHeight pbstb">
         <tf-title>PBS编码规则模板
           <template #append>
-            <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline">添加</el-button>
-            <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
+            <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addModel">添加</el-button>
+            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletePbsModel">删除</el-button>
           </template>
         </tf-title>
-        <tf-table highlight-current-row @selection-change="selectChange" :pagination="pagination" @page-change="onPageChange" :data="pbsmodels" @row-click="(row)=>{rowClick(row.id)}">
+        <tf-table ref="table" highlight-current-row @selection-change="selectChange" :pagination="pagination" @page-change="onPageChange" :data="pbsmodels" @row-click="(row)=>{rowClick(row.id)}">
           <el-table-column type="selection" width="50px"></el-table-column>
           <el-table-column label="序号" type="index" width="50px"></el-table-column>
           <el-table-column label="名称" prop="name"></el-table-column>
@@ -19,7 +19,7 @@
       </el-row>
       <el-row class="halfHeight">
         <tf-title>PBS结构网预览</tf-title>
-        <el-tree :expand-on-click-node='false' :default-expand-all="true" node-key="id" :data="pbsTreeData" :props="treeProps"></el-tree>
+        <el-tree @node-click="(data,row)=>{selectPBSNode(data.alevel)}" :expand-on-click-node='false' :default-expand-all="true" node-key="id" :data="pbsTreeData" :props="treeProps"></el-tree>
       </el-row>
     </el-col>
     <el-col :span="16" class="pbsDefine">
@@ -28,7 +28,7 @@
         <el-row><span>编码预览：{{codePreview}}</span></el-row>
         <el-row class="previewBtn">
           <div class="btngroup" v-for="(item,index) in selectedPbs.pbsLevelList" :key="item.alevel">
-            <el-button type="primary" @click="selectPBSNode(item.alevel)" plain size="medium">{{item.codeView}}</el-button>
+            <el-button type="primary" :class="{active:currentLevel.alevel===item.alevel}" @click="selectPBSNode(item.alevel)" plain size="medium">{{item.codeView}}</el-button>
             <el-select size="mini" placeholder="" v-model="item.connector" v-if="index!==selectedPbs.pbsLevelList.length-1">
               <el-option value="" label=""></el-option>
               <el-option value="." label="."></el-option>
@@ -38,7 +38,7 @@
         <el-divider></el-divider>
       </el-row>
       <el-row class="nodeDefine">
-        <el-form label-width="80px" :model="currentLevel">
+        <el-form label-width="80px" :model="currentLevel" :disabled="selectedPbs.isUse==='1'">
           <el-form-item label="节点级别">
             <el-select class="col16" v-model="currentLevel.alevel">
               <el-option v-for="level in selectedPbs.alevel" :key="level" :value="level" :label="level+'级'"></el-option>
@@ -63,7 +63,7 @@
                 </el-select>
               </el-col>
               <el-col :span="5" v-if="item.codeType==='1'">
-                <el-input size="small" v-model="item.boName" placeholder="点击选择业务对象"></el-input>
+                <el-input size="small" v-model="item.boGroupName" @focus="openBoDialog(item)" placeholder="点击选择业务对象"></el-input>
               </el-col>
               <el-col :span="10" v-else-if="item.codeType==='2'">
                 <el-col :span="12" style="paddingLeft:0">
@@ -85,8 +85,8 @@
       </el-row>
       <el-row v-if="selectedPbs.isUse==='0'" class="footerBtns">
         <el-divider></el-divider>
-        <el-button type="primary">提交</el-button>
-        <el-button type="primary" style="margin-right:100px;">清空</el-button>
+        <el-button type="primary" style="margin-right:100px;" @click="savePbsLevel">提交</el-button>
+        <!-- <el-button type="primary" style="margin-right:100px;">清空</el-button> -->
       </el-row>
     </el-col>
     <tf-dialog title="添加PBS模板" :visible.sync='isAddModelShow' width='600px'>
@@ -115,6 +115,23 @@
         <el-button size="small" type="primary" @click="submitAddModel">提交</el-button>
       </div>
     </tf-dialog>
+    <tf-dialog title="业务对象模板" :visible.sync='isAddBoShow' width='800px'>
+      <el-row>
+        <el-input v-model="searchBoGroup" placeholder="所属组名称" size="small" style="width:200px"></el-input>
+      </el-row>
+      <el-row style="height:400px">
+        <tf-table highlight-current-row @current-change="handleCurrentChange" ref="mainTb" :pagination="bopagination" @page-change="onBoPageChange" :data="bodataList">
+          <el-table-column prop="boGroup" label="所属组名称"></el-table-column>
+          <el-table-column prop="boType" label="类型名称"></el-table-column>
+          <el-table-column prop="createUserName" label="创建用户"></el-table-column>
+          <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        </tf-table>
+      </el-row>
+      <div slot="footer" style="text-align:right">
+        <el-button size="small" @click="isAddBoShow=false">取消</el-button>
+        <el-button size="small" type="primary" @click="submitAddBo">提交</el-button>
+      </div>
+    </tf-dialog>
   </el-row>
 </template>
 <script lang="ts">
@@ -153,6 +170,7 @@ interface pbsNodeCode {
   id?: string
   contents?: string
   boId?: number
+  boGroupName?: ''
 }
 /**
  * PBS模板
@@ -164,14 +182,23 @@ import {
   deletePbsModelByIds,
   addPBScodeRule_api,
   getPBScodeRuleInfo_api,
-  PutPBScodeRule_api
+  PutPBScodeRule_api,
+  GetBoPage_api,
+  GetBoById_api
 } from '@/api/APIs'
+import { ElTable } from 'element-ui/types/table'
 @Component({
   name: 'PbsManagement'
 })
 export default class PbsManagement extends Vue {
   /**分页 */
   pagination = getDefaultPagination()
+  /**业务对象分页 */
+  bopagination = getDefaultPagination()
+  /**业务对象表格数据 */
+  bodataList = []
+  /**所属组搜索 */
+  searchBoGroup = ''
   /**勾选的模板 */
   selectModels = []
   /**树组件配置 */
@@ -209,20 +236,43 @@ export default class PbsManagement extends Vue {
     pbsCodelist: [],
     pbsId: undefined
   }
+  /**当前操作的业务对象部件 */
+  currentBoWiget: pbsNodeCode = {
+    codeType: '',
+    id: '',
+    boId: undefined
+  }
+  /**选择的业务对象 */
+  selectBo = undefined
   /**模板列表 */
   pbsmodels = []
   /**编码预览 */
   codePreview = ''
   /**新增弹窗 */
   isAddModelShow = false
+  /**选择业务对象弹窗 */
+  isAddBoShow = false
   mounted() {
     this.getModelList()
   }
+  @Watch('searchBoGroup')
+  searchBogroup(value) {
+    this.bopagination = getDefaultPagination()
+    this.getDataList()
+  }
   /**分页事件 */
   onPageChange(pagination) {
     this.pagination = { ...this.pagination, ...pagination }
     this.getModelList()
   }
+  /**分页事件 */
+  onBoPageChange(pagination) {
+    this.bopagination = { ...this.bopagination, ...pagination }
+    this.getDataList()
+  }
+  handleCurrentChange(row) {
+    this.selectBo = row
+  }
   /**PBS编码模板列表 */
   getModelList() {
     getPBScodeRuleList_api(this.pagination).then((result) => {
@@ -231,6 +281,7 @@ export default class PbsManagement extends Vue {
         //默认展示第一行
         if (this.pbsmodels.length > 0) {
           this.rowClick(this.pbsmodels[0].id)
+          ;((this.$refs.table as Vue).$refs.table as ElTable).setCurrentRow(this.pbsmodels[0])
         }
         const { current, size, total } = result.result
         this.pagination = { current, size, total }
@@ -256,7 +307,6 @@ export default class PbsManagement extends Vue {
         if (pbs.alevel !== pbs.pbsLevelList.length) {
           this.initPbsLevelList(pbs)
         }
-        this.initRuleLevelSelect(pbs.alevel)
         const pbsLevel = pbs.pbsLevelList.sort(function (a, b) {
           return a.alevel - b.alevel
         })
@@ -328,22 +378,7 @@ export default class PbsManagement extends Vue {
     }
     pbs.pbsLevelList = levels
   }
-  /**
-   * 该方法用于根据模板层级初始化节点信息层级下拉列表
-   * @param {number} level pbs模板层级
-   */
-  initRuleLevelSelect(level: number) {
-    // const val = parseInt($(e.target).val().toString())
-    // $(that.domObj.find('.pbsStructBtns button')).each((index, el) => {
-    //   const alevel = $(el).data('level')
-    //   const nodeType = $(el).data('type')
-    //   if (nodeType === 'node' && alevel === val) {
-    //     //点击节点
-    //     $(el).trigger('click')
-    //     return
-    //   }
-    // })
-  }
+
   /**
    * 该方法用于根据PBS模板结构层级初始化PBS规则定义界面
    * @param {pbsStruct[]} pbsLevel pbs结构
@@ -363,12 +398,15 @@ export default class PbsManagement extends Vue {
       codeView.push(item.connector)
     })
     this.codePreview = codeView.join('')
-    if (selectNode) {//保存后定位到该节点
-        const node = pbsDefine.find(item=>{ return item.alevel === level; });
-        this.currentLevel = node;
-        this.selectPBSNode(node.alevel);
+    if (selectNode) {
+      //保存后定位到该节点
+      const node = pbsDefine.find((item) => {
+        return item.alevel === level
+      })
+      this.currentLevel = node
+      this.selectPBSNode(node.alevel)
     } else {
-       this.selectPBSNode(pbsDefine[0].alevel);
+      this.selectPBSNode(pbsDefine[0].alevel)
     }
   }
   /**删除PBS模板 */
@@ -411,11 +449,46 @@ export default class PbsManagement extends Vue {
       if (result.code === 1) {
         this.$message.success('添加模板成功')
         this.getModelList()
+        this.isAddModelShow = false
       } else {
         this.$message.error('添加模板失败')
       }
     })
   }
+  /**打开业务对象弹窗 */
+  openBoDialog(codewidget) {
+    this.isAddBoShow = true
+    this.searchBoGroup = ''
+    this.currentBoWiget = codewidget
+    this.getDataList()
+  }
+  /** 提交业务对象*/
+  submitAddBo() {
+    if (!this.selectBo) {
+      this.$message.warning('请选择业务对象')
+      return
+    }
+    this.currentBoWiget.boId = this.selectBo.id
+    this.currentBoWiget.boGroupName = this.selectBo.boType
+    this.isAddBoShow = false
+  }
+  /**项目业务对象 */
+  getDataList() {
+    let params = {
+      boGroup: this.searchBoGroup
+    }
+    params = { ...params, ...this.bopagination }
+    GetBoPage_api(params)
+      .then((result) => {
+        if (result.code !== 1) return
+        this.bodataList = result.result.records
+        const { current, size, total } = result.result
+        this.bopagination = { current, size, total }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }
   /**
    * 该方法用于保存PBS层级信息
    *
@@ -447,7 +520,7 @@ export default class PbsManagement extends Vue {
       return
     }
     //编码定义
-    const codeDe: pbsNodeCode[] = []
+    const codeDe: pbsNodeCode[] = selectNode.pbsCodelist
     selectNode.pbsCodelist.forEach((el) => {
       const codeType = el.codeType
       if (codeType === '1') {
@@ -535,98 +608,20 @@ export default class PbsManagement extends Vue {
         codeLength: undefined,
         contents: ''
       }
+      if (!this.currentLevel.pbsCodelist) this.currentLevel.pbsCodelist = []
       this.currentLevel.pbsCodelist.push(code)
     }
     let codeLen = ''
     if (code.codeLength) {
       codeLen = code.codeLength.toString()
     }
-    //切换事件
-    // $(select)
-    //   .off('change')
-    //   .on('change', function () {
-    //     const val = $(this).val()
-    //     $(row)
-    //       .children('div')
-    //       .each((index, item) => {
-    //         if ($(item).hasClass('pbsCodeInfo')) {
-    //           $(item).remove()
-    //         }
-    //       })
-    //     //移除删除按钮
-    //     $(row).find('.delete-btn').remove()
-    //     if (val === '1') {
-    //       const objcol3 = document.createElement('div')
-    //       objcol3.className = 'col-3 pbsCodeInfo'
-    //       const objselect = document.createElement('select')
-    //       //objselect.className = "form-control code-bo selectpicker dropdown";
-    //       objselect.className = 'form-control code-bo'
-    //       //objselect.setAttribute('data-toggle','dropdown');
-    //       //objselect.setAttribute('data-live-search','true');
-    //       //objselect.setAttribute('data-dropup-auto','false');
-    //       objcol3.append(objselect)
-    //       row.append(objcol3)
-    //       //$(objselect).selectpicker({dropupAuto: false});
-    //       $(objselect)
-    //         .off('mousedown')
-    //         .on('mousedown', (e) => {
-    //           return false
-    //         })
-    //       $(objselect)
-    //         .off('click')
-    //         .on('click', (e) => {
-    //           e.stopPropagation()
-    //           that.initObjList($(objselect))
-    //         })
-    //       //初始化业务对象模板
-    //       that.queryForObByid(code.boId, (obitem) => {
-    //         if (!obitem) return
-    //         $(objselect).append(
-    //           '<option selected data-subtext=' +
-    //             obitem.boGroup +
-    //             " value='" +
-    //             obitem.id +
-    //             "'>" +
-    //             obitem.boType +
-    //             '</option>'
-    //         )
-
-    //         //objcol3.append(objselect);
-    //         //row.append(objcol3);
-    //         //$(objselect).val(code.boId.toString());
-    //       })
-    //       createBtn(row)
-    //     } else if (val === '2') {
-    //       //编码长度
-    //       const objcol3 = document.createElement('div')
-    //       objcol3.className = 'col-3 pbsCodeInfo'
-    //       $(objcol3).append(
-    //         "<input class='form-control code-length' value='" +
-    //           codeLen +
-    //           "' placeholder='编码长度' type='number' min='1' />"
-    //       )
-    //       //编码说明
-    //       const objcol4 = document.createElement('div')
-    //       objcol4.className = 'col-4 pbsCodeInfo'
-    //       $(objcol4).append(
-    //         "<input class='form-control code-remark' value='" + code.contents + "' placeholder='编码说明' />"
-    //       )
-    //       row.append(objcol3)
-    //       row.append(objcol4)
-    //     } else if (val === '3') {
-    //       //编码长度
-    //       const objcol3 = document.createElement('div')
-    //       objcol3.className = 'col-3 pbsCodeInfo'
-    //       $(objcol3).append(
-    //         "<input class='form-control code-length' value='" +
-    //           codeLen +
-    //           "' placeholder='编码长度' type='number' min='1' />"
-    //       )
-    //       row.append(objcol3)
-    //     }
-    //     val !== '1' ? createBtn(row) : null
-    //   })
-    //复用的创建删除按钮的方法
+    if (code.codeType === '1') {
+      GetBoById_api({id:code.boId}).then((result) => {
+          code.boGroupName = result.result.boType
+          const index=this.currentLevel.pbsCodelist.findIndex(item=>{item.boId===code.boId})
+          this.currentLevel.pbsCodelist.splice(index,1,code)
+      })
+    }
   }
   /**
    * 该方法用于选中pbs层级节点按钮
@@ -637,7 +632,7 @@ export default class PbsManagement extends Vue {
     const pbsDefine = this.selectedPbs.pbsLevelList
     const node = pbsDefine.find((item) => item.alevel === alevel)
     this.currentLevel = node
-    const codes = node.pbsCodelist || []
+    const codes = this.currentLevel.pbsCodelist || []
     codes.forEach((item, index) => {
       this.addNodeCodeWidget(item, false)
     })
@@ -674,6 +669,12 @@ export default class PbsManagement extends Vue {
         .el-button {
           margin-right: 10px;
         }
+        .el-button.active {
+          background: #3a8ee6;
+          border-color: #3a8ee6;
+          color: #fff;
+          outline: 0;
+        }
         .el-select {
           margin-right: 10px;
           width: 70px;
@@ -686,6 +687,7 @@ export default class PbsManagement extends Vue {
     bottom: 35px;
     left: 0;
     right: 0;
+    text-align: right;
   }
   .nodeDefine {
     overflow-y: auto;