|
@@ -19,7 +19,7 @@
|
|
|
</el-row>
|
|
|
<el-row class="halfHeight">
|
|
|
<tf-title>PBS结构网预览</tf-title>
|
|
|
- <el-tree default-expand-all="true" node-key="id" :data="pbsTreeData" :props="treeProps"></el-tree>
|
|
|
+ <el-tree :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">
|
|
@@ -27,9 +27,9 @@
|
|
|
<el-row class="preview">
|
|
|
<el-row><span>编码预览:{{codePreview}}</span></el-row>
|
|
|
<el-row class="previewBtn">
|
|
|
- <div class="btngroup" v-for="(item,index) in pbsDefineBtns" :key="index">
|
|
|
- <el-button type="primary" plain size="medium" v-key>{{item.codeView}}</el-button>
|
|
|
- <el-select size="mini" placeholder="" v-model="item.connector" v-if="index!==pbsDefineBtns.length-1">
|
|
|
+ <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-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>
|
|
|
</el-select>
|
|
@@ -51,15 +51,43 @@
|
|
|
<el-input class="col16" type="text" v-model="currentLevel.contents"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="编码定义">
|
|
|
- <el-button size="mini" icon="el-icon-plus" type="primary" plain></el-button>
|
|
|
+ <el-button size="mini" icon="el-icon-plus" type="primary" @click="addNodeCodeWidget(null,true)" plain></el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-row style="marginBottom:20px;" :gutter="20" v-for="(item,index) in currentLevel.pbsCodelist" :key='index'>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-select size="small" v-model="item.codeType" style="width:100%">
|
|
|
+ <el-option value="1" label="业务对象类型"></el-option>
|
|
|
+ <el-option value="2" label="输入框"></el-option>
|
|
|
+ <el-option value="3" label="流水号"></el-option>
|
|
|
+ </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-col>
|
|
|
+ <el-col :span="10" v-else-if="item.codeType==='2'">
|
|
|
+ <el-col :span="12" style="paddingLeft:0">
|
|
|
+ <el-input size="small" v-model="item.codeLength" placeholder="编码长度"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-input size="small" v-model="item.contents" placeholder="编码说明"></el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" v-else-if="item.codeType==='3'">
|
|
|
+ <el-input size="small" v-model="item.codeLength" placeholder="编码长度"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-button size="small" icon="el-icon-delete" type="danger" @click="removeNodeCodeWidget(index)"></el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</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-row>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-button type="primary">提交</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'>
|
|
|
<el-form v-model="addModelForm" label-width="100px">
|
|
@@ -131,7 +159,13 @@ interface pbsNodeCode {
|
|
|
*/
|
|
|
import { Vue, Prop, Watch, Component } from 'vue-property-decorator'
|
|
|
import { getDefaultPagination } from '@/utils/constant'
|
|
|
-import { getPBScodeRuleList_api, deletePbsModelByIds, addPBScodeRule_api, getPBScodeRuleInfo_api } from '@/api/APIs'
|
|
|
+import {
|
|
|
+ getPBScodeRuleList_api,
|
|
|
+ deletePbsModelByIds,
|
|
|
+ addPBScodeRule_api,
|
|
|
+ getPBScodeRuleInfo_api,
|
|
|
+ PutPBScodeRule_api
|
|
|
+} from '@/api/APIs'
|
|
|
@Component({
|
|
|
name: 'PbsManagement'
|
|
|
})
|
|
@@ -164,8 +198,6 @@ export default class PbsManagement extends Vue {
|
|
|
create_time: '',
|
|
|
code_view: ''
|
|
|
}
|
|
|
- /**模板编码按钮 */
|
|
|
- pbsDefineBtns = []
|
|
|
/**当前选中节点 */
|
|
|
currentLevel: pbsStruct = {
|
|
|
id: undefined,
|
|
@@ -196,6 +228,10 @@ export default class PbsManagement extends Vue {
|
|
|
getPBScodeRuleList_api(this.pagination).then((result) => {
|
|
|
if (result.code === 1) {
|
|
|
this.pbsmodels = result.result.records
|
|
|
+ //默认展示第一行
|
|
|
+ if (this.pbsmodels.length > 0) {
|
|
|
+ this.rowClick(this.pbsmodels[0].id)
|
|
|
+ }
|
|
|
const { current, size, total } = result.result
|
|
|
this.pagination = { current, size, total }
|
|
|
}
|
|
@@ -327,41 +363,13 @@ export default class PbsManagement extends Vue {
|
|
|
codeView.push(item.connector)
|
|
|
})
|
|
|
this.codePreview = codeView.join('')
|
|
|
-
|
|
|
- const that = this
|
|
|
- const buttons = []
|
|
|
- // pbsDefine.forEach((item, index) => {
|
|
|
- // if (index === pbsDefine.length - 1) {
|
|
|
- // buttons.push('<button type="button" data-level="' + item.alevel + '" data-type="node" class="btn btn-outline-primary">' + item.codeView + '</button>');
|
|
|
- // } else {
|
|
|
- // buttons.push('<button type="button" data-level="' + item.alevel + '" data-type="node" class="btn btn-outline-primary">' + item.codeView + '</button>');
|
|
|
- // if (!item.connector || item.connector === "") {
|
|
|
- // buttons.push('<select data-level="' + item.alevel + '" data-type="connector"><option selected> </option><option>.</option></select>');
|
|
|
- // } else {
|
|
|
- // buttons.push('<select data-level="' + item.alevel + '" data-type="connector"><option> </option><option selected>.</option></select>');
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- this.pbsDefineBtns = pbsDefine
|
|
|
- //节点点击事件
|
|
|
- // $(this.domObj.find('.pbsStructBtns')).on('click', 'button', function (e) {
|
|
|
- // const el = $(e.currentTarget);
|
|
|
- // el.parent().find('button').removeClass('focus');
|
|
|
- // el.addClass('focus');
|
|
|
- // const level = el.data('level');
|
|
|
- // const nodeType = el.data('type');
|
|
|
- // if (nodeType === "node") {//点击节点
|
|
|
- // that.selectPBSNode(level);
|
|
|
- // }
|
|
|
- // })
|
|
|
- // if (selectNode) {//保存后定位到该节点
|
|
|
- // const node = _.find(pbsDefine, function (item) { return item.alevel === level; });
|
|
|
- // $(this.domObj.find('.pbsStructBtns button[data-level="' + node.alevel + '"]')).trigger('click');//高亮
|
|
|
- // that.selectedNode = node;
|
|
|
- // that.initNodeDefine(node);
|
|
|
- // } else {
|
|
|
- // $(this.domObj.find('.pbsStructBtns button')[0]).trigger('click');
|
|
|
- // }
|
|
|
+ if (selectNode) {//保存后定位到该节点
|
|
|
+ const node = pbsDefine.find(item=>{ return item.alevel === level; });
|
|
|
+ this.currentLevel = node;
|
|
|
+ this.selectPBSNode(node.alevel);
|
|
|
+ } else {
|
|
|
+ this.selectPBSNode(pbsDefine[0].alevel);
|
|
|
+ }
|
|
|
}
|
|
|
/**删除PBS模板 */
|
|
|
deletePbsModel() {
|
|
@@ -408,6 +416,232 @@ export default class PbsManagement extends Vue {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ /**
|
|
|
+ * 该方法用于保存PBS层级信息
|
|
|
+ *
|
|
|
+ */
|
|
|
+ savePbsLevel() {
|
|
|
+ if (!this.currentLevel && parseInt(this.selectedPbs.isUse) === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const that = this
|
|
|
+ const selectNode = this.currentLevel
|
|
|
+ let isCorrect = true
|
|
|
+ const level: pbsStruct = {
|
|
|
+ levelName: selectNode.levelName,
|
|
|
+ contents: selectNode.contents,
|
|
|
+ connector: selectNode.connector,
|
|
|
+ codeView: selectNode.codeView,
|
|
|
+ alevel: selectNode.alevel,
|
|
|
+ pbsId: selectNode.pbsId,
|
|
|
+ pbsCodelist: selectNode.pbsCodelist,
|
|
|
+ id: selectNode.id
|
|
|
+ }
|
|
|
+ const name = selectNode.levelName //层级名称
|
|
|
+ const contents = selectNode.contents //层级说明
|
|
|
+ //xss脚本检测
|
|
|
+
|
|
|
+ const codeLen = selectNode.pbsCodelist.length
|
|
|
+ if (contents === '' || name === '' || codeLen === 0) {
|
|
|
+ this.$message.warning('请完善层级信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //编码定义
|
|
|
+ const codeDe: pbsNodeCode[] = []
|
|
|
+ selectNode.pbsCodelist.forEach((el) => {
|
|
|
+ const codeType = el.codeType
|
|
|
+ if (codeType === '1') {
|
|
|
+ const boId = el.boId
|
|
|
+ if (!boId) {
|
|
|
+ this.$message.warning('请选择业务对象')
|
|
|
+ isCorrect = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ } else if (codeType === '2') {
|
|
|
+ const codeLen = el.codeLength.toString().trim()
|
|
|
+ const codeRemark = el.contents
|
|
|
+ if (codeLen === '' || codeRemark === '') {
|
|
|
+ this.$message.warning('请填写编码长度或说明')
|
|
|
+ isCorrect = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (isNaN(parseInt(codeLen)) || parseInt(codeLen) > 10) {
|
|
|
+ this.$message.warning('请填写编码长度,不超过10位')
|
|
|
+ isCorrect = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ } else if (codeType === '3') {
|
|
|
+ const codeLen = el.codeLength.toString().trim()
|
|
|
+ if (isNaN(parseInt(codeLen)) || parseInt(codeLen) > 10) {
|
|
|
+ this.$message.warning('请填写编码长度,不超过10位')
|
|
|
+ isCorrect = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (isCorrect && codeDe.length === 0) {
|
|
|
+ this.$message.warning('请添加编码定义')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!isCorrect) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ level.codeView = this.computeCodeView(level)
|
|
|
+ PutPBScodeRule_api(level).then((e) => {
|
|
|
+ if (e.code === 1) {
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ //保存成功,更新PBS模板,定位至层级
|
|
|
+ this.rowClick(that.selectedPbs.id, true, level.alevel)
|
|
|
+ } else {
|
|
|
+ this.$message.error('保存失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 该方法用于前端生成层级编码预览
|
|
|
+ * @param level 层级
|
|
|
+ */
|
|
|
+ computeCodeView(level: pbsStruct) {
|
|
|
+ const hasBOCode = level.pbsCodelist.find((item, index) => {
|
|
|
+ return !item.codeLength || item.codeLength <= 0
|
|
|
+ })
|
|
|
+ if (hasBOCode) {
|
|
|
+ return level.codeView
|
|
|
+ } else {
|
|
|
+ const codeView = []
|
|
|
+ let str: string = 'N'
|
|
|
+ level.pbsCodelist.forEach((item) => {
|
|
|
+ codeView.push(str.repeat(item.codeLength))
|
|
|
+ })
|
|
|
+ return codeView.join('')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 删除编码定义部件
|
|
|
+ */
|
|
|
+ removeNodeCodeWidget(index) {
|
|
|
+ this.currentLevel.pbsCodelist.splice(index, 1)
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 该方法用于动态添加pbs节点编码定义部件
|
|
|
+ * @param {pbsNodeCode} code
|
|
|
+ * @param {boolean} isEditable 是否可编辑
|
|
|
+ */
|
|
|
+ addNodeCodeWidget(code: pbsNodeCode, isEditable: boolean = true) {
|
|
|
+ if (!code) {
|
|
|
+ code = {
|
|
|
+ codeType: '1',
|
|
|
+ boId: undefined,
|
|
|
+ codeLength: undefined,
|
|
|
+ contents: ''
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ // })
|
|
|
+ //复用的创建删除按钮的方法
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 该方法用于选中pbs层级节点按钮
|
|
|
+ * @param {number} alevel 层级
|
|
|
+ */
|
|
|
+ selectPBSNode(alevel: number) {
|
|
|
+ if (!this.selectedPbs) return
|
|
|
+ const pbsDefine = this.selectedPbs.pbsLevelList
|
|
|
+ const node = pbsDefine.find((item) => item.alevel === alevel)
|
|
|
+ this.currentLevel = node
|
|
|
+ const codes = node.pbsCodelist || []
|
|
|
+ codes.forEach((item, index) => {
|
|
|
+ this.addNodeCodeWidget(item, false)
|
|
|
+ })
|
|
|
+ }
|
|
|
/**属性表格勾选事件 */
|
|
|
selectChange(selection) {
|
|
|
this.selectModels = selection
|
|
@@ -415,6 +649,7 @@ export default class PbsManagement extends Vue {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+@import '~@/styles/mixin.scss';
|
|
|
.halfHeight {
|
|
|
height: 50%;
|
|
|
position: relative;
|
|
@@ -430,13 +665,13 @@ export default class PbsManagement extends Vue {
|
|
|
height: 100%;
|
|
|
padding-left: 10px;
|
|
|
.preview {
|
|
|
- .el-row{
|
|
|
- padding:5px 10px;
|
|
|
+ .el-row {
|
|
|
+ padding: 5px 10px;
|
|
|
}
|
|
|
.previewBtn {
|
|
|
display: flex;
|
|
|
.btngroup {
|
|
|
- .el-button{
|
|
|
+ .el-button {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.el-select {
|
|
@@ -446,13 +681,17 @@ export default class PbsManagement extends Vue {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .footerBtns{
|
|
|
- position: absolute;
|
|
|
- bottom: 35px;
|
|
|
- left: 0;
|
|
|
- right:0;
|
|
|
- }
|
|
|
+ .footerBtns {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 35px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
.nodeDefine {
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ height: calc(100% - 285px);
|
|
|
+ @include scrollBar;
|
|
|
.col16,
|
|
|
.col16.el-input {
|
|
|
width: 66.6666666667%;
|