FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

标准类别下拉树

Browse Source
This commit is contained in:
zyn
2023-04-25 15:21:49 +08:00
parent 5c282797c4
commit 5e3cb2339a
4 changed files with 365 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/myFun.js
+17
View File
@@ -0,0 +1,17 @@
function getTreeItem(tree, id){
let result = {}
tree.map(item => {
if(item.id === id){
result = item
}else{
if(item.children.length > 0){
getTreeItem(item.children)
}
}
})
return result
}
export {
getTreeItem
}
src/components/abc/selectTree/selectTree.vue
+215
View File
@@ -0,0 +1,215 @@
<template>
<el-form-item :label="label" class="search-item">
<el-select :ref="refName" v-model="value" :placeholder="placeholder" style="width: 100%" fixed>
<ElInput
v-if="treeList.length !== 0"
v-model="filterText"
placeholder="输入关键字搜索"
class="sel-input"
@click.stop.native
/>
<el-option :value="value" :label="checkLabel" class="sel-option">
<el-tree
class="tree-line"
ref="selectTree"
:data="treeList"
:props="defaultProps"
icon-class="icon-tree"
node-key="id"
highlight-current
@node-click="nodeClick"
:filter-node-method="filterNode">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
<span style="font-size:12px"> {{ node.label }} </span>
</span>
</el-tree>
</el-option>
</el-select>
</el-form-item>
</template>
<script>
export default {
data(){
return {
filterText: '', // 筛选
checkLabel: '', // 回显值
}
},
props:{
label:{
type: String
},
placeholder: {
type: String,
default(){
return '请选择'
}
},
// 树
treeList:{
type: Array,
required: true
},
// 绑定的值 -> id
value:{
type: String,
required: true
},
defaultProps:{
type: Object,
default(){
return {
children: 'children',
label: 'menuName'
}
}
},
refName:{
type: String,
default() {
return 'selectRefs'
}
}
},
watch: {
filterText (val) {
this.$refs[this.refName].filter(val);
},
},
methods: {
nodeClick(node){
this.$emit('input',node.id) // 父子v-model的input事件
this.checkLabel = node.menuName
},
filterNode (value, data) {
if (!value) return true;
return data.menuName.indexOf(value) !== -1;
},
// 父组件通过ref调用该方法
clear(){
// 清空值
this.$emit('input', '')
this.checkLabel = ''
this.filterText = ''
}
}
}
</script>
<style scoped lang="less">
/deep/ .icon-tree {
margin: 0 5px 0 10px;
position: relative;
background: url('~@/assets/images/shangqi/img/tree-add.png');
background-size: 100% 100%;
}
/deep/ .expanded {
background: url('~@/assets/images/shangqi/img/tree-sub.png');
background-size: 100% 100%;
}
/deep/ .is-leaf {
background-image: none;
background-size: 100% 100%;
}
/deep/ .is-show {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: url('~@/assets/images/shangqi/img/tree.png');
background-size: 100% 100%;
}
/deep/ .is-leaf-none {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: url('~@/assets/images/shangqi/img/none-file-new.png');
background-size: 100% 100%;
}
/deep/ .tree-line {
.el-tree-node {
position: relative;
padding-left: 0px; // 缩进量
line-height: 30px;
}
.el-tree-node__content{
padding-left: 0 !important;
}
.el-tree-node__children {
padding-left: 16px; // 缩进量
}
// 竖线
.el-tree-node::before {
content: "";
height: 100%;
width: 1px;
position: absolute;
left: -3px;
top: -26px;
border-width: 1px;
border-left: 1px dashed #858990e0;
}
// 当前层最后一个节点的竖线高度固定
.el-tree-node:last-child::before {
height: 38px; // 可以自己调节到合适数值
}
// 横线
.el-tree-node::after {
content: "";
width: 11px;
height: 20px;
position: absolute;
left: -3px;
top: 12px;
border-width: 1px;
border-top: 1px dashed #858990e0;
}
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
& > .el-tree-node::after {
border-top: none;
}
& > .el-tree-node::before {
border-left: none;
}
// 展开关闭的icon
.el-tree-node__expand-icon {
font-size: 16px;
// 叶子节点（无子节点）
&.is-leaf {
color: transparent;
// display: none; // 也可以去掉
}
}
}
.sel-input {
width: 96%;
margin: 5px;
height: 30px;
/deep/ .el-input__inner{
height: 30px;
line-height: 30px;
}
}
.sel-option {
width: 100%;
height: 200px;
overflow: auto;
background-color: #fff;
cursor: pointer;
font-weight: normal!important;
padding: 0 5px;
}
</style>
src/pages/processCenter/pages/creatProcess/qbfs/step1.vue
+56 -10
View File
@@ -533,13 +533,14 @@
clearable
:maxlength="100"></el-input>
</el-form-item>
<el-form-item label="标准类别" class="search-item">
<el-input
v-model="replaceLawsNumForm.menuId"
placeholder="根据标准类别查找"
clearable
:maxlength="100"></el-input>
</el-form-item>
<selectTree
ref="selectTreeRef"
label="标准类别"
placeholder="根据标准类别查找"
:treeList="selectTreeList"
v-model="replaceLawsNumForm.menuId"
>
</selectTree>
<el-form-item class="search-item btn-box">
<el-button
type="primary"
@@ -665,13 +666,16 @@ import ProcessHeader from "../../components/ProcessHeader";
import ProcessFooter from "../../components/ProcessFooter";
import ProcessTitle from "../../components/ProcessTitle";
import {saveTaskFirst,queryTaskFirst, inboundLiaisonDetail,taskDel,startProcessRollBack, completeTask } from "api/process";
import selectTree from "@/components/abc/selectTree/selectTree"
import { getTreeItem } from "@/common/myFun.js"
export default {
name: "qbfsStep1",
components:{
ProcessHeader,
ProcessFooter,
ProcessTitle
ProcessTitle,
selectTree
},
filters: {
ellipsis (value) {
@@ -791,6 +795,7 @@ export default {
{required: true, validator: bussFsSubUser1NameVal, trigger: 'blur'},
],
},
selectTreeList: [],
}
},
mounted() {
@@ -932,12 +937,18 @@ export default {
pageSize: this.$store.getters.userInfo.configContent,
total: 0,
validFlag: '0',
menuId: "", // 标准类别
// menuId: "", // 标准类别
QCDW: '' // 起草单位
}
// 清空值
this.$refs.selectTreeRef.clear()
this.getReplaceLawsNumRow()
},
getReplaceLawsNumRow () {
this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
this.replaceLawsNumForm.treeType = currentTreeItem.treeType
if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
this.replaceLawsNumForm.issueTimeStart = this.replaceLawsNumForm.issueTimeArr[0] || null
this.replaceLawsNumForm.issueTimeEnd = this.replaceLawsNumForm.issueTimeArr[1] || null
@@ -978,6 +989,10 @@ export default {
})
},
getReplaceLawsNumRowFirst () {
this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
this.replaceLawsNumForm.treeType = currentTreeItem.treeType
this.replaceLawsNumForm.page = 1
this.replacePage = 1
if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
@@ -1058,9 +1073,40 @@ export default {
handleTabs(name) {
this.active = name;
},
choiceShow(){
async choiceShow(){
this.getReplaceLawsNumRow()
this.replaceLawsNumModel = true;
// 标准类别树
const list1 = await this.getMenuListOne()
const list2 = await this.getMenuListTwo()
this.selectTreeList = list1.concat(list2)
},
// 企业标准树
getMenuListOne() {
return new Promise((resolve, reject) => {
this.$http._getData('sarResource/ts-resource/getListStandLimitData', {
sorDivide: 'BUSINESS_STAND',
userId: this.$store.getters.userInfo.userId
}).then(res=>{
if(res && res.data)
resolve(res.data)
}).catch(e=>{
console.log(e)
})
})
},
// 技术体系树
getMenuListTwo() {
return new Promise((resolve, reject) => {
this.$http._getData('lawss/sarMenuStandardLimit/getListStandLimit', {
dicId: '9m4qqqaansxmox5e82zm'
}).then(res=>{
if(res && res.data)
resolve(res.data)
}).catch(e=>{
console.log(e)
})
})
},
getStandDataBtns(){
this.$http.get('lawss/sarBussionessStand/getSarBussionStandPage',{
src/pages/regulatoryRepository/enterpriseStandardDatabase/components/EnterpriseStandardDatabase.vue
+77 -10
View File
@@ -1509,13 +1509,14 @@
clearable
:maxlength="100"></el-input>
</el-form-item>
<el-form-item label="标准类别" class="search-item">
<el-input
v-model="replaceLawsNumForm.menuId"
placeholder="根据标准类别查找"
clearable
:maxlength="100"></el-input>
</el-form-item>
<selectTree
ref="selectTreeRef"
label="标准类别"
placeholder="根据标准类别查找"
:treeList="selectTreeList"
v-model="replaceLawsNumForm.menuId"
>
</selectTree>
<el-form-item class="search-item btn-box">
<el-button
type="primary"
@@ -1769,6 +1770,8 @@ import TreeSelect from "@/components/treeSelect/treeSelect.vue";
import TreeSelectNew from "@/components/treeSelect/treeSelectNew.vue";
import ProcessTitle from "@/pages/processCenter/pages/components/ProcessTitle";
import treeSelectModule from "@/components/treeSelect/treeSelectModule.vue";
import selectTree from "@/components/abc/selectTree/selectTree"
import { getTreeItem } from "@/common/myFun.js"
import {mapGetters} from "vuex";
import store from "@/store";
@@ -1789,7 +1792,8 @@ export default {
TreeSelect,
TreeSelectNew,
treeSelectModule,
ProcessTitle
ProcessTitle,
selectTree
},
props: {},
data() {
@@ -2563,6 +2567,7 @@ export default {
url: '',
urlChild: '',
modelType:'',
selectTreeList: [],
}
},
methods: {
@@ -2654,9 +2659,40 @@ export default {
map.set(3,"继续有效");
return map.get(data)
},
selectBuss(){
async selectBuss(){
this.replaceLawsNumModel = true
this.getReplaceLawsNumRow()
// 标准类别树
const list1 = await this.getMenuListOne()
const list2 = await this.getMenuListTwo()
this.selectTreeList = list1.concat(list2)
},
// 企业标准树
getMenuListOne() {
return new Promise((resolve, reject) => {
this.$http._getData('sarResource/ts-resource/getListStandLimitData', {
sorDivide: 'BUSINESS_STAND',
userId: this.$store.getters.userInfo.userId
}).then(res=>{
if(res && res.data)
resolve(res.data)
}).catch(e=>{
console.log(e)
})
})
},
// 技术体系树
getMenuListTwo() {
return new Promise((resolve, reject) => {
this.$http._getData('lawss/sarMenuStandardLimit/getListStandLimit', {
dicId: '9m4qqqaansxmox5e82zm'
}).then(res=>{
if(res && res.data)
resolve(res.data)
}).catch(e=>{
console.log(e)
})
})
},
replaceLawsNumModelCancel () {
// this.replaceLawsNumModel = false
@@ -2690,11 +2726,16 @@ export default {
total: 0,
validFlag: '0',
QCDW: '',
menuId: ''
// menuId: ''
}
this.$refs.selectTreeRef.clear()
this.getReplaceLawsNumRow()
},
getReplaceLawsNumRow () {
this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
this.replaceLawsNumForm.treeType = currentTreeItem.treeType
if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
this.replaceLawsNumForm.issueTimeStart = this.replaceLawsNumForm.issueTimeArr[0] || null
this.replaceLawsNumForm.issueTimeEnd = this.replaceLawsNumForm.issueTimeArr[1] || null
@@ -2728,6 +2769,10 @@ export default {
})
},
getReplaceLawsNumRowFirst () {
this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
this.replaceLawsNumForm.treeType = currentTreeItem.treeType
this.replaceLawsNumForm.page = 1
this.replacePage = 1
if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
@@ -5456,6 +5501,9 @@ export default {
}
},
watch: {
// selectTreeFilterText (val) {
// this.$refs.selectTree.filter(val);
// },
'sarBussionessStandEO.standSort':{
handler:function(val){
this.QCBFC = !!(val && val.indexOf("QCBFC") !== -1);
@@ -5850,4 +5898,23 @@ export default {
/deep/.el-table__fixed-body-wrapper .el-table__body {
padding-bottom: 20px;
}
//
//.sel-input {
// width: 96%;
// margin: 5px;
// height: 30px;
// /deep/ .el-input__inner{
// height: 30px;
// line-height: 30px;
// }
//}
//.sel-option {
// width: 100%;
// height: 200px;
// overflow: auto;
// background-color: #fff;
// cursor: pointer;
// font-weight: normal!important;
// padding: 0 5px;
//}
</style>