Commit e015b333 authored by jingnan's avatar jingnan 👀

高级组件增加通用联动选择器

parent 274508fd
export default {
props: {},
layoutConfigData: [
{
title: '高级组件配置',
data: [
{
key: 'linkageAttr',
title: '联动属性(父级)',
component: {
defaultValue: '',
name: 'el-input'
}
},
{
key: 'requestMethod',
title: '请求方式',
width: 1,
component: {
name: 'el-select',
isLabelTop: true,
options: [
{
label: 'get',
value: 'get'
},
{
label: 'post',
value: 'post'
}
]
}
},
{
key: 'requestURL',
title: '请求url',
width: 1,
component: {
isLabelTop: true,
defaultValue: 'requestURL=""',
name: 'btnCodeEdit',
remindText: `requestURL为接口地址变量,直接给赋值,该变量必须有值`
}
},
{
key: 'requestParameters',
title: '请求参数',
width: 1,
component: {
isLabelTop: true,
defaultValue: 'requestParameters = {}',
name: 'btnCodeEdit',
remindText: `requestParameters为请求参数变量,直接给赋值,该变量必须有值`
}
},
{
key: 'formateResponse',
title: '接口返回数据格式化',
width: 1,
component: {
isLabelTop: true,
defaultValue: `responseData = res.items.content.map(row => {
return {
value: row.id,
label: row.name
}
})`,
name: 'btnCodeEdit',
remindText: `responseData为接口返回数据`
}
},
{
key: 'multipleVal',
title: '多选值',
width: 1,
component: {
isLabelTop: true,
name: 'el-switch',
defaultValue: false
}
}
]
}
],
data() {
return {
}
},
created() {
},
computed: {
},
methods: {
}
}
<template>
<div class="generalLinkageSelect-select">
<el-select ref="selectCom" v-model="selVal" placeholder="请选择" :multiple="isMultiple" size="mini" :disabled="disabledVal" @change="changeVal">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</template>
<script>
import http from '@/utils/http'
import config from './config'
import _get from 'lodash.get'
export default {
componentName: '通用联动属性选择器',
name: 'GeneralLinkageSelect', // name写在组件的最前方,自定义组件为必填
components: {},
mixins: [config],
props: {
item: {
type: Object,
default: () => {
return {}
}
},
form: {
type: Object,
default: () => {}
},
middleForm: {
type: Object,
default: () => {}
},
value: {
type: [Number, String, Object, Array],
default: () => ''
}
},
data() {
return {
options: [],
selVal: '',
disabledVal: false,
linkageValue: ''
}
},
computed: {
isMultiple() {
return this.item.multipleVal || this.$utils._get(this.item, 'multipleVal') || false
}
},
watch: {
form: {
immediate: true,
deep: true,
handler(val) {
if (val) {
if (!this.item.linkageAttr) {
return
}
const _val = _get(this.form, this.item.linkageAttr)
if (_val !== this.linkageValue) {
this.options = []
this.selVal = ''
this.linkageValue = _val
this.getData(_val)
}
}
}
},
item: {
immediate: true,
deep: true,
handler(v) {
if (v.component.hasOwnProperty('disabled')) {
this.disabledVal = v.component.disabled
}
}
},
value: {
immediate: true,
deep: true,
handler(v) {
if (v) {
this.selVal = this.value
}
}
}
},
created() {
// 初始化数据
},
methods: {
getData(val) {
var requestURL = ''
var requestParameters = {}
if (this.item.requestURL) {
try {
let fun
eval(`fun = function (obtainedParams, functionParams){${this.item.requestURL}}`) // eslint-disable-line
fun.apply(this)// eslint-disable-line
} catch (error) {
console.error(error)
}
}
if (this.item.requestParameters) {
try {
let fun1
eval(`fun1 = function (obtainedParams, functionParams){${this.item.requestParameters}}`) // eslint-disable-line
fun1.apply(this)// eslint-disable-line
} catch (error) {
console.error(error)
}
}
http[this.item.requestMethod](requestURL, requestParameters).then(res => {
let responseData = []
if (this.item.formateResponse) {
try {
let fun2
eval(`fun2 = function (obtainedParams, functionParams){${this.item.formateResponse}}`) // eslint-disable-line
fun2.apply(this)// eslint-disable-line
} catch (error) {
console.error(error)
}
} else {
responseData = res.items.content.map(row => {
return {
value: row.id,
label: row.name
}
})
}
this.options = responseData
})
},
changeVal() {
this.$emit('input', this.selVal)
}
}
}
</script>
<style lang='scss'>
</style>
......@@ -13,6 +13,7 @@ import contextSelect from './components/contextSelect'
import orgLazyLoadSelect from './components/orgLazyLoadSelect'
import AssociationFormAddMVM from './components/AssociationFormAddMVM'
import GeneralUserSelect from './components/GeneralUserSelect'
import GeneralLinkageSelect from './components/GeneralLinkageSelect'
import DxDocumentFolderSelect from './components/DxDocumentFolderSelect/DxDocumentFolderSelect'
import LazyLoadTreeSelect from './components/LazyLoadTreeSelect'
import RelatedECN from './components/RelatedECN'
......@@ -58,6 +59,7 @@ Vue.component(ExtendsDxContextTeam.name, ExtendsDxContextTeam) // eslint-disabl
Vue.component(contextSelect.name, contextSelect) // eslint-disable-line
Vue.component(AssociationFormAddMVM.name, AssociationFormAddMVM) // eslint-disable-line
Vue.component(GeneralUserSelect.name, GeneralUserSelect) // eslint-disable-line
Vue.component(GeneralLinkageSelect.name, GeneralLinkageSelect) // eslint-disable-line
Vue.component(LazyLoadTreeSelect.name, LazyLoadTreeSelect) // eslint-disable-line
Vue.component(SymbolOfTolerance.name, SymbolOfTolerance) // eslint-disable-line
Vue.component(StateSelect.name, StateSelect) // eslint-disable-line
......
......@@ -26,7 +26,8 @@ const formListComponents = [ // form组件
'BatchSubmitReview',
'DeeBarCode',
'DeeQrcode',
'DeeFolderInfo'
'DeeFolderInfo',
'GeneralLinkageSelect'
]
const tabComponents = [ // 组合组件
'DeeInjectionRuleTemp',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment