180 lines
4.2 KiB
Vue
180 lines
4.2 KiB
Vue
<!--SVPPS组件-->
|
|
<template>
|
|
<el-col :span="span">
|
|
<el-form-item
|
|
:label="config.attrName"
|
|
:prop="config.attrField"
|
|
:label-width="labelWidth"
|
|
class="add-form-item"
|
|
:class="{'form-item-disabled': disabled}"
|
|
>
|
|
<el-input
|
|
v-model="checkedName"
|
|
:placeholder="'请选择' + config.attrName"
|
|
readonly
|
|
:disabled="disabled"
|
|
:id="config.attrField"
|
|
@click.native="handleSVPPSClick"
|
|
/>
|
|
</el-form-item>
|
|
<el-drawer
|
|
:title="config.attrName"
|
|
:visible.sync="visible"
|
|
:wrapper-closable="false"
|
|
size="350px"
|
|
append-to-body
|
|
class="org-tree"
|
|
@opened="drawerOpen"
|
|
>
|
|
<div class="demo-drawer-content">
|
|
<laws-tree
|
|
v-if="visible"
|
|
:zNodes="zNodes"
|
|
check-enable
|
|
treeDivId="SVPPSID"
|
|
@treeOnCheck="handleOnCheck"
|
|
:editable="false"
|
|
:checkIdList="checkIdList"
|
|
:chkboxType="{ 'Y': '', 'N': '' }"
|
|
ref="SVPPSID"
|
|
:loading="svppsLoading"
|
|
class="ztree" style="height: 100%;overflow: auto"
|
|
/>
|
|
</div>
|
|
<div class="demo-drawer-footer">
|
|
<el-button
|
|
round
|
|
class="common-button-primary"
|
|
icon="el-icon-check"
|
|
type="primary"
|
|
@click="handleTreeDrawerConfirm">确定
|
|
</el-button>
|
|
<el-button
|
|
round
|
|
class="common-button-default"
|
|
icon="el-icon-close"
|
|
@click="handleTreeDrawerCancel">取消</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
</el-col>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'SVPPS',
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
value: {
|
|
required: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 栅格比例
|
|
span: {
|
|
type: Number,
|
|
default: 24
|
|
},
|
|
labelWidth: {
|
|
type: String,
|
|
default: '150px'
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
treeCheckNode: [],
|
|
checkedName: '',
|
|
zNodes: [],
|
|
svppsLoading: false,
|
|
checkIdList: []
|
|
}
|
|
},
|
|
methods: {
|
|
getSvpps () {
|
|
this.svppsLoading = true
|
|
this.$http.get('/lawss/otSvpps/selectThree', {}, {
|
|
_this: this
|
|
}, res => {
|
|
this.svppsLoading = false
|
|
if (res.ok) {
|
|
let treeNode = []
|
|
res.data.map((item, index) => {
|
|
let treeItem = {
|
|
name: item.svppsCode + ' ' + item.svppsCnName + ' ' + item.svppsEnName,
|
|
pId: item.pid,
|
|
id: item.id,
|
|
svppsCode: item.svppsCode,
|
|
snum: item.snum,
|
|
fnum: item.fnum,
|
|
tnum: item.tnum
|
|
}
|
|
treeNode[index] = treeItem
|
|
})
|
|
this.zNodes = treeNode
|
|
}
|
|
})
|
|
},
|
|
// 选择SVPPS事件
|
|
handleOnCheck (treeCheckNode) {
|
|
this.treeCheckNode = treeCheckNode
|
|
},
|
|
// 选择SVPPS确定事件
|
|
handleTreeDrawerConfirm () {
|
|
const checkedList = []
|
|
const checkedNameList = []
|
|
if (this.treeCheckNode.length > 0) {
|
|
this.treeCheckNode.map(item => {
|
|
// if (item.pId) {
|
|
checkedList.push(item.id)
|
|
checkedNameList.push(item.svppsCode)
|
|
// }
|
|
})
|
|
this.checkedName = checkedNameList.join(',')
|
|
this.$emit('input', checkedList.join(','))
|
|
this.$emit('SVPPSName', this.checkedName)
|
|
this.$emit('on-checked', this.checkedName)
|
|
}
|
|
this.visible = false
|
|
},
|
|
// 选择SVPPS取消事件
|
|
handleTreeDrawerCancel () {
|
|
this.visible = false
|
|
},
|
|
// 赋值回显SVPPS
|
|
drawerOpen () {
|
|
this.checkIdList = this.value ? this.value.split(',') : []
|
|
},
|
|
handleSVPPSClick () {
|
|
if (this.disabled) {
|
|
return false
|
|
}
|
|
this.visible = true
|
|
}
|
|
},
|
|
watch: {
|
|
'config.valueName' () {
|
|
this.checkedName = this.config.valueName || ''
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getSvpps()
|
|
this.checkedName = this.config.valueName || ''
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
::v-deep .el-drawer__header{
|
|
&>span:first-child{
|
|
outline: none!important;
|
|
}
|
|
}
|
|
::v-deep .el-drawer{
|
|
outline: none!important;
|
|
}
|
|
</style>
|