KongPluginModal文件
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disable} }"
@cancel="handleCancel"
cancelText="关闭">
<kong-plugin-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"
@okButton="okButton"></kong-plugin-form>
<!-- <template slot="footer">-->
<!-- <a-button @click="handleCancel">取消</a-button>-->
<!-- <a-button type="primary" @click="handleOk">确定11</a-button>-->
<!-- </template>-->
</j-modal>
</template>
重点为
:okButtonProps="{ class:{‘jee-hidden’: disable} }"
和@okButton=“okButton”
data中 disable: true
method中 okButton(res) {
//确定是否显示表单的确认按钮
this.disable = res
}
KongPluginForm
<template>
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form :form="form" slot="detail">
<a-row>
<a-col :span="24">
<a-form-item label="插件名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
v-decorator="['name', { rules: [{ required: true, message: '请选择插件' }] }]"
:triggerChange="true"
placeholder="请选择插件"
dictCode="kong_plugin_name"
@change="getType"
/>
</a-form-item>
</a-col>
重点:@change=“getType”
data中 pluginName: ''
method中 //当切换plugin类型的时候,得到他的值
getType() {
this.$nextTick(() => {
console.log('form:{}', this.form.getFieldValue('name'));
if (typeof this.form.getFieldValue('name') == 'undefined' || JSON.stringify(this.form.getFieldValue('name')) == "{}") {
//没有选择插件类型名的话,禁掉提交功能
this.$emit('okButton', true)
} else {
this.$emit('okButton', false)
}
});
},
效果图